Merge pull request #52 from nada-deriv/fix-payment-method

nada/fix: list payment methods in create sell ad, paymentmethods in myprofile

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -23,8 +23,15 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
 
     const isAdvertiser = useIsAdvertiser();
     const { data: paymentMethods } = api.paymentMethods.useGet();
-    const { data: advertiserPaymentMethods } = api.advertiserPaymentMethods.useGet(isAdvertiser);
+    const { data: advertiserPaymentMethods, get } = api.advertiserPaymentMethods.useGet();
     const { data } = api.advertiser.useGetInfo() || {};
+
+    useEffect(() => {
+        if (isAdvertiser) {
+            get();
+        }
+    }, [isAdvertiser]);
+
     const { daily_buy = 0, daily_buy_limit = 0, daily_sell = 0, daily_sell_limit = 0 } = data || {};
 
     const exchangeRateRef = useRef<TExchangeRate | null>(null);

src/hooks/api/payment-method/p2p-advertiser-payment-methods/useAdvertiserPaymentMethods.ts

@@ -3,11 +3,8 @@ import { useP2PAdvertiserPaymentMethods } from '@deriv-com/api-hooks';
 
 /** A custom hook that returns the list of P2P Advertiser Payment Methods */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const useAdvertiserPaymentMethods = (_is_enabled = true) => {
-    const { data, ...rest } = useP2PAdvertiserPaymentMethods({
-        //TODO: Add the enabled parameter to the API after api-hooks is updated
-        // enabled: is_enabled,
-    });
+const useAdvertiserPaymentMethods = () => {
+    const { data, ...rest } = useP2PAdvertiserPaymentMethods();
 
     // Modify the response to add additional information
     const modified_data = useMemo(() => {

src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useReducer } from 'react';
+import { useCallback, useEffect, useReducer } from 'react';
 import { TAdvertiserPaymentMethod, TSelectedPaymentMethod } from 'types';
 import { PaymentMethodCard, PaymentMethodForm } from '@/components';
 import { api } from '@/hooks';
@@ -15,11 +15,17 @@ type TSellAdPaymentSelectionProps = {
 const SellAdPaymentSelection = ({ onSelectPaymentMethod, selectedPaymentMethodIds }: TSellAdPaymentSelectionProps) => {
     const { isMobile } = useDevice();
     const isAdvertiser = useIsAdvertiser();
-    const { data: advertiserPaymentMethods } = api.advertiserPaymentMethods.useGet(isAdvertiser);
+    const { data: advertiserPaymentMethods, get } = api.advertiserPaymentMethods.useGet();
     const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
 
     const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {});
 
+    useEffect(() => {
+        if (isAdvertiser) {
+            get();
+        }
+    }, [isAdvertiser]);
+
     const handleAddPaymentMethod = (selectedPaymentMethod?: TSelectedPaymentMethod) => {
         dispatch({
             payload: {

src/pages/my-profile/screens/PaymentMethods/PaymentMethods.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useReducer } from 'react';
+import { useCallback, useEffect, useReducer } from 'react';
 import { TSelectedPaymentMethod } from 'types';
 import { PaymentMethodForm } from '@/components';
 import { api } from '@/hooks';
@@ -15,10 +15,15 @@ import { PaymentMethodsList } from './PaymentMethodsList';
  * **/
 const PaymentMethods = () => {
     const isAdvertiser = useIsAdvertiser();
-    const { data: p2pAdvertiserPaymentMethods, isPending: isLoading } =
-        api.advertiserPaymentMethods.useGet(isAdvertiser);
+    const { data: p2pAdvertiserPaymentMethods, get, isPending: isLoading } = api.advertiserPaymentMethods.useGet();
     const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {});
 
+    useEffect(() => {
+        if (isAdvertiser) {
+            get();
+        }
+    }, [isAdvertiser]);
+
     const handleAddPaymentMethod = (selectedPaymentMethod?: TSelectedPaymentMethod) => {
         dispatch({
             payload: {