Merge pull request #3860 from Expensify/nmurray-add-sendmoney-page

Setup the new Send Money page and header titles
Expensify · Jul 2, 2021 · bfc14ce · bfc14ce
2 parents 824e85f + 0c1471d
commit bfc14ce
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 6 deletions.
diff --git a/src/ROUTES.js b/src/ROUTES.js
@@ -35,6 +35,10 @@ export default {
     IOU_BILL: 'iou/split/:reportID',
     getIouRequestRoute: reportID => `iou/request/${reportID}`,
     getIouSplitRoute: reportID => `iou/split/${reportID}`,
+    IOU_SEND: 'iou/send/:reportID',
+    getIOUSendRoute: reportID => `/iou/send/${reportID}`,
+    IOU_SEND_CURRENCY: 'iou/send/:reportID/currency',
+    getIouSendCurrencyRoute: reportID => `iou/send/${reportID}/currency`,
     IOU_DETAILS: 'iou/details',
     IOU_DETAILS_WITH_IOU_REPORT_ID: 'iou/details/:chatReportID/:iouReportID/',
     getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`,

diff --git a/src/languages/en.js b/src/languages/en.js
@@ -136,6 +136,7 @@ export default {
         confirm: 'Confirm',
         splitBill: 'Split Bill',
         requestMoney: 'Request Money',
+        sendMoney: 'Send Money',
         pay: 'Pay',
         viewDetails: 'View Details',
         settleExpensify: 'Pay with Expensify',
@@ -147,6 +148,7 @@ export default {
         owes: ({manager, owner}) => `${manager} owes ${owner}`,
         paid: ({owner, manager}) => `${manager} paid ${owner}`,
         split: ({amount}) => `Split ${amount}`,
+        send: ({amount}) => `Send ${amount}`,
         choosePaymentMethod: 'Choose payment method:',
         noReimbursableExpenses: 'This report has an invalid amount',
     },

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -43,6 +43,7 @@ import ValidateLoginPage from '../../../pages/ValidateLoginPage';
 import {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
+    IOUSendModalStackNavigator,
     IOUDetailsModalStackNavigator,
     DetailsModalStackNavigator,
     ReportParticipantsModalStackNavigator,
@@ -359,6 +360,12 @@ class AuthScreens extends React.Component {
                     component={RequestCallModalStackNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name="IOU_Send"
+                    options={modalScreenOptions}
+                    component={IOUSendModalStackNavigator}
+                    listeners={modalScreenListeners}
+                />
             </RootStack.Navigator>
         );
     }

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -8,6 +8,7 @@ import SearchPage from '../../../pages/SearchPage';
 import DetailsPage from '../../../pages/DetailsPage';
 import IOURequestPage from '../../../pages/iou/IOURequestPage';
 import IOUBillPage from '../../../pages/iou/IOUBillPage';
+import IOUSendPage from '../../../pages/iou/IOUSendPage';
 import IOUDetailsModal from '../../../pages/iou/IOUDetailsModal';
 import SettingsInitialPage from '../../../pages/settings/InitialPage';
 import SettingsProfilePage from '../../../pages/settings/Profile/ProfilePage';
@@ -77,6 +78,15 @@ const IOURequestModalStackNavigator = createModalStackNavigator([{
     name: 'IOU_Request_Currency',
 }]);
 
+const IOUSendModalStackNavigator = createModalStackNavigator([{
+    Component: IOUSendPage,
+    name: 'IOU_Send_Root',
+},
+{
+    Component: IOUCurrencySelection,
+    name: 'IOU_Send_Currency',
+}]);
+
 const IOUDetailsModalStackNavigator = createModalStackNavigator([{
     Component: IOUDetailsModal,
     name: 'IOU_Details_Root',
@@ -190,6 +200,7 @@ const RequestCallModalStackNavigator = createModalStackNavigator([{
 export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
+    IOUSendModalStackNavigator,
     IOUDetailsModalStackNavigator,
     DetailsModalStackNavigator,
     ReportDetailsModalStackNavigator,

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
@@ -108,6 +108,12 @@ export default {
                     IOU_Bill_Currency: ROUTES.IOU_BILL_CURRENCY,
                 },
             },
+            IOU_Send: {
+                screens: {
+                    IOU_Send_Root: ROUTES.IOU_SEND,
+                    IOU_Send_Currency: ROUTES.IOU_SEND_CURRENCY,
+                },
+            },
             IOU_Details: {
                 screens: {
                     IOU_Details_Root: ROUTES.IOU_DETAILS_WITH_IOU_REPORT_ID,

diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
@@ -29,6 +29,9 @@ const propTypes = {
     /** Whether the IOU is for a single request or a group bill split */
     hasMultipleParticipants: PropTypes.bool,
 
+    /** The type of IOU report, i.e. bill, request, send */
+    iouType: PropTypes.string,
+
     /** The report passed via the route */
     report: PropTypes.shape({
         /** Participants associated with current report */
@@ -81,6 +84,7 @@ const defaultProps = {
         preferredCurrencyCode: CONST.CURRENCY.USD,
         preferredCurrencySymbol: '$',
     },
+    iouType: '',
 };
 
 // Determines type of step to display within Modal, value provides the title for that page.
@@ -159,18 +163,27 @@ class IOUModal extends Component {
     getTitleForStep() {
         const currentStepIndex = this.state.currentStepIndex;
         if (currentStepIndex === 1 || currentStepIndex === 2) {
+            const formattedAmount = this.props.numberFormat(
+                this.state.amount, {
+                    style: 'currency',
+                    currency: this.state.selectedCurrency.currencyCode,
+                },
+            );
+            if (this.props.iouType === 'send') {
+                return this.props.translate('iou.send', {
+                    amount: formattedAmount,
+                });
+            }
             return this.props.translate(
                 this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', {
-                    amount: this.props.numberFormat(
-                        this.state.amount, {
-                            style: 'currency',
-                            currency: this.state.selectedCurrency.currencyCode,
-                        },
-                    ),
+                    amount: formattedAmount,
                 },
             );
         }
         if (currentStepIndex === 0) {
+            if (this.props.iouType === 'send') {
+                return this.props.translate('iou.sendMoney');
+            }
             return this.props.translate(this.props.hasMultipleParticipants ? 'iou.splitBill' : 'iou.requestMoney');
         }
 

diff --git a/src/pages/iou/IOUSendPage.js b/src/pages/iou/IOUSendPage.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import IOUModal from './IOUModal';
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+export default props => <IOUModal {...props} iouType="send" />;