From dee55e1673164af407ea28609a55148976eafb8d Mon Sep 17 00:00:00 2001 From: gijoe0295 Date: Fri, 13 Dec 2024 02:14:09 +0700 Subject: [PATCH] remove hold modal on small screens as we no longer use rhp --- src/components/MoneyReportHeader.tsx | 31 +---- src/components/MoneyRequestHeader.tsx | 163 +++++++++++--------------- 2 files changed, 70 insertions(+), 124 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 008f8b672ac1..f30e1bd94074 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -40,7 +40,6 @@ import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusB import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; import type {ActionHandledType} from './ProcessMoneyReportHoldMenu'; import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu'; -import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu'; import ExportWithDropdownMenu from './ReportActionItem/ExportWithDropdownMenu'; import SettlementButton from './SettlementButton'; @@ -90,7 +89,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const styles = useThemeStyles(); const theme = useTheme(); const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false); - const [shouldShowHoldMenu, setShouldShowHoldMenu] = useState(false); const {translate} = useLocalize(); const {isOffline} = useNetwork(); const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport); @@ -301,30 +299,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea ); useEffect(() => { - if (isLoadingHoldUseExplained) { + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + if (isLoadingHoldUseExplained || dismissedHoldUseExplanation || !isOnHold) { return; } - setTimeout(() => setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation), CONST.ANIMATED_TRANSITION); + Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute())); }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]); - useEffect(() => { - if (!shouldShowHoldMenu) { - return; - } - - if (isSmallScreenWidth) { - if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) { - Navigation.goBack(); - } - } else { - Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute())); - } - }, [isSmallScreenWidth, shouldShowHoldMenu]); - - const handleHoldRequestClose = () => { - IOU.dismissHoldUseExplanation(); - }; - useEffect(() => { if (canDeleteRequest) { return; @@ -511,12 +492,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea danger shouldEnableNewFocusManagement /> - {isSmallScreenWidth && shouldShowHoldMenu && ( - - )} ); } diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 579f1a6edba2..8985ce051d40 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -1,6 +1,6 @@ import {useRoute} from '@react-navigation/native'; import type {ReactNode} from 'react'; -import React, {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; @@ -14,9 +14,7 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import variables from '@styles/variables'; -import * as IOU from '@userActions/IOU'; import * as TransactionActions from '@userActions/Transaction'; -import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; @@ -30,7 +28,6 @@ import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; -import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu'; type MoneyRequestHeaderProps = { /** The report currently being looked at */ @@ -63,7 +60,6 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre const styles = useThemeStyles(); const theme = useTheme(); const {translate} = useLocalize(); - const [shouldShowHoldMenu, setShouldShowHoldMenu] = useState(false); const isOnHold = TransactionUtils.isOnHold(transaction); const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? ''); const reportID = report?.reportID; @@ -124,105 +120,80 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre const statusBarProps = getStatusBarProps(); useEffect(() => { - if (isLoadingHoldUseExplained) { + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + if (isLoadingHoldUseExplained || dismissedHoldUseExplanation || !isOnHold) { return; } - setTimeout(() => setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation), CONST.ANIMATED_TRANSITION); + Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute())); }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]); - useEffect(() => { - if (!shouldShowHoldMenu) { - return; - } - - if (isSmallScreenWidth) { - if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) { - Navigation.goBack(); - } - } else { - Navigation.navigate(ROUTES.PROCESS_MONEY_REQUEST_HOLD.getRoute(Navigation.getReportRHPActiveRoute())); - } - }, [isSmallScreenWidth, shouldShowHoldMenu]); - - const handleHoldRequestClose = () => { - IOU.dismissHoldUseExplanation(); - }; - return ( - <> - - - {shouldShowMarkAsCashButton && !shouldUseNarrowLayout && ( -