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/languages/en.js b/src/languages/en.js index 538bb326b0ff..9449eadcb536 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}`, + send: ({amount}) => `Send ${amount}`, choosePaymentMethod: 'Choose payment method:', }, reportDetailsPage: { 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/IOUModal.js b/src/pages/iou/IOUModal.js index 1c5f78f32d49..f6b9a556877a 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,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 new file mode 100644 index 000000000000..62f6e4ee25bf --- /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 => ;