From 38e2a0d381beffce27de6b0d8bf839af168d72c5 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 14:48:09 +0800 Subject: [PATCH 001/247] Move route and refer to constant --- src/ROUTES.ts | 2 +- src/libs/ReportUtils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index b6c210524f51..18b5c9dfcd92 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -81,6 +81,7 @@ export default { REPORT_WITH_ID: { route: 'r/:reportID?/:reportActionID?', getRoute: (reportID: string) => `r/${reportID}`}, EDIT_REQUEST: { route: 'r/:threadReportID/edit/:field', getRoute: (threadReportID: string, field: ValueOf) => `r/${threadReportID}/edit/${field}`}, EDIT_CURRENCY_REQUEST: { route: 'r/:threadReportID/edit/currency', getRoute: (threadReportID: string, currency: string, backTo: string) => `r/${threadReportID}/edit/currency?currency=${currency}&backTo=${backTo}`}, + MONEY_REQUEST_EDIT_WAYPOINT: { route: 'r/:threadReportID/edit/distance/:transactionID/waypoint/:waypointIndex', getRoute: (threadReportID: number, transactionID: string, waypointIndex: number) => `r/${threadReportID}/edit/distance/${transactionID}/waypoint/${waypointIndex}`}, REPORT_WITH_ID_DETAILS_SHARE_CODE: { route: 'r/:reportID/details/shareCode', getRoute: (reportID: string) => `r/${reportID}/details/shareCode`}, REPORT_ATTACHMENTS: { route: 'r/:reportID/attachment', getRoute: (reportID: string, source: string) => `r/${reportID}/attachment?source=${encodeURI(source)}`}, REPORT_PARTICIPANTS: { route: 'r/:reportID/participants', getRoute: (reportID: string) => `r/${reportID}/participants`}, @@ -112,7 +113,6 @@ export default { MONEY_REQUEST_WAYPOINT: { route: ':iouType/new/waypoint/:waypointIndex', getRoute: (iouType: string, waypointIndex: number) => `${iouType}/new/waypoint/${waypointIndex}`}, MONEY_REQUEST_RECEIPT: { route: ':iouType/new/receipt/:reportID?', getRoute: (iouType: string, reportID = '') => `${iouType}/new/receipt/${reportID}`}, MONEY_REQUEST_ADDRESS: { route: ':iouType/new/address/:reportID?', getRoute: (iouType: string, reportID = '') => `${iouType}/new/address/${reportID}`}, - MONEY_REQUEST_EDIT_WAYPOINT: { route: 'r/:threadReportID/edit/distance/:transactionID/waypoint/:waypointIndex', getRoute: (threadReportID: number, transactionID: string, waypointIndex: number) => `r/${threadReportID}/edit/distance/${transactionID}/waypoint/${waypointIndex}`}, MONEY_REQUEST_DISTANCE_TAB: { route: ':iouType/new/:reportID?/distance', getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance`}, MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 90b6aef15c0d..553ccf0cccc8 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -3142,7 +3142,7 @@ function parseReportRouteParams(route) { parsingRoute = parsingRoute.slice(1); } - if (!parsingRoute.startsWith(Url.addTrailingForwardSlash('r'))) { + if (!parsingRoute.startsWith(Url.addTrailingForwardSlash(ROUTES.REPORT))) { return {reportID: '', isSubReportPageRoute: false}; } From 2c518db5ae215f8e175d7dd9e29d0e74bb5092eb Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 15:06:08 +0800 Subject: [PATCH 002/247] Use a TS typeCreate a new mega route --- src/CONST.ts | 5 +++++ src/ROUTES.ts | 6 ++++++ 2 files changed, 11 insertions(+) diff --git a/src/CONST.ts b/src/CONST.ts index 6a11c18ef46c..24d43b799276 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1055,6 +1055,11 @@ const CONST = { SPLIT: 'split', REQUEST: 'request', }, + MONEY_REQUEST_FIELDS: { + SEND: 'send', + SPLIT: 'split', + REQUEST: 'request', + }, REPORT_ACTION_TYPE: { PAY: 'pay', CREATE: 'create', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 18b5c9dfcd92..fe115b7ff398 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -5,6 +5,8 @@ import CONST from './CONST'; * This is a file containing constants for all of the routes we want to be able to go to */ +type MONEY_REQUEST_FIELDS = 'amount' | 'participants' | 'confirmation' | 'date' | 'currency' | 'description' | 'category' | 'tag' | 'merchant' | 'waypoint' | 'address'; + // prettier-ignore export default { HOME: '', @@ -100,6 +102,7 @@ export default { PRIVATE_NOTES_EDIT: { route: 'r/:reportID/notes/:accountID/edit', getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit`}, // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE + // MONEY_REQUEST_DISTANCE_TAB: { route: ':iouType/new/:reportID?/distance', getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance`}, MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', + MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MONEY_REQUEST_FIELDS, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, + IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', IOU_SEND_ADD_BANK_ACCOUNT: 'send/new/add-bank-account', From a0ac162b7e0da3ebbfa7ab007b58f84ff4777c63 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 15:06:53 +0800 Subject: [PATCH 003/247] Remove unused constant --- src/CONST.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 24d43b799276..6a11c18ef46c 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1055,11 +1055,6 @@ const CONST = { SPLIT: 'split', REQUEST: 'request', }, - MONEY_REQUEST_FIELDS: { - SEND: 'send', - SPLIT: 'split', - REQUEST: 'request', - }, REPORT_ACTION_TYPE: { PAY: 'pay', CREATE: 'create', From 5ecc9ac12ce47a2186dbc53db46e19fc164221fe Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 15:30:26 +0800 Subject: [PATCH 004/247] Add a basic page for creating a request --- src/ROUTES.ts | 4 +- .../AppNavigator/ModalStackNavigators.js | 5 + src/libs/Navigation/linkingConfig.js | 4 + src/pages/CreateRequestPage.js | 104 ++++++++++++++++++ 4 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 src/pages/CreateRequestPage.js diff --git a/src/ROUTES.ts b/src/ROUTES.ts index fe115b7ff398..664fd8bdc02a 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -5,7 +5,7 @@ import CONST from './CONST'; * This is a file containing constants for all of the routes we want to be able to go to */ -type MONEY_REQUEST_FIELDS = 'amount' | 'participants' | 'confirmation' | 'date' | 'currency' | 'description' | 'category' | 'tag' | 'merchant' | 'waypoint' | 'address'; +type MoneyRequestFields = 'amount' | 'participants' | 'confirmation' | 'date' | 'currency' | 'description' | 'category' | 'tag' | 'merchant' | 'waypoint' | 'address'; // prettier-ignore export default { @@ -121,7 +121,7 @@ export default { MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', - MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MONEY_REQUEST_FIELDS, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, + MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 9b87ab604315..e28943a76b24 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -32,6 +32,7 @@ function createModalStackNavigator(screens) { } const MoneyRequestModalStackNavigator = createModalStackNavigator({ + Monee_Request: () => require('../../../pages/CreateRequestPage').default, Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, Money_Request_Participants: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default, @@ -51,6 +52,10 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator({ Money_Request_Receipt: () => require('../../../pages/EditRequestReceiptPage').default, }); +const MoneeRequestModalStackNavigator = createModalStackNavigator({ + Monee_Request: () => require('../../../pages/CreateRequestPage').default, +}); + const SplitDetailsModalStackNavigator = createModalStackNavigator({ SplitDetails_Root: () => require('../../../pages/iou/SplitBillDetailsPage').default, }); diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index aedef1d424c6..11575030fc9e 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -297,6 +297,10 @@ export default { }, MoneyRequest: { screens: { + Monee_Request: { + path: ROUTES.MONEE_REQUEST.route, + exact: true, + }, Money_Request: { path: ROUTES.MONEY_REQUEST.route, exact: true, diff --git a/src/pages/CreateRequestPage.js b/src/pages/CreateRequestPage.js new file mode 100644 index 000000000000..d994ec37d10e --- /dev/null +++ b/src/pages/CreateRequestPage.js @@ -0,0 +1,104 @@ +import React, {useEffect} from 'react'; +import PropTypes from 'prop-types'; +import lodashGet from 'lodash/get'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; +import compose from '../libs/compose'; +import CONST from '../CONST'; +import Navigation from '../libs/Navigation/Navigation'; +import ONYXKEYS from '../ONYXKEYS'; +import * as ReportActionsUtils from '../libs/ReportActionsUtils'; +import * as ReportUtils from '../libs/ReportUtils'; +import * as TransactionUtils from '../libs/TransactionUtils'; +import * as Policy from '../libs/actions/Policy'; +import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails'; +import EditRequestDescriptionPage from './EditRequestDescriptionPage'; +import EditRequestMerchantPage from './EditRequestMerchantPage'; +import EditRequestCreatedPage from './EditRequestCreatedPage'; +import EditRequestAmountPage from './EditRequestAmountPage'; +import EditRequestReceiptPage from './EditRequestReceiptPage'; +import reportPropTypes from './reportPropTypes'; +import * as IOU from '../libs/actions/IOU'; +import * as CurrencyUtils from '../libs/CurrencyUtils'; +import EditRequestDistancePage from './EditRequestDistancePage'; +import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; +import EditRequestCategoryPage from './EditRequestCategoryPage'; + +const propTypes = { + /** Route from navigation */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** The type of IOU being created */ + iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)).isRequired, + + /** The optimistic ID of a new transaction that is being created */ + transactionID: PropTypes.string, + + /** Which field the user is modifying */ + field: PropTypes.oneOf(['amount', 'participants', 'confirmation', 'date', 'currency', 'description', 'category', 'tag', 'merchant', 'waypoint', 'address']), + + /** reportID if a transaction is attached to a specific report */ + reportID: PropTypes.string, + }), + }).isRequired, +}; + +const defaultProps = {}; + +function CreateRequestPage({ + route: { + params: {field}, + }, +}) { + if (field === 'amount') { + return null; + } + + if (field === 'participants') { + return null; + } + + if (field === 'confirmation') { + return null; + } + + if (field === 'date') { + return null; + } + + if (field === 'currency') { + return null; + } + + if (field === 'description') { + return null; + } + + if (field === 'category') { + return null; + } + + if (field === 'tag') { + return null; + } + + if (field === 'merchant') { + return null; + } + + if (field === 'waypoint') { + return null; + } + + if (field === 'address') { + return null; + } + + return ; +} + +CreateRequestPage.displayName = 'CreateRequestPage'; +CreateRequestPage.propTypes = propTypes; +CreateRequestPage.defaultProps = defaultProps; +export default CreateRequestPage; From 92a778ea17ad867870740a5e160b318150d988af Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 15:31:52 +0800 Subject: [PATCH 005/247] Rename file --- .../AppNavigator/ModalStackNavigators.js | 4 +- .../create/CreateIOUPage.js} | 50 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) rename src/pages/{CreateRequestPage.js => iou/create/CreateIOUPage.js} (56%) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index e28943a76b24..fc3e3d47a604 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -32,7 +32,7 @@ function createModalStackNavigator(screens) { } const MoneyRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request: () => require('../../../pages/CreateRequestPage').default, + Monee_Request: () => require('../../../pages/iou/create/CreateIOUPage').default, Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, Money_Request_Participants: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default, @@ -53,7 +53,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator({ }); const MoneeRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request: () => require('../../../pages/CreateRequestPage').default, + Monee_Request: () => require('../../../pages/iou/create/CreateIOUPage').default, }); const SplitDetailsModalStackNavigator = createModalStackNavigator({ diff --git a/src/pages/CreateRequestPage.js b/src/pages/iou/create/CreateIOUPage.js similarity index 56% rename from src/pages/CreateRequestPage.js rename to src/pages/iou/create/CreateIOUPage.js index d994ec37d10e..ce9707fb3a33 100644 --- a/src/pages/CreateRequestPage.js +++ b/src/pages/iou/create/CreateIOUPage.js @@ -3,26 +3,26 @@ import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import compose from '../libs/compose'; -import CONST from '../CONST'; -import Navigation from '../libs/Navigation/Navigation'; -import ONYXKEYS from '../ONYXKEYS'; -import * as ReportActionsUtils from '../libs/ReportActionsUtils'; -import * as ReportUtils from '../libs/ReportUtils'; -import * as TransactionUtils from '../libs/TransactionUtils'; -import * as Policy from '../libs/actions/Policy'; -import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../components/withCurrentUserPersonalDetails'; -import EditRequestDescriptionPage from './EditRequestDescriptionPage'; -import EditRequestMerchantPage from './EditRequestMerchantPage'; -import EditRequestCreatedPage from './EditRequestCreatedPage'; -import EditRequestAmountPage from './EditRequestAmountPage'; -import EditRequestReceiptPage from './EditRequestReceiptPage'; -import reportPropTypes from './reportPropTypes'; -import * as IOU from '../libs/actions/IOU'; -import * as CurrencyUtils from '../libs/CurrencyUtils'; -import EditRequestDistancePage from './EditRequestDistancePage'; -import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; -import EditRequestCategoryPage from './EditRequestCategoryPage'; +import compose from '../../../libs/compose'; +import CONST from '../../../CONST'; +import Navigation from '../../../libs/Navigation/Navigation'; +import ONYXKEYS from '../../../ONYXKEYS'; +import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; +import * as ReportUtils from '../../../libs/ReportUtils'; +import * as TransactionUtils from '../../../libs/TransactionUtils'; +import * as Policy from '../../../libs/actions/Policy'; +import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails'; +import EditRequestDescriptionPage from '../../EditRequestDescriptionPage'; +import EditRequestMerchantPage from '../../EditRequestMerchantPage'; +import EditRequestCreatedPage from '../../EditRequestCreatedPage'; +import EditRequestAmountPage from '../../EditRequestAmountPage'; +import EditRequestReceiptPage from '../../EditRequestReceiptPage'; +import reportPropTypes from '../../reportPropTypes'; +import * as IOU from '../../../libs/actions/IOU'; +import * as CurrencyUtils from '../../../libs/CurrencyUtils'; +import EditRequestDistancePage from '../../EditRequestDistancePage'; +import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; +import EditRequestCategoryPage from '../../EditRequestCategoryPage'; const propTypes = { /** Route from navigation */ @@ -46,7 +46,7 @@ const propTypes = { const defaultProps = {}; -function CreateRequestPage({ +function CreateIOUPage({ route: { params: {field}, }, @@ -98,7 +98,7 @@ function CreateRequestPage({ return ; } -CreateRequestPage.displayName = 'CreateRequestPage'; -CreateRequestPage.propTypes = propTypes; -CreateRequestPage.defaultProps = defaultProps; -export default CreateRequestPage; +CreateIOUPage.displayName = 'CreateIOUPage'; +CreateIOUPage.propTypes = propTypes; +CreateIOUPage.defaultProps = defaultProps; +export default CreateIOUPage; From f4e483cb32f24bbcd0eba374bb7ad677b82bdbb0 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 15:44:31 +0800 Subject: [PATCH 006/247] Add pages for starting and configuring fields for new request --- src/ROUTES.ts | 1 + .../AppNavigator/ModalStackNavigators.js | 5 +- src/libs/Navigation/linkingConfig.js | 4 ++ src/libs/actions/IOU.js | 10 ++++ .../AttachmentPickerWithMenuItems.js | 5 +- .../FloatingActionButtonAndPopover.js | 12 ++++- ...CreateIOUPage.js => CreateIOUFieldPage.js} | 12 ++--- src/pages/iou/create/CreateIOUStartPage.js | 54 +++++++++++++++++++ 8 files changed, 92 insertions(+), 11 deletions(-) rename src/pages/iou/create/{CreateIOUPage.js => CreateIOUFieldPage.js} (91%) create mode 100644 src/pages/iou/create/CreateIOUStartPage.js diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 664fd8bdc02a..4ef5958ecc05 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -122,6 +122,7 @@ export default { MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, + MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`}, IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index fc3e3d47a604..cb2ff1f4e503 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -32,7 +32,8 @@ function createModalStackNavigator(screens) { } const MoneyRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request: () => require('../../../pages/iou/create/CreateIOUPage').default, + Monee_Request: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, + Monee_Request_Start: () => require('../../../pages/iou/create/CreateIOUStartPage').default, Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, Money_Request_Participants: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default, @@ -53,7 +54,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator({ }); const MoneeRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request: () => require('../../../pages/iou/create/CreateIOUPage').default, + Monee_Request: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, }); const SplitDetailsModalStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 11575030fc9e..3a4df5b4af34 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -301,6 +301,10 @@ export default { path: ROUTES.MONEE_REQUEST.route, exact: true, }, + Monee_Request_Start: { + path: ROUTES.MONEE_REQUEST_START.route, + exact: true, + }, Money_Request: { path: ROUTES.MONEY_REQUEST.route, exact: true, diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 71660ea05760..c0bfd96630d2 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2113,6 +2113,15 @@ function startMoneyRequest(iouType, reportID = '') { Navigation.navigate(ROUTES.MONEY_REQUEST.getRoute(iouType, reportID)); } +/** + * Initialize money request info and navigate to the MoneyRequest page + * @param {String} iouType + * @param {String} reportID + */ +function startMoneeRequest(iouType, reportID = '') { + Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, NumberUtils.rand64(), reportID)); +} + /** * @param {String} id */ @@ -2265,6 +2274,7 @@ export { payMoneyRequest, sendMoneyWithWallet, startMoneyRequest, + startMoneeRequest, resetMoneyRequestInfo, setMoneyRequestId, setMoneyRequestAmount, diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index 6dd3355f4a53..433357dce726 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -142,7 +142,10 @@ function AttachmentPickerWithMenuItems({ return _.map(ReportUtils.getMoneyRequestOptions(report, reportParticipantIDs, betas), (option) => ({ ...options[option], - onSelected: () => IOU.startMoneyRequest(option, report.reportID), + onSelected: () => { + // @TODO IOU.startMoneyRequest(option, report.reportID); + IOU.startMoneeRequest(option, report.reportID); + }, })); }, [betas, report, reportParticipantIDs, translate]); diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index e9ede2c9a89a..48f4cb706efe 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -190,14 +190,22 @@ function FloatingActionButtonAndPopover(props) { { icon: Expensicons.Send, text: props.translate('iou.sendMoney'), - onSelected: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.SEND)), + onSelected: () => + interceptAnonymousUser(() => { + // @TODO IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.SEND) + IOU.startMoneeRequest(CONST.IOU.MONEY_REQUEST_TYPE.SEND); + }), }, ] : []), { icon: Expensicons.MoneyCircle, text: props.translate('iou.requestMoney'), - onSelected: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)), + onSelected: () => + interceptAnonymousUser(() => { + // @TODO IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST) + IOU.startMoneeRequest(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST); + }), }, ...(Permissions.canUseTasks(props.betas) ? [ diff --git a/src/pages/iou/create/CreateIOUPage.js b/src/pages/iou/create/CreateIOUFieldPage.js similarity index 91% rename from src/pages/iou/create/CreateIOUPage.js rename to src/pages/iou/create/CreateIOUFieldPage.js index ce9707fb3a33..0b4f25102b7f 100644 --- a/src/pages/iou/create/CreateIOUPage.js +++ b/src/pages/iou/create/CreateIOUFieldPage.js @@ -33,7 +33,7 @@ const propTypes = { iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)).isRequired, /** The optimistic ID of a new transaction that is being created */ - transactionID: PropTypes.string, + transactionID: PropTypes.string.isRequired, /** Which field the user is modifying */ field: PropTypes.oneOf(['amount', 'participants', 'confirmation', 'date', 'currency', 'description', 'category', 'tag', 'merchant', 'waypoint', 'address']), @@ -46,7 +46,7 @@ const propTypes = { const defaultProps = {}; -function CreateIOUPage({ +function CreateIOUFieldPage({ route: { params: {field}, }, @@ -98,7 +98,7 @@ function CreateIOUPage({ return ; } -CreateIOUPage.displayName = 'CreateIOUPage'; -CreateIOUPage.propTypes = propTypes; -CreateIOUPage.defaultProps = defaultProps; -export default CreateIOUPage; +CreateIOUFieldPage.displayName = 'CreateIOUFieldPage'; +CreateIOUFieldPage.propTypes = propTypes; +CreateIOUFieldPage.defaultProps = defaultProps; +export default CreateIOUFieldPage; diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js new file mode 100644 index 000000000000..4a4904a99897 --- /dev/null +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -0,0 +1,54 @@ +import React, {useEffect} from 'react'; +import PropTypes from 'prop-types'; +import lodashGet from 'lodash/get'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; +import compose from '../../../libs/compose'; +import CONST from '../../../CONST'; +import Navigation from '../../../libs/Navigation/Navigation'; +import ONYXKEYS from '../../../ONYXKEYS'; +import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; +import * as ReportUtils from '../../../libs/ReportUtils'; +import * as TransactionUtils from '../../../libs/TransactionUtils'; +import * as Policy from '../../../libs/actions/Policy'; +import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails'; +import EditRequestDescriptionPage from '../../EditRequestDescriptionPage'; +import EditRequestMerchantPage from '../../EditRequestMerchantPage'; +import EditRequestCreatedPage from '../../EditRequestCreatedPage'; +import EditRequestAmountPage from '../../EditRequestAmountPage'; +import EditRequestReceiptPage from '../../EditRequestReceiptPage'; +import reportPropTypes from '../../reportPropTypes'; +import * as IOU from '../../../libs/actions/IOU'; +import * as CurrencyUtils from '../../../libs/CurrencyUtils'; +import EditRequestDistancePage from '../../EditRequestDistancePage'; +import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; +import EditRequestCategoryPage from '../../EditRequestCategoryPage'; + +const propTypes = { + /** Route from navigation */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** The type of IOU being created */ + iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)).isRequired, + + /** The optimistic ID of a new transaction that is being created */ + transactionID: PropTypes.string.isRequired, + + /** reportID if a transaction is attached to a specific report */ + reportID: PropTypes.string, + }), + }).isRequired, +}; + +const defaultProps = {}; + +function CreateIOUStartPage() { + // Show the tab selector for switching transaction type + return ; +} + +CreateIOUStartPage.displayName = 'CreateIOUStartPage'; +CreateIOUStartPage.propTypes = propTypes; +CreateIOUStartPage.defaultProps = defaultProps; +export default CreateIOUStartPage; From b0c8ca33070b1e62d3dd935f1a19a005c59e0547 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 16:02:00 +0800 Subject: [PATCH 007/247] Navigate to new IOU page --- src/libs/actions/IOU.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index c0bfd96630d2..d3cbd7d5ea63 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2119,7 +2119,14 @@ function startMoneyRequest(iouType, reportID = '') { * @param {String} reportID */ function startMoneeRequest(iouType, reportID = '') { - Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, NumberUtils.rand64(), reportID)); + // Generate a brand new transactionID + const newTransactionID = NumberUtils.rand64(); + + // Store the transaction in Onyx + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`); + + // Navigate to it + Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); } /** From deafd63a83cdcd746dafacbe5f080e89293b4503 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 16:23:35 +0800 Subject: [PATCH 008/247] Create skeleton pages for tabs --- src/pages/iou/create/CreateIOUStartPage.js | 100 +++++++++++++++++- .../iou/create/CreateIOUStartTabDistance.js | 78 ++++++++++++++ .../iou/create/CreateIOUStartTabManual.js | 78 ++++++++++++++ src/pages/iou/create/CreateIOUStartTabScan.js | 78 ++++++++++++++ 4 files changed, 330 insertions(+), 4 deletions(-) create mode 100644 src/pages/iou/create/CreateIOUStartTabDistance.js create mode 100644 src/pages/iou/create/CreateIOUStartTabManual.js create mode 100644 src/pages/iou/create/CreateIOUStartTabScan.js diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js index 4a4904a99897..0e8dfd79b7fb 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -1,4 +1,5 @@ -import React, {useEffect} from 'react'; +import React, {useEffect, useState} from 'react'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; @@ -23,6 +24,17 @@ import * as CurrencyUtils from '../../../libs/CurrencyUtils'; import EditRequestDistancePage from '../../EditRequestDistancePage'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; import EditRequestCategoryPage from '../../EditRequestCategoryPage'; +import ScreenWrapper from '../../../components/ScreenWrapper'; +import useLocalize from '../../../hooks/useLocalize'; +import styles from '../../../styles/styles'; +import themeColors from '../../../styles/themes/default'; +import DragAndDropProvider from '../../../components/DragAndDrop/Provider'; +import * as IOUUtils from '../../../libs/IOUUtils'; +import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; +import TabSelector from '../../../components/TabSelector/TabSelector'; +import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigator'; +import NewRequestAmountPage from '../steps/NewRequestAmountPage'; +import CreateIOUStartTabManual from './CreateIOUStartTabManual'; const propTypes = { /** Route from navigation */ @@ -43,9 +55,89 @@ const propTypes = { const defaultProps = {}; -function CreateIOUStartPage() { - // Show the tab selector for switching transaction type - return ; +function CreateIOUStartPage({ + route: { + params: {iouType, reportID}, + }, +}) { + const {translate} = useLocalize(); + const [isDraggingOver, setIsDraggingOver] = useState(false); + const title = { + [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST]: translate('iou.requestMoney'), + [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'), + [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]: translate('iou.splitBill'), + }; + // @TODO const isFromGlobalCreate = !reportID; + // @TODO const isExpenseRequest = ReportUtils.isPolicyExpenseChat(props.report); + // @TODO const shouldDisplayDistanceRequest = isExpenseRequest || isFromGlobalCreate; + const shouldDisplayDistanceRequest = true; + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + + + + + {iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? ( + ( + + )} + > + + + {shouldDisplayDistanceRequest && ( + + )} + + ) : ( + + )} + + + + )} + + ); } CreateIOUStartPage.displayName = 'CreateIOUStartPage'; diff --git a/src/pages/iou/create/CreateIOUStartTabDistance.js b/src/pages/iou/create/CreateIOUStartTabDistance.js new file mode 100644 index 000000000000..14afb47d84df --- /dev/null +++ b/src/pages/iou/create/CreateIOUStartTabDistance.js @@ -0,0 +1,78 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import useLocalize from '../../../hooks/useLocalize'; +import * as IOUUtils from '../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../styles/styles'; +import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../components/ScreenWrapper'; + +const propTypes = { + /** React Navigation route */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** The type of IOU report, i.e. bill, request, send */ + iouType: PropTypes.string, + + /** The optimistic ID of a new transaction that is being created */ + transactionID: PropTypes.string.isRequired, + + /** The report ID of the IOU */ + reportID: PropTypes.string, + }), + }).isRequired, +}; + +const defaultProps = {}; + +function CreateIOUStartTabDistance() { + const {translate} = useLocalize(); + + // @TODO const content = ( + // (textInput.current = e)} + // onCurrencyButtonPress={navigateToCurrencySelectionPage} + // onSubmitButtonPress={navigateToNextPage} + // /> + // ); + const content = null; + + // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). + // The rest of the cases this component is rendered through which has it's own ScreenWrapper + if (!isEditing) { + return content; + } + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + + + + {content} + + + )} + + ); +} + +CreateIOUStartTabDistance.propTypes = propTypes; +CreateIOUStartTabDistance.defaultProps = defaultProps; +CreateIOUStartTabDistance.displayName = 'CreateIOUStartTabDistance'; + +export default withOnyx({})(CreateIOUStartTabDistance); diff --git a/src/pages/iou/create/CreateIOUStartTabManual.js b/src/pages/iou/create/CreateIOUStartTabManual.js new file mode 100644 index 000000000000..e8e6173c9126 --- /dev/null +++ b/src/pages/iou/create/CreateIOUStartTabManual.js @@ -0,0 +1,78 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import useLocalize from '../../../hooks/useLocalize'; +import * as IOUUtils from '../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../styles/styles'; +import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../components/ScreenWrapper'; + +const propTypes = { + /** React Navigation route */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** The type of IOU report, i.e. bill, request, send */ + iouType: PropTypes.string, + + /** The optimistic ID of a new transaction that is being created */ + transactionID: PropTypes.string.isRequired, + + /** The report ID of the IOU */ + reportID: PropTypes.string, + }), + }).isRequired, +}; + +const defaultProps = {}; + +function CreateIOUStartTabManual() { + const {translate} = useLocalize(); + + // @TODO const content = ( + // (textInput.current = e)} + // onCurrencyButtonPress={navigateToCurrencySelectionPage} + // onSubmitButtonPress={navigateToNextPage} + // /> + // ); + const content = null; + + // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). + // The rest of the cases this component is rendered through which has it's own ScreenWrapper + if (!isEditing) { + return content; + } + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + + + + {content} + + + )} + + ); +} + +CreateIOUStartTabManual.propTypes = propTypes; +CreateIOUStartTabManual.defaultProps = defaultProps; +CreateIOUStartTabManual.displayName = 'CreateIOUStartTabManual'; + +export default withOnyx({})(CreateIOUStartTabManual); diff --git a/src/pages/iou/create/CreateIOUStartTabScan.js b/src/pages/iou/create/CreateIOUStartTabScan.js new file mode 100644 index 000000000000..8ac759f1f342 --- /dev/null +++ b/src/pages/iou/create/CreateIOUStartTabScan.js @@ -0,0 +1,78 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import useLocalize from '../../../hooks/useLocalize'; +import * as IOUUtils from '../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../styles/styles'; +import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../components/ScreenWrapper'; + +const propTypes = { + /** React Navigation route */ + route: PropTypes.shape({ + /** Params from the route */ + params: PropTypes.shape({ + /** The type of IOU report, i.e. bill, request, send */ + iouType: PropTypes.string, + + /** The optimistic ID of a new transaction that is being created */ + transactionID: PropTypes.string.isRequired, + + /** The report ID of the IOU */ + reportID: PropTypes.string, + }), + }).isRequired, +}; + +const defaultProps = {}; + +function CreateIOUStartTabScan() { + const {translate} = useLocalize(); + + // @TODO const content = ( + // (textInput.current = e)} + // onCurrencyButtonPress={navigateToCurrencySelectionPage} + // onSubmitButtonPress={navigateToNextPage} + // /> + // ); + const content = null; + + // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). + // The rest of the cases this component is rendered through which has it's own ScreenWrapper + if (!isEditing) { + return content; + } + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + + + + {content} + + + )} + + ); +} + +CreateIOUStartTabScan.propTypes = propTypes; +CreateIOUStartTabScan.defaultProps = defaultProps; +CreateIOUStartTabScan.displayName = 'CreateIOUStartTabScan'; + +export default withOnyx({})(CreateIOUStartTabScan); From 6264dae27ea151bede7b08f7641455e3c9aa0173 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 16:36:09 +0800 Subject: [PATCH 009/247] WIP to get tab selector working --- src/pages/iou/create/CreateIOUStartPage.js | 35 ++++++++++++++----- .../iou/create/CreateIOUStartTabDistance.js | 17 ++++++--- .../iou/create/CreateIOUStartTabManual.js | 17 ++++++--- src/pages/iou/create/CreateIOUStartTabScan.js | 17 ++++++--- 4 files changed, 63 insertions(+), 23 deletions(-) diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js index 0e8dfd79b7fb..b7f67a0b9694 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -34,7 +34,9 @@ import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import TabSelector from '../../../components/TabSelector/TabSelector'; import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigator'; import NewRequestAmountPage from '../steps/NewRequestAmountPage'; +import CreateIOUStartTabScan from './CreateIOUStartTabScan'; import CreateIOUStartTabManual from './CreateIOUStartTabManual'; +import CreateIOUStartTabDistance from './CreateIOUStartTabDistance'; const propTypes = { /** Route from navigation */ @@ -51,14 +53,22 @@ const propTypes = { reportID: PropTypes.string, }), }).isRequired, + + /* Onyx Props */ + /** Which tab has been selected */ + selectedTab: PropTypes.string, }; -const defaultProps = {}; +const defaultProps = { + selectedTab: CONST.TAB.SCAN, +}; function CreateIOUStartPage({ + route, route: { params: {iouType, reportID}, }, + selectedTab, }) { const {translate} = useLocalize(); const [isDraggingOver, setIsDraggingOver] = useState(false); @@ -90,7 +100,7 @@ function CreateIOUStartPage({ {({safeAreaPaddingBottomStyle}) => ( @@ -101,12 +111,13 @@ function CreateIOUStartPage({ {iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? ( ( {}} position={position} /> )} @@ -118,19 +129,19 @@ function CreateIOUStartPage({ /> {shouldDisplayDistanceRequest && ( )} ) : ( - + )} @@ -143,4 +154,12 @@ function CreateIOUStartPage({ CreateIOUStartPage.displayName = 'CreateIOUStartPage'; CreateIOUStartPage.propTypes = propTypes; CreateIOUStartPage.defaultProps = defaultProps; -export default CreateIOUStartPage; + +export default withOnyx({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, + }, + selectedTab: { + key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`, + }, +})(CreateIOUStartPage); diff --git a/src/pages/iou/create/CreateIOUStartTabDistance.js b/src/pages/iou/create/CreateIOUStartTabDistance.js index 14afb47d84df..3b09dd054582 100644 --- a/src/pages/iou/create/CreateIOUStartTabDistance.js +++ b/src/pages/iou/create/CreateIOUStartTabDistance.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, Text} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import useLocalize from '../../../hooks/useLocalize'; @@ -28,8 +28,13 @@ const propTypes = { const defaultProps = {}; -function CreateIOUStartTabDistance() { +function CreateIOUStartTabDistance({ + route: { + params: {iouType}, + }, +}) { const {translate} = useLocalize(); + const isEditing = false; // @TODO const content = ( // // ); - const content = null; + const content = Distance Tab; // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). // The rest of the cases this component is rendered through which has it's own ScreenWrapper @@ -53,7 +58,8 @@ function CreateIOUStartTabDistance() { {}} testID={CreateIOUStartTabDistance.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -61,7 +67,8 @@ function CreateIOUStartTabDistance() { {}} /> {content} diff --git a/src/pages/iou/create/CreateIOUStartTabManual.js b/src/pages/iou/create/CreateIOUStartTabManual.js index e8e6173c9126..e6749ccc6ef5 100644 --- a/src/pages/iou/create/CreateIOUStartTabManual.js +++ b/src/pages/iou/create/CreateIOUStartTabManual.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, Text} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import useLocalize from '../../../hooks/useLocalize'; @@ -28,8 +28,13 @@ const propTypes = { const defaultProps = {}; -function CreateIOUStartTabManual() { +function CreateIOUStartTabManual({ + route: { + params: {iouType}, + }, +}) { const {translate} = useLocalize(); + const isEditing = false; // @TODO const content = ( // // ); - const content = null; + const content = Manual Tab; // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). // The rest of the cases this component is rendered through which has it's own ScreenWrapper @@ -53,7 +58,8 @@ function CreateIOUStartTabManual() { {}} testID={CreateIOUStartTabManual.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -61,7 +67,8 @@ function CreateIOUStartTabManual() { {}} /> {content} diff --git a/src/pages/iou/create/CreateIOUStartTabScan.js b/src/pages/iou/create/CreateIOUStartTabScan.js index 8ac759f1f342..c5a066507ec0 100644 --- a/src/pages/iou/create/CreateIOUStartTabScan.js +++ b/src/pages/iou/create/CreateIOUStartTabScan.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, Text} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import useLocalize from '../../../hooks/useLocalize'; @@ -28,8 +28,13 @@ const propTypes = { const defaultProps = {}; -function CreateIOUStartTabScan() { +function CreateIOUStartTabScan({ + route: { + params: {iouType}, + }, +}) { const {translate} = useLocalize(); + const isEditing = false; // @TODO const content = ( // // ); - const content = null; + const content = Scan Tab; // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). // The rest of the cases this component is rendered through which has it's own ScreenWrapper @@ -53,7 +58,8 @@ function CreateIOUStartTabScan() { {}} testID={CreateIOUStartTabScan.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -61,7 +67,8 @@ function CreateIOUStartTabScan() { {}} /> {content} From 5622e0ef6f8d8bb4500149390c8e5a79908700a5 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 16:41:49 +0800 Subject: [PATCH 010/247] Clean up imports --- src/pages/iou/create/CreateIOUStartPage.js | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js index b7f67a0b9694..e53f46285e38 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -1,29 +1,12 @@ -import React, {useEffect, useState} from 'react'; +import React, {useState} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import compose from '../../../libs/compose'; import CONST from '../../../CONST'; import Navigation from '../../../libs/Navigation/Navigation'; import ONYXKEYS from '../../../ONYXKEYS'; -import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; -import * as ReportUtils from '../../../libs/ReportUtils'; -import * as TransactionUtils from '../../../libs/TransactionUtils'; -import * as Policy from '../../../libs/actions/Policy'; -import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails'; -import EditRequestDescriptionPage from '../../EditRequestDescriptionPage'; -import EditRequestMerchantPage from '../../EditRequestMerchantPage'; -import EditRequestCreatedPage from '../../EditRequestCreatedPage'; -import EditRequestAmountPage from '../../EditRequestAmountPage'; -import EditRequestReceiptPage from '../../EditRequestReceiptPage'; -import reportPropTypes from '../../reportPropTypes'; -import * as IOU from '../../../libs/actions/IOU'; -import * as CurrencyUtils from '../../../libs/CurrencyUtils'; -import EditRequestDistancePage from '../../EditRequestDistancePage'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; -import EditRequestCategoryPage from '../../EditRequestCategoryPage'; import ScreenWrapper from '../../../components/ScreenWrapper'; import useLocalize from '../../../hooks/useLocalize'; import styles from '../../../styles/styles'; @@ -33,7 +16,6 @@ import * as IOUUtils from '../../../libs/IOUUtils'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import TabSelector from '../../../components/TabSelector/TabSelector'; import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigator'; -import NewRequestAmountPage from '../steps/NewRequestAmountPage'; import CreateIOUStartTabScan from './CreateIOUStartTabScan'; import CreateIOUStartTabManual from './CreateIOUStartTabManual'; import CreateIOUStartTabDistance from './CreateIOUStartTabDistance'; From 094cc2e79687467603fac2b7d44a9c234b5e7384 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 17:26:14 +0800 Subject: [PATCH 011/247] Get the tabs working with navigation --- src/CONST.ts | 5 ++++ src/ROUTES.ts | 5 ++-- src/components/TabSelector/TabSelector.js | 6 ++--- .../AppNavigator/ModalStackNavigators.js | 1 + src/libs/Navigation/linkingConfig.js | 4 +++ src/libs/actions/IOU.js | 4 +-- src/pages/iou/create/CreateIOUStartPage.js | 16 +++++------- .../iou/create/CreateIOUStartTabDistance.js | 26 +++---------------- .../iou/create/CreateIOUStartTabManual.js | 26 +++---------------- src/pages/iou/create/CreateIOUStartTabScan.js | 26 +++---------------- 10 files changed, 37 insertions(+), 82 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 6a11c18ef46c..1178ef47bd02 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2613,6 +2613,11 @@ const CONST = { NEW_CHAT: 'chat', NEW_ROOM: 'room', RECEIPT_TAB_ID: 'ReceiptTab', + MANUAL: 'manual', // @TODO remove + SCAN: 'scan', // @TODO remove + DISTANCE: 'distance', // @TODO remove + }, + TAB_REQUEST: { MANUAL: 'manual', SCAN: 'scan', DISTANCE: 'distance', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 4ef5958ecc05..f88abce2d56d 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -121,8 +121,9 @@ export default { MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', - MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, - MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`}, + MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, + MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`}, + MONEE_REQUEST_START_TAB: { route: ':iouType/:transactionID/start/:tabName/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, tabName: ValueOf, reportID = '') => `${iouType}/${transactionID}/start/${tabName}/${reportID}`}, IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index 79cd1a6dd17d..36d017000959 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -38,15 +38,15 @@ const defaultProps = { const getIconAndTitle = (route, translate) => { switch (route) { - case CONST.TAB.MANUAL: + case CONST.TAB_REQUEST.MANUAL: return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')}; - case CONST.TAB.SCAN: + case CONST.TAB_REQUEST.SCAN: return {icon: Expensicons.Receipt, title: translate('tabSelector.scan')}; case CONST.TAB.NEW_CHAT: return {icon: Expensicons.User, title: translate('tabSelector.chat')}; case CONST.TAB.NEW_ROOM: return {icon: Expensicons.Hashtag, title: translate('tabSelector.room')}; - case CONST.TAB.DISTANCE: + case CONST.TAB_REQUEST.DISTANCE: return {icon: Expensicons.Car, title: translate('common.distance')}; default: throw new Error(`Route ${route} has no icon nor title set.`); diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index cb2ff1f4e503..23b030d87c11 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -34,6 +34,7 @@ function createModalStackNavigator(screens) { const MoneyRequestModalStackNavigator = createModalStackNavigator({ Monee_Request: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, Monee_Request_Start: () => require('../../../pages/iou/create/CreateIOUStartPage').default, + Monee_Request_Start_Tab: () => require('../../../pages/iou/create/CreateIOUStartPage').default, Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, Money_Request_Participants: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 3a4df5b4af34..b1f9ed2b0b7a 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -305,6 +305,10 @@ export default { path: ROUTES.MONEE_REQUEST_START.route, exact: true, }, + Monee_Request_Start_Tabs: { + path: ROUTES.MONEE_REQUEST_START_TAB.route, + exact: true, + }, Money_Request: { path: ROUTES.MONEY_REQUEST.route, exact: true, diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index d3cbd7d5ea63..750787d3ee53 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2122,8 +2122,8 @@ function startMoneeRequest(iouType, reportID = '') { // Generate a brand new transactionID const newTransactionID = NumberUtils.rand64(); - // Store the transaction in Onyx - Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`); + // Store the transaction in Onyx and mark it as not saved so it can be cleaned up later + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, {wasSaved: false}); // Navigate to it Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js index e53f46285e38..f3ab5c509cbe 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -1,3 +1,4 @@ +// @TODO cleanup - file was made from MoneyRequestSelectorPage import React, {useState} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; @@ -42,7 +43,7 @@ const propTypes = { }; const defaultProps = { - selectedTab: CONST.TAB.SCAN, + selectedTab: CONST.TAB_REQUEST.SCAN, }; function CreateIOUStartPage({ @@ -82,7 +83,7 @@ function CreateIOUStartPage({ {({safeAreaPaddingBottomStyle}) => ( @@ -105,25 +106,22 @@ function CreateIOUStartPage({ )} > {shouldDisplayDistanceRequest && ( )} ) : ( - + )} diff --git a/src/pages/iou/create/CreateIOUStartTabDistance.js b/src/pages/iou/create/CreateIOUStartTabDistance.js index 3b09dd054582..64eb2db7d5b4 100644 --- a/src/pages/iou/create/CreateIOUStartTabDistance.js +++ b/src/pages/iou/create/CreateIOUStartTabDistance.js @@ -1,7 +1,7 @@ import React from 'react'; import {View, Text} from 'react-native'; -import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; +import {useRoute} from '@react-navigation/native'; import useLocalize from '../../../hooks/useLocalize'; import * as IOUUtils from '../../../libs/IOUUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; @@ -9,30 +9,12 @@ import styles from '../../../styles/styles'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; -const propTypes = { - /** React Navigation route */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, - - /** The optimistic ID of a new transaction that is being created */ - transactionID: PropTypes.string.isRequired, - - /** The report ID of the IOU */ - reportID: PropTypes.string, - }), - }).isRequired, -}; +const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabDistance({ - route: { - params: {iouType}, - }, -}) { +function CreateIOUStartTabDistance() { + const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; diff --git a/src/pages/iou/create/CreateIOUStartTabManual.js b/src/pages/iou/create/CreateIOUStartTabManual.js index e6749ccc6ef5..c0fab7bccd92 100644 --- a/src/pages/iou/create/CreateIOUStartTabManual.js +++ b/src/pages/iou/create/CreateIOUStartTabManual.js @@ -1,7 +1,7 @@ import React from 'react'; import {View, Text} from 'react-native'; -import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; +import {useRoute} from '@react-navigation/native'; import useLocalize from '../../../hooks/useLocalize'; import * as IOUUtils from '../../../libs/IOUUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; @@ -9,30 +9,12 @@ import styles from '../../../styles/styles'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; -const propTypes = { - /** React Navigation route */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, - - /** The optimistic ID of a new transaction that is being created */ - transactionID: PropTypes.string.isRequired, - - /** The report ID of the IOU */ - reportID: PropTypes.string, - }), - }).isRequired, -}; +const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabManual({ - route: { - params: {iouType}, - }, -}) { +function CreateIOUStartTabManual() { + const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; diff --git a/src/pages/iou/create/CreateIOUStartTabScan.js b/src/pages/iou/create/CreateIOUStartTabScan.js index c5a066507ec0..974ebaa5b37f 100644 --- a/src/pages/iou/create/CreateIOUStartTabScan.js +++ b/src/pages/iou/create/CreateIOUStartTabScan.js @@ -1,7 +1,7 @@ import React from 'react'; import {View, Text} from 'react-native'; -import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; +import {useRoute} from '@react-navigation/native'; import useLocalize from '../../../hooks/useLocalize'; import * as IOUUtils from '../../../libs/IOUUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; @@ -9,30 +9,12 @@ import styles from '../../../styles/styles'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; -const propTypes = { - /** React Navigation route */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, - - /** The optimistic ID of a new transaction that is being created */ - transactionID: PropTypes.string.isRequired, - - /** The report ID of the IOU */ - reportID: PropTypes.string, - }), - }).isRequired, -}; +const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabScan({ - route: { - params: {iouType}, - }, -}) { +function CreateIOUStartTabScan() { + const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; From 3d1193c51faf023aa502c20784e5ca1ec932951e Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 21:37:00 +0800 Subject: [PATCH 012/247] Get routes working --- src/ROUTES.ts | 5 ++-- .../AppNavigator/ModalStackNavigators.js | 11 +++------ src/libs/Navigation/linkingConfig.js | 8 ++----- src/libs/actions/IOU.js | 1 + src/pages/iou/create/CreateIOUStartPage.js | 23 ++++++++----------- 5 files changed, 18 insertions(+), 30 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index f88abce2d56d..bfae518a70ea 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -121,9 +121,8 @@ export default { MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', - MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, - MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`}, - MONEE_REQUEST_START_TAB: { route: ':iouType/:transactionID/start/:tabName/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, tabName: ValueOf, reportID = '') => `${iouType}/${transactionID}/start/${tabName}/${reportID}`}, + MONEE_REQUEST_START: { route: 'create/:iouType/:transactionID/start/:reportID?/:tabName?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `create/${iouType}/${transactionID}/start/${reportID}`}, + MONEE_REQUEST_FIELD: { route: 'create/:iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `create/${iouType}/${transactionID}/${field}/${reportID}`}, IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 23b030d87c11..be8eaaf705e9 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -32,10 +32,9 @@ function createModalStackNavigator(screens) { } const MoneyRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, Monee_Request_Start: () => require('../../../pages/iou/create/CreateIOUStartPage').default, - Monee_Request_Start_Tab: () => require('../../../pages/iou/create/CreateIOUStartPage').default, - Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, + Monee_Request_Field: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, + /* @TODO remove Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, Money_Request_Participants: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default, Money_Request_Confirmation: () => require('../../../pages/iou/steps/MoneyRequestConfirmPage').default, @@ -51,11 +50,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator({ Money_Request_Waypoint: () => require('../../../pages/iou/NewDistanceRequestWaypointEditorPage').default, Money_Request_Edit_Waypoint: () => require('../../../pages/iou/MoneyRequestEditWaypointPage').default, Money_Request_Address: () => require('../../../pages/iou/NewDistanceRequestPage').default, - Money_Request_Receipt: () => require('../../../pages/EditRequestReceiptPage').default, -}); - -const MoneeRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, + Money_Request_Receipt: () => require('../../../pages/EditRequestReceiptPage').default,*/ }); const SplitDetailsModalStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index b1f9ed2b0b7a..6fbcc782004e 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -297,16 +297,12 @@ export default { }, MoneyRequest: { screens: { - Monee_Request: { - path: ROUTES.MONEE_REQUEST.route, - exact: true, - }, Monee_Request_Start: { path: ROUTES.MONEE_REQUEST_START.route, exact: true, }, - Monee_Request_Start_Tabs: { - path: ROUTES.MONEE_REQUEST_START_TAB.route, + Monee_Request_Field: { + path: ROUTES.MONEE_REQUEST_FIELD.route, exact: true, }, Money_Request: { diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 750787d3ee53..e5f59906027a 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2126,6 +2126,7 @@ function startMoneeRequest(iouType, reportID = '') { Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, {wasSaved: false}); // Navigate to it + console.log('[tim]', ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); } diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js index f3ab5c509cbe..8befef00fc93 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -4,6 +4,7 @@ import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import lodashGet from 'lodash/get'; import CONST from '../../../CONST'; import Navigation from '../../../libs/Navigation/Navigation'; import ONYXKEYS from '../../../ONYXKEYS'; @@ -32,8 +33,11 @@ const propTypes = { /** The optimistic ID of a new transaction that is being created */ transactionID: PropTypes.string.isRequired, - /** reportID if a transaction is attached to a specific report */ + /** The ID of a report the transaction is attached to (can be null if the user is starting from the global create) */ reportID: PropTypes.string, + + /** The ID of the currently selected tab */ + tabName: PropTypes.oneOf(_.values(CONST.TAB_REQUEST)), }), }).isRequired, @@ -46,15 +50,11 @@ const defaultProps = { selectedTab: CONST.TAB_REQUEST.SCAN, }; -function CreateIOUStartPage({ - route, - route: { - params: {iouType, reportID}, - }, - selectedTab, -}) { +function CreateIOUStartPage({route}) { const {translate} = useLocalize(); const [isDraggingOver, setIsDraggingOver] = useState(false); + const iouType = lodashGet(route, 'params.iouType'); + const tabName = lodashGet(route, 'params.tabName'); const title = { [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST]: translate('iou.requestMoney'), [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'), @@ -83,7 +83,7 @@ function CreateIOUStartPage({ {({safeAreaPaddingBottomStyle}) => ( @@ -94,7 +94,7 @@ function CreateIOUStartPage({ {iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? ( ( `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, }, - selectedTab: { - key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`, - }, })(CreateIOUStartPage); From 1429bc5caf0ab0c8f6c9b424662a320550851ed1 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 21:38:53 +0800 Subject: [PATCH 013/247] Swap where transaction ID is in route --- src/ROUTES.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index bfae518a70ea..568da05c1484 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -121,8 +121,8 @@ export default { MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', - MONEE_REQUEST_START: { route: 'create/:iouType/:transactionID/start/:reportID?/:tabName?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `create/${iouType}/${transactionID}/start/${reportID}`}, - MONEE_REQUEST_FIELD: { route: 'create/:iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `create/${iouType}/${transactionID}/${field}/${reportID}`}, + MONEE_REQUEST_START: { route: 'create/:iouType/start/:transactionID/:reportID?/:tabName?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `create/${iouType}/start/${transactionID}/${reportID}`}, + MONEE_REQUEST_FIELD: { route: 'create/:iouType/:field/:transactionID/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `create/${iouType}/${field}/${transactionID}/${reportID}`}, IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', From 4e1ad3e0cce3669f0f836b64d6bcef3ef2eded4a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 22:02:14 +0800 Subject: [PATCH 014/247] Clean up styles and move code to another component --- src/ROUTES.ts | 7 +- src/libs/actions/IOU.js | 5 +- src/pages/iou/create/CreateIOUStartPage.js | 68 ++++--------------- src/pages/iou/create/CreateIOUStartRequest.js | 56 +++++++++++++++ src/styles/styles.js | 4 ++ 5 files changed, 81 insertions(+), 59 deletions(-) create mode 100644 src/pages/iou/create/CreateIOUStartRequest.js diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 568da05c1484..a75417a0bd4e 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -116,13 +116,14 @@ export default { MONEY_REQUEST_WAYPOINT: { route: ':iouType/new/waypoint/:waypointIndex', getRoute: (iouType: string, waypointIndex: number) => `${iouType}/new/waypoint/${waypointIndex}`}, MONEY_REQUEST_RECEIPT: { route: ':iouType/new/receipt/:reportID?', getRoute: (iouType: string, reportID = '') => `${iouType}/new/receipt/${reportID}`}, MONEY_REQUEST_ADDRESS: { route: ':iouType/new/address/:reportID?', getRoute: (iouType: string, reportID = '') => `${iouType}/new/address/${reportID}`}, - // --> MONEY_REQUEST_DISTANCE_TAB: { route: ':iouType/new/:reportID?/distance', getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance`}, MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', + // --> - MONEE_REQUEST_START: { route: 'create/:iouType/start/:transactionID/:reportID?/:tabName?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `create/${iouType}/start/${transactionID}/${reportID}`}, - MONEE_REQUEST_FIELD: { route: 'create/:iouType/:field/:transactionID/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `create/${iouType}/${field}/${transactionID}/${reportID}`}, + // @TODO remove "create" from the front of the route + MONEE_REQUEST_START: { route: 'create/:iouType/start/:transactionID/:reportID?/:selectedTab?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `create/${iouType}/start/${transactionID}/${reportID}`}, + MONEE_REQUEST_FIELD: { route: 'create/:iouType/:field/:transactionID/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `create/${iouType}/${field}/${transactionID}/${reportID}`}, IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index e5f59906027a..050134a188cc 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2120,13 +2120,12 @@ function startMoneyRequest(iouType, reportID = '') { */ function startMoneeRequest(iouType, reportID = '') { // Generate a brand new transactionID - const newTransactionID = NumberUtils.rand64(); + const newTransactionID = 'new'; // Store the transaction in Onyx and mark it as not saved so it can be cleaned up later - Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, {wasSaved: false}); + Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, {wasSaved: false}); // Navigate to it - console.log('[tim]', ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); } diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js index 8befef00fc93..b03b74d43085 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -21,6 +21,7 @@ import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigato import CreateIOUStartTabScan from './CreateIOUStartTabScan'; import CreateIOUStartTabManual from './CreateIOUStartTabManual'; import CreateIOUStartTabDistance from './CreateIOUStartTabDistance'; +import CreateIOUStartRequest from './CreateIOUStartRequest'; const propTypes = { /** Route from navigation */ @@ -37,90 +38,51 @@ const propTypes = { reportID: PropTypes.string, /** The ID of the currently selected tab */ - tabName: PropTypes.oneOf(_.values(CONST.TAB_REQUEST)), + selectedTab: PropTypes.oneOf(_.values(CONST.TAB_REQUEST)), }), }).isRequired, - - /* Onyx Props */ - /** Which tab has been selected */ - selectedTab: PropTypes.string, }; -const defaultProps = { - selectedTab: CONST.TAB_REQUEST.SCAN, -}; +const defaultProps = {}; function CreateIOUStartPage({route}) { const {translate} = useLocalize(); const [isDraggingOver, setIsDraggingOver] = useState(false); const iouType = lodashGet(route, 'params.iouType'); - const tabName = lodashGet(route, 'params.tabName'); - const title = { + const selectedTab = lodashGet(route, 'params.selectedTab'); + const reportID = lodashGet(route, 'params.reportID'); + const tabTitles = { [CONST.IOU.MONEY_REQUEST_TYPE.REQUEST]: translate('iou.requestMoney'), [CONST.IOU.MONEY_REQUEST_TYPE.SEND]: translate('iou.sendMoney'), [CONST.IOU.MONEY_REQUEST_TYPE.SPLIT]: translate('iou.splitBill'), }; - // @TODO const isFromGlobalCreate = !reportID; - // @TODO const isExpenseRequest = ReportUtils.isPolicyExpenseChat(props.report); - // @TODO const shouldDisplayDistanceRequest = isExpenseRequest || isFromGlobalCreate; - const shouldDisplayDistanceRequest = true; return ( {({safeAreaPaddingBottomStyle}) => ( + {iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? ( - ( - {}} - position={position} - /> - )} - > - - - {shouldDisplayDistanceRequest && ( - - )} - + ) : ( + // @TODO see if this is necessary and if there are any routes using it )} diff --git a/src/pages/iou/create/CreateIOUStartRequest.js b/src/pages/iou/create/CreateIOUStartRequest.js new file mode 100644 index 000000000000..8382be138934 --- /dev/null +++ b/src/pages/iou/create/CreateIOUStartRequest.js @@ -0,0 +1,56 @@ +// @TODO cleanup - file was made from MoneyRequestSelectorPage +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import CONST from '../../../CONST'; +import TabSelector from '../../../components/TabSelector/TabSelector'; +import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigator'; +import CreateIOUStartTabScan from './CreateIOUStartTabScan'; +import CreateIOUStartTabManual from './CreateIOUStartTabManual'; +import CreateIOUStartTabDistance from './CreateIOUStartTabDistance'; + +const propTypes = { + /** The ID of the currently selected tab */ + selectedTab: PropTypes.oneOf(_.values(CONST.TAB_REQUEST)).isRequired, + + /** Whether or not the distance tab should be shown */ + shouldDisplayDistanceTab: PropTypes.bool.isRequired, +}; + +function CreateIOUStartRequest({selectedTab, shouldDisplayDistanceTab}) { + return ( + ( + {}} + position={position} + /> + )} + > + + + {shouldDisplayDistanceTab && ( + + )} + + ); +} + +CreateIOUStartRequest.displayName = 'CreateIOUStartRequest'; +CreateIOUStartRequest.propTypes = propTypes; + +export default CreateIOUStartRequest; diff --git a/src/styles/styles.js b/src/styles/styles.js index 9f73c294f7b4..441f43654cb8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3038,6 +3038,10 @@ const styles = (theme) => ({ zIndex: 2, }, + isDraggingOver: { + backgroundColor: theme.receiptDropUIBG, + }, + receiptImageWrapper: (receiptImageTopPosition) => ({ position: 'absolute', top: receiptImageTopPosition, From e48cdb37f4eec21d54d064f9b4eb722a005dd1a9 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 22:05:21 +0800 Subject: [PATCH 015/247] Rename files --- src/ROUTES.ts | 2 +- .../AppNavigator/ModalStackNavigators.js | 2 +- src/libs/Navigation/linkingConfig.js | 4 ++-- ...CreateIOUStartPage.js => CreateIOUPage.js} | 8 ++++---- .../CreateIOURequest.js} | 20 +++++++++---------- .../CreateIOUTabDistance.js} | 12 +++++------ .../CreateIOUTabManual.js} | 12 +++++------ .../CreateIOUTabScan.js} | 12 +++++------ 8 files changed, 36 insertions(+), 36 deletions(-) rename src/pages/iou/create/{CreateIOUStartPage.js => CreateIOUPage.js} (94%) rename src/pages/iou/create/{CreateIOUStartRequest.js => request/CreateIOURequest.js} (70%) rename src/pages/iou/create/{CreateIOUStartTabDistance.js => request/CreateIOUTabDistance.js} (87%) rename src/pages/iou/create/{CreateIOUStartTabManual.js => request/CreateIOUTabManual.js} (88%) rename src/pages/iou/create/{CreateIOUStartTabScan.js => request/CreateIOUTabScan.js} (88%) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index a75417a0bd4e..c5fc45a3a91b 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -122,7 +122,7 @@ export default { // --> // @TODO remove "create" from the front of the route - MONEE_REQUEST_START: { route: 'create/:iouType/start/:transactionID/:reportID?/:selectedTab?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `create/${iouType}/start/${transactionID}/${reportID}`}, + MONEE_REQUEST_CREATE: { route: 'create/:iouType/start/:transactionID/:reportID?/:selectedTab?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `create/${iouType}/start/${transactionID}/${reportID}`}, MONEE_REQUEST_FIELD: { route: 'create/:iouType/:field/:transactionID/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `create/${iouType}/${field}/${transactionID}/${reportID}`}, IOU_REQUEST: 'request/new', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index be8eaaf705e9..9a63ffa804ab 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -32,7 +32,7 @@ function createModalStackNavigator(screens) { } const MoneyRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request_Start: () => require('../../../pages/iou/create/CreateIOUStartPage').default, + Monee_Request_Create: () => require('../../../pages/iou/create/CreateIOUPage').default, Monee_Request_Field: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, /* @TODO remove Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 6fbcc782004e..539d6aa2e693 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -297,8 +297,8 @@ export default { }, MoneyRequest: { screens: { - Monee_Request_Start: { - path: ROUTES.MONEE_REQUEST_START.route, + Monee_Request_Create: { + path: ROUTES.MONEE_REQUEST_CREATE.route, exact: true, }, Monee_Request_Field: { diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUPage.js similarity index 94% rename from src/pages/iou/create/CreateIOUStartPage.js rename to src/pages/iou/create/CreateIOUPage.js index b03b74d43085..d12471275dff 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUPage.js @@ -18,10 +18,10 @@ import * as IOUUtils from '../../../libs/IOUUtils'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import TabSelector from '../../../components/TabSelector/TabSelector'; import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigator'; -import CreateIOUStartTabScan from './CreateIOUStartTabScan'; -import CreateIOUStartTabManual from './CreateIOUStartTabManual'; -import CreateIOUStartTabDistance from './CreateIOUStartTabDistance'; -import CreateIOUStartRequest from './CreateIOUStartRequest'; +import CreateIOUStartTabScan from './CreateIOUTabScan'; +import CreateIOUStartTabManual from './CreateIOUTabManual'; +import CreateIOUStartTabDistance from './CreateIOUTabDistance'; +import CreateIOUStartRequest from './request/CreateIOURequest'; const propTypes = { /** Route from navigation */ diff --git a/src/pages/iou/create/CreateIOUStartRequest.js b/src/pages/iou/create/request/CreateIOURequest.js similarity index 70% rename from src/pages/iou/create/CreateIOUStartRequest.js rename to src/pages/iou/create/request/CreateIOURequest.js index 8382be138934..eb7d9b41c7a8 100644 --- a/src/pages/iou/create/CreateIOUStartRequest.js +++ b/src/pages/iou/create/request/CreateIOURequest.js @@ -2,12 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import _ from 'underscore'; -import CONST from '../../../CONST'; -import TabSelector from '../../../components/TabSelector/TabSelector'; -import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigator'; -import CreateIOUStartTabScan from './CreateIOUStartTabScan'; -import CreateIOUStartTabManual from './CreateIOUStartTabManual'; -import CreateIOUStartTabDistance from './CreateIOUStartTabDistance'; +import CONST from '../../../../CONST'; +import TabSelector from '../../../../components/TabSelector/TabSelector'; +import OnyxTabNavigator, {TopTab} from '../../../../libs/Navigation/OnyxTabNavigator'; +import CreateIOUStartTabScan from './CreateIOUTabScan'; +import CreateIOUStartTabManual from './CreateIOUTabManual'; +import CreateIOUStartTabDistance from './CreateIOUTabDistance'; const propTypes = { /** The ID of the currently selected tab */ @@ -17,7 +17,7 @@ const propTypes = { shouldDisplayDistanceTab: PropTypes.bool.isRequired, }; -function CreateIOUStartRequest({selectedTab, shouldDisplayDistanceTab}) { +function CreateIOURequest({selectedTab, shouldDisplayDistanceTab}) { return ( {}} - testID={CreateIOUStartTabDistance.displayName} + testID={CreateIOUTabDistance.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +60,8 @@ function CreateIOUStartTabDistance() { ); } -CreateIOUStartTabDistance.propTypes = propTypes; -CreateIOUStartTabDistance.defaultProps = defaultProps; -CreateIOUStartTabDistance.displayName = 'CreateIOUStartTabDistance'; +CreateIOUTabDistance.propTypes = propTypes; +CreateIOUTabDistance.defaultProps = defaultProps; +CreateIOUTabDistance.displayName = 'CreateIOUTabDistance'; -export default withOnyx({})(CreateIOUStartTabDistance); +export default withOnyx({})(CreateIOUTabDistance); diff --git a/src/pages/iou/create/CreateIOUStartTabManual.js b/src/pages/iou/create/request/CreateIOUTabManual.js similarity index 88% rename from src/pages/iou/create/CreateIOUStartTabManual.js rename to src/pages/iou/create/request/CreateIOUTabManual.js index c0fab7bccd92..3d9e34ecdb28 100644 --- a/src/pages/iou/create/CreateIOUStartTabManual.js +++ b/src/pages/iou/create/request/CreateIOUTabManual.js @@ -13,7 +13,7 @@ const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabManual() { +function CreateIOUTabManual() { const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; @@ -42,7 +42,7 @@ function CreateIOUStartTabManual() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={CreateIOUStartTabManual.displayName} + testID={CreateIOUTabManual.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +60,8 @@ function CreateIOUStartTabManual() { ); } -CreateIOUStartTabManual.propTypes = propTypes; -CreateIOUStartTabManual.defaultProps = defaultProps; -CreateIOUStartTabManual.displayName = 'CreateIOUStartTabManual'; +CreateIOUTabManual.propTypes = propTypes; +CreateIOUTabManual.defaultProps = defaultProps; +CreateIOUTabManual.displayName = 'CreateIOUTabManual'; -export default withOnyx({})(CreateIOUStartTabManual); +export default withOnyx({})(CreateIOUTabManual); diff --git a/src/pages/iou/create/CreateIOUStartTabScan.js b/src/pages/iou/create/request/CreateIOUTabScan.js similarity index 88% rename from src/pages/iou/create/CreateIOUStartTabScan.js rename to src/pages/iou/create/request/CreateIOUTabScan.js index 974ebaa5b37f..5608ab3533f0 100644 --- a/src/pages/iou/create/CreateIOUStartTabScan.js +++ b/src/pages/iou/create/request/CreateIOUTabScan.js @@ -13,7 +13,7 @@ const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabScan() { +function CreateIOUTabScan() { const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; @@ -42,7 +42,7 @@ function CreateIOUStartTabScan() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={CreateIOUStartTabScan.displayName} + testID={CreateIOUTabScan.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +60,8 @@ function CreateIOUStartTabScan() { ); } -CreateIOUStartTabScan.propTypes = propTypes; -CreateIOUStartTabScan.defaultProps = defaultProps; -CreateIOUStartTabScan.displayName = 'CreateIOUStartTabScan'; +CreateIOUTabScan.propTypes = propTypes; +CreateIOUTabScan.defaultProps = defaultProps; +CreateIOUTabScan.displayName = 'CreateIOUTabScan'; -export default withOnyx({})(CreateIOUStartTabScan); +export default withOnyx({})(CreateIOUTabScan); From 2627e32f6db3435b0e09ea2aa36ee86af92f835b Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 22:13:14 +0800 Subject: [PATCH 016/247] More reorganizing files --- .../AppNavigator/ModalStackNavigators.js | 2 +- .../{CreateIOUPage.js => IOUCreatePage.js} | 21 +++++++--------- ...reateIOURequest.js => IOUCreateRequest.js} | 20 ++++++++-------- .../IOUCreateRequestTabDistance.js} | 24 +++++++++---------- .../IOUCreateRequestTabManual.js} | 24 +++++++++---------- .../IOUCreateRequestTabScan.js} | 24 +++++++++---------- 6 files changed, 55 insertions(+), 60 deletions(-) rename src/pages/iou/create/{CreateIOUPage.js => IOUCreatePage.js} (84%) rename src/pages/iou/create/request/{CreateIOURequest.js => IOUCreateRequest.js} (72%) rename src/pages/iou/create/request/{CreateIOUTabDistance.js => tab/IOUCreateRequestTabDistance.js} (72%) rename src/pages/iou/create/request/{CreateIOUTabManual.js => tab/IOUCreateRequestTabManual.js} (72%) rename src/pages/iou/create/request/{CreateIOUTabScan.js => tab/IOUCreateRequestTabScan.js} (72%) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 9a63ffa804ab..bac028ad4233 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -32,7 +32,7 @@ function createModalStackNavigator(screens) { } const MoneyRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request_Create: () => require('../../../pages/iou/create/CreateIOUPage').default, + Monee_Request_Create: () => require('../../../pages/iou/create/IOUCreatePage').default, Monee_Request_Field: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, /* @TODO remove Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, diff --git a/src/pages/iou/create/CreateIOUPage.js b/src/pages/iou/create/IOUCreatePage.js similarity index 84% rename from src/pages/iou/create/CreateIOUPage.js rename to src/pages/iou/create/IOUCreatePage.js index d12471275dff..1aa56779456f 100644 --- a/src/pages/iou/create/CreateIOUPage.js +++ b/src/pages/iou/create/IOUCreatePage.js @@ -12,16 +12,11 @@ import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotF import ScreenWrapper from '../../../components/ScreenWrapper'; import useLocalize from '../../../hooks/useLocalize'; import styles from '../../../styles/styles'; -import themeColors from '../../../styles/themes/default'; import DragAndDropProvider from '../../../components/DragAndDrop/Provider'; import * as IOUUtils from '../../../libs/IOUUtils'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; -import TabSelector from '../../../components/TabSelector/TabSelector'; -import OnyxTabNavigator, {TopTab} from '../../../libs/Navigation/OnyxTabNavigator'; -import CreateIOUStartTabScan from './CreateIOUTabScan'; -import CreateIOUStartTabManual from './CreateIOUTabManual'; -import CreateIOUStartTabDistance from './CreateIOUTabDistance'; -import CreateIOUStartRequest from './request/CreateIOURequest'; +import CreateIOUStartTabManual from './request/tab/IOUCreateRequestTabManual'; +import CreateIOUStartRequest from './request/IOUCreateRequest'; const propTypes = { /** Route from navigation */ @@ -45,7 +40,7 @@ const propTypes = { const defaultProps = {}; -function CreateIOUStartPage({route}) { +function IOUCreatePage({route}) { const {translate} = useLocalize(); const [isDraggingOver, setIsDraggingOver] = useState(false); const iouType = lodashGet(route, 'params.iouType'); @@ -62,7 +57,7 @@ function CreateIOUStartPage({route}) { includeSafeAreaPaddingBottom={false} shouldEnableKeyboardAvoidingView={false} headerGapStyles={isDraggingOver ? [styles.isDraggingOver] : []} - testID={CreateIOUStartPage.displayName} + testID={IOUCreatePage.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -93,12 +88,12 @@ function CreateIOUStartPage({route}) { ); } -CreateIOUStartPage.displayName = 'CreateIOUStartPage'; -CreateIOUStartPage.propTypes = propTypes; -CreateIOUStartPage.defaultProps = defaultProps; +IOUCreatePage.displayName = 'IOUCreatePage'; +IOUCreatePage.propTypes = propTypes; +IOUCreatePage.defaultProps = defaultProps; export default withOnyx({ report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, }, -})(CreateIOUStartPage); +})(IOUCreatePage); diff --git a/src/pages/iou/create/request/CreateIOURequest.js b/src/pages/iou/create/request/IOUCreateRequest.js similarity index 72% rename from src/pages/iou/create/request/CreateIOURequest.js rename to src/pages/iou/create/request/IOUCreateRequest.js index eb7d9b41c7a8..cc2f56d6ec97 100644 --- a/src/pages/iou/create/request/CreateIOURequest.js +++ b/src/pages/iou/create/request/IOUCreateRequest.js @@ -5,9 +5,9 @@ import _ from 'underscore'; import CONST from '../../../../CONST'; import TabSelector from '../../../../components/TabSelector/TabSelector'; import OnyxTabNavigator, {TopTab} from '../../../../libs/Navigation/OnyxTabNavigator'; -import CreateIOUStartTabScan from './CreateIOUTabScan'; -import CreateIOUStartTabManual from './CreateIOUTabManual'; -import CreateIOUStartTabDistance from './CreateIOUTabDistance'; +import IOUCreateRequestTabDistance from './tab/IOUCreateRequestTabDistance'; +import IOUCreateRequestTabManual from './tab/IOUCreateRequestTabManual'; +import IOUCreateRequestTabScan from './tab/IOUCreateRequestTabScan'; const propTypes = { /** The ID of the currently selected tab */ @@ -17,7 +17,7 @@ const propTypes = { shouldDisplayDistanceTab: PropTypes.bool.isRequired, }; -function CreateIOURequest({selectedTab, shouldDisplayDistanceTab}) { +function IOUCreateRequest({selectedTab, shouldDisplayDistanceTab}) { return ( {shouldDisplayDistanceTab && ( )} ); } -CreateIOURequest.displayName = 'CreateIOURequest'; -CreateIOURequest.propTypes = propTypes; +IOUCreateRequest.displayName = 'IOUCreateRequest'; +IOUCreateRequest.propTypes = propTypes; -export default CreateIOURequest; +export default IOUCreateRequest; diff --git a/src/pages/iou/create/request/CreateIOUTabDistance.js b/src/pages/iou/create/request/tab/IOUCreateRequestTabDistance.js similarity index 72% rename from src/pages/iou/create/request/CreateIOUTabDistance.js rename to src/pages/iou/create/request/tab/IOUCreateRequestTabDistance.js index 30d6b0642f45..2e127d8b8956 100644 --- a/src/pages/iou/create/request/CreateIOUTabDistance.js +++ b/src/pages/iou/create/request/tab/IOUCreateRequestTabDistance.js @@ -2,18 +2,18 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../hooks/useLocalize'; -import * as IOUUtils from '../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../styles/styles'; -import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../components/ScreenWrapper'; +import useLocalize from '../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../components/ScreenWrapper'; const propTypes = {}; const defaultProps = {}; -function CreateIOUTabDistance() { +function IOUCreateRequestTabDistance() { const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; @@ -42,7 +42,7 @@ function CreateIOUTabDistance() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={CreateIOUTabDistance.displayName} + testID={IOUCreateRequestTabDistance.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +60,8 @@ function CreateIOUTabDistance() { ); } -CreateIOUTabDistance.propTypes = propTypes; -CreateIOUTabDistance.defaultProps = defaultProps; -CreateIOUTabDistance.displayName = 'CreateIOUTabDistance'; +IOUCreateRequestTabDistance.propTypes = propTypes; +IOUCreateRequestTabDistance.defaultProps = defaultProps; +IOUCreateRequestTabDistance.displayName = 'IOUCreateRequestTabDistance'; -export default withOnyx({})(CreateIOUTabDistance); +export default withOnyx({})(IOUCreateRequestTabDistance); diff --git a/src/pages/iou/create/request/CreateIOUTabManual.js b/src/pages/iou/create/request/tab/IOUCreateRequestTabManual.js similarity index 72% rename from src/pages/iou/create/request/CreateIOUTabManual.js rename to src/pages/iou/create/request/tab/IOUCreateRequestTabManual.js index 3d9e34ecdb28..2262e29d1352 100644 --- a/src/pages/iou/create/request/CreateIOUTabManual.js +++ b/src/pages/iou/create/request/tab/IOUCreateRequestTabManual.js @@ -2,18 +2,18 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../hooks/useLocalize'; -import * as IOUUtils from '../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../styles/styles'; -import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../components/ScreenWrapper'; +import useLocalize from '../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../components/ScreenWrapper'; const propTypes = {}; const defaultProps = {}; -function CreateIOUTabManual() { +function IOUCreateRequestTabManual() { const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; @@ -42,7 +42,7 @@ function CreateIOUTabManual() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={CreateIOUTabManual.displayName} + testID={IOUCreateRequestTabManual.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +60,8 @@ function CreateIOUTabManual() { ); } -CreateIOUTabManual.propTypes = propTypes; -CreateIOUTabManual.defaultProps = defaultProps; -CreateIOUTabManual.displayName = 'CreateIOUTabManual'; +IOUCreateRequestTabManual.propTypes = propTypes; +IOUCreateRequestTabManual.defaultProps = defaultProps; +IOUCreateRequestTabManual.displayName = 'IOUCreateRequestTabManual'; -export default withOnyx({})(CreateIOUTabManual); +export default withOnyx({})(IOUCreateRequestTabManual); diff --git a/src/pages/iou/create/request/CreateIOUTabScan.js b/src/pages/iou/create/request/tab/IOUCreateRequestTabScan.js similarity index 72% rename from src/pages/iou/create/request/CreateIOUTabScan.js rename to src/pages/iou/create/request/tab/IOUCreateRequestTabScan.js index 5608ab3533f0..baf8f47309cf 100644 --- a/src/pages/iou/create/request/CreateIOUTabScan.js +++ b/src/pages/iou/create/request/tab/IOUCreateRequestTabScan.js @@ -2,18 +2,18 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../hooks/useLocalize'; -import * as IOUUtils from '../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../styles/styles'; -import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../components/ScreenWrapper'; +import useLocalize from '../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../components/ScreenWrapper'; const propTypes = {}; const defaultProps = {}; -function CreateIOUTabScan() { +function IOUCreateRequestTabDistance() { const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; @@ -42,7 +42,7 @@ function CreateIOUTabScan() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={CreateIOUTabScan.displayName} + testID={IOUCreateRequestTabDistance.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +60,8 @@ function CreateIOUTabScan() { ); } -CreateIOUTabScan.propTypes = propTypes; -CreateIOUTabScan.defaultProps = defaultProps; -CreateIOUTabScan.displayName = 'CreateIOUTabScan'; +IOUCreateRequestTabDistance.propTypes = propTypes; +IOUCreateRequestTabDistance.defaultProps = defaultProps; +IOUCreateRequestTabDistance.displayName = 'IOUCreateRequestTabDistance'; -export default withOnyx({})(CreateIOUTabScan); +export default withOnyx({})(IOUCreateRequestTabDistance); From 0051e26aa5619364f9f4d2b0b65259c79eca0bb5 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 22:14:29 +0800 Subject: [PATCH 017/247] Make folders for each tab --- src/pages/iou/create/IOUCreatePage.js | 2 +- src/pages/iou/create/request/IOUCreateRequest.js | 6 +++--- .../{ => distance}/IOUCreateRequestTabDistance.js | 12 ++++++------ .../tab/{ => manual}/IOUCreateRequestTabManual.js | 12 ++++++------ .../tab/{ => scan}/IOUCreateRequestTabScan.js | 12 ++++++------ 5 files changed, 22 insertions(+), 22 deletions(-) rename src/pages/iou/create/request/tab/{ => distance}/IOUCreateRequestTabDistance.js (84%) rename src/pages/iou/create/request/tab/{ => manual}/IOUCreateRequestTabManual.js (84%) rename src/pages/iou/create/request/tab/{ => scan}/IOUCreateRequestTabScan.js (84%) diff --git a/src/pages/iou/create/IOUCreatePage.js b/src/pages/iou/create/IOUCreatePage.js index 1aa56779456f..abae3ebe85a1 100644 --- a/src/pages/iou/create/IOUCreatePage.js +++ b/src/pages/iou/create/IOUCreatePage.js @@ -15,7 +15,7 @@ import styles from '../../../styles/styles'; import DragAndDropProvider from '../../../components/DragAndDrop/Provider'; import * as IOUUtils from '../../../libs/IOUUtils'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; -import CreateIOUStartTabManual from './request/tab/IOUCreateRequestTabManual'; +import CreateIOUStartTabManual from './request/tab/manual/IOUCreateRequestTabManual'; import CreateIOUStartRequest from './request/IOUCreateRequest'; const propTypes = { diff --git a/src/pages/iou/create/request/IOUCreateRequest.js b/src/pages/iou/create/request/IOUCreateRequest.js index cc2f56d6ec97..13c69e9bd5ad 100644 --- a/src/pages/iou/create/request/IOUCreateRequest.js +++ b/src/pages/iou/create/request/IOUCreateRequest.js @@ -5,9 +5,9 @@ import _ from 'underscore'; import CONST from '../../../../CONST'; import TabSelector from '../../../../components/TabSelector/TabSelector'; import OnyxTabNavigator, {TopTab} from '../../../../libs/Navigation/OnyxTabNavigator'; -import IOUCreateRequestTabDistance from './tab/IOUCreateRequestTabDistance'; -import IOUCreateRequestTabManual from './tab/IOUCreateRequestTabManual'; -import IOUCreateRequestTabScan from './tab/IOUCreateRequestTabScan'; +import IOUCreateRequestTabDistance from './tab/distance/IOUCreateRequestTabDistance'; +import IOUCreateRequestTabManual from './tab/manual/IOUCreateRequestTabManual'; +import IOUCreateRequestTabScan from './tab/scan/IOUCreateRequestTabScan'; const propTypes = { /** The ID of the currently selected tab */ diff --git a/src/pages/iou/create/request/tab/IOUCreateRequestTabDistance.js b/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js similarity index 84% rename from src/pages/iou/create/request/tab/IOUCreateRequestTabDistance.js rename to src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js index 2e127d8b8956..3418cc8a22ed 100644 --- a/src/pages/iou/create/request/tab/IOUCreateRequestTabDistance.js +++ b/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js @@ -2,12 +2,12 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../../../hooks/useLocalize'; -import * as IOUUtils from '../../../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../../../styles/styles'; -import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../../../components/ScreenWrapper'; +import useLocalize from '../../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../../components/ScreenWrapper'; const propTypes = {}; diff --git a/src/pages/iou/create/request/tab/IOUCreateRequestTabManual.js b/src/pages/iou/create/request/tab/manual/IOUCreateRequestTabManual.js similarity index 84% rename from src/pages/iou/create/request/tab/IOUCreateRequestTabManual.js rename to src/pages/iou/create/request/tab/manual/IOUCreateRequestTabManual.js index 2262e29d1352..fe4c5bdfeb68 100644 --- a/src/pages/iou/create/request/tab/IOUCreateRequestTabManual.js +++ b/src/pages/iou/create/request/tab/manual/IOUCreateRequestTabManual.js @@ -2,12 +2,12 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../../../hooks/useLocalize'; -import * as IOUUtils from '../../../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../../../styles/styles'; -import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../../../components/ScreenWrapper'; +import useLocalize from '../../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../../components/ScreenWrapper'; const propTypes = {}; diff --git a/src/pages/iou/create/request/tab/IOUCreateRequestTabScan.js b/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js similarity index 84% rename from src/pages/iou/create/request/tab/IOUCreateRequestTabScan.js rename to src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js index baf8f47309cf..251c724b6b20 100644 --- a/src/pages/iou/create/request/tab/IOUCreateRequestTabScan.js +++ b/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js @@ -2,12 +2,12 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../../../hooks/useLocalize'; -import * as IOUUtils from '../../../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../../../styles/styles'; -import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../../../components/ScreenWrapper'; +import useLocalize from '../../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../../components/ScreenWrapper'; const propTypes = {}; From d5693ea57502e7d11d4c1e1cb0a6d5cee32d1e74 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 22:53:53 +0800 Subject: [PATCH 018/247] DRY up tab code --- src/libs/actions/IOU.js | 2 +- src/pages/iou/create/IOUCreatePage.js | 3 +- .../iou/create/request/IOUCreateRequest.js | 6 +- .../request/tab/TabContentWithEditing.js | 62 +++++++++++++++++++ .../distance/IOUCreateRequestTabDistance.js | 47 +++++--------- .../tab/scan/IOUCreateRequestTabScan.js | 13 ++-- 6 files changed, 91 insertions(+), 42 deletions(-) create mode 100644 src/pages/iou/create/request/tab/TabContentWithEditing.js diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 050134a188cc..b1148ceb382b 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2126,7 +2126,7 @@ function startMoneeRequest(iouType, reportID = '') { Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, {wasSaved: false}); // Navigate to it - Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); + Navigation.navigate(ROUTES.MONEE_REQUEST_CREATE.getRoute(iouType, newTransactionID, reportID)); } /** diff --git a/src/pages/iou/create/IOUCreatePage.js b/src/pages/iou/create/IOUCreatePage.js index abae3ebe85a1..5b05497e607d 100644 --- a/src/pages/iou/create/IOUCreatePage.js +++ b/src/pages/iou/create/IOUCreatePage.js @@ -74,7 +74,8 @@ function IOUCreatePage({route}) { {iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST ? ( ) : ( // @TODO see if this is necessary and if there are any routes using it diff --git a/src/pages/iou/create/request/IOUCreateRequest.js b/src/pages/iou/create/request/IOUCreateRequest.js index 13c69e9bd5ad..aaa7bba784a4 100644 --- a/src/pages/iou/create/request/IOUCreateRequest.js +++ b/src/pages/iou/create/request/IOUCreateRequest.js @@ -10,6 +10,9 @@ import IOUCreateRequestTabManual from './tab/manual/IOUCreateRequestTabManual'; import IOUCreateRequestTabScan from './tab/scan/IOUCreateRequestTabScan'; const propTypes = { + /** The type of IOU being created */ + iouType: PropTypes.oneOf(_.values(CONST.IOU.MONEY_REQUEST_TYPE)).isRequired, + /** The ID of the currently selected tab */ selectedTab: PropTypes.oneOf(_.values(CONST.TAB_REQUEST)).isRequired, @@ -17,7 +20,7 @@ const propTypes = { shouldDisplayDistanceTab: PropTypes.bool.isRequired, }; -function IOUCreateRequest({selectedTab, shouldDisplayDistanceTab}) { +function IOUCreateRequest({selectedTab, shouldDisplayDistanceTab, iouType}) { return ( )} diff --git a/src/pages/iou/create/request/tab/TabContentWithEditing.js b/src/pages/iou/create/request/tab/TabContentWithEditing.js new file mode 100644 index 000000000000..1eaa2ba16b3f --- /dev/null +++ b/src/pages/iou/create/request/tab/TabContentWithEditing.js @@ -0,0 +1,62 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../components/ScreenWrapper'; + +const propTypes = { + /** The main content to display in the tab */ + children: PropTypes.node.isRequired, + + /** A function that is called when the back button is pressed */ + onBackButtonPress: PropTypes.func.isRequired, + + /** Whether or not the NOT FOUND component should be showen */ + shouldShowNotFound: PropTypes.bool.isRequired, + + /** The title to display in the header */ + title: PropTypes.string.isRequired, + + /** An ID used for selecting this UI in tests */ + testID: PropTypes.string.isRequired, +}; + +function TabContentWithEditing({children, onBackButtonPress, shouldShowNotFound, testID, title}) { + // @TODO make this logic dynamic + const isEditing = false; + + // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). + // The rest of the cases this component is rendered through which has it's own ScreenWrapper + if (!isEditing) { + return children; + } + + return ( + {}} + testID={testID} + > + {({safeAreaPaddingBottomStyle}) => ( + + + + {children} + + + )} + + ); +} + +TabContentWithEditing.propTypes = propTypes; +TabContentWithEditing.displayName = 'TabContentWithEditing'; + +export default TabContentWithEditing; diff --git a/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js b/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js index 3418cc8a22ed..9f59e73e34b8 100644 --- a/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js +++ b/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js @@ -1,22 +1,21 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; +import lodashGet from 'lodash/get'; import useLocalize from '../../../../../../hooks/useLocalize'; import * as IOUUtils from '../../../../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../../../../styles/styles'; -import HeaderWithBackButton from '../../../../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../../../../components/ScreenWrapper'; +import TabContentWithEditing from '../TabContentWithEditing'; const propTypes = {}; const defaultProps = {}; -function IOUCreateRequestTabDistance() { - const {params: iouType, transactionID, reportID} = useRoute(); +function IOUCreateRequestTabDistance(props) { + const route = useRoute(); + const iouType = lodashGet(route, 'params.iouType'); + console.log('[tim] distance', props); const {translate} = useLocalize(); - const isEditing = false; // @TODO const content = ( // // ); - const content = Distance Tab; - - // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). - // The rest of the cases this component is rendered through which has it's own ScreenWrapper - if (!isEditing) { - return content; - } return ( - {}} + {}} + shouldShowNotFound={!IOUUtils.isValidMoneyRequestType(iouType)} + title={translate('iou.amount')} testID={IOUCreateRequestTabDistance.displayName} > - {({safeAreaPaddingBottomStyle}) => ( - - - {}} - /> - {content} - - - )} - + Distance Tab + ); } diff --git a/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js b/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js index 251c724b6b20..d7eb957eb81d 100644 --- a/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js +++ b/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js @@ -13,8 +13,9 @@ const propTypes = {}; const defaultProps = {}; -function IOUCreateRequestTabDistance() { +function IOUCreateRequestTabScan() { const {params: iouType, transactionID, reportID} = useRoute(); + console.log('[tim] scan', iouType); const {translate} = useLocalize(); const isEditing = false; @@ -42,7 +43,7 @@ function IOUCreateRequestTabDistance() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={IOUCreateRequestTabDistance.displayName} + testID={IOUCreateRequestTabScan.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +61,8 @@ function IOUCreateRequestTabDistance() { ); } -IOUCreateRequestTabDistance.propTypes = propTypes; -IOUCreateRequestTabDistance.defaultProps = defaultProps; -IOUCreateRequestTabDistance.displayName = 'IOUCreateRequestTabDistance'; +IOUCreateRequestTabScan.propTypes = propTypes; +IOUCreateRequestTabScan.defaultProps = defaultProps; +IOUCreateRequestTabScan.displayName = 'IOUCreateRequestTabScan'; -export default withOnyx({})(IOUCreateRequestTabDistance); +export default withOnyx({})(IOUCreateRequestTabScan); From 733701f8b7d6b5dfc7dc3cbf5b08fbcf9f1dc156 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 26 Sep 2023 14:36:41 +0800 Subject: [PATCH 019/247] Move files around again --- .../AppNavigator/ModalStackNavigators.js | 4 +- .../distance/IOUCreateRequestTabDistance.js | 48 ------------------- .../IOURequestFieldPage.js} | 10 ++-- .../IOURequestPage.js} | 16 +++---- .../create/IOURequestCreate.js} | 20 ++++---- .../create/tab/IOURequestCreateTabDistance.js | 43 +++++++++++++++++ .../create/tab/IOURequestCreateTabManual.js} | 24 +++++----- .../create/tab/IOURequestCreateTabScan.js} | 24 +++++----- .../create}/tab/TabContentWithEditing.js | 8 ++-- 9 files changed, 96 insertions(+), 101 deletions(-) delete mode 100644 src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js rename src/pages/iou/{create/CreateIOUFieldPage.js => request/IOURequestFieldPage.js} (93%) rename src/pages/iou/{create/IOUCreatePage.js => request/IOURequestPage.js} (91%) rename src/pages/iou/{create/request/IOUCreateRequest.js => request/create/IOURequestCreate.js} (73%) create mode 100644 src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js rename src/pages/iou/{create/request/tab/manual/IOUCreateRequestTabManual.js => request/create/tab/IOURequestCreateTabManual.js} (72%) rename src/pages/iou/{create/request/tab/scan/IOUCreateRequestTabScan.js => request/create/tab/IOURequestCreateTabScan.js} (72%) rename src/pages/iou/{create/request => request/create}/tab/TabContentWithEditing.js (92%) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 8bf10f0f6fcb..6ed2a574e78b 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -32,8 +32,8 @@ function createModalStackNavigator(screens) { } const MoneyRequestModalStackNavigator = createModalStackNavigator({ - Monee_Request_Create: () => require('../../../pages/iou/create/IOUCreatePage').default, - Monee_Request_Field: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, + Monee_Request_Create: () => require('../../../pages/iou/request/IOURequestPage').default, + Monee_Request_Field: () => require('../../../pages/iou/request/IOURequestFieldPage').default, /* @TODO remove Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, Money_Request_Participants: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default, diff --git a/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js b/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js deleted file mode 100644 index 9f59e73e34b8..000000000000 --- a/src/pages/iou/create/request/tab/distance/IOUCreateRequestTabDistance.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import {Text} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import {useRoute} from '@react-navigation/native'; -import lodashGet from 'lodash/get'; -import useLocalize from '../../../../../../hooks/useLocalize'; -import * as IOUUtils from '../../../../../../libs/IOUUtils'; -import TabContentWithEditing from '../TabContentWithEditing'; - -const propTypes = {}; - -const defaultProps = {}; - -function IOUCreateRequestTabDistance(props) { - const route = useRoute(); - const iouType = lodashGet(route, 'params.iouType'); - console.log('[tim] distance', props); - const {translate} = useLocalize(); - - // @TODO const content = ( - // (textInput.current = e)} - // onCurrencyButtonPress={navigateToCurrencySelectionPage} - // onSubmitButtonPress={navigateToNextPage} - // /> - // ); - - return ( - {}} - shouldShowNotFound={!IOUUtils.isValidMoneyRequestType(iouType)} - title={translate('iou.amount')} - testID={IOUCreateRequestTabDistance.displayName} - > - Distance Tab - - ); -} - -IOUCreateRequestTabDistance.propTypes = propTypes; -IOUCreateRequestTabDistance.defaultProps = defaultProps; -IOUCreateRequestTabDistance.displayName = 'IOUCreateRequestTabDistance'; - -export default withOnyx({})(IOUCreateRequestTabDistance); diff --git a/src/pages/iou/create/CreateIOUFieldPage.js b/src/pages/iou/request/IOURequestFieldPage.js similarity index 93% rename from src/pages/iou/create/CreateIOUFieldPage.js rename to src/pages/iou/request/IOURequestFieldPage.js index 0b4f25102b7f..ff6b4648b969 100644 --- a/src/pages/iou/create/CreateIOUFieldPage.js +++ b/src/pages/iou/request/IOURequestFieldPage.js @@ -46,7 +46,7 @@ const propTypes = { const defaultProps = {}; -function CreateIOUFieldPage({ +function IOURequestFieldPage({ route: { params: {field}, }, @@ -98,7 +98,7 @@ function CreateIOUFieldPage({ return ; } -CreateIOUFieldPage.displayName = 'CreateIOUFieldPage'; -CreateIOUFieldPage.propTypes = propTypes; -CreateIOUFieldPage.defaultProps = defaultProps; -export default CreateIOUFieldPage; +IOURequestFieldPage.displayName = 'IOURequestFieldPage'; +IOURequestFieldPage.propTypes = propTypes; +IOURequestFieldPage.defaultProps = defaultProps; +export default IOURequestFieldPage; diff --git a/src/pages/iou/create/IOUCreatePage.js b/src/pages/iou/request/IOURequestPage.js similarity index 91% rename from src/pages/iou/create/IOUCreatePage.js rename to src/pages/iou/request/IOURequestPage.js index 5b05497e607d..b6976c1c3714 100644 --- a/src/pages/iou/create/IOUCreatePage.js +++ b/src/pages/iou/request/IOURequestPage.js @@ -15,8 +15,8 @@ import styles from '../../../styles/styles'; import DragAndDropProvider from '../../../components/DragAndDrop/Provider'; import * as IOUUtils from '../../../libs/IOUUtils'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; -import CreateIOUStartTabManual from './request/tab/manual/IOUCreateRequestTabManual'; -import CreateIOUStartRequest from './request/IOUCreateRequest'; +import CreateIOUStartTabManual from './create/tab/IOURequestCreateTabManual'; +import CreateIOUStartRequest from './create/IOURequestCreate'; const propTypes = { /** Route from navigation */ @@ -40,7 +40,7 @@ const propTypes = { const defaultProps = {}; -function IOUCreatePage({route}) { +function IOURequestPage({route}) { const {translate} = useLocalize(); const [isDraggingOver, setIsDraggingOver] = useState(false); const iouType = lodashGet(route, 'params.iouType'); @@ -57,7 +57,7 @@ function IOUCreatePage({route}) { includeSafeAreaPaddingBottom={false} shouldEnableKeyboardAvoidingView={false} headerGapStyles={isDraggingOver ? [styles.isDraggingOver] : []} - testID={IOUCreatePage.displayName} + testID={IOURequestPage.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -89,12 +89,12 @@ function IOUCreatePage({route}) { ); } -IOUCreatePage.displayName = 'IOUCreatePage'; -IOUCreatePage.propTypes = propTypes; -IOUCreatePage.defaultProps = defaultProps; +IOURequestPage.displayName = 'IOURequestPage'; +IOURequestPage.propTypes = propTypes; +IOURequestPage.defaultProps = defaultProps; export default withOnyx({ report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, }, -})(IOUCreatePage); +})(IOURequestPage); diff --git a/src/pages/iou/create/request/IOUCreateRequest.js b/src/pages/iou/request/create/IOURequestCreate.js similarity index 73% rename from src/pages/iou/create/request/IOUCreateRequest.js rename to src/pages/iou/request/create/IOURequestCreate.js index aaa7bba784a4..1970751cb592 100644 --- a/src/pages/iou/create/request/IOUCreateRequest.js +++ b/src/pages/iou/request/create/IOURequestCreate.js @@ -5,9 +5,9 @@ import _ from 'underscore'; import CONST from '../../../../CONST'; import TabSelector from '../../../../components/TabSelector/TabSelector'; import OnyxTabNavigator, {TopTab} from '../../../../libs/Navigation/OnyxTabNavigator'; -import IOUCreateRequestTabDistance from './tab/distance/IOUCreateRequestTabDistance'; -import IOUCreateRequestTabManual from './tab/manual/IOUCreateRequestTabManual'; -import IOUCreateRequestTabScan from './tab/scan/IOUCreateRequestTabScan'; +import IOURequestCreateTabDistance from './tab/IOURequestCreateTabDistance'; +import IOURequestCreateTabManual from './tab/IOURequestCreateTabManual'; +import IOURequestCreateTabScan from './tab/IOURequestCreateTabScan'; const propTypes = { /** The type of IOU being created */ @@ -20,7 +20,7 @@ const propTypes = { shouldDisplayDistanceTab: PropTypes.bool.isRequired, }; -function IOUCreateRequest({selectedTab, shouldDisplayDistanceTab, iouType}) { +function IOURequestCreate({selectedTab, shouldDisplayDistanceTab, iouType}) { return ( {shouldDisplayDistanceTab && ( )} @@ -54,7 +54,7 @@ function IOUCreateRequest({selectedTab, shouldDisplayDistanceTab, iouType}) { ); } -IOUCreateRequest.displayName = 'IOUCreateRequest'; -IOUCreateRequest.propTypes = propTypes; +IOURequestCreate.displayName = 'IOURequestCreate'; +IOURequestCreate.propTypes = propTypes; -export default IOUCreateRequest; +export default IOURequestCreate; diff --git a/src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js b/src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js new file mode 100644 index 000000000000..a07b1d73c422 --- /dev/null +++ b/src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js @@ -0,0 +1,43 @@ +import React from 'react'; +import {Text} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import {useRoute} from '@react-navigation/native'; +import lodashGet from 'lodash/get'; +import useLocalize from '../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../libs/IOUUtils'; +import TabContentWithEditing from './TabContentWithEditing'; +import ONYXKEYS from '../../../../../ONYXKEYS'; +import MoneyRequestAmountForm from '../../../steps/MoneyRequestAmountForm'; + +const propTypes = {}; + +const defaultProps = {}; + +function IOURequestCreateTabDistance(props) { + console.log('[tim] distance', props); + + const currentCurrency = lodashGet(route, 'params.currency', ''); + + const currency = CurrencyUtils.isValidCurrencyCode(currentCurrency) ? currentCurrency : iou.currency; + + return ( + (textInput.current = e)} + onCurrencyButtonPress={navigateToCurrencySelectionPage} + onSubmitButtonPress={navigateToNextPage} + /> + ); +} + +IOURequestCreateTabDistance.propTypes = propTypes; +IOURequestCreateTabDistance.defaultProps = defaultProps; +IOURequestCreateTabDistance.displayName = 'IOURequestCreateTabDistance'; + +export default withOnyx({ + transaction: { + key: `${ONYXKEYS.COLLECTION.TRANSACTION}new`, + }, +})(IOURequestCreateTabDistance); diff --git a/src/pages/iou/create/request/tab/manual/IOUCreateRequestTabManual.js b/src/pages/iou/request/create/tab/IOURequestCreateTabManual.js similarity index 72% rename from src/pages/iou/create/request/tab/manual/IOUCreateRequestTabManual.js rename to src/pages/iou/request/create/tab/IOURequestCreateTabManual.js index fe4c5bdfeb68..5883b1854ee6 100644 --- a/src/pages/iou/create/request/tab/manual/IOUCreateRequestTabManual.js +++ b/src/pages/iou/request/create/tab/IOURequestCreateTabManual.js @@ -2,18 +2,18 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../../../../hooks/useLocalize'; -import * as IOUUtils from '../../../../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../../../../styles/styles'; -import HeaderWithBackButton from '../../../../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../../../../components/ScreenWrapper'; +import useLocalize from '../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../components/ScreenWrapper'; const propTypes = {}; const defaultProps = {}; -function IOUCreateRequestTabManual() { +function IOURequestCreateTabManual() { const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; @@ -42,7 +42,7 @@ function IOUCreateRequestTabManual() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={IOUCreateRequestTabManual.displayName} + testID={IOURequestCreateTabManual.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -60,8 +60,8 @@ function IOUCreateRequestTabManual() { ); } -IOUCreateRequestTabManual.propTypes = propTypes; -IOUCreateRequestTabManual.defaultProps = defaultProps; -IOUCreateRequestTabManual.displayName = 'IOUCreateRequestTabManual'; +IOURequestCreateTabManual.propTypes = propTypes; +IOURequestCreateTabManual.defaultProps = defaultProps; +IOURequestCreateTabManual.displayName = 'IOURequestCreateTabManual'; -export default withOnyx({})(IOUCreateRequestTabManual); +export default withOnyx({})(IOURequestCreateTabManual); diff --git a/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js b/src/pages/iou/request/create/tab/IOURequestCreateTabScan.js similarity index 72% rename from src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js rename to src/pages/iou/request/create/tab/IOURequestCreateTabScan.js index d7eb957eb81d..d011ecfe4b33 100644 --- a/src/pages/iou/create/request/tab/scan/IOUCreateRequestTabScan.js +++ b/src/pages/iou/request/create/tab/IOURequestCreateTabScan.js @@ -2,18 +2,18 @@ import React from 'react'; import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import {useRoute} from '@react-navigation/native'; -import useLocalize from '../../../../../../hooks/useLocalize'; -import * as IOUUtils from '../../../../../../libs/IOUUtils'; -import FullPageNotFoundView from '../../../../../../components/BlockingViews/FullPageNotFoundView'; -import styles from '../../../../../../styles/styles'; -import HeaderWithBackButton from '../../../../../../components/HeaderWithBackButton'; -import ScreenWrapper from '../../../../../../components/ScreenWrapper'; +import useLocalize from '../../../../../hooks/useLocalize'; +import * as IOUUtils from '../../../../../libs/IOUUtils'; +import FullPageNotFoundView from '../../../../../components/BlockingViews/FullPageNotFoundView'; +import styles from '../../../../../styles/styles'; +import HeaderWithBackButton from '../../../../../components/HeaderWithBackButton'; +import ScreenWrapper from '../../../../../components/ScreenWrapper'; const propTypes = {}; const defaultProps = {}; -function IOUCreateRequestTabScan() { +function IOURequestCreateTabScan() { const {params: iouType, transactionID, reportID} = useRoute(); console.log('[tim] scan', iouType); const {translate} = useLocalize(); @@ -43,7 +43,7 @@ function IOUCreateRequestTabScan() { shouldEnableKeyboardAvoidingView={false} // @TODO onEntryTransitionEnd={focusTextInput} onEntryTransitionEnd={() => {}} - testID={IOUCreateRequestTabScan.displayName} + testID={IOURequestCreateTabScan.displayName} > {({safeAreaPaddingBottomStyle}) => ( @@ -61,8 +61,8 @@ function IOUCreateRequestTabScan() { ); } -IOUCreateRequestTabScan.propTypes = propTypes; -IOUCreateRequestTabScan.defaultProps = defaultProps; -IOUCreateRequestTabScan.displayName = 'IOUCreateRequestTabScan'; +IOURequestCreateTabScan.propTypes = propTypes; +IOURequestCreateTabScan.defaultProps = defaultProps; +IOURequestCreateTabScan.displayName = 'IOURequestCreateTabScan'; -export default withOnyx({})(IOUCreateRequestTabScan); +export default withOnyx({})(IOURequestCreateTabScan); diff --git a/src/pages/iou/create/request/tab/TabContentWithEditing.js b/src/pages/iou/request/create/tab/TabContentWithEditing.js similarity index 92% rename from src/pages/iou/create/request/tab/TabContentWithEditing.js rename to src/pages/iou/request/create/tab/TabContentWithEditing.js index 1eaa2ba16b3f..972e63e4c5bd 100644 --- a/src/pages/iou/create/request/tab/TabContentWithEditing.js +++ b/src/pages/iou/request/create/tab/TabContentWithEditing.js @@ -10,6 +10,9 @@ const propTypes = { /** The main content to display in the tab */ children: PropTypes.node.isRequired, + /** Whether or not the field is being created the first time or changed later (but before saved) */ + isEditing: PropTypes.bool.isRequired, + /** A function that is called when the back button is pressed */ onBackButtonPress: PropTypes.func.isRequired, @@ -23,10 +26,7 @@ const propTypes = { testID: PropTypes.string.isRequired, }; -function TabContentWithEditing({children, onBackButtonPress, shouldShowNotFound, testID, title}) { - // @TODO make this logic dynamic - const isEditing = false; - +function TabContentWithEditing({children, onBackButtonPress, shouldShowNotFound, testID, title, isEditing}) { // ScreenWrapper is only needed in edit mode because we have a dedicated route for the edit amount page (MoneyRequestEditAmountPage). // The rest of the cases this component is rendered through which has it's own ScreenWrapper if (!isEditing) { From 3f24604427ce4be2bf36e3f2b6dba235e3ef3139 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 26 Sep 2023 15:00:28 +0800 Subject: [PATCH 020/247] Add field component for distance --- src/libs/actions/IOU.js | 7 +- .../create/tab/IOURequestCreateTabDistance.js | 40 +-- .../request/field/IOURequestFieldDistance.js | 292 ++++++++++++++++++ 3 files changed, 311 insertions(+), 28 deletions(-) create mode 100644 src/pages/iou/request/field/IOURequestFieldDistance.js diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index df70eca27a17..631a1e0260f7 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2162,7 +2162,12 @@ function startMoneeRequest(iouType, reportID = '') { const newTransactionID = 'new'; // Store the transaction in Onyx and mark it as not saved so it can be cleaned up later - Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, {wasSaved: false}); + // Use set() here so that there is no way that data will be leaked between objects when it gets reset + Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, { + wasSaved: false, + reportID, + transactionID: newTransactionID, + }); // Navigate to it Navigation.navigate(ROUTES.MONEE_REQUEST_CREATE.getRoute(iouType, newTransactionID, reportID)); diff --git a/src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js b/src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js index a07b1d73c422..6ce824582df6 100644 --- a/src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js +++ b/src/pages/iou/request/create/tab/IOURequestCreateTabDistance.js @@ -1,35 +1,21 @@ -import React from 'react'; -import {Text} from 'react-native'; +import React, {useRef} from 'react'; import {withOnyx} from 'react-native-onyx'; -import {useRoute} from '@react-navigation/native'; -import lodashGet from 'lodash/get'; -import useLocalize from '../../../../../hooks/useLocalize'; -import * as IOUUtils from '../../../../../libs/IOUUtils'; -import TabContentWithEditing from './TabContentWithEditing'; import ONYXKEYS from '../../../../../ONYXKEYS'; -import MoneyRequestAmountForm from '../../../steps/MoneyRequestAmountForm'; +import transactionPropTypes from '../../../../../components/transactionPropTypes'; +import IOURequestFieldDistance from '../../field/IOURequestFieldDistance'; -const propTypes = {}; +const propTypes = { + /* Onyx Props */ + /** The transaction object storing all the data for creation */ + transaction: transactionPropTypes, +}; -const defaultProps = {}; +const defaultProps = { + transaction: {}, +}; -function IOURequestCreateTabDistance(props) { - console.log('[tim] distance', props); - - const currentCurrency = lodashGet(route, 'params.currency', ''); - - const currency = CurrencyUtils.isValidCurrencyCode(currentCurrency) ? currentCurrency : iou.currency; - - return ( - (textInput.current = e)} - onCurrencyButtonPress={navigateToCurrencySelectionPage} - onSubmitButtonPress={navigateToNextPage} - /> - ); +function IOURequestCreateTabDistance({transaction}) { + return ; } IOURequestCreateTabDistance.propTypes = propTypes; diff --git a/src/pages/iou/request/field/IOURequestFieldDistance.js b/src/pages/iou/request/field/IOURequestFieldDistance.js new file mode 100644 index 000000000000..02106cd000c7 --- /dev/null +++ b/src/pages/iou/request/field/IOURequestFieldDistance.js @@ -0,0 +1,292 @@ +import React, {useEffect, useMemo, useState, useRef} from 'react'; +import {ScrollView, View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import lodashGet from 'lodash/get'; +import lodashIsNil from 'lodash/isNil'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import CONST from '../../../../CONST'; +import ROUTES from '../../../../ROUTES'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import styles from '../../../../styles/styles'; +import variables from '../../../../styles/variables'; +import LinearGradient from '../../../../components/LinearGradient'; +import * as MapboxToken from '../../../../libs/actions/MapboxToken'; +import useNetwork from '../../../../hooks/useNetwork'; +import useLocalize from '../../../../hooks/useLocalize'; +import Navigation from '../../../../libs/Navigation/Navigation'; +import reportPropTypes from '../../../reportPropTypes'; +import DotIndicatorMessage from '../../../../components/DotIndicatorMessage'; +import * as ErrorUtils from '../../../../libs/ErrorUtils'; +import usePrevious from '../../../../hooks/usePrevious'; +import theme from '../../../../styles/themes/default'; +import * as Transaction from '../../../../libs/actions/Transaction'; +import * as TransactionUtils from '../../../../libs/TransactionUtils'; +import * as IOUUtils from '../../../../libs/IOUUtils'; +import Button from '../../../../components/Button'; +import DistanceMapView from '../../../../components/DistanceMapView'; +import * as Expensicons from '../../../../components/Icon/Expensicons'; +import PendingMapView from '../../../../components/MapView/PendingMapView'; +import MenuItemWithTopDescription from '../../../../components/MenuItemWithTopDescription'; +import * as StyleUtils from '../../../../styles/StyleUtils'; +import transactionPropTypes from '../../../../components/transactionPropTypes'; +import ScreenWrapper from '../../../../components/ScreenWrapper'; +import FullPageNotFoundView from '../../../../components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '../../../../components/HeaderWithBackButton'; + +const MAX_WAYPOINTS = 25; +const MAX_WAYPOINTS_TO_DISPLAY = 4; + +const propTypes = { + /** The transactionID of this request */ + transactionID: PropTypes.string, + + /** The report to which the distance request is associated */ + report: reportPropTypes, + + /** Data about Mapbox token for calling Mapbox API */ + mapboxAccessToken: PropTypes.shape({ + /** Temporary token for Mapbox API */ + token: PropTypes.string, + + /** Time when the token will expire in ISO 8601 */ + expiration: PropTypes.string, + }), + + /** Are we editing an existing distance request, or creating a new one? */ + isEditingRequest: PropTypes.bool, + + /** Called on submit of this page */ + onSubmit: PropTypes.func.isRequired, + + /* Onyx Props */ + /** The transaction being modified */ + transaction: transactionPropTypes, +}; + +const defaultProps = { + transactionID: '', + report: {}, + isEditingRequest: false, + mapboxAccessToken: { + token: '', + }, + transaction: {}, +}; + +function IOURequestFieldDistance({transactionID, report, transaction, mapboxAccessToken, isEditingRequest, onSubmit}) { + const [shouldShowGradient, setShouldShowGradient] = useState(false); + const [scrollContainerHeight, setScrollContainerHeight] = useState(0); + const [scrollContentHeight, setScrollContentHeight] = useState(0); + const {isOffline} = useNetwork(); + const {translate} = useLocalize(); + + const waypoints = useMemo(() => lodashGet(transaction, 'comment.waypoints', {}), [transaction]); + const previousWaypoints = usePrevious(waypoints); + const numberOfWaypoints = _.size(waypoints); + const numberOfPreviousWaypoints = _.size(previousWaypoints); + const scrollViewRef = useRef(null); + + const lastWaypointIndex = numberOfWaypoints - 1; + const isLoadingRoute = lodashGet(transaction, 'comment.isLoading', false); + const hasRouteError = !!lodashGet(transaction, 'errorFields.route'); + const hasRoute = TransactionUtils.hasRoute(transaction); + const validatedWaypoints = TransactionUtils.getValidWaypoints(waypoints); + const previousValidatedWaypoints = usePrevious(validatedWaypoints); + const haveValidatedWaypointsChanged = !_.isEqual(previousValidatedWaypoints, validatedWaypoints); + const isRouteAbsentWithoutErrors = !hasRoute && !hasRouteError; + const shouldFetchRoute = (isRouteAbsentWithoutErrors || haveValidatedWaypointsChanged) && !isLoadingRoute && _.size(validatedWaypoints) > 1; + const waypointMarkers = useMemo( + () => + _.filter( + _.map(waypoints, (waypoint, key) => { + if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) { + return; + } + + const index = TransactionUtils.getWaypointIndex(key); + let MarkerComponent; + if (index === 0) { + MarkerComponent = Expensicons.DotIndicatorUnfilled; + } else if (index === lastWaypointIndex) { + MarkerComponent = Expensicons.Location; + } else { + MarkerComponent = Expensicons.DotIndicator; + } + + return { + id: `${waypoint.lng},${waypoint.lat},${index}`, + coordinate: [waypoint.lng, waypoint.lat], + markerComponent: () => ( + + ), + }; + }), + (waypoint) => waypoint, + ), + [waypoints, lastWaypointIndex], + ); + + // Show up to the max number of waypoints plus 1/2 of one to hint at scrolling + const halfMenuItemHeight = Math.floor(variables.optionRowHeight / 2); + const scrollContainerMaxHeight = variables.optionRowHeight * MAX_WAYPOINTS_TO_DISPLAY + halfMenuItemHeight; + + useEffect(() => { + MapboxToken.init(); + return MapboxToken.stop; + }, []); + + useEffect(() => { + if (!transactionID || !_.isEmpty(waypoints)) { + return; + } + // Create the initial start and stop waypoints + Transaction.createInitialWaypoints(transactionID); + }, [transactionID, waypoints]); + + const updateGradientVisibility = (event = {}) => { + // If a waypoint extends past the bottom of the visible area show the gradient, else hide it. + const visibleAreaEnd = lodashGet(event, 'nativeEvent.contentOffset.y', 0) + scrollContainerHeight; + setShouldShowGradient(visibleAreaEnd < scrollContentHeight); + }; + useEffect(() => { + if (isOffline || !shouldFetchRoute) { + return; + } + + Transaction.getRoute(transactionID, validatedWaypoints); + }, [shouldFetchRoute, transactionID, validatedWaypoints, isOffline]); + + useEffect(() => { + if (numberOfWaypoints <= numberOfPreviousWaypoints) { + return; + } + scrollViewRef.current.scrollToEnd({animated: true}); + }, [numberOfPreviousWaypoints, numberOfWaypoints]); + + useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]); + + /** + * Takes the user to the page for editing a specific waypoint + * @param {Number} index of the waypoint to edit + */ + const navigateToWaypointEditPage = (index) => { + Navigation.navigate(isEditingRequest ? ROUTES.MONEY_REQUEST_EDIT_WAYPOINT.getRoute(report.reportID, transactionID, index) : ROUTES.MONEY_REQUEST_WAYPOINT.getRoute('request', index)); + }; + + return ( + + setScrollContainerHeight(lodashGet(event, 'nativeEvent.layout.height', 0))} + > + setScrollContentHeight(height)} + onScroll={updateGradientVisibility} + scrollEventThrottle={variables.distanceScrollEventThrottle} + ref={scrollViewRef} + > + {_.map(waypoints, (waypoint, key) => { + // key is of the form waypoint0, waypoint1, ... + const index = TransactionUtils.getWaypointIndex(key); + let descriptionKey = 'distance.waypointDescription.'; + let waypointIcon; + if (index === 0) { + descriptionKey += 'start'; + waypointIcon = Expensicons.DotIndicatorUnfilled; + } else if (index === lastWaypointIndex) { + descriptionKey += 'finish'; + waypointIcon = Expensicons.Location; + } else { + descriptionKey += 'stop'; + waypointIcon = Expensicons.DotIndicator; + } + + return ( + navigateToWaypointEditPage(index)} + key={key} + /> + ); + })} + + {shouldShowGradient && ( + + )} + {hasRouteError && ( + + )} + + +