[CP staging] Followup/23961 edit request

src/ROUTES.js

@@ -69,6 +69,8 @@ export default {
     REPORT_WITH_ID: 'r/:reportID?',
     EDIT_REQUEST: 'r/:threadReportID/edit/:field',
     getEditRequestRoute: (threadReportID, field) => `r/${threadReportID}/edit/${field}`,
+    EDIT_CURRENCY_REQUEST: 'r/:threadReportID/edit/currency',
+    getEditRequestCurrencyRoute: (threadReportID, currency, backTo) => `r/${threadReportID}/edit/currency?currency=${currency}&backTo=${backTo}`,
     getReportRoute: (reportID) => `r/${reportID}`,
     REPORT_WITH_ID_DETAILS_SHARE_CODE: 'r/:reportID/details/shareCode',
     getReportShareCodeRoute: (reportID) => `r/${reportID}/details/shareCode`,

src/components/CurrencySymbolButton.js

@@ -13,24 +13,16 @@ const propTypes = {
 
     /** Function to call when currency button is pressed */
     onCurrencyButtonPress: PropTypes.func.isRequired,
-
-    /** Flag to indicate if the button should be disabled */
-    disabled: PropTypes.bool,
-};
-
-const defaultProps = {
-    disabled: false,
 };
 
-function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol, disabled}) {
+function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}) {
     const {translate} = useLocalize();
     return (
-        <Tooltip text={!disabled && translate('iOUCurrencySelection.selectCurrency')}>
+        <Tooltip text={translate('iOUCurrencySelection.selectCurrency')}>
             <PressableWithoutFeedback
                 onPress={onCurrencyButtonPress}
-                accessibilityLabel={!disabled && translate('iOUCurrencySelection.selectCurrency')}
+                accessibilityLabel={translate('iOUCurrencySelection.selectCurrency')}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                disabled={disabled}
             >
                 <Text style={styles.iouAmountText}>{currencySymbol}</Text>
             </PressableWithoutFeedback>
@@ -40,6 +32,5 @@ function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol, disabled})
 
 CurrencySymbolButton.propTypes = propTypes;
 CurrencySymbolButton.displayName = 'CurrencySymbolButton';
-CurrencySymbolButton.defaultProps = defaultProps;
 
 export default CurrencySymbolButton;

src/components/TextInputWithCurrencySymbol.js

@@ -33,9 +33,6 @@ const propTypes = {
 
     /** Function to call when selection in text input is changed */
     onSelectionChange: PropTypes.func,
-
-    /** Flag to indicate if the button should be disabled */
-    disabled: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -44,7 +41,6 @@ const defaultProps = {
     onCurrencyButtonPress: () => {},
     selection: undefined,
     onSelectionChange: () => {},
-    disabled: false,
 };
 
 function TextInputWithCurrencySymbol(props) {
@@ -62,7 +58,6 @@ function TextInputWithCurrencySymbol(props) {
         <CurrencySymbolButton
             currencySymbol={currencySymbol}
             onCurrencyButtonPress={props.onCurrencyButtonPress}
-            disabled={props.disabled}
         />
     );
 

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -723,6 +723,13 @@ const EditRequestStackNavigator = createModalStackNavigator([
         },
         name: 'EditRequest_Root',
     },
+    {
+        getComponent: () => {
+            const IOUCurrencySelection = require('../../../pages/iou/IOUCurrencySelection').default;
+            return IOUCurrencySelection;
+        },
+        name: 'EditRequest_Currency',
+    },
 ]);
 
 export {

src/libs/Navigation/linkingConfig.js

@@ -361,6 +361,7 @@ export default {
                     EditRequest: {
                         screens: {
                             EditRequest_Root: ROUTES.EDIT_REQUEST,
+                            EditRequest_Currency: ROUTES.EDIT_CURRENCY_REQUEST,
                         },
                     },
                 },

src/pages/EditRequestAmountPage.js

@@ -7,6 +7,7 @@ import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import Navigation from '../libs/Navigation/Navigation';
 import useLocalize from '../hooks/useLocalize';
 import MoneyRequestAmountForm from './iou/steps/MoneyRequestAmountForm';
+import ROUTES from '../ROUTES';
 
 const propTypes = {
     /** Transaction default amount value */
@@ -17,9 +18,12 @@ const propTypes = {
 
     /** Callback to fire when the Save button is pressed  */
     onSubmit: PropTypes.func.isRequired,
+
+    /** reportID for the transaction thread */
+    reportID: PropTypes.string.isRequired,
 };
 
-function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit}) {
+function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, reportID}) {
     const {translate} = useLocalize();
     const textInput = useRef(null);
 
@@ -36,6 +40,12 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit}) {
         });
     };
 
+    const navigateToCurrencySelectionPage = () => {
+        // Remove query from the route and encode it.
+        const activeRoute = encodeURIComponent(Navigation.getActiveRoute().replace(/\?.*/, ''));
+        Navigation.navigate(ROUTES.getEditRequestCurrencyRoute(reportID, defaultCurrency, activeRoute));
+    };
+
     useFocusEffect(
         useCallback(() => {
             focusTextInput();
@@ -53,11 +63,10 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit}) {
             />
             <MoneyRequestAmountForm
                 isEditing
-                disableCurrency
                 currency={defaultCurrency}
                 amount={defaultAmount}
                 ref={(e) => (textInput.current = e)}
-                onCurrencyButtonPress={() => null}
+                onCurrencyButtonPress={navigateToCurrencySelectionPage}
                 onSubmitButtonPress={onSubmit}
             />
         </ScreenWrapper>

src/pages/EditRequestPage.js

@@ -44,6 +44,8 @@ function EditRequestPage({report, route}) {
     const transactionAmount = TransactionUtils.getAmount(transaction, ReportUtils.isExpenseReport(ReportUtils.getParentReport(report)));
     const transactionCurrency = TransactionUtils.getCurrency(transaction);
 
+    const defaultCurrency = lodashGet(route, 'params.currency', '') || transactionCurrency;
+
     // Take only the YYYY-MM-DD value
     const transactionCreatedDate = new Date(TransactionUtils.getCreated(transaction));
     const transactionCreated = format(transactionCreatedDate, CONST.DATE.FNS_FORMAT_STRING);
@@ -91,19 +93,19 @@ function EditRequestPage({report, route}) {
         return (
             <EditRequestAmountPage
                 defaultAmount={transactionAmount}
-                defaultCurrency={transactionCurrency}
+                defaultCurrency={defaultCurrency}
                 reportID={report.reportID}
                 onSubmit={(transactionChanges) => {
                     const amount = CurrencyUtils.convertToSmallestUnit(transactionCurrency, Number.parseFloat(transactionChanges));
-                    // In case the amount hasn't been changed, do not make the API request.
-                    if (amount === transactionAmount) {
+                    // In case the amount and the currency haven't been changed, do not make the API request.
+                    if (amount === transactionAmount && transactionCurrency === defaultCurrency) {
                         Navigation.dismissModal();
                         return;
                     }
                     // Temporarily disabling currency editing and it will be enabled as a quick follow up
                     editMoneyRequest({
                         amount,
-                        currency: transactionCurrency,
+                        currency: defaultCurrency,
                     });
                 }}
             />

src/pages/iou/steps/MoneyRequestAmountForm.js

@@ -31,17 +31,13 @@ const propTypes = {
 
     /** Fired when submit button pressed, saves the given amount and navigates to the next page */
     onSubmitButtonPress: PropTypes.func.isRequired,
-
-    /** Flag to indicate if the button should be disabled */
-    disableCurrency: PropTypes.bool,
 };
 
 const defaultProps = {
     amount: 0,
     currency: CONST.CURRENCY.USD,
     forwardedRef: null,
     isEditing: false,
-    disableCurrency: false,
 };
 
 /**
@@ -61,7 +57,7 @@ const AMOUNT_VIEW_ID = 'amountView';
 const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
 
-function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCurrencyButtonPress, onSubmitButtonPress, disableCurrency}) {
+function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCurrencyButtonPress, onSubmitButtonPress}) {
     const {translate, toLocaleDigit, numberFormat} = useLocalize();
 
     const textInput = useRef(null);
@@ -207,7 +203,6 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
                         }
                         setSelection(e.nativeEvent.selection);
                     }}
-                    disabled={disableCurrency}
                 />
             </View>
             <View