From 8a93cdb9c43b9651f7bd6555cc6c8a2d88986f9a Mon Sep 17 00:00:00 2001 From: truph01 Date: Sat, 28 Sep 2024 18:31:34 +0700 Subject: [PATCH 1/8] display pay elsewhere button if reimburseNo --- src/components/ReportActionItem/ReportPreview.tsx | 7 ++++++- src/components/SettlementButton/index.tsx | 6 ++++++ src/libs/ReportUtils.ts | 4 ++-- src/libs/actions/IOU.ts | 13 +++++++++++-- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 2dfc44b4d2fc..6819f9993389 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -325,6 +325,10 @@ function ReportPreview({ [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions], ); + const forceShowOnlyPayElsewhere = useMemo( + () => isPaidAnimationRunning || IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, true), + [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions], + ); const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]); const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport); @@ -516,8 +520,9 @@ function ReportPreview({ )} - {shouldShowSettlementButton && ( + {(shouldShowSettlementButton || forceShowOnlyPayElsewhere) && ( { diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 78ebdd92751e..02b310888826 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1691,7 +1691,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, shouldForceShowOnlyPayElsewhere = false) { const isApproved = isReportApproved(iouReport); const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${iouReport?.policyID}`] ?? null; const policyType = policy?.type; @@ -1702,7 +1702,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 || shouldForceShowOnlyPayElsewhere) { return isAdmin && (isApproved || isManager); } return false; diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index 5262cc4dc4ff..679e39e381d6 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6928,6 +6928,7 @@ function canIOUBePaid( chatReport: OnyxTypes.OnyxInputOrEntry, policy: OnyxTypes.OnyxInputOrEntry, transactions?: OnyxTypes.Transaction[], + shouldForceShowOnlyPayElsewhere = false, ) { const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport); const reportNameValuePairs = ReportUtils.getReportNameValuePairs(chatReport?.reportID); @@ -6939,7 +6940,12 @@ function canIOUBePaid( } if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO) { - return false; + if (!shouldForceShowOnlyPayElsewhere) { + return false; + } + if (iouReport?.statusNum !== CONST.REPORT.STATUS_NUM.SUBMITTED) { + return false; + } } if (ReportUtils.isInvoiceReport(iouReport)) { @@ -6958,6 +6964,7 @@ function canIOUBePaid( accountID: userAccountID, }, iouReport, + shouldForceShowOnlyPayElsewhere, ); const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport); @@ -6967,7 +6974,9 @@ function canIOUBePaid( const shouldBeApproved = canApproveIOU(iouReport, policy); const isPayAtEndExpenseReport = ReportUtils.isPayAtEndExpenseReport(iouReport?.reportID, transactions); - + if (iouReport.reportID === '6232570331764393') { + console.log('333333333333333333333', {isPayer, isOpenExpenseReport, iouSettled, isPayAtEndExpenseReport}); + } return ( isPayer && !isOpenExpenseReport && From ef5459a7c741a1f72034130a0bc92f5bea8fc3f9 Mon Sep 17 00:00:00 2001 From: truph01 Date: Sat, 28 Sep 2024 18:33:28 +0700 Subject: [PATCH 2/8] fix: remove console log --- src/libs/actions/IOU.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index 679e39e381d6..b9c231ec3d55 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6974,9 +6974,6 @@ function canIOUBePaid( const shouldBeApproved = canApproveIOU(iouReport, policy); const isPayAtEndExpenseReport = ReportUtils.isPayAtEndExpenseReport(iouReport?.reportID, transactions); - if (iouReport.reportID === '6232570331764393') { - console.log('333333333333333333333', {isPayer, isOpenExpenseReport, iouSettled, isPayAtEndExpenseReport}); - } return ( isPayer && !isOpenExpenseReport && From 76d5c54ecf48d6e80cc9e90c601f55fd5d3deb66 Mon Sep 17 00:00:00 2001 From: truph01 Date: Tue, 1 Oct 2024 12:21:40 +0700 Subject: [PATCH 3/8] fix: lint --- src/components/ReportActionItem/ReportPreview.tsx | 6 +++--- src/components/SettlementButton/index.tsx | 6 +++--- src/components/SettlementButton/types.ts | 3 +++ src/libs/ReportUtils.ts | 4 ++-- src/libs/actions/IOU.ts | 6 +++--- 5 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 6819f9993389..c96a5a5618f6 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -325,7 +325,7 @@ function ReportPreview({ [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions], ); - const forceShowOnlyPayElsewhere = useMemo( + const onlyShowPayElsewhere = useMemo( () => isPaidAnimationRunning || IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, true), [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions], ); @@ -520,9 +520,9 @@ function ReportPreview({ )} - {(shouldShowSettlementButton || forceShowOnlyPayElsewhere) && ( + {(shouldShowSettlementButton || onlyShowPayElsewhere) && ( { 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 7d2fe810b62a..2f4b27e81608 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, shouldForceShowOnlyPayElsewhere = false) { +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, shou const isReimburser = session?.email === policy?.achAccount?.reimburser; return (!policy?.achAccount?.reimburser || isReimburser) && (isApproved || isManager); } - if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL || shouldForceShowOnlyPayElsewhere) { + 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 5918255b549f..c956dfa4552d 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6927,7 +6927,7 @@ function canIOUBePaid( chatReport: OnyxTypes.OnyxInputOrEntry, policy: OnyxTypes.OnyxInputOrEntry, transactions?: OnyxTypes.Transaction[], - shouldForceShowOnlyPayElsewhere = false, + onlyShowPayElsewhere = false, ) { const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport); const reportNameValuePairs = ReportUtils.getReportNameValuePairs(chatReport?.reportID); @@ -6939,7 +6939,7 @@ function canIOUBePaid( } if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO) { - if (!shouldForceShowOnlyPayElsewhere) { + if (!onlyShowPayElsewhere) { return false; } if (iouReport?.statusNum !== CONST.REPORT.STATUS_NUM.SUBMITTED) { @@ -6963,7 +6963,7 @@ function canIOUBePaid( accountID: userAccountID, }, iouReport, - shouldForceShowOnlyPayElsewhere, + onlyShowPayElsewhere, ); const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport); From 628ab74db435e6e37e17fe28c962793196c5f364 Mon Sep 17 00:00:00 2001 From: truph01 Date: Tue, 1 Oct 2024 15:13:06 +0700 Subject: [PATCH 4/8] fix: apply fix in money report header --- src/components/MoneyReportHeader.tsx | 8 +++++++- src/components/ReportActionItem/ReportPreview.tsx | 15 ++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 12da12b8b15d..4c4bb1579e81 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -113,11 +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( + const canIOUBePaid = useMemo( () => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined), [moneyRequestReport, chatReport, policy, transaction], ); + const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, true), []); + + const shouldShowPayButton = useMemo(() => canIOUBePaid || onlyShowPayElsewhere, [canIOUBePaid, onlyShowPayElsewhere]); + const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy), [moneyRequestReport, policy]); const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport); @@ -292,6 +296,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea {shouldShowSettlementButton && !shouldUseNarrowLayout && ( {shouldShowSettlementButton && shouldUseNarrowLayout && ( isPaidAnimationRunning || IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions), - [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions], - ); - + const canIOUBePaid = useMemo(() => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions), [iouReport, chatReport, policy, allTransactions]); const onlyShowPayElsewhere = useMemo( - () => isPaidAnimationRunning || IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, true), - [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions], + () => !canIOUBePaid && IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, true), + [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions, canIOUBePaid], ); + const shouldShowPayButton = useMemo(() => isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere, [isPaidAnimationRunning, canIOUBePaid, onlyShowPayElsewhere]); const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]); const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport); @@ -520,9 +517,9 @@ function ReportPreview({ )} - {(shouldShowSettlementButton || onlyShowPayElsewhere) && ( + {shouldShowSettlementButton && ( Date: Tue, 1 Oct 2024 15:20:11 +0700 Subject: [PATCH 5/8] fix: lint --- src/components/MoneyReportHeader.tsx | 5 ++++- src/components/ReportActionItem/ReportPreview.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 4c4bb1579e81..3b6caecdfed7 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -118,7 +118,10 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea [moneyRequestReport, chatReport, policy, transaction], ); - const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, true), []); + const onlyShowPayElsewhere = useMemo( + () => !canIOUBePaid && IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, true), + [canIOUBePaid, chatReport, moneyRequestReport, policy, transaction], + ); const shouldShowPayButton = useMemo(() => canIOUBePaid || onlyShowPayElsewhere, [canIOUBePaid, onlyShowPayElsewhere]); diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 3b92e8cc7678..fd2c71a53df2 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -323,7 +323,7 @@ function ReportPreview({ const canIOUBePaid = useMemo(() => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions), [iouReport, chatReport, policy, allTransactions]); const onlyShowPayElsewhere = useMemo( () => !canIOUBePaid && IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, true), - [isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions, canIOUBePaid], + [iouReport, chatReport, policy, allTransactions, canIOUBePaid], ); const shouldShowPayButton = useMemo(() => isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere, [isPaidAnimationRunning, canIOUBePaid, onlyShowPayElsewhere]); const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]); From 397a206778ae3ce6c8e1240ecb0cd4102fcefd60 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 2 Oct 2024 15:45:27 +0700 Subject: [PATCH 6/8] fix: remove useMemo --- src/components/MoneyReportHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 3b6caecdfed7..a6bb1a53b12e 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -123,7 +123,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea [canIOUBePaid, chatReport, moneyRequestReport, policy, transaction], ); - const shouldShowPayButton = useMemo(() => canIOUBePaid || onlyShowPayElsewhere, [canIOUBePaid, onlyShowPayElsewhere]); + const shouldShowPayButton = canIOUBePaid || onlyShowPayElsewhere; const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy), [moneyRequestReport, policy]); From 75748a5689daf1366b1ddb7babdfcef92c1e4e40 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 2 Oct 2024 16:13:31 +0700 Subject: [PATCH 7/8] fix: remove useMemo --- src/components/ReportActionItem/ReportPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 5f660b94c619..882e5ae8a11f 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -325,7 +325,7 @@ function ReportPreview({ () => !canIOUBePaid && IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, true), [iouReport, chatReport, policy, allTransactions, canIOUBePaid], ); - const shouldShowPayButton = useMemo(() => isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere, [isPaidAnimationRunning, canIOUBePaid, onlyShowPayElsewhere]); + const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere; const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]); const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport); From 5b385166612261772ef26e628c5ad60632914454 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 2 Oct 2024 16:34:45 +0700 Subject: [PATCH 8/8] fix: create getCanIOUBePaid --- src/components/MoneyReportHeader.tsx | 10 ++++------ src/components/ReportActionItem/ReportPreview.tsx | 11 ++++++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index a6bb1a53b12e..fdf6f8edd825 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -113,15 +113,13 @@ 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 canIOUBePaid = 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 && IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, true), - [canIOUBePaid, chatReport, moneyRequestReport, policy, transaction], - ); + const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]); const shouldShowPayButton = canIOUBePaid || onlyShowPayElsewhere; diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 882e5ae8a11f..cadfe5786079 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -319,12 +319,13 @@ function ReportPreview({ ]); const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); - - const canIOUBePaid = useMemo(() => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions), [iouReport, chatReport, policy, allTransactions]); - const onlyShowPayElsewhere = useMemo( - () => !canIOUBePaid && IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, true), - [iouReport, chatReport, policy, allTransactions, canIOUBePaid], + 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]);