Merge pull request #31 from nada-deriv/errors

fix: rest of the errors fixed

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -1,7 +1,7 @@
 import { Fragment, memo, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useHistory } from 'react-router-dom';
-import { TAdvertsTableRowRenderer, TCurrency, TExchangeRate } from 'types';
+import { TAdvertiserPaymentMethod, TAdvertsTableRowRenderer, TCurrency, TExchangeRate, TPaymentMethod } from 'types';
 import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components';
 import { ADVERTISER_URL, BUY_SELL } from '@/constants';
 import { api } from '@/hooks';
@@ -180,14 +180,14 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                 <BuySellForm
                     advert={props}
                     advertiserBuyLimit={Number(daily_buy_limit) - Number(daily_buy)}
-                    advertiserPaymentMethods={advertiserPaymentMethods}
+                    advertiserPaymentMethods={advertiserPaymentMethods as TAdvertiserPaymentMethod[]}
                     advertiserSellLimit={Number(daily_sell_limit) - Number(daily_sell)}
                     balanceAvailable={data?.balance_available ?? 0}
                     displayEffectiveRate={displayEffectiveRate}
                     effectiveRate={effectiveRate}
                     isModalOpen={isModalOpen}
                     onRequestClose={() => setIsModalOpen(false)}
-                    paymentMethods={paymentMethods}
+                    paymentMethods={paymentMethods as TPaymentMethod[]}
                 />
             )}
         </div>

src/components/BuySellForm/BuySellForm.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react';
 import { Control, Controller, FieldValues, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
-import { TAdvertType, TCurrency, THooks } from 'types';
+import { TAdvertType, TCurrency, THooks, TPaymentMethod } from 'types';
 import { BUY_SELL, ORDERS_URL, RATE_TYPE, VALID_SYMBOLS_PATTERN } from '@/constants';
 import { api } from '@/hooks';
 import {
@@ -98,7 +98,7 @@ const BuySellForm = ({
     const shouldDisableField =
         !isBuy &&
         (parseFloat(balanceAvailable.toString()) === 0 ||
-            parseFloat(balanceAvailable.toString()) < min_order_amount_limit);
+            parseFloat(balanceAvailable.toString()) < (min_order_amount_limit ?? 1));
 
     const {
         control,
@@ -118,7 +118,7 @@ const BuySellForm = ({
         //TODO: error handling after implementation of exchange rate
         const rateValue = rate_type === RATE_TYPE.FIXED ? null : effectiveRate;
         const payload: TPayload = {
-            advert_id: id,
+            advert_id: id as string,
             amount: Number(getValues('amount')),
         };
         if (rateValue) {
@@ -138,7 +138,7 @@ const BuySellForm = ({
     };
 
     const calculatedRate = removeTrailingZeros(roundOffDecimal(effectiveRate, setDecimalPlaces(effectiveRate, 6)));
-    const initialAmount = removeTrailingZeros((min_order_amount_limit * Number(calculatedRate)).toString());
+    const initialAmount = removeTrailingZeros((min_order_amount_limit ?? 1 * Number(calculatedRate)).toString());
 
     const onSelectPaymentMethodCard = (paymentMethodId: number) => {
         if (selectedPaymentMethods.includes(paymentMethodId)) {
@@ -158,7 +158,7 @@ const BuySellForm = ({
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
             <BuySellFormDisplayWrapper
-                accountCurrency={account_currency}
+                accountCurrency={account_currency as TCurrency}
                 isBuy={isBuy}
                 isModalOpen={isModalOpen}
                 isValid={isValid}
@@ -176,26 +176,26 @@ const BuySellForm = ({
                     </div>
                 )}
                 <BuySellData
-                    accountCurrency={account_currency}
+                    accountCurrency={account_currency as TCurrency}
                     expiryPeriod={order_expiry_period ?? 3600}
                     instructions={description ?? '-'}
                     isBuy={isBuy}
-                    localCurrency={local_currency}
-                    name={advertiser_details?.name}
+                    localCurrency={local_currency as TCurrency}
+                    name={advertiser_details?.name ?? ''}
                     paymentMethodNames={payment_method_names}
                     paymentMethods={paymentMethods}
                     rate={displayEffectiveRate}
                 />
                 <LightDivider />
-                {isBuy && payment_method_names?.length > 0 && (
+                {isBuy && payment_method_names && payment_method_names?.length > 0 && (
                     <BuySellPaymentSection
-                        availablePaymentMethods={availablePaymentMethods}
+                        availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
                         onSelectPaymentMethodCard={onSelectPaymentMethodCard}
                         selectedPaymentMethodIds={selectedPaymentMethods}
                     />
                 )}
                 <BuySellAmount
-                    accountCurrency={account_currency}
+                    accountCurrency={account_currency as TCurrency}
                     amount={initialAmount}
                     calculatedRate={calculatedRate}
                     control={control as unknown as Control<FieldValues>}
@@ -206,9 +206,9 @@ const BuySellForm = ({
                         isBuy,
                         advertiserBuyLimit,
                         advertiserSellLimit,
-                        max_order_amount_limit_display
+                        max_order_amount_limit_display ?? '0'
                     )}
-                    minLimit={min_order_amount_limit_display}
+                    minLimit={min_order_amount_limit_display ?? '0'}
                 />
                 {isBuy && !payment_method_names?.length && (
                     <Controller

src/components/PaymentMethodCard/PaymentMethodCard.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import clsx from 'clsx';
-import { TPaymentMethod } from 'types';
+import { TAdvertiserPaymentMethod, TPaymentMethod } from 'types';
 import { LabelPairedPlusLgBoldIcon } from '@deriv/quill-icons';
 import { Button, Text } from '@deriv-com/ui';
 import { PaymentMethodCardBody } from './PaymentMethodCardBody';
@@ -15,7 +15,7 @@ type TPaymentMethodCardProps = HTMLAttributes<HTMLDivElement> & {
     onDeletePaymentMethod?: () => void;
     onEditPaymentMethod?: () => void;
     onSelectPaymentMethodCard?: (paymentMethodId: number) => void;
-    paymentMethod: TPaymentMethod & { isAvailable?: boolean };
+    paymentMethod: (TAdvertiserPaymentMethod | TPaymentMethod) & { isAvailable?: boolean };
     selectedPaymentMethodIds?: number[];
     shouldShowPaymentMethodDisplayName?: boolean;
 };

src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx

@@ -1,9 +1,9 @@
-import { THooks } from 'types';
+import { TAccount, TBankName, THooks, TName } from 'types';
 import { Text } from '@deriv-com/ui';
 import './PaymentMethodCardBody.scss';
 
 type TPaymentMethodCardBodyProps = {
-    paymentMethod: THooks.AdvertiserPaymentMethods.Get[number];
+    paymentMethod: THooks.AdvertiserPaymentMethods.Get[number] | THooks.PaymentMethods.Get[number];
     shouldShowPaymentMethodDisplayName?: boolean;
 };
 
@@ -17,8 +17,10 @@ const PaymentMethodCardBody = ({
     return (
         <div className='payment-method-card__body'>
             {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text size='xs'>{displayName}</Text>}
-            <Text size='xs'>{paymentMethod.fields?.bank_name?.value ?? paymentMethod.fields?.name?.value}</Text>
-            <Text size='xs'>{paymentMethod.fields?.account?.value}</Text>
+            <Text size='xs'>
+                {(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value}
+            </Text>
+            <Text size='xs'>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
         </div>
     );
 };

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

@@ -11,6 +11,7 @@ const mockProps = {
     onEditPaymentMethod: jest.fn(),
     onSelectPaymentMethodCard: jest.fn(),
     paymentMethod: {
+        display_name: 'bank',
         fields: {},
         id: 'test',
         is_enabled: 0 as 0 | 1,

src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { TFormState, THooks, TSelectedPaymentMethod } from 'types';
+import { TFormState, THooks, TPaymentMethod, TSelectedPaymentMethod } from 'types';
 import { Dropdown } from '@/components';
 import { Button, Input, Text } from '@deriv-com/ui';
 import CloseCircle from '../../../public/ic-close-circle.svg?react';
@@ -45,6 +45,13 @@ const PaymentMethodFormAutocomplete = ({
             />
         );
     }
+
+    const getValue = () => {
+        if (selectedPaymentMethod) {
+            return (selectedPaymentMethod as TPaymentMethod)?.display_name;
+        }
+        return '';
+    };
     return (
         <>
             <Dropdown
@@ -62,7 +69,7 @@ const PaymentMethodFormAutocomplete = ({
                     }
                 }}
                 // TODO: Remember to translate this
-                value={selectedPaymentMethod?.display_name ?? ''}
+                value={getValue()}
                 variant='comboBox'
             />
             <div className='mt-[0.2rem] ml-[1.6rem]'>

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

@@ -5,8 +5,9 @@ type THookPayload = Parameters<typeof useP2pAdvertiserList>[number];
 
 //TODO: fix the types when updated from api-hooks
 type ExtendedPayload = THookPayload & {
-    is_blocked?: boolean;
+    is_blocked?: number;
     advertiser_name?: string;
+    trade_partners: number;
 };
 /**
  * This custom hook returns the available advertisers who have had or currently have trades with the current advertiser.

src/hooks/custom-hooks/useSendbird.ts

@@ -119,7 +119,7 @@ const useSendbird = (orderId: string) => {
             sendbirdApiRef.current.groupChannel.addGroupChannelHandler(
                 'P2P_SENDBIRD_GROUP_CHANNEL_HANDLER',
                 new GroupChannelHandler({
-                    onMessageReceived: (messageReceivedChannel: BaseChannel, _receivedMessage: BaseMessage) =>
+                    onMessageReceived: (_messageReceivedChannel: BaseChannel, _receivedMessage: BaseMessage) =>
                         setReceivedMessage(_receivedMessage),
                 })
             );

src/pages/buy-sell/components/SortDropdown/SortDropdown.tsx

@@ -34,7 +34,7 @@ const SortDropdown = ({ list, onSelect, setIsFilterModalOpen, value }: TSortDrop
                 label='Sort by'
                 list={list as unknown as MutableOption[]}
                 name='Sort by'
-                onSelect={(value: string) => onSelect(value as TSortByValues)}
+                onSelect={value => onSelect(value as TSortByValues)}
                 value={value}
             />
         </div>

src/pages/my-ads/components/AdPaymentDetailsSection/__tests__/AdPaymentDetailsSection.spec.tsx

@@ -68,8 +68,8 @@ jest.mock('../../OrderTimeSelection', () => ({
 }));
 const mockProps = {
     currency: 'USD' as TCurrency,
-    getCurrentStep: () => jest.fn(),
-    getTotalSteps: () => jest.fn(),
+    getCurrentStep: jest.fn(() => 1),
+    getTotalSteps: jest.fn(() => 4),
     goToNextStep: jest.fn(),
     goToPreviousStep: jest.fn(),
     localCurrency: 'IDR' as TCurrency,

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

@@ -12,12 +12,12 @@ import { AdFormTextArea } from '../AdFormTextArea';
 import './AdTypeSection.scss';
 
 type TAdTypeSectionProps = {
-    currency: string;
+    currency: TCurrency;
     getCurrentStep: () => number;
     getTotalSteps: () => number;
     goToNextStep: MouseEventHandler<HTMLButtonElement>;
     goToPreviousStep: () => void;
-    localCurrency?: string;
+    localCurrency?: TCurrency;
     onCancel: () => void;
     rateType: string;
 };

src/pages/my-ads/components/AdTypeSection/__tests__/AdTypeSection.spec.tsx

@@ -1,3 +1,4 @@
+import { TCurrency } from 'types';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import AdTypeSection from '../AdTypeSection';
@@ -50,12 +51,12 @@ jest.mock('@/hooks', () => ({
 }));
 
 const mockProps = {
-    currency: 'usd',
+    currency: 'usd' as TCurrency,
     getCurrentStep: jest.fn(() => 1),
     getTotalSteps: jest.fn(),
     goToNextStep: jest.fn(),
     goToPreviousStep: jest.fn(),
-    localCurrency: 'usd',
+    localCurrency: 'usd' as TCurrency,
     onCancel: jest.fn(),
     rateType: 'float',
 };

src/pages/my-ads/components/AdWizard/__tests__/AdWizard.spec.tsx

@@ -1,3 +1,4 @@
+import { TCurrency } from 'types';
 import { useDevice } from '@deriv-com/ui';
 import { render, screen } from '@testing-library/react';
 import AdWizard from '../AdWizard';
@@ -25,10 +26,12 @@ jest.mock('../../AdProgressBar', () => ({
 }));
 
 const mockProps = {
-    currency: 'usd',
-    localCurrency: 'usd',
+    currency: 'usd' as TCurrency,
+    localCurrency: 'usd' as TCurrency,
     rateType: 'float',
     steps: [{ header: { title: 'step 1' } }, { header: { title: 'step 2' } }, { header: { title: 'step 3' } }],
+    onCancel: jest.fn(),
+    countryList: {},
 };
 
 describe('AdWizard', () => {

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

@@ -17,7 +17,7 @@ const BuyPaymentMethodsList = ({ list, onSelectPaymentMethod }: TBuyPaymentMetho
                 isFullWidth
                 list={list}
                 name='payment-method-list'
-                onSelect={onSelectPaymentMethod}
+                onSelect={value => onSelectPaymentMethod(value as string)}
                 placeholder='Add'
                 value=''
                 variant='prompt'

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

@@ -1,4 +1,4 @@
-import { TPaymentMethod } from 'types';
+import { TAdvertiserPaymentMethod } from 'types';
 import { PaymentMethodCard } from '@/components';
 import { api } from '@/hooks';
 import { useIsAdvertiser } from '@/hooks/custom-hooks';
@@ -16,7 +16,7 @@ const SellAdPaymentSelection = ({ onSelectPaymentMethod, selectedPaymentMethodId
 
     return (
         <div className='sell-ad-payment-selection__card'>
-            {advertiserPaymentMethods?.map((paymentMethod: TPaymentMethod) => {
+            {advertiserPaymentMethods?.map((paymentMethod: TAdvertiserPaymentMethod) => {
                 const isDisabled =
                     selectedPaymentMethodIds.length >= 3 &&
                     !selectedPaymentMethodIds.includes(Number(paymentMethod.id));

src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx

@@ -183,9 +183,10 @@ const CreateEditAd = () => {
                 setValue('payment-method', Object.keys(advertInfo.payment_method_details ?? {}).map(Number));
             } else {
                 const paymentMethodNames = advertInfo?.payment_method_names;
-                const paymentMethodKeys = paymentMethodNames?.map(
-                    name => paymentMethodList.find(method => method.display_name === name)?.id
-                );
+                const paymentMethodKeys =
+                    paymentMethodNames?.map(
+                        name => paymentMethodList.find(method => method.display_name === name)?.id
+                    ) ?? [];
                 setValue('payment-method', paymentMethodKeys);
             }
         },
@@ -212,7 +213,7 @@ const CreateEditAd = () => {
             <FormProvider {...methods}>
                 <form onSubmit={handleSubmit(onSubmit)}>
                     <AdWizard
-                        countryList={countryList as object}
+                        countryList={countryList as TCountryListItem}
                         currency={activeAccount?.currency as TCurrency}
                         localCurrency={p2pSettings?.localCurrency as TCurrency}
                         onCancel={onClickCancel}

src/pages/my-ads/screens/MyAds/MyAdsTable/MyAdsTable.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { NonUndefined } from 'react-hook-form';
 import { THooks } from 'types';
 import { Table } from '@/components';
 import { api } from '@/hooks';
@@ -9,7 +10,7 @@ import MyAdsTableRowView from '../MyAdsTableRow/MyAdsTableRowView';
 import MyAdsDisplayWrapper from './MyAdsDisplayWrapper';
 import './MyAdsTable.scss';
 
-export type TMyAdsTableRowRendererProps = Required<THooks.AdvertiserAdverts.Get>[0] & {
+export type TMyAdsTableRowRendererProps = NonUndefined<THooks.AdvertiserAdverts.Get>[0] & {
     balanceAvailable: number;
     dailyBuyLimit: string;
     dailySellLimit: string;

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

@@ -15,7 +15,8 @@ import { PaymentMethodsList } from './PaymentMethodsList';
  * **/
 const PaymentMethods = () => {
     const isAdvertiser = useIsAdvertiser();
-    const { data: p2pAdvertiserPaymentMethods, isLoading } = api.advertiserPaymentMethods.useGet(isAdvertiser);
+    const { data: p2pAdvertiserPaymentMethods, isPending: isLoading } =
+        api.advertiserPaymentMethods.useGet(isAdvertiser);
     const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {});
 
     const handleAddPaymentMethod = (selectedPaymentMethod?: TSelectedPaymentMethod) => {

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

@@ -12,7 +12,7 @@ type TPaymentMethodsListProps = {
     onDelete: (selectedPaymentMethod?: TSelectedPaymentMethod) => void;
     onEdit: (selectedPaymentMethod?: TSelectedPaymentMethod) => void;
     onResetFormState: () => void;
-    p2pAdvertiserPaymentMethods: THooks.AdvertiserPaymentMethods.Get;
+    p2pAdvertiserPaymentMethods?: THooks.AdvertiserPaymentMethods.Get;
 };
 
 /**