Add IOU Menu Options

src/CONST.js

@@ -4,6 +4,7 @@ const CONST = {
     BETAS: {
         ALL: 'all',
         CHRONOS_IN_CASH: 'chronosInCash',
+        IOU: 'IOU',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',

src/libs/OptionsListUtils.js

@@ -8,6 +8,7 @@ import {getDefaultAvatar} from './actions/PersonalDetails';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
 import {getReportParticipantsTitle} from './reportUtils';
+import Permissions from './Permissions';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
@@ -17,7 +18,6 @@ import {getReportParticipantsTitle} from './reportUtils';
 
 let currentUserLogin;
 let countryCodeByIP;
-let isInChronosBeta;
 
 // We are initializing a default avatar here so that we use the same default color for each user we are inviting. This
 // will update when the OptionsListUtils re-loads. But will stay the same color for the life of the JS session.
@@ -130,11 +130,6 @@ Onyx.connect({
     callback: val => countryCodeByIP = val || 1,
 });
 
-Onyx.connect({
-    key: ONYXKEYS.BETAS,
-    callback: val => isInChronosBeta = _.contains(val, CONST.BETAS.CHRONOS_IN_CASH) || _.contains(val, CONST.BETAS.ALL),
-});
-
 /**
  * Searches for a match when provided with a value
  *
@@ -293,7 +288,7 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
             && personalDetailsOptions.length === 0
             && _.every(selectedOptions, option => option.login !== searchValue)
             && (Str.isValidEmail(searchValue) || Str.isValidPhone(searchValue))
-            && (searchValue !== CONST.EMAIL.CHRONOS || isInChronosBeta)
+            && (searchValue !== CONST.EMAIL.CHRONOS || Permissions.canUseChronos())
     ) {
         // If the phone number doesn't have an international code then let's prefix it with the
         // current users international code based on their IP address.

src/libs/Permissions.js

@@ -0,0 +1,37 @@
+import _ from 'underscore';
+import Onyx from 'react-native-onyx';
+import CONST from '../CONST';
+import ONYXKEYS from '../ONYXKEYS';
+
+let betas;
+Onyx.connect({
+    key: ONYXKEYS.BETAS,
+    callback: val => betas = val || [],
+});
+
+/**
+ * @private
+ * @returns {Boolean}
+ */
+function canUseAllBetas() {
+    return _.contains(betas, CONST.BETAS.ALL);
+}
+
+/**
+ * @returns {Boolean}
+ */
+function canUseChronos() {
+    return _.contains(betas, CONST.BETAS.CHRONOS_IN_CASH) || canUseAllBetas();
+}
+
+/**
+ * @returns {Boolean}
+ */
+function canUseIOU() {
+    return _.contains(betas, CONST.BETAS.IOU) || canUseAllBetas();
+}
+
+export default {
+    canUseChronos,
+    canUseIOU,
+};

src/pages/home/report/ReportActionCompose.js

@@ -17,7 +17,13 @@ import TextInputFocusable from '../../../components/TextInputFocusable';
 import ONYXKEYS from '../../../ONYXKEYS';
 import Icon from '../../../components/Icon';
 import {
-    Plus, Send, Emoji, Paperclip, Offline,
+    Plus,
+    Send,
+    Emoji,
+    Paperclip,
+    Offline,
+    MoneyCircle,
+    Receipt,
 } from '../../../components/Icon/Expensicons';
 import AttachmentPicker from '../../../components/AttachmentPicker';
 import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs/actions/Report';
@@ -33,6 +39,9 @@ import getButtonState from '../../../libs/getButtonState';
 import CONST from '../../../CONST';
 import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus';
 import variables from '../../../styles/variables';
+import Permissions from '../../../libs/Permissions';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
 
 const propTypes = {
     // A method to call when the form is submitted
@@ -324,6 +333,27 @@ class ReportActionCompose extends React.Component {
                                                 animationIn="fadeInUp"
                                                 animationOut="fadeOutDown"
                                                 menuItems={[
+                                                    ...(Permissions.canUseIOU() ? [
+                                                        hasMultipleParticipants
+                                                            ? {
+                                                                icon: Receipt,
+                                                                text: 'Split Bill',
+                                                                onSelected: () => {
+                                                                    Navigation.navigate(
+                                                                        ROUTES.getIouSplitRoute(this.props.reportID),
+                                                                    );
+                                                                },
+                                                            }
+                                                            : {
+                                                                icon: MoneyCircle,
+                                                                text: 'Request Money',
+                                                                onSelected: () => {
+                                                                    Navigation.navigate(
+                                                                        ROUTES.getIouRequestRoute(this.props.reportID),
+                                                                    );
+                                                                },
+                                                            },
+                                                    ] : []),
                                                     {
                                                         icon: Paperclip,
                                                         text: 'Add Attachment',
@@ -336,18 +366,6 @@ class ReportActionCompose extends React.Component {
                                                         },
                                                     },
                                                 ]}
-
-                                            /**
-                                             * Temporarily hiding IOU Modal options while Modal is incomplete. Will
-                                             * be replaced by a beta flag once IOUConfirm is completed.
-                                            menuOptions={hasMultipleParticipants
-                                                ? [
-                                                    CONST.MENU_ITEM_KEYS.SPLIT_BILL,
-                                                    CONST.MENU_ITEM_KEYS.ATTACHMENT_PICKER]
-                                                : [
-                                                    CONST.MENU_ITEM_KEYS.REQUEST_MONEY,
-                                                    CONST.MENU_ITEM_KEYS.ATTACHMENT_PICKER]}
-                                            */
                                             />
                                         </>
                                     )}

src/pages/home/sidebar/SidebarScreen.js

@@ -10,7 +10,13 @@ import ROUTES from '../../../ROUTES';
 import Timing from '../../../libs/actions/Timing';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import CONST from '../../../CONST';
-import {ChatBubble, Users} from '../../../components/Icon/Expensicons';
+import {
+    ChatBubble,
+    Users,
+    MoneyCircle,
+    Receipt,
+} from '../../../components/Icon/Expensicons';
+import Permissions from '../../../libs/Permissions';
 
 const propTypes = {
     // propTypes for withWindowDimensions
@@ -98,23 +104,26 @@ class SidebarScreen extends Component {
                                     text: 'New Chat',
                                     onSelected: () => Navigation.navigate(ROUTES.NEW_CHAT),
                                 },
+                                ...(Permissions.canUseIOU() ? [
+                                    {
+                                        icon: MoneyCircle,
+                                        text: 'Request Money',
+                                        onSelected: () => Navigation.navigate(ROUTES.IOU_REQUEST),
+                                    },
+                                ] : []),
                                 {
                                     icon: Users,
                                     text: 'New Group',
                                     onSelected: () => Navigation.navigate(ROUTES.NEW_GROUP),
                                 },
+                                ...(Permissions.canUseIOU() ? [
+                                    {
+                                        icon: Receipt,
+                                        text: 'Split Bill',
+                                        onSelected: () => Navigation.navigate(ROUTES.IOU_BILL),
+                                    },
+                                ] : []),
                             ]}
-
-                        /**
-                         * Temporarily hiding IOU Modal options while Modal is incomplete. Will
-                         * be replaced by a beta flag once IOUConfirm is completed.
-                        menuOptions={[
-                            CONST.MENU_ITEM_KEYS.NEW_CHAT,
-                            CONST.MENU_ITEM_KEYS.REQUEST_MONEY,
-                            CONST.MENU_ITEM_KEYS.NEW_GROUP,
-                            CONST.MENU_ITEM_KEYS.SPLIT_BILL,
-                        ]}
-                        */
                         />
                     </>
                 )}