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 687ef177609e..2885593b52ae 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 03cfe860ddb2..9c03dd2af8fc 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 &&