From 0669a7aa2ac2f7d4571be0a9784b839026f9324d Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Wed, 10 Jul 2024 01:12:51 +0200 Subject: [PATCH 1/4] add cancel payment button into the report details page --- src/CONST.ts | 1 + src/components/MoneyReportHeader.tsx | 20 -------------- src/pages/ReportDetailsPage.tsx | 41 ++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 20 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 13d44ee883be..41fe27a59ce9 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2351,6 +2351,7 @@ const CONST = { PRIVATE_NOTES: 'privateNotes', DELETE: 'delete', MARK_AS_INCOMPLETE: 'markAsIncomplete', + CANCEL_PAYMENT: 'cancelPayment', UNAPPROVE: 'unapprove', }, EDIT_REQUEST_FIELD: { diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 80ad2890afaa..6777bbf6c269 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -99,7 +99,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const canAllowSettlement = ReportUtils.hasUpdatedTotal(moneyRequestReport, policy); const policyType = policy?.type; const isDraft = ReportUtils.isOpenExpenseReport(moneyRequestReport); - const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false); const navigateBackToAfterDelete = useRef(); const hasScanningReceipt = ReportUtils.getTransactionsWithReceipts(moneyRequestReport?.reportID).some((t) => TransactionUtils.isReceiptBeingScanned(t)); @@ -108,14 +107,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea // allTransactions in TransactionUtils might have stale data const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(moneyRequestReport.reportID, transactions); - const cancelPayment = useCallback(() => { - if (!chatReport) { - return; - } - IOU.cancelPayment(moneyRequestReport, chatReport); - setIsConfirmModalVisible(false); - }, [moneyRequestReport, chatReport]); - const shouldShowPayButton = useMemo(() => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy), [moneyRequestReport, chatReport, policy]); const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, chatReport, policy), [moneyRequestReport, chatReport, policy]); @@ -371,17 +362,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea transactionCount={transactionIDs.length} /> )} - setIsConfirmModalVisible(false)} - prompt={translate('iou.cancelPaymentConfirmation')} - confirmText={translate('iou.cancelPayment')} - cancelText={translate('common.dismiss')} - danger - shouldEnableNewFocusManagement - /> policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`], [policies, report?.policyID]); const isPolicyAdmin = useMemo(() => PolicyUtils.isPolicyAdmin(policy), [policy]); const isPolicyEmployee = useMemo(() => PolicyUtils.isPolicyEmployee(report?.policyID ?? '-1', policies), [report?.policyID, policies]); @@ -263,6 +264,25 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD const shouldShowWriteCapability = !isMoneyRequestReport; const shouldShowMenuItem = shouldShowNotificationPref || shouldShowWriteCapability || (!!report?.visibility && report.chatType !== CONST.REPORT.CHAT_TYPE.INVOICE); + const isPayer = ReportUtils.isPayer(session, moneyRequestReport); + const isSettled = ReportUtils.isSettled(moneyRequestReport?.reportID ?? '-1'); + + const shouldShowCancelPaymentButton = caseID === CASES.MONEY_REPORT && isPayer && isSettled && ReportUtils.isExpenseReport(moneyRequestReport); + const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID ?? '-1'}`); + + const cancelPayment = useCallback(() => { + if (!chatReport) { + return; + } + + if (!moneyRequestReport) { + return; + } + + IOU.cancelPayment(moneyRequestReport, chatReport); + setIsConfirmModalVisible(false); + }, [moneyRequestReport, chatReport]); + const menuItems: ReportDetailsPageMenuItem[] = useMemo(() => { const items: ReportDetailsPageMenuItem[] = []; @@ -356,6 +376,16 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD } } + if (shouldShowCancelPaymentButton) { + items.push({ + key: CONST.REPORT_DETAILS_MENU_ITEM.CANCEL_PAYMENT, + icon: Expensicons.Trashcan, + translationKey: 'iou.cancelPayment', + isAnonymousAction: false, + action: () => setIsConfirmModalVisible(true), + }); + } + if (shouldShowLeaveButton) { items.push({ key: CONST.REPORT_DETAILS_MENU_ITEM.LEAVE_ROOM, @@ -710,6 +740,17 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD confirmText={translate('common.leave')} cancelText={translate('common.cancel')} /> + setIsConfirmModalVisible(false)} + prompt={translate('iou.cancelPaymentConfirmation')} + confirmText={translate('iou.cancelPayment')} + cancelText={translate('common.dismiss')} + danger + shouldEnableNewFocusManagement + /> Date: Wed, 10 Jul 2024 01:29:25 +0200 Subject: [PATCH 2/4] add missing dependency to useMemo --- src/pages/ReportDetailsPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index c7b4ecc9411d..d38fe6717e21 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -433,6 +433,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD isCanceledTaskReport, shouldShowLeaveButton, activeChatMembers.length, + shouldShowCancelPaymentButton, isPolicyAdmin, session, leaveChat, From e98a1863ed5ac86873142720e1a86090b1724c86 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Wed, 10 Jul 2024 02:16:52 +0200 Subject: [PATCH 3/4] refactor the cancelPayment IOU function --- src/libs/actions/IOU.ts | 6 +++++- src/pages/ReportDetailsPage.tsx | 4 ---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index df199a2a36ae..6111d0148acf 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6604,7 +6604,11 @@ function submitReport(expenseReport: OnyxTypes.Report) { API.write(WRITE_COMMANDS.SUBMIT_REPORT, parameters, {optimisticData, successData, failureData}); } -function cancelPayment(expenseReport: OnyxTypes.Report, chatReport: OnyxTypes.Report) { +function cancelPayment(expenseReport: OnyxEntry, chatReport: OnyxTypes.Report) { + if (isEmptyObject(expenseReport)) { + return; + } + const optimisticReportAction = ReportUtils.buildOptimisticCancelPaymentReportAction(expenseReport.reportID, -(expenseReport.total ?? 0), expenseReport.currency ?? ''); const policy = PolicyUtils.getPolicy(chatReport.policyID); const isFree = policy && policy.type === CONST.POLICY.TYPE.FREE; diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index d38fe6717e21..a585f9c94d67 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -275,10 +275,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD return; } - if (!moneyRequestReport) { - return; - } - IOU.cancelPayment(moneyRequestReport, chatReport); setIsConfirmModalVisible(false); }, [moneyRequestReport, chatReport]); From 1abb522cb3a8d17455b6546956eb338f2800e957 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Wed, 10 Jul 2024 02:17:39 +0200 Subject: [PATCH 4/4] fix prettier --- src/libs/actions/IOU.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts index 6111d0148acf..b9a8a05ba046 100644 --- a/src/libs/actions/IOU.ts +++ b/src/libs/actions/IOU.ts @@ -6608,7 +6608,7 @@ function cancelPayment(expenseReport: OnyxEntry, chatReport: O if (isEmptyObject(expenseReport)) { return; } - + const optimisticReportAction = ReportUtils.buildOptimisticCancelPaymentReportAction(expenseReport.reportID, -(expenseReport.total ?? 0), expenseReport.currency ?? ''); const policy = PolicyUtils.getPolicy(chatReport.policyID); const isFree = policy && policy.type === CONST.POLICY.TYPE.FREE;