Skip to content

Commit

Permalink
remove hold modal on small screens as we no longer use rhp
Browse files Browse the repository at this point in the history
  • Loading branch information
@gijoe0295
gijoe0295 committed Dec 12, 2024
1 parent 80975bd commit dee55e1
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 124 deletions.
31 changes: 3 additions & 28 deletions src/components/MoneyReportHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -511,12 +492,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
danger
shouldEnableNewFocusManagement
/>
{isSmallScreenWidth && shouldShowHoldMenu && (
<ProcessMoneyRequestHoldMenu
onClose={handleHoldRequestClose}
onConfirm={handleHoldRequestClose}
/>
)}
</View>
);
}
Expand Down
163 changes: 67 additions & 96 deletions src/components/MoneyRequestHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 (
<>
<View style={[styles.pl0]}>
<HeaderWithBackButton
shouldShowBorderBottom={!statusBarProps && !isOnHold}
shouldShowReportAvatarWithDisplay
shouldEnableDetailPageNavigation
shouldShowPinButton={false}
report={{
...report,
reportID: reportID ?? '',
ownerAccountID: parentReport?.ownerAccountID,
}}
policy={policy}
shouldShowBackButton={shouldUseNarrowLayout}
shouldDisplaySearchRouter={shouldDisplaySearchRouter}
onBackButtonPress={onBackButtonPress}
>
{shouldShowMarkAsCashButton && !shouldUseNarrowLayout && (
<Button
success
text={translate('iou.markAsCash')}
style={[styles.p0]}
onPress={markAsCash}
/>
)}
{isDuplicate && !shouldUseNarrowLayout && (
<Button
success
text={translate('iou.reviewDuplicates')}
style={[styles.p0, styles.ml2]}
onPress={() => {
Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
}}
/>
)}
</HeaderWithBackButton>
{shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
<View style={[styles.ph5, styles.pb3]}>
<Button
success
text={translate('iou.markAsCash')}
style={[styles.w100, styles.pr0]}
onPress={markAsCash}
/>
</View>
)}
{isDuplicate && shouldUseNarrowLayout && (
<View style={[styles.ph5, styles.pb3]}>
<Button
success
text={translate('iou.reviewDuplicates')}
style={[styles.w100, styles.pr0]}
onPress={() => {
Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
}}
/>
</View>
<View style={[styles.pl0]}>
<HeaderWithBackButton
shouldShowBorderBottom={!statusBarProps && !isOnHold}
shouldShowReportAvatarWithDisplay
shouldEnableDetailPageNavigation
shouldShowPinButton={false}
report={{
...report,
reportID: reportID ?? '',
ownerAccountID: parentReport?.ownerAccountID,
}}
policy={policy}
shouldShowBackButton={shouldUseNarrowLayout}
shouldDisplaySearchRouter={shouldDisplaySearchRouter}
onBackButtonPress={onBackButtonPress}
>
{shouldShowMarkAsCashButton && !shouldUseNarrowLayout && (
<Button
success
text={translate('iou.markAsCash')}
style={[styles.p0]}
onPress={markAsCash}
/>
)}
{!!statusBarProps && (
<View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
<MoneyRequestHeaderStatusBar
icon={statusBarProps.icon}
description={statusBarProps.description}
/>
</View>
{isDuplicate && !shouldUseNarrowLayout && (
<Button
success
text={translate('iou.reviewDuplicates')}
style={[styles.p0, styles.ml2]}
onPress={() => {
Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
}}
/>
)}
</View>
{isSmallScreenWidth && shouldShowHoldMenu && (
<ProcessMoneyRequestHoldMenu
onClose={handleHoldRequestClose}
onConfirm={handleHoldRequestClose}
/>
</HeaderWithBackButton>
{shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
<View style={[styles.ph5, styles.pb3]}>
<Button
success
text={translate('iou.markAsCash')}
style={[styles.w100, styles.pr0]}
onPress={markAsCash}
/>
</View>
)}
{isDuplicate && shouldUseNarrowLayout && (
<View style={[styles.ph5, styles.pb3]}>
<Button
success
text={translate('iou.reviewDuplicates')}
style={[styles.w100, styles.pr0]}
onPress={() => {
Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(reportID ?? '', Navigation.getReportRHPActiveRoute()));
}}
/>
</View>
)}
{!!statusBarProps && (
<View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
<MoneyRequestHeaderStatusBar
icon={statusBarProps.icon}
description={statusBarProps.description}
/>
</View>
)}
</>
</View>
);
}

Expand Down

0 comments on commit dee55e1

Please sign in to comment.