[$250] Pay button in the report header is not animated.

[lanitochka17]

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.70-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5290609
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to a workspace you own, make sure payments are enabled in Workflows.
2. Submit two expenses
3. Click into the report preview
4. Click Pay in the report header

Expected Result:

The pay button should be animated, like here.

Actual Result:

The pay button is not animated, it just disappears.

Workaround:

N/A

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6683249_1733237611189.Screen_Recording_2024-12-03_at_15.47.03.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864311402219129216
• Upwork Job ID: 1864311402219129216
• Last Price Increase: 2024-12-11
• Automatic offers:
• abzokhattab | Contributor | 105372925

Issue Owner

Current Issue Owner: @ntdiary

[melvin-bot]

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

[trjExpensify]

@lanitochka17 specifically in the case of partial pay of the report when an expense is held?

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-12-03 16:51:17 UTC.

Proposal

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

The "Pay Elsewhere" button does not have an animation when used.

What is the root cause of that problem?

There are two requirements for this issue:

1. The payment effect is not animated when paying multiple threads at once.

2. A new feature needs to change the animation flow, making the "payment completed" text appear as a button instead of text.

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

To change the "Payment Complete" text to a button, we need to:

1. Add a loading bar between the "Pay" text and the "Payment Complete" text during the transition phase.

2. Transform the "Payment Complete" text into a button component:
   Animation Sequence: "Pay" → Loading Bar → "Payment Complete" → Hide Component.

Code changes for the AnimatedSettlementButton component:

View the changes .

---

To enable animation in the Money Request Header:

As done in the report preview, we need to:

1. Introduce isPaidAnimationRunning:

const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false);

2. Update the shouldShowPayButton logic:

const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere;

3. Add startAnimation and stopAnimation functions:

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

4. Call startAnimation inside the confirm payment function .

5. Update the settlement button here and here to use the animated button. Also, add the isPaidAnimationRunning and onAnimationFinish props.

6. Optionally, we can animate the checkmark for each paid preview. To achieve this, replace the View in MoneyRequestPreviewContent with Animated.View, and add animation styles.

---

POC

Screen.Recording.2024-12-07.at.00.18.52.mov

Screen.Recording.2024-12-07.at.00.54.36.mov

---

Here is a draft branch with the proposed changes:
Draft Branch .

---

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

---

What alternative solutions did you explore? (Optional)

[trjExpensify]

@lanitochka17 specifically in the case of partial pay of the report when an expense is held?

Confirmed this doesn't require putting an expense on hold. I've simplified the steps in the OP.

@Expensify/design do you know why we don't animate the button in the report header here? Jus' checking there isn't an intentional reason for that... 🤔

[shawnborton]

Hmm no idea, we should be animating it everywhere I would think?

[dannymcclain]

Yeah I think we agreed on implementing the animation everywhere but I don't think we've worked on adding the animation to the report header yet. Here's the thread in Slack for reference.

[trjExpensify]

Okay cool, so broadly then we should add the animation to the Pay button in the report header.

[melvin-bot]

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

[melvin-bot]

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

[abzokhattab]

hi @trjExpensify, is the POC shown in this proposal the expected behavior? or is there something i am missing?

[trjExpensify]

Hm, not sure about the "payment complete" magically showing up on each of the expense preview components when you click a button in the report header:

[dannymcclain]

Yeah I don't think that's the expected behavior. We essentially want the animation that shows on the report preview to be mimicked in the report header. I don't think anything needs to be animated on the expense previews.

[shawnborton]

Yup, definitely agree with that.

[abzokhattab]

• should we also mimic the payment complete ? meaning it will show in the header for a second then disappears?

[abzokhattab]

update the proposal and the POC to enable pay button animation insde the report header as well

[trjExpensify]

Thanks! Something looks weird about that to me, I think it's because we lose the button border.

[abzokhattab]

Thanks @trjExpensify for the prompt feedback... I dont exactly get your concern can you please illustrate more?

[trjExpensify]

Yeah, this just looks a bit strange to me when the button disappears. I'll defer to the design team on it though.

[abzokhattab]

I think we should maybe make it smaller and change the color to textSupporting color ... lets see what the design team think

[dannymcclain]

I agree with Tom, I think that does look weird. I think losing the container like that is part of it... Would it be crazy to do something like this where we animate from the pay text to the payment completed text (loader in between if we need it) and then after the payment complete just animate the whole button out?

Is that going to get tricky with button widths? 🤔 Going to wait and see what the other designers have to say.

[shawnborton]

Nice, that does look good. I suppose it would be interesting to see a revised exist animation that just does some kind of scaleOut, where we animate from a scale of 1 to a scale of 0? That might give us a similar effect as shrinking the height, and it might feel more natural in the header.

That being said, I think it makes sense to keep the animation the same everywhere and not try to have a custom version just for the header. So perhaps we can try it everywhere and see how it goes?

[dannymcclain]

Totally agree Shawn

[dubielzyk-expensify]

Agree with that Shawn. I'd be keen to try it. Sometimes the 1 to 0 scale can be a bit too much, but we should try it.

Alternatively we can do scale 1->0.5 and just do opacity 1->0. But lets start with the scale first.

[abzokhattab]

That being said, I think it makes sense to keep the animation the same everywhere and not try to have a custom version just for the header. So perhaps we can try it everywhere and see how it goes?

okay looking into this today

[abzokhattab]

I created a hook for animation configurations here fd94665 please have alook .. also added some tests for the hook. i think some minor modifications needs to be done in the PR. please have a look and let me know @ntdiary it the general approach looks good to you

[melvin-bot]

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

[trjExpensify]

@ntdiary what do you think?

[ntdiary]

@trjExpensify, I’d like to give @abzokhattab’s proposal a green light. This is the behavior I got from @abzokhattab's animate-payment-icon-in-money-request-preview branch, If it still needs improvements, I suggest discussing them in the PR, their proposal is generally acceptable because it aligns with how we use it in ReportPreview

demo.mp4

just a rough idea about the implementation: since it looks like animations will be used in multiple places, is it possible to extract the animation configuration-related code?

BTW, my previous comment might have caused some confusion for @abzokhattab. I didn’t actually mean to extract code like useButtonAnimation; I was just thinking that if AnimatedSettlementButton will be used in multiple places, maybe we could reduce the boilerplate code like startAnimation/startAnimation.
That was just an initial thought, and if after discussion, we feel it’s unnecessary, that’s fine. As for testing, the same logic applies. If it’s just the animation effect, perhaps there’s no need for testing. However, if it involves user interactions, such as ensuring the settle button can’t be clicked in offline mode and the animation doesn’t trigger, then maybe we can add a test case for that. But again, this is also open for discussion.

Finally, let’s see if internal engineer has some different thoughts. :)

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[abzokhattab]

thanks for the thorough review @ntdiary ... your comment makes sense to me ... lets discuss the raised points in the PR however for the video, seems like i reverted the last requested animation by mistake .. that's why you still see the "payment complete" as text.
The correct POC is attached in the Proposal . will update that in the PR

[trjExpensify]

If it still needs improvements, I suggest discussing them in the PR

Yep, I think this is the style we landed on.

[melvin-bot]

@ntdiary @trjExpensify @lakchote this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[lakchote]

@ntdiary I agree with you, we should be DRY and prevent code duplication with the animations boilerplate code if it's going to be reused.

I'm also in favour of creating a test case for it.

@abzokhattab when you raise the PR please assign @Expensify/design team for their final approval.

[melvin-bot]

📣 @abzokhattab 🎉 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 📖

[ntdiary]

Hi, @abzokhattab, do you have an ETA for raising the PR? :D

[trjExpensify]

PR has been reviewed. @abzokhattab can you address the comments, please? Thanks!

[abzokhattab]

ok thanks working on them

[melvin-bot]

This issue has not been updated in over 15 days. @ntdiary, @trjExpensify, @lakchote, @abzokhattab 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!