Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
6 tasks done
lanitochka17 opened this issue Mar 1, 2024 · 45 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@lanitochka17
Copy link

lanitochka17 commented Mar 1, 2024

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] 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
  1. Go to staging.new.expensify.com
  2. Go to workspace chat
  3. Go to + > Request money > Distance
  4. 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?

  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

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 OwnerCurrent Issue Owner: @sobitneupane
@lanitochka17 lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Mar 1, 2024
Copy link

melvin-bot bot commented Mar 1, 2024

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

@lanitochka17
Copy link
Author

@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

@lanitochka17
Copy link
Author

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

@bernhardoj
Copy link
Contributor

bernhardoj commented Mar 2, 2024

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.

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

The currency is taken from the workspace mileage rate.

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.

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.

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.

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:

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.

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);

@melvin-bot melvin-bot bot added the Overdue label Mar 4, 2024
Copy link

melvin-bot bot commented Mar 5, 2024

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

1 similar comment
Copy link

melvin-bot bot commented Mar 5, 2024

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

@kadiealexander
Copy link
Contributor

Not overdue!

@melvin-bot melvin-bot bot removed the Overdue label Mar 6, 2024
@kadiealexander kadiealexander added External Added to denote the issue can be worked on by a contributor Overdue labels Mar 6, 2024
@melvin-bot melvin-bot bot changed the title Distance - Distance request briefly shows local currency instead of workspace currency after creating it [$500] Distance - Distance request briefly shows local currency instead of workspace currency after creating it Mar 6, 2024
Copy link

melvin-bot bot commented Mar 6, 2024

Job added to Upwork: https://www.upwork.com/jobs/~010a112a7314639b9b

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 6, 2024
Copy link

melvin-bot bot commented Mar 6, 2024

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

@melvin-bot melvin-bot bot added Overdue and removed Overdue labels Mar 6, 2024
@kadiealexander
Copy link
Contributor

@sobitneupane please review the proposal from @bernhardoj.

@melvin-bot melvin-bot bot removed the Overdue label Mar 11, 2024
@sobitneupane
Copy link
Contributor

Thanks for the proposal @bernhardoj.

We can go with your alternative proposal. Let's define a variable isEditing and we can use it in

isEditing={Boolean(backTo)}

The code was introduced by #34075 to solve #33608 issue.

🎀 👀 🎀 C+ reviewed

Copy link

melvin-bot bot commented Mar 12, 2024

Triggered auto assignment to @roryabraham, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

@roryabraham
Copy link
Contributor

roryabraham commented Mar 12, 2024

neither proposal is very clear to me tbh, but that's probably my shortcoming. Bear with me here...

@roryabraham
Copy link
Contributor

Ok, I think think is pretty confusing because there are so many places where data is being modified in useEffect callbacks. I also think checking for the presence of a backTo param to see if we're manually editing a field feels like a really convoluted approach that's very tightly coupled to our UI flows.

@roryabraham
Copy link
Contributor

roryabraham commented Mar 12, 2024

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

Can someone explain to me what would happen if we were to just remove these two effects completely?

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

@bernhardoj
Copy link
Contributor

@roryabraham

The first one is to revert the currency to the "draft" (original) currency.

Screen.Recording.2024-03-13.at.13.45.06.mov

If we remove it, then the currency will be updated even without pressing the Save button (on the edit page).

I believe the second one is to mimic the behavior of the previous version of the money request page. Currently, when we select a currency from the currency selection page, it will immediately be saved to the transaction draft.

If the user directly accesses the confirmation page (by changing the URL), the second useEffect will revert the currency to the "draft" (original) currency.

  1. Open the money request page
  2. Change the currency from A to B (originalCurrency is A, currency is B)
  3. Change the URL to the confirmation page
  4. The second useEffect will kick in and the currency shown will be currency A (originalCurrency)

Previously, the currency would only be saved when we pressed the Next button, so if the user directly accessed the page, the user would see the first currency.

  1. Open the money request page
  2. Change the currency from A to B (currency is A)
  3. Change the URL to the confirmation page
  4. The currency shown will be currency A (currency)

If we remove it, then we will see the updated currency on confirmation page.

Screen.Recording.2024-03-13.at.13.53.39.mov

@bernhardoj
Copy link
Contributor

PR is ready

cc: @sobitneupane

@melvin-bot melvin-bot bot added Monthly KSv2 and removed Weekly KSv2 labels Apr 16, 2024
Copy link

melvin-bot bot commented Apr 16, 2024

This issue has not been updated in over 15 days. @sobitneupane, @roryabraham, @bernhardoj, @kadiealexander eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

@roryabraham roryabraham added Weekly KSv2 Monthly KSv2 and removed Monthly KSv2 Reviewing Has a PR in review labels Apr 16, 2024
@roryabraham
Copy link
Contributor

PR was merged yesterday

Copy link

melvin-bot bot commented Apr 19, 2024

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

Copy link

melvin-bot bot commented Apr 20, 2024

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

@s77rt
Copy link
Contributor

s77rt commented Apr 20, 2024

This one is a false alert #37643 (comment) sorry for that

@melvin-bot melvin-bot bot added the Overdue label Apr 24, 2024
@roryabraham roryabraham added Awaiting Payment Auto-added when associated PR is deployed to production and removed Monthly KSv2 labels Apr 27, 2024
@roryabraham
Copy link
Contributor

@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

@melvin-bot melvin-bot bot removed the Overdue label Apr 27, 2024
@kadiealexander
Copy link
Contributor

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:

@kadiealexander
Copy link
Contributor

Payment Summary

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

@kadiealexander kadiealexander changed the title [$500] Distance - Distance request briefly shows local currency instead of workspace currency after creating it [Checklist and NewDot C+ payment][$500] Distance - Distance request briefly shows local currency instead of workspace currency after creating it Apr 30, 2024
@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels May 4, 2024
@sobitneupane
Copy link
Contributor

sobitneupane commented May 7, 2024

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)

@sobitneupane
Copy link
Contributor

Regression Test Proposal

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

  1. Open the workspace chat
  2. Create a new distance request
  3. Verify the distance request preview shows the workspace currency

Do we agree 👍 or 👎

@sobitneupane
Copy link
Contributor

Requested payment in newDot.

@kadiealexander
Copy link
Contributor

@JmillsExpensify
Copy link

$500 approved for @sobitneupane

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
No open projects
Archived in project
Development

No branches or pull requests

8 participants