From 050cdc0f38ff1d5ba282885241324a62c789b334 Mon Sep 17 00:00:00 2001 From: Nicholas Murray Date: Thu, 1 Jul 2021 16:01:44 -0700 Subject: [PATCH 1/3] Add routes, new page, modal stack navigator and link them --- src/ROUTES.js | 4 ++++ src/libs/Navigation/AppNavigator/AuthScreens.js | 7 +++++++ .../Navigation/AppNavigator/ModalStackNavigators.js | 11 +++++++++++ src/libs/Navigation/linkingConfig.js | 6 ++++++ src/pages/iou/IOUSendPage.js | 5 +++++ 5 files changed, 33 insertions(+) create mode 100644 src/pages/iou/IOUSendPage.js diff --git a/src/ROUTES.js b/src/ROUTES.js index d77cf02ed13a..6cac9992d44e 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -34,6 +34,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/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index df63a5c314f3..4f715c60332a 100644 --- 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, @@ -354,6 +355,12 @@ class AuthScreens extends React.Component { component={RequestCallModalStackNavigator} listeners={modalScreenListeners} /> + ); } diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 14f360a81d22..f2fac74d3318 100644 --- 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'; @@ -76,6 +77,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', @@ -185,6 +195,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 index 12928046940f..1931e707c762 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -104,6 +104,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/IOUSendPage.js b/src/pages/iou/IOUSendPage.js new file mode 100644 index 000000000000..6cacd162c105 --- /dev/null +++ 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 => ; From 6f83958484fe0432d7913da498543c9646d9ba0a Mon Sep 17 00:00:00 2001 From: Nicholas Murray Date: Thu, 1 Jul 2021 16:54:38 -0700 Subject: [PATCH 2/3] Add in IOUModal steps and new prop type --- src/languages/en.js | 2 ++ src/pages/iou/IOUModal.js | 10 ++++++++++ src/pages/iou/IOUSendPage.js | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/languages/en.js b/src/languages/en.js index 538bb326b0ff..b5db2d8ae8ae 100755 --- 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}`, + sent: ({amount}) => `Sent ${amount}`, choosePaymentMethod: 'Choose payment method:', }, reportDetailsPage: { diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js index 1c5f78f32d49..35323bfbac37 100755 --- 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,6 +163,9 @@ class IOUModal extends Component { getTitleForStep() { const currentStepIndex = this.state.currentStepIndex; if (currentStepIndex === 1 || currentStepIndex === 2) { + if (this.props.iouType === 'send') { + return this.props.translate('iou.sent'); + } return this.props.translate( this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', { amount: this.props.numberFormat( @@ -171,6 +178,9 @@ class IOUModal extends Component { ); } 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 index 6cacd162c105..62f6e4ee25bf 100644 --- a/src/pages/iou/IOUSendPage.js +++ b/src/pages/iou/IOUSendPage.js @@ -2,4 +2,4 @@ import React from 'react'; import IOUModal from './IOUModal'; // eslint-disable-next-line react/jsx-props-no-spreading -export default props => ; +export default props => ; From 0c1471d0e089f178611bbf2155bf609d5d9a8218 Mon Sep 17 00:00:00 2001 From: Nicholas Murray Date: Thu, 1 Jul 2021 17:11:27 -0700 Subject: [PATCH 3/3] Refactor --- src/languages/en.js | 2 +- src/pages/iou/IOUModal.js | 17 ++++++++++------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index b5db2d8ae8ae..9449eadcb536 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -148,7 +148,7 @@ export default { owes: ({manager, owner}) => `${manager} owes ${owner}`, paid: ({owner, manager}) => `${manager} paid ${owner}`, split: ({amount}) => `Split ${amount}`, - sent: ({amount}) => `Sent ${amount}`, + send: ({amount}) => `Send ${amount}`, choosePaymentMethod: 'Choose payment method:', }, reportDetailsPage: { diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js index 35323bfbac37..f6b9a556877a 100755 --- a/src/pages/iou/IOUModal.js +++ b/src/pages/iou/IOUModal.js @@ -163,17 +163,20 @@ 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.sent'); + 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, }, ); }