[FEQ] Jim/feq-1020/add use p2p payment methods hook (binary-com#12146)

* feat: add usepaymentmethods hook

* chore: remove exports

* chore: mark hook from hooks package as deprecated

* chore: add comment

* chore: update comment

* chore: update name based on reviews

packages/api/src/constants/index.ts

@@ -1,2 +1,3 @@
 export * from './countries';
 export * from './onfido';
+export * from './payment-method-icons';

packages/api/src/constants/payment-method-icons.ts

@@ -0,0 +1,5 @@
+export const PAYMENT_METHOD_ICONS = {
+    bank: 'IcCashierBankTransfer',
+    other: 'IcCashierOther',
+    ewallet: 'IcCashierEwallet',
+};

packages/api/src/hooks/index.ts

@@ -63,4 +63,3 @@ export { default as useVerifyEmail } from './useVerifyEmail';
 export { default as useWalletAccountsList } from './useWalletAccountsList';
 export { default as useWalletMigration } from './useWalletMigration';
 export { default as useTradingPlatformPasswordReset } from './useTradingPlatformPasswordReset';
-export * as P2PHooks from './p2p';

packages/api/src/hooks/p2p/useP2PPaymentMethods.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import useAuthorize from '../useAuthorize';
+import { PAYMENT_METHOD_ICONS } from '../../constants';
+import useQuery from '../../useQuery';
+
+/** A custom hook that returns a list of P2P available payment methods **/
+const useP2PPaymentMethods = () => {
+    const { isSuccess } = useAuthorize();
+    const { data, ...rest } = useQuery('p2p_payment_methods', { options: { enabled: isSuccess } });
+    // Modify the data to add additional information.
+    const modified_data = useMemo(() => {
+        const p2p_payment_methods = data?.p2p_payment_methods;
+
+        if (!p2p_payment_methods) return undefined;
+
+        return Object.keys(p2p_payment_methods).map(key => {
+            const payment_method = p2p_payment_methods[key];
+            const fields = Object.keys(payment_method.fields).map(field_key => payment_method.fields[field_key]);
+
+            return {
+                ...payment_method,
+                /** Payment method field definitions. */
+                fields,
+                /** Icon for each payment method based on the type */
+                icon: PAYMENT_METHOD_ICONS[payment_method.type],
+                /** Payment method id */
+                id: key,
+            };
+        });
+    }, [data]);
+
+    return {
+        data: modified_data,
+        ...rest,
+    };
+};
+
+export default useP2PPaymentMethods;

packages/hooks/src/useP2PPaymentMethods.ts

@@ -8,7 +8,9 @@ const type_to_icon_mapper = {
     ewallet: 'IcCashierEwallet',
 };
 
-/** A custom hook that return the list of P2P available payment methods */
+/**
+ * @deprecated This hook is deprecated. Please use the one from the `api` package instead.
+ * A custom hook that return the list of P2P available payment methods */
 const useP2PPaymentMethods = () => {
     const { client } = useStore();
     const { is_authorize } = client;