diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index ab225b457e6c6..53e31ab3c4f67 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx @@ -28,7 +28,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import {getIOUReportPreviewButtonType, getTotalAmountForIOUReportPreviewButton, IOU_REPORT_PREVIEW_BUTTON} from '@libs/MoneyRequestReportUtils'; -import type {RootNavigatorParamList, State} from '@libs/Navigation/types'; import {getConnectedIntegration} from '@libs/PolicyUtils'; import {getOriginalMessage, isActionOfType} from '@libs/ReportActionsUtils'; import { @@ -64,13 +63,11 @@ import { isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils, } from '@libs/ReportUtils'; import {getMerchant, hasPendingUI, isCardTransaction, isPartialMerchant, isPending, shouldShowBrokenConnectionViolationForMultipleTransactions} from '@libs/TransactionUtils'; -import navigationRef from '@navigation/navigationRef'; import colors from '@styles/theme/colors'; import variables from '@styles/variables'; import {approveMoneyRequest, canApproveIOU, canIOUBePaid as canIOUBePaidIOUActions, canSubmitReport, payInvoice, payMoneyRequest, submitReport} from '@userActions/IOU'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; -import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES from '@src/ROUTES'; import type {Transaction} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; @@ -113,6 +110,7 @@ function MoneyRequestReportPreviewContent({ reportPreviewStyles, shouldDisplayContextMenu = true, isInvoice, + shouldShowBorder = false, }: MoneyRequestReportPreviewContentProps) { const lastTransaction = transactions?.at(0); const transactionIDList = transactions?.map((reportTransaction) => reportTransaction.transactionID) ?? []; @@ -122,8 +120,6 @@ function MoneyRequestReportPreviewContent({ const {translate} = useLocalize(); const {isOffline} = useNetwork(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const rootState = navigationRef.getRootState() as State; - const isSearchFullscreen = rootState?.routes.at(-1)?.name === NAVIGATORS.SEARCH_FULLSCREEN_NAVIGATOR; const [doesReportNameOverflow, setDoesReportNameOverflow] = useState(false); @@ -461,7 +457,7 @@ function MoneyRequestReportPreviewContent({ styles.flexRow, styles.justifyContentBetween, StyleUtils.getBackgroundColorStyle(theme.cardBG), - isSearchFullscreen ? styles.borderedContentCardLarge : styles.reportContainerBorderRadius, + shouldShowBorder ? styles.borderedContentCardLarge : styles.reportContainerBorderRadius, ]} role={getButtonRole(true)} isNested diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx index 8a5fc8bedeb3e..d5139a7b459f1 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx @@ -30,6 +30,7 @@ function MoneyRequestReportPreview({ onPaymentOptionsHide, shouldDisplayContextMenu = true, isInvoice = false, + shouldShowBorder, }: MoneyRequestReportPreviewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -105,6 +106,7 @@ function MoneyRequestReportPreview({ reportPreviewStyles={reportPreviewStyles} shouldDisplayContextMenu={shouldDisplayContextMenu} isInvoice={isInvoice} + shouldShowBorder={shouldShowBorder} /> ); } diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/types.ts b/src/components/ReportActionItem/MoneyRequestReportPreview/types.ts index fa48df08175f8..76c1582d4fec1 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/types.ts +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/types.ts @@ -55,6 +55,9 @@ type MoneyRequestReportPreviewProps = { /** Whether the report is an invoice preview */ isInvoice?: boolean; + + /** Whether to show a border to separate Reports Chat Item and Money Request Report Preview */ + shouldShowBorder?: boolean; }; type MoneyRequestReportPreviewContentOnyxProps = { diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 8db07b2a89b7d..f4bc5893326f9 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -92,6 +92,7 @@ function ChatListItem({ ].some((type) => type === reportActionItem.actionName) } policies={policies} + shouldShowBorder /> ); diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 098ce26cd0198..6703f599ad709 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -337,6 +337,9 @@ type PureReportActionItemProps = { /** Policies */ policies?: OnyxCollection; + + /** Whether to show border for MoneyRequestReportPreviewContent */ + shouldShowBorder?: boolean; }; // This is equivalent to returning a negative boolean in normal functions, but we can keep the element return type @@ -397,6 +400,7 @@ function PureReportActionItem({ userBillingFundID, reportAutomaticallyForwardedMessage, policies, + shouldShowBorder, }: PureReportActionItemProps) { const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -860,6 +864,7 @@ function PureReportActionItem({ onPaymentOptionsShow={() => setIsPaymentMethodPopoverActive(true)} onPaymentOptionsHide={() => setIsPaymentMethodPopoverActive(false)} shouldDisplayContextMenu={shouldDisplayContextMenu} + shouldShowBorder={shouldShowBorder} /> ); } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW) {