Skip to content

Commit

Permalink
Merge pull request #28618 from Expensify/tgolen-refactor-request-navi…
Browse files Browse the repository at this point in the history 
…gation2

Refactor the money request creation flow
  • Loading branch information
@mountiny
mountiny authored Dec 8, 2023
2 parents 2b52100 + e153f6c commit 269e866
Show file tree
Hide file tree
Showing 58 changed files with 4,742 additions and 102 deletions.
10 changes: 10 additions & 0 deletions src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1135,6 +1135,8 @@ const CONST = {
},

IOU: {
// This is the transactionID used when going through the create money request flow so that it mimics a real transaction (like the edit flow)
OPTIMISTIC_TRANSACTION_ID: '1',
// Note: These payment types are used when building IOU reportAction message values in the server and should
// not be changed.
PAYMENT_TYPE: {
Expand All @@ -1147,6 +1149,11 @@ const CONST = {
SPLIT: 'split',
REQUEST: 'request',
},
REQUEST_TYPE: {
DISTANCE: 'distance',
MANUAL: 'manual',
SCAN: 'scan',
},
REPORT_ACTION_TYPE: {
PAY: 'pay',
CREATE: 'create',
Expand Down Expand Up @@ -2755,6 +2762,9 @@ const CONST = {
NEW_CHAT: 'chat',
NEW_ROOM: 'room',
RECEIPT_TAB_ID: 'ReceiptTab',
IOU_REQUEST_TYPE: 'iouRequestType',
},
TAB_REQUEST: {
MANUAL: 'manual',
SCAN: 'scan',
DISTANCE: 'distance',
Expand Down
80 changes: 79 additions & 1 deletion src/ROUTES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ function getUrlWithBackToParam<TUrl extends string>(url: TUrl, backTo?: string):

const ROUTES = {
HOME: '',
/** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */

// This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated
CONCIERGE: 'concierge',
FLAG_COMMENT: {
route: 'flag/:reportID/:reportActionID',
Expand Down Expand Up @@ -306,6 +307,82 @@ const ROUTES = {
MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',

MONEY_REQUEST_CREATE: {
route: 'create/:iouType/start/:transactionID/:reportID',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}` as const,
},
MONEY_REQUEST_STEP_CONFIRMATION: {
route: 'create/:iouType/confirmation/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/confirmation/${transactionID}/${reportID}/` as const,
},
MONEY_REQUEST_STEP_AMOUNT: {
route: 'create/:iouType/amount/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/amount/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_CATEGORY: {
route: 'create/:iouType/category/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/category/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_CURRENCY: {
route: 'create/:iouType/currency/:transactionID/:reportID/:pageIndex?/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, pageIndex = '', backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/currency/${transactionID}/${reportID}/${pageIndex}`, backTo),
},
MONEY_REQUEST_STEP_DATE: {
route: 'create/:iouType/date/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/date/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_DESCRIPTION: {
route: 'create/:iouType/description/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/description/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_DISTANCE: {
route: 'create/:iouType/distance/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/distance/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_MERCHANT: {
route: 'create/:iouType/merchante/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/merchante/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_PARTICIPANTS: {
route: 'create/:iouType/participants/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/participants/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_SCAN: {
route: 'create/:iouType/scan/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/scan/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_TAG: {
route: 'create/:iouType/tag/:transactionID/:reportID/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/tag/${transactionID}/${reportID}/`, backTo),
},
MONEY_REQUEST_STEP_WAYPOINT: {
route: 'create/:iouType/waypoint/:transactionID/:reportID/:pageIndex/',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, pageIndex = '', backTo = '') =>
getUrlWithBackToParam(`create/${iouType}/waypoint/${transactionID}/${reportID}/${pageIndex}`, backTo),
},
MONEY_REQUEST_CREATE_TAB_DISTANCE: {
route: 'create/:iouType/start/:transactionID/:reportID/distance',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}/distance` as const,
},
MONEY_REQUEST_CREATE_TAB_MANUAL: {
route: 'create/:iouType/start/:transactionID/:reportID/manual',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}/manual` as const,
},
MONEY_REQUEST_CREATE_TAB_SCAN: {
route: 'create/:iouType/start/:transactionID/:reportID/scan',
getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) => `create/${iouType}/start/${transactionID}/${reportID}/scan` as const,
},

IOU_REQUEST: 'request/new',
IOU_SEND: 'send/new',
IOU_SEND_ADD_BANK_ACCOUNT: 'send/new/add-bank-account',
Expand Down Expand Up @@ -391,6 +468,7 @@ const ROUTES = {
MONEY2020: 'money2020',
} as const;

export {getUrlWithBackToParam};
export default ROUTES;

// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand Down
13 changes: 13 additions & 0 deletions src/SCREENS.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,19 @@ const SCREENS = {
SAML_SIGN_IN: 'SAMLSignIn',

MONEY_REQUEST: {
CREATE: 'Money_Request_Create',
STEP_CONFIRMATION: 'Money_Request_Step_Confirmation',
STEP_AMOUNT: 'Money_Request_Step_Amount',
STEP_CATEGORY: 'Money_Request_Step_Category',
STEP_CURRENCY: 'Money_Request_Step_Currency',
STEP_DATE: 'Money_Request_Step_Date',
STEP_DESCRIPTION: 'Money_Request_Step_Description',
STEP_DISTANCE: 'Money_Request_Step_Distance',
STEP_MERCHANT: 'Money_Request_Step_Merchant',
STEP_PARTICIPANTS: 'Money_Request_Step_Participants',
STEP_SCAN: 'Money_Request_Step_Scan',
STEP_TAG: 'Money_Request_Step_Tag',
STEP_WAYPOINT: 'Money_Request_Step_Waypoint',
ROOT: 'Money_Request',
AMOUNT: 'Money_Request_Amount',
PARTICIPANTS: 'Money_Request_Participants',
Expand Down
3 changes: 0 additions & 3 deletions src/components/ConfirmedRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,6 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
}

export default withOnyx({
transaction: {
key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
},
mapboxAccessToken: {
key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
},
Expand Down
5 changes: 1 addition & 4 deletions src/components/DistanceRequest/DistanceRequestFooter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const propTypes = {
expiration: PropTypes.string,
}),

/* Onyx Props */
/** The transaction being interacted with */
transaction: transactionPropTypes,
};

Expand Down Expand Up @@ -135,9 +135,6 @@ DistanceRequestFooter.propTypes = propTypes;
DistanceRequestFooter.defaultProps = defaultProps;

export default withOnyx({
transaction: {
key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
},
mapboxAccessToken: {
key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/DistanceRequest/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ function DistanceRequest({transactionID, report, transaction, route, isEditingRe
waypoints={waypoints}
hasRouteError={hasRouteError}
navigateToWaypointEditPage={navigateToWaypointEditPage}
transactionID={transactionID}
transaction={transaction}
/>
}
/>
Expand Down
11 changes: 4 additions & 7 deletions src/components/MoneyRequestConfirmationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ function MoneyRequestConfirmationList(props) {
// Prop functions pass props itself as a "this" value to the function which means they change every time props change.
const {onSendMoney, onConfirm, onSelectParticipant} = props;
const {translate, toLocaleDigit} = useLocalize();
const transaction = props.isEditingSplitBill ? props.draftTransaction || props.transaction : props.transaction;
const transaction = props.transaction;
const {canUseViolations} = usePermissions();

const isTypeRequest = props.iouType === CONST.IOU.TYPE.REQUEST;
Expand Down Expand Up @@ -409,8 +409,8 @@ function MoneyRequestConfirmationList(props) {
return;
}
const distanceMerchant = DistanceRequestUtils.getDistanceMerchant(hasRoute, distance, unit, rate, currency, translate, toLocaleDigit);
IOU.setMoneyRequestMerchant(distanceMerchant);
}, [hasRoute, distance, unit, rate, currency, translate, toLocaleDigit, props.isDistanceRequest]);
IOU.setMoneyRequestMerchant_temporaryForRefactor(props.transactionID, distanceMerchant);
}, [hasRoute, distance, unit, rate, currency, translate, toLocaleDigit, props.isDistanceRequest, props.transactionID]);

/**
* @param {Object} option
Expand Down Expand Up @@ -579,7 +579,7 @@ function MoneyRequestConfirmationList(props) {
>
{props.isDistanceRequest && (
<View style={styles.confirmationListMapItem}>
<ConfirmedRoute transactionID={props.transactionID} />
<ConfirmedRoute transaction={props.transaction} />
</View>
)}
{(receiptImage || receiptThumbnail) && (
Expand Down Expand Up @@ -772,9 +772,6 @@ export default compose(
draftTransaction: {
key: ({transactionID}) => `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`,
},
transaction: {
key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
},
policy: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
},
Expand Down
Loading

0 comments on commit 269e866

Please sign in to comment.