}
@@ -86,6 +98,7 @@ export const ConfirmInvitation = () => {
type="password"
value={password}
data-uie-name="enter-login-password"
+ onBlur={() => trackEvent(SegmentationValue.PASSWORD_ENTERED)}
/>
diff --git a/src/script/page/migration/TermsAcknowledgement.tsx b/src/script/page/migration/TermsAcknowledgement.tsx
index 814c3faca3..836ebcdea1 100644
--- a/src/script/page/migration/TermsAcknowledgement.tsx
+++ b/src/script/page/migration/TermsAcknowledgement.tsx
@@ -23,6 +23,7 @@ import {
Checkbox,
COLOR_V2,
Link,
+ Loading,
Logo,
QUERY,
QueryKeys,
@@ -36,27 +37,65 @@ import {
termsContentHeaderCss,
termsListCss,
termsListItemCss,
- termsContentGrayBox,
- termsContentGrayBoxContent,
+ termsContentWarningBox,
+ termsContentWarningBoxContent,
termsContentBlueBox,
termsContentBlueBoxContent,
buttonCss,
termsCheckboxLabelCss,
+ loginContainerCss,
} from './styles';
import {ShieldIcon} from './ShieldIcon';
import {OutlinedCheckIcon} from './OutlinedCheckIcon';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {EXTERNAL_ROUTE, ROUTE} from 'script/route';
import {useTranslation} from 'react-i18next';
import MarkupTranslation from 'script/component/MarkupTranslation';
+import {useActionContext} from 'script/module/action';
+import {getTeamInvitationCode} from './utils';
+import {reportEvent} from 'script/util/Tracking/Tracking';
+import {EventName, SegmentationKey, SegmentationValue} from 'script/util/Tracking/types';
export const TermsAcknowledgement = () => {
const navigate = useNavigate();
+ const {teamAction} = useActionContext();
const {t} = useTranslation('migration');
const isTablet = useMatchMedia(QUERY[QueryKeys.TABLET_DOWN]);
+ const code = getTeamInvitationCode();
+ const [loading, setLoading] = useState(true);
const [isMigrationAccepted, setIsMigrationAccepted] = useState(false);
const [isTermOfUseAccepted, setIsTermOfUseAccepted] = useState(false);
+ const [inviterEmail, setInviterEmail] = useState('');
+
+ const trackEvent = (step: SegmentationValue) => {
+ reportEvent(EventName.USER_MIGRATION_TERMS_ACKNOWLEDGEMENT, {
+ [SegmentationKey.STEP]: step,
+ });
+ };
+
+ useEffect(() => {
+ trackEvent(SegmentationValue.OPENED);
+ teamAction
+ .getInvitationInfo(code)
+ .then(res => {
+ setInviterEmail(res.created_by_email);
+ })
+ .finally(() => setLoading(false));
+ }, []);
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ const handleSubmit = () => {
+ navigate(ROUTE.CONFIRM_INVITATION);
+ trackEvent(SegmentationValue.CONTINUE_CLICKED);
+ };
return (
@@ -66,7 +105,7 @@ export const TermsAcknowledgement = () => {
)}
{t('termsPageHeader')}
-
{t('termsPageHeader')}
+
{t('termsPageSubHeader', {email: inviterEmail})}
{t('termsPageListHeader')}
@@ -87,8 +126,8 @@ export const TermsAcknowledgement = () => {
-
-
+
+
{t('termsPageAccountManagerHeader')}
{t('termsPageAccountManagerText')}
@@ -116,6 +155,7 @@ export const TermsAcknowledgement = () => {
checked={isMigrationAccepted}
onChange={(event: React.ChangeEvent
) => {
setIsMigrationAccepted(event.target.checked);
+ trackEvent(SegmentationValue.AGREE_MIGRATION_TERMS_CHECK);
}}
id="do-accept-migration"
data-uie-name="do-accept-migration"
@@ -127,6 +167,7 @@ export const TermsAcknowledgement = () => {
checked={isTermOfUseAccepted}
onChange={(event: React.ChangeEvent) => {
setIsTermOfUseAccepted(event.target.checked);
+ trackEvent(SegmentationValue.AGREE_TOC_CHECK);
}}
id="do-accept-terms"
data-uie-name="do-accept-terms"
@@ -141,7 +182,7 @@ export const TermsAcknowledgement = () => {