From 689791639f8712e6bbfe9c5193666ec6243eec2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Jasikowski?= Date: Thu, 21 Nov 2024 14:27:39 +0100 Subject: [PATCH] Merge pull request #52901 from Expensify/revert-50387-krishna2323/issue/49847 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [CP Staging] Revert "Feat: Implement to use a 👍icon next to approved report preview" (cherry picked from commit 4c44827398f884af626872c33f64dd358d19eff4) (CP triggered by mountiny) --- src/components/ProcessMoneyReportHoldMenu.tsx | 3 - .../ReportActionItem/ReportPreview.tsx | 56 +++---------------- .../AnimatedSettlementButton.tsx | 56 ++++--------------- src/libs/actions/IOU.ts | 3 +- 4 files changed, 20 insertions(+), 98 deletions(-) diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index 246a57dccaf2..f1a72cc7fb8e 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/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 ?? '')); diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 78763cb8d595..5edeffd4dea4 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/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(); 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 ( - {previewMessage} + {previewMessage} {shouldShowRBR && ( )} - {isApproved && ( - - - - )} {shouldShowSubtitle && !!supportText && ( @@ -572,8 +538,6 @@ function ReportPreview({ { - if (requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) { - startApprovedAnimation(); - } else { - startAnimation(); - } - }} + startAnimation={startAnimation} /> )} diff --git a/src/components/SettlementButton/AnimatedSettlementButton.tsx b/src/components/SettlementButton/AnimatedSettlementButton.tsx index 7e42c8cdc45c..5de528d741a2 100644 --- a/src/components/SettlementButton/AnimatedSettlementButton.tsx +++ b/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 ( @@ -109,16 +82,11 @@ function AnimatedSettlementButton({ {translate('iou.paymentComplete')} )} - {isApprovedAnimationRunning && ( - - {translate('iou.approved')} - - )} diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index 5853e8854b3d..dd6686b9ff7d 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6786,7 +6786,6 @@ function canIOUBePaid( policy: OnyxTypes.OnyxInputOrEntry, 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 ); }