chore: update personal details form content and some css, and add tim…

…er to verify button
suisin-deriv · Aug 22, 2024 · 4c8c4d5 · 4c8c4d5
1 parent 6ec3a5b
commit 4c8c4d5
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 31 deletions.
diff --git a/...ges/account/src/Sections/Profile/PersonalDetails/__tests__/personal-details-form.spec.tsx b/...ges/account/src/Sections/Profile/PersonalDetails/__tests__/personal-details-form.spec.tsx
@@ -73,11 +73,7 @@ describe('<PersonalDetailsForm />', () => {
         renderComponent();
         expect(screen.queryByText(/Loading/)).not.toBeInTheDocument();
         await waitFor(() => {
-            expect(
-                screen.getByText(
-                    /Please make sure your information is correct or it may affect your trading experience./i
-                )
-            ).toBeInTheDocument();
+            expect(screen.getByText(/Ensure your information is correct./i)).toBeInTheDocument();
         });
     });
 
@@ -185,14 +181,14 @@ describe('<PersonalDetailsForm />', () => {
         ).toBeInTheDocument();
     });
 
-    it('should update user profile after clicking on submit', () => {
+    it('should update user profile after clicking on Save changes', () => {
         renderComponent();
         const first_name = screen.getByTestId('dt_first_name') as HTMLInputElement;
         expect(first_name.value).toBe('John');
         userEvent.clear(first_name);
         userEvent.type(first_name, 'James');
-        const submit_button = screen.getByRole('button', { name: /Submit/ });
-        userEvent.click(submit_button);
+        const save_changes_button = screen.getByRole('button', { name: /Save changes/ });
+        userEvent.click(save_changes_button);
         expect(first_name.value).toBe('James');
     });
 

diff --git a/packages/account/src/Sections/Profile/PersonalDetails/__tests__/verify-button.spec.tsx b/packages/account/src/Sections/Profile/PersonalDetails/__tests__/verify-button.spec.tsx
@@ -31,17 +31,22 @@ describe('VerifyButton', () => {
             },
         },
     });
+    let mock_next_request_time = 0;
 
     const renderWithRouter = () => {
         return render(
             <Router history={history}>
                 <StoreProvider store={mock_store}>
-                    <VerifyButton is_verify_button_disabled={false} />
+                    <VerifyButton is_verify_button_disabled={false} next_request_time={mock_next_request_time} />
                 </StoreProvider>
             </Router>
         );
     };
 
+    beforeEach(() => {
+        mock_next_request_time = 0;
+    });
+
     it('should render Verify Button', () => {
         renderWithRouter();
         expect(screen.getByText('Verify')).toBeInTheDocument();
@@ -60,6 +65,13 @@ describe('VerifyButton', () => {
         expect(history.location.pathname).toBe(routes.phone_verification);
     });
 
+    it('should render Verify Button with timer if next_otp_request has value', () => {
+        mock_next_request_time = 2;
+        renderWithRouter();
+        expect(screen.getByText('Verify in 2s')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Verify in 2s' })).toBeDisabled();
+    });
+
     it('should render Verified text', () => {
         if (mock_store.client.account_settings.phone_number_verification)
             mock_store.client.account_settings.phone_number_verification.verified = 1;

diff --git a/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx b/packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx
@@ -128,17 +128,6 @@ const PersonalDetailsForm = observer(() => {
                     components={[<OpenLiveChatLink text_size='xxs' key={0} />]}
                 />
             );
-        } else if (next_request_time) {
-            return (
-                <Localize
-                    i18n_default_text='Verification incomplete. Start again in {{next_request_time}} {{display_time}}'
-                    values={{
-                        next_request_time:
-                            next_request_time < 60 ? next_request_time : Math.round(next_request_time / 60),
-                        display_time: next_request_time < 60 ? localize('seconds') : localize('minutes'),
-                    }}
-                />
-            );
         } else if (is_phone_number_editted || is_phone_number_empty) {
             return <Localize i18n_default_text='Save changes to enable verification.' />;
         }
@@ -425,10 +414,10 @@ const PersonalDetailsForm = observer(() => {
                                             <VerifyButton
                                                 is_verify_button_disabled={
                                                     is_request_button_disabled ||
-                                                    !!next_request_time ||
                                                     account_settings.phone !== values.phone ||
                                                     !account_settings.phone
                                                 }
+                                                next_request_time={next_request_time}
                                             />
                                         )}
                                     </fieldset>
@@ -712,9 +701,7 @@ const PersonalDetailsForm = observer(() => {
                                         color='prominent'
                                         align={isDesktop ? 'right' : 'center'}
                                     >
-                                        {localize(
-                                            'Please make sure your information is correct or it may affect your trading experience.'
-                                        )}
+                                        <Localize i18n_default_text='Ensure your information is correct.' />
                                     </Text>
                                 )}
                                 <Button
@@ -728,7 +715,7 @@ const PersonalDetailsForm = observer(() => {
                                     has_effect
                                     is_loading={is_btn_loading}
                                     is_submit_success={is_submit_success}
-                                    text={localize('Submit')}
+                                    text={localize('Save changes')}
                                     large
                                     primary
                                 />

diff --git a/packages/account/src/Sections/Profile/PersonalDetails/verify-button.tsx b/packages/account/src/Sections/Profile/PersonalDetails/verify-button.tsx
@@ -7,12 +7,14 @@ import { Localize } from '@deriv/translations';
 import { useVerifyEmail } from '@deriv/hooks';
 import { useDevice } from '@deriv-com/ui';
 import './verify-button.scss';
+import { localize } from '@deriv-com/translations';
 
 type TVerifyButton = {
     is_verify_button_disabled: boolean;
+    next_request_time?: number;
 };
 
-export const VerifyButton = observer(({ is_verify_button_disabled }: TVerifyButton) => {
+export const VerifyButton = observer(({ is_verify_button_disabled, next_request_time }: TVerifyButton) => {
     const { client, ui } = useStore();
     const { setShouldShowPhoneNumberOTP, is_scroll_to_verify_button, setIsScrollToVerifyButton } = ui;
     const { account_settings, setVerificationCode } = client;
@@ -54,11 +56,24 @@ export const VerifyButton = observer(({ is_verify_button_disabled }: TVerifyButt
         sendPhoneNumberVerifyEmail();
     };
 
+    const verifyTimer = () => {
+        let resendCodeTimer = '';
+        if (next_request_time) {
+            next_request_time < 60
+                ? (resendCodeTimer = `${localize(' in ')}${next_request_time}s`)
+                : (resendCodeTimer = `${localize(' in ')}${Math.round(next_request_time / 60)}m`);
+        } else {
+            resendCodeTimer = '';
+        }
+
+        return resendCodeTimer;
+    };
+
     return (
         <div ref={ref}>
             <Button
                 className='phone-verification-button'
-                is_disabled={phone_number_verified || is_verify_button_disabled || is_loading}
+                is_disabled={phone_number_verified || is_verify_button_disabled || is_loading || !!next_request_time}
                 onClick={redirectToPhoneVerification}
                 has_effect
                 green={phone_number_verified}
@@ -68,7 +83,12 @@ export const VerifyButton = observer(({ is_verify_button_disabled }: TVerifyButt
                 {phone_number_verified ? (
                     <Localize i18n_default_text='Verified' />
                 ) : (
-                    <Localize i18n_default_text='Verify' />
+                    <Localize
+                        i18n_default_text='Verify{{resendCode}}'
+                        values={{
+                            resendCode: verifyTimer(),
+                        }}
+                    />
                 )}
             </Button>
         </div>

diff --git a/packages/core/src/sass/app/_common/components/account-common.scss b/packages/core/src/sass/app/_common/components/account-common.scss
@@ -357,14 +357,16 @@
                 color: var(--text-prominent);
                 font-size: var(--text-size-xxs);
                 line-height: 1.5;
-                text-align: right;
+                display: flex;
+                justify-content: end;
+                align-items: center;
                 min-width: 27.6rem;
                 max-width: 36.6rem;
                 height: 3.6rem;
 
                 @include mobile-or-tablet-screen {
-                    width: auto;
-                    text-align: center;
+                    width: 100%;
+                    text-align: start;
                     align-self: center;
 
                     &--dashboard {