feat: add Countly tracking and missing pages for reg flow [WPB-17531] (#19161)

* feat: add countly tracking and missing pages for reg flow [WPB-17531]

* fix test

* fixed image imports

* fix broken login flow

* add tests

* add tests

* fixed tests

* fixed locator

Author: e-maad

package.json

@@ -18,7 +18,7 @@
     "@wireapp/commons": "5.4.2",
     "@wireapp/core": "46.30.1",
     "@wireapp/kalium-backup": "0.0.3",
-    "@wireapp/react-ui-kit": "9.59.3",
+    "@wireapp/react-ui-kit": "9.60.0",
     "@wireapp/store-engine-dexie": "2.1.15",
     "@wireapp/telemetry": "0.3.1",
     "@wireapp/webapp-events": "0.28.0",

src/i18n/en-US.json

@@ -176,7 +176,10 @@
   "accountForm.passwordPlaceholder": "Password",
   "accountForm.submitButton": "Next",
   "accountForm.terms": "I accept the <terms>terms and conditions</terms>",
-  "accountForm.termsAndPrivacyPolicy": "I accept the <terms>terms and conditions</terms> and <privacypolicy>privacy policy</privacypolicy>",
+  "accountForm.privacyPolicy": "I agree to share anonymous usage data. Find all details in our {privacyPolicyLink} (optional)",
+  "accountForm.privacyPolicyLink": "Privacy Policy",
+  "accountForm.termsAndConditions": "I accept Wire's {termsAndConditionsLink}",
+  "accountForm.termsAndConditionsLink": "Terms & Conditions",
   "acme.done.button": "Ok",
   "acme.done.button.close": "Close window 'Certificate Downloaded'",
   "acme.done.button.secondary": "Certificate details",
@@ -500,6 +503,10 @@
   "chooseHandle.headline": "Set your username",
   "chooseHandle.subhead": "Your username helps people find you.",
   "chooseHandle.submitButton": "Continue",
+  "success.header": "Great, your personal account is set up. Now you can connect with people.",
+  "success.subheader": "What do you want to do next?",
+  "success.downloadButton": "Download Wire",
+  "success.openWebAppText": "Open Wire for web",
   "clientItem.passwordPlaceholder": "Password",
   "clientManager.headline": "Remove a device",
   "clientManager.logout": "Cancel process",
@@ -2002,4 +2009,4 @@
   "wireMacos": "{brandName} for macOS",
   "wireWindows": "{brandName} for Windows",
   "wire_for_web": "{brandName} for Web"
-}
+}

src/script/Config.ts

@@ -95,6 +95,9 @@ const config = {
   },
 
   AVS_VERSION: packageJson.dependencies['@wireapp/avs'],
+
+  COUNTLY_SERVER_URL: 'https://countly.wire.com/',
+  GET_WIRE_URL: 'https://get.wire.com',
 } as const;
 
 export type Configuration = typeof config;

src/script/auth/assets/WavesPattern.tsx

@@ -32,7 +32,7 @@ describe('when entering account data', () => {
   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-terms') as HTMLInputElement;
+  const doTermsCheckbox = () => wrapper.getByTestId('do-accept-terms') as HTMLInputElement;
   const validationErrorMessage = () => wrapper.getByTestId('error-message');
 
   describe('the submit button', () => {

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

@@ -40,6 +40,13 @@ import {ValidationError} from '../module/action/ValidationError';
 import {RootState, bindActionCreators} from '../module/reducer';
 import * as AuthSelector from '../module/selector/AuthSelector';
 import * as AccentColor from '../util/AccentColor';
+import {
+  EventName,
+  initializeTelemetry,
+  resetTelemetrySession,
+  Segmentation,
+  trackTelemetryEvent,
+} from '../util/trackingUtil';
 
 const logger = getLogger('AccountForm');
 
@@ -63,14 +70,18 @@ const AccountFormComponent = ({
     name: account.name,
     password: account.password,
     termsAccepted: account.termsAccepted,
+    privacyPolicyAccepted: account.privacyPolicyAccepted,
     confirmPassword: account.password,
   });
 
+  const [hasMultiplePasswordEntries, setHasMultiplePasswordEntries] = useState(false);
+
   const [validInputs, setValidInputs] = useState<Record<string, boolean>>({
     email: true,
     name: true,
     password: true,
     confirmPassword: true,
+    privacyPolicy: true,
     terms: true,
   });
 
@@ -82,6 +93,7 @@ const AccountFormComponent = ({
     password: useRef<HTMLInputElement | null>(null),
     confirmPassword: useRef<HTMLInputElement | null>(null),
     terms: useRef<HTMLInputElement | null>(null),
+    privacyPolicy: useRef<HTMLInputElement | null>(null),
   };
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -103,6 +115,9 @@ const AccountFormComponent = ({
 
           if (validationError) {
             errors.push(validationError);
+            if (inputKey === 'password') {
+              setHasMultiplePasswordEntries(true);
+            }
           }
         }
         newValidInputs[inputKey] = currentInputNode.validity.valid;
@@ -120,6 +135,15 @@ const AccountFormComponent = ({
       await pushAccountRegistrationData({...registrationData});
       await doSendActivationCode(registrationData.email);
 
+      if (registrationData.privacyPolicyAccepted) {
+        initializeTelemetry();
+        trackTelemetryEvent(EventName.ACCOUNT_SETUP_SCREEN_1, {
+          [Segmentation.MULTIPLE_PASSWORD_TRIES]: hasMultiplePasswordEntries,
+        });
+      } else {
+        resetTelemetrySession();
+      }
+
       return onSubmit();
     } catch (error) {
       const label = (error as BackendError)?.label;
@@ -261,37 +285,58 @@ const AccountFormComponent = ({
           setValidInputs({...validInputs, terms: true});
         }}
         markInvalid={!validInputs.terms}
-        aligncenter
-        name="accept"
-        id="accept"
+        name="accept-terms"
+        id="accept-terms"
         required
         checked={registrationData.termsAccepted}
-        data-uie-name="do-terms"
+        data-uie-name="do-accept-terms"
       >
-        <CheckboxLabel htmlFor="accept" css={styles.checkboxLabel}>
+        <CheckboxLabel htmlFor="accept-terms" css={styles.checkboxLabel}>
           <FormattedMessage
-            id="accountForm.termsAndPrivacyPolicy"
+            id="accountForm.termsAndConditions"
             values={{
-              terms: (...chunks: string[] | React.ReactNode[]) => (
+              termsAndConditionsLink: (
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
-                  data-uie-name="go-terms"
+                  data-uie-name="go-terms-and-conditions"
                   href={Config.getConfig().URL.TERMS_OF_USE_PERSONAL}
                   css={styles.checkboxLink}
                 >
-                  {chunks}
+                  {t('accountForm.termsAndConditionsLink')}
                 </a>
               ),
-              privacypolicy: (...chunks: string[] | React.ReactNode[]) => (
+            }}
+          />
+        </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}
                 >
-                  {chunks}
+                  {t('accountForm.privacyPolicyLink')}
                 </a>
               ),
             }}

src/script/auth/component/AccountForm.tsx

@@ -19,6 +19,8 @@
 
 import {ReactNode} from 'react';
 
+import {WavesPattern} from '@wireapp/react-ui-kit/lib/Images/WavesPattern';
+
 import {CheckRoundIcon, COLOR_V2, FlexBox, Logo, Text} from '@wireapp/react-ui-kit';
 
 import {t} from 'Util/LocalizerUtil';
@@ -35,8 +37,6 @@ import {
   registrationLayoutListItemIconCss,
 } from './Layout.styles';
 
-import {WavesPattern} from '../assets/WavesPattern';
-
 export const AccountRegistrationLayout = ({children}: {children: ReactNode}) => {
   const featureList = [
     t('registrationLayout.listItem1'),

src/script/auth/component/AccountRegistrationLayout.tsx

@@ -19,14 +19,15 @@
 
 import {ReactNode} from 'react';
 
+import {WavesPattern} from '@wireapp/react-ui-kit/lib/Images/WavesPattern';
+
 import {Bold, COLOR_V2, FlexBox, Link, Logo, Text} from '@wireapp/react-ui-kit';
 
 import {t} from 'Util/LocalizerUtil';
 
 import {bodyCss, contentContainerCss, leftSectionCss, whiteFontCss} from './Layout.styles';
 
 import {Config} from '../../Config';
-import {WavesPattern} from '../assets/WavesPattern';
 
 export const Layout = ({children}: {children: ReactNode}) => {
   return (

src/script/auth/component/Layout.tsx

@@ -39,6 +39,7 @@ export interface RegistrationDataState {
   password?: string;
   team?: TeamData;
   termsAccepted: boolean;
+  privacyPolicyAccepted: boolean;
   customBackendURL: string;
   accountCreationEnabled: boolean;
   shouldDisplayWarning: boolean;
@@ -69,6 +70,7 @@ export const initialAuthState: AuthState = {
     customBackendURL: '',
     accountCreationEnabled: false,
     shouldDisplayWarning: false,
+    privacyPolicyAccepted: false,
     name: '',
   },
   currentFlow: null,

src/script/auth/module/reducer/authReducer.ts

@@ -44,6 +44,7 @@ const unsetRegistrationData: RegistrationDataState = {
   customBackendURL: '',
   accountCreationEnabled: false,
   shouldDisplayWarning: false,
+  privacyPolicyAccepted: false,
 };
 
 export const isAuthenticated = (state: RootState) => state.authState.isAuthenticated;

src/script/auth/module/selector/AuthSelector.ts

@@ -45,6 +45,7 @@ import {SetEntropyPage} from './SetEntropyPage';
 import {SetHandle} from './SetHandle';
 import {SetPassword} from './SetPassword';
 import {SingleSignOn} from './SingleSignOn';
+import {Success} from './Success';
 import {VerifyEmailCode} from './VerifyEmailCode';
 import {VerifyEmailLink} from './VerifyEmailLink';
 
@@ -160,6 +161,7 @@ const RootComponent: FC<RootProps & ConnectedProps & DispatchProps> = ({
               <Route path={ROUTE.HISTORY_INFO} element={<ProtectedHistoryInfo />} />
               <Route path={`${ROUTE.AUTHORIZE}`} element={<ProtectedOAuthPermissions />} />
               <Route path={ROUTE.CUSTOM_BACKEND} element={<CustomBackend />} />
+              <Route path={ROUTE.SUCCESS} element={<Success />} />
               <Route
                 path={`${ROUTE.LOGIN}/*`}
                 element={

src/script/auth/page/Root.tsx

@@ -22,10 +22,13 @@ import React, {useEffect, useState} from 'react';
 import {BackendErrorLabel, SyntheticErrorLabel} from '@wireapp/api-client/lib/http/';
 import {ConsentType} from '@wireapp/api-client/lib/self/index';
 import {connect} from 'react-redux';
+import {useLocation} from 'react-router';
 import {AnyAction, Dispatch} from 'redux';
 
+import {Runtime} from '@wireapp/commons';
 import {Button, ContainerXS, Form, Input, InputBlock, InputSubmitCombo, Text} from '@wireapp/react-ui-kit';
 
+import {navigate} from 'src/script/router/Router';
 import {StorageKey} from 'src/script/storage';
 import {t} from 'Util/LocalizerUtil';
 import {storeValue} from 'Util/StorageUtil';
@@ -39,9 +42,10 @@ import {EXTERNAL_ROUTE} from '../externalRoute';
 import {actionRoot as ROOT_ACTIONS} from '../module/action';
 import {bindActionCreators, RootState} from '../module/reducer';
 import * as SelfSelector from '../module/selector/SelfSelector';
-import {QUERY_KEY} from '../route';
+import {QUERY_KEY, ROUTE} from '../route';
 import {parseError} from '../util/errorUtil';
 import {createSuggestions} from '../util/handleUtil';
+import {PageView, resetTelemetrySession, trackTelemetryPageView} from '../util/trackingUtil';
 import {pathWithParams} from '../util/urlUtil';
 
 type Props = React.HTMLProps<HTMLDivElement>;
@@ -59,11 +63,15 @@ const SetHandleComponent = ({
 }: Props & ConnectedProps & DispatchProps) => {
   const [error, setError] = useState(null);
   const [handle, setHandle] = useState('');
+  const {state} = useLocation();
+  const isNewAccount = state?.isNewAccount ?? false;
 
   useEffect(() => {
     if (hasSelfHandle) {
       void removeLocalStorage(QUERY_KEY.JOIN_EXPIRES);
-      window.location.replace(pathWithParams(EXTERNAL_ROUTE.WEBAPP));
+      if (!isNewAccount) {
+        window.location.replace(pathWithParams(EXTERNAL_ROUTE.WEBAPP));
+      }
     }
   }, [hasSelfHandle]);
 
@@ -78,6 +86,8 @@ const SetHandleComponent = ({
         setError(error);
       }
     })();
+
+    trackTelemetryPageView(PageView.ACCOUNT_USERNAME_SCREEN_3);
   }, []);
 
   const updateConsent = (consentType: ConsentType, value: number): Promise<void> => doSetConsent(consentType, value);
@@ -86,6 +96,12 @@ const SetHandleComponent = ({
     event.preventDefault();
     try {
       await doSetHandle(handle.trim());
+      if (Runtime.isDesktopApp() || !isNewAccount) {
+        resetTelemetrySession();
+        window.location.replace(pathWithParams(EXTERNAL_ROUTE.WEBAPP));
+      } else {
+        navigate(ROUTE.SUCCESS);
+      }
     } catch (error) {
       if (isBackendError(error) && error.label === BackendErrorLabel.INVALID_HANDLE && handle.trim().length < 2) {
         error.label = SyntheticErrorLabel.HANDLE_TOO_SHORT;