fix: fix type issues in hooks

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:dev": "tsc && vite build",
     "fix": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\" --fix",
     "preview": "vite preview",
     "test:lint": "prettier --log-level silent --write . && eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
@@ -14,7 +15,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@deriv-com/api-hooks": "^0.1.13",
+    "@deriv-com/api-hooks": "^0.1.15",
     "@deriv-com/ui": "latest",
     "@deriv-com/utils": "latest",
     "@deriv/deriv-api": "^1.0.15",

src/__mocks__/mock-data.ts

@@ -0,0 +1,95 @@
+import { TAdvertType, TType01 } from 'types';
+
+export const mockAdvertValues = {
+    account_currency: 'USD',
+    advertiser_details: {
+        completed_orders_count: 0,
+        id: '96',
+        is_blocked: 0 as TType01,
+        is_favourite: 0 as TType01,
+        is_online: 1 as TType01,
+        is_recommended: 0 as TType01,
+        last_online_time: 1714031576,
+        loginid: 'CR90000533',
+        name: 'client CR90000533',
+        rating_average: null,
+        rating_count: 0,
+        recommended_average: null,
+        recommended_count: null,
+        total_completion_rate: null,
+        has_not_been_recommended: true,
+    },
+    block_trade: 0 as TType01,
+    counterparty_type: 'buy' as 'buy' | 'sell',
+    country: 'id',
+    created_time: 1714017654,
+    description: 'Created by script. Please call me 02203400',
+    effective_rate: 16183.8,
+    effective_rate_display: '16183.80',
+    eligibility_status: ['join_date' as 'join_date' | 'country' | 'completion_rate' | 'rating_average'],
+    eligible_countries: ['af', 'al'],
+    id: '236',
+    is_active: true,
+    is_buy: true,
+    is_sell: false,
+    is_block_trade: false,
+    is_deleted: false,
+    active_orders: 2,
+    amount: 10,
+    amount_display: '10',
+    contact_info: '02203400',
+    days_until_archive: 4,
+    is_eligible: 0 as TType01,
+    is_visible: true,
+    local_currency: 'IDR',
+    max_order_amount_limit: 50,
+    max_order_amount_limit_display: '50.00',
+    min_join_days: 15,
+    min_order_amount_limit: 1,
+    min_order_amount_limit_display: '1.00',
+    order_expiry_period: 3600,
+    payment_method: '',
+    payment_method_names: ['Alipay'],
+    price: 16183.8,
+    price_display: '16183.80',
+    rate: -0.1,
+    rate_display: '-0.10',
+    rate_type: 'float' as 'float' | 'fixed',
+    type: 'sell' as 'sell' | 'buy',
+    is_floating: true,
+    deleted: 1 as const,
+    max_order_amount: 50,
+    max_order_amount_display: '50.00',
+    min_completion_rate: 0,
+    min_order_amount: 5,
+    min_order_amount_display: '5.00',
+    min_rating: 0,
+    payment_info: 'Your bank details',
+    payment_method_details: {
+        '1': {
+            display_name: 'Alipay',
+            fields: {
+                account: {
+                    display_name: 'Alipay ID',
+                    required: 1,
+                    type: 'text' as 'text' | 'memo',
+                    value: '12345',
+                },
+                instructions: {
+                    display_name: 'Instructions',
+                    required: 0,
+                    type: 'memo' as 'text' | 'memo',
+                    value: 'Alipay instructions',
+                },
+            },
+            is_enabled: 1 as TType01,
+            method: 'alipay',
+            type: 'ewallet' as 'ewallet' | 'other' | 'bank',
+            used_by_adverts: ['1'],
+            used_by_orders: ['1'],
+        },
+    },
+    remaining_amount: 10,
+    remaining_amount_display: '10',
+    visibility_status: ['advertiser_temp_ban'] as TAdvertType['visibility_status'],
+};

src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx

@@ -1,7 +1,10 @@
+import { TWalletType } from 'types';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BuySellPaymentSection from '../BuySellPaymentSection';
 
+type TType = 'text' | 'memo';
+
 const mockProps = {
     availablePaymentMethods: [],
     onSelectPaymentMethodCard: jest.fn(),
@@ -14,22 +17,22 @@ const mockAvailablePaymentMethods = {
         account: {
             display_name: 'Account ID / phone number / email',
             required: 0,
-            type: 'text',
+            type: 'text' as TType,
         },
         instructions: {
             display_name: 'Instructions',
             required: 0,
-            type: 'memo',
+            type: 'memo' as TType,
         },
         name: {
             display_name: 'Payment method name',
             required: 1,
-            type: 'text',
+            type: 'text' as TType,
         },
     },
     id: '67',
     isAvailable: true,
-    type: 'other',
+    type: 'other' as TWalletType,
 };
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),

src/components/BuySellForm/__tests__/BuySellForm.spec.tsx

@@ -1,3 +1,4 @@
+import { mockAdvertValues } from '@/__mocks__/mock-data';
 import { floatingPointValidator } from '@/utils';
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
@@ -56,33 +57,34 @@ jest.mock('@/utils', () => ({
 }));
 const mockFloatingPointValidator = floatingPointValidator as jest.Mock;
 
-const mockAdvertValues = {
-    account_currency: 'USD',
-    advertiser_details: {
-        name: 'name',
-        rating_average: 5,
-        rating_count: 5,
-    },
-    description: 'description',
-    id: 'id',
-    is_buy: true,
-    local_currency: 'USD',
-    max_order_amount_limit_display: '1000',
-    min_order_amount_limit: 1,
-    min_order_amount_limit_display: '1',
-    order_expiry_period: 30,
-    payment_method_names: ['alipay'],
-    rate: 1,
-    rate_type: 'fixed',
-    type: 'sell',
-};
+type TNumber = 0 | 1;
+
 const mockProps = {
     advert: mockAdvertValues,
     advertiserBuyLimit: 1000,
     advertiserPaymentMethods: [
         {
             display_name: 'alipay',
             id: '1',
+            fields: {
+                account: {
+                    display_name: 'Alipay ID',
+                    required: 1,
+                    type: 'text' as 'text' | 'memo',
+                    value: '12345',
+                },
+                instructions: {
+                    display_name: 'Instructions',
+                    required: 0,
+                    type: 'memo' as 'text' | 'memo',
+                    value: 'Alipay instructions',
+                },
+            },
+            is_enabled: 1 as TNumber,
+            method: 'alipay',
+            type: 'ewallet' as 'ewallet' | 'other' | 'bank',
+            used_by_adverts: ['1'],
+            used_by_orders: ['1'],
         },
     ],
     advertiserSellLimit: 1000,
@@ -94,7 +96,22 @@ const mockProps = {
     paymentMethods: [
         {
             display_name: 'alipay',
-            type: 'online',
+            id: '1',
+            fields: {
+                account: {
+                    display_name: 'Alipay ID',
+                    required: 1,
+                    type: 'text' as 'text' | 'memo',
+                    value: '12345',
+                },
+                instructions: {
+                    display_name: 'Instructions',
+                    required: 0,
+                    type: 'memo' as 'text' | 'memo',
+                    value: 'Alipay instructions',
+                },
+            },
+            type: 'ewallet' as 'ewallet' | 'other' | 'bank',
         },
     ],
 };

src/components/Modals/OrderDetailsComplainModal/OrderDetailsComplainModal.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { THooks } from 'types';
 import { FullPageMobileWrapper } from '@/components/FullPageMobileWrapper';
 import { api } from '@/hooks';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
@@ -18,6 +19,7 @@ type TComplainFooterProps = {
     onRequestClose: () => void;
 };
 
+type TDisputeReason = Parameters<THooks.OrderDispute.Dispute>[0]['dispute_reason'];
 const ComplainExplanation = () => {
     const { isMobile } = useDevice();
     const textSize = isMobile ? 'sm' : 'xs';
@@ -73,7 +75,7 @@ const OrderDetailsComplainModal = ({
 
     const disputeOrderRequest = () => {
         mutate({
-            dispute_reason: disputeReason,
+            dispute_reason: disputeReason as TDisputeReason,
             id,
         });
     };

src/components/PaymentMethodCard/__tests__/PaymentMethodCard.spec.tsx

@@ -1,3 +1,4 @@
+import { TWalletType } from 'types';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PaymentMethodCard from '../PaymentMethodCard';
@@ -12,9 +13,9 @@ const mockProps = {
     paymentMethod: {
         fields: {},
         id: 'test',
-        is_enabled: 0,
+        is_enabled: 0 as 0 | 1,
         method: '',
-        type: 'other',
+        type: 'other' as TWalletType,
         used_by_adverts: null,
         used_by_orders: null,
     },

src/hooks/__tests__/usePoiPoaStatus.spec.tsx

@@ -45,7 +45,7 @@ describe('usePoiPoaStatus', () => {
                     identity: {
                         status: 'verified',
                     },
-                    needs_verification: false,
+                    needs_verification: [],
                 },
                 p2p_poa_required: 0,
             },

src/hooks/api/advertiser/p2p-advertiser/useAdvertiserCreate.ts

@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from 'react';
 import { useP2PAdvertiserCreate } from '@deriv-com/api-hooks';
+import useInvalidateQuery from '../../useInvalidateQuery';
 
-//TODO: fix the file after updating with api-hooks
-type TCreateAdvertisePayload = string;
+type TCreateAdvertiserPayload = Parameters<ReturnType<typeof useP2PAdvertiserCreate>['mutate']>[0];
 
 /** A custom hook that creates a P2P advertiser. This can only be used when the user is authorized.
  *
@@ -16,22 +16,19 @@ type TCreateAdvertisePayload = string;
  *
 */
 const useAdvertiserCreate = () => {
-    // const invalidate = useInvalidateQuery();
+    const invalidate = useInvalidateQuery();
     const {
         data,
-        // mutate: _mutate,
+        mutate: _mutate,
         ...rest
     } = useP2PAdvertiserCreate({
-        // onSuccess: () => {
-        //     invalidate('p2p_advertiser_info');
-        // },
+        onSuccess: () => {
+            invalidate('p2p_advertiser_info');
+        },
     });
 
-    // eslint-disable-next-line no-underscore-dangle, no-console, react-hooks/exhaustive-deps
-    const _mutate = (payload: TCreateAdvertisePayload) => console.log(payload);
-
     const mutate = useCallback(
-        (payload: TCreateAdvertisePayload) => {
+        (payload: TCreateAdvertiserPayload) => {
             _mutate(payload);
         },
         [_mutate]

src/hooks/api/counterparty/p2p-advertiser-relations/useAdvertiserRelations.ts

@@ -1,10 +1,10 @@
-import { useP2pAdvertiserRelations } from '@deriv-com/api-hooks';
+import { useP2PAdvertiserRelations } from '@deriv-com/api-hooks';
 import useInvalidateQuery from '../../useInvalidateQuery';
 
 /** This hook returns favourite and blocked advertisers and the mutation function to update the block list of the current user. */
 const useAdvertiserRelations = () => {
     const invalidate = useInvalidateQuery();
-    const { data, mutate, ...mutate_rest } = useP2pAdvertiserRelations({
+    const { data, mutate, ...mutate_rest } = useP2PAdvertiserRelations({
         onSuccess: () => {
             invalidate('p2p_advertiser_relations');
             invalidate('p2p_advertiser_list');

src/hooks/api/counterparty/p2p-advertiser-relations/useAdvertiserRelationsAddBlocked.ts

@@ -5,7 +5,7 @@ import useAdvertiserRelations from './useAdvertiserRelations';
 const useAdvertiserRelationsAddBlocked = () => {
     const { mutate, data, ...rest } = useAdvertiserRelations();
 
-    const addBlockedAdvertiser = useCallback((id: number[]) => mutate({ payload: { add_blocked: id } }), [mutate]);
+    const addBlockedAdvertiser = useCallback((id: number[]) => mutate({ add_blocked: id }), [mutate]);
 
     return {
         data,

src/hooks/api/counterparty/p2p-advertiser-relations/useAdvertiserRelationsRemoveBlocked.ts

@@ -5,10 +5,7 @@ import useAdvertiserRelations from './useAdvertiserRelations';
 const useAdvertiserRelationsRemoveBlocked = () => {
     const { mutate, data, ...rest } = useAdvertiserRelations();
 
-    const removeBlockedAdvertiser = useCallback(
-        (id: number[]) => mutate({ payload: { remove_blocked: id } }),
-        [mutate]
-    );
+    const removeBlockedAdvertiser = useCallback((id: number[]) => mutate({ remove_blocked: id }), [mutate]);
 
     return {
         data,