chore: insert growthbook feature value for country code dropdown

Author: suisin-deriv

packages/account/src/Components/forms/personal-details-form.jsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Field, useFormikContext } from 'formik';
 
 import { Autocomplete, Checkbox, InlineMessage, RadioGroup, SelectNative, Text } from '@deriv/components';
-import { useGetPhoneNumberList, useResidenceList } from '@deriv/hooks';
+import { useGetPhoneNumberList, useGrowthbookGetFeatureValue, useResidenceList } from '@deriv/hooks';
 import { routes, validPhone } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
 import { useDevice } from '@deriv-com/ui';
@@ -43,7 +43,9 @@ const PersonalDetailsForm = props => {
     // need to put this check related to DIEL clients
     const is_svg_only = is_svg && !is_eu_user;
 
-    const is_country_code_dropdown_enabled = false;
+    const [isCountryCodeDropdownEnabled, isCountryCodeLoaded] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_country_code_dropdown',
+    });
 
     const { errors, touched, values, setFieldValue, handleChange, handleBlur } = useFormikContext();
 
@@ -388,7 +390,7 @@ const PersonalDetailsForm = props => {
                         )}
                         {!is_svg_only && 'phone' in values && (
                             <PhoneField
-                                is_country_code_dropdown_enabled={is_country_code_dropdown_enabled}
+                                is_country_code_dropdown_enabled={isCountryCodeLoaded && isCountryCodeDropdownEnabled}
                                 handleChange={handleChange}
                                 setFieldValue={setFieldValue}
                                 country_code_list={legacy_core_countries_list}
@@ -432,7 +434,7 @@ const PersonalDetailsForm = props => {
                     <FormSubHeader title={localize('Additional information')} />
                     {'phone' in values && (
                         <PhoneField
-                            is_country_code_dropdown_enabled={is_country_code_dropdown_enabled}
+                            is_country_code_dropdown_enabled={isCountryCodeLoaded && isCountryCodeDropdownEnabled}
                             handleChange={handleChange}
                             setFieldValue={setFieldValue}
                             country_code_list={legacy_core_countries_list}

packages/account/src/Components/personal-details/__tests__/personal-details.spec.tsx

@@ -10,6 +10,7 @@ import { FormikErrors } from 'formik';
 import { getIDVFormValidationSchema } from '../../../Configs/kyc-validation-config';
 import { useDevice } from '@deriv-com/ui';
 import { APIProvider } from '@deriv/api';
+import { useGrowthbookGetFeatureValue } from '@deriv/hooks';
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
@@ -38,6 +39,11 @@ jest.mock('Helpers/utils', () => ({
     isAdditionalDocumentValid: jest.fn(),
 }));
 
+jest.mock('@deriv/hooks', () => ({
+    ...jest.requireActual('@deriv/hooks'),
+    useGrowthbookGetFeatureValue: jest.fn(),
+}));
+
 type TPersonalDetailsSectionForm = ComponentProps<typeof PersonalDetails>['value'];
 
 const mock_warnings = {};
@@ -260,6 +266,10 @@ describe('<PersonalDetails/>', () => {
         real_account_signup_target: '',
     };
 
+    beforeEach(() => {
+        (useGrowthbookGetFeatureValue as jest.Mock).mockReturnValue([false, false]);
+    });
+
     afterEach(() => {
         jest.clearAllMocks();
     });
@@ -296,9 +306,9 @@ describe('<PersonalDetails/>', () => {
         const citizenship = screen.getByTestId('citizenship');
         const phone = screen.getByTestId('phone');
 
-        userEvent.clear(first_name);
+        await userEvent.clear(first_name);
         fireEvent.blur(date_of_birth);
-        userEvent.clear(last_name);
+        await userEvent.clear(last_name);
         fireEvent.blur(place_of_birth);
         fireEvent.blur(citizenship);
         fireEvent.blur(phone);
@@ -343,8 +353,8 @@ describe('<PersonalDetails/>', () => {
         const date_of_birth = screen.getByTestId('date_of_birth');
         const phone = screen.getByTestId('phone');
 
-        userEvent.type(first_name, 'test firstname');
-        userEvent.type(last_name, 'test lastname');
+        await userEvent.type(first_name, 'test firstname');
+        await userEvent.type(last_name, 'test lastname');
         fireEvent.change(date_of_birth, { target: { value: '2000-12-12' } });
         fireEvent.change(phone, { target: { value: '+931234567890' } });
 
@@ -358,7 +368,7 @@ describe('<PersonalDetails/>', () => {
 
         expect(previous_btn).toBeEnabled();
         expect(next_btn).toBeEnabled();
-        userEvent.click(next_btn);
+        await userEvent.click(next_btn);
 
         await waitFor(() => {
             expect(new_props.onSubmit).toBeCalled();
@@ -426,12 +436,25 @@ describe('<PersonalDetails/>', () => {
         const mrs_radio_btn: HTMLInputElement = screen.getByRole('radio', { name: /ms/i }) as HTMLInputElement;
         expect(mr_radio_btn).toBeInTheDocument();
         expect(mrs_radio_btn).toBeInTheDocument();
-        expect(mr_radio_btn.checked).toEqual(false);
+        expect(mr_radio_btn).not.toBeChecked();
 
         fireEvent.click(mr_radio_btn);
 
-        expect(mr_radio_btn.checked).toEqual(true);
-        expect(mrs_radio_btn.checked).toEqual(false);
+        expect(mr_radio_btn).toBeChecked();
+        expect(mrs_radio_btn).not.toBeChecked();
+    });
+
+    it('should display country code dropdown when isCountryCodeDropdownEnabled is true ', () => {
+        (useGrowthbookGetFeatureValue as jest.Mock).mockReturnValue([true, true]);
+        renderwithRouter({});
+
+        expect(screen.getByText(/code\*/i)).toBeInTheDocument();
+    });
+
+    it('should not display country code dropdown when isCountryCodeDropdownEnabled is false ', () => {
+        renderwithRouter({});
+
+        expect(screen.queryByText(/code\*/i)).not.toBeInTheDocument();
     });
 
     it('should display the correct field details ', () => {
@@ -608,7 +631,7 @@ describe('<PersonalDetails/>', () => {
         fireEvent.change(date_of_birth, { target: { value: '2000-12-12' } });
         fireEvent.change(phone, { target: { value: '+49123456789012' } });
 
-        expect(mr_radio_btn.checked).toEqual(true);
+        expect(mr_radio_btn).toBeChecked();
         const next_btn = screen.getByRole('button', { name: /next/i });
 
         expect(next_btn).toBeEnabled();

packages/account/src/Components/personal-details/personal-details.tsx

@@ -17,6 +17,7 @@ import { TIDVFormValues, TListItem, TPersonalDetailsBaseForm } from '../../Types
 import { GetAccountStatus, GetSettings, ResidenceList } from '@deriv/api-types';
 import { getPersonalDetailsBaseValidationSchema } from '../../Configs/user-profile-validation-config';
 import { getIDVFormValidationSchema } from '../../Configs/kyc-validation-config';
+import { useGrowthbookGetFeatureValue } from '@deriv/hooks';
 
 type TPersonalDetailsSectionForm = Partial<TIDVFormValues & TPersonalDetailsBaseForm> & {
     confirmation_checkbox?: boolean;
@@ -79,7 +80,9 @@ const PersonalDetails = observer(
         } = useStore();
         const { account_status, account_settings, residence, real_account_signup_target } = props;
 
-        const is_country_code_dropdown_enabled = false;
+        const [isCountryCodeDropdownEnabled, isCountryCodeLoaded] = useGrowthbookGetFeatureValue({
+            featureFlag: 'enable_country_code_dropdown',
+        });
         const { isDesktop } = useDevice();
         const handleCancel = (values: TPersonalDetailsSectionForm) => {
             const current_step = getCurrentStep() - 1;
@@ -127,13 +130,13 @@ const PersonalDetails = observer(
                 is_rendered_for_idv
                     ? getPersonalDetailsBaseValidationSchema(
                           real_account_signup_target,
-                          is_country_code_dropdown_enabled
+                          isCountryCodeLoaded && isCountryCodeDropdownEnabled
                       ).concat(getIDVFormValidationSchema())
                     : getPersonalDetailsBaseValidationSchema(
                           real_account_signup_target,
-                          is_country_code_dropdown_enabled
+                          isCountryCodeLoaded && isCountryCodeDropdownEnabled
                       ),
-            [is_rendered_for_idv, real_account_signup_target, is_country_code_dropdown_enabled]
+            [is_rendered_for_idv, real_account_signup_target, isCountryCodeLoaded, isCountryCodeDropdownEnabled]
         );
 
         /*

packages/core/src/App/Containers/RealAccountSignup/account-wizard.jsx

@@ -57,7 +57,9 @@ const StepperHeader = ({ has_target, has_real_account, items, getCurrentStep, ge
 const AccountWizard = observer(props => {
     const { client, notifications, ui, traders_hub } = useStore();
 
-    const is_country_code_dropdown_enabled = false;
+    const [isCountryCodeDropdownEnabled, isCountryCodeLoaded] = useGrowthbookGetFeatureValue({
+        featureFlag: 'enable_country_code_dropdown',
+    });
     const { selected_phone_code } = useGetPhoneNumberList();
 
     const { is_eu_user } = traders_hub;
@@ -66,7 +68,7 @@ const AccountWizard = observer(props => {
         ...props,
         account_settings: {
             ...client.account_settings,
-            ...(is_country_code_dropdown_enabled && { calling_country_code: '' }),
+            ...(isCountryCodeLoaded && isCountryCodeDropdownEnabled && { calling_country_code: '' }),
         },
         account_status: client.account_status,
         fetchAccountSettings: client.fetchAccountSettings,
@@ -155,12 +157,12 @@ const AccountWizard = observer(props => {
         selected_phone_code,
     };
     React.useEffect(() => {
-        if (selected_phone_code && is_country_code_dropdown_enabled) {
+        if (selected_phone_code && isCountryCodeLoaded && isCountryCodeDropdownEnabled) {
             const updated_items = getItems(get_items_props);
             setStateItems(updated_items);
             setRealAccountSignupFormData(updated_items);
         }
-    }, [selected_phone_code, setRealAccountSignupFormData, is_country_code_dropdown_enabled]);
+    }, [selected_phone_code, setRealAccountSignupFormData, isCountryCodeLoaded, isCountryCodeDropdownEnabled]);
 
     React.useEffect(() => {
         setIsTradingAssessmentForNewUserEnabled(true);
@@ -201,15 +203,15 @@ const AccountWizard = observer(props => {
                     items = getItems(get_items_props);
                 }
 
-                if (items.length > 1 && 'phone' in items[1]?.form_value && !is_country_code_dropdown_enabled) {
+                if (items.length > 1 && 'phone' in items[1]?.form_value && !isCountryCodeDropdownEnabled) {
                     items[1].form_value.phone = items[1].form_value.phone || country_code || '';
                     setStateItems(items);
                     setRealAccountSignupFormData(items);
                 }
             };
             getCountryCode(residence_list).then(setDefaultPhone);
         }
-    }, [residence_list, setRealAccountSignupFormData]);
+    }, [residence_list, setRealAccountSignupFormData, isCountryCodeDropdownEnabled]);
 
     const fetchFromStorage = () => {
         const stored_items = localStorage.getItem('real_account_signup_wizard');