Merge pull request binary-com#80 from suisin-deriv/suisin/UPM922/phon…

…e_verification_status_on_personal_details

Suisin/chore: add phone verification status on personal details page

packages/account/src/Sections/Profile/PersonalDetails/__tests__/verify-button.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { VerifyButton } from '../verify-button';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { Router } from 'react-router';
+import { createBrowserHistory } from 'history';
+import { routes } from '@deriv/shared';
+
+describe('VerifyButton', () => {
+    const history = createBrowserHistory();
+    const renderWithRouter = (component: React.ReactElement) => {
+        return render(<Router history={history}>{component}</Router>);
+    };
+
+    const mock_store = mockStore({
+        client: {
+            account_settings: {
+                phone_number_verification: {
+                    verified: false,
+                },
+            },
+        },
+    });
+
+    it('should render Verify Button', () => {
+        renderWithRouter(
+            <StoreProvider store={mock_store}>
+                <VerifyButton />
+            </StoreProvider>
+        );
+        expect(screen.getByText('Verify')).toBeInTheDocument();
+    });
+
+    it('should redirect user to phone-verification page when clicked on Verify Button', () => {
+        renderWithRouter(
+            <StoreProvider store={mock_store}>
+                <VerifyButton />
+            </StoreProvider>
+        );
+        const verifyButton = screen.getByText('Verify');
+        userEvent.click(verifyButton);
+        expect(history.location.pathname).toBe(routes.phone_verification);
+    });
+
+    it('should render Verified text', () => {
+        mock_store.client.account_settings.phone_number_verification.verified = true;
+        renderWithRouter(
+            <StoreProvider store={mock_store}>
+                <VerifyButton />
+            </StoreProvider>
+        );
+        expect(screen.getByText('Verified')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_phone_verification_popover')).toBeInTheDocument();
+    });
+
+    it('should render popover text when popover is clicked', () => {
+        mock_store.client.account_settings.phone_number_verification.verified = true;
+        renderWithRouter(
+            <StoreProvider store={mock_store}>
+                <VerifyButton />
+            </StoreProvider>
+        );
+        const popover = screen.getByTestId('dt_phone_verification_popover');
+        userEvent.click(popover);
+        expect(screen.getByText(/To change your verified phone number, contact us via/)).toBeInTheDocument();
+        expect(screen.getByText(/live chat/)).toBeInTheDocument();
+    });
+
+    it('should render live chat window when live chat is clicked', () => {
+        mock_store.client.account_settings.phone_number_verification.verified = true;
+        window.LC_API = {
+            open_chat_window: jest.fn(),
+            on_chat_ended: jest.fn(),
+        };
+
+        renderWithRouter(
+            <StoreProvider store={mock_store}>
+                <VerifyButton />
+            </StoreProvider>
+        );
+        const popover = screen.getByTestId('dt_phone_verification_popover');
+        userEvent.click(popover);
+        const livechat = screen.getByText(/live chat/);
+        userEvent.click(livechat);
+        expect(window.LC_API.open_chat_window).toHaveBeenCalled();
+    });
+});

packages/account/src/Sections/Profile/PersonalDetails/personal-details-form.tsx

@@ -31,6 +31,7 @@ import { getEmploymentStatusList } from 'Sections/Assessment/FinancialAssessment
 import InputGroup from './input-group';
 import { getPersonalDetailsInitialValues, getPersonalDetailsValidationSchema, makeSettingsRequest } from './validation';
 import FormSelectField from 'Components/forms/form-select-field';
+import { VerifyButton } from './verify-button';
 
 type TRestState = {
     show_form: boolean;
@@ -396,15 +397,24 @@ export const PersonalDetailsForm = observer(({ history }: { history: BrowserHist
                                             name='phone'
                                             id={'phone'}
                                             label={localize('Phone number*')}
+                                            className={
+                                                account_settings?.phone_number_verification?.verified
+                                                    ? 'account-form__fieldset--phone'
+                                                    : ''
+                                            }
                                             //@ts-expect-error type of residence should not be null: needs to be updated in GetSettings type
                                             value={values.phone}
                                             onChange={handleChange}
                                             onBlur={handleBlur}
                                             required
                                             error={errors.phone}
-                                            disabled={isFieldDisabled('phone')}
+                                            disabled={
+                                                isFieldDisabled('phone') ||
+                                                account_settings?.phone_number_verification?.verified
+                                            }
                                             data-testid='dt_phone'
                                         />
+                                        <VerifyButton />
                                     </fieldset>
                                 )}
                                 <React.Fragment>

packages/account/src/Sections/Profile/PersonalDetails/verify-button.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { CaptionText } from '@deriv-com/quill-ui';
+import { observer, useStore } from '@deriv/stores';
+import { LegacyWonIcon } from '@deriv/quill-icons';
+import { useHistory } from 'react-router';
+import { routes } from '@deriv/shared';
+import { Popover, Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+export const VerifyButton = observer(() => {
+    const [open_popover, set_open_popover] = React.useState(false);
+    const { client, ui } = useStore();
+    const { is_mobile } = ui;
+    const { account_settings } = client;
+    const { phone_number_verification } = account_settings;
+    const { verified: phone_number_verified } = phone_number_verification;
+    const history = useHistory();
+
+    const redirectToPhoneVerification = () => {
+        history.push(routes.phone_verification);
+    };
+
+    return (
+        <div className='account-form__phone-verification-btn'>
+            {phone_number_verified ? (
+                <div className='account-form__phone-verification-btn--verified'>
+                    <LegacyWonIcon iconSize='xs' />
+                    <CaptionText bold color='#4bb4b3'>
+                        Verified
+                    </CaptionText>
+                    <Popover
+                        data_testid='dt_phone_verification_popover'
+                        alignment={is_mobile ? 'top' : 'right'}
+                        className='phone-verification__popover'
+                        icon='info'
+                        is_open={open_popover}
+                        disable_message_icon
+                        onClick={() => set_open_popover(prev => !prev)}
+                        message={
+                            <Text size='xxs'>
+                                <Localize
+                                    i18n_default_text='To change your verified phone number, contact us via <0>live chat</0>.'
+                                    components={[
+                                        <a
+                                            key={0}
+                                            className='link link--orange'
+                                            onClick={() => window.LC_API.open_chat_window()}
+                                        />,
+                                    ]}
+                                />
+                            </Text>
+                        }
+                        zIndex='9999'
+                    />
+                </div>
+            ) : (
+                <Text
+                    size='xxs'
+                    weight='bold'
+                    color='red'
+                    className='account-form__phone-verification-btn--not-verified'
+                    onClick={redirectToPhoneVerification}
+                >
+                    <Localize i18n_default_text='Verify' />
+                </Text>
+            )}
+        </div>
+    );
+});

packages/account/src/Styles/account.scss

@@ -291,6 +291,12 @@ $MIN_HEIGHT_FLOATING: calc(
             position: relative;
             max-width: 400px;
 
+            &--phone {
+                @include mobile {
+                    padding-inline-end: 2.5rem;
+                }
+            }
+
             .cfd-personal-details-modal__form & {
                 margin: unset;
                 max-width: unset;
@@ -414,6 +420,42 @@ $MIN_HEIGHT_FLOATING: calc(
                 }
             }
         }
+        &__phone-verification-btn {
+            position: absolute;
+            inset-inline-end: 0;
+            top: 0.4rem;
+
+            &--not-verified {
+                display: flex;
+                padding-top: 0.6rem;
+                padding-inline-end: 1.2rem;
+                cursor: pointer;
+            }
+
+            &--verified {
+                display: flex;
+                padding-top: 0.6rem;
+                padding-inline-end: 1.2rem;
+                color: var(--text-profit-success);
+
+                @include mobile {
+                    padding-inline-end: 4rem;
+                }
+
+                > :first-child {
+                    padding-inline-end: 0.4rem;
+                }
+
+                .phone-verification__popover {
+                    position: absolute;
+                    inset-inline-end: -3rem;
+
+                    @include mobile {
+                        inset-inline-end: 0rem;
+                    }
+                }
+            }
+        }
 
         &__trading-assessment,
         &__financial-assessment {