Vinu/Ts onramp cashier (#5727)

* refactor: converted on-ramp module into typescript * refactor: included type related to store in on-ramp * ts fix in on-ramp-provider-card.spec.tsx * added path in tsconfig * added path in tsconfig * added type for react-router-dom * added ts related change required for migrating all components (#5760) * changed the name of data-testid in on-ramp component * ts-migration-crypto-fiat-converter (#5796) * Trigger build * Update package-lock * ts-migration-cashier-notifications (#5765) * implemented review comments and updated branch as per latest upstream branch * bahar/funds_protection_component-ts-migration (#5756) * funds_protection_component-ts-migration * remove_extra_type_file * fix_merge_issue * hamid/migrate-transfer-confirm-to-ts (#5815) * Migrate TransferConfirm to TS * Rename component in test file * Replace Confirm with TransferConfirm in PAs * Enhance Tests * ts-migration-page-404 (#5766) * corrected imports in on-ramp pages * coreected setSideNotes type in on-ramp file * arranged the order of imports in on-ramp * refactor: add menu-option type to types folder in cashier * replaced type for FormEvent in on-ramp from Types * added types from TRootstore * added types of TClientStore, TUiStore and TCommonStore in on-ramp Co-authored-by: Nijil Nirmal <nijil@deriv.com> Co-authored-by: Bahar <bahar@firstsource.tech> Co-authored-by: Hamid <hamid@re-work.dev>
deriv-com · Sep 6, 2022 · eeeb533 · eeeb533
1 parent 503e77e
commit eeeb533
Show file tree

Hide file tree

Showing 14 changed files with 146 additions and 94 deletions.
diff --git a/...c/pages/on-ramp/__tests__/on-ramp.spec.js → .../pages/on-ramp/__tests__/on-ramp.spec.tsx b/...c/pages/on-ramp/__tests__/on-ramp.spec.js → .../pages/on-ramp/__tests__/on-ramp.spec.tsx
@@ -8,18 +8,30 @@ jest.mock('Stores/connect.js', () => ({
     default: 'mockedDefaultExport',
     connect: () => Component => Component,
 }));
-jest.mock('@deriv/components', () => ({
-    ...jest.requireActual('@deriv/components'),
-    Loading: () => <div>Loading</div>,
-    ReadMore: () => <div>ReadMore</div>,
-}));
+
+jest.mock('@deriv/components', () => {
+    return {
+        ...(jest.requireActual('@deriv/components') as any),
+        Loading: () => <div>Loading</div>,
+        ReadMore: () => <div>ReadMore</div>,
+    };
+});
 jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
-    ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
+    ...(jest.requireActual('@deriv/shared/src/utils/screen/responsive') as any),
     isMobile: jest.fn(),
 }));
-jest.mock('Components/cashier-locked', () => () => <div>CashierLocked</div>);
-jest.mock('Pages/on-ramp/on-ramp-provider-card', () => () => <div>OnRampProviderCard</div>);
-jest.mock('Pages/on-ramp/on-ramp-provider-popup', () => () => <div>OnRampProviderPopup</div>);
+jest.mock('Components/cashier-locked', () => {
+    const cashierLocked = () => <div>CashierLocked</div>;
+    return cashierLocked;
+});
+jest.mock('Pages/on-ramp/on-ramp-provider-card', () => {
+    const onRampProviderCard = () => <div>OnRampProviderCard</div>;
+    return onRampProviderCard;
+});
+jest.mock('Pages/on-ramp/on-ramp-provider-popup', () => {
+    const onRampProviderPopup = () => <div>OnRampProviderPopup</div>;
+    return onRampProviderPopup;
+});
 
 describe('<OnRamp />', () => {
     const props = {
@@ -34,6 +46,16 @@ describe('<OnRamp />', () => {
         setIsOnRampModalOpen: jest.fn(),
         setSideNotes: jest.fn(),
         routeTo: jest.fn(),
+        menu_options: [
+            {
+                label: 'Deposit',
+                path: routes.cashier_deposit,
+            },
+            {
+                label: 'Transfer',
+                path: routes.cashier_acc_transfer,
+            },
+        ],
     };
 
     it('should render <Loading /> component', () => {
@@ -97,7 +119,7 @@ describe('<OnRamp />', () => {
     });
 
     it('should show "What is Fiat onramp?" message and render <ReadMore /> component in Mobile mode', () => {
-        isMobile.mockReturnValue(true);
+        (isMobile as jest.Mock).mockReturnValue(true);
 
         render(<OnRamp {...props} />);
 
@@ -106,28 +128,18 @@ describe('<OnRamp />', () => {
     });
 
     it('should have proper menu options in Mobile mode', () => {
-        isMobile.mockReturnValue(true);
-        props.menu_options = [
-            {
-                label: 'Deposit',
-                path: routes.cashier_deposit,
-            },
-            {
-                label: 'Transfer',
-                path: routes.cashier_acc_transfer,
-            },
-        ];
+        (isMobile as jest.Mock).mockReturnValue(true);
 
-        const { container } = render(<OnRamp {...props} />);
-        const select = container.querySelector('#dt_components_select-native_select-tag');
-        const labels = Array.from(select).map(option => option.label);
+        render(<OnRamp {...props} />);
+        const select = screen.getByTestId('dt_on_ramp_select_native');
+        const labels = Array.from(select as any).map((option: any) => option.label);
 
         expect(labels).toContain('Deposit');
         expect(labels).toContain('Transfer');
     });
 
     it('should trigger "routeTo" callback when the user chooses a different from "Fiat onramp" option in Mobile mode', () => {
-        isMobile.mockReturnValue(true);
+        (isMobile as jest.Mock).mockReturnValue(true);
         props.menu_options = [
             {
                 label: 'Deposit',
@@ -143,8 +155,8 @@ describe('<OnRamp />', () => {
             },
         ];
 
-        const { container } = render(<OnRamp {...props} />);
-        const select = container.querySelector('#dt_components_select-native_select-tag');
+        render(<OnRamp {...props} />);
+        const select = screen.getByTestId('dt_on_ramp_select_native');
 
         fireEvent.change(select, { target: { value: routes.cashier_deposit } });
 

diff --git a/packages/cashier/src/pages/on-ramp/index.js b/packages/cashier/src/pages/on-ramp/index.js
diff --git a/packages/cashier/src/pages/on-ramp/index.ts b/packages/cashier/src/pages/on-ramp/index.ts
@@ -0,0 +1,3 @@
+import OnRamp from './on-ramp';
+
+export default OnRamp;
diff --git a/...d/__tests__/on-ramp-provider-card.spec.js → .../__tests__/on-ramp-provider-card.spec.tsx b/...d/__tests__/on-ramp-provider-card.spec.js → .../__tests__/on-ramp-provider-card.spec.tsx
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.js b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.js
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.ts b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.ts
@@ -0,0 +1,3 @@
+import OnRampProviderCard from './on-ramp-provider-card';
+
+export default OnRampProviderCard;
diff --git a/...p-provider-card/on-ramp-provider-card.jsx → ...p-provider-card/on-ramp-provider-card.tsx b/...p-provider-card/on-ramp-provider-card.jsx → ...p-provider-card/on-ramp-provider-card.tsx
@@ -1,10 +1,22 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Icon, NewsTicker, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
+import { TProviderDetails, TRootStore, TUiStore } from 'Types';
 
-const OnRampProviderCard = ({ is_dark_mode_on, provider, setSelectedProvider, is_mobile }) => {
+type TOnRampProviderCardProps = {
+    is_dark_mode_on: TUiStore['is_dark_mode_on'];
+    provider: TProviderDetails;
+    setSelectedProvider: (provider: TProviderDetails) => void;
+    is_mobile: TUiStore['is_mobile'];
+};
+
+const OnRampProviderCard = ({
+    is_dark_mode_on,
+    provider,
+    setSelectedProvider,
+    is_mobile,
+}: TOnRampProviderCardProps) => {
     const payment_icons = provider.getPaymentIcons();
     const gtm_identifier = provider.name.toLowerCase().replace(' ', '-');
     const logo_size = is_mobile ? 56 : 128;
@@ -52,14 +64,7 @@ const OnRampProviderCard = ({ is_dark_mode_on, provider, setSelectedProvider, is
     );
 };
 
-OnRampProviderCard.propTypes = {
-    is_dark_mode_on: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    provider: PropTypes.object, // External prop passed by parent.
-    setSelectedProvider: PropTypes.func,
-};
-
-export default connect(({ modules, ui }) => ({
+export default connect(({ modules, ui }: TRootStore) => ({
     setSelectedProvider: modules.cashier.onramp.setSelectedProvider,
     is_dark_mode_on: ui.is_dark_mode_on,
     is_mobile: ui.is_mobile,

diff --git a/.../__tests__/on-ramp-provider-popup.spec.js → ...__tests__/on-ramp-provider-popup.spec.tsx b/.../__tests__/on-ramp-provider-popup.spec.js → ...__tests__/on-ramp-provider-popup.spec.tsx
@@ -9,7 +9,7 @@ jest.mock('Stores/connect', () => ({
 }));
 
 jest.mock('@deriv/components', () => ({
-    ...jest.requireActual('@deriv/components'),
+    ...(jest.requireActual('@deriv/components') as any),
     Loading: () => <div>Loading</div>,
 }));
 

diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.js b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.js
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.ts b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.ts
@@ -0,0 +1,3 @@
+import OnRampProviderPopup from './on-ramp-provider-popup';
+
+export default OnRampProviderPopup;
diff --git a/...provider-popup/on-ramp-provider-popup.jsx → ...provider-popup/on-ramp-provider-popup.tsx b/...provider-popup/on-ramp-provider-popup.jsx → ...provider-popup/on-ramp-provider-popup.tsx
@@ -1,10 +1,29 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, HintBox, Icon, Loading, Popover, Text } from '@deriv/components';
 import { getKebabCase, website_name, isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
+import { TProviderDetails, TRootStore, TUiStore } from 'Types';
+
+type TOnRampProviderPopupProps = {
+    api_error: string;
+    deposit_address: string;
+    is_dark_mode_on: TUiStore['is_dark_mode_on'];
+    is_deposit_address_loading: boolean;
+    is_deposit_address_popover_open: boolean;
+    is_requesting_widget_html: boolean;
+    onClickCopyDepositAddress: () => void;
+    onClickDisclaimerContinue: () => void;
+    onClickGoToDepositPage: () => void;
+    selected_provider: TProviderDetails;
+    setDepositAddressRef: (ref: HTMLDivElement | null) => void;
+    setIsOnRampModalOpen: (boolean: boolean) => void;
+    should_show_dialog: boolean;
+    should_show_widget: boolean;
+    widget_error: string;
+    widget_html: string;
+};
 
 const OnRampProviderPopup = ({
     api_error,
@@ -23,7 +42,7 @@ const OnRampProviderPopup = ({
     should_show_widget,
     widget_error,
     widget_html,
-}) => {
+}: TOnRampProviderPopupProps) => {
     const el_onramp_widget_container_ref = React.useRef(null);
 
     // JS executed after "on-ramp__widget-container" has been added to the DOM.
@@ -173,26 +192,7 @@ const OnRampProviderPopup = ({
     );
 };
 
-OnRampProviderPopup.propTypes = {
-    api_error: PropTypes.string,
-    deposit_address: PropTypes.string,
-    is_dark_mode_on: PropTypes.bool,
-    is_deposit_address_loading: PropTypes.bool,
-    is_deposit_address_popover_open: PropTypes.bool,
-    is_requesting_widget_html: PropTypes.bool,
-    onClickCopyDepositAddress: PropTypes.func,
-    onClickDisclaimerContinue: PropTypes.func,
-    onClickGoToDepositPage: PropTypes.func,
-    selected_provider: PropTypes.object,
-    setDepositAddressRef: PropTypes.func,
-    setIsOnRampModalOpen: PropTypes.func,
-    should_show_dialog: PropTypes.bool,
-    should_show_widget: PropTypes.bool,
-    widget_error: PropTypes.string,
-    widget_html: PropTypes.string,
-};
-
-export default connect(({ modules, ui }) => ({
+export default connect(({ modules, ui }: TRootStore) => ({
     api_error: modules.cashier.onramp.api_error,
     deposit_address: modules.cashier.onramp.deposit_address,
     is_dark_mode_on: ui.is_dark_mode_on,

diff --git a/...ges/cashier/src/pages/on-ramp/on-ramp.jsx → ...ges/cashier/src/pages/on-ramp/on-ramp.tsx b/...ges/cashier/src/pages/on-ramp/on-ramp.jsx → ...ges/cashier/src/pages/on-ramp/on-ramp.tsx
@@ -1,15 +1,45 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading, Modal, SelectNative, ReadMore, Text } from '@deriv/components';
 import { routes, isMobile } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import CashierLocked from 'Components/cashier-locked';
+import SideNote from 'Components/side-note';
+import { TCommonStore, TClientStore, TProviderDetails, TReactFormEvent, TRootStore } from 'Types';
 import OnRampProviderCard from './on-ramp-provider-card';
 import OnRampProviderPopup from './on-ramp-provider-popup';
-import SideNote from 'Components/side-note';
 import './on-ramp.scss';
 
+type TMenuOption = {
+    count?: number;
+    default: boolean;
+    icon: string;
+    label: string;
+    value: string;
+    path: string;
+    has_side_note: boolean;
+};
+
+type TOnRampProps = {
+    filtered_onramp_providers: TProviderDetails[];
+    is_cashier_locked: boolean;
+    is_cashier_onboarding: boolean;
+    is_deposit_locked: boolean;
+    is_onramp_modal_open: boolean;
+    is_switching: TClientStore['is_switching'];
+    is_loading: boolean;
+    menu_options: TMenuOption[];
+    onMountOnramp: () => void;
+    onUnmountOnramp: () => void;
+    onramp_popup_modal_title: string;
+    resetPopup: () => void;
+    routeTo: TCommonStore['routeTo'];
+    setIsOnRampModalOpen: (set_is_on_ramp_modal_open: boolean) => void;
+    setSideNotes: (ReactComponent: React.ReactElement[]) => void;
+    should_show_dialog: boolean;
+    tab_index: number;
+};
+
 const OnRampSideNote = () => {
     const notes = [
         <Localize
@@ -20,6 +50,7 @@ const OnRampSideNote = () => {
 
     return <SideNote side_notes={notes} title={<Localize i18n_default_text='What is Fiat onramp?' />} />;
 };
+
 const OnRampInfo = () => (
     <div className='on-ramp__info'>
         <Text color='prominent' size='s' weight='bold' className='on-ramp__info-header' as='p'>
@@ -56,7 +87,7 @@ const OnRamp = ({
     should_show_dialog,
     setSideNotes,
     tab_index,
-}) => {
+}: TOnRampProps) => {
     const [selected_cashier_path, setSelectedCashierPath] = React.useState(routes.cashier_onramp);
 
     React.useEffect(() => {
@@ -93,11 +124,12 @@ const OnRamp = ({
                 {isMobile() && (
                     <React.Fragment>
                         <SelectNative
+                            data_testid='dt_on_ramp_select_native'
                             className='on-ramp__selector'
                             list_items={getActivePaths()}
                             value={selected_cashier_path}
                             should_show_empty_option={false}
-                            onChange={e => {
+                            onChange={(e: TReactFormEvent) => {
                                 if (e.currentTarget.value !== selected_cashier_path) {
                                     setSelectedCashierPath(e.currentTarget.value);
                                 }
@@ -138,27 +170,7 @@ const OnRamp = ({
     );
 };
 
-OnRamp.propTypes = {
-    filtered_onramp_providers: PropTypes.array,
-    is_cashier_onboarding: PropTypes.bool,
-    is_cashier_locked: PropTypes.bool,
-    is_deposit_locked: PropTypes.bool,
-    is_onramp_modal_open: PropTypes.bool,
-    is_loading: PropTypes.bool,
-    is_switching: PropTypes.bool,
-    menu_options: PropTypes.array,
-    onMountOnramp: PropTypes.func,
-    onUnmountOnramp: PropTypes.func,
-    onramp_popup_modal_title: PropTypes.string,
-    resetPopup: PropTypes.func,
-    routeTo: PropTypes.func,
-    setIsOnRampModalOpen: PropTypes.func,
-    setSideNotes: PropTypes.func,
-    should_show_dialog: PropTypes.bool,
-    tab_index: PropTypes.number,
-};
-
-export default connect(({ modules, common, client }) => ({
+export default connect(({ modules, common, client }: TRootStore) => ({
     filtered_onramp_providers: modules.cashier.onramp.filtered_onramp_providers,
     is_cashier_onboarding: modules.cashier.general_store.is_cashier_onboarding,
     is_cashier_locked: modules.cashier.general_store.is_cashier_locked,

diff --git a/packages/cashier/src/types/shared/index.ts b/packages/cashier/src/types/shared/index.ts
@@ -1,5 +1,6 @@
 export * from './crypto-transaction-details.types';
 export * from './error.types';
 export * from './props.types';
+export * from './provider.types';
 export * from './routes.types';
 export * from './websocket.types';
diff --git a/packages/cashier/src/types/shared/provider.types.ts b/packages/cashier/src/types/shared/provider.types.ts
@@ -0,0 +1,22 @@
+import { MutableRefObject } from 'react';
+
+export type TProviderDetails = {
+    icon: {
+        dark: string;
+        light: string;
+    };
+    name: string;
+    getDescription: () => string;
+    getAllowedResidencies: () => string[];
+    getPaymentIcons: () => {
+        dark: string;
+        light: string;
+    }[];
+    getScriptDependencies: () => any[];
+    getDefaultFromCurrency: () => string;
+    getFromCurrencies: () => string;
+    getToCurrencies: () => string;
+    getWidgetHtml: () => Promise<void>;
+    onMountWidgetContainer: (ref?: MutableRefObject<any>) => void;
+    should_show_deposit_address: boolean;
+};