[$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 [email protected] 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
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/ce93f452-a531-4ca3-b562-2367e013b166

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-04

Issue Owner

Current Issue Owner: @ntdiary

[melvin-bot[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

https://github.com/user-attachments/assets/bc8cd15d-8180-4b82-ace3-1483592ff7cb

https://github.com/user-attachments/assets/5f3f492f-581f-401c-aed7-9aa3002b74a6

---

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[bot]]

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

[melvin-bot[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.

[dubielzyk-expensify]

I like changing it to what you're suggesting Danny, but I think we should do this for the preview as well?

[dannymcclain]

I like changing it to what you're suggesting Danny, but I think we should do this for the preview as well?

Oh I'm not against that. That would make them ultra-consistent which could be nice. Let's see what @shawnborton has to say!

[shawnborton]

Yup, I also like that suggestion - let's do it!

[abzokhattab]

Good, i updated the proposal to cover the new requirements please have a look the at the updated POCs

[trjExpensify]

Let us know what you think, @ntdiary!

[ntdiary]

@trjExpensify, I’m reviewing the proposal, and @abzokhattab’s video has demonstrated their latest result. I think it should meet the expected behavior, though there seems to be a slight delay between the completion state and start of the disappearance.

Regarding the specific implementation of the proposal, I’m thinking if there could be a more general approach, additionally, it would be great to include the test part, as this part is now important for the proposal. :)

[abzokhattab]

additionally, it would be great to include the test part, as this part is now important for the proposal

what type of tests should we add for this ? i see that we dont have any tests for the settlement button nor the report header or the report preview. so what scenarios should be considered in the context of this issue?

[ntdiary]

what type of tests should we add for this ? i see that we dont have any tests for the settlement button nor the report header or the report preview. so what scenarios should be considered in the context of this issue?

Hi, @abzokhattab, you can refer to this conv for details about the tests. Admittedly, we haven’t added many tests in the past, but we plan to gradually improve them moving forward, this conv also refer a test README to support this initiative. Of course, if after discussion it turns out that tests are not suitable in this case, I think that would be acceptable. However, we should at least start by trying to push it forward. :) BTW, 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?

[ntdiary]

what type of tests should we add for this ? i see that we dont have any tests for the settlement button nor the report header or the report preview. so what scenarios should be considered in the context of this issue?

Hi, @abzokhattab, you can refer to this conv for details about the tests. Admittedly, we haven’t added many tests in the past, but we plan to gradually improve them moving forward, this conv also refer a test README to support this initiative. Of course, if after discussion it turns out that tests are not suitable in this case, I think that would be acceptable. However, we should at least start by trying to push it forward. :) BTW, 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?

@abzokhattab, if you have some new thoughts about the above comment, please feel free to let me know. :)

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸