From e92901687bd21152499eca4cde4167d0f68e58da Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 6 Jan 2024 19:01:19 +0530 Subject: [PATCH 1/8] fixed currency selection on confirm step --- src/libs/actions/IOU.js | 9 +++++++++ .../iou/request/step/IOURequestStepAmount.js | 19 ++++++++++++++++--- .../request/step/IOURequestStepCurrency.js | 4 +--- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index fb4e9f02f1b6..37e72b2133e3 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -198,6 +198,14 @@ function setMoneyRequestCurrency_temporaryForRefactor(transactionID, currency) { Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {currency}); } +/** + * @param {String} transactionID + * @param {String} originalCurrency + */ +function setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, originalCurrency) { + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {originalCurrency}); +} + /** * @param {String} transactionID * @param {String} comment @@ -3566,6 +3574,7 @@ export { setMoneyRequestCategory_temporaryForRefactor, setMoneyRequestCreated_temporaryForRefactor, setMoneyRequestCurrency_temporaryForRefactor, + setMoneyRequestOriginalCurrency_temporaryForRefactor, setMoneyRequestDescription_temporaryForRefactor, setMoneyRequestMerchant_temporaryForRefactor, setMoneyRequestParticipants_temporaryForRefactor, diff --git a/src/pages/iou/request/step/IOURequestStepAmount.js b/src/pages/iou/request/step/IOURequestStepAmount.js index 84e0ac8533c5..55826244434f 100644 --- a/src/pages/iou/request/step/IOURequestStepAmount.js +++ b/src/pages/iou/request/step/IOURequestStepAmount.js @@ -1,6 +1,6 @@ import {useFocusEffect} from '@react-navigation/native'; import PropTypes from 'prop-types'; -import React, {useCallback, useRef} from 'react'; +import React, {useCallback, useEffect, useRef} from 'react'; import {withOnyx} from 'react-native-onyx'; import taxPropTypes from '@components/taxPropTypes'; import transactionPropTypes from '@components/transactionPropTypes'; @@ -62,15 +62,16 @@ function IOURequestStepAmount({ params: {iouType, reportID, transactionID, backTo, currency: selectedCurrency}, }, transaction, - transaction: {currency: originalCurrency}, + transaction: {currency: currentCurrency}, policyTaxRates, policy, }) { const {translate} = useLocalize(); const textInput = useRef(null); const focusTimeoutRef = useRef(null); + const isSaveButtonPressed = useRef(false); const iouRequestType = getRequestType(transaction); - const currency = selectedCurrency || originalCurrency; + const currency = selectedCurrency || currentCurrency; const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)); const isTaxTrackingEnabled = isPolicyExpenseChat && policy.isTaxTrackingEnabled; @@ -87,6 +88,17 @@ function IOURequestStepAmount({ }, []), ); + useEffect(() => { + IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currentCurrency); + return () => { + if (isSaveButtonPressed.current) { + return; + } + IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, transaction.originalCurrency); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const navigateBack = () => { Navigation.goBack(backTo || ROUTES.HOME); }; @@ -99,6 +111,7 @@ function IOURequestStepAmount({ * @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) { diff --git a/src/pages/iou/request/step/IOURequestStepCurrency.js b/src/pages/iou/request/step/IOURequestStepCurrency.js index b4281de4d16e..ea6173408371 100644 --- a/src/pages/iou/request/step/IOURequestStepCurrency.js +++ b/src/pages/iou/request/step/IOURequestStepCurrency.js @@ -82,9 +82,7 @@ function IOURequestStepCurrency({ */ const confirmCurrencySelection = (option) => { Keyboard.dismiss(); - if (pageIndex !== 'confirm') { - IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, option.currencyCode); - } + IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, option.currencyCode); navigateBack(option.currencyCode); }; From ef3810cf358833bd609a8f75db282118d69d6bdc Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 6 Jan 2024 21:14:02 +0530 Subject: [PATCH 2/8] fixed minor bugs regarding currency change --- src/libs/actions/IOU.js | 14 ++++++++++++-- src/pages/iou/request/step/IOURequestStepAmount.js | 6 ++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index 37e72b2133e3..098685206c2c 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -177,8 +177,13 @@ function clearMoneyRequest(transactionID) { * @param {String} transactionID * @param {Number} amount * @param {String} currency + * @param {Boolean} [removeOriginalCurrency] */ -function setMoneyRequestAmount_temporaryForRefactor(transactionID, amount, currency) { +function setMoneyRequestAmount_temporaryForRefactor(transactionID, amount, currency, removeOriginalCurrency = false) { + if (removeOriginalCurrency) { + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {amount, currency, originalCurrency: null}); + return; + } Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {amount, currency}); } @@ -193,8 +198,13 @@ function setMoneyRequestCreated_temporaryForRefactor(transactionID, created) { /** * @param {String} transactionID * @param {String} currency + * @param {Boolean} [removeOriginalCurrency] */ -function setMoneyRequestCurrency_temporaryForRefactor(transactionID, currency) { +function setMoneyRequestCurrency_temporaryForRefactor(transactionID, currency, removeOriginalCurrency = false) { + if (removeOriginalCurrency) { + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {currency, originalCurrency: null}); + return; + } Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {currency}); } diff --git a/src/pages/iou/request/step/IOURequestStepAmount.js b/src/pages/iou/request/step/IOURequestStepAmount.js index 55826244434f..99dd9ba25ae8 100644 --- a/src/pages/iou/request/step/IOURequestStepAmount.js +++ b/src/pages/iou/request/step/IOURequestStepAmount.js @@ -70,6 +70,7 @@ function IOURequestStepAmount({ const textInput = useRef(null); const focusTimeoutRef = useRef(null); const isSaveButtonPressed = useRef(false); + const originalCurrency = useRef(null); const iouRequestType = getRequestType(transaction); const currency = selectedCurrency || currentCurrency; @@ -89,12 +90,13 @@ function IOURequestStepAmount({ ); useEffect(() => { + originalCurrency.current = currentCurrency; IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currentCurrency); return () => { if (isSaveButtonPressed.current) { return; } - IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, transaction.originalCurrency); + IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, originalCurrency.current, true); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -120,7 +122,7 @@ function IOURequestStepAmount({ IOU.setMoneyRequestTaxAmount(transaction.transactionID, taxAmountInSmallestCurrencyUnits); } - IOU.setMoneyRequestAmount_temporaryForRefactor(transactionID, amountInSmallestCurrencyUnits, currency || CONST.CURRENCY.USD); + IOU.setMoneyRequestAmount_temporaryForRefactor(transactionID, amountInSmallestCurrencyUnits, currency || CONST.CURRENCY.USD, true); if (backTo) { Navigation.goBack(backTo); From ca2763dd1ffa2bbbeeebb0123b6b5f98f48de9a8 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 6 Jan 2024 21:17:06 +0530 Subject: [PATCH 3/8] fixed deep linking bugs --- src/pages/iou/request/step/IOURequestStepAmount.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepAmount.js b/src/pages/iou/request/step/IOURequestStepAmount.js index 99dd9ba25ae8..8e16af248dc4 100644 --- a/src/pages/iou/request/step/IOURequestStepAmount.js +++ b/src/pages/iou/request/step/IOURequestStepAmount.js @@ -90,8 +90,12 @@ function IOURequestStepAmount({ ); useEffect(() => { - originalCurrency.current = currentCurrency; - IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currentCurrency); + if (transaction.originalCurrency) { + originalCurrency.current = transaction.originalCurrency; + } else { + originalCurrency.current = currentCurrency; + IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currentCurrency); + } return () => { if (isSaveButtonPressed.current) { return; From 939684581574a4e63218d80805d231ee3a18b3fa Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 6 Jan 2024 21:20:10 +0530 Subject: [PATCH 4/8] mirroring changes in tax step --- .../step/IOURequestStepTaxAmountPage.js | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js b/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js index 8ee3abb56d00..70b2ccd7e270 100644 --- a/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js +++ b/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js @@ -1,5 +1,5 @@ import {useFocusEffect} from '@react-navigation/native'; -import React, {useCallback, useRef} from 'react'; +import React, {useCallback, useRef, useEffect} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -56,7 +56,7 @@ function IOURequestStepTaxAmountPage({ params: {iouType, reportID, transactionID, backTo, currency: selectedCurrency}, }, transaction, - transaction: {currency: originalCurrency}, + transaction: {currency: currentCurrency}, report, policyTaxRates, }) { @@ -65,10 +65,29 @@ function IOURequestStepTaxAmountPage({ const textInput = useRef(null); const isEditing = Navigation.getActiveRoute().includes('taxAmount'); - const currency = selectedCurrency || originalCurrency; + const currency = selectedCurrency || currentCurrency; const focusTimeoutRef = useRef(null); + const isSaveButtonPressed = useRef(false); + const originalCurrency = useRef(null); + + useEffect(() => { + if (transaction.originalCurrency) { + originalCurrency.current = transaction.originalCurrency; + } else { + originalCurrency.current = currentCurrency; + IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currentCurrency); + } + 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); @@ -93,10 +112,11 @@ function IOURequestStepTaxAmountPage({ }; 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); + IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, currency || CONST.CURRENCY.USD, true); if (backTo) { Navigation.goBack(backTo); From db92b88156a975a959177cd93eade70856a20339 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 6 Jan 2024 21:22:59 +0530 Subject: [PATCH 5/8] fix lint --- src/pages/iou/request/step/IOURequestStepTaxAmountPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js b/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js index 70b2ccd7e270..9cfd8f7ddf26 100644 --- a/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js +++ b/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js @@ -1,5 +1,5 @@ import {useFocusEffect} from '@react-navigation/native'; -import React, {useCallback, useRef, useEffect} from 'react'; +import React, {useCallback, useEffect, useRef} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; From f27c0371bd62b2f08811aecadb07e803b1888f50 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 6 Jan 2024 21:32:26 +0530 Subject: [PATCH 6/8] removed unecessary param --- src/pages/iou/request/step/IOURequestStepAmount.js | 9 ++++----- src/pages/iou/request/step/IOURequestStepCurrency.js | 10 +++------- .../iou/request/step/IOURequestStepTaxAmountPage.js | 10 ++++------ 3 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepAmount.js b/src/pages/iou/request/step/IOURequestStepAmount.js index 8e16af248dc4..f91e7cea533b 100644 --- a/src/pages/iou/request/step/IOURequestStepAmount.js +++ b/src/pages/iou/request/step/IOURequestStepAmount.js @@ -59,10 +59,10 @@ const getTaxAmount = (transaction, defaultTaxValue, amount) => { function IOURequestStepAmount({ report, route: { - params: {iouType, reportID, transactionID, backTo, currency: selectedCurrency}, + params: {iouType, reportID, transactionID, backTo}, }, transaction, - transaction: {currency: currentCurrency}, + transaction: {currency}, policyTaxRates, policy, }) { @@ -72,7 +72,6 @@ function IOURequestStepAmount({ const isSaveButtonPressed = useRef(false); const originalCurrency = useRef(null); const iouRequestType = getRequestType(transaction); - const currency = selectedCurrency || currentCurrency; const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)); const isTaxTrackingEnabled = isPolicyExpenseChat && policy.isTaxTrackingEnabled; @@ -93,8 +92,8 @@ function IOURequestStepAmount({ if (transaction.originalCurrency) { originalCurrency.current = transaction.originalCurrency; } else { - originalCurrency.current = currentCurrency; - IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currentCurrency); + originalCurrency.current = currency; + IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currency); } return () => { if (isSaveButtonPressed.current) { diff --git a/src/pages/iou/request/step/IOURequestStepCurrency.js b/src/pages/iou/request/step/IOURequestStepCurrency.js index ea6173408371..06af0ecf3ca4 100644 --- a/src/pages/iou/request/step/IOURequestStepCurrency.js +++ b/src/pages/iou/request/step/IOURequestStepCurrency.js @@ -59,18 +59,14 @@ function IOURequestStepCurrency({ const [searchValue, setSearchValue] = useState(''); const optionsSelectorRef = useRef(); - const navigateBack = (selectedCurrency = undefined) => { + const navigateBack = () => { // 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)}`); - if (selectedCurrency) { - Navigation.navigate(`${routeToAmountPageWithConfirmationAsBackTo}¤cy=${selectedCurrency}`); - } else { - Navigation.goBack(routeToAmountPageWithConfirmationAsBackTo); - } + Navigation.goBack(routeToAmountPageWithConfirmationAsBackTo); return; } Navigation.goBack(backTo || ROUTES.HOME); @@ -83,7 +79,7 @@ function IOURequestStepCurrency({ const confirmCurrencySelection = (option) => { Keyboard.dismiss(); IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, option.currencyCode); - navigateBack(option.currencyCode); + navigateBack(); }; const {sections, headerMessage, initiallyFocusedOptionKey} = useMemo(() => { diff --git a/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js b/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js index 9cfd8f7ddf26..5c968b8415a4 100644 --- a/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js +++ b/src/pages/iou/request/step/IOURequestStepTaxAmountPage.js @@ -53,10 +53,10 @@ const getTaxAmount = (transaction, defaultTaxValue) => { function IOURequestStepTaxAmountPage({ route: { - params: {iouType, reportID, transactionID, backTo, currency: selectedCurrency}, + params: {iouType, reportID, transactionID, backTo}, }, transaction, - transaction: {currency: currentCurrency}, + transaction: {currency}, report, policyTaxRates, }) { @@ -65,8 +65,6 @@ function IOURequestStepTaxAmountPage({ const textInput = useRef(null); const isEditing = Navigation.getActiveRoute().includes('taxAmount'); - const currency = selectedCurrency || currentCurrency; - const focusTimeoutRef = useRef(null); const isSaveButtonPressed = useRef(false); @@ -76,8 +74,8 @@ function IOURequestStepTaxAmountPage({ if (transaction.originalCurrency) { originalCurrency.current = transaction.originalCurrency; } else { - originalCurrency.current = currentCurrency; - IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currentCurrency); + originalCurrency.current = currency; + IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, currency); } return () => { if (isSaveButtonPressed.current) { From d7fdf8010bea5f2aa1222b79365d70d57552c29e Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Mon, 22 Jan 2024 16:59:38 +0530 Subject: [PATCH 7/8] added full screen loader for better UX --- .../step/IOURequestStepConfirmation.js | 80 +++++++++++-------- 1 file changed, 48 insertions(+), 32 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js index 9df2564ae38d..84adf87bbae2 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.js +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js @@ -5,6 +5,7 @@ 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'; @@ -103,6 +104,15 @@ function IOURequestStepConfirmation({ ); const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]); + 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) { @@ -318,6 +328,8 @@ function IOURequestStepConfirmation({ IOU.setMoneyRequestBillable_temporaryForRefactor(transactionID, billable); }; + const isLoading = !!(transaction && transaction.originalCurrency); + return ( - + {isLoading ? ( + + ) : ( + + )} )} From 2bf606f75475c0d07b0634ffc3a452dde69a4ac8 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Sat, 3 Feb 2024 09:24:10 +0530 Subject: [PATCH 8/8] added comment --- src/pages/iou/request/step/IOURequestStepConfirmation.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js index 84adf87bbae2..c177e4dfd585 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.js +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js @@ -328,6 +328,8 @@ 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 (