Emphasize completed payments with animation

[roryabraham]

slack discussion: https://expensify.slack.com/archives/CC7NECV4L/p1724447142877389

Strategy

Expensify is a financial collaboration app, and in any financial conversation, money moving hands from one person to another tends to be the most critical part. That critical moment needs to be clear, unambiguous, and confidence-inspiring.

Problem

When you receive a money request in NewDot, you’ll see a big green Pay button, and one tap instantly pays the request and changes and a checkmark appears saying that it’s paid. It’s such a crucial moment, but it’s unclear whether the payment was sent or not. As a user, I always find I have to double-take and make sure that the request was actually paid.

Solution

Update the payment flow slightly to draw more attention to it and celebrate the transfer of funds. To do this, update NewDot such that when you tap the Pay button:

1. the button animates into a Payment Complete text, which collapses a few moments later
2. (iOS/Android) we trigger some strong haptic feedback to give a tactile confirmation of the completion of the payment.
3. Once the Payment Complete text finishes collapsing:
   1. a checkmark appears (as today)
   2. Play the assets/sounds/success.mp3 sound, instead of assets/sounds/done.mp3 like we do today

Example:

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @Christinadobrzyn (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot[bot]]

:warning: It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time :warning:

[melvin-bot[bot]]

Current assignee @dubielzyk-expensify is eligible for the NewFeature assigner, not assigning anyone new.

[roryabraham]

@dubielzyk-expensify has volunteered to help finalize the design here.

[othmanekahtal]

Proposal

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

Emphasize completed payments with animation

• update text after payment is completed
• update the sound

What is the root cause of that problem?

Improvement

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

• change the params that passed to the function playSound in the button component from SOUNDS.DONE to SOUNDS. SUCCESS
• add the "Payment Complete" to the i18n
• update the text by updating the buttonOptions.push({ text: translate('iou.PaymentComplete') });

What alternative solutions did you explore? (Optional)

[melvin-bot[bot]]

📣 @othmanekahtal! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot[bot]]

📣 @AMSNX! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[othmanekahtal]

Contributor details Your Expensify account email: othmanekahtal@gmail.com

Upwork Profile Link: https://www.upwork.com/freelancers/~01a4cd3d656dcf35f6

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[ZhenjaHorbach]

@othmanekahtal Thanks for your proposal ! But could you update your proposal and provide some links to the code where you plan to make changes, please?

[othmanekahtal]

@ZhenjaHorbach Hi Yauheni thanks for noticing, i forked the repo and i made the changes take a look at this link : https://github.com/Expensify/App/commit/d2c943a9ba2745e1aea262cfac926ad0fb82e48a

[ZhenjaHorbach]

@othmanekahtal Thanks for your updates But I'm not sure that it is a good idea to modify the memoized paymentButtonOptions array like this

https://github.com/Expensify/App/commit/d2c943a9ba2745e1aea262cfac926ad0fb82e48a#diff-475fc90a9838cf6b734f4c860eb57036c3fe04ac7b4c429d1b4e361109aaa6f4R298-R300

Plus If I understand correctly We are waiting for confirmation of designs from @dubielzyk-expensify

[roryabraham]

I think @dubielzyk-expensify and I have an understanding on the animation. What we want will be very similar to this:

[dubielzyk-expensify]

Exactly. Let's try to replicate exactly what's above 👍

[melvin-bot[bot]]

@roryabraham, @Christinadobrzyn, @ZhenjaHorbach, @dubielzyk-expensify Eep! 4 days overdue now. Issues have feelings too...

[ZhenjaHorbach]

Not overdue

[bernhardoj]

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

Proposal

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

Add animation and press feedback when paying report.

What is the root cause of that problem?

Feature request.

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

1. Create a new component called AnimatedSettlementButton which handles the animation. The new component will contain the pay button and the payment complete text. There are 2 animations, scaling and fading. The animation will start if shouldStartPaidAnimation prop is true.

code

``` function AnimatedSettlementButton({ shouldStartPaidAnimation = false, onAnimationFinish = () => {}, ...settlementButtonProps }: AnimatedSettlementButtonProps) { const styles = useThemeStyles(); const buttonScale = useSharedValue(1); const buttonOpacity = useSharedValue(1); const paymentCompleteTextScale = useSharedValue(0); const paymentCompleteTextOpacity = useSharedValue(1); const height = useSharedValue(variables.componentSizeNormal); const buttonStyles = useAnimatedStyle(() => ({ transform: [{scale: buttonScale.value}], opacity: buttonOpacity.value, })); const paymentCompleteTextStyles = useAnimatedStyle(() => ({ transform: [{scale: paymentCompleteTextScale.value}], opacity: paymentCompleteTextOpacity.value, position: 'absolute', alignSelf: 'center', })); const containerStyles = useAnimatedStyle(() => ({ height: height.value, justifyContent: 'center', overflow: 'hidden', })); useEffect(() => { if (!shouldStartPaidAnimation) { return; } buttonScale.value = withTiming(0, {duration: 200}); buttonOpacity.value = withTiming(0, {duration: 200}); paymentCompleteTextScale.value = withTiming(1, {duration: 200}); // Wait for the above animation + 1s delay before hiding the component height.value = withDelay(1200, withTiming(0, {duration: 200}, () => runOnJS(onAnimationFinish)())); paymentCompleteTextOpacity.value = withDelay(1200, withTiming(0, {duration: 200})); }, [shouldStartPaidAnimation]); return ( Payment complete ) } ```

2. Set shouldStartPaidAnimation prop to true once we press the pay button and trigger the haptic feedback.

   const [shouldStartPaidAnimation, setShouldStartPaidAnimation] = useState(false);

   https://github.com/Expensify/App/blob/4fe86eb6baf6d71aa8757b2362a788d20ee42109/src/components/ReportActionItem/ReportPreview.tsx#L202-L207

   setShouldStartPaidAnimation(true);
   HapticFeedback.longPress(); // longPress feedback will trigger a strong feedback

3. Replace SettlementButton with AnimatedSettlementButton and pass the shouldStartPaidAnimation prop. https://github.com/Expensify/App/blob/4fe86eb6baf6d71aa8757b2362a788d20ee42109/src/components/ReportActionItem/ReportPreview.tsx#L467-L469

4. To keep the button rendered while animating, we need to update shouldShowSettlementButton to include shouldStartPaidAnimation. https://github.com/Expensify/App/blob/4fe86eb6baf6d71aa8757b2362a788d20ee42109/src/components/ReportActionItem/ReportPreview.tsx#L306

   const shouldShowSettlementButton = shouldStartPaidAnimation || ((shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage);

5. Hide the button after the animation finishes by passing onAnimationFinish prop to the component.

   onAnimationFinish={() => setShouldStartPaidAnimation(false)}

https://github.com/user-attachments/assets/863d8aaf-1dfd-4c0a-97fc-98cb40305bb8

[ZhenjaHorbach]

@bernhardoj Thanks for your detailed proposal ! I like it ! The only thing I think we can make the new component even more flexible and universal But we can discuss this in PR

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Christinadobrzyn]

Heads up - I'm going to be ooo 9/4-9/10. I think this will be fine without any BZ work while I'm away, but I'm assigning a buddy just in case.

@isabelastisser we are reviewing the propsoal at this time.

@roryabraham, can you check out the proposal review when you have a moment? TY!

[roryabraham]

Yeah, that sounds like a strange implementation to me. We're creating a settlement button then having a boolean prop to determine whether the animation should start or not?

Seems like we should be able to encapsulate the logic to trigger the animation within the component itself, no?

[bernhardoj]

I decided to create a wrapper around the SettlementButton so the animation logic is decoupled from the SettlementButton.

1. It's cleaner
2. Easier to maintain and scale the animation logic

[roryabraham]

not sure I agree that it's cleaner to control the animation in ReportPreview when it seems like it could be controlled internally by the AnimatedSettlementButton. But I guess we can hash it out in the PR

[bernhardoj]

PR is ready cc: @ZhenjaHorbach

[muttmuure]

MEDIUM priorities are debugging tools - moving this to LOW

[Christinadobrzyn]

Just a heads up that I'm back - thanks for watching @isabelastisser