integrate usePaymentMethodState hook

src/hooks/usePaymentMethodState/index.ts

@@ -0,0 +1,28 @@
+import {useCallback, useState} from 'react';
+import type {PaymentMethodState} from './types';
+
+const initialState: PaymentMethodState = {
+    isSelectedPaymentMethodDefault: false,
+    selectedPaymentMethod: {},
+    formattedSelectedPaymentMethod: {
+        title: '',
+    },
+    methodID: '',
+    selectedPaymentMethodType: '',
+};
+
+function usePaymentMethodState() {
+    const [paymentMethod, setPaymentMethod] = useState<PaymentMethodState>(initialState);
+
+    const resetSelectedPaymentMethodData = useCallback(() => {
+        setPaymentMethod(initialState);
+    }, [setPaymentMethod]);
+
+    return {
+        paymentMethod,
+        setPaymentMethod,
+        resetSelectedPaymentMethodData,
+    };
+}
+
+export default usePaymentMethodState;

src/hooks/usePaymentMethodState/types.ts

@@ -0,0 +1,28 @@
+import type {ViewStyle} from 'react-native';
+import type {AccountData} from '@src/types/onyx';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type FormattedSelectedPaymentMethodIcon = {
+    icon: IconAsset;
+    iconHeight?: number;
+    iconWidth?: number;
+    iconStyles?: ViewStyle[];
+    iconSize?: number;
+};
+
+type FormattedSelectedPaymentMethod = {
+    title: string;
+    icon?: FormattedSelectedPaymentMethodIcon;
+    description?: string;
+    type?: string;
+};
+
+type PaymentMethodState = {
+    isSelectedPaymentMethodDefault: boolean;
+    selectedPaymentMethod: AccountData;
+    formattedSelectedPaymentMethod: FormattedSelectedPaymentMethod;
+    methodID: string | number;
+    selectedPaymentMethodType: string;
+};
+
+export type {FormattedSelectedPaymentMethodIcon, FormattedSelectedPaymentMethod, PaymentMethodState};

src/pages/settings/Wallet/PaymentMethodList.tsx

@@ -18,6 +18,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import type {FormattedSelectedPaymentMethodIcon} from '@hooks/usePaymentMethodState/types';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
@@ -35,7 +36,6 @@ import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type PaymentMethod from '@src/types/onyx/PaymentMethod';
 import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type {FormattedSelectedPaymentMethodIcon} from './WalletPage/types';
 
 type PaymentMethodListOnyxProps = {
     /** List of bank accounts */

src/pages/settings/Wallet/WalletPage/WalletPage.tsx

@@ -22,6 +22,8 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import usePaymentMethodState from '@hooks/usePaymentMethodState';
+import type {FormattedSelectedPaymentMethod, FormattedSelectedPaymentMethodIcon} from '@hooks/usePaymentMethodState/types';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -39,7 +41,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {AccountData} from '@src/types/onyx';
-import type {FormattedSelectedPaymentMethod, FormattedSelectedPaymentMethodIcon, PaymentMethodState, WalletPageOnyxProps, WalletPageProps} from './types';
+import type {WalletPageOnyxProps, WalletPageProps} from './types';
 
 function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadingPaymentMethods = true, shouldListenForResize = false, userWallet, walletTerms = {}}: WalletPageProps) {
     const theme = useTheme();
@@ -48,19 +50,10 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
     const network = useNetwork();
     const {windowWidth} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {paymentMethod, setPaymentMethod, resetSelectedPaymentMethodData} = usePaymentMethodState();
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
     const [shouldShowDefaultDeleteMenu, setShouldShowDefaultDeleteMenu] = useState(false);
     const [shouldShowLoadingSpinner, setShouldShowLoadingSpinner] = useState(false);
-    const [paymentMethod, setPaymentMethod] = useState<PaymentMethodState>({
-        isSelectedPaymentMethodDefault: false,
-        selectedPaymentMethod: {},
-        formattedSelectedPaymentMethod: {
-            title: '',
-        },
-        methodID: '',
-        selectedPaymentMethodType: '',
-    });
-
     const addPaymentMethodAnchorRef = useRef(null);
     const paymentMethodButtonRef = useRef<HTMLDivElement | null>(null);
     const [anchorPosition, setAnchorPosition] = useState({
@@ -118,19 +111,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
         }
     }, [paymentMethod.selectedPaymentMethod.bankAccountID, paymentMethod.selectedPaymentMethod.fundID, paymentMethod.selectedPaymentMethodType]);
 
-    const resetSelectedPaymentMethodData = useCallback(() => {
-        // Reset to same values as in the constructor
-        setPaymentMethod({
-            isSelectedPaymentMethodDefault: false,
-            selectedPaymentMethod: {},
-            formattedSelectedPaymentMethod: {
-                title: '',
-            },
-            methodID: '',
-            selectedPaymentMethodType: '',
-        });
-    }, [setPaymentMethod]);
-
     /**
      * Display the delete/default menu, or the add payment method menu
      */

src/pages/settings/Wallet/WalletPage/types.ts

@@ -1,7 +1,5 @@
-import type {ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import type {AccountData, BankAccountList, CardList, FundList, UserWallet, WalletTerms, WalletTransfer} from '@src/types/onyx';
-import type IconAsset from '@src/types/utils/IconAsset';
+import type {BankAccountList, CardList, FundList, UserWallet, WalletTerms, WalletTransfer} from '@src/types/onyx';
 
 type WalletPageOnyxProps = {
     /** Wallet balance transfer props */
@@ -30,27 +28,4 @@ type WalletPageProps = WalletPageOnyxProps & {
     shouldListenForResize?: boolean;
 };
 
-type FormattedSelectedPaymentMethodIcon = {
-    icon: IconAsset;
-    iconHeight?: number;
-    iconWidth?: number;
-    iconStyles?: ViewStyle[];
-    iconSize?: number;
-};
-
-type FormattedSelectedPaymentMethod = {
-    title: string;
-    icon?: FormattedSelectedPaymentMethodIcon;
-    description?: string;
-    type?: string;
-};
-
-type PaymentMethodState = {
-    isSelectedPaymentMethodDefault: boolean;
-    selectedPaymentMethod: AccountData;
-    formattedSelectedPaymentMethod: FormattedSelectedPaymentMethod;
-    methodID: string | number;
-    selectedPaymentMethodType: string;
-};
-
-export type {WalletPageOnyxProps, WalletPageProps, FormattedSelectedPaymentMethodIcon, FormattedSelectedPaymentMethod, PaymentMethodState};
+export type {WalletPageOnyxProps, WalletPageProps};

src/pages/workspace/invoices/WorkspaceInvoiceVBASection.tsx

@@ -10,13 +10,14 @@ import MenuItem from '@components/MenuItem';
 import Popover from '@components/Popover';
 import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
+import usePaymentMethodState from '@hooks/usePaymentMethodState';
+import type {FormattedSelectedPaymentMethod, FormattedSelectedPaymentMethodIcon} from '@hooks/usePaymentMethodState/types';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
-import type {FormattedSelectedPaymentMethod, FormattedSelectedPaymentMethodIcon, PaymentMethodState} from '@pages/settings/Wallet/WalletPage/types';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
@@ -37,20 +38,12 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
     const {translate} = useLocalize();
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const {paymentMethod, setPaymentMethod, resetSelectedPaymentMethodData} = usePaymentMethodState();
     const addPaymentMethodAnchorRef = useRef(null);
     const paymentMethodButtonRef = useRef<HTMLDivElement | null>(null);
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
     const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);
     const [shouldShowDefaultDeleteMenu, setShouldShowDefaultDeleteMenu] = useState(false);
-    const [paymentMethod, setPaymentMethod] = useState<PaymentMethodState>({
-        isSelectedPaymentMethodDefault: false,
-        selectedPaymentMethod: {},
-        formattedSelectedPaymentMethod: {
-            title: '',
-        },
-        methodID: '',
-        selectedPaymentMethodType: '',
-    });
     const [anchorPosition, setAnchorPosition] = useState({
         anchorPositionHorizontal: 0,
         anchorPositionVertical: 0,
@@ -167,19 +160,6 @@ function WorkspaceInvoiceVBASection({policyID}: WorkspaceInvoiceVBASectionProps)
         }
     }, [paymentMethod.methodID, paymentMethod.selectedPaymentMethod.bankAccountID, paymentMethod.selectedPaymentMethodType, bankAccountList, styles]);
 
-    const resetSelectedPaymentMethodData = useCallback(() => {
-        // Reset to same values as in the constructor
-        setPaymentMethod({
-            isSelectedPaymentMethodDefault: false,
-            selectedPaymentMethod: {},
-            formattedSelectedPaymentMethod: {
-                title: '',
-            },
-            methodID: '',
-            selectedPaymentMethodType: '',
-        });
-    }, [setPaymentMethod]);
-
     /**
      * Navigate to the appropriate payment type addition screen
      */