Sanjam/74188/ts migration of terms of use

packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.js → packages/account/src/Components/terms-of-use/__tests__/terms-of-use.spec.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { isDesktop, isMobile, PlatformContext } from '@deriv/shared';
-import TermsOfUse from '../terms-of-use';
+import TermsOfUse, { TTermsOfUse } from '../terms-of-use';
 
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
     isDesktop: jest.fn(() => true),
     isMobile: jest.fn(() => false),
+    checked: Boolean,
 }));
 
 describe('<TermsOfUse/>', () => {
@@ -30,7 +31,7 @@ describe('<TermsOfUse/>', () => {
     const svg_description =
         'Your account will be opened with Deriv (SVG) LLC, and will be subject to the laws of Saint Vincent and the Grenadines.';
 
-    const mock_props = {
+    const mock_props: TTermsOfUse = {
         getCurrentStep: jest.fn(),
         goToNextStep: jest.fn(),
         goToPreviousStep: jest.fn(),
@@ -166,8 +167,8 @@ describe('<TermsOfUse/>', () => {
         expect(mock_props.getCurrentStep).toHaveBeenCalledTimes(1);
         expect(mock_props.onCancel).toHaveBeenCalledTimes(1);
 
-        const agree_checkbox = screen.getByLabelText(agree_check);
-        const not_pep_checkbox = screen.getByLabelText(not_pep_check);
+        const agree_checkbox: HTMLInputElement = screen.getByLabelText(agree_check);
+        const not_pep_checkbox: HTMLInputElement = screen.getByLabelText(not_pep_check);
         expect(agree_checkbox.checked).toBeFalsy();
         expect(not_pep_checkbox.checked).toBeFalsy();
 

packages/account/src/Components/terms-of-use/checkbox-field.jsx → packages/account/src/Components/terms-of-use/checkbox-field.tsx

@@ -4,7 +4,18 @@ import { Checkbox } from '@deriv/components';
 /*
  * This component is used with Formik's Field component.
  */
-const CheckboxField = ({ field: { name, value, onChange }, id, label, className, ...props }) => {
+type TCheckBoxField = {
+    field: {
+        name: string;
+        value: boolean;
+        onChange: () => void;
+    };
+    id: string;
+    label: string;
+    className: string;
+};
+
+const CheckboxField = ({ field: { name, value, onChange }, id, label, className, ...props }: TCheckBoxField) => {
     return (
         <div className={className}>
             <Checkbox value={value} name={name} label={label} onChange={onChange} {...props} />

packages/account/src/Components/terms-of-use/index.js

@@ -1,3 +1,3 @@
-import TermsOfUse from './terms-of-use.jsx';
+import TermsOfUse from './terms-of-use.tsx';
 
 export default TermsOfUse;

packages/account/src/Components/terms-of-use/terms-of-use-messages.jsx → packages/account/src/Components/terms-of-use/terms-of-use-messages.tsx

@@ -3,9 +3,13 @@ import { Localize } from '@deriv/translations';
 import { getLegalEntityName } from '@deriv/shared';
 import { Text } from '@deriv/components';
 
+type TBrokerSpecificMessage = {
+    target: string;
+};
+
 export const Hr = () => <div className='terms-of-use__hr' />;
 
-export const BrokerSpecificMessage = ({ target }) => (
+export const BrokerSpecificMessage = ({ target }: TBrokerSpecificMessage) => (
     <React.Fragment>
         {target === 'svg' && <SVGDescription />}
         {target === 'iom' && <IOMDescription />}

packages/account/src/Components/terms-of-use/terms-of-use.jsx → packages/account/src/Components/terms-of-use/terms-of-use.tsx

@@ -1,5 +1,5 @@
-import { Field, Formik } from 'formik';
-import React from 'react';
+import { Field, Formik, FormikValues } from 'formik';
+import React, { HtmlHTMLAttributes } from 'react';
 import cn from 'classnames';
 import {
     Div100vhContainer,
@@ -11,27 +11,46 @@ import {
 } from '@deriv/components';
 import { isDesktop, isMobile, PlatformContext } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
-import CheckboxField from './checkbox-field.jsx';
-import { SharedMessage, BrokerSpecificMessage, Hr } from './terms-of-use-messages.jsx';
+import CheckboxField from './checkbox-field';
+import { SharedMessage, BrokerSpecificMessage, Hr } from './terms-of-use-messages';
 import './terms-of-use.scss';
+import { TPlatformContext } from 'Types';
+
+type TTermsOfUseExtend = {
+    getCurrentStep: () => number;
+    goToPreviousStep: () => void;
+    goToNextStep: () => void;
+    onCancel: (current_step: number, goToPreviousStep: () => void) => void;
+    onSubmit: (
+        current_step: number | null,
+        values: FormikValues,
+        action: (isSubmitting: boolean) => void,
+        next_step: () => void
+    ) => void;
+    real_account_signup_target: string;
+    value: FormikValues;
+    form_error?: string;
+    isDesktop?: string | number | undefined;
+};
+
+export type TTermsOfUse = HtmlHTMLAttributes<HTMLInputElement | HTMLLabelElement> & TTermsOfUseExtend;
 
 const TermsOfUse = ({
-    getCurrentStep,
     onCancel,
+    getCurrentStep,
     goToPreviousStep,
     goToNextStep,
     onSubmit,
     value,
     real_account_signup_target,
     ...props
-}) => {
-    const { is_appstore } = React.useContext(PlatformContext);
+}: TTermsOfUse) => {
+    const { is_appstore }: Partial<TPlatformContext> = React.useContext(PlatformContext);
 
     const handleCancel = () => {
         const current_step = getCurrentStep() - 1;
         onCancel(current_step, goToPreviousStep);
     };
-
     const getSubmitButtonLabel = () => {
         if (is_appstore) {
             return localize('Finish');
@@ -58,7 +77,7 @@ const TermsOfUse = ({
                                 <ThemedScrollbars>
                                     <div
                                         className={cn('details-form__elements', 'terms-of-use')}
-                                        style={{ paddingBottom: isDesktop() ? 'unset' : null }}
+                                        style={{ paddingBottom: isDesktop() ? 'unset' : '0' }}
                                     >
                                         <BrokerSpecificMessage target={real_account_signup_target} />
                                         <Hr />
@@ -102,8 +121,9 @@ const TermsOfUse = ({
                                     is_absolute={isMobile()}
                                     onCancel={() => handleCancel()}
                                     cancel_label={localize('Previous')}
-                                    form_error={props.form_error}
+                                    form_errors={props.form_error}
                                 />
+                                console.log(agreed_tnc)
                             </Modal.Footer>
                         </form>
                     )}

packages/account/src/Types/common-prop.types.ts

@@ -0,0 +1,63 @@
+/** Add types that are shared between components */
+
+type TradingAccountDetail = {
+    linked_to: {
+        account_id: string;
+        balance: string;
+        currency: string;
+        payment_method: string;
+    };
+};
+
+export type TAuthAccountInfo = {
+    account_type: 'trading' | 'wallet';
+    balance: number;
+    country: string | undefined;
+    created_at: number;
+    currency: string;
+    email: string;
+    is_disabled: 0 | 1;
+    is_virtual: 0 | 1;
+    landing_company_name: string;
+    landing_company_shortcode: string;
+    residence: string;
+    trading: TradingAccountDetail;
+};
+
+export type TPlatformContext = {
+    is_appstore: boolean;
+};
+
+export type TCurrencyInfo = {
+    fractional_digits: number;
+    is_deposit_suspended: 0 | 1;
+    is_suspended: 0 | 1;
+    is_withdrawal_suspended: 0 | 1;
+    name: string;
+    stake_default: number;
+    transfer_between_accounts: {
+        fees: {
+            [key: string]: number;
+        };
+        limits: {
+            max: number;
+            min: number;
+        } | null;
+    };
+    type: 'fiat' | 'crypto';
+    value: string;
+};
+
+export type TFormValidation = {
+    warnings: { [key: string]: string };
+    errors: { [key: string]: string };
+};
+
+export type TRealAccount = {
+    active_modal_index: number;
+    current_currency: string;
+    error_message: string;
+    previous_currency: string;
+    success_message: string;
+    error_code: number;
+};

packages/account/tsconfig.json

@@ -2,6 +2,7 @@
     "extends": "../../tsconfig.json",
     "compilerOptions": {
         "outDir": "./dist",
+        "rootDir": "./src",
         "baseUrl": "./",
         "paths": {
             "Assets/*": ["src/Assets/*"],

packages/components/src/components/auto-height-wrapper/auto-height-wrapper.tsx

@@ -3,7 +3,7 @@ import { usePrevious } from '../../hooks';
 
 type TAutoHeightWrapperChildProps = {
     height: number | string;
-    setRef: (ref: HTMLElement) => void;
+    setRef: (ref: HTMLElement | HTMLFormElement | null) => void;
 };
 
 type TAutoHeightWrapperProps = {
@@ -31,8 +31,8 @@ const AutoHeightWrapper = (props: TAutoHeightWrapperProps) => {
                 : props.default_height
         );
 
-    const setRef = (ref: HTMLElement) => {
-        if (Number.isInteger(ref?.clientHeight) && ref.clientHeight !== prev_child_client_height) {
+    const setRef = (ref: HTMLElement | HTMLFormElement | null) => {
+        if (Number.isInteger(ref?.clientHeight) && ref?.clientHeight !== prev_child_client_height) {
             child_client_height_ref.current = ref.clientHeight;
             setTimeout(updateHeight, 0);
         }

packages/components/src/components/div100vh-container/div100vh-container.tsx

@@ -38,7 +38,8 @@ const Div100vhContainer = ({
         height: max_autoheight_offset ? '' : height_rule,
         maxHeight: max_autoheight_offset ? `calc(100rvh - ${max_autoheight_offset})` : '',
     };
-    if (is_bypassed) return children as JSX.Element;
+
+    if (is_bypassed) return <React.Fragment>{children}</React.Fragment>;
     return (
         <Div100vh id={id} className={className} style={is_disabled ? {} : height_style}>
             {children}

packages/components/src/components/modal/modal-footer.tsx

@@ -8,7 +8,7 @@ type TFooter = {
 };
 
 const Footer = ({ children, className, has_separator, is_bypassed }: React.PropsWithChildren<Partial<TFooter>>) => {
-    if (is_bypassed) return children;
+    if (is_bypassed) return <React.Fragment>{children}</React.Fragment>;
     return (
         <div
             data-testid='dt_modal_footer'