[HOLD for payment 2024-10-16] [$250] Expense - No "Payment completed" animation when paying a held expense

[IuliiaHerets]

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: 9.0.35-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #48615
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit an expense.
4. Click Pay elsewhere button in the expense preview on the main chat.
5. Note that it shows "Payment completed" animation.
6. Submit another expense.
7. Go to transaction thread > Click report header > Hold.
8. Hold the expense.
9. Return to the main chat.
10. Click Pay elsewhere button in the expense preview on the main chat.
11. Click Pay all.

Expected Result:

There will be a "Payment completed" animation.

Actual Result:

There is no "Payment completed" animation when paying a held expense.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6603121_1726283620870.20240914_111027.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021835789304601494355
• Upwork Job ID: 1835789304601494355
• Last Price Increase: 2024-09-16
• Automatic offers:
• shubham1206agra | Reviewer | 104079418
• etCoderDysto | Contributor | 104079419

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot]

Triggered auto assignment to @puneetlath (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.

[IuliiaHerets]

@puneetlath 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

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-09-16 21:45:11 UTC.

Proposal

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

No "Payment completed" animation when paying a held expense

What is the root cause of that problem?

When user pays from confirmation modal (ProcessMoneyReportHoldMenu), we are not running animation by calling setIsPaidAnimationRunning(true) before we trigger IOU.payMoneyRequest

App/src/components/ProcessMoneyReportHoldMenu.tsx

Lines 68 to 69 in 0c618ac

	} else if (chatReport && paymentType) {
	IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport, full);

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

We should pass setIsPaidAnimationRunning(true) as call back function to ProcessMoneyReportHoldMenu, and call it above IOU.payMoneyRequest
Note: We can wrap setIsPaidAnimationRunning(true) and HapticFeedback.longPress() in a function (startAnimation), and call startAnimation in ProcessMoneyReportHoldMenu. And we should only call setIsPaidAnimationRunning(true) conditionally when it is present. To memorize the function (startAnimation) we can use useCallback

• Create startAnimation in ReportPreview

const startAnimation = useCallback(() => {
setIsPaidAnimationRunning(true);
HapticFeedback.longPress()
}, []);

• Then Pass it to ProcessMoneyReportHoldMenu as a prop
  

  App/src/components/ReportActionItem/ReportPreview.tsx

  Line 544 in 6eb9396

  <ProcessMoneyReportHoldMenu

• Then call it here

if (startAnimation) {
startAnimation ()
}

Result

Screen.Recording.2024-09-17.at.12.43.14.at.night.mp4

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[raza-ak]

Proposal

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

Expense - No "Payment completed" animation when paying a held expense

What is the root cause of that problem?

The root cause of this issue is that the boolean value for setIsPaidAnimationRunning is not being set when the expense is on hold. Instead, the application only opens the confirmation modal when the report status is on hold, without updating the animation state.

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

To resolve the problem, implement the following changes:

1. Update isPaidAnimationRunning State:
   • After clicking the submit button in the confirmation modal for a held expense, ensure that the isPaidAnimationRunning state is set to true.
2. Pass and Update State Function:
   • Pass the setIsPaidAnimationRunning function to the ProcessMoneyReportHoldMenu component.
   • Update the isPaidAnimationRunning value after the expense is submitted through the confirmation modal.

By implementing the following changes, the "Payment completed" animation should be displayed correctly when paying a held expense.

Video:

368533552-cc878c7a-8d18-40db-914d-27b744871d42.mp4

[melvin-bot]

@puneetlath, @shubham1206agra Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[puneetlath]

@shubham1206agra thoughts on the proposal?

[shubham1206agra]

@etCoderDysto's proposal looks good.

🎀👀🎀 C+ reviewed

Engineer - Can you confirm if we need haptic feedback here?

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[puneetlath]

Is there haptic feedback when you pay it the normal way? Not through the "hold" dialog? I think we should just have it behave the same way.

[melvin-bot]

📣 @shubham1206agra 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @etCoderDysto 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[etCoderDysto]

Is there haptic feedback when you pay it the normal way? Not through the "hold" dialog? I think we should just have it behave the same way.

I think we should use heptic feedback since we are using it for ReportPreview

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 207 to 208 in ffeda71

	setIsPaidAnimationRunning(true);
	HapticFeedback.longPress();

[etCoderDysto]

PR will be ready soon

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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:

• fix: Display pay animation when paying from hold modal #49615

If no regressions arise, payment will be issued on 2024-10-16. 🎊

For reference, here are some details about the assignees on this issue:

• @shubham1206agra requires payment automatic offer (Reviewer)
• @etCoderDysto requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@shubham1206agra] The PR that introduced the bug has been identified. Link to the PR:
• [@shubham1206agra] 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:
• [@shubham1206agra] 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:
• [@shubham1206agra] Determine if we should create a regression test for this bug.
• [@shubham1206agra] 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.
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@puneetlath, @shubham1206agra, @etCoderDysto Eep! 4 days overdue now. Issues have feelings too...

[puneetlath]

@etCoderDysto has been paid.

@shubham1206agra bump on the checklist. And on accepting the Upwork offer.

[shubham1206agra]

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:

• [@shubham1206agra] The PR that introduced the bug has been identified. Link to the PR: Animate settlement button when pay and trigger a haptic feedback #48615
• [@shubham1206agra] 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: https://github.com/Expensify/App/pull/48615/files#r1810154932
• [@shubham1206agra] 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: Not Required
• [@shubham1206agra] Determine if we should create a regression test for this bug. Yes
• [@shubham1206agra] 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.

1. Go to App.
2. Go to workspace chat.
3. Submit an expense.
4. Go to transaction thread > Click report header > Hold.
5. Hold the expense.
6. Return to the main chat.
7. Click Pay elsewhere button in the expense preview on the main chat.
8. Click Pay all, and observe that the Payment completed" animation occurs.

• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@puneetlath, @shubham1206agra, @etCoderDysto Whoops! This issue is 2 days overdue. Let's get this updated quick!

[puneetlath]

Regression test issue here: https://github.com/Expensify/Expensify/issues/439229

All paid. Thanks everyone!

[melvin-bot]

@puneetlath Be sure to fill out the Contact List!