[$250] Animate the Submit button, for consistency with animations for Approve and Pay

[JmillsExpensify]

Problem

We have an confusing inconsistency, in that if you Submit a report, there is no feedback and the report action button disappears on submission. Meanwhile we have animations (and feedback) for the Approve and Pay report action buttons.

Solution

Simple! Let's animate the Submit button for consistency with other report actions. More specifically, we will:

• Animate the Submit button in the report preview
• Animate the Submit button in the report header
• Animate the Submit button in the search/reports page row

Again, the button animation will be consistent and apply anywhere we show the Submit button. Said animation works like in this practice.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021877717460312182126
• Upwork Job ID: 1877717460312182126
• Last Price Increase: 2025-01-10
• Automatic offers:
• shubham1206agra | Reviewer | 105644638
• allgandalf | Contributor | 105644639

Issue Owner

Current Issue Owner: @shubham1206agra

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[shubham1206agra]

Edited by proposal-police: This proposal was edited at 2025-01-10 12:45:58 UTC.

Proposal

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

Animate the Submit button

What is the root cause of that problem?

Feature Request

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

Note

I am not wall-posting the entire code since it is trivial enough to be figured out.

Animate button similar to AnimatedSettlementButton here

App/src/components/ReportActionItem/ReportPreview.tsx

Line 618 in 219e66d

<Button

Add a new state called isSubmitAnimationRunning that tracks if the animation is running or not.

Add new function

const startApprovedAnimation = useCallback(() => {
        setIsSubmitAnimationRunning(true);
        HapticFeedback.longPress(); // <- Not sure about this
    }, []);

And modify the stopAnimation function to

const stopAnimation = useCallback(() => {
        setIsPaidAnimationRunning(false);
        setIsApprovedAnimationRunning(false);
        setIsSubmitAnimationRunning(false);
    }, []);

And modify these conditions

App/src/components/ReportActionItem/ReportPreview.tsx

Line 365 in 219e66d

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

to

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

and

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 203 to 208 in 219e66d

	const shouldShowSubmitButton =
	isOpenExpenseReport &&
	reimbursableSpend !== 0 &&
	!showRTERViolationMessage &&
	!shouldShowBrokenConnectionViolation &&
	(iouReport?.ownerAccountID === currentUserAccountID || isAdmin || iouReport?.managerID === currentUserAccountID);

to

const shouldShowSubmitButton =
        (isOpenExpenseReport &&
        reimbursableSpend !== 0 &&
        !showRTERViolationMessage &&
        !shouldShowBrokenConnectionViolation &&
        (iouReport?.ownerAccountID === currentUserAccountID || isAdmin || iouReport?.managerID === currentUserAccountID)) || isSubmitAnimationRunning;

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[etCoderDysto]

Proposal

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

What is the root cause of that problem?

New feature

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

1. Create a state to store isSubmitAnimationRunning and a setter function as below

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

2. Create similar useEffect as below to display the submitted icon on button animation
   

   App/src/components/ReportActionItem/ReportPreview.tsx

   Lines 462 to 468 in 3322a30

   	useEffect(() => {
   	if (!iouSettled) {
   	return;
   	}
   	checkMarkScale.set(isPaidAnimationRunning ? withDelay(CONST.ANIMATION_PAID_CHECKMARK_DELAY, withSpring(1, {duration: CONST.ANIMATION_PAID_DURATION})) : 1);
   	}, [isPaidAnimationRunning, iouSettled, checkMarkScale]);

3. pass the isSubmitAnimation prop and use it for the same purpose as isPaidAnimationRunning is used
   Expample: displaying sumbitted text on the button

{isPaidAnimationRunning && (
               <Animated.View style={paymentCompleteTextStyles}>
                   <Text style={[styles.buttonMediumText]}>{translate('iou.submitted')}</Text>
               </Animated.View>
           )}

Note: we can work on every details on pr phase as the functionality exists for pay animation and approve animation.

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

What alternative solutions did you explore? (Optional)

[shubham1206agra]

Ok, lol, I will ask someone from C+ to implement this since I wrote the majority of the logic.

[dominictb]

I can help to be C+ here (or as implementer) @shubham1206agra

cc @JmillsExpensify

[dannymcclain]

One other detail to note is that we want this animation to match the animations we're already working on implementing for Approved and Paid:

• [$250] Pay button in the report header is not animated.  #53474
• Animate payment icon in money request preview #54490

[shubham1206agra]

@JmillsExpensify Since this issue requires good command over the codebase and someone with experience, I have decided to let someone from C+, named @allgandalf, handle the implementation here.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[shubham1206agra]

@luacmartins Please assign @allgandalf here as Contributor.

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

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