Rostislav / WALL-243 / TS migration Cashier (deriv-com#7746)

* refactor: migration done * refactor: init pr * Rostislav / 85420 / Migrate cashier `utils` to TS (#2) * refactor: init pr * refactor: refactored utils/validator to ts + moved it to shared * refactor: added more typescript shenanigans to validator * refactor: a minor change * refactor: import refactored * refactor: some more progress with the validator to avoid the build failing hopefully * refactor: validator ts issues fixed * refactor: more ts fixes to get this to work * refactor: removed validator from cashier * refactor: added tests for validator/errors in shared * refactor: applied suggested changes * refactor: some more any -> unknown refactoring * refactor: fixed cringe mistake * refactor: fixed a small mistake * Update packages/cashier/src/utils/server_time.ts Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> --------- Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Rostislav / 85418 / Migrate disable-withdrawal-modal Component (#4) * refactor: ts migration * refactor: rmved the file * Rostislav / 85421 / Migrate cashier constants to TS (#3) * refactor: init pr * refactor: constants.js migrated * refactor: tsx'd transaction-status.js * refactor: tsx'd static-url.jsx * refactor: test deploy again * refactor: tests fixed * refactor: import fixed * refactor: removed the usage of PlatformContext and its is_appstore from StaticUrl * refactor: added eslint-disable-next-line * refactor: removed "return undefined" and typed return value * refactor: refactored types out into type file * refactor: added more constants * refactor: removed ! from recent-transaction.tsx * refactor: removed ts-ignore * refactor: more importing types instead of defining whats defined * refactor: fixed tests * refactor: capitalized status codes * refactor: rollbacked status codes in tests some more (lowercase -> CAPS) * refactor: removed unused import * refactor: Types -> ../types * refactor: added "as const" in constants.ts * refactor: new typeguards + improved readability * Update packages/cashier/src/constants/transaction-status.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * refactor: fixed typeguards * refactor: type fixes * refactor: mockRootStore type changed to TStores (@hamid-deriv's suggestion) * refactor: added default return for transaction status --------- Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Rostislav / WALL-257 / TS migration of Payment Agent Transfer UI component and store (#7) * refactor: init pr * refactor: migrated the store * refactor: migrated components * refactor: fixed mockStore * refactor: minor fix * refactor: more minor fixes * refactor: a few more minor fixes * refactor: one more import fix * refactor: tests fix * refactor: pa transfer request amount type string -> number * Update packages/cashier/src/types/props.types.ts Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * refactor: applied @farzin-deriv's suggestion * refactor: applied more suggestions --------- Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Rostislav / WALL-256 / TS migration of payment agent UI component and store (#6) * refactor: init pr * refactor: pa deposit details * refactor: mad webstorm suggestion (lets have it like this for now) * refactor: pa card helpers * refactor: pa card helpers (+ this one) * refactor: pa detail + spec * refactor: pa detail index * refactor: pa + spec * refactor: pa card deposit details spec * refactor: pa card listed withdraw form (to revisit) * refactor: pa card listed withdraw form (index) * refactor: pa card description * refactor: added types * refactor: types export * refactor: pa search box * refactor: pa withdraw form * refactor: pa card (to revisit) * refactor: pa container spec * refactor: pa container (to revisit) * refactor: pa container index * refactor: pa container index +1 * refactor: pa receipt index * refactor: pa index * refactor: pa withdraw confirm index * refactor: pa receipt (revisit after pa store) * refactor: pa receipt spec +1 * refactor: pa listed withdraw form * refactor: pa withdraw confirm + spec (to revisit after pa store) * refactor: pa listed withdraw form spec * refactor: pa disclaimer * refactor: pa receipt (revisit after pa store) * refactor: side note * refactor: stores types updated * refactor: store refactored + types added + few more changes * refactor: logic changed + store tests fixed * refactor: tests fixed it seems * fix: mockStore fixed * refactor: param type simplified for getNormalizedPaymentMethod * refactor: removed unused scss + minor changes * refactor: payment-agent.spec.tsx final * refactor: simplified payment-agent-card.tsx a bit * refactor: pa container spec removed TRootStore * refactor: a few changes to tests + a few ts errors resolved * refactor: init pr * refactor: init pr * refactor: trigger deploy * refactor: trigger deploy * refactor: old logic for banks and payment agents restored in PA store + type alias removed * Update packages/cashier/src/pages/payment-agent/payment-agent-withdrawal-locked/payment-agent-withdrawal-locked.tsx Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> * Update packages/cashier/src/pages/payment-agent/payment-agent-withdrawal-locked/payment-agent-withdrawal-locked.tsx Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> * refactor: changed `undefined` fallback to '' in pa listed withdraw form * refactor: renamed the types to start with 'T' * refactor: tests should be fixed now * refactor: one more tests fix * refactor: ReactNode -> React.ReactNode * refactor: a minor change * refactor: tests re-run check * refactor: a minor change * Update packages/stores/types.ts Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/stores/src/mockStore.ts Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * refactor: more suggestions applied * refactor: suggestions * refactor: React.ReactNode | string => React.ReactNode * refactor: PaymentAgentCard default values set for boolean params * refactor: formatting post merge-conflict problem fixed * refactor: verification_code removed from props and is being set from client store * refactor: prev commit changes fix in tests (oops) * refactor: one more test fix * refactor: tests fix * refactor: cashier store ts fix * refactor: type problems in PaymentAgentCard fixed with the help of @heorhi-deriv * Update packages/cashier/src/pages/payment-agent/payment-agent-withdraw-confirm/payment-agent-withdraw-confirm.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * fix: tests fix --------- Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Rostislav / WALL-261 / Migrate remaining cashier js to ts (#8) * refactor: init pr * refactor: refactored app to ts * refactor: cashier pages index.js -> .ts * refactor: remove a bunch of import aliases * refactor: revert accidental committed changes * refactor: some changes to the request types * refactor: sonarcloud fixes + removing TRootStore * refactor: continue removing TRootStore from everywhere * refactor: remove redundant static typing for mockStore call results + continue removing TRootStore * refactor: remove TRootStore completely * refactor: const mockRootStore -> const mock_root_store (convention for consts) * refactor: more spec refactoring * refactor: remove TRootStore from non-specs as well * fix: tests fix * refactor: removed imports for beforeEach * refactor: remove redundant cast * fix: fixing tests * fix: fixing tests * fix: fixing tests * fix: fix tests * refactor: a bunch of errors resolved * fix: test fix * fix: cast amount to number * fix: a few more forgotten number casts * fix: fixing tests * fix: fixing code smells * fix: fixing code smells * fix: fixing code smells * refactor: remove import of a removed type * refactor: rolled back on bad refactor + +{smth} -> Number({smth}) * refactor: ref and ReactPortal problems resolved * refactor: pa withdraw form spec type errors resolved * refactor: more refactoring in cashier tests * fix: tests fix * Update packages/shared/src/utils/validator/errors.ts Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/components/src/components/input/input.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * refactor: revert back to TRootStore for a bunch of stores * refactor: TCoreStores changed + withdraw store change revert * refactor: Array<T> -> T[] * refactor: PA store param type: TStores -> TRootStore * refactor: crypto-fiat-converter.spec.tsx type errors resolved * refactor: crypto transactions ts changes * Update packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * Update packages/cashier/src/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * refactor: error.tsx and error.spec.tsx type errors resolved * refactor: recent-transaction.tsx status null return value accounted for * refactor: crypto-transactions-renderer.spec.tsx removed unused import * refactor: error.tsx props type adjusted * refactor: payment-agent-store.ts added await on async call * refactor: Array<T> => T[] in more cashier files + account-transfer-store.ts type error resolution * refactor: TWebsocketCall functions types made async * Update packages/stores/types.ts Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> * fix: pa transfer store tests oddity fixed * fix: @farzin-deriv's suggestions * fix: another suggestion applied * fix: another suggestion applied * refactor: TStores-related refactoring * refactor: TStores-related refactoring * refactor: ClientStore.account_limits.daily_transfers types changed * fix: mockStore account_limits type inconsistency * refactor: fixing more ts errors * refactor: TClientStore account_limits type now used from api types * refactor: some of the more risky changes * fix: tests fix * refactor: accidental auto change rollback * refactor: remove auto changes * refactor: remove auto changes * refactor: ErrorDialog-related type errors fixed * refactor: withdraw.tsx-related type errors fixed * refactor: withdrawal-locked.spec.tsx-related type errors resolved * refactor: more type errors resolved * refactor: package-lock.json set to master * refactor: remove icons.js from changes * refactor: remve type errors from pa store and pa transfer store * refactor: minor refactoring * refactor: minor refactoring * refactor: removing more type errors * refactor: insignificant change reverted * refactor: { [key: string]: never } -> Record<string, never> * refactor: small type change in tests * refactor: got rid of a bunch of code smells * refactor: got rid of a bunch more code smells * refactor: got rid of a bunch more code smells * fix: tests fix * fix: qa fix * fix: tests fix --------- Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Co-authored-by: George Usynin <103181646+heorhi-deriv@users.noreply.github.com> Co-authored-by: hirad-deriv <hirad@re-work.dev>
niloofar-deriv · May 17, 2023 · 7d277a9 · 7d277a9
1 parent 7969ad5
commit 7d277a9
Show file tree

Hide file tree

Showing 168 changed files with 2,047 additions and 1,759 deletions.
diff --git a/packages/appstore/src/components/routes/routes-wrapper.tsx b/packages/appstore/src/components/routes/routes-wrapper.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { TReactChildren } from 'Types';
 
 const RoutesWrapper: React.FC<TRoutesWrapperProps> = ({ has_router, children }) => {
     if (has_router) {
@@ -10,9 +9,8 @@ const RoutesWrapper: React.FC<TRoutesWrapperProps> = ({ has_router, children })
     return <Router>{children}</Router>;
 };
 
-type TRoutesWrapperProps = {
+type TRoutesWrapperProps = React.PropsWithChildren<{
     has_router: boolean;
-    children: TReactChildren;
-};
+}>;
 
 export default RoutesWrapper;
diff --git a/packages/appstore/src/types/props.types.ts b/packages/appstore/src/types/props.types.ts
@@ -4,19 +4,3 @@ export type TConfigProps = {
     has_router: boolean;
     routes: ConfigStore['routes'];
 };
-
-type ReactTypes = React.ComponentType | React.ElementType;
-
-type TLocalizeProps = {
-    components?: ReactTypes[];
-    i18n?: unknown;
-    i18n_default_text: string;
-    values?: {
-        [k: string]: string;
-    };
-};
-
-export type TStringTranslation = string | React.ReactElement<TLocalizeProps>;
-
-// ref: https://www.carlrippon.com/react-children-with-typescript/
-export type TReactChildren = React.ReactNode;
diff --git a/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx b/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from '@deriv/components';
 import TradingPlatformIcon from 'Assets/svgs/trading-platform';
-import { TAccountsList } from 'Types';
+import { TAccountsList } from '../../types';
 
 type TAccountPlatformIcon = {
     size: number;

diff --git a/...ges/cashier/src/components/account-prompt-dialog/__tests__/account-prompt-dialog.spec.tsx b/...ges/cashier/src/components/account-prompt-dialog/__tests__/account-prompt-dialog.spec.tsx
@@ -10,7 +10,7 @@ jest.mock('@deriv/components', () => ({
 }));
 
 describe('<AccountPromptDialog />', () => {
-    const mockRootStore = mockStore({
+    const mock_root_store = mockStore({
         client: {
             accounts: {
                 CR90000001: { is_virtual: 0, currency: 'USD' },
@@ -32,7 +32,7 @@ describe('<AccountPromptDialog />', () => {
     });
     it('should render dialog', () => {
         render(<AccountPromptDialog />, {
-            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
+            wrapper: ({ children }) => <CashierProviders store={mock_root_store}>{children}</CashierProviders>,
         });
 
         expect(screen.getByText('Dialog')).toBeInTheDocument();

diff --git a/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx b/packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx
@@ -35,7 +35,7 @@ describe('<Real />', () => {
         };
     });
 
-    const mockRootStore = mockStore({});
+    const mock_root_store = mockStore({});
 
     it('should show loader when is_loading is true or iframe_height is equal to 0', () => {
         (useCashierStore as jest.Mock).mockReturnValueOnce({
@@ -44,7 +44,7 @@ describe('<Real />', () => {
         });
 
         const { rerender } = render(
-            <StoreProvider store={mockRootStore}>
+            <StoreProvider store={mock_root_store}>
                 <Real is_deposit />
             </StoreProvider>
         );
@@ -57,7 +57,7 @@ describe('<Real />', () => {
         });
 
         rerender(
-            <StoreProvider store={mockRootStore}>
+            <StoreProvider store={mock_root_store}>
                 <Real is_deposit />
             </StoreProvider>
         );
@@ -67,7 +67,7 @@ describe('<Real />', () => {
 
     it('should render an iframe if iframe_url is not an empty string', () => {
         render(
-            <StoreProvider store={mockRootStore}>
+            <StoreProvider store={mock_root_store}>
                 <Real is_deposit />
             </StoreProvider>
         );
@@ -78,7 +78,7 @@ describe('<Real />', () => {
     describe('Breadcrumb visibility', () => {
         it('should show breadcrumbs only on deposit page and only for non EU clients', () => {
             render(
-                <StoreProvider store={mockRootStore}>
+                <StoreProvider store={mock_root_store}>
                     <Real is_deposit />
                 </StoreProvider>
             );
@@ -94,7 +94,7 @@ describe('<Real />', () => {
             });
 
             render(
-                <StoreProvider store={mockRootStore}>
+                <StoreProvider store={mock_root_store}>
                     <Real is_deposit />
                 </StoreProvider>
             );
@@ -105,7 +105,7 @@ describe('<Real />', () => {
 
         it('should not show breadcrumbs on withdraw page', () => {
             render(
-                <StoreProvider store={mockRootStore}>
+                <StoreProvider store={mock_root_store}>
                     <Real is_deposit={false} />
                 </StoreProvider>
             );
@@ -117,7 +117,7 @@ describe('<Real />', () => {
 
     it('should trigger setIsDeposit callback when the user clicks on Cashier breadcrumb', () => {
         render(
-            <StoreProvider store={mockRootStore}>
+            <StoreProvider store={mock_root_store}>
                 <Real is_deposit={false} />
             </StoreProvider>
         );
@@ -132,7 +132,7 @@ describe('<Real />', () => {
 
     it('should trigger clearIframe and onMountDeposit callbacks when <Real /> component is destroyed on deposit page', () => {
         const { unmount } = render(
-            <StoreProvider store={mockRootStore}>
+            <StoreProvider store={mock_root_store}>
                 <Real is_deposit={false} />
             </StoreProvider>
         );

diff --git a/...cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding-side-note.spec.tsx b/...cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding-side-note.spec.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import CashierOnboardingSideNote from '../cashier-onboarding-side-note';
-import type { TRootStore } from 'Types';
+import { mockStore } from '@deriv/stores';
 import CashierProviders from '../../../cashier-providers';
 
 describe('<CashierOnboardingSideNote />', () => {
-    let mockRootStore: DeepPartial<TRootStore>;
+    let mockRootStore: ReturnType<typeof mockStore>;
     beforeEach(() => {
-        mockRootStore = {
+        mockRootStore = mockStore({
             client: {
                 currency: 'USD',
             },
@@ -21,7 +21,7 @@ describe('<CashierOnboardingSideNote />', () => {
                     },
                 },
             },
-        };
+        });
     });
 
     const props = {
@@ -45,6 +45,7 @@ describe('<CashierOnboardingSideNote />', () => {
 
     it('should trigger onClick callback when the client clicks the "live chat" link', () => {
         window.LC_API = {
+            on_chat_ended: jest.fn(),
             open_chat_window: jest.fn(),
         };
         renderCashierOnboardingSideNote();

diff --git a/packages/cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding.spec.tsx b/packages/cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding.spec.tsx
@@ -4,7 +4,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import CashierOnboarding from '../cashier-onboarding';
 import { Router } from 'react-router';
 import { routes } from '@deriv/shared';
-import type { TRootStore } from 'Types';
+import { mockStore } from '@deriv/stores';
 import CashierProviders from '../../../cashier-providers';
 
 jest.mock('@deriv/hooks', () => {
@@ -17,9 +17,9 @@ jest.mock('@deriv/hooks', () => {
 });
 
 describe('<CashierOnboarding />', () => {
-    let mockRootStore: DeepPartial<TRootStore>;
+    let mockRootStore: ReturnType<typeof mockStore>;
     beforeEach(() => {
-        mockRootStore = {
+        mockRootStore = mockStore({
             client: {
                 accounts: { CR90000001: { is_virtual: 0, currency: 'USD' } },
                 account_status: {
@@ -64,7 +64,7 @@ describe('<CashierOnboarding />', () => {
                     },
                 },
             },
-        };
+        });
     });
 
     const props = () => ({
@@ -279,7 +279,7 @@ describe('<CashierOnboarding />', () => {
 
         const node_list = screen.getAllByTestId('dt_cashier_onboarding_detail_div');
         const deposit_with_dp2p_detail_div = Array.from(node_list).find(node =>
-            node.textContent.includes(
+            node.textContent?.includes(
                 'Deposit with your local currency via peer-to-peer exchange with fellow traders in your country.'
             )
         );
@@ -302,7 +302,7 @@ describe('<CashierOnboarding />', () => {
 
         const node_list = screen.getAllByTestId('dt_cashier_onboarding_detail_div');
         const deposit_with_dp2p_detail_div = Array.from(node_list).find(node =>
-            node.textContent.includes(
+            node.textContent?.includes(
                 'Deposit with your local currency via peer-to-peer exchange with fellow traders in your country.'
             )
         );
@@ -322,7 +322,7 @@ describe('<CashierOnboarding />', () => {
 
         const node_list = screen.getAllByTestId('dt_cashier_onboarding_detail_div');
         const deposit_with_dp2p_detail_div = Array.from(node_list).find(node =>
-            node.textContent.includes(
+            node.textContent?.includes(
                 'Deposit with your local currency via peer-to-peer exchange with fellow traders in your country.'
             )
         );

diff --git a/...-box/__tests__/cashier-search-box.spec.js → ...box/__tests__/cashier-search-box.spec.tsx b/...-box/__tests__/cashier-search-box.spec.js → ...box/__tests__/cashier-search-box.spec.tsx
@@ -4,6 +4,8 @@ import CashierSearchBox from '../cashier-search-box';
 
 describe('<CashierSearchBox />', () => {
     const props = {
+        className: '',
+        search_term: '',
         onClear: jest.fn(),
         onSearch: jest.fn(),
         placeholder: 'Search placeholder',

diff --git a/...cashier-search-box/cashier-search-box.jsx → ...cashier-search-box/cashier-search-box.tsx b/...cashier-search-box/cashier-search-box.jsx → ...cashier-search-box/cashier-search-box.tsx
@@ -1,22 +1,37 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
-import { Field as FormField, Formik, Form } from 'formik';
+import { Field as FormField, Formik, Form, FieldProps } from 'formik';
 import { Icon, Input } from '@deriv/components';
 import './cashier-search-box.scss';
 
-const CashierSearchBox = ({ className, onClear, onSearch, placeholder, search_term, setIsSearchLoading }) => {
+type TCashierSearchBoxProps = {
+    className?: string;
+    onClear: VoidFunction;
+    onSearch: (search: string) => void;
+    placeholder: string;
+    search_term: string;
+    setIsSearchLoading: (value: boolean) => void;
+};
+
+const CashierSearchBox = ({
+    className,
+    onClear,
+    onSearch,
+    placeholder,
+    search_term,
+    setIsSearchLoading,
+}: TCashierSearchBoxProps) => {
     React.useEffect(() => {
         return onClear;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const onSearchClear = setFieldValue => {
+    const onSearchClear = (setFieldValue: (field: string, value: string) => void) => {
         setFieldValue('search', '');
         onClear();
     };
 
-    const onSearchKeyUpDown = (submitForm, search) => {
+    const onSearchKeyUpDown = (submitForm: VoidFunction, search: string) => {
         if (!search.trim() && search_term) {
             onClear();
         } else if (!search.trim()) return;
@@ -25,7 +40,7 @@ const CashierSearchBox = ({ className, onClear, onSearch, placeholder, search_te
         submitForm();
     };
 
-    const onSearchSubmit = ({ search }) => {
+    const onSearchSubmit = ({ search }: { search: string }) => {
         onSearch(search);
     };
 
@@ -35,7 +50,7 @@ const CashierSearchBox = ({ className, onClear, onSearch, placeholder, search_te
                 {({ submitForm, values: { search }, setFieldValue }) => (
                     <Form>
                         <FormField name='search'>
-                            {({ field }) => (
+                            {({ field }: FieldProps<string>) => (
                                 <Input
                                     {...field}
                                     type='text'
@@ -45,14 +60,14 @@ const CashierSearchBox = ({ className, onClear, onSearch, placeholder, search_te
                                     onKeyDown={() => onSearchKeyUpDown(submitForm, search)}
                                     leading_icon={<Icon icon='IcSearch' data_testid='dt_search_icon' />}
                                     trailing_icon={
-                                        search && (
+                                        search ? (
                                             <Icon
                                                 color='general'
                                                 data_testid='dt_close_icon'
                                                 icon='IcCloseCircle'
                                                 onClick={() => onSearchClear(setFieldValue)}
                                             />
-                                        )
+                                        ) : null
                                     }
                                 />
                             )}
@@ -64,13 +79,4 @@ const CashierSearchBox = ({ className, onClear, onSearch, placeholder, search_te
     );
 };
 
-CashierSearchBox.propTypes = {
-    className: PropTypes.string,
-    onClear: PropTypes.func,
-    onSearch: PropTypes.func,
-    placeholder: PropTypes.string,
-    search_term: PropTypes.string,
-    setIsSearchLoading: PropTypes.func,
-};
-
 export default CashierSearchBox;
diff --git a/packages/cashier/src/components/cashier-search-box/index.js b/packages/cashier/src/components/cashier-search-box/index.js
diff --git a/packages/cashier/src/components/cashier-search-box/index.ts b/packages/cashier/src/components/cashier-search-box/index.ts
@@ -0,0 +1,3 @@
+import CashierSearchBox from './cashier-search-box';
+
+export default CashierSearchBox;
diff --git a/...ges/cashier/src/components/crypto-fiat-converter/__tests__/crypto-fiat-converter.spec.tsx b/...ges/cashier/src/components/crypto-fiat-converter/__tests__/crypto-fiat-converter.spec.tsx
@@ -4,12 +4,13 @@ import CryptoFiatConverter from '../crypto-fiat-converter';
 import { Formik } from 'formik';
 import * as formik from 'formik';
 import CashierProviders from '../../../cashier-providers';
+import { mockStore } from '@deriv/stores';
 
 describe('<CryptoFiatConverter />', () => {
-    let mockRootStore, mockProps;
+    let mockRootStore: ReturnType<typeof mockStore>, mockProps: React.ComponentProps<typeof CryptoFiatConverter>;
 
     beforeEach(() => {
-        mockRootStore = {
+        mockRootStore = mockStore({
             modules: {
                 cashier: {
                     crypto_fiat_converter: {
@@ -19,23 +20,24 @@ describe('<CryptoFiatConverter />', () => {
                     },
                 },
             },
-        };
+        });
 
         mockProps = {
             from_currency: 'BTC',
             hint: 'Transfer limits',
-            is_timer_visible: true,
             resetConverter: jest.fn(),
             to_currency: 'USD',
             onChangeConverterFromAmount: jest.fn(),
             onChangeConverterToAmount: jest.fn(),
+            validateFromAmount: jest.fn(),
+            validateToAmount: jest.fn(),
         };
     });
 
     const renderCryptoFiatConverter = () => {
         return render(
             <CashierProviders store={mockRootStore}>
-                <Formik>
+                <Formik initialValues={{}} onSubmit={() => Promise.resolve()}>
                     <CryptoFiatConverter {...mockProps} />
                 </Formik>
             </CashierProviders>