Fix created distance request briefly shows the user local currency instead of the workspace currency

src/ROUTES.ts

@@ -335,8 +335,8 @@ const ROUTES = {
     },
     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),
+        getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, pageIndex = '', currency = '', backTo = '') =>
+            getUrlWithBackToParam(`create/${iouType}/currency/${transactionID}/${reportID}/${pageIndex}?currency=${currency}`, backTo),
     },
     MONEY_REQUEST_STEP_DATE: {
         route: ':action/:iouType/date/:transactionID/:reportID',

src/libs/actions/IOU.ts

@@ -329,11 +329,7 @@ function startMoneyRequest(iouType: ValueOf<typeof CONST.IOU.TYPE>, reportID: st
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function setMoneyRequestAmount_temporaryForRefactor(transactionID: string, amount: number, currency: string, removeOriginalCurrency = false) {
-    if (removeOriginalCurrency) {
-        Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {amount, currency, originalCurrency: null});
-        return;
-    }
+function setMoneyRequestAmount_temporaryForRefactor(transactionID: string, amount: number, currency: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {amount, currency});
 }
 
@@ -343,19 +339,10 @@ function setMoneyRequestCreated(transactionID: string, created: string, isDraft:
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function setMoneyRequestCurrency_temporaryForRefactor(transactionID: string, currency: string, removeOriginalCurrency = false) {
-    if (removeOriginalCurrency) {
-        Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {currency, originalCurrency: null});
-        return;
-    }
+function setMoneyRequestCurrency_temporaryForRefactor(transactionID: string, currency: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {currency});
 }
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID: string, originalCurrency: string) {
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {originalCurrency});
-}
-
 function setMoneyRequestDescription(transactionID: string, comment: string, isDraft: boolean) {
     Onyx.merge(`${isDraft ? ONYXKEYS.COLLECTION.TRANSACTION_DRAFT : ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {comment: {comment: comment.trim()}});
 }
@@ -5179,7 +5166,6 @@ export {
     setMoneyRequestCreated,
     setMoneyRequestCurrency_temporaryForRefactor,
     setMoneyRequestDescription,
-    setMoneyRequestOriginalCurrency_temporaryForRefactor,
     setMoneyRequestParticipants_temporaryForRefactor,
     setMoneyRequestPendingFields,
     setMoneyRequestReceipt,

src/pages/iou/request/step/IOURequestStepAmount.js

@@ -1,7 +1,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import taxPropTypes from '@components/taxPropTypes';
 import transactionPropTypes from '@components/transactionPropTypes';
@@ -67,18 +67,17 @@ const getTaxAmount = (transaction, defaultTaxValue, amount) => {
 function IOURequestStepAmount({
     report,
     route: {
-        params: {iouType, reportID, transactionID, backTo},
+        params: {iouType, reportID, transactionID, backTo, currency: selectedCurrency},
     },
     transaction,
-    transaction: {currency},
+    transaction: {currency: originalCurrency},
     policy,
 }) {
     const {translate} = useLocalize();
     const textInput = useRef(null);
     const focusTimeoutRef = useRef(null);
-    const isSaveButtonPressed = useRef(false);
-    const originalCurrency = useRef(null);
     const iouRequestType = getRequestType(transaction);
+    const currency = CurrencyUtils.isValidCurrencyCode(selectedCurrency) ? selectedCurrency : originalCurrency;
 
     const taxRates = lodashGet(policy, 'taxRates', {});
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report));
@@ -96,35 +95,18 @@ function IOURequestStepAmount({
         }, []),
     );
 
-    useEffect(() => {
-        if (transaction.originalCurrency) {
-            originalCurrency.current = transaction.originalCurrency;
-        } else {
-            originalCurrency.current = currency;
-            IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currency);
-        }
-        return () => {
-            if (isSaveButtonPressed.current) {
-                return;
-            }
-            IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, originalCurrency.current, true);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     const navigateBack = () => {
         Navigation.goBack(backTo);
     };
 
     const navigateToCurrencySelectionPage = () => {
-        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(iouType, transactionID, reportID, backTo ? 'confirm' : '', Navigation.getActiveRouteWithoutParams()));
+        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(iouType, transactionID, reportID, backTo ? 'confirm' : '', currency, Navigation.getActiveRouteWithoutParams()));
     };
 
     /**
      * @param {Number} amount
      */
     const navigateToNextPage = ({amount}) => {
-        isSaveButtonPressed.current = true;
         const amountInSmallestCurrencyUnits = CurrencyUtils.convertToBackendAmount(Number.parseFloat(amount));
 
         if ((iouRequestType === CONST.IOU.REQUEST_TYPE.MANUAL || backTo) && isTaxTrackingEnabled) {
@@ -133,7 +115,7 @@ function IOURequestStepAmount({
             IOU.setMoneyRequestTaxAmount(transaction.transactionID, taxAmountInSmallestCurrencyUnits);
         }
 
-        IOU.setMoneyRequestAmount_temporaryForRefactor(transactionID, amountInSmallestCurrencyUnits, currency || CONST.CURRENCY.USD, true);
+        IOU.setMoneyRequestAmount_temporaryForRefactor(transactionID, amountInSmallestCurrencyUnits, currency || CONST.CURRENCY.USD);
 
         if (backTo) {
             Navigation.goBack(backTo);

src/pages/iou/request/step/IOURequestStepConfirmation.js

@@ -5,7 +5,6 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import categoryPropTypes from '@components/categoryPropTypes';
-import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MoneyRequestConfirmationList from '@components/MoneyTemporaryForRefactorRequestConfirmationList';
@@ -120,15 +119,6 @@ function IOURequestStepConfirmation({
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]);
     const formHasBeenSubmitted = useRef(false);
 
-    useEffect(() => {
-        if (!transaction || !transaction.originalCurrency) {
-            return;
-        }
-        // If user somehow lands on this page without the currency reset, then reset it here.
-        IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, transaction.originalCurrency, true);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     useEffect(() => {
         const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat);
         if (policyExpenseChat) {
@@ -492,10 +482,6 @@ function IOURequestStepConfirmation({
         IOU.setMoneyRequestBillable_temporaryForRefactor(transactionID, billable);
     };
 
-    // This loading indicator is shown because the transaction originalCurrency is being updated later than the component mounts.
-    // To prevent the component from rendering with the wrong currency, we show a loading indicator until the correct currency is set.
-    const isLoading = !!(transaction && transaction.originalCurrency);
-
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -517,40 +503,37 @@ function IOURequestStepConfirmation({
                             },
                         ]}
                     />
-                    {isLoading && <FullScreenLoadingIndicator />}
-                    <View style={[styles.flex1, isLoading && styles.opacity0]}>
-                        <MoneyRequestConfirmationList
-                            transaction={transaction}
-                            hasMultipleParticipants={iouType === CONST.IOU.TYPE.SPLIT}
-                            selectedParticipants={participants}
-                            iouAmount={transaction.amount}
-                            iouComment={lodashGet(transaction, 'comment.comment', '')}
-                            iouCurrencyCode={transaction.currency}
-                            iouIsBillable={transaction.billable}
-                            onToggleBillable={setBillable}
-                            iouCategory={transaction.category}
-                            onConfirm={createTransaction}
-                            onSendMoney={sendMoney}
-                            onSelectParticipant={addNewParticipant}
-                            receiptPath={receiptPath}
-                            receiptFilename={receiptFilename}
-                            iouType={iouType}
-                            reportID={reportID}
-                            isPolicyExpenseChat={isPolicyExpenseChat}
-                            // The participants can only be modified when the action is initiated from directly within a group chat and not the floating-action-button.
-                            // This is because when there is a group of people, say they are on a trip, and you have some shared expenses with some of the people,
-                            // but not all of them (maybe someone skipped out on dinner). Then it's nice to be able to select/deselect people from the group chat bill
-                            // split rather than forcing the user to create a new group, just for that expense. The reportID is empty, when the action was initiated from
-                            // the floating-action-button (since it is something that exists outside the context of a report).
-                            canModifyParticipants={!transaction.isFromGlobalCreate}
-                            policyID={report.policyID}
-                            bankAccountRoute={ReportUtils.getBankAccountRoute(report)}
-                            iouMerchant={transaction.merchant}
-                            iouCreated={transaction.created}
-                            isDistanceRequest={requestType === CONST.IOU.REQUEST_TYPE.DISTANCE}
-                            shouldShowSmartScanFields={requestType !== CONST.IOU.REQUEST_TYPE.SCAN}
-                        />
-                    </View>
+                    <MoneyRequestConfirmationList
+                        transaction={transaction}
+                        hasMultipleParticipants={iouType === CONST.IOU.TYPE.SPLIT}
+                        selectedParticipants={participants}
+                        iouAmount={transaction.amount}
+                        iouComment={lodashGet(transaction, 'comment.comment', '')}
+                        iouCurrencyCode={transaction.currency}
+                        iouIsBillable={transaction.billable}
+                        onToggleBillable={setBillable}
+                        iouCategory={transaction.category}
+                        onConfirm={createTransaction}
+                        onSendMoney={sendMoney}
+                        onSelectParticipant={addNewParticipant}
+                        receiptPath={receiptPath}
+                        receiptFilename={receiptFilename}
+                        iouType={iouType}
+                        reportID={reportID}
+                        isPolicyExpenseChat={isPolicyExpenseChat}
+                        // The participants can only be modified when the action is initiated from directly within a group chat and not the floating-action-button.
+                        // This is because when there is a group of people, say they are on a trip, and you have some shared expenses with some of the people,
+                        // but not all of them (maybe someone skipped out on dinner). Then it's nice to be able to select/deselect people from the group chat bill
+                        // split rather than forcing the user to create a new group, just for that expense. The reportID is empty, when the action was initiated from
+                        // the floating-action-button (since it is something that exists outside the context of a report).
+                        canModifyParticipants={!transaction.isFromGlobalCreate}
+                        policyID={report.policyID}
+                        bankAccountRoute={ReportUtils.getBankAccountRoute(report)}
+                        iouMerchant={transaction.merchant}
+                        iouCreated={transaction.created}
+                        isDistanceRequest={requestType === CONST.IOU.REQUEST_TYPE.DISTANCE}
+                        shouldShowSmartScanFields={requestType !== CONST.IOU.REQUEST_TYPE.SCAN}
+                    />
                 </View>
             )}
         </ScreenWrapper>

src/pages/iou/request/step/IOURequestStepCurrency.js

@@ -52,22 +52,27 @@ const defaultProps = {
 function IOURequestStepCurrency({
     currencyList,
     route: {
-        params: {backTo, iouType, pageIndex, reportID, transactionID},
+        params: {backTo, iouType, pageIndex, reportID, transactionID, currency: selectedCurrency},
     },
-    transaction: {currency},
+    transaction: {currency: originalCurrency},
 }) {
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
     const optionsSelectorRef = useRef();
+    const currency = CurrencyUtils.isValidCurrencyCode(selectedCurrency) ? selectedCurrency : originalCurrency;
 
-    const navigateBack = () => {
+    const navigateBack = (selectedCurrencyValue = undefined) => {
         // If the currency selection was done from the confirmation step (eg. + > request money > manual > confirm > amount > currency)
         // then the user needs taken back to the confirmation page instead of the initial amount page. This is because the route params
         // are only able to handle one backTo param at a time and the user needs to go back to the amount page before going back
         // to the confirmation page
         if (pageIndex === 'confirm') {
             const routeToAmountPageWithConfirmationAsBackTo = getUrlWithBackToParam(backTo, `/${ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(iouType, transactionID, reportID)}`);
-            Navigation.goBack(routeToAmountPageWithConfirmationAsBackTo);
+            if (selectedCurrencyValue) {
+                Navigation.navigate(`${routeToAmountPageWithConfirmationAsBackTo}&currency=${selectedCurrencyValue}`);
+            } else {
+                Navigation.goBack(routeToAmountPageWithConfirmationAsBackTo);
+            }
             return;
         }
         Navigation.goBack(backTo);
@@ -79,8 +84,10 @@ function IOURequestStepCurrency({
      */
     const confirmCurrencySelection = (option) => {
         Keyboard.dismiss();
-        IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, option.currencyCode);
-        navigateBack();
+        if (pageIndex !== 'confirm') {
+            IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, option.currencyCode);
+        }
+        navigateBack(option.currencyCode);
     };
 
     const {sections, headerMessage, initiallyFocusedOptionKey} = useMemo(() => {

src/pages/iou/request/step/IOURequestStepTaxAmountPage.js

@@ -1,7 +1,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -58,10 +58,10 @@ const getTaxAmount = (transaction, defaultTaxValue) => {
 
 function IOURequestStepTaxAmountPage({
     route: {
-        params: {iouType, reportID, transactionID, backTo},
+        params: {iouType, reportID, transactionID, backTo, currency: selectedCurrency},
     },
     transaction,
-    transaction: {currency},
+    transaction: {currency: originalCurrency},
     report,
     policy,
 }) {
@@ -70,28 +70,12 @@ function IOURequestStepTaxAmountPage({
     const textInput = useRef(null);
     const isEditing = Navigation.getActiveRoute().includes('taxAmount');
 
+    const currency = CurrencyUtils.isValidCurrencyCode(selectedCurrency) ? selectedCurrency : originalCurrency;
+
     const focusTimeoutRef = useRef(null);
 
-    const isSaveButtonPressed = useRef(false);
-    const originalCurrency = useRef(null);
     const taxRates = lodashGet(policy, 'taxRates', {});
 
-    useEffect(() => {
-        if (transaction.originalCurrency) {
-            originalCurrency.current = transaction.originalCurrency;
-        } else {
-            originalCurrency.current = currency;
-            IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currency);
-        }
-        return () => {
-            if (isSaveButtonPressed.current) {
-                return;
-            }
-            IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, originalCurrency.current, true);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     useFocusEffect(
         useCallback(() => {
             focusTimeoutRef.current = setTimeout(() => textInput.current && textInput.current.focus(), CONST.ANIMATED_TRANSITION);
@@ -112,15 +96,14 @@ function IOURequestStepTaxAmountPage({
         // If the money request being created is a distance request, don't allow the user to choose the currency.
         // Only USD is allowed for distance requests.
         // Remove query from the route and encode it.
-        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(iouType, transactionID, reportID, backTo ? 'confirm' : '', Navigation.getActiveRouteWithoutParams()));
+        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(iouType, transactionID, reportID, backTo ? 'confirm' : '', currency, Navigation.getActiveRouteWithoutParams()));
     };
 
     const updateTaxAmount = (currentAmount) => {
-        isSaveButtonPressed.current = true;
         const amountInSmallestCurrencyUnits = CurrencyUtils.convertToBackendAmount(Number.parseFloat(currentAmount.amount));
         IOU.setMoneyRequestTaxAmount(transactionID, amountInSmallestCurrencyUnits);
 
-        IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, currency || CONST.CURRENCY.USD, true);
+        IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, currency || CONST.CURRENCY.USD);
 
         if (backTo) {
             Navigation.goBack(backTo);