From 2974defa78ac22160fa41fc92252c981a1ae58c5 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 31 May 2024 12:26:51 +0700 Subject: [PATCH 01/15] Add confirmation prompt when approving held request via report preview --- .../ReportActionItem/ReportPreview.tsx | 48 ++++++++++++++++++- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index be3b104018db..933381b9e116 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -1,5 +1,5 @@ import truncate from 'lodash/truncate'; -import React, {useMemo} from 'react'; +import React, {useMemo, useState} from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; @@ -9,6 +9,7 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import ProcessMoneyReportHoldMenu from '@components/ProcessMoneyReportHoldMenu'; import SettlementButton from '@components/SettlementButton'; import {showContextMenuForReport} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; @@ -16,6 +17,7 @@ import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import ControlSelection from '@libs/ControlSelection'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; @@ -119,6 +121,12 @@ function ReportPreview({ [transactions, iouReportID, action], ); + const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false); + const [requestType, setRequestType] = useState<'pay' | 'approve'>(); + const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(iouReport, policy); + const {isSmallScreenWidth} = useWindowDimensions(); + const [paymentType, setPaymentType] = useState(); + const managerID = iouReport?.managerID ?? 0; const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(iouReport); @@ -162,6 +170,28 @@ function ReportPreview({ [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled], ); + const confirmPayment = (type?: PaymentMethodType | undefined) => { + if (!type) { + return; + } + setPaymentType(type); + setRequestType('pay'); + if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { + setIsHoldMenuVisible(true); + } else if (chatReport) { + IOU.payMoneyRequest(type, chatReport, iouReport as Report, false); + } + }; + + const confirmApproval = () => { + setRequestType('approve'); + if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { + setIsHoldMenuVisible(true); + } else { + IOU.approveMoneyRequest(iouReport as Report, true); + } + }; + const getDisplayAmount = (): string => { if (totalDisplaySpend) { return CurrencyUtils.convertToDisplayString(totalDisplaySpend, iouReport?.currency); @@ -368,7 +398,8 @@ function ReportPreview({ policyID={policyID} chatReportID={chatReportID} iouReport={iouReport} - onPress={(paymentType?: PaymentMethodType) => chatReport && iouReport && paymentType && IOU.payMoneyRequest(paymentType, chatReport, iouReport)} + onPress={confirmPayment} + confirmApproval={confirmApproval} enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} addBankAccountRoute={bankAccountRoute} shouldHidePaymentOptions={!shouldShowPayButton} @@ -399,6 +430,19 @@ function ReportPreview({ + {isHoldMenuVisible && requestType !== undefined && ( + setIsHoldMenuVisible(false)} + isVisible={isHoldMenuVisible} + paymentType={paymentType} + chatReport={chatReport} + moneyRequestReport={iouReport as Report} + /> + )} ); } From 68aa796fddcffcc8f4f1b128d9ad0af46c5ace9e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 31 May 2024 13:19:00 +0700 Subject: [PATCH 02/15] fix lint --- src/components/ReportActionItem/ReportPreview.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 933381b9e116..755ca06ecb4d 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -179,6 +179,7 @@ function ReportPreview({ if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else if (chatReport) { + // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style IOU.payMoneyRequest(type, chatReport, iouReport as Report, false); } }; @@ -188,6 +189,7 @@ function ReportPreview({ if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else { + // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style IOU.approveMoneyRequest(iouReport as Report, true); } }; @@ -440,6 +442,7 @@ function ReportPreview({ isVisible={isHoldMenuVisible} paymentType={paymentType} chatReport={chatReport} + // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style moneyRequestReport={iouReport as Report} /> )} From 4c6771566bc96f37dac77dcbe386b2b1e64a7822 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 31 May 2024 13:34:12 +0700 Subject: [PATCH 03/15] safely check iouReport --- src/components/ReportActionItem/ReportPreview.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 755ca06ecb4d..ef34c6ba2982 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -178,9 +178,8 @@ function ReportPreview({ setRequestType('pay'); if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); - } else if (chatReport) { - // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style - IOU.payMoneyRequest(type, chatReport, iouReport as Report, false); + } else if (chatReport && iouReport) { + IOU.payMoneyRequest(type, chatReport, iouReport, false); } }; @@ -189,8 +188,7 @@ function ReportPreview({ if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else { - // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style - IOU.approveMoneyRequest(iouReport as Report, true); + IOU.approveMoneyRequest(iouReport ?? {}, true); } }; @@ -432,7 +430,7 @@ function ReportPreview({ - {isHoldMenuVisible && requestType !== undefined && ( + {isHoldMenuVisible && requestType !== undefined && !!iouReport && ( )} From 21b35f7eb2f6ce6abad4c431c1876d0bdb0745e0 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 31 May 2024 15:15:23 +0700 Subject: [PATCH 04/15] fix test --- 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 ef34c6ba2982..15e33b2d4d89 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -430,7 +430,7 @@ function ReportPreview({ - {isHoldMenuVisible && requestType !== undefined && !!iouReport && ( + {isHoldMenuVisible && !!iouReport && requestType !== undefined && ( Date: Fri, 31 May 2024 16:25:11 +0700 Subject: [PATCH 05/15] fix perf test --- src/components/ReportActionItem/ReportPreview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 15e33b2d4d89..e1db781c5d16 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -178,8 +178,8 @@ function ReportPreview({ setRequestType('pay'); if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); - } else if (chatReport && iouReport) { - IOU.payMoneyRequest(type, chatReport, iouReport, false); + } else if (chatReport) { + IOU.payMoneyRequest(type, chatReport, iouReport!, false); } }; From fca320f7dc7a7b44e9c63d5a15012e92416ce8e9 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 31 May 2024 16:34:56 +0700 Subject: [PATCH 06/15] fix lint --- src/components/ReportActionItem/ReportPreview.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index e1db781c5d16..5fcf1c53a337 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -179,7 +179,8 @@ function ReportPreview({ if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else if (chatReport) { - IOU.payMoneyRequest(type, chatReport, iouReport!, false); + // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style + IOU.payMoneyRequest(type, chatReport, iouReport as Report, false); } }; From 99eebd81d885e3e77b89aad1a19b0744c43630b7 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 3 Jun 2024 18:43:32 +0700 Subject: [PATCH 07/15] add new const --- src/CONST.ts | 4 ++++ src/components/MoneyReportHeader.tsx | 7 ++++--- src/components/ProcessMoneyReportHoldMenu.tsx | 6 ++++-- src/components/ReportActionItem/ReportPreview.tsx | 7 ++++--- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index de4e3305eddc..0c10b01c3d15 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1552,6 +1552,10 @@ const CONST = { CATEGORIZE: 'categorize', SHARE: 'share', }, + ACTION_TYPE: { + APPROVE: 'approve', + PAY: 'pay', + }, DEFAULT_AMOUNT: 0, TYPE: { SEND: 'send', diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index aad801a7c259..f60e2a3cb01b 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -19,6 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; +import DeepValueOf from '@src/types/utils/DeepValueOf'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import Button from './Button'; import ConfirmModal from './ConfirmModal'; @@ -79,7 +80,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea isActionOwner && (ReportUtils.canAddOrDeleteTransactions(moneyRequestReport) || ReportUtils.isTrackExpenseReport(transactionThreadReport)) && !isDeletedParentAction; const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false); const [paymentType, setPaymentType] = useState(); - const [requestType, setRequestType] = useState<'pay' | 'approve'>(); + const [requestType, setRequestType] = useState>(); const canAllowSettlement = ReportUtils.hasUpdatedTotal(moneyRequestReport, policy); const policyType = policy?.type; const isPayer = ReportUtils.isPayer(session, moneyRequestReport); @@ -124,7 +125,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea return; } setPaymentType(type); - setRequestType('pay'); + setRequestType(CONST.IOU.ACTION_TYPE.PAY); if (ReportUtils.hasHeldExpenses(moneyRequestReport.reportID)) { setIsHoldMenuVisible(true); } else if (chatReport) { @@ -133,7 +134,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea }; const confirmApproval = () => { - setRequestType('approve'); + setRequestType(CONST.IOU.ACTION_TYPE.APPROVE); if (ReportUtils.hasHeldExpenses(moneyRequestReport.reportID)) { setIsHoldMenuVisible(true); } else { diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index 6e81c9d57bc8..08a78f699916 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/src/components/ProcessMoneyReportHoldMenu.tsx @@ -4,9 +4,11 @@ import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; import {isLinkedTransactionHeld} from '@libs/ReportActionsUtils'; import * as IOU from '@userActions/IOU'; +import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; +import DeepValueOf from '@src/types/utils/DeepValueOf'; import DecisionModal from './DecisionModal'; type ProcessMoneyReportHoldMenuProps = { @@ -35,7 +37,7 @@ type ProcessMoneyReportHoldMenuProps = { paymentType?: PaymentMethodType; /** Type of action handled */ - requestType?: 'pay' | 'approve'; + requestType?: DeepValueOf; }; function ProcessMoneyReportHoldMenu({ @@ -50,7 +52,7 @@ function ProcessMoneyReportHoldMenu({ moneyRequestReport, }: ProcessMoneyReportHoldMenuProps) { const {translate} = useLocalize(); - const isApprove = requestType === 'approve'; + const isApprove = requestType === CONST.IOU.ACTION_TYPE.APPROVE; const onSubmit = (full: boolean) => { if (isApprove) { diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 5fcf1c53a337..afb8beebfd33 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -35,6 +35,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Policy, Report, ReportAction, Transaction, TransactionViolations, UserWallet} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; +import DeepValueOf from '@src/types/utils/DeepValueOf'; import type {PendingMessageProps} from './MoneyRequestPreview/types'; import ReportActionItemImages from './ReportActionItemImages'; @@ -122,7 +123,7 @@ function ReportPreview({ ); const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false); - const [requestType, setRequestType] = useState<'pay' | 'approve'>(); + const [requestType, setRequestType] = useState>(); const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(iouReport, policy); const {isSmallScreenWidth} = useWindowDimensions(); const [paymentType, setPaymentType] = useState(); @@ -175,7 +176,7 @@ function ReportPreview({ return; } setPaymentType(type); - setRequestType('pay'); + setRequestType(CONST.IOU.ACTION_TYPE.PAY); if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else if (chatReport) { @@ -185,7 +186,7 @@ function ReportPreview({ }; const confirmApproval = () => { - setRequestType('approve'); + setRequestType(CONST.IOU.ACTION_TYPE.APPROVE); if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else { From 0091e82822ee70a60a32efa380738c8ffabf2160 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 3 Jun 2024 20:37:21 +0700 Subject: [PATCH 08/15] fix lint --- src/components/MoneyReportHeader.tsx | 2 +- src/components/ProcessMoneyReportHoldMenu.tsx | 2 +- src/components/ReportActionItem/ReportPreview.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index f60e2a3cb01b..789bcaac7355 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -19,7 +19,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import DeepValueOf from '@src/types/utils/DeepValueOf'; +import type DeepValueOf from '@src/types/utils/DeepValueOf'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import Button from './Button'; import ConfirmModal from './ConfirmModal'; diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index 08a78f699916..f3e7790a6b5f 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/src/components/ProcessMoneyReportHoldMenu.tsx @@ -8,7 +8,7 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import DeepValueOf from '@src/types/utils/DeepValueOf'; +import type DeepValueOf from '@src/types/utils/DeepValueOf'; import DecisionModal from './DecisionModal'; type ProcessMoneyReportHoldMenuProps = { diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index afb8beebfd33..1fa16a73cff2 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -35,7 +35,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Policy, Report, ReportAction, Transaction, TransactionViolations, UserWallet} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import DeepValueOf from '@src/types/utils/DeepValueOf'; +import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type {PendingMessageProps} from './MoneyRequestPreview/types'; import ReportActionItemImages from './ReportActionItemImages'; From 7392bd5bb7c192f0055f089cbcfeecc0941b971f Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 4 Jun 2024 15:53:27 +0700 Subject: [PATCH 09/15] fix perf test --- src/components/ReportActionItem/ReportPreview.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 1fa16a73cff2..e97389b23ecc 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -171,7 +171,7 @@ function ReportPreview({ [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled], ); - const confirmPayment = (type?: PaymentMethodType | undefined) => { + const confirmPayment = (type: PaymentMethodType | undefined) => { if (!type) { return; } @@ -400,7 +400,9 @@ function ReportPreview({ policyID={policyID} chatReportID={chatReportID} iouReport={iouReport} - onPress={confirmPayment} + onPress={(type) => { + confirmPayment(type); + }} confirmApproval={confirmApproval} enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} addBankAccountRoute={bankAccountRoute} From fd6d0f77d23ba1d839487e31b527e9bcda3f5e57 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 4 Jun 2024 15:58:44 +0700 Subject: [PATCH 10/15] update suggestion --- src/components/ReportActionItem/ReportPreview.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index e97389b23ecc..944b846f29f5 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -179,9 +179,8 @@ function ReportPreview({ setRequestType(CONST.IOU.ACTION_TYPE.PAY); if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); - } else if (chatReport) { - // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style - IOU.payMoneyRequest(type, chatReport, iouReport as Report, false); + } else if (chatReport && iouReport) { + IOU.payMoneyRequest(type, chatReport, iouReport, false); } }; @@ -400,9 +399,7 @@ function ReportPreview({ policyID={policyID} chatReportID={chatReportID} iouReport={iouReport} - onPress={(type) => { - confirmPayment(type); - }} + onPress={confirmPayment} confirmApproval={confirmApproval} enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS} addBankAccountRoute={bankAccountRoute} @@ -434,7 +431,7 @@ function ReportPreview({ - {isHoldMenuVisible && !!iouReport && requestType !== undefined && ( + {isHoldMenuVisible && iouReport && requestType !== undefined && ( Date: Tue, 4 Jun 2024 16:31:37 +0700 Subject: [PATCH 11/15] fix perf test --- src/libs/ReportUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 848376fb4b6d..d095defe8bcd 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -6399,8 +6399,8 @@ function getNonHeldAndFullAmount(iouReport: OnyxEntry, policy: OnyxEntry } return [ - CurrencyUtils.convertToDisplayString((iouReport?.unheldTotal ?? 0) * -1, iouReport?.currency ?? ''), - CurrencyUtils.convertToDisplayString((iouReport?.total ?? 0) * -1, iouReport?.currency ?? ''), + CurrencyUtils.convertToDisplayString((iouReport?.unheldTotal ?? 0) * -1, iouReport?.currency ?? CONST.CURRENCY.USD), + CurrencyUtils.convertToDisplayString((iouReport?.total ?? 0) * -1, iouReport?.currency ?? CONST.CURRENCY.USD), ]; } From e7969dee6158575ffa6becde8f3ad893edcda0d1 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 4 Jun 2024 16:56:31 +0700 Subject: [PATCH 12/15] fix type --- src/CONST.ts | 4 ---- src/components/MoneyReportHeader.tsx | 8 ++++---- src/components/ProcessMoneyReportHoldMenu.tsx | 7 +++++-- src/components/ReportActionItem/ReportPreview.tsx | 8 ++++---- 4 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 2e6ef61daa88..aa3ade14b040 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1552,10 +1552,6 @@ const CONST = { CATEGORIZE: 'categorize', SHARE: 'share', }, - ACTION_TYPE: { - APPROVE: 'approve', - PAY: 'pay', - }, DEFAULT_AMOUNT: 0, TYPE: { SEND: 'send', diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 8c866731d150..47ea32d7fa41 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -19,8 +19,8 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import type DeepValueOf from '@src/types/utils/DeepValueOf'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import type {ActionHandledType} from './ProcessMoneyReportHoldMenu'; import Button from './Button'; import ConfirmModal from './ConfirmModal'; import HeaderWithBackButton from './HeaderWithBackButton'; @@ -80,7 +80,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea isActionOwner && (ReportUtils.canAddOrDeleteTransactions(moneyRequestReport) || ReportUtils.isTrackExpenseReport(transactionThreadReport)) && !isDeletedParentAction; const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false); const [paymentType, setPaymentType] = useState(); - const [requestType, setRequestType] = useState>(); + const [requestType, setRequestType] = useState(); const canAllowSettlement = ReportUtils.hasUpdatedTotal(moneyRequestReport, policy); const policyType = policy?.type; const isPayer = ReportUtils.isPayer(session, moneyRequestReport); @@ -125,7 +125,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea return; } setPaymentType(type); - setRequestType(CONST.IOU.ACTION_TYPE.PAY); + setRequestType(CONST.IOU.REPORT_ACTION_TYPE.PAY); if (ReportUtils.hasHeldExpenses(moneyRequestReport.reportID)) { setIsHoldMenuVisible(true); } else if (chatReport) { @@ -134,7 +134,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea }; const confirmApproval = () => { - setRequestType(CONST.IOU.ACTION_TYPE.APPROVE); + setRequestType(CONST.IOU.REPORT_ACTION_TYPE.APPROVE); if (ReportUtils.hasHeldExpenses(moneyRequestReport.reportID)) { setIsHoldMenuVisible(true); } else { diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index f3e7790a6b5f..01896fb0a3cb 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/src/components/ProcessMoneyReportHoldMenu.tsx @@ -11,6 +11,8 @@ import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import type DeepValueOf from '@src/types/utils/DeepValueOf'; import DecisionModal from './DecisionModal'; +type ActionHandledType = DeepValueOf; + type ProcessMoneyReportHoldMenuProps = { /** The chat report this report is linked to */ chatReport: OnyxEntry; @@ -37,7 +39,7 @@ type ProcessMoneyReportHoldMenuProps = { paymentType?: PaymentMethodType; /** Type of action handled */ - requestType?: DeepValueOf; + requestType?: ActionHandledType; }; function ProcessMoneyReportHoldMenu({ @@ -52,7 +54,7 @@ function ProcessMoneyReportHoldMenu({ moneyRequestReport, }: ProcessMoneyReportHoldMenuProps) { const {translate} = useLocalize(); - const isApprove = requestType === CONST.IOU.ACTION_TYPE.APPROVE; + const isApprove = requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE; const onSubmit = (full: boolean) => { if (isApprove) { @@ -84,3 +86,4 @@ function ProcessMoneyReportHoldMenu({ ProcessMoneyReportHoldMenu.displayName = 'ProcessMoneyReportHoldMenu'; export default ProcessMoneyReportHoldMenu; +export type {ActionHandledType}; diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 944b846f29f5..2ac69fd01b0c 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -10,6 +10,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ProcessMoneyReportHoldMenu from '@components/ProcessMoneyReportHoldMenu'; +import type {ActionHandledType} from '@components/ProcessMoneyReportHoldMenu'; import SettlementButton from '@components/SettlementButton'; import {showContextMenuForReport} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; @@ -35,7 +36,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Policy, Report, ReportAction, Transaction, TransactionViolations, UserWallet} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; -import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type {PendingMessageProps} from './MoneyRequestPreview/types'; import ReportActionItemImages from './ReportActionItemImages'; @@ -123,7 +123,7 @@ function ReportPreview({ ); const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false); - const [requestType, setRequestType] = useState>(); + const [requestType, setRequestType] = useState(); const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(iouReport, policy); const {isSmallScreenWidth} = useWindowDimensions(); const [paymentType, setPaymentType] = useState(); @@ -176,7 +176,7 @@ function ReportPreview({ return; } setPaymentType(type); - setRequestType(CONST.IOU.ACTION_TYPE.PAY); + setRequestType(CONST.IOU.REPORT_ACTION_TYPE.PAY); if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else if (chatReport && iouReport) { @@ -185,7 +185,7 @@ function ReportPreview({ }; const confirmApproval = () => { - setRequestType(CONST.IOU.ACTION_TYPE.APPROVE); + setRequestType(CONST.IOU.REPORT_ACTION_TYPE.APPROVE); if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else { From 7ccb8ffe1ec699de8a34997b33f8500c92825ea9 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 4 Jun 2024 16:58:36 +0700 Subject: [PATCH 13/15] refactor suggestion --- src/libs/ReportUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index d095defe8bcd..99798c76d794 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -6399,8 +6399,8 @@ function getNonHeldAndFullAmount(iouReport: OnyxEntry, policy: OnyxEntry } return [ - CurrencyUtils.convertToDisplayString((iouReport?.unheldTotal ?? 0) * -1, iouReport?.currency ?? CONST.CURRENCY.USD), - CurrencyUtils.convertToDisplayString((iouReport?.total ?? 0) * -1, iouReport?.currency ?? CONST.CURRENCY.USD), + CurrencyUtils.convertToDisplayString((iouReport?.unheldTotal ?? 0) * -1, iouReport?.currency), + CurrencyUtils.convertToDisplayString((iouReport?.total ?? 0) * -1, iouReport?.currency), ]; } From 28220dd7e4e44522ffee29751db743d366f00982 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 4 Jun 2024 17:09:20 +0700 Subject: [PATCH 14/15] run prettier --- 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 47ea32d7fa41..2e118f79f963 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -20,7 +20,6 @@ import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import type {ActionHandledType} from './ProcessMoneyReportHoldMenu'; import Button from './Button'; import ConfirmModal from './ConfirmModal'; import HeaderWithBackButton from './HeaderWithBackButton'; @@ -28,6 +27,7 @@ import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; +import type {ActionHandledType} from './ProcessMoneyReportHoldMenu'; import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu'; import SettlementButton from './SettlementButton'; From dfad444c2dc7d3b1e97b9db130c4308739206b32 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 5 Jun 2024 14:51:09 +0700 Subject: [PATCH 15/15] resolve conflict --- .../ReportActionItem/ReportPreview.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 7d0ff591795b..84e1691b3abe 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -180,7 +180,11 @@ function ReportPreview({ if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { setIsHoldMenuVisible(true); } else if (chatReport && iouReport) { - IOU.payMoneyRequest(type, chatReport, iouReport, false); + if (ReportUtils.isInvoiceReport(iouReport)) { + IOU.payInvoice(type, chatReport, iouReport); + } else { + IOU.payMoneyRequest(type, chatReport, iouReport); + } } }; @@ -311,17 +315,6 @@ function ReportPreview({ }; }, [formattedMerchant, formattedDescription, moneyRequestComment, translate, numberOfRequests, numberOfScanningReceipts, numberOfPendingRequests]); - const confirmPayment = (paymentMethodType?: PaymentMethodType) => { - if (!paymentMethodType || !chatReport || !iouReport) { - return; - } - if (ReportUtils.isInvoiceReport(iouReport)) { - IOU.payInvoice(paymentMethodType, chatReport, iouReport); - } else { - IOU.payMoneyRequest(paymentMethodType, chatReport, iouReport); - } - }; - return (