diff --git a/src/CONST.ts b/src/CONST.ts index 4cec868320a7..4c90e3e9de38 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -387,6 +387,9 @@ const CONST = { ANIMATION_THUMBSUP_DURATION: 250, ANIMATION_THUMBSUP_DELAY: 200, ANIMATION_PAID_BUTTON_HIDE_DELAY: 1000, + ANIMATION_SUBMITTED_TEXT_DELAY: 500, + ANIMATION_SUBMITTED_HEIGHT_DURATION: 1000, + ANIMATION_SUBMITTED_TEXT_DURATION: 2000, BACKGROUND_IMAGE_TRANSITION_DURATION: 1000, SCREEN_TRANSITION_END_TIMEOUT: 1000, ARROW_HIDE_DELAY: 3000, diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 70599e5efb86..7ed612a00c5e 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -4,7 +4,6 @@ import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Animated, {useAnimatedStyle, useSharedValue, withDelay, withSpring, withTiming} from 'react-native-reanimated'; -import Button from '@components/Button'; import {getButtonRole, getButtonStyle} from '@components/Button/utils'; import DelegateNoAccessModal from '@components/DelegateNoAccessModal'; import Icon from '@components/Icon'; @@ -82,8 +81,9 @@ import { } from '@libs/TransactionUtils'; import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import variables from '@styles/variables'; -import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidIOUActions, canSubmitReport, payInvoice, payMoneyRequest, submitReport} from '@userActions/IOU'; +import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidIOUActions, canSubmitReport, payInvoice, payMoneyRequest} from '@userActions/IOU'; import Timing from '@userActions/Timing'; +import SubmitButtonWithAnimation from '@src/components/SubmitButtonWithAnimation'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -245,10 +245,17 @@ function ReportPreview({ formattedMerchant = null; } + const [isSubmitAnimationRunning, setIsSubmitAnimationRunning] = useState(false); + + const startSubmitAnimation = useCallback(() => { + setIsSubmitAnimationRunning(true); + HapticFeedback.longPress(); + }, []); + const isArchived = isArchivedReportWithID(iouReport?.reportID); const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN; const filteredTransactions = transactions?.filter((transaction) => transaction) ?? []; - const shouldShowSubmitButton = canSubmitReport(iouReport, policy, filteredTransactions, violations); + const shouldShowSubmitButton = canSubmitReport(iouReport, policy, filteredTransactions, violations) || isSubmitAnimationRunning; const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(iouReport); // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on @@ -263,6 +270,7 @@ function ReportPreview({ const stopAnimation = useCallback(() => { setIsPaidAnimationRunning(false); setIsApprovedAnimationRunning(false); + setIsSubmitAnimationRunning(false); }, []); const startAnimation = useCallback(() => { setIsPaidAnimationRunning(true); @@ -272,7 +280,6 @@ function ReportPreview({ setIsApprovedAnimationRunning(true); HapticFeedback.longPress(); }, []); - const confirmPayment = useCallback( (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => { if (!type) { @@ -416,7 +423,8 @@ function ReportPreview({ const bankAccountRoute = getBankAccountRoute(chatReport); - const shouldShowSettlementButton = !shouldShowSubmitButton && (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation; + const shouldShowSettlementButton = + !shouldShowSubmitButton && (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation && !isSubmitAnimationRunning; const shouldPromptUserToAddBankAccount = (hasMissingPaymentMethod(userWallet, iouReportID) || hasMissingInvoiceBankAccount(iouReportID)) && !isSettled(iouReportID); const shouldShowRBR = hasErrors && !iouSettled; @@ -664,11 +672,13 @@ function ReportPreview({ /> )} {shouldShowSubmitButton && ( -