From e47831e69dc01718b0c6c61b81b38f8f9c059edf Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Date: Tue, 12 Dec 2023 10:15:19 +0800
Subject: [PATCH] [FEQ] Jim/feq-1020/add use p2p payment methods hook (#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 +
 .../api/src/constants/payment-method-icons.ts |  5 +++
 packages/api/src/hooks/index.ts               |  1 -
 packages/api/src/hooks/p2p/index.ts           |  1 -
 .../api/src/hooks/p2p/useP2PPaymentMethods.ts | 38 +++++++++++++++++++
 packages/hooks/src/useP2PPaymentMethods.ts    |  4 +-
 6 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 packages/api/src/constants/payment-method-icons.ts
 delete mode 100644 packages/api/src/hooks/p2p/index.ts
 create mode 100644 packages/api/src/hooks/p2p/useP2PPaymentMethods.ts

diff --git a/packages/api/src/constants/index.ts b/packages/api/src/constants/index.ts
index 4fb2e4a827f4..b8eec4fcaadf 100644
--- a/packages/api/src/constants/index.ts
+++ b/packages/api/src/constants/index.ts
@@ -1,2 +1,3 @@
 export * from './countries';
 export * from './onfido';
+export * from './payment-method-icons';
diff --git a/packages/api/src/constants/payment-method-icons.ts b/packages/api/src/constants/payment-method-icons.ts
new file mode 100644
index 000000000000..039ca45c975f
--- /dev/null
+++ b/packages/api/src/constants/payment-method-icons.ts
@@ -0,0 +1,5 @@
+export const PAYMENT_METHOD_ICONS = {
+    bank: 'IcCashierBankTransfer',
+    other: 'IcCashierOther',
+    ewallet: 'IcCashierEwallet',
+};
diff --git a/packages/api/src/hooks/index.ts b/packages/api/src/hooks/index.ts
index 82d0fdcf991b..105a2ee26eac 100644
--- a/packages/api/src/hooks/index.ts
+++ b/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';
diff --git a/packages/api/src/hooks/p2p/index.ts b/packages/api/src/hooks/p2p/index.ts
deleted file mode 100644
index e62d8100ca03..000000000000
--- a/packages/api/src/hooks/p2p/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as useP2PAdvertList } from './useP2PAdvertList';
diff --git a/packages/api/src/hooks/p2p/useP2PPaymentMethods.ts b/packages/api/src/hooks/p2p/useP2PPaymentMethods.ts
new file mode 100644
index 000000000000..15e0d4e0236a
--- /dev/null
+++ b/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;
diff --git a/packages/hooks/src/useP2PPaymentMethods.ts b/packages/hooks/src/useP2PPaymentMethods.ts
index 3e0ebd5115fc..9161566dfad0 100644
--- a/packages/hooks/src/useP2PPaymentMethods.ts
+++ b/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;