P2PS 899 refactor my profile form

packages/p2p/src/components/my-profile/my-profile-form/__test__/my-profile-form.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useStores } from 'Stores/index';
+import MyProfileForm from '../my-profile-form';
+
+let mock_store: DeepPartial<ReturnType<typeof useStores>>;
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    DesktopWrapper: jest.fn(({ children }) => children),
+    MobileWrapper: jest.fn(({ children }) => children),
+    MobileFullPageModal: ({
+        children,
+        pageHeaderReturnFn = mock_store.setActiveTab,
+        page_header_text = 'Ad details',
+    }) => (
+        <div>
+            {page_header_text}
+            <button onClick={pageHeaderReturnFn}>Return</button>
+            {children}
+        </div>
+    ),
+}));
+
+describe('<MyProfileForm />', () => {
+    beforeEach(() => {
+        mock_store = {
+            my_profile_store: {
+                is_loading: false,
+                setActiveTab: jest.fn(),
+            },
+            general_store: {
+                contact_info: '',
+                default_advert_description: '',
+            },
+        };
+    });
+
+    it('should render MyProfileForm component', () => {
+        render(<MyProfileForm />);
+
+        expect(screen.getAllByText('Contact details').length).toBe(2);
+        expect(screen.getAllByText('Instructions').length).toBe(2);
+    });
+
+    it('should render the Loading component when my_profile_store.is_loading is set to true', () => {
+        mock_store.my_profile_store.is_loading = true;
+
+        render(<MyProfileForm />);
+
+        expect(screen.getByTestId('dt_initial_loader')).toBeInTheDocument();
+    });
+
+    it('expects the setActiveTab function to be called when return function is clicked', () => {
+        render(<MyProfileForm />);
+
+        const returnButton = screen.getByRole('button', { name: 'Return' });
+        userEvent.click(returnButton);
+
+        expect(screen.getByText('Ad details')).toBeInTheDocument();
+        expect(mock_store.my_profile_store.setActiveTab).toHaveBeenCalledTimes(1);
+    });
+});

packages/p2p/src/components/my-profile/my-profile-form/index.js → packages/p2p/src/components/my-profile/my-profile-form/index.ts

@@ -1,4 +1,4 @@
-import MyProfileForm from './my-profile-form.jsx';
+import MyProfileForm from './my-profile-form';
 import './my-profile-form.scss';
 
 export default MyProfileForm;

packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.jsx → packages/p2p/src/components/my-profile/my-profile-form/my-profile-form.tsx

@@ -1,12 +1,13 @@
-import * as React from 'react';
+import React from 'react';
+import classNames from 'classnames';
 import { Field, Form, Formik } from 'formik';
+import { Observer } from 'mobx-react-lite';
 import { Button, DesktopWrapper, Input, Loading, MobileFullPageModal, MobileWrapper, Text } from '@deriv/components';
-import { observer, Observer } from 'mobx-react-lite';
-import classNames from 'classnames';
+import { observer } from '@deriv/stores';
+import { useStores } from 'Stores';
 import { Localize, localize } from 'Components/i18next';
 import FormError from 'Components/form/error.jsx';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
-import { useStores } from 'Stores';
 
 const MyProfileForm = () => {
     const { general_store, my_profile_store } = useStores();
@@ -17,7 +18,6 @@ const MyProfileForm = () => {
             initialValues={{
                 contact_info: general_store.contact_info,
                 default_advert_description: general_store.default_advert_description,
-                payment_info: my_profile_store.payment_info,
             }}
             onSubmit={my_profile_store.handleSubmit}
             validate={my_profile_store.validateForm}
@@ -29,37 +29,37 @@ const MyProfileForm = () => {
                             {({ field }) => (
                                 <Input
                                     {...field}
-                                    type='textarea'
+                                    className='my-profile-form__textarea'
+                                    error={errors.contact_info}
+                                    has_character_counter
+                                    initial_character_count={general_store.contact_info.length}
                                     label={
                                         <Text color='less-prominent' size='xs'>
                                             <Localize i18n_default_text='Contact details' />
                                         </Text>
                                     }
-                                    error={errors.contact_info}
-                                    className='my-profile-form__textarea'
-                                    has_character_counter
-                                    initial_character_count={general_store.contact_info.length}
                                     max_characters={300}
+                                    type='textarea'
                                 />
                             )}
                         </Field>
                         <Field name='default_advert_description'>
                             {({ field }) => (
                                 <Input
                                     {...field}
-                                    type='textarea'
+                                    className='my-profile-form__textarea'
+                                    error={errors.default_advert_description}
+                                    has_character_counter
+                                    hint={localize('This information will be visible to everyone.')}
+                                    initial_character_count={general_store?.default_advert_description?.length}
+                                    is_relative_hint
+                                    max_characters={300}
                                     label={
                                         <Text color='less-prominent' size='xs'>
                                             <Localize i18n_default_text='Instructions' />
                                         </Text>
                                     }
-                                    error={errors.default_advert_description}
-                                    hint={localize('This information will be visible to everyone.')}
-                                    is_relative_hint
-                                    className='my-profile-form__textarea'
-                                    has_character_counter
-                                    initial_character_count={general_store.default_advert_description.length}
-                                    max_characters={300}
+                                    type='textarea'
                                 />
                             )}
                         </Field>
@@ -71,12 +71,12 @@ const MyProfileForm = () => {
                                         className={classNames('my-profile-form__footer-button', {
                                             'dc-btn--green': my_profile_store.is_submit_success,
                                         })}
+                                        has_effect
                                         is_disabled={!dirty || isSubmitting || !isValid}
                                         is_submit_success={my_profile_store.is_submit_success}
-                                        text={localize('Save')}
-                                        has_effect
-                                        primary
                                         large
+                                        primary
+                                        text={localize('Save')}
                                     />
                                 )}
                             </Observer>
@@ -93,13 +93,18 @@ const MyProfileForm = () => {
 
     return (
         <>
-            <DesktopWrapper className='my-profile-form'>{content}</DesktopWrapper>
+            <DesktopWrapper>
+                <div className='my-profile-form'>{content}</div>
+            </DesktopWrapper>
             <MobileWrapper>
                 <MobileFullPageModal
                     className='my-profile-form'
                     is_modal_open={my_profile_store.active_tab === my_profile_tabs.AD_TEMPLATE}
-                    page_header_text={localize('Ad details')}
+                    onClickClose={() => {
+                        // do nothing
+                    }}
                     pageHeaderReturnFn={() => my_profile_store.setActiveTab(my_profile_tabs.MY_STATS)}
+                    page_header_text={localize('Ad details')}
                 >
                     {content}
                 </MobileFullPageModal>

packages/p2p/src/stores/general-store.js

@@ -23,6 +23,7 @@ export default class GeneralStore extends BaseStore {
     balance;
     cancels_remaining = null;
     contact_info = '';
+    default_advert_description = '';
     error_code = '';
     external_stores = {};
     feature_level = null;
@@ -84,6 +85,8 @@ export default class GeneralStore extends BaseStore {
             advertiser_relations_response: observable, //TODO: Remove this when backend has fixed is_blocked flag issue
             block_unblock_user_error: observable,
             balance: observable,
+            contact_info: observable,
+            default_advert_description: observable,
             external_stores: observable,
             feature_level: observable,
             formik_ref: observable,