Merge pull request #52901 from Expensify/revert-50387-krishna2323/issue/49847

[CP Staging] Revert "Feat: Implement to use a 👍icon next to approved report preview"

(cherry picked from commit 4c44827)

(CP triggered by mountiny)

Author: mjasikowski

src/components/ProcessMoneyReportHoldMenu.tsx

@@ -67,9 +67,6 @@ function ProcessMoneyReportHoldMenu({
 
     const onSubmit = (full: boolean) => {
         if (isApprove) {
-            if (startAnimation) {
-                startAnimation();
-            }
             IOU.approveMoneyRequest(moneyRequestReport, full);
             if (!full && isLinkedTransactionHeld(Navigation.getTopmostReportActionId() ?? '-1', moneyRequestReport?.reportID ?? '')) {
                 Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(moneyRequestReport?.reportID ?? ''));

src/components/ReportActionItem/ReportPreview.tsx

@@ -121,7 +121,6 @@ function ReportPreview({
     );
 
     const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false);
-    const [isApprovedAnimationRunning, setIsApprovedAnimationRunning] = useState(false);
     const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
     const [requestType, setRequestType] = useState<ActionHandledType>();
     const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = ReportUtils.getNonHeldAndFullAmount(iouReport, policy);
@@ -141,18 +140,12 @@ function ReportPreview({
     }));
     const checkMarkScale = useSharedValue(iouSettled ? 1 : 0);
 
-    const isApproved = ReportUtils.isReportApproved(iouReport, action);
-    const thumbsUpScale = useSharedValue(isApproved ? 1 : 0.25);
-    const thumbsUpStyle = useAnimatedStyle(() => ({
-        ...styles.defaultCheckmarkWrapper,
-        transform: [{scale: thumbsUpScale.value}],
-    }));
-
     const moneyRequestComment = action?.childLastMoneyRequestComment ?? '';
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport);
     const isInvoiceRoom = ReportUtils.isInvoiceRoom(chatReport);
     const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport);
 
+    const isApproved = ReportUtils.isReportApproved(iouReport, action);
     const canAllowSettlement = ReportUtils.hasUpdatedTotal(iouReport, policy);
     const numberOfRequests = allTransactions.length;
     const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(iouReportID);
@@ -203,19 +196,11 @@ function ReportPreview({
     const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails();
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
-    const stopAnimation = useCallback(() => {
-        setIsPaidAnimationRunning(false);
-        setIsApprovedAnimationRunning(false);
-    }, []);
-
+    const stopAnimation = useCallback(() => setIsPaidAnimationRunning(false), []);
     const startAnimation = useCallback(() => {
         setIsPaidAnimationRunning(true);
         HapticFeedback.longPress();
     }, []);
-    const startApprovedAnimation = useCallback(() => {
-        setIsApprovedAnimationRunning(true);
-        HapticFeedback.longPress();
-    }, []);
     const confirmPayment = useCallback(
         (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
             if (!type) {
@@ -247,8 +232,6 @@ function ReportPreview({
         } else if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) {
             setIsHoldMenuVisible(true);
         } else {
-            setIsApprovedAnimationRunning(true);
-            HapticFeedback.longPress();
             IOU.approveMoneyRequest(iouReport, true);
         }
     };
@@ -347,15 +330,14 @@ function ReportPreview({
 
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
     const getCanIOUBePaid = useCallback(
-        (onlyShowPayElsewhere = false, shouldCheckApprovedState = true) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere, shouldCheckApprovedState),
+        (onlyShowPayElsewhere = false) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere),
         [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]) || isApprovedAnimationRunning;
+    const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]);
 
     const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport);
 
@@ -442,7 +424,7 @@ function ReportPreview({
     const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(iouReport);
 
     useEffect(() => {
-        if (!isPaidAnimationRunning || isApprovedAnimationRunning) {
+        if (!isPaidAnimationRunning) {
             return;
         }
 
@@ -468,14 +450,6 @@ function ReportPreview({
         }
     }, [isPaidAnimationRunning, iouSettled, checkMarkScale]);
 
-    useEffect(() => {
-        if (!isApproved) {
-            return;
-        }
-
-        thumbsUpScale.value = withSpring(1, {duration: 200});
-    }, [isApproved, thumbsUpScale]);
-
     return (
         <OfflineWithFeedback
             pendingAction={iouReport?.pendingFields?.preview}
@@ -510,7 +484,7 @@ function ReportPreview({
                                 <View style={styles.expenseAndReportPreviewTextContainer}>
                                     <View style={styles.flexRow}>
                                         <Animated.View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, previewMessageStyle]}>
-                                            <Text style={[styles.textLabelSupporting, styles.lh20]}>{previewMessage}</Text>
+                                            <Text style={[styles.textLabelSupporting, styles.lh16]}>{previewMessage}</Text>
                                         </Animated.View>
                                         {shouldShowRBR && (
                                             <Icon
@@ -538,14 +512,6 @@ function ReportPreview({
                                                         />
                                                     </Animated.View>
                                                 )}
-                                                {isApproved && (
-                                                    <Animated.View style={thumbsUpStyle}>
-                                                        <Icon
-                                                            src={Expensicons.ThumbsUp}
-                                                            fill={theme.icon}
-                                                        />
-                                                    </Animated.View>
-                                                )}
                                             </View>
                                         </View>
                                         {shouldShowSubtitle && !!supportText && (
@@ -572,8 +538,6 @@ function ReportPreview({
                                     <AnimatedSettlementButton
                                         onlyShowPayElsewhere={onlyShowPayElsewhere}
                                         isPaidAnimationRunning={isPaidAnimationRunning}
-                                        isApprovedAnimationRunning={isApprovedAnimationRunning}
-                                        canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
                                         onAnimationFinish={stopAnimation}
                                         formattedAmount={getSettlementAmount() ?? ''}
                                         currency={iouReport?.currency}
@@ -642,13 +606,7 @@ function ReportPreview({
                     chatReport={chatReport}
                     moneyRequestReport={iouReport}
                     transactionCount={numberOfRequests}
-                    startAnimation={() => {
-                        if (requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) {
-                            startApprovedAnimation();
-                        } else {
-                            startAnimation();
-                        }
-                    }}
+                    startAnimation={startAnimation}
                 />
             )}
         </OfflineWithFeedback>

src/components/SettlementButton/AnimatedSettlementButton.tsx

@@ -11,18 +11,9 @@ import type SettlementButtonProps from './types';
 type AnimatedSettlementButtonProps = SettlementButtonProps & {
     isPaidAnimationRunning: boolean;
     onAnimationFinish: () => void;
-    isApprovedAnimationRunning: boolean;
-    canIOUBePaid: boolean;
 };
 
-function AnimatedSettlementButton({
-    isPaidAnimationRunning,
-    onAnimationFinish,
-    isApprovedAnimationRunning,
-    isDisabled,
-    canIOUBePaid,
-    ...settlementButtonProps
-}: AnimatedSettlementButtonProps) {
+function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, isDisabled, ...settlementButtonProps}: AnimatedSettlementButtonProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const buttonScale = useSharedValue(1);
@@ -47,13 +38,12 @@ function AnimatedSettlementButton({
         overflow: 'hidden',
         marginTop: buttonMarginTop.value,
     }));
-    const buttonDisabledStyle =
-        isPaidAnimationRunning || isApprovedAnimationRunning
-            ? {
-                  opacity: 1,
-                  ...styles.cursorDefault,
-              }
-            : undefined;
+    const buttonDisabledStyle = isPaidAnimationRunning
+        ? {
+              opacity: 1,
+              ...styles.cursorDefault,
+          }
+        : undefined;
 
     const resetAnimation = useCallback(() => {
         // eslint-disable-next-line react-compiler/react-compiler
@@ -66,7 +56,7 @@ function AnimatedSettlementButton({
     }, [buttonScale, buttonOpacity, paymentCompleteTextScale, paymentCompleteTextOpacity, height, buttonMarginTop, styles.expenseAndReportPreviewTextButtonContainer.gap]);
 
     useEffect(() => {
-        if (!isApprovedAnimationRunning && !isPaidAnimationRunning) {
+        if (!isPaidAnimationRunning) {
             resetAnimation();
             return;
         }
@@ -77,30 +67,13 @@ 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(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}),
+            withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}, () => runOnJS(onAnimationFinish)()),
         );
+        buttonMarginTop.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}));
         paymentCompleteTextOpacity.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}));
-    }, [
-        isPaidAnimationRunning,
-        isApprovedAnimationRunning,
-        onAnimationFinish,
-        buttonOpacity,
-        buttonScale,
-        height,
-        paymentCompleteTextOpacity,
-        paymentCompleteTextScale,
-        buttonMarginTop,
-        resetAnimation,
-        canIOUBePaid,
-        styles.expenseAndReportPreviewTextButtonContainer.gap,
-    ]);
+    }, [isPaidAnimationRunning, onAnimationFinish, buttonOpacity, buttonScale, height, paymentCompleteTextOpacity, paymentCompleteTextScale, buttonMarginTop, resetAnimation]);
 
     return (
         <Animated.View style={containerStyles}>
@@ -109,16 +82,11 @@ function AnimatedSettlementButton({
                     <Text style={[styles.buttonMediumText]}>{translate('iou.paymentComplete')}</Text>
                 </Animated.View>
             )}
-            {isApprovedAnimationRunning && (
-                <Animated.View style={paymentCompleteTextStyles}>
-                    <Text style={[styles.buttonMediumText]}>{translate('iou.approved')}</Text>
-                </Animated.View>
-            )}
             <Animated.View style={buttonStyles}>
                 <SettlementButton
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...settlementButtonProps}
-                    isDisabled={isPaidAnimationRunning || isApprovedAnimationRunning || isDisabled}
+                    isDisabled={isPaidAnimationRunning || isDisabled}
                     disabledStyle={buttonDisabledStyle}
                 />
             </Animated.View>

src/libs/actions/IOU.ts

@@ -6786,7 +6786,6 @@ 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);
@@ -6840,7 +6839,7 @@ function canIOUBePaid(
         reimbursableSpend !== 0 &&
         !isChatReportArchived &&
         !isAutoReimbursable &&
-        (!shouldBeApproved || !shouldCheckApprovedState) &&
+        !shouldBeApproved &&
         !isPayAtEndExpenseReport
     );
 }