[Due for payment 2025-03-11] [$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: @trjExpensify

[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