From df28f4b8ebf57543140dbbdb2411255df37f4c0c Mon Sep 17 00:00:00 2001 From: Getabalew Date: Tue, 1 Jul 2025 18:32:08 +0300 Subject: [PATCH 01/24] revert: revert standardize pay button --- src/CONST/index.ts | 6 +- src/components/Button/index.tsx | 14 +- .../ButtonWithDropdownMenu/index.tsx | 23 +- .../ButtonWithDropdownMenu/types.ts | 8 + src/components/Icon/BankIcons/index.native.ts | 4 +- src/components/KYCWall/BaseKYCWall.tsx | 47 +- src/components/KYCWall/types.ts | 5 +- src/components/MoneyReportHeader.tsx | 3 +- src/components/PopoverMenu.tsx | 11 +- src/components/ProcessMoneyReportHoldMenu.tsx | 2 +- src/components/Search/index.tsx | 23 +- src/components/Search/types.ts | 3 +- .../SelectionList/Search/ActionCell.tsx | 48 +- .../Search/ReportListItemHeader.tsx | 4 + .../Search/UserInfoAndActionButtonRow.tsx | 2 + src/components/SelectionList/types.ts | 3 + src/components/SettlementButton/index.tsx | 521 ++++++++++++++++-- src/components/SettlementButton/types.ts | 8 +- src/components/TransactionItemRow/index.tsx | 6 + src/hooks/usePaymentOptions.ts | 27 +- src/languages/de.ts | 22 +- src/languages/en.ts | 22 +- src/languages/es.ts | 22 +- src/languages/fr.ts | 23 +- src/languages/it.ts | 22 +- src/languages/ja.ts | 22 +- src/languages/nl.ts | 23 +- src/languages/params.ts | 9 + src/languages/pl.ts | 22 +- src/languages/pt-BR.ts | 22 +- src/languages/zh-hans.ts | 22 +- .../MoveIOUReportToExistingPolicyParams.ts | 1 + ...UReportToPolicyAndInviteSubmitterParams.ts | 1 + src/libs/DebugUtils.ts | 4 + src/libs/IOUUtils.ts | 18 +- src/libs/MoneyRequestReportUtils.ts | 2 +- src/libs/ReportUtils.ts | 73 ++- src/libs/actions/BankAccounts.ts | 114 +++- src/libs/actions/IOU.ts | 47 +- src/libs/actions/Policy/Policy.ts | 56 ++ .../resetUSDBankAccount.ts | 234 ++++---- src/libs/actions/Report.ts | 38 +- src/libs/actions/Search.ts | 32 +- .../home/report/ReportActionItemMessage.tsx | 2 +- .../settings/Wallet/WalletPage/WalletPage.tsx | 5 +- .../TransactionPreviewContent.stories.tsx | 3 +- src/styles/index.ts | 6 + src/styles/utils/index.ts | 13 + src/types/onyx/LastPaymentMethod.ts | 32 +- src/types/onyx/OriginalMessage.ts | 6 + src/types/onyx/Report.ts | 2 +- src/types/onyx/ReportAction.ts | 6 + tests/actions/IOUTest.ts | 12 +- tests/unit/OnyxDerivedTest.ts | 3 +- 54 files changed, 1405 insertions(+), 304 deletions(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index fc18e9a11613d..6213fb0d965b3 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -6931,9 +6931,9 @@ const CONST = { }, LAST_PAYMENT_METHOD: { LAST_USED: 'lastUsed', - IOU: 'Iou', - EXPENSE: 'Expense', - INVOICE: 'Invoice', + IOU: 'iou', + EXPENSE: 'expense', + INVOICE: 'invoice', }, SKIPPABLE_COLLECTION_MEMBER_IDS: [String(DEFAULT_NUMBER_ID), '-1', 'undefined', 'null', 'NaN'] as string[], SETUP_SPECIALIST_LOGIN: 'Setup Specialist', diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index d68eeebcaef07..b7a62c7aa0631 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -310,7 +310,19 @@ function Button( const textComponent = secondLineText ? ( {primaryText} - {secondLineText} + + {secondLineText} + ) : ( primaryText diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index dd4551fcd679a..1b1af6c915081 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -50,6 +50,8 @@ function ButtonWithDropdownMenu({ testID, secondLineText = '', icon, + shouldPopoverUseScrollView = false, + containerStyles, shouldUseModalPaddingStyle = true, }: ButtonWithDropdownMenuProps) { const theme = useTheme(); @@ -73,6 +75,10 @@ function ButtonWithDropdownMenu({ const isButtonSizeLarge = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE; const nullCheckRef = (ref: RefObject) => ref ?? null; + useEffect(() => { + setSelectedItemIndex(defaultSelectedIndex); + }, [defaultSelectedIndex]); + useEffect(() => { if (!dropdownAnchor.current) { return; @@ -232,18 +238,27 @@ function ButtonWithDropdownMenu({ shouldShowSelectedItemCheck={shouldShowSelectedItemCheck} // eslint-disable-next-line react-compiler/react-compiler anchorRef={nullCheckRef(dropdownAnchor)} - withoutOverlay - shouldUseScrollView scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && styles.pv4} - shouldUseModalPaddingStyle={shouldUseModalPaddingStyle} anchorAlignment={anchorAlignment} + shouldUseModalPaddingStyle={shouldUseModalPaddingStyle} headerText={menuHeaderText} + shouldUseScrollView={shouldPopoverUseScrollView} + containerStyles={containerStyles} menuItems={options.map((item, index) => ({ ...item, onSelected: item.onSelected - ? () => item.onSelected?.() + ? () => { + item.onSelected?.(); + if (item.shouldUpdateSelectedIndex) { + setSelectedItemIndex(index); + } + } : () => { onOptionSelected?.(item); + if (!item.shouldUpdateSelectedIndex && typeof item.shouldUpdateSelectedIndex === 'boolean') { + return; + } + setSelectedItemIndex(index); }, shouldCallAfterModalHide: true, diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts index 395d445e100f0..82806a4d80748 100644 --- a/src/components/ButtonWithDropdownMenu/types.ts +++ b/src/components/ButtonWithDropdownMenu/types.ts @@ -40,6 +40,8 @@ type DropdownOption = { descriptionTextStyle?: StyleProp; wrapperStyle?: StyleProp; displayInDefaultIconColor?: boolean; + /** Whether the selected index should be updated when the option is selected even if we have onSelected callback */ + shouldUpdateSelectedIndex?: boolean; subMenuItems?: PopoverMenuItem[]; backButtonText?: string; avatarSize?: ValueOf; @@ -140,6 +142,12 @@ type ButtonWithDropdownMenuProps = { /** Icon for main button */ icon?: IconAsset; + /** Whether the popover content should be scrollable */ + shouldPopoverUseScrollView?: boolean; + + /** Container style to be applied to the popover of the dropdown menu */ + containerStyles?: StyleProp; + /** Whether to use modal padding style for the popover menu */ shouldUseModalPaddingStyle?: boolean; }; diff --git a/src/components/Icon/BankIcons/index.native.ts b/src/components/Icon/BankIcons/index.native.ts index aaf8456b27715..246eebb7357ca 100644 --- a/src/components/Icon/BankIcons/index.native.ts +++ b/src/components/Icon/BankIcons/index.native.ts @@ -1,7 +1,7 @@ -import GenericBank from '@assets/images/bank-icons/generic-bank-account.svg'; import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg'; import type {BankIconParams} from '@components/Icon/BankIconsUtils'; import {getBankIconAsset, getBankNameKey} from '@components/Icon/BankIconsUtils'; +import {Bank} from '@components/Icon/Expensicons'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type {BankIcon} from '@src/types/onyx/Bank'; @@ -11,7 +11,7 @@ import type {BankIcon} from '@src/types/onyx/Bank'; */ export default function getBankIcon({styles, bankName, isCard = false}: BankIconParams): BankIcon { const bankIcon: BankIcon = { - icon: isCard ? GenericBankCard : GenericBank, + icon: isCard ? GenericBankCard : Bank, }; if (bankName) { const bankNameKey = getBankNameKey(bankName.toLowerCase()); diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx index d2597b93746d5..efe19d75109ec 100644 --- a/src/components/KYCWall/BaseKYCWall.tsx +++ b/src/components/KYCWall/BaseKYCWall.tsx @@ -5,18 +5,20 @@ import type {EmitterSubscription, GestureResponderEvent, View} from 'react-nativ import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu'; import useOnyx from '@hooks/useOnyx'; import {openPersonalBankAccountSetupView} from '@libs/actions/BankAccounts'; -import {completePaymentOnboarding} from '@libs/actions/IOU'; +import {completePaymentOnboarding, savePreferredPaymentMethod} from '@libs/actions/IOU'; +import {moveIOUReportToPolicy, moveIOUReportToPolicyAndInviteSubmitter} from '@libs/actions/Report'; import getClickedTargetLocation from '@libs/getClickedTargetLocation'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import {hasExpensifyPaymentMethod} from '@libs/PaymentUtils'; -import {isExpenseReport as isExpenseReportReportUtils, isIOUReport} from '@libs/ReportUtils'; +import {getPolicyExpenseChat, isExpenseReport as isExpenseReportReportUtils, isIOUReport} from '@libs/ReportUtils'; import {kycWallRef} from '@userActions/PaymentMethods'; import {createWorkspaceFromIOUPayment} from '@userActions/Policy/Policy'; import {setKYCWallSource} from '@userActions/Wallet'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type {Policy} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import viewRef from '@src/types/utils/viewRef'; import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types'; @@ -100,16 +102,41 @@ function KYCWall({ }, [getAnchorPosition]); const selectPaymentMethod = useCallback( - (paymentMethod: PaymentMethod) => { - onSelectPaymentMethod(paymentMethod); + (paymentMethod?: PaymentMethod, policy?: Policy) => { + if (paymentMethod) { + onSelectPaymentMethod(paymentMethod); + } if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) { openPersonalBankAccountSetupView(); } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) { Navigation.navigate(addDebitCardRoute ?? ROUTES.HOME); - } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) { + } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT || policy) { if (iouReport && isIOUReport(iouReport)) { + if (policy) { + const policyExpenseChatReportID = getPolicyExpenseChat(iouReport.ownerAccountID, policy.id)?.reportID; + if (!policyExpenseChatReportID) { + const {policyExpenseChatReportID: newPolicyExpenseChatReportID} = moveIOUReportToPolicyAndInviteSubmitter(iouReport.reportID, policy.id) ?? {}; + savePreferredPaymentMethod(iouReport.policyID, policy.id, CONST.LAST_PAYMENT_METHOD.IOU); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(newPolicyExpenseChatReportID)); + } else { + moveIOUReportToPolicy(iouReport.reportID, policy.id, true); + savePreferredPaymentMethod(iouReport.policyID, policy.id, CONST.LAST_PAYMENT_METHOD.IOU); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(policyExpenseChatReportID)); + } + + if (policy?.achAccount) { + return; + } + // Navigate to the bank account set up flow for this specific policy + Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(policy.id)); + return; + } + const {policyID, workspaceChatReportID, reportPreviewReportActionID, adminsChatReportID} = createWorkspaceFromIOUPayment(iouReport) ?? {}; + if (policyID) { + savePreferredPaymentMethod(iouReport.policyID, policyID, CONST.LAST_PAYMENT_METHOD.IOU); + } completePaymentOnboarding(CONST.PAYMENT_SELECTED.BBA, adminsChatReportID, policyID); if (workspaceChatReportID) { Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(workspaceChatReportID, reportPreviewReportActionID)); @@ -117,7 +144,6 @@ function KYCWall({ // Navigate to the bank account set up flow for this specific policy Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(policyID)); - return; } Navigation.navigate(addBankAccountRoute); @@ -133,7 +159,7 @@ function KYCWall({ * */ const continueAction = useCallback( - (event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: PaymentMethodType) => { + (event?: GestureResponderEvent | KeyboardEvent, iouPaymentType?: PaymentMethodType, paymentMethod?: PaymentMethod, policy?: Policy) => { const currentSource = walletTerms?.source ?? source; /** @@ -170,6 +196,13 @@ function KYCWall({ const clickedElementLocation = getClickedTargetLocation(targetElement as HTMLDivElement); const position = getAnchorPosition(clickedElementLocation); + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + if (paymentMethod || policy) { + setShouldShowAddPaymentMenu(false); + selectPaymentMethod(paymentMethod, policy); + return; + } + setPositionAddPaymentMenu(position); setShouldShowAddPaymentMenu(true); diff --git a/src/components/KYCWall/types.ts b/src/components/KYCWall/types.ts index 5214e5ea15b95..71c557a859e61 100644 --- a/src/components/KYCWall/types.ts +++ b/src/components/KYCWall/types.ts @@ -4,7 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import type CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; -import type {Report} from '@src/types/onyx'; +import type {Policy, Report} from '@src/types/onyx'; import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage'; import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; @@ -63,6 +63,9 @@ type KYCWallProps = { /** Children to build the KYC */ children: (continueAction: (event: GestureResponderEvent | KeyboardEvent | undefined, method?: PaymentMethodType) => void, anchorRef: RefObject) => void; + + /** The policy used for payment */ + policy?: Policy; }; export type {AnchorPosition, KYCWallProps, PaymentMethod, DomRect, PaymentMethodType, Source}; diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 602cefbbb2467..8a57bec3a64be 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -320,7 +320,7 @@ function MoneyReportHeader({ payInvoice(type, chatReport, moneyRequestReport, payAsBusiness, methodID, paymentMethod); } else { startAnimation(); - payMoneyRequest(type, chatReport, moneyRequestReport, true); + payMoneyRequest(type, chatReport, moneyRequestReport, undefined, true); } }, [chatReport, isAnyTransactionOnHold, isDelegateAccessRestricted, showDelegateNoAccessModal, isInvoiceReport, moneyRequestReport, startAnimation], @@ -531,6 +531,7 @@ function MoneyReportHeader({ isPaidAnimationRunning={isPaidAnimationRunning} isApprovedAnimationRunning={isApprovedAnimationRunning} onAnimationFinish={stopAnimation} + formattedAmount={totalAmount} canIOUBePaid onlyShowPayElsewhere={onlyShowPayElsewhere} currency={moneyRequestReport?.currency} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index d0b725933b12a..8fc6597848e5a 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -312,13 +312,10 @@ function PopoverMenu({ } setFocusedIndex(menuIndex); }} - wrapperStyle={StyleUtils.getItemBackgroundColorStyle( - !!item.isSelected, - focusedIndex === menuIndex, - item.disabled ?? false, - theme.activeComponentBG, - theme.hoverComponentBG, - )} + wrapperStyle={[ + StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, focusedIndex === menuIndex, item.disabled ?? false, theme.activeComponentBG, theme.hoverComponentBG), + shouldUseScrollView && StyleUtils.getOptionMargin(menuIndex, currentMenuItems.length - 1), + ]} shouldRemoveHoverBackground={item.isSelected} titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // Spread other props dynamically diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index c803de7ea38e6..0a155fa4c41bf 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/src/components/ProcessMoneyReportHoldMenu.tsx @@ -77,7 +77,7 @@ function ProcessMoneyReportHoldMenu({ if (startAnimation) { startAnimation(); } - payMoneyRequest(paymentType, chatReport, moneyRequestReport, full); + payMoneyRequest(paymentType, chatReport, moneyRequestReport, undefined, full); } onClose(); }; diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index ad47dbc879297..0ea52920e6cb9 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -79,15 +79,22 @@ function mapTransactionItemToSelectedEntry(item: TransactionListItemType, report ]; } -function mapToTransactionItemWithAdditionalInfo(item: TransactionListItemType, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean) { - return {...item, shouldAnimateInHighlight, isSelected: selectedTransactions[item.keyForList]?.isSelected && canSelectMultiple}; +function mapToTransactionItemWithAdditionalInfo( + item: TransactionListItemType, + selectedTransactions: SelectedTransactions, + canSelectMultiple: boolean, + shouldAnimateInHighlight: boolean, + hash?: number, +) { + return {...item, shouldAnimateInHighlight, isSelected: selectedTransactions[item.keyForList]?.isSelected && canSelectMultiple, hash}; } -function mapToItemWithAdditionalInfo(item: SearchListItem, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean) { +function mapToItemWithAdditionalInfo(item: SearchListItem, selectedTransactions: SelectedTransactions, canSelectMultiple: boolean, shouldAnimateInHighlight: boolean, hash?: number) { if (isTaskListItemType(item)) { return { ...item, shouldAnimateInHighlight, + hash, }; } @@ -95,18 +102,22 @@ function mapToItemWithAdditionalInfo(item: SearchListItem, selectedTransactions: return { ...item, shouldAnimateInHighlight, + hash, }; } return isTransactionListItemType(item) - ? mapToTransactionItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight) + ? mapToTransactionItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight, hash) : { ...item, shouldAnimateInHighlight, - transactions: item.transactions?.map((transaction) => mapToTransactionItemWithAdditionalInfo(transaction, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight)), + transactions: item.transactions?.map((transaction) => + mapToTransactionItemWithAdditionalInfo(transaction, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight, hash), + ), isSelected: item?.transactions?.length > 0 && item.transactions?.filter((t) => !isTransactionPendingDelete(t)).every((transaction) => selectedTransactions[transaction.keyForList]?.isSelected && canSelectMultiple), + hash, }; } @@ -505,7 +516,7 @@ function Search({queryJSON, currentSearchResults, lastNonEmptySearchResults, onS // Determine if either the base key or any transaction key matches const shouldAnimateInHighlight = isBaseKeyMatch || isAnyTransactionMatch; - return mapToItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight); + return mapToItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight, hash); }); const hasErrors = Object.keys(searchResults?.errors ?? {}).length > 0 && !isOffline; diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts index 221ce73b6c5b9..6b514de95920d 100644 --- a/src/components/Search/types.ts +++ b/src/components/Search/types.ts @@ -1,4 +1,5 @@ import type {ValueOf} from 'type-fest'; +import type {PaymentMethodType} from '@components/KYCWall/types'; import type {ReportActionListItemType, TaskListItemType, TransactionGroupListItemType, TransactionListItemType} from '@components/SelectionList/types'; import type CONST from '@src/CONST'; import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; @@ -51,7 +52,7 @@ type SelectedReports = { type PaymentData = { reportID: string; amount: number; - paymentType: ValueOf; + paymentType: PaymentMethodType; }; type SortOrder = ValueOf; diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx index 5dd54e8e52b79..30d94f2d87088 100644 --- a/src/components/SelectionList/Search/ActionCell.tsx +++ b/src/components/SelectionList/Search/ActionCell.tsx @@ -1,16 +1,23 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; import Badge from '@components/Badge'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; +import type {PaymentMethodType} from '@components/KYCWall/types'; +import SettlementButton from '@components/SettlementButton'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import {payMoneyRequestOnSearch} from '@libs/actions/Search'; +import {getBankAccountRoute} from '@libs/ReportUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import type {SearchTransactionAction} from '@src/types/onyx/SearchResults'; const actionTranslationsMap: Record = { @@ -31,6 +38,10 @@ type ActionCellProps = { isChildListItem?: boolean; parentAction?: string; isLoading?: boolean; + policyID?: string; + reportID?: string; + hash?: number; + amount?: number; }; function ActionCell({ @@ -41,6 +52,10 @@ function ActionCell({ isChildListItem = false, parentAction = '', isLoading = false, + policyID = '', + reportID = '', + hash, + amount, }: ActionCellProps) { const {translate} = useLocalize(); const theme = useTheme(); @@ -48,8 +63,22 @@ function ActionCell({ const StyleUtils = useStyleUtils(); const {isOffline} = useNetwork(); + const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true}); const text = isChildListItem ? translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW]) : translate(actionTranslationsMap[action]); const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || (parentAction === CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID); + const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReport?.chatReportID}`, {canBeMissing: true}); + const bankAccountRoute = getBankAccountRoute(chatReport); + + const confirmPayment = useCallback( + (type: PaymentMethodType | undefined) => { + if (!type || !reportID || !hash || !amount) { + return; + } + + payMoneyRequestOnSearch(hash, [{amount, paymentType: type, reportID}]); + }, + [hash, amount, reportID], + ); if (!isChildListItem && ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE)) { return ( @@ -94,6 +123,23 @@ function ActionCell({ ) : null; } + if (action === CONST.SEARCH.ACTION_TYPES.PAY) { + return ( + + ); + } + return (