Repository navigation
[HOLD for payment 2024-10-16] [$250] Expensify Card - On report fraud page, error does not redirect and can not be closed #49010
Description
Activity
- addedDailyKSv2KSv2BugSomething is broken. Auto assigns a BugZero manager.Something is broken. Auto assigns a BugZero manager.
on Sep 11, 2024 Triggered auto assignment to @garrettmknight (
Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.@garrettmknight 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
Proposal
Please re-state the problem that we are trying to solve in this issue.
- Card fraud report page does not redirect back upon clicking
Deactivate Cardand error message could not be dismissed.
What is the root cause of that problem?
- We haven't set navigation flow on clicking
Deactivate Cardbutton. - Error message is hard coded to not allow user to dismiss.
What changes do you think we should make in order to solve the problem?
- For redirecting based on whether we want to redirect to wallet or card page add....
// redirect to wallet page Navigation.navigate(ROUTES.SETTINGS_WALLET.getRoute());
or
// redirect to card page Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID));
here
onSubmit={() => Card.reportVirtualExpensifyCardFraud(virtualCard.cardID)} - And for dismissing error revert
canDismissErrortotruehere
canDismissError: false,
What alternative solutions did you explore? (Optional)
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.
- Card fraud report page does not redirect back upon clicking
Proposal
Please re-state the problem that we are trying to solve in this issue.
- No redirect occurs after hitting the button, the button can be hit several times.
- Only after exiting the page and going back will the user notice an error message. This error message can not be deleted by tapping the "X" button.
What is the root cause of that problem?
Issue 1: No redirect occurs after hitting the button, the button can be hit several times.
-
In ReportVirtualCardFraudPage we use
cardList?.[cardID].errorsto check whether the form encountered any error or not. -
In case of the bug, after clicking on the "Deactivate card" button, there is an error returned by BE, leads to the condition:
if (!isEmptyObject(virtualCard?.errors)) {
istrue, hence the redirect logic:
Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID));
is not called. -
However, no error message was displayed on that page. It is because, in the logic to get the error, we use:
const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard?.errors ?? {});
which will always be'', it should beconst virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard),
that leads to there is no error message displayed in:
message={virtualCardError}
issue 2: Only after exiting the page and going back will the user notice an error message. This error message can not be deleted by tapping the "X" button.
- When tapping on "Close" button, the error is not dismissed because of in the logic to clear the error:
App/src/pages/settings/Wallet/PaymentMethodList.tsx
Lines 130 to 151 in ecb629d
function dismissError(item: PaymentMethod) { const isBankAccount = item.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT; const paymentList = isBankAccount ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.FUND_LIST; const paymentID = isBankAccount ? item.accountData?.bankAccountID ?? '' : item.accountData?.fundID ?? ''; if (!paymentID) { Log.info('Unable to clear payment method error: ', undefined, item); return; } if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) { PaymentMethods.clearDeletePaymentMethodError(paymentList, paymentID); if (!isBankAccount) { PaymentMethods.clearDeletePaymentMethodError(ONYXKEYS.FUND_LIST, paymentID); } } else { PaymentMethods.clearAddPaymentMethodError(paymentList, paymentID); if (!isBankAccount) { PaymentMethods.clearAddPaymentMethodError(ONYXKEYS.FUND_LIST, paymentID); } } }
we don't have a logic to handle the virtual card.
What changes do you think we should make in order to solve the problem?
Issue 1: No redirect occurs after hitting the button, the button can be hit several times.
- As mentioned above, we just need to update:
const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard?.errors ?? {});
to:
const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard)
Issue 2: Only after exiting the page and going back will the user notice an error message. This error message can not be deleted by tapping the "X" button.
- Option 1:
-
We can hide the "Close" button beside the error like we did in here:
canDismissError: false, -
So we just need to update:
canDismissError: true,
to:
canDismissError: false,
- Option 2:
- We can add an additional logic to handle virtual card cases in
dismissErrorfunction:
function dismissError(item: PaymentMethod) { if (item.cardID) { Onyx.merge(`cardList`, { [item.cardID]: { errors: null, }, }); return; }
What alternative solutions did you explore? (Optional)
- addedExternalAdded to denote the issue can be worked on by a contributorAdded to denote the issue can be worked on by a contributor
on Sep 13, 2024 Job added to Upwork: https://www.upwork.com/jobs/~021834534968013390587
- changed the title
[-]Expensify Card - On report fraud page, error does not redirect and can not be closed[/-][+][$250] Expensify Card - On report fraud page, error does not redirect and can not be closed[/+]on Sep 13, 2024 - addedHelp WantedApply this label when an issue is open to proposals by contributorsApply this label when an issue is open to proposals by contributors
on Sep 13, 2024 Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (
External)Proposal
Please re-state the problem that we are trying to solve in this issue.
No redirect occurs after hitting the button, the button can be hit several times.
Only after exiting the page and going back will the user notice an error message. This error message can not be deleted by tapping the "X" button.
Solution:
we can redirect it to the specific user's card itself such that
Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID));github-actions commented
on Sep 13, 2024 on Sep 13, 2024 – with GitHub ActionsContributorMore actions@user Your proposal will be dismissed because you did not follow the proposal template.
19 remaining items
Reviewinglabel has been removed, please complete the "BugZero Checklist".The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.46-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:
If no regressions arise, payment will be issued on 2024-10-16. 🎊
For reference, here are some details about the assignees on this issue:
- @jayeshmangwani requires payment through NewDot Manual Requests
- @dominictb requires payment automatic offer (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:
- [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR:
- [@jayeshmangwani] 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:
- [@jayeshmangwani] 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:
- [@jayeshmangwani] Determine if we should create a regression test for this bug.
- [@jayeshmangwani] 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.
- [@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:
- [@jayeshmangwani] The PR that introduced the bug has been identified. Link to the PR:
- First root cause for why the error doesn't display was caused by this PR, which I have commented on here [TS migration] Migrate
SettingsWalletpage to TypeScript #34716 (comment). - Second root cause is that we missed the case of clearing the error on dismiss when we initially added the OfflineWithFeedback component to the PaymentMethodList page.
-
[@jayeshmangwani] 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:
[TS migration] MigrateSettingsWalletpage to TypeScript #34716 (comment) -
[@jayeshmangwani] 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: N/A
-
[@jayeshmangwani] Determine if we should create a regression test for this bug.
No, This is a general flow for when errors should be displayed and dismissed. I don't think we need a dedicated regression test for this. -
[@jayeshmangwani] 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.
Reacted by Daniel Gale-Rosen@cead22, @garrettmknight, @dangrous, @jayeshmangwani, @dominictb Eep! 4 days overdue now. Issues have feelings too...
Not overdue. Just undergoing payment process
Payment Summary:
- Contributor: @dominictb $250 paid via Upwork
- Contributor+: @jayeshmangwani $250
@jayeshmangwani request when you're ready!
Reacted by Jayesh MangwaniConfirming that the payment summary here is correct.
$250 approved for @jayeshmangwani
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: v9.0.32-3
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Action Performed:
PreCond: User has Expensify Card set up and assigned
Expected Result:
User expects that after the loading spinner on the button, a redirect occurs
Actual Result:
No redirect occurs after hitting the button, the button can be hit several times. Only after exiting the page and going back will the user notice an error message. This error message can not be deleted by tapping the "X" button.
Workaround:
Unknown
Platforms:
Screenshots/Videos
Bug6600158_1726074112762.Error_message_can_not_be_dismissed_.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @garrettmknight