diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 12da12b8b15d..fdf6f8edd825 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -113,10 +113,15 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const isArchivedReport = ReportUtils.isArchivedRoomWithID(moneyRequestReport?.reportID); const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID ?? '-1'}`, {selector: ReportUtils.getArchiveReason}); - const shouldShowPayButton = useMemo( - () => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined), + const getCanIOUBePaid = useCallback( + (onlyShowPayElsewhere = false) => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, onlyShowPayElsewhere), [moneyRequestReport, chatReport, policy, transaction], ); + const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]); + + const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]); + + const shouldShowPayButton = canIOUBePaid || onlyShowPayElsewhere; const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy), [moneyRequestReport, policy]); @@ -292,6 +297,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea {shouldShowSettlementButton && !shouldUseNarrowLayout && ( {shouldShowSettlementButton && shouldUseNarrowLayout && ( isPaidAnimationRunning || IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions), - [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions], + const getCanIOUBePaid = useCallback( + (onlyShowPayElsewhere = false) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere), + [iouReport, chatReport, policy, allTransactions], ); + const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]); + const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]); + const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere; const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]); const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport); @@ -518,6 +520,7 @@ function ReportPreview({ {shouldShowSettlementButton && ( { diff --git a/src/components/SettlementButton/types.ts b/src/components/SettlementButton/types.ts index 0a26aec914e0..b3ad0c1c9bd0 100644 --- a/src/components/SettlementButton/types.ts +++ b/src/components/SettlementButton/types.ts @@ -87,6 +87,9 @@ type SettlementButtonProps = { /** Whether to use keyboard shortcuts for confirmation or not */ useKeyboardShortcuts?: boolean; + + /** Whether we only show pay elsewhere button */ + onlyShowPayElsewhere?: boolean; }; export default SettlementButtonProps; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index d244eefa99fd..94bab46cd0e3 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1683,7 +1683,7 @@ function isOneOnOneChat(report: OnyxEntry): boolean { * Checks if the current user is a payer of the expense */ -function isPayer(session: OnyxEntry, iouReport: OnyxEntry) { +function isPayer(session: OnyxEntry, iouReport: OnyxEntry, onlyShowPayElsewhere = false) { const isApproved = isReportApproved(iouReport); const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${iouReport?.policyID}`] ?? null; const policyType = policy?.type; @@ -1694,7 +1694,7 @@ function isPayer(session: OnyxEntry, iouReport: OnyxEntry) { const isReimburser = session?.email === policy?.achAccount?.reimburser; return (!policy?.achAccount?.reimburser || isReimburser) && (isApproved || isManager); } - if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL) { + if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL || onlyShowPayElsewhere) { return isAdmin && (isApproved || isManager); } return false; diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index 883b38cff1b5..b5cbffb75c0c 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6930,6 +6930,7 @@ function canIOUBePaid( chatReport: OnyxTypes.OnyxInputOrEntry, policy: OnyxTypes.OnyxInputOrEntry, transactions?: OnyxTypes.Transaction[], + onlyShowPayElsewhere = false, ) { const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport); const reportNameValuePairs = ReportUtils.getReportNameValuePairs(chatReport?.reportID); @@ -6941,7 +6942,12 @@ function canIOUBePaid( } if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO) { - return false; + if (!onlyShowPayElsewhere) { + return false; + } + if (iouReport?.statusNum !== CONST.REPORT.STATUS_NUM.SUBMITTED) { + return false; + } } if (ReportUtils.isInvoiceReport(iouReport)) { @@ -6960,6 +6966,7 @@ function canIOUBePaid( accountID: userAccountID, }, iouReport, + onlyShowPayElsewhere, ); const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport); @@ -6969,7 +6976,6 @@ function canIOUBePaid( const shouldBeApproved = canApproveIOU(iouReport, policy); const isPayAtEndExpenseReport = ReportUtils.isPayAtEndExpenseReport(iouReport?.reportID, transactions); - return ( isPayer && !isOpenExpenseReport &&