fix: improve UI after design review of new reg flow [WPB-17795] (#19175)

* fix: improve UI after design review of new reg flow [WPB-17795]

* Add condition for privacy checkbox

* move file

* fixed tests

* fixed test

* fixed test

Author: e-maad

src/script/auth/component/AccountForm.test.tsx

@@ -29,10 +29,7 @@ describe('when entering account data', () => {
   let wrapper: RenderResult;
 
   const nameInput = () => wrapper.getByTestId('enter-name') as HTMLInputElement;
-  const emailInput = () => wrapper.getByTestId('enter-email') as HTMLInputElement;
-  const passwordInput = () => wrapper.getByTestId('enter-password') as HTMLInputElement;
   const doNextButton = () => wrapper.getByTestId('do-next') as HTMLButtonElement;
-  const doTermsCheckbox = () => wrapper.getByTestId('do-accept-terms') as HTMLInputElement;
   const validationErrorMessage = () => wrapper.getByTestId('error-message');
 
   describe('the submit button', () => {
@@ -51,11 +48,6 @@ describe('when entering account data', () => {
         }),
       );
 
-      expect(nameInput().required).toBe(true);
-      expect(emailInput().required).toBe(true);
-      expect(passwordInput().required).toBe(true);
-      expect(doTermsCheckbox().required).toBe(true);
-
       expect(doNextButton().disabled).toBe(true);
     });
 
@@ -110,8 +102,8 @@ describe('when entering account data', () => {
     });
 
     it('appears when input gets trimmed', () => {
-      const actualName = '  ';
-      const expectedName = '  ';
+      const actualName = 'M ';
+      const expectedName = 'M ';
       const expectedErrorMessage = 'Enter a name with at least 2 characters';
 
       wrapper = mountComponent(

src/script/auth/component/AccountForm.tsx

@@ -43,6 +43,7 @@ import * as AccentColor from '../util/AccentColor';
 import {
   EventName,
   initializeTelemetry,
+  isTelemetryEnabled,
   resetTelemetrySession,
   Segmentation,
   trackTelemetryEvent,
@@ -207,7 +208,6 @@ const AccountFormComponent = ({
           maxLength={64}
           minLength={2}
           pattern=".{2,64}"
-          required
           data-uie-name="enter-name"
         />
 
@@ -228,7 +228,6 @@ const AccountFormComponent = ({
           onKeyDown={event => handleEnterDown(event, () => inputs.password.current?.focus())}
           maxLength={128}
           type="email"
-          required
           data-uie-name="enter-email"
         />
 
@@ -248,7 +247,6 @@ const AccountFormComponent = ({
           type="password"
           placeholder={t('accountForm.passwordPlaceholder')}
           pattern={ValidationUtil.getNewPasswordPattern(Config.getConfig().NEW_PASSWORD_MINIMUM_LENGTH)}
-          required
           data-uie-name="enter-password"
         />
         <Text muted css={styles.passwordInfo(!!validationErrors.length)} data-uie-name="element-password-help">
@@ -270,7 +268,6 @@ const AccountFormComponent = ({
           type="password"
           placeholder={t('accountForm.confirmPasswordPlaceholder')}
           pattern={`^${registrationData.password?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`}
-          required
           data-uie-name="enter-confirm-password"
         />
 
@@ -287,7 +284,6 @@ const AccountFormComponent = ({
         markInvalid={!validInputs.terms}
         name="accept-terms"
         id="accept-terms"
-        required
         checked={registrationData.termsAccepted}
         data-uie-name="do-accept-terms"
       >
@@ -311,38 +307,40 @@ const AccountFormComponent = ({
         </CheckboxLabel>
       </Checkbox>
 
-      <Checkbox
-        ref={inputs.privacyPolicy}
-        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-          inputs.privacyPolicy.current?.setCustomValidity('');
-          setRegistrationData({...registrationData, privacyPolicyAccepted: event.target.checked});
-          setValidInputs({...validInputs, privacyPolicy: true});
-        }}
-        markInvalid={!validInputs.privacyPolicy}
-        name="accept-privacy-policy"
-        id="accept-privacy-policy"
-        checked={registrationData.privacyPolicyAccepted}
-        data-uie-name="do-accept-privacy-policy"
-      >
-        <CheckboxLabel htmlFor="accept-privacy-policy" css={styles.checkboxLabel}>
-          <FormattedMessage
-            id="accountForm.privacyPolicy"
-            values={{
-              privacyPolicyLink: (
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  data-uie-name="go-privacy-policy"
-                  href={Config.getConfig().URL.PRIVACY_POLICY}
-                  css={styles.checkboxLink}
-                >
-                  {t('accountForm.privacyPolicyLink')}
-                </a>
-              ),
-            }}
-          />
-        </CheckboxLabel>
-      </Checkbox>
+      {isTelemetryEnabled() && (
+        <Checkbox
+          ref={inputs.privacyPolicy}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            inputs.privacyPolicy.current?.setCustomValidity('');
+            setRegistrationData({...registrationData, privacyPolicyAccepted: event.target.checked});
+            setValidInputs({...validInputs, privacyPolicy: true});
+          }}
+          markInvalid={!validInputs.privacyPolicy}
+          name="accept-privacy-policy"
+          id="accept-privacy-policy"
+          checked={registrationData.privacyPolicyAccepted}
+          data-uie-name="do-accept-privacy-policy"
+        >
+          <CheckboxLabel htmlFor="accept-privacy-policy" css={styles.checkboxLabel}>
+            <FormattedMessage
+              id="accountForm.privacyPolicy"
+              values={{
+                privacyPolicyLink: (
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    data-uie-name="go-privacy-policy"
+                    href={Config.getConfig().URL.PRIVACY_POLICY}
+                    css={styles.checkboxLink}
+                  >
+                    {t('accountForm.privacyPolicyLink')}
+                  </a>
+                ),
+              }}
+            />
+          </CheckboxLabel>
+        </Checkbox>
+      )}
 
       <Button
         disabled={isSubmitDisabled}

src/script/auth/component/Layout.styles.ts

@@ -25,10 +25,13 @@ export const leftSectionCss: CSSObject = {
   background: 'black',
   margin: 0,
   height: '100vh',
-  width: '460px',
+  width: '360px',
   padding: '6rem 4rem',
   position: 'relative',
   minHeight: '42rem',
+  [media.desktopXL]: {
+    width: '460px',
+  },
   [media.tabletDown]: {
     display: 'none',
   },
@@ -49,7 +52,7 @@ export const whiteFontCss: CSSObject = {
 export const bodyCss: CSSObject = {
   flex: 'auto',
   flexDirection: 'row',
-  background: COLOR_V2.WHITE,
+  background: COLOR_V2.GRAY_10,
   height: '100%',
   minHeight: '100vh',
 };

src/script/auth/page/SetAccountType.styles.tsx

@@ -46,7 +46,7 @@ export const styles: {
   container: {
     width: '100%',
     padding: '38px',
-    maxWidth: '1000px',
+    maxWidth: '750px',
     margin: 'auto',
     marginBottom: '10vw',
     flexDirection: 'column',
@@ -105,6 +105,7 @@ export const styles: {
     flex: 1,
     height: 360,
     position: 'relative',
+    background: COLOR_V2.WHITE,
     [mediaQueryDesktop]: {
       margin: '16px 0',
     },

src/script/auth/util/trackingUtil.test.ts

@@ -78,7 +78,7 @@ describe('trackingUtil', () => {
 
   describe('initializeTelemetry', () => {
     it('should initialize telemetry and set device id if not present', () => {
-      (Config.getConfig as jest.Mock).mockReturnValueOnce(configFactory());
+      (Config.getConfig as jest.Mock).mockReturnValue(configFactory());
       localStorageMock.getItem.mockReturnValueOnce(null);
       trackingUtil.initializeTelemetry();
       expect(telemetry.initialize).toHaveBeenCalledWith(
@@ -99,13 +99,13 @@ describe('trackingUtil', () => {
     });
 
     it('should not initialize telemetry if COUNTLY_ENABLE_LOGGING is false', async () => {
-      (Config.getConfig as jest.Mock).mockReturnValueOnce(configFactory({COUNTLY_ENABLE_LOGGING: false}));
+      (Config.getConfig as jest.Mock).mockReturnValue(configFactory({COUNTLY_ENABLE_LOGGING: false}));
       trackingUtil.initializeTelemetry();
       expect(telemetry.initialize).not.toHaveBeenCalled();
     });
 
     it('should not initialize telemetry if COUNTLY_API_KEY is missing', () => {
-      (Config.getConfig as jest.Mock).mockReturnValueOnce(configFactory({COUNTLY_API_KEY: ''}));
+      (Config.getConfig as jest.Mock).mockReturnValue(configFactory({COUNTLY_API_KEY: ''}));
       trackingUtil.initializeTelemetry();
       expect(telemetry.initialize).not.toHaveBeenCalled();
     });

src/script/auth/util/trackingUtil.ts

@@ -55,10 +55,20 @@ export enum PageView {
   ACCOUNT_COMPLETION_SCREEN_4 = 'account_completion_screen_4',
 }
 
-export const initializeTelemetry = () => {
-  const {COUNTLY_ENABLE_LOGGING, VERSION, COUNTLY_API_KEY, COUNTLY_SERVER_URL} = Config.getConfig();
+export const isTelemetryEnabled = () => {
+  const {COUNTLY_ENABLE_LOGGING, COUNTLY_API_KEY} = Config.getConfig();
 
   if (!COUNTLY_ENABLE_LOGGING || !COUNTLY_API_KEY || !telemetry.isLoaded()) {
+    return false;
+  }
+
+  return true;
+};
+
+export const initializeTelemetry = () => {
+  const {VERSION, COUNTLY_API_KEY, COUNTLY_SERVER_URL} = Config.getConfig();
+
+  if (!isTelemetryEnabled()) {
     return;
   }
 

test/e2e_tests/pages/registration.page.ts

@@ -40,7 +40,7 @@ export class RegistrationPage {
     this.passwordInput = page.locator('[data-uie-name="enter-password"]');
     this.confirmPasswordInput = page.locator('[data-uie-name="enter-confirm-password"]');
     this.submitButton = page.locator('[data-uie-name="do-next"]');
-    this.termsCheckbox = page.locator('[data-uie-name="do-terms"]');
+    this.termsCheckbox = page.locator('[data-uie-name="do-accept-terms"]');
   }
 
   async isPasswordPolicyInfoVisible() {