fix height when approve button changes to pay.

Signed-off-by: krishna2323 <[email protected]>
Expensify · Nov 6, 2024 · 88cd775 · 88cd775
1 parent e53eab4
commit 88cd775
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
@@ -203,11 +203,9 @@ function ReportPreview({
 
     const stopAnimation = useCallback(() => {
         setIsPaidAnimationRunning(false);
-    }, []);
-
-    const stopApprovedAnimation = useCallback(() => {
         setIsApprovedAnimationRunning(false);
     }, []);
+
     const startAnimation = useCallback(() => {
         setIsPaidAnimationRunning(true);
         HapticFeedback.longPress();
@@ -346,14 +344,15 @@ function ReportPreview({
 
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
     const getCanIOUBePaid = useCallback(
-        (onlyShowPayElsewhere = false) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere),
+        (onlyShowPayElsewhere = false, shouldCheckApprovedState = true) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere, shouldCheckApprovedState),
         [iouReport, chatReport, policy, allTransactions],
     );
 
     const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]);
+    const canIOUBePaidAndApproved = useMemo(() => getCanIOUBePaid(false, false), [getCanIOUBePaid]);
     const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]);
     const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere;
-    const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]);
+    const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]) || isApprovedAnimationRunning;
 
     const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport);
 
@@ -570,7 +569,7 @@ function ReportPreview({
                                         onlyShowPayElsewhere={onlyShowPayElsewhere}
                                         isPaidAnimationRunning={isPaidAnimationRunning}
                                         isApprovedAnimationRunning={isApprovedAnimationRunning}
-                                        onApprovedAnimationFinish={stopApprovedAnimation}
+                                        canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
                                         onAnimationFinish={stopAnimation}
                                         formattedAmount={getSettlementAmount() ?? ''}
                                         currency={iouReport?.currency}

diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx
@@ -12,15 +12,15 @@ type AnimatedSettlementButtonProps = SettlementButtonProps & {
     isPaidAnimationRunning: boolean;
     onAnimationFinish: () => void;
     isApprovedAnimationRunning: boolean;
-    onApprovedAnimationFinish: () => void;
+    canIOUBePaid: boolean;
 };
 
 function AnimatedSettlementButton({
     isPaidAnimationRunning,
     onAnimationFinish,
     isApprovedAnimationRunning,
-    onApprovedAnimationFinish,
     isDisabled,
+    canIOUBePaid,
     ...settlementButtonProps
 }: AnimatedSettlementButtonProps) {
     const styles = useThemeStyles();
@@ -77,19 +77,15 @@ function AnimatedSettlementButton({
 
         // Wait for the above animation + 1s delay before hiding the component
         const totalDelay = CONST.ANIMATION_PAID_DURATION + CONST.ANIMATION_PAID_BUTTON_HIDE_DELAY;
+        const willShowPaymentButton = canIOUBePaid && isApprovedAnimationRunning;
         height.value = withDelay(
             totalDelay,
-            withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}, () =>
-                runOnJS(() => {
-                    if (isApprovedAnimationRunning) {
-                        onApprovedAnimationFinish();
-                    } else {
-                        onAnimationFinish();
-                    }
-                })(),
-            ),
+            withTiming(willShowPaymentButton ? variables.componentSizeNormal : 0, {duration: CONST.ANIMATION_PAID_DURATION}, () => runOnJS(onAnimationFinish)()),
+        );
+        buttonMarginTop.value = withDelay(
+            totalDelay,
+            withTiming(willShowPaymentButton ? styles.expenseAndReportPreviewTextButtonContainer.gap : 0, {duration: CONST.ANIMATION_PAID_DURATION}),
         );
-        buttonMarginTop.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}));
         paymentCompleteTextOpacity.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}));
     }, [
         isPaidAnimationRunning,
@@ -102,7 +98,8 @@ function AnimatedSettlementButton({
         paymentCompleteTextScale,
         buttonMarginTop,
         resetAnimation,
-        onApprovedAnimationFinish,
+        canIOUBePaid,
+        styles.expenseAndReportPreviewTextButtonContainer.gap,
     ]);
 
     return (

diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts
@@ -7060,6 +7060,7 @@ function canIOUBePaid(
     policy: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Policy>,
     transactions?: OnyxTypes.Transaction[],
     onlyShowPayElsewhere = false,
+    shouldCheckApprovedState = true,
 ) {
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport);
     const reportNameValuePairs = ReportUtils.getReportNameValuePairs(chatReport?.reportID);
@@ -7113,7 +7114,7 @@ function canIOUBePaid(
         reimbursableSpend !== 0 &&
         !isChatReportArchived &&
         !isAutoReimbursable &&
-        !shouldBeApproved &&
+        (!shouldBeApproved || !shouldCheckApprovedState) &&
         !isPayAtEndExpenseReport
     );
 }