george / wall 1074 / ts type error fixes in cashier package

.circleci/config.yml

@@ -255,6 +255,7 @@ jobs:
     steps:
       - git_checkout_from_cache
       - npm_install_from_cache
+      - build
       - run:
           name: "Check TypeScript for @deriv/api"
           command: npx tsc --project packages/api/tsconfig.json -noEmit
@@ -267,16 +268,15 @@ jobs:
       - run:
           name: "Check TypeScript for @deriv/stores"
           command: npx tsc --project packages/stores/tsconfig.json -noEmit
-      # - run:
-      #     name: "Check TypeScript for @deriv/cashier"
-      #     command: npx tsc --project packages/cashier/tsconfig.json -noEmit
+      - run:
+          name: "Check TypeScript for @deriv/cashier"
+          command: npx tsc --project packages/cashier/tsconfig.json -noEmit
       - run:
           name: "Check tests for @deriv/hooks"
           command: bash ./scripts/check-tests.sh packages/hooks/src
       - run:
           name: "Check tests for @deriv/utils"
           command: bash ./scripts/check-tests.sh packages/utils/src
-      - build
       - run:
           name: "Run tests"
           no_output_timeout: 30m

packages/cashier/package.json

@@ -77,6 +77,7 @@
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/loadjs": "^4.0.1",
+        "@types/lodash.debounce": "^4.0.7",
         "@types/qrcode.react": "^1.0.2",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",

packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx

@@ -30,6 +30,7 @@ describe('<CryptoTransactionsRenderer />', () => {
         });
     });
     const props = {
+        onTooltipClick: jest.fn(),
         row: {
             address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
             address_url: 'https://www.blockchain.com/btc-testnet/address/tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
@@ -144,6 +145,7 @@ describe('<CryptoTransactionsRenderer />', () => {
     it('should display popover when hovering on tooltip for third-party transactions (CoinsPaid)', () => {
         (isMobile as jest.Mock).mockReturnValue(false);
         const tooltip_props = {
+            onTooltipClick: jest.fn(),
             row: {
                 address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
                 address_url: 'https://explorer.coinspaid.com/CP:Abcd1234',
@@ -154,10 +156,11 @@ describe('<CryptoTransactionsRenderer />', () => {
                 status_message:
                     "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel.",
                 submit_date: 1640603927,
+                transaction_hash: '',
                 transaction_type: 'withdrawal',
                 transaction_url: 'CP:Abcd1234',
             },
-        };
+        } as const;
 
         render(<CryptoTransactionsRenderer {...tooltip_props} />, {
             wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
@@ -177,6 +180,7 @@ describe('<CryptoTransactionsRenderer />', () => {
     it('should check whether the tooltip is clickable for third-party transactions (CoinsPaid)', () => {
         (isMobile as jest.Mock).mockReturnValue(true);
         const tooltip_props = {
+            onTooltipClick: jest.fn(),
             row: {
                 address_hash: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
                 address_url: 'https://explorer.coinspaid.com/CP:Abcd1234',
@@ -187,11 +191,11 @@ describe('<CryptoTransactionsRenderer />', () => {
                 status_message:
                     "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel.",
                 submit_date: 1640603927,
+                transaction_hash: '',
                 transaction_type: 'withdrawal',
                 transaction_url: 'CP:Abcd1234',
             },
-            onTooltipClick: jest.fn(),
-        };
+        } as const;
 
         render(<CryptoTransactionsRenderer {...tooltip_props} />, {
             wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx

@@ -85,7 +85,7 @@ const CryptoTransactionsHistory = observer(() => {
                                             onTooltipClick={() => setIsModalVisible(true)}
                                         />
                                     )}
-                                    keyMapper={(row: TCryptoTransactionDetails) => row.id}
+                                    keyMapper={row => row.id}
                                     row_gap={isMobile() ? 8 : 0}
                                 />
                             )}

packages/cashier/src/components/error/error.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Icon, ButtonLink, StaticUrl, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import ErrorStore from '../../stores/error-store';
+import type { TError } from '../../types';
 import './error.scss';
 
 type TErrorComponentProps = {
@@ -47,12 +47,7 @@ const ErrorComponent = ({ header, message, button_link, onClickButton, button_te
     </div>
 );
 
-const Error = ({
-    error,
-}: {
-    error: Pick<ErrorStore, 'code' | 'message'> &
-        Partial<Pick<ErrorStore, 'fields' | 'onClickButton' | 'setErrorMessage'>>;
-}) => {
+const Error = ({ error }: { error: TError }) => {
     const error_fields: TErrorFields = {
         address_city: localize('Town/City'),
         address_line_1: localize('First line of home address'),
@@ -71,7 +66,7 @@ const Error = ({
     };
 
     const clearErrorMessage = () => {
-        error.setErrorMessage?.({ code: '', message: '' });
+        error.setErrorMessage?.({ code: '', message: '' }, null, false);
     };
 
     let AccountError;

packages/cashier/src/components/side-note-card/__test__/side-note-card.test.tsx

@@ -17,7 +17,7 @@ describe('SideNoteCard', () => {
         render(<SideNoteCard {...props} />, { wrapper });
 
         expect(screen.getByText(props.title)).toBeInTheDocument();
-        expect(screen.getByText(props.description)).toBeInTheDocument();
+        expect(screen.getByText(props.description as string)).toBeInTheDocument();
     });
 
     test('should render the given children', async () => {
@@ -38,7 +38,7 @@ describe('SideNoteCard', () => {
         );
 
         expect(screen.getByText(props.title)).toBeInTheDocument();
-        expect(screen.getByText(props.description)).toBeInTheDocument();
+        expect(screen.getByText(props.description as string)).toBeInTheDocument();
         expect(screen.getByText('children')).toBeInTheDocument();
     });
 });

packages/cashier/src/components/side-note/side-note.scss

@@ -2,7 +2,6 @@
     &--mobile {
         background-color: var(--general-section-1);
         border-radius: $BORDER_RADIUS * 2;
-        padding: 1.6rem 2.4rem;
         color: var(--text-general);
         font-size: var(--text-size-xxs);
         line-height: 1.5;

packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import TransferConfirm from '../transfer-confirm';
 import { mockStore } from '@deriv/stores';
 import CashierProviders from '../../../cashier-providers';
-import { TError } from 'Types';
+import { TError } from '../../../types';
 
 const mock_root_store = mockStore({
     ui: {
@@ -29,7 +29,7 @@ describe('<TransferConfirm />', () => {
             { key: '1', label: 'label 1', value: 'value 1' },
             { key: '2', label: 'label 2', value: ['value 2', 'value 3'] },
         ],
-        error: {},
+        error: {} as TError,
         onClickBack: jest.fn(),
         onClickConfirm: jest.fn(),
     };

packages/cashier/src/components/transfer-confirm/transfer-confirm.tsx

@@ -20,7 +20,7 @@ type WarningBulletProps = {
 
 type TTransferConfirmProps = {
     data: TRowProps[];
-    error?: TError | Record<string, never>;
+    error?: TError;
     header?: string;
     is_payment_agent_withdraw?: boolean;
     onClickBack?: VoidFunction;

packages/cashier/src/constants/routes-config.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+//@ts-expect-error should be fixed in p2p package
 import P2P from '@deriv/p2p';
 import { routes, moduleLoader } from '@deriv/shared';
 import { localize } from '@deriv/translations';
@@ -7,6 +8,7 @@ import { AccountTransfer, Deposit, OnRamp, PaymentAgent, PaymentAgentTransfer, W
 import { TRouteConfig, TRoute } from '../types';
 
 // Error Routes
+//@ts-expect-error moduleLoader type should be fixed in shared package
 const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ '../components/page-404')));
 export type TPage404 = typeof Page404;
 

packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx

@@ -48,9 +48,23 @@ jest.mock('Pages/deposit', () => jest.fn(() => 'mockedDeposit'));
 jest.mock('Pages/withdrawal', () => jest.fn(() => 'mockedWithdrawal'));
 
 describe('<Cashier />', () => {
-    let history: BrowserHistory;
-    const renderWithRouter = (component: JSX.Element, mock_root_store: ReturnType<typeof mockStore>) => {
+    let history: BrowserHistory, cashier_props: React.ComponentProps<typeof Cashier>;
+
+    beforeEach(() => {
         history = createBrowserHistory();
+        cashier_props = {
+            routes: getRoutesConfig()[0].routes || [],
+            tab_index: 0,
+            onMount: jest.fn(),
+            setAccountSwitchListener: jest.fn(),
+            setTabIndex: jest.fn(),
+            routeBackInApp: jest.fn(),
+            toggleCashier: jest.fn(),
+            resetLastLocation: jest.fn(),
+        };
+    });
+
+    const renderWithRouter = (component: JSX.Element, mock_root_store: ReturnType<typeof mockStore>) => {
         return {
             ...render(<Router history={history}>{component}</Router>, {
                 wrapper: ({ children }) => <CashierProviders store={mock_root_store}>{children}</CashierProviders>,
@@ -101,7 +115,7 @@ describe('<Cashier />', () => {
             },
         });
 
-        renderWithRouter(<Cashier routes={getRoutesConfig()[0].routes || []} />, mock_root_store);
+        renderWithRouter(<Cashier {...cashier_props} />, mock_root_store);
 
         expect(screen.getByText('mockedLoading')).toBeInTheDocument();
     });
@@ -150,7 +164,7 @@ describe('<Cashier />', () => {
             },
         });
 
-        renderWithRouter(<Cashier routes={getRoutesConfig()[0].routes || []} />, mock_root_store);
+        renderWithRouter(<Cashier {...cashier_props} />, mock_root_store);
 
         expect(screen.getByRole('link', { name: 'Deposit' })).toBeInTheDocument();
         expect(screen.getByRole('link', { name: 'Withdrawal' })).toBeInTheDocument();
@@ -207,7 +221,7 @@ describe('<Cashier />', () => {
             },
         });
 
-        renderWithRouter(<Cashier routes={getRoutesConfig()[0].routes || []} />, mock_root_store);
+        renderWithRouter(<Cashier {...cashier_props} />, mock_root_store);
 
         const learn_more_btn = screen.getByRole('button', { name: 'Learn more about payment methods' });
         fireEvent.click(learn_more_btn);
@@ -308,7 +322,7 @@ describe('<Cashier />', () => {
             },
         });
 
-        renderWithRouter(<Cashier routes={getRoutesConfig()[0].routes || []} />, mock_root_store);
+        renderWithRouter(<Cashier {...cashier_props} />, mock_root_store);
 
         const withdrawal_link = screen.getByRole('link', { name: 'Withdrawal' });
         fireEvent.click(withdrawal_link);
@@ -359,7 +373,7 @@ describe('<Cashier />', () => {
             },
         });
 
-        renderWithRouter(<Cashier routes={getRoutesConfig()[0].routes || []} />, mock_root_store);
+        renderWithRouter(<Cashier {...cashier_props} />, mock_root_store);
 
         expect(screen.queryByTestId('vertical_tab_side_note')).not.toBeInTheDocument();
     });
@@ -409,7 +423,7 @@ describe('<Cashier />', () => {
             },
         });
 
-        renderWithRouter(<Cashier routes={getRoutesConfig()[0].routes || []} />, mock_root_store);
+        renderWithRouter(<Cashier {...cashier_props} />, mock_root_store);
 
         const withdrawal_link = screen.getByRole('link', { name: 'Withdrawal' });
         fireEvent.click(withdrawal_link);

packages/cashier/src/containers/cashier/cashier.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router';
 import {
     Button,
     DesktopWrapper,
@@ -20,35 +19,36 @@ import {
 } from '@deriv/hooks';
 import { getSelectedRoute, getStaticUrl, isMobile, routes, WS } from '@deriv/shared';
 import ErrorDialog from '../../components/error-dialog';
-import { TRoute } from '../../types';
+import { TComponentRouteProps, TRoute } from '../../types';
 import { localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 import { useCashierStore } from '../../stores/useCashierStores';
 import type { TCoreStores } from '@deriv/stores/types';
 import './cashier.scss';
 
-type TCashierProps = RouteComponentProps & {
-    routes: TRoute[];
-    tab_index: number;
-    onMount: (should_remount?: boolean) => void;
-    setAccountSwitchListener: () => void;
-    setTabIndex: (index: number) => void;
-    routeBackInApp: TCoreStores['common']['routeBackInApp'];
-    toggleCashier: TCoreStores['ui']['toggleCashier'];
-    resetLastLocation: () => void;
+type TCashierProps = {
+    routes?: TRoute[];
+    tab_index?: number;
+    onMount?: (should_remount?: boolean) => void;
+    setAccountSwitchListener?: () => void;
+    setTabIndex?: (index: number) => void;
+    routeBackInApp?: TCoreStores['common']['routeBackInApp'];
+    toggleCashier?: TCoreStores['ui']['toggleCashier'];
+    resetLastLocation?: () => void;
 };
 
 type TCashierOptions = {
     count?: number;
     default?: boolean;
     has_side_note: boolean;
-    icon: string;
+    icon?: string;
     label: string;
     path?: string;
-    value?: typeof React.Component;
+    value?: React.FC<TComponentRouteProps>;
 };
 
-const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => {
+const Cashier = observer(({ routes: routes_config }: TCashierProps) => {
+    const history = useHistory();
     const { common, ui, client } = useStore();
     const { withdraw, general_store, transaction_history, payment_agent } = useCashierStore();
     const { error } = withdraw;
@@ -116,7 +116,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     const onClickClose = () => history.push(routes.traders_hub);
     const getMenuOptions = () => {
         const options: TCashierOptions[] = [];
-        routes_config.forEach(route => {
+        routes_config?.forEach(route => {
             if (
                 !route.is_invisible &&
                 (route.path !== routes.cashier_pa || is_payment_agent_visible) &&
@@ -140,13 +140,14 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         return options;
     };
 
-    const selected_route = getSelectedRoute({ routes: routes_config, pathname: location.pathname });
+    const selected_route = getSelectedRoute({ routes: routes_config, pathname: history.location.pathname });
     // const should_show_tab_headers_note =
     //     !is_virtual &&
     //     (location.pathname.startsWith(routes.cashier_deposit) ||
     //         location.pathname.startsWith(routes.cashier_withdrawal));
 
-    const is_default_route = !!getSelectedRoute({ routes: routes_config, pathname: location.pathname }).default;
+    const is_default_route = !!getSelectedRoute({ routes: routes_config, pathname: history.location.pathname })
+        ?.default;
 
     // '|| !is_account_setting_loaded' condition added to make sure client_tnc_status loaded
     if (
@@ -161,7 +162,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     const getHeaderTitle = () => {
         if (!isMobile() || (is_default_route && (is_loading || is_cashier_onboarding))) return localize('Cashier');
 
-        return selected_route.getTitle?.();
+        return selected_route?.getTitle?.();
     };
 
     return (
@@ -171,12 +172,13 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                 <PageOverlay header={getHeaderTitle()} onClickClose={onClickClose} is_from_app={is_from_derivgo}>
                     <DesktopWrapper>
                         <VerticalTab
-                            current_path={location.pathname}
+                            current_path={history.location.pathname}
                             is_floating
                             setVerticalTabIndex={setTabIndex}
                             vertical_tab_index={is_default_route ? 0 : tab_index}
                             is_full_width
                             is_routed
+                            //@ts-expect-error type of list property should be changed to React.FC<any>
                             list={getMenuOptions()}
                             tab_headers_note={
                                 <Button
@@ -224,4 +226,4 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         </FadeWrapper>
     );
 });
-export default withRouter(Cashier);
+export default Cashier;