fix: revert_phone_number_verification_flow (deriv-com#16138)

packages/account/jest.config.js

@@ -4,7 +4,8 @@ module.exports = {
     ...baseConfigForPackages,
     preset: 'ts-jest',
     moduleNameMapper: {
-        '\\.(s(c|a)ss|css|less)$': '<rootDir>/../../__mocks__/styleMock.js',
+        '\\.css$': '<rootDir>/../../__mocks__/styleMock.js',
+        '\\.s(c|a)ss$': '<rootDir>/../../__mocks__/styleMock.js',
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
         '@deriv-com/translations': '<rootDir>/../../__mocks__/translation.mock.js',
         '^Assets/(.*)$': '<rootDir>/src/Assets/$1',

packages/account/package.json

@@ -39,7 +39,7 @@
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
         "@deriv/integration": "1.0.0",
-        "@deriv/quill-icons": "^1.23.3",
+        "@deriv/quill-icons": "1.23.3",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

packages/account/src/Constants/routes-config.tsx

@@ -27,10 +27,6 @@ const Passwords = makeLazyLoader(
     () => <Loading />
 )();
 
-const PhoneVerificationPage = makeLazyLoader(
-    () => moduleLoader(() => import('../Sections/Profile/PhoneVerification')),
-    () => <Loading />
-)();
 const AccountLimits = makeLazyLoader(
     () => moduleLoader(() => import('../Sections/Security/AccountLimits')),
     () => <Loading />
@@ -109,12 +105,6 @@ const initRoutesConfig = () => [
                 getTitle: () => localize('Profile'),
                 icon: 'IcUserOutline',
                 subroutes: [
-                    {
-                        path: routes.phone_verification,
-                        component: PhoneVerificationPage,
-                        getTitle: () => localize('Personal details'),
-                        is_hidden: true,
-                    },
                     {
                         path: routes.personal_details,
                         component: PersonalDetails,

packages/account/src/Containers/__tests__/routes.spec.tsx

@@ -16,19 +16,6 @@ jest.mock('@deriv/components', () => ({
 }));
 
 describe('<Routes />', () => {
-    Object.defineProperty(window, 'matchMedia', {
-        writable: true,
-        value: jest.fn().mockImplementation(query => ({
-            matches: false,
-            media: query,
-            onchange: null,
-            addListener: jest.fn(), // Deprecated
-            removeListener: jest.fn(), // Deprecated
-            addEventListener: jest.fn(),
-            removeEventListener: jest.fn(),
-            dispatchEvent: jest.fn(),
-        })),
-    });
     const history = createBrowserHistory();
 
     const mock_root_store = mockStore({

packages/account/src/Containers/routes.tsx

@@ -1,23 +1,18 @@
+import React from 'react';
 import { withRouter } from 'react-router';
 import { observer, useStore } from '@deriv/stores';
 import { BinaryRoutes } from '../Components/Routes';
 import ErrorComponent from '../Components/error-component';
-import { ThemeProvider } from '@deriv-com/quill-ui';
 
 const Routes = observer(() => {
-    const { client, common, ui } = useStore();
+    const { client, common } = useStore();
     const { is_logged_in, is_logging_in } = client;
     const { error, has_error } = common;
-    const { is_dark_mode_on } = ui;
     if (has_error) {
         return <ErrorComponent {...error} />;
     }
 
-    return (
-        <ThemeProvider theme={is_dark_mode_on ? 'dark' : 'light'}>
-            <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} />
-        </ThemeProvider>
-    );
+    return <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} />;
 });
 
 // need to wrap withRouter

packages/account/src/Helpers/utils.tsx

@@ -10,7 +10,6 @@ import {
     getIDVNotApplicableOption,
     IDV_ERROR_STATUS,
     AUTH_STATUS_CODES,
-    VERIFICATION_SERVICES,
 } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { getIDVDocuments } from '../Configs/idv-document-config';
@@ -278,9 +277,3 @@ export const verifyFields = (status: TIDVErrorStatus) => {
 
 export const isSpecialPaymentMethod = (payment_method_icon: string) =>
     ['IcOnlineNaira', 'IcAstroPayLight', 'IcAstroPayDark'].some(icon => icon === payment_method_icon);
-
-export const convertPhoneTypeDisplay = (phone_verification_type: string) => {
-    if (phone_verification_type === VERIFICATION_SERVICES.SMS) return phone_verification_type.toUpperCase();
-
-    return 'WhatsApp';
-};

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

@@ -44,9 +44,6 @@ describe('<PersonalDetailsForm />', () => {
                 place_of_birth: 'Thailand',
                 citizen: 'Thailand',
                 email_consent: 1,
-                phone_number_verification: {
-                    verified: 0,
-                },
             },
         },
     });

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

@@ -29,7 +29,6 @@ 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';
 import { useInvalidateQuery } from '@deriv/api';
 import { useStatesList, useResidenceList } from '@deriv/hooks';
 
@@ -361,10 +360,6 @@ const PersonalDetailsForm = observer(() => {
                                             name='phone'
                                             id={'phone'}
                                             label={localize('Phone number*')}
-                                            className={clsx({
-                                                'account-form__fieldset--phone':
-                                                    account_settings?.phone_number_verification?.verified,
-                                            })}
                                             //@ts-expect-error type of residence should not be null: needs to be updated in GetSettings type
                                             value={values.phone}
                                             onChange={handleChange}
@@ -374,7 +369,6 @@ const PersonalDetailsForm = observer(() => {
                                             disabled={isFieldDisabled('phone')}
                                             data-testid='dt_phone'
                                         />
-                                        <VerifyButton />
                                     </fieldset>
                                 )}
                                 <Fragment>