[COJ]/Likhith/coj 782/refactor profile section code phase1 (binary-co…

…m#15443) * chore: configured translations * chore: migrated personal details to tsx * fix: file extension * chore: removed react import * fix: failing testcase * fix: failed testcases * fix: failed testcases * fix: failed testcases * chore: replaced hintbox with InlineMessage * chore: reverted translation changes * chore: reverted translation changes * fix: incorporated review comments * chore: reverted translation version * fix: import issue in CFD
mitra-deriv · Jun 6, 2024 · c84b1f7 · c84b1f7
1 parent 64b0875
commit c84b1f7
Show file tree

Hide file tree

Showing 25 changed files with 295 additions and 239 deletions.
diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js
@@ -92,7 +92,6 @@ module.exports = function (env) {
                 '@deriv/utils': '@deriv/utils',
                 '@deriv/quill-icons': `@deriv/quill-icons`,
                 '@deriv-com/utils': '@deriv-com/utils',
-                '@deriv-com/translations': '@deriv-com/translations',
             },
             /^@deriv\/shared\/.+$/,
             /^@deriv\/components\/.+$/,

diff --git a/packages/account/src/App.tsx b/packages/account/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Routes from './Containers/routes';
 import ResetTradingPassword from './Containers/reset-trading-password';
 import { NetworkStatusToastErrorPopup } from './Containers/toast-popup';

diff --git a/packages/account/src/Components/form-body/form-body.tsx b/packages/account/src/Components/form-body/form-body.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+// [TODO] - To be removed once CFD is configured to use the new form-body component
+import React, { PropsWithChildren, Fragment } from 'react';
 import { ScrollbarsContainer } from '../scrollbars-container/scrollbars-container';
 import { Div100vhContainer, DesktopWrapper, MobileWrapper } from '@deriv/components';
 import clsx from 'clsx';
@@ -8,8 +9,8 @@ type TFormBody = {
     className?: string;
 };
 
-export const FormBody = ({ children, scroll_offset, className }: React.PropsWithChildren<TFormBody>) => (
-    <React.Fragment>
+export const FormBody = ({ children, scroll_offset, className }: PropsWithChildren<TFormBody>) => (
+    <Fragment>
         <DesktopWrapper>
             <ScrollbarsContainer
                 className={clsx('account__scrollbars_container--grid-layout', className)}
@@ -26,5 +27,5 @@ export const FormBody = ({ children, scroll_offset, className }: React.PropsWith
                 {children}
             </Div100vhContainer>
         </MobileWrapper>
-    </React.Fragment>
+    </Fragment>
 );
diff --git a/packages/account/src/Components/form-sub-header/form-sub-header.tsx b/packages/account/src/Components/form-sub-header/form-sub-header.tsx
@@ -1,5 +1,6 @@
+// [TODO] - To be removed once CFD is configured to use the new form-body component
+import React, { Fragment } from 'react';
 import clsx from 'clsx';
-import React from 'react';
 import { Text } from '@deriv/components';
 
 export type TFormSubHeader = {
@@ -13,7 +14,7 @@ export const FormSubHeader = ({ description, subtitle, title, title_text_size =
     const title_as_class = title.replace(/\s+/g, '-').toLowerCase();
 
     return (
-        <React.Fragment>
+        <Fragment>
             <div
                 className={clsx('account-form__header', title_as_class, {
                     'account-form__header--has-description': !!description,
@@ -42,6 +43,6 @@ export const FormSubHeader = ({ description, subtitle, title, title_text_size =
                     {description}
                 </Text>
             )}
-        </React.Fragment>
+        </Fragment>
     );
 };
diff --git a/packages/account/src/Components/forms/form-fields/date-of-birth-field.tsx b/packages/account/src/Components/forms/form-fields/date-of-birth-field.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 //@ts-nocheck [TODO] - Need to fix typescript errors
-
+// [TODO] - Remove React after CFD is configured with new JSX transformer
 import React from 'react';
 import { Field, FieldProps } from 'formik';
 import { DateOfBirthPicker } from '@deriv/components';
@@ -17,7 +17,7 @@ type TDateOfBirthFieldProps = {
  * @param name - Name of the field
  * @param portal_id - Portal ID
  * @param [props] - Other props to pass to DateOfBirthPicker
- * @returns {React.ReactNode}
+ * @returns {ReactNode}
  */
 const DateOfBirthField = ({ name, portal_id, ...rest }: TDateOfBirthFieldProps) => (
     <Field name={name}>

diff --git a/packages/account/src/Components/forms/form-select-field.tsx b/packages/account/src/Components/forms/form-select-field.tsx
@@ -1,7 +1,7 @@
+import { FC, Fragment } from 'react';
 import { Autocomplete, SelectNative } from '@deriv/components';
 import { useStore } from '@deriv/stores';
 import { Field, FieldProps, FormikErrors } from 'formik';
-import React from 'react';
 import { TGetField } from '../additional-kyc-info-modal/form-config';
 import { TListItem } from 'Types';
 
@@ -16,7 +16,7 @@ type TSetFieldValue = (
     shouldValidate?: boolean
 ) => Promise<void | FormikErrors<Record<string, string>>>;
 
-const FormSelectField: React.FC<TFormSelectField> = ({
+const FormSelectField: FC<TFormSelectField> = ({
     label,
     name,
     required = false,
@@ -38,7 +38,7 @@ const FormSelectField: React.FC<TFormSelectField> = ({
     return (
         <Field name={name}>
             {({ field, meta: { touched, error }, form: { setFieldValue } }: FieldProps<string>) => (
-                <React.Fragment>
+                <Fragment>
                     {is_mobile ? (
                         <SelectNative
                             {...field}
@@ -71,7 +71,7 @@ const FormSelectField: React.FC<TFormSelectField> = ({
                             list_height={list_height}
                         />
                     )}
-                </React.Fragment>
+                </Fragment>
             )}
         </Field>
     );

diff --git a/packages/account/src/Components/language-settings/__tests__/language-radio-button.spec.tsx b/packages/account/src/Components/language-settings/__tests__/language-radio-button.spec.tsx
@@ -23,7 +23,7 @@ describe('LanguageRadioButton', () => {
     const mock_props: TLanguageRadioButton = {
         is_current_language: true,
         id: 'test id',
-        language_code: 'lang_1',
+        language_text: 'Lang 1',
         name: 'Test Language',
         onChange: jest.fn(),
     };
@@ -32,7 +32,7 @@ describe('LanguageRadioButton', () => {
         render(<LanguageRadioButton {...mock_props} />);
 
         expect(screen.getByText('Flag Icon')).toBeInTheDocument();
-        expect(screen.getByText('Test Lang 1')).toBeInTheDocument();
+        expect(screen.getByText('Lang 1')).toBeInTheDocument();
         expect(screen.getByTestId('dt_language_settings_button')).toHaveClass(
             'settings-language__language-link--active'
         );
@@ -44,7 +44,7 @@ describe('LanguageRadioButton', () => {
         render(<LanguageRadioButton {...mock_props} />);
 
         expect(screen.getByText('Flag Icon')).toBeInTheDocument();
-        expect(screen.getByText('Test Lang 1')).toBeInTheDocument();
+        expect(screen.getByText('Lang 1')).toBeInTheDocument();
         expect(screen.getByTestId('dt_language_settings_button')).not.toHaveClass(
             'settings-language__language-link--active'
         );

diff --git a/packages/account/src/Components/language-settings/language-radio-button.tsx b/packages/account/src/Components/language-settings/language-radio-button.tsx
@@ -1,32 +1,30 @@
-import React from 'react';
+import { ChangeEventHandler } from 'react';
 import { Text, Icon } from '@deriv/components';
 import clsx from 'clsx';
-import { getAllowedLanguages } from '@deriv/translations';
 
 export type TLanguageRadioButton = {
     is_current_language: boolean;
     id: string;
-    language_code: string;
+    language_text: string;
     name: string;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onChange: ChangeEventHandler<HTMLInputElement>;
 };
 
-const LanguageRadioButton = ({ is_current_language, id, language_code, name, onChange }: TLanguageRadioButton) => {
-    const allowed_languages: Record<string, string> = getAllowedLanguages();
+const LanguageRadioButton = ({ is_current_language, id, language_text, name, onChange }: TLanguageRadioButton) => {
     return (
         <div
             className={clsx('settings-language__language-link', {
                 'settings-language__language-link--active': is_current_language,
             })}
-            id={`dt_settings_${language_code}_button`}
+            id={`dt_settings_${id}_button`}
             data-testid={'dt_language_settings_button'}
         >
             <input
                 type='radio'
                 id={id}
                 name={name}
                 onChange={onChange}
-                value={language_code}
+                value={id}
                 className='settings-language__language--radio-button'
             />
             <label htmlFor={id} className='settings-language__language--center-label'>
@@ -43,7 +41,7 @@ const LanguageRadioButton = ({ is_current_language, id, language_code, name, onC
                             'settings-language__language-name--active': is_current_language,
                         })}
                     >
-                        {allowed_languages[language_code]}
+                        {language_text}
                     </Text>
                 </div>
             </label>

diff --git a/packages/account/src/Components/load-error-message/load-error-message.tsx b/packages/account/src/Components/load-error-message/load-error-message.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { Icon } from '@deriv/components';
 import IconMessageContent from '../icon-message-content';
 
 type TLoadErrorMessage = {
-    error_message: React.ReactNode;
+    error_message: ReactNode;
 };
 
 const LoadErrorMessage = ({ error_message }: TLoadErrorMessage) => (