Fixed currency selection on confirm step #34075
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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,10 @@ 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); | ||
|
Contributor
There was a problem hiding this comment. I think we need to leave comment here to explain why we have this code
Contributor
There was a problem hiding this comment. @shubham1206agra could you help to leave a comment here, other than that it looks good to me. |
||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| includeSafeAreaPaddingBottom={false} | ||
|
|
@@ -339,38 +353,42 @@ function IOURequestStepConfirmation({ | |
| }, | ||
| ]} | ||
| /> | ||
| {isLoading ? ( | ||
| <FullScreenLoadingIndicator /> | ||
| ) : ( | ||
| <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} | ||
| iouTag={transaction.tag} | ||
| 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={_.isEmpty(lodashGet(transaction, 'receipt.source', ''))} | ||
| /> | ||
| )} | ||
| </View> | ||
| )} | ||
| </ScreenWrapper> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm thinking is it possible if we don't need an additional useRef and modify current
IOU.setMoneyRequestOriginalCurrency_temporaryForRefactorto pass a 3rd params like current implementation.How about?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, it was creating some problems as it was keeping old values in mount / unmount.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or we can always reset originalCurrency on unmount.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let keep it this way as it helps me with cases of refresh (it will call mount again, and will set wrong value on refresh).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @shubham1206agra I will try to test & complete review checklist tomorrow