Merge pull request #20 from farrah-deriv/build-checks

farrah/ fix: type errors

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -3,7 +3,7 @@ import { DeepPartial, TAdvertiserStats } from 'types';
 import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
 import { Text, useDevice } from '@deriv-com/ui';
-import ThumbUpIcon from '../../public/ic-thumb-up.svg';
+import ThumbUpIcon from '../../public/ic-thumb-up.svg?react';
 import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg?react';
 import './AdvertiserNameStats.scss';
 

src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { TCurrency } from 'types';
 import { LightDivider } from '@/components';
 import { floatingPointValidator } from '@/utils';
 import { Input, Text, useDevice } from '@deriv-com/ui';
@@ -13,7 +14,7 @@ type TBuySellAmountProps = {
     control: ReturnType<typeof useForm>['control'];
     isBuy: boolean;
     isDisabled: boolean;
-    localCurrency: string;
+    localCurrency: TCurrency;
     maxLimit: string;
     minLimit: string;
 };

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

@@ -5,6 +5,7 @@ import BuySellFormFooter from '../BuySellFormFooter';
 const mockProps = {
     isDisabled: false,
     onClickCancel: jest.fn(),
+    onSubmit: jest.fn(),
 };
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
@@ -27,11 +28,10 @@ describe('BuySellFormFooter', () => {
         expect(mockProps.onClickCancel).toHaveBeenCalled();
     });
     it('should handle onclick for confirm button', () => {
-        const newProps = { mockProps, onSubmit: jest.fn() };
-        render(<BuySellFormFooter {...newProps} />);
+        render(<BuySellFormFooter {...mockProps} />);
         const confirmButton = screen.getByRole('button', { name: 'Confirm' });
         confirmButton.click();
-        expect(newProps.onSubmit).toHaveBeenCalled();
+        expect(mockProps.onSubmit).toHaveBeenCalled();
     });
     it('should render as expected in responsive view as well', () => {
         mockUseDevice.mockReturnValue({

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

@@ -5,7 +5,7 @@ import BuySellPaymentSection from '../BuySellPaymentSection';
 const mockProps = {
     availablePaymentMethods: [],
     onSelectPaymentMethodCard: jest.fn(),
-    selectedPaymentMethodIds: ['123'],
+    selectedPaymentMethodIds: [123],
 };
 
 const mockAvailablePaymentMethods = {

src/components/Clipboard/Clipboard.tsx

@@ -2,8 +2,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { Tooltip } from '@deriv-com/ui';
-import CheckmarkCircle from '../../public/ic-checkmark-circle.svg';
-import CopyIcon from '../../public/ic-clipboard.svg';
+import CheckmarkCircle from '../../public/ic-checkmark-circle.svg?react';
+import CopyIcon from '../../public/ic-clipboard.svg?react';
 import './Clipboard.scss';
 
 type TClipboardProps = {

src/components/FileUploaderComponent/FileUploaderComponent.tsx

@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react';
+import { TFile } from '@/utils';
 import { DerivLightIcCloudUploadIcon, StandaloneCircleXmarkBoldIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 import { FileDropzone } from '../FileDropzone';
@@ -10,8 +11,8 @@ type TFileUploaderComponentProps = {
     maxSize: number;
     multiple?: boolean;
     onClickClose: () => void;
-    onDropAccepted: (files: File[]) => void;
-    onDropRejected: (files: File[]) => void;
+    onDropAccepted: (files: TFile[]) => void;
+    onDropRejected: (files: TFile[]) => void;
     uploadedMessage: string;
     validationErrorMessage: string | null;
     value: (File & { file: Blob })[];

src/components/Modals/FilterModal/__tests__/FilterModal.spec.tsx

@@ -261,7 +261,7 @@ describe('<FilterModal />', () => {
     });
 
     it('should populate the payment methods list with the data from the API', async () => {
-        mockData = undefined;
+        mockData = [];
         const { rerender } = render(<FilterModal {...mockProps} />);
 
         const paymentMethodsText = screen.getByText('Payment methods');

src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx

@@ -52,12 +52,12 @@ jest.mock('@/providers/AdvertiserInfoStateProvider', () => ({
 
 describe('NicknameModal', () => {
     it('should render title and description correctly', () => {
-        render(<NicknameModal isModalOpen setIsModalOpen={jest.fn()} />);
+        render(<NicknameModal isModalOpen onRequestClose={jest.fn()} />);
         expect(screen.getByText('What’s your nickname?')).toBeVisible();
         expect(screen.getByText('Others will see this on your profile, ads and charts.')).toBeVisible();
     });
     it('should allow users to type and submit nickname', async () => {
-        render(<NicknameModal isModalOpen setIsModalOpen={jest.fn()} />);
+        render(<NicknameModal isModalOpen onRequestClose={jest.fn()} />);
 
         const nicknameInput = screen.getByTestId('dt_nickname_modal_input');
 
@@ -85,7 +85,7 @@ describe('NicknameModal', () => {
         }));
 
         await (() => {
-            render(<NicknameModal isModalOpen setIsModalOpen={jest.fn()} />);
+            render(<NicknameModal isModalOpen onRequestClose={jest.fn()} />);
         });
 
         expect(mockedReset).toBeCalled();
@@ -99,7 +99,7 @@ describe('NicknameModal', () => {
             reset: mockedReset,
         }));
         const mockIsModalOpen = jest.fn();
-        render(<NicknameModal isModalOpen setIsModalOpen={mockIsModalOpen} />);
+        render(<NicknameModal isModalOpen onRequestClose={mockIsModalOpen} />);
 
         const cancelBtn = screen.getByRole('button', {
             name: 'Cancel',

src/components/Modals/PaymentMethods/PaymentMethodErrorModal/__tests__/PaymentMethodErrorModal.spec.tsx

@@ -1,8 +1,7 @@
-import { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import PaymentMethodErrorModal from '../PaymentMethodErrorModal';
 
-const wrapper = ({ children }: PropsWithChildren<unknown>) => <div id='v2_modal_root'>{children}</div>;
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => <div id='v2_modal_root'>{children}</div>;
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),

src/components/Modals/PaymentMethods/PaymentMethodModal/__tests__/PaymentMethodModal.spec.tsx

@@ -1,9 +1,8 @@
-import { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PaymentMethodModal from '../PaymentMethodModal';
 
-const wrapper = ({ children }: PropsWithChildren<unknown>) => <div id='v2_modal_root'>{children}</div>;
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => <div id='v2_modal_root'>{children}</div>;
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),

src/components/Modals/ShareAdsModal/ShareAdsModal.tsx

@@ -6,9 +6,9 @@ import { api } from '@/hooks';
 import { useCopyToClipboard } from '@/hooks/custom-hooks';
 import { Button, Divider, Modal, Text, useDevice } from '@deriv-com/ui';
 //TODO: replace below icons with the one from quill once available
-import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg';
-import ShareIcon from '../../../public/ic-share.svg';
-import ShareLinkIcon from '../../../public/ic-share-link.svg';
+import CheckmarkCircle from '../../../public/ic-checkmark-circle.svg?react';
+import ShareIcon from '../../../public/ic-share.svg?react';
+import ShareLinkIcon from '../../../public/ic-share-link.svg?react';
 import ShareMyAdsCard from './ShareAdsCard';
 import ShareMyAdsSocials from './ShareAdsSocials';
 import './ShareAdsModal.scss';

src/components/Modals/ShareAdsModal/ShareAdsSocials.tsx

@@ -5,7 +5,7 @@ import {
     SocialGoogleBrandIcon,
     SocialTelegramBrandIcon,
 } from '@deriv/quill-icons';
-import WhatsappIcon from '../../../public/ic-whatsapp-filled.svg';
+import WhatsappIcon from '../../../public/ic-whatsapp-filled.svg?react';
 import './ShareAdsSocials.scss';
 
 type TShareMyAdsSocialsProps = {

src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx

@@ -3,9 +3,9 @@ import { THooks } from 'types';
 import { FlyoutMenu } from '@/components';
 import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
 import { Button, Checkbox } from '@deriv-com/ui';
-import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg';
-import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg';
-import IcCashierOther from '../../../public/ic-cashier-other.svg';
+import IcCashierBankTransfer from '../../../public/ic-cashier-bank-transfer.svg?react';
+import IcCashierEwallet from '../../../public/ic-cashier-ewallet.svg?react';
+import IcCashierOther from '../../../public/ic-cashier-other.svg?react';
 import './PaymentMethodCardHeader.scss';
 
 type TPaymentMethodCardHeaderProps = {

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { PaymentMethodCardHeader } from '../PaymentMethodCardHeader';
 
-jest.mock('../../../public/ic-cashier-ewallet.svg', () => 'span');
+jest.mock('../../../public/ic-cashier-ewallet.svg?react', () => 'span');
 
 describe('PaymentMethodCardHeader', () => {
     it('should render the component correctly', () => {

src/components/PaymentMethodForm/PaymentMethodForm.tsx

@@ -28,7 +28,7 @@ const PaymentMethodForm = ({ onAdd, onResetFormState, ...rest }: TPaymentMethodF
         reset,
     } = useForm({ mode: 'all' });
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { actionType, selectedPaymentMethod, title } = rest.formState;
+    const { actionType, selectedPaymentMethod, title = '' } = rest.formState;
     const { data: availablePaymentMethods } = api.paymentMethods.useGet();
     const { create, error: createError, isSuccess: isCreateSuccessful } = api.advertiserPaymentMethods.useCreate();
     const { error: updateError, isSuccess: isUpdateSuccessful, update } = api.advertiserPaymentMethods.useUpdate();

src/components/PaymentMethodForm/PaymentMethodFormAutocomplete/PaymentMethodFormAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { TFormState, THooks, TSelectedPaymentMethod } from 'types';
 import { Dropdown } from '@/components';
 import { Button, Input, Text } from '@deriv-com/ui';
-import CloseCircle from '../../../public/ic-close-circle.svg';
+import CloseCircle from '../../../public/ic-close-circle.svg?react';
 
 type TPaymentMethodFormAutocompleteProps = {
     actionType: TFormState['actionType'];

src/components/PaymentMethodLabel/PaymentMethodLabel.tsx

@@ -1,9 +1,10 @@
+import { TGenericSizes, TTextColors } from '@/utils';
 import { Text } from '@deriv-com/ui';
 
 type TPaymentMethodLabelProps = {
-    color?: string;
+    color?: TTextColors;
     paymentMethodName: string;
-    size?: string;
+    size?: TGenericSizes;
 };
 
 const PaymentMethodLabel = ({ color = 'general', paymentMethodName, size = 'sm' }: TPaymentMethodLabelProps) => {

src/components/PaymentMethodWithIcon/PaymentMethodWithIcon.tsx

@@ -3,12 +3,12 @@ import clsx from 'clsx';
 import { THooks } from 'types';
 import { TGenericSizes } from '@/utils';
 import { Text } from '@deriv-com/ui';
-import IcCashierBankTransfer from '../../public/ic-cashier-bank-transfer.svg';
-import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg';
-import IcCashierOther from '../../public/ic-cashier-other.svg';
+import IcCashierBankTransfer from '../../public/ic-cashier-bank-transfer.svg?react';
+import IcCashierEwallet from '../../public/ic-cashier-ewallet.svg?react';
+import IcCashierOther from '../../public/ic-cashier-other.svg?react';
 
 type TPaymentMethodWithIconProps = {
-    className: string;
+    className?: string;
     name: string;
     textSize?: TGenericSizes;
     type: THooks.AdvertiserPaymentMethods.Get[number]['type'];

src/components/ProfileContent/ProfileStats/__tests__/ProfileStats.spec.tsx

@@ -21,7 +21,7 @@ let mockProps = {
 
 describe('<ProfileStats />', () => {
     it('should render no results if advertiserStats is empty', () => {
-        render(<ProfileStats />);
+        render(<ProfileStats advertiserStats={{}} />);
 
         expect(screen.queryByText('Buy completion 30d')).not.toBeInTheDocument();
         expect(screen.queryByText('Sell completion 30d')).not.toBeInTheDocument();

src/hooks/__tests__/useModalManager.spec.tsx

@@ -45,7 +45,7 @@ describe('useModalManager', () => {
     it('should render and show the correct modal states when showModal is called', async () => {
         const history = createMemoryHistory();
         const originalLocation = window.location;
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -113,7 +113,7 @@ describe('useModalManager', () => {
     });
     it('should hide the modals and show previous modal when current modal hidden', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -193,7 +193,7 @@ describe('useModalManager', () => {
     });
     it('should show the modals when URL is initialized with default modal states', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -223,7 +223,7 @@ describe('useModalManager', () => {
     });
     it('should should not show the modals on navigated back when shouldReinitializeModals is set to false', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -255,7 +255,7 @@ describe('useModalManager', () => {
     });
     it('should should show the modals on navigated back when shouldReinitializeModals is set to true', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -291,7 +291,7 @@ describe('useModalManager', () => {
     });
     it('should should stack the modals in mobile', () => {
         const history = createMemoryHistory();
-        const wrapper = ({ children }: { children: JSX.Element }) => {
+        const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
             return <Router history={history}>{children}</Router>;
         };
 
@@ -302,7 +302,9 @@ describe('useModalManager', () => {
             search: '?modal=ModalA,ModalB,ModalC',
         }));
         mockedUseDevice.mockImplementation(() => ({
+            isDesktop: false,
             isMobile: true,
+            isTablet: false,
         }));
         mockedUseQueryString.mockImplementationOnce(() => ({
             queryString: {

src/hooks/__tests__/usePoiPoaStatus.spec.tsx

@@ -45,8 +45,9 @@ describe('usePoiPoaStatus', () => {
                     identity: {
                         status: 'verified',
                     },
+                    needs_verification: false,
                 },
-                p2p_poa_required: false,
+                p2p_poa_required: 0,
             },
         });
         const { result } = renderHook(() => usePoiPoaStatus());

src/pages/advertiser/screens/Advertiser/Advertiser.tsx

@@ -25,7 +25,9 @@ const Advertiser = () => {
                 hasBorder={isMobile}
                 onClick={() =>
                     history.push(
-                        location.state?.from === 'MyProfile' ? `${MY_PROFILE_URL}?tab=My+counterparties` : BUY_SELL_URL
+                        (location.state as { from: string })?.from === 'MyProfile'
+                            ? `${MY_PROFILE_URL}?tab=My+counterparties`
+                            : BUY_SELL_URL
                     )
                 }
                 pageTitle='Advertiser’s page'

src/pages/advertiser/screens/AdvertiserAdvertsTable/__tests__/AdvertiserAdvertsTable.spec.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import AdvertiserAdvertsTable from '../AdvertiserAdvertsTable';
 
 let mockApiValues = {
+    data: [{}],
     isFetching: false,
     isLoading: true,
     loadMoreAdverts: jest.fn(),

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

@@ -26,10 +26,10 @@ const CurrencyDropdown = ({ selectedCurrency, setSelectedCurrency }: TCurrencyDr
     const localCurrencies = useMemo(() => {
         return data?.currency_list
             ? data.currency_list
-                  .sort((a, b) => a.value.localeCompare(b.value))
+                  .sort((a, b) => (a?.value ?? '').localeCompare(b?.value ?? ''))
                   .sort((a, b) => {
-                      if (a.value === selectedCurrency) return -1;
-                      if (b.value === selectedCurrency) return 1;
+                      if (a?.value === selectedCurrency) return -1;
+                      if (b?.value === selectedCurrency) return 1;
                       return 0;
                   })
             : [];

src/pages/buy-sell/components/CurrencyDropdown/__tests__/CurrencyDropdown.spec.tsx

@@ -2,7 +2,7 @@ import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import CurrencyDropdown from '../CurrencyDropdown';
 
-const wrapper = ({ children }: { children: JSX.Element }) => (
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
     <div>
         <div>Click me</div>
         {children}

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

@@ -1,7 +1,7 @@
 import { TSortByValues } from '@/utils';
 import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
 import { Button, Dropdown, useDevice } from '@deriv-com/ui';
-import SortIcon from '../../../../public/ic-cashier-sort.svg';
+import SortIcon from '../../../../public/ic-cashier-sort.svg?react';
 import './SortDropdown.scss';
 
 type TSortDropdownProps = {

src/pages/buy-sell/screens/BuySellTable/BuySellTableRenderer/BuySellTableRenderer.tsx

@@ -22,7 +22,7 @@ type TBuySellTableRowRendererProps = {
 };
 
 const BuySellTableRenderer = ({
-    data,
+    data = [],
     isFetching,
     isLoading,
     loadMoreAdverts,

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

@@ -22,12 +22,12 @@ const mockUseDevice = useDevice as jest.Mock;
 
 describe('AdConditionContentHeader', () => {
     it('should render the component as expected with given type', () => {
-        render(<AdConditionContentHeader type='type' />);
+        render(<AdConditionContentHeader type='completionRates' />);
         expect(screen.getByText('title')).toBeInTheDocument();
     });
     it('should handle clicking the tooltip icon', async () => {
         mockUseDevice.mockReturnValue({ isMobile: true });
-        render(<AdConditionContentHeader type='type' />);
+        render(<AdConditionContentHeader type='completionRates' />);
         await userEvent.click(screen.getByTestId('dt_ad_condition_tooltip_icon'));
         const okButton = screen.getByRole('button', { name: 'OK' });
         expect(okButton).toBeInTheDocument();