refactor: ♻️ migrated code to TS

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

@@ -119,8 +119,8 @@ describe('<TermsOfUse/>', () => {
     });
 
     it('should render TermsOfUse component for maltainvest accounts and show "Add account" button for mobile', () => {
-        isMobile.mockReturnValue(true);
-        isDesktop.mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
 
         mock_props.real_account_signup_target = 'maltainvest';
 

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Checkbox } from '@deriv/components';
+import { FieldInputProps } from 'formik';
+
+type TCheckboxFieldProps = {
+    field: FieldInputProps<boolean>;
+    id: string;
+    className: string;
+    label: string;
+};
+
+/**
+ * This component is used with Formik's Field component.
+ * @param {FieldInputProps<boolean>} field - Formik's field props
+ * @param {string} id - Checkbox id
+ * @param {string} className - Class name for styling
+ * @param {string} label - Checkbox label
+ * @param {object} props - Other props
+ * @returns {React.ReactNode} - React node
+ */
+const CheckboxField = ({ field: { name, value, onChange }, id, label, className, ...props }: TCheckboxFieldProps) => {
+    return (
+        <div className={className}>
+            <Checkbox value={value} name={name} label={label} onChange={onChange} {...props} />
+        </div>
+    );
+};
+
+export default CheckboxField;

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

@@ -0,0 +1,3 @@
+import TermsOfUse from './terms-of-use';
+
+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

@@ -2,10 +2,22 @@ import React from 'react';
 import { Localize } from '@deriv/translations';
 import { getLegalEntityName } from '@deriv/shared';
 import { Text } from '@deriv/components';
+import { TBrokerCodes } from 'Types';
 
+/**
+ * Renders a horizontal line
+ * @name Hr
+ * @returns {JSX.Element}
+ */
 export const Hr = () => <div className='terms-of-use__hr' />;
 
-export const BrokerSpecificMessage = ({ target }) => (
+/**
+ * Renders the broker specific message based on the broker code
+ *@name BrokerSpecificMessage
+ * @param {TBrokerCodes} param - The broker code string
+ * @returns {JSX.Element}
+ */
+export const BrokerSpecificMessage = ({ target }: { target: TBrokerCodes }) => (
     <React.Fragment>
         {target === 'svg' && <SVGDescription />}
         {target === 'iom' && <IOMDescription />}
@@ -15,6 +27,11 @@ export const BrokerSpecificMessage = ({ target }) => (
     </React.Fragment>
 );
 
+/**
+ * Returns the terms of use message specific to SVG broker code
+ * @name SVGDescription
+ * @returns {JSX.Element}
+ */
 export const SVGDescription = () => (
     <React.Fragment>
         <Text as='h4' size='xs' weight='bold'>
@@ -44,6 +61,11 @@ export const SVGDescription = () => (
     </React.Fragment>
 );
 
+/**
+ * Returns the terms of use message specific to IOM broker code
+ * @name IOMDescription
+ * @returns {JSX.Element}
+ */
 export const IOMDescription = () => (
     <React.Fragment>
         <Text as='h4' size='xs' weight='bold'>
@@ -62,6 +84,11 @@ export const IOMDescription = () => (
     </React.Fragment>
 );
 
+/**
+ * Returns the terms of use message specific to Malta broker code
+ * @name MaltaDescription
+ * @returns {JSX.Element}
+ */
 export const MaltaDescription = () => (
     <React.Fragment>
         <Text as='h4' size='xs' weight='bold'>
@@ -80,6 +107,11 @@ export const MaltaDescription = () => (
     </React.Fragment>
 );
 
+/**
+ * Returns the terms of use message specific to MaltaInvest broker code
+ * @name MaltaInvestDescription
+ * @returns {JSX.Element}
+ */
 export const MaltaInvestDescription = () => (
     <React.Fragment>
         <Text as='h4' size='xs' weight='bold'>
@@ -109,6 +141,11 @@ export const MaltaInvestDescription = () => (
     </React.Fragment>
 );
 
+/**
+ * Returns the terms of use message specific to Samoa broker code
+ * @name SamoaDescription
+ * @returns {JSX.Element}
+ */
 export const SamoaDescription = () => (
     <React.Fragment>
         <Text as='h4' size='xs' weight='bold'>
@@ -138,6 +175,11 @@ export const SamoaDescription = () => (
     </React.Fragment>
 );
 
+/**
+ * Returns the generic terms of use message
+ * @name SVGDescription
+ * @returns {JSX.Element}
+ */
 export const SharedMessage = () => (
     <React.Fragment>
         <Text as='h4' size='xs' weight='bold'>

packages/account/src/Components/terms-of-use/terms-of-use.scss

@@ -4,6 +4,7 @@
     flex-grow: 1;
     margin: 0 8rem !important;
     width: 84% !important;
+    padding-bottom: unset;
 
     @include mobile {
         margin: unset !important;

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

@@ -11,10 +11,45 @@ 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 { TBrokerCodes } from 'Types';
+import CheckboxField from './checkbox-field';
+import { SharedMessage, BrokerSpecificMessage, Hr } from './terms-of-use-messages';
 import './terms-of-use.scss';
 
+type TTermsOfUseFormProps = {
+    agreed_tos: boolean;
+    agreed_tnc: boolean;
+};
+
+type TTermsOfUseProps = {
+    getCurrentStep: () => number;
+    onCancel: (current_step: number, goToPreviousStep: () => void) => void;
+    goToPreviousStep: () => void;
+    goToNextStep: () => void;
+    onSubmit: (
+        current_step: number | null,
+        values: TTermsOfUseFormProps,
+        action: (isSubmitting: boolean) => void,
+        next_step: () => void
+    ) => void;
+    value: TTermsOfUseFormProps;
+    real_account_signup_target: TBrokerCodes;
+    form_error?: string;
+};
+
+/**
+ * Terms of use component for account signup
+ * @param {Function} getCurrentStep - function to get current step
+ * @param {Function} onCancel - function to cancel account signup
+ * @param {Function} goToPreviousStep - function to go to previous step
+ * @param {Function} goToNextStep - function to go to next step
+ * @param {Function} onSubmit - function to submit form
+ * @param {object} value - form values
+ * @param {string} real_account_signup_target - broker code
+ * @param {string} form_error - form error
+ * @param {object} props - other props
+ * @returns {React.ReactNode} - React node
+ */
 const TermsOfUse = ({
     getCurrentStep,
     onCancel,
@@ -24,7 +59,7 @@ const TermsOfUse = ({
     value,
     real_account_signup_target,
     ...props
-}) => {
+}: TTermsOfUseProps) => {
     const { is_appstore } = React.useContext(PlatformContext);
 
     const handleCancel = () => {
@@ -43,7 +78,7 @@ const TermsOfUse = ({
         <Formik
             initialValues={value}
             onSubmit={(values, actions) => {
-                onSubmit(getCurrentStep() - 1, {}, actions.setSubmitting, goToNextStep);
+                onSubmit(getCurrentStep() - 1, values, actions.setSubmitting, goToNextStep);
             }}
         >
             {({ handleSubmit, values, isSubmitting }) => (
@@ -56,10 +91,7 @@ const TermsOfUse = ({
                                 is_disabled={isDesktop()}
                             >
                                 <ThemedScrollbars>
-                                    <div
-                                        className={cn('details-form__elements', 'terms-of-use')}
-                                        style={{ paddingBottom: isDesktop() ? 'unset' : null }}
-                                    >
+                                    <div className={cn('details-form__elements', 'terms-of-use')}>
                                         <BrokerSpecificMessage target={real_account_signup_target} />
                                         <Hr />
                                         <SharedMessage />

packages/account/src/Configs/terms-of-use-config.ts

@@ -1,7 +1,6 @@
-import { getDefaultFields, isDesktop } from '@deriv/shared';
+import { getDefaultFields, isDesktop, TSchema } from '@deriv/shared';
 
 import { localize } from '@deriv/translations';
-import { TSchema } from 'Types';
 
 const terms_of_use_config: TSchema = {
     agreed_tos: {

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

@@ -150,6 +150,8 @@ export type TPersonalDetailsForm = {
 
 export type TInputFieldValues = Record<string, string>;
 
+export type TBrokerCodes = 'svg' | 'iom' | 'malta' | 'maltainvest' | 'samoa';
+
 export type TVerificationStatus = Readonly<
     Record<'none' | 'pending' | 'rejected' | 'verified' | 'expired' | 'suspected', string>
 >;