[Checklist and NewDot C+ payment][$500] Distance - Distance request briefly shows local currency instead of workspace currency after creating it

@sobitneupane

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.4.46-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition:

Default workspace currency is different from local currency

Go to staging.new.expensify.com
Go to workspace chat
Go to + > Request money > Distance
Create a distance request

Expected Result:

The amount in distance request preview in the main chat will show default workspace currency

Actual Result:

The amount in distance request preview in the main chat briefly shows local currency

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6398768_1709324762143.bandicam_2024-03-02_03-27-34-243.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~010a112a7314639b9b
Upwork Job ID: 1765247495001948160
Last Price Increase: 2024-03-06
Automatic offers:

bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @sobitneupane

@kadiealexander

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

@kadiealexander

@kadiealexander FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

@dylanexpensify

We think that this bug might be related to #wave5
CC @dylanexpensify

Proposal

Please re-state the problem that we are trying to solve in this issue.

When creating a distance request, the user's local currency code is shown in the preview instead of the workspace currency.

What is the root cause of that problem?

When creating a distance request, we already calculate the distance amount and include the workspace currency here.

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Lines 349 to 350 in af68510

    
           const amount = DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate); 
        
           IOU.setMoneyRequestAmount_temporaryForRefactor(transaction.transactionID, amount, currency);

The currency is taken from the workspace mileage rate.

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 251 in af68510

const {unit, rate, currency} = mileageRate;

However, there are 2 places where the currency is overwritten with the local currency.

First, when we arrive at the distance confirmation page, the manual (amount) tab is unmounted. This will trigger this useEffect clean up which sets the transaction currency with the original currency. The original currency is the user local currency.

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

Lines 106 to 113 in af68510

    
               return () => { 
        
                   if (isSaveButtonPressed.current) { 
        
                       return; 
        
                   } 
        
                   IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, originalCurrency.current, true); 
        
               }; 
        
               // eslint-disable-next-line react-hooks/exhaustive-deps 
        
           }, []);

Second, when the confirmation page is mounted, we check if the transaction contains an originalCurrency attribute, if yes, the transaction currency is set to originalCurrency.

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

Lines 111 to 118 in af68510

    
           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 
        
           }, []);

They assume that when the user arrives, the originalCurrency is already removed from the transaction because we clear it when pressing the Next button, but only from the manual page/tab.

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

Line 136 in af68510

    
           IOU.setMoneyRequestAmount_temporaryForRefactor(transactionID, amountInSmallestCurrencyUnits, currency || CONST.CURRENCY.USD, true);

App/src/libs/actions/IOU.ts

Lines 294 to 296 in af68510

    
           function setMoneyRequestAmount_temporaryForRefactor(transactionID: string, amount: number, currency: string, removeOriginalCurrency = false) { 
        
               if (removeOriginalCurrency) { 
        
                   Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {amount, currency, originalCurrency: null});

What changes do you think we should make in order to solve the problem?

Revert #34075 and fix the original issue, that is #33608. The issue is, let's say I set the currency to A. Then, on the edit amount page, I open the currency picker and select currency B. Then, I reopen the currency picker page, but it shows currency A as the selected currency and that's because the currency picker page shows the selected currency from the transaction object only, but when we select currency B, we haven't pressed the Save button yet.

To solve it, we can allow the currency picker page (IOURequestStepCurrency) to accept the currency from params and transaction object, similar to what we do in the old amount page.

To cover a case where the user pass an invalid currency params, we can check whether the currency is valid or not, just like we did here:

App/src/pages/iou/steps/NewRequestAmountPage.js

Line 70 in 1f3e31f

    
           const currency = CurrencyUtils.isValidCurrencyCode(currentCurrency) ? currentCurrency : iou.currency;

const currency = CurrencyUtils.isValidCurrencyCode(currencyFromParams) || currencyFromTransactionObject

What alternative solutions did you explore? (Optional)

First alternative:
The originalCurrency is basically being used to reset the transaction currency when the user cancels editing the amount, I don't see it being useful for the start page. So, we can ignore the originalCurrency effect when we are not editing amount.

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

Lines 99 to 113 in af68510

    
           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 
        
           }, []);

Currently, we check for backTo params to check whether it's an amount edit page or not, so I'm gonna use that too for now.

useEffect(() => {
    if (!backTo) return;
    ...restOfTheCode
}, [])

Then, we don't need the changes on other pages anymore.

Second alternative:
I see that this originalCurrency logic is only being used for manual case because both scan and distance don't have an amount input, so it makes sense to check whether the request is manual or not before doing the cleanup. Also, we need to clear the originalCurrency when pressing the Next button in distance tab.

> IOURequestStepConfirmation
useEffect(() => {
    if (!transaction || !transaction.originalCurrency || requestType !== CONST.IOU.REQUEST_TYPE.MANUAL) {
        return;
    }
    // If user somehow lands on this page without the currency reset, then reset it here.
    IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, transaction.originalCurrency, true);
}, []);

> IOURequestStepAmount
useEffect(() => (iouRequestTypeRef.current = iouRequestType), [iouRequestType]);

useEffect(() => {
    return () => {
        if (isSaveButtonPressed.current || iouRequestTypeRef.current !== CONST.IOU.REQUEST_TYPE.MANUAL) {
            return;
        }
        IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, originalCurrency.current, true);
    };
}, []);

> IOURequestStepDistance
const navigateToNextStep = () =>
    IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, null);

@kadiealexander

@kadiealexander Whoops! This issue is 2 days overdue. Let's get this updated quick!

@kadiealexander

@kadiealexander Whoops! This issue is 2 days overdue. Let's get this updated quick!

Not overdue!

@kadiealexander

@kadiealexander the PR was deployed to production on 2024-04-22, so the next step is to pay this out on Monday 2024-04-29

@sobitneupane

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
[@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@sobitneupane] Determine if we should create a regression test for this bug.
[@sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@bernhardoj

Payment Summary

Contributor: @bernhardoj due $500 via Upwork
Reviewer: @sobitneupane owed $500 via NewDot

BugZero Checklist (@kadiealexander)

I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
I have paid out the Upwork contracts or cancelled the ones that are incorrect
I have verified the payment summary above is correct

@sobitneupane

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#34075

[@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

#34075 (comment)

[@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

[@sobitneupane] Determine if we should create a regression test for this bug.

Yes

[@sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

#37643 (comment)

Regression Test Proposal

Prerequisite: Have a workspace with a currency set to different currency than your local currency

Open the workspace chat
Create a new distance request
Verify the distance request preview shows the workspace currency

Do we agree 👍 or 👎

Requested payment in newDot.

Regression test: https://github.com/Expensify/Expensify/issues/394860

@sobitneupane

$500 approved for @sobitneupane

Navigation Menu

Repository navigation

[Checklist and NewDot C+ payment][$500] Distance - Distance request briefly shows local currency instead of workspace currency after creating it #37643

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

54 remaining items

Payment Summary

BugZero Checklist (@kadiealexander)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const amount = DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate);
	IOU.setMoneyRequestAmount_temporaryForRefactor(transaction.transactionID, amount, currency);

	return () => {
	if (isSaveButtonPressed.current) {
	return;
	}
	IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, originalCurrency.current, true);
	};
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	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
	}, []);

	function setMoneyRequestAmount_temporaryForRefactor(transactionID: string, amount: number, currency: string, removeOriginalCurrency = false) {
	if (removeOriginalCurrency) {
	Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {amount, currency, originalCurrency: null});

	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
	}, []);

[Checklist and NewDot C+ payment][$500] Distance - Distance request briefly shows local currency instead of workspace currency after creating it #37643

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Mar 1, 2024

lanitochka17 commented on Mar 1, 2024

lanitochka17 commented on Mar 1, 2024

bernhardoj commented on Mar 2, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

melvin-bot commented on Mar 5, 2024

melvin-bot commented on Mar 5, 2024

kadiealexander commented on Mar 6, 2024

54 remaining items

roryabraham commented on Apr 27, 2024

kadiealexander commented on Apr 30, 2024

kadiealexander commented on Apr 30, 2024

Payment Summary

BugZero Checklist (@kadiealexander)

sobitneupane commented on May 7, 2024

sobitneupane commented on May 7, 2024

sobitneupane commented on May 8, 2024

kadiealexander commented on May 10, 2024

JmillsExpensify commented on May 12, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions