@hhgtech/hhg-components 1.29.189 → 1.29.190

package/build/esm/ssoV2.js

@@ -1,53 +1,75 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-a4ad90f1.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-1ba482e3.js';
 import React__default, { createContext, useEffect } from 'react';
-import { I as Input, P as Phone, O as OTP, f as PasswordInput, R as Radio, E as ErrorBoundary } from './index-fa5b0d5d.js';
+import { I as Input, P as Phone, O as OTP, f as PasswordInput, R as Radio, E as ErrorBoundary } from './index-d12f85c7.js';
 import { ChevronLeft } from '@hhgtech/icons/arrow';
 import { Close } from '@hhgtech/icons/core';
-import { L as LogoIcon } from './logoIcon-39aa3cc4.js';
-import { B as Button } from './index-737cb58a.js';
-import { M as Modal } from './index-98623f88.js';
+import { L as LogoIcon } from './logoIcon-b58988fc.js';
+import { B as Button } from './index-5bba3808.js';
+import { M as Modal } from './index-cb562197.js';
 import { Stack, LoadingOverlay, Group } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, S as STATIC_PAGES } from './index-81d886e8.js';
-import './index-34295663.js';
-import './index-44c7ee13.js';
-import { s as showNotification } from './useMantineLocale-21128e42.js';
-import { T as Text } from './index-df543a7f.js';
-import { u as useTranslations } from './index-611f8043.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES } from './index-6e088916.js';
+import './index-fb1b89e4.js';
+import './index-1778318e.js';
+import { s as showNotification } from './useMantineLocale-12c43b79.js';
+import { T as Text } from './index-4af9174f.js';
+import { u as useTranslations } from './index-b4d4759e.js';
 import '@mantine/hooks';
-import './utils-ddedc170.js';
-import './other-a2166692.js';
-import './index-209ac2b9.js';
-import { L as LOCALE } from './Locale-4f469673.js';
-import { a as useSSOSteps, f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, b as SSOStepTypeType, d as allAvailableAreaCodes, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, e as updateUserInfo, r as resetPassword, u as useSSOV2Store, i as redirect } from './store-7541e013.js';
-export { u as useSSOV2Store } from './store-7541e013.js';
-import { G as Google, F as Facebook } from './Google-9f852357.js';
+import './utils-a699af3c.js';
+import './other-10a63a19.js';
+import './index-17ba6120.js';
+import { L as LOCALE } from './Locale-de23827f.js';
+import { a as useSSOSteps, f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, b as SSOStepTypeType, d as allAvailableAreaCodes, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, e as updateUserInfo, r as resetPassword, u as useSSOV2Store, i as redirect } from './store-4de9899a.js';
+export { u as useSSOV2Store } from './store-4de9899a.js';
+import { G as Google, F as Facebook } from './Google-d936d284.js';
 import styled from '@emotion/styled';
-import { M as MAPPED_LOCALE } from './utils-1d8c3080.js';
+import { M as MAPPED_LOCALE } from './utils-2a1a142c.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { useForm, yupResolver } from '@mantine/form';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-7d7421ec.js';
+import { D as DatePicker } from './index-dcddab2d.js';
 import '@hhgtech/icons/other';
-import './index.styles-d0907cfd.js';
+import './index.styles-057dd35a.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './index-b3851438.js';
+import './index-f92d923e.js';
 import 'classnames';
-import './useUniqueId-889af49b.js';
+import './useUniqueId-3a037161.js';
 import './constantsSite.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
 import '@mantine/notifications';
-import './translationsContext-2deb9b1f.js';
+import './translationsContext-d2fa8002.js';
 import 'zustand';
-import './normalizeLink-4a4c6aa6.js';
+import './normalizeLink-bc328206.js';
 import './miscCookieHelper.js';
 
+const SSOStateContext = createContext({
+    locale: LOCALE.Vietnam,
+    onClose: () => false,
+    setTracking: () => false,
+});
+const SSOStateProvider = ({ children, locale = LOCALE.Vietnam, onClose, }) => {
+    const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default.useState(false);
+    const [tracking, setTracking] = React__default.useState();
+    return (React__default.createElement(SSOStateContext.Provider, { value: {
+            locale,
+            onClose,
+            openCollectInfoPopup,
+            setOpenCollectInfoPopup,
+            tracking,
+            setTracking,
+        } }, children));
+};
+const useSSOState = () => {
+    return React__default.useContext(SSOStateContext);
+};
+
 const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
     const { t } = useTranslations();
+    const { tracking } = useSSOState();
     return (React__default.createElement(Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: 400, styles: (theme) => ({
             body: {
                 padding: '32px 24px',
@@ -87,9 +109,9 @@ const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
             React__default.createElement(Text, { size: "h4" }, t('ssov2.popup.close.title')),
             React__default.createElement(Text, { size: "p3" }, t('ssov2.popup.close.description'))),
         React__default.createElement(Stack, { mt: 32, spacing: 8, align: "center" },
-            React__default.createElement(Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40 },
+            React__default.createElement(Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Cancel Exit" },
                 React__default.createElement(Text, { size: "s2", weight: "regular", color: "inherit" }, t('ssov2.button.cancel'))),
-            React__default.createElement(Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true },
+            React__default.createElement(Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Want to exit" },
                 React__default.createElement(Text, { size: "p2", weight: "regular", color: "gray.6" }, t('ssov2.button.exitNow'))))));
 };
 const BackgroundHeader = () => (React__default.createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
@@ -121,27 +143,10 @@ const BackgroundHeader = () => (React__default.createElement("svg", { width: "29
             React__default.createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
             React__default.createElement("stop", { offset: "1", stopColor: "#fff" })))));
 
-const SSOStateContext = createContext({
-    locale: LOCALE.Vietnam,
-    onClose: () => false,
-});
-const SSOStateProvider = ({ children, locale = LOCALE.Vietnam, onClose, }) => {
-    const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default.useState(false);
-    return (React__default.createElement(SSOStateContext.Provider, { value: {
-            locale,
-            onClose,
-            openCollectInfoPopup,
-            setOpenCollectInfoPopup,
-        } }, children));
-};
-const useSSOState = () => {
-    return React__default.useContext(SSOStateContext);
-};
-
 const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     var _a;
     const { steps, goBack } = useSSOSteps();
-    const { locale } = useSSOState();
+    const { locale, tracking } = useSSOState();
     const showBack = steps.length > 1;
     const showClose = steps.length === 1;
     const showLogo = steps.length === 1;
@@ -194,7 +199,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         padding: 8,
                         background: 'white',
                         borderRadius: '100%',
-                    }, onClick: goBack },
+                    }, onClick: goBack, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "back" },
                     React__default.createElement(ChevronLeft, null))),
                 showLogo && (React__default.createElement(LogoIcon, { type: logoType, height: 32, width: 'unset' })),
                 showClose && (React__default.createElement(Button, { variant: "white", style: {
@@ -203,7 +208,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         padding: 8,
                         background: 'white',
                         borderRadius: '100%',
-                    }, onClick: onCloseClick },
+                    }, onClick: onCloseClick, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Exit" },
                     React__default.createElement(Close, null)))),
             React__default.createElement("div", { style: {
                     flex: 1,
@@ -348,7 +353,14 @@ const SSOEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const { addStep, goNext, setShareData } = useSSOSteps();
+    const trackingCategory = `SSO - Sign Up via Email`;
+    const trackingAction = 'Continue With Email';
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -419,8 +431,8 @@ const SSOEmailScreen = ({ hidden, }) => {
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.email.description'))),
-        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg('') }),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, disabled: loading, loading: loading }, t('ssov2.email.button'))));
+        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg(''), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Verify Your Email" }, t('ssov2.email.button'))));
 };
 
 const splitPhone = (phone) => {
@@ -633,8 +645,15 @@ const SSOFirstScreen = ({ hidden }) => {
     const { locale, onClose } = useSSOState();
     const { addStep, goNext, setShareData } = useSSOSteps();
     const { t } = useTranslations();
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const [loading, setLoading] = React__default.useState(false);
     const [loadingOverlay, setLoadingOverlay] = React__default.useState(false);
+    const trackingCategory = 'Sign In or Sign Up';
+    const trackingAction = 'SSO - Sign Up';
     const handleLoginBySocial = (credential, provider) => __awaiter(void 0, void 0, void 0, function* () {
         var _c, _d, _e;
         const res = yield loginBySocial(credential, provider);
@@ -679,6 +698,9 @@ const SSOFirstScreen = ({ hidden }) => {
                     setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'verify-phone' })));
                     addStep({
                         type: SSOStepTypeType.VERIFY_PHONE,
+                        config: {
+                            provider: provider,
+                        },
                     });
                     goNext();
                 }
@@ -744,6 +766,7 @@ const SSOFirstScreen = ({ hidden }) => {
                     type: SSOStepTypeType.PASSWORD,
                     config: {
                         phone,
+                        isZalo: true,
                     },
                 });
                 goNext();
@@ -897,9 +920,9 @@ const SSOFirstScreen = ({ hidden }) => {
                         onClickContinueZalo();
                     } },
                     React__default.createElement(Input.Wrapper, { error: errMsg },
-                        React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone", disabled: loading }))),
-                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, loading: loading, disabled: loading }, t('ssov2.button.continueZalo')),
-                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, loading: loading, disabled: loading }, t('ssov2.button.continueSMS'))),
+                        React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone", disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" }))),
+                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Zalo" }, t('ssov2.button.continueZalo')),
+                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS'))),
             React__default.createElement(Stack, { spacing: 16, align: "center" },
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.orContinueWith')),
                 React__default.createElement(Group, { spacing: 24 },
@@ -910,7 +933,7 @@ const SSOFirstScreen = ({ hidden }) => {
                             padding: 12,
                             background: '#F7F9FC',
                             borderRadius: '100%',
-                        }, onClick: onTriggerGoogleLogin },
+                        }, onClick: onTriggerGoogleLogin, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Google" },
                         React__default.createElement(Google, { style: { width: 24, height: 24 } })),
                     React__default.createElement(Button, { variant: "white", style: {
                             width: 48,
@@ -918,7 +941,7 @@ const SSOFirstScreen = ({ hidden }) => {
                             padding: 12,
                             background: '#F7F9FC',
                             borderRadius: '100%',
-                        }, onClick: onTriggerFacebookLogin },
+                        }, onClick: onTriggerFacebookLogin, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Facebook" },
                         React__default.createElement(Facebook, { style: { width: 24, height: 24 } })),
                     React__default.createElement(Button, { variant: "white", style: {
                             width: 48,
@@ -926,7 +949,7 @@ const SSOFirstScreen = ({ hidden }) => {
                             padding: 12,
                             background: '#F7F9FC',
                             borderRadius: '100%',
-                        }, onClick: onClickEmail },
+                        }, onClick: onClickEmail, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Email" },
                         React__default.createElement(MailIcon, null))))),
         React__default.createElement(Stack, { spacing: 24, sx: (theme) => ({
                 marginTop: 56,
@@ -938,11 +961,11 @@ const SSOFirstScreen = ({ hidden }) => {
                 privacy: (React__default.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_a = STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
                         color: '#262626',
                         textDecoration: 'underline',
-                    } }, t('ssov2.policyText.privacy'))),
+                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Privacy Policy" }, t('ssov2.policyText.privacy'))),
                 terms: (React__default.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_b = STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
                         color: '#262626',
                         textDecoration: 'underline',
-                    } }, t('ssov2.policyText.terms'))),
+                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Terms of Service" }, t('ssov2.policyText.terms'))),
             })))));
 };
 
@@ -970,17 +993,34 @@ const verifyUpdateEmailOTP = (otpCode) => __awaiter(void 0, void 0, void 0, func
     });
 });
 
-const SSOOTPScreen = ({ hidden, index, }) => {
+const SSOOTPScreen = ({ hidden, index, config, }) => {
     const { t } = useTranslations();
     const { onClose } = useSSOState();
-    const { steps, setSteps, addStep, goNext } = useSSOSteps();
+    const { setSteps, addStep, goNext, shareData } = useSSOSteps();
     const [loading, setLoading] = React__default.useState(false);
     const [otp, setOtp] = React__default.useState('');
     const [error, setError] = React__default.useState('');
-    const currentStepIndex = index;
-    const currentStep = steps[currentStepIndex];
-    const { phone, email, otpType, isUpdatePhone, afterAction, setupData } = currentStep.config;
+    useEffect(() => {
+        if (!hidden) {
+            setError('');
+        }
+    }, [hidden]);
+    const { phone, email, otpType, isUpdatePhone, afterAction, setupData } = config;
     const isEmail = otpType === 'email' || otpType === 'update-email';
+    const isZalo = otpType === 'phone-zalo';
+    const isSMS = otpType === 'phone-sms';
+    const trackingMethod = isEmail
+        ? 'Email'
+        : isZalo
+            ? 'Zalo'
+            : isSMS
+                ? 'SMS'
+                : '';
+    const isRegister = (shareData === null || shareData === void 0 ? void 0 : shareData.authFlow) === 'register' &&
+        otpType !== 'update-email' &&
+        !isUpdatePhone;
+    const trackingCategory = `SSO - ${isRegister ? 'Sign Up' : 'Existing Users'} via ${trackingMethod}`;
+    const trackingAction = `Verify Phone Number via ${trackingMethod}`;
     const sendOTPCode = (checkResend) => __awaiter(void 0, void 0, void 0, function* () {
         if (checkResend && resendTime > 0)
             return;
@@ -1128,6 +1168,9 @@ const SSOOTPScreen = ({ hidden, index, }) => {
             if (afterAction === 'forgot') {
                 addStep({
                     type: SSOStepTypeType.FORGOT_PASSWORD_SETUP,
+                    config: {
+                        provider: isZalo ? 'Zalo' : isSMS ? 'SMS' : isEmail ? 'Email' : '',
+                    },
                 });
                 goNext();
             }
@@ -1196,7 +1239,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                 setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                 return setLoading(false);
             }
-            setSteps((s) => s.map((step, i) => i === currentStepIndex
+            setSteps((s) => s.map((step, i) => i === index
                 ? Object.assign(Object.assign({}, step), { config: Object.assign(Object.assign({}, step.config), { otpType: newType }) }) : step));
         }
         catch (e) {
@@ -1248,7 +1291,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                 React__default.createElement(OTP, { value: otp, onChange: (otp) => {
                         setOtp(String(otp));
                         setError('');
-                    } })),
+                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Code" })),
             React__default.createElement(Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -1256,39 +1299,46 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                 React__default.createElement(Text, { style: {
                         pointerEvents: resendTime > 0 ? 'none' : 'auto',
                         cursor: resendTime > 0 ? 'not-allowed' : 'pointer',
-                    }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) }, t('ssov2.otp.resendText', {
+                    }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Resend OTP" }, t('ssov2.otp.resendText', {
                     count: resendTime,
                 })))),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.continue')),
-        !isEmail && (React__default.createElement(Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.otp.sendVia', {
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue" }, t('ssov2.button.continue')),
+        !isEmail && (React__default.createElement(Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": `Send OTP Code via ${otpType === 'phone-sms' ? 'Zalo' : 'SMS'}` }, t('ssov2.otp.sendVia', {
             method: otpType === 'phone-sms' ? 'Zalo' : 'SMS',
         })))));
 };
 
-const SSOPasswordScreen = ({ hidden, index, }) => {
-    var _a, _b;
+const SSOPasswordScreen = ({ hidden, config, }) => {
     const { t } = useTranslations();
     const { onClose } = useSSOState();
     const [errMsg, setErrMsg] = React__default.useState('');
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const [loading, setLoading] = React__default.useState(false);
-    const { steps, addStep, goNext, setShareData } = useSSOSteps();
-    const thisStep = steps[index];
-    const phone = (_a = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _a === void 0 ? void 0 : _a.phone;
-    const email = (_b = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _b === void 0 ? void 0 : _b.email;
+    const { addStep, goNext, setShareData } = useSSOSteps();
+    const phone = config === null || config === void 0 ? void 0 : config.phone;
+    const isZalo = config === null || config === void 0 ? void 0 : config.isZalo;
+    const email = config === null || config === void 0 ? void 0 : config.email;
     const resetPassword = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+        var _a;
         setLoading(true);
         try {
             if (phone) {
                 addStep({
                     type: SSOStepTypeType.FORGOT_PASSWORD_PHONE,
+                    config: {
+                        phone,
+                    },
                 });
             }
             else {
                 const existRes = yield checkUserExist({ email });
                 if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
                     let res;
-                    if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
+                    if (!((_a = existRes._data) === null || _a === void 0 ? void 0 : _a.provider)) {
                         res = yield registerBySendEmailOTP(email);
                     }
                     else {
@@ -1317,17 +1367,20 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
         setLoading(false);
     });
     const onAuthSuccess = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e;
+        var _b, _c;
         handleAuthSuccess(data);
         if (!phone && !!email) {
             const userInfo = yield getUserInfo();
-            if (!((_d = userInfo._data) === null || _d === void 0 ? void 0 : _d.phone_verified_at) || !((_e = userInfo._data) === null || _e === void 0 ? void 0 : _e.phone)) {
+            if (!((_b = userInfo._data) === null || _b === void 0 ? void 0 : _b.phone_verified_at) || !((_c = userInfo._data) === null || _c === void 0 ? void 0 : _c.phone)) {
                 setShareData({
                     authMethod: 'mail',
                     authFlow: 'verify-phone',
                 });
                 addStep({
                     type: SSOStepTypeType.VERIFY_PHONE,
+                    config: {
+                        provider: 'email',
+                    },
                 });
                 goNext();
                 return;
@@ -1335,6 +1388,8 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
         }
         onClose === null || onClose === void 0 ? void 0 : onClose(true);
     });
+    const trackingCategory = `SSO - Sign In via ${email ? 'Email' : isZalo ? 'Zalo' : 'SMS'}`;
+    const trackingAction = 'Welcome Back';
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -1370,24 +1425,31 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
                 t('ssov2.password.title2')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.password.description'))),
         React__default.createElement(Stack, { mt: 24, spacing: 8 },
-            React__default.createElement(PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg(''), disabled: loading, required: true }),
+            React__default.createElement(PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg(''), disabled: loading, required: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Password" }),
             React__default.createElement(Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.password.forgotPassword')),
                 React__default.createElement(Text, { size: "s4", color: "blue.6", style: {
                         cursor: 'pointer',
-                    }, onClick: resetPassword }, t('ssov2.password.reset')))),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.password.signIn'))));
+                    }, onClick: resetPassword, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Reset Password" }, t('ssov2.password.reset')))),
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Sign In" }, t('ssov2.password.signIn'))));
 };
 
-const SSOPasswordForgotPhone = ({ hidden, }) => {
+const SSOPasswordForgotPhone = ({ hidden, config, }) => {
+    const phone = config === null || config === void 0 ? void 0 : config.phone;
     const { t } = useTranslations();
-    const [phone, setPhone] = React__default.useState('');
     const [errMsg, setErrMsg] = React__default.useState('');
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const [loading, setLoading] = React__default.useState(false);
     const { locale } = useSSOState();
     const { addStep, goNext, setShareData } = useSSOSteps();
+    const trackingCategory = `SSO - Sign In via Phone`;
+    const trackingAction = 'Forgot Password';
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         setLoading(true);
@@ -1487,10 +1549,12 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.resetPassword.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.resetPassword.description'))),
         React__default.createElement(Stack, { mt: 24, spacing: 16 },
-            React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, disabled: loading }),
+            React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, 
+                // onChange={(value) => setPhone(value)}
+                isError: !!errMsg, required: true, disabled: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" }),
             errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
-            React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading }, t('ssov2.button.continueSMS')))));
+            React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Zalo" }, t('ssov2.button.continueZalo')),
+            React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS')))));
 };
 
 const CheckGrayIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1501,7 +1565,7 @@ const CheckRedIcon = () => (React__default.createElement("svg", { width: "16", h
     React__default.createElement("path", { d: "m8.001 8.703 2.049 2.048q.138.14.348.142a.47.47 0 0 0 .355-.142.48.48 0 0 0 .145-.35.48.48 0 0 0-.145-.352L8.703 8l2.05-2.049a.48.48 0 0 0 .141-.348.47.47 0 0 0-.141-.354.48.48 0 0 0-.352-.145.48.48 0 0 0-.351.145L8.001 7.298l-2.048-2.05a.48.48 0 0 0-.349-.14.47.47 0 0 0-.354.14.48.48 0 0 0-.145.352q0 .207.145.351l2.049 2.05-2.049 2.048a.48.48 0 0 0-.142.348.47.47 0 0 0 .142.354.48.48 0 0 0 .351.145.48.48 0 0 0 .352-.145zm.001 5.63a6.2 6.2 0 0 1-2.47-.498 6.4 6.4 0 0 1-2.011-1.354 6.4 6.4 0 0 1-1.354-2.01A6.2 6.2 0 0 1 1.668 8q0-1.315.499-2.47A6.4 6.4 0 0 1 3.52 3.52a6.4 6.4 0 0 1 2.01-1.354 6.2 6.2 0 0 1 2.47-.5q1.314 0 2.47.5 1.156.498 2.012 1.353.855.855 1.354 2.01.499 1.156.499 2.47t-.499 2.47a6.4 6.4 0 0 1-1.354 2.011 6.4 6.4 0 0 1-2.01 1.355 6.2 6.2 0 0 1-2.47.498", fill: "#F44D2C" })));
 
 const SSOPasswordWithConfirm = (_a) => {
-    var { form, loading } = _a, props = __rest(_a, ["form", "loading"]);
+    var { form, loading, tracking } = _a, props = __rest(_a, ["form", "loading", "tracking"]);
     const { t } = useTranslations();
     const [atLeast8Chars, setAtLeast8Chars] = React__default.useState(undefined);
     const [atLeastOneUpper, setAtLeastOneUpper] = React__default.useState(undefined);
@@ -1516,7 +1580,7 @@ const SSOPasswordWithConfirm = (_a) => {
         React__default.createElement(PasswordInput, Object.assign({ name: "password", placeholder: t('ssov2.passwordForgotSetup.field.password.placeholder'), label: t('ssov2.passwordForgotSetup.field.password.label'), required: true, withAsterisk: true }, form.getInputProps('password'), { onBlur: (e) => {
                 form.getInputProps('password').onBlur(e);
                 form.values.confirmPassword && form.validateField('confirmPassword');
-            }, disabled: loading })),
+            }, disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Password" })),
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "n1" },
                 atLeast8Chars ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
@@ -1526,13 +1590,18 @@ const SSOPasswordWithConfirm = (_a) => {
                 atLeastOneUpper ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
                 ' ',
                 t('ssov2.passwordForgotSetup.field.password.atLeastOneUpper'))),
-        React__default.createElement(PasswordInput, Object.assign({ name: "confirm-password", placeholder: t('ssov2.passwordForgotSetup.field.passwordConfirm.placeholder'), label: t('ssov2.passwordForgotSetup.field.passwordConfirm.label'), required: true, withAsterisk: true, disabled: loading }, form.getInputProps('confirmPassword')))));
+        React__default.createElement(PasswordInput, Object.assign({ name: "confirm-password", placeholder: t('ssov2.passwordForgotSetup.field.passwordConfirm.placeholder'), label: t('ssov2.passwordForgotSetup.field.passwordConfirm.label'), required: true, withAsterisk: true, disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Confirm Password" }, form.getInputProps('confirmPassword')))));
 };
 
-const SSOPasswordForgotSetup = ({ hidden }) => {
+const SSOPasswordForgotSetup = ({ hidden, config, }) => {
     const { t } = useTranslations();
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const { steps, setSteps, goBack, currentStepIndex, addStep, goNext } = useSSOSteps();
     const form = useForm({
         validate: yupResolver(yup.object().shape({
@@ -1594,6 +1663,8 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
         }
         setLoading(false);
     });
+    const trackingCategory = `SSO - Sign In via ${config.provider}`;
+    const trackingAction = `Setup New Password`;
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: form.onSubmit(onSubmit) },
@@ -1601,20 +1672,29 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
             React__default.createElement(Stack, { spacing: 8 },
                 React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.passwordForgotSetup.title')),
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.passwordForgotSetup.description'))),
-            React__default.createElement(SSOPasswordWithConfirm, { form: form, loading: loading }),
+            React__default.createElement(SSOPasswordWithConfirm, { form: form, loading: loading, tracking: {
+                    category: trackingCategory,
+                    action: trackingAction,
+                } }),
             errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.save')))));
+            React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Save" }, t('ssov2.button.save')))));
 };
 
-const SSOPhoneVerify = ({ hidden, index, }) => {
+const SSOPhoneVerify = ({ hidden, config, }) => {
     const { t } = useTranslations();
     const [phone, setPhone] = React__default.useState('');
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const { locale } = useSSOState();
-    const { addStep, goNext, steps } = useSSOSteps();
-    const currentStep = steps[index];
-    const { afterAction } = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.config) || {};
+    const { addStep, goNext } = useSSOSteps();
+    const { afterAction, provider } = config || {};
+    const trackingCategory = `SSO - Existing Users via ${provider}`;
+    const trackingAction = 'Verify Phone Number';
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
@@ -1709,9 +1789,9 @@ const SSOPhoneVerify = ({ hidden, index, }) => {
                     React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => {
                             setPhone(value);
                             setErrMsg('');
-                        }, isError: !!errMsg, required: true, name: "phone", disabled: loading })),
-                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
-                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading }, t('ssov2.button.continueSMS'))))));
+                        }, isError: !!errMsg, required: true, name: "phone", disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" })),
+                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Zalo" }, t('ssov2.button.continueZalo')),
+                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS'))))));
 };
 
 const FemaleIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1744,7 +1824,7 @@ const MaleIcon = () => (React__default.createElement("svg", { width: "20", heigh
     React__default.createElement("path", { d: "m11.12 9.547-.019.001a8 8 0 0 1-1.928 0 .156.156 0 1 0-.037.31c.665.08 1.337.08 2.003 0a.156.156 0 0 0-.019-.31", fill: "#D84023" })));
 
 // always has name, gender dob
-const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) => {
+const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, tracking, }) => {
     const { t } = useTranslations();
     const { locale = 'vi-VN' } = useSSOState();
     const { setupSource } = useSSOV2Store();
@@ -1753,7 +1833,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) =>
             React__default.createElement(Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.phone.label'), withAsterisk: true }, form.getInputProps('phone')),
                 React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: form.getInputProps('phone').value, onChange: (value) => {
                         form.setFieldValue('phone', value);
-                    }, isError: !!form.getInputProps('phone').error, required: true, name: "phone", disabled: loading })),
+                    }, isError: !!form.getInputProps('phone').error, required: true, name: "phone", disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Phone" })),
             React__default.createElement(Group, { spacing: 24 },
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.setup.field.otp.label')),
                 React__default.createElement(Radio.Group, Object.assign({ name: "otpMethod", styles: {
@@ -1768,14 +1848,14 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) =>
                             label: {
                                 paddingLeft: 8,
                             },
-                        }, disabled: loading }),
+                        }, disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Send OTP Code via Zalo" }),
                     React__default.createElement(Radio, { value: "sms", label: "SMS", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
-                        }, disabled: loading }))))),
-        needEmail && (React__default.createElement(Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable || loading, required: setupSource === 'care' ? true : false, withAsterisk: setupSource === 'care' ? true : false }, form.getInputProps('email')))),
-        React__default.createElement(Input, Object.assign({ name: "name", label: t('ssov2.setup.field.name.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.name.placeholder'), disabled: loading }, form.getInputProps('name'))),
+                        }, disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Send OTP Code via SMS" }))))),
+        needEmail && (React__default.createElement(Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable || loading, required: setupSource === 'care' ? true : false, withAsterisk: setupSource === 'care' ? true : false, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Email" }, form.getInputProps('email')))),
+        React__default.createElement(Input, Object.assign({ name: "name", label: t('ssov2.setup.field.name.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.name.placeholder'), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Name" }, form.getInputProps('name'))),
         React__default.createElement(Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.gender.label'), withAsterisk: true }, form.getInputProps('gender')),
             React__default.createElement(Group, null,
                 React__default.createElement(Button, { type: "button", styles: {
@@ -1792,7 +1872,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) =>
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
-                    }, leftIcon: React__default.createElement(FemaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.female')),
+                    }, leftIcon: React__default.createElement(FemaleIcon, null), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Gender Female" }, t('ssov2.setup.field.gender.female')),
                 React__default.createElement(Button, { type: "button", styles: {
                         root: {
                             flex: 1,
@@ -1807,20 +1887,23 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) =>
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    }, leftIcon: React__default.createElement(MaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.male')))),
-        React__default.createElement(DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date(), disabled: loading }, form.getInputProps('dob')))));
+                    }, leftIcon: React__default.createElement(MaleIcon, null), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Gender Male" }, t('ssov2.setup.field.gender.male')))),
+        React__default.createElement(DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate()), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Birthday" }, form.getInputProps('dob')))));
 };
 
-const SSOSetupScreen = ({ hidden, index, }) => {
+const SSOSetupScreen = ({ hidden, config, }) => {
     var _a, _b;
     const { onClose } = useSSOState();
     const { t } = useTranslations();
-    const { goNext, steps, addStep, shareData } = useSSOSteps();
+    const { goNext, addStep, shareData } = useSSOSteps();
     const { setupSource } = useSSOV2Store();
     const [errMsg, setErrMsg] = React__default.useState('');
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const [loading, setLoading] = React__default.useState(false);
-    const currentStep = steps[index];
-    const config = currentStep === null || currentStep === void 0 ? void 0 : currentStep.config;
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
     const configPhone = config === null || config === void 0 ? void 0 : config.phone;
     const authMethod = shareData === null || shareData === void 0 ? void 0 : shareData.authMethod;
@@ -2000,6 +2083,9 @@ const SSOSetupScreen = ({ hidden, index, }) => {
         }
         setLoading(false);
     });
+    const isRegister = authFlow === 'register';
+    const trackingCategory = `SSO - Sign Up via ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.provider}`;
+    const trackingAction = isRegister ? 'Almost done' : '';
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: form.onSubmit(onSubmit) },
@@ -2007,10 +2093,20 @@ const SSOSetupScreen = ({ hidden, index, }) => {
             React__default.createElement(Stack, { spacing: 8 },
                 React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.setup.title')),
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.setup.description'))),
-            needPass && (React__default.createElement(SSOPasswordWithConfirm, { form: form, loading: loading })),
-            React__default.createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form, loading: loading }),
+            needPass && (React__default.createElement(SSOPasswordWithConfirm, { form: form, loading: loading, tracking: {
+                    category: trackingCategory,
+                    action: trackingAction,
+                } })),
+            React__default.createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form, loading: loading, tracking: {
+                    category: trackingCategory,
+                    action: trackingAction,
+                } }),
             errMsg && (React__default.createElement(Text, { color: "red.6", size: "p4" }, errMsg)),
-            React__default.createElement(Button, { type: "submit", variant: "primary", fullWidth: true, loading: loading, disabled: loading }, needPhone
+            React__default.createElement(Button, { type: "submit", variant: "primary", fullWidth: true, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": needPhone
+                    ? 'Verify Phone Number'
+                    : authFlow === 'register'
+                        ? 'Create Your Account'
+                        : 'Save' }, needPhone
                 ? t('ssov2.setup.button.veriyPhone')
                 : authFlow === 'register'
                     ? t('ssov2.setup.button.createAccount')
@@ -2020,8 +2116,15 @@ const SSOSetupScreen = ({ hidden, index, }) => {
 const SSOUpdateEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
     const [errMsg, setErrMsg] = React__default.useState('');
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+        }
+    }, [hidden]);
     const { addStep, goNext, setShareData } = useSSOSteps();
     const [loading, setLoading] = React__default.useState(false);
+    const trackingCategory = `SSO - Update Email`;
+    const trackingAction = 'Update Your Email';
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -2070,8 +2173,8 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.updateEmail.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.updateEmail.description'))),
-        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, onChange: () => setErrMsg(''), disabled: loading }),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, loading: loading, disabled: loading }, t('ssov2.updateEmail.button'))));
+        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, onChange: () => setErrMsg(''), disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Verify Your Email" }, t('ssov2.updateEmail.button'))));
 };
 
 const SSOScreenRenderer = () => {
@@ -2083,22 +2186,22 @@ const SSOScreenRenderer = () => {
             case SSOStepTypeType.FIRST:
                 return React__default.createElement(SSOFirstScreen, { key: key, hidden: !isCurrentStep });
             case SSOStepTypeType.PASSWORD:
-                return (React__default.createElement(SSOPasswordScreen, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, index: index }));
+                return (React__default.createElement(SSOPasswordScreen, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.FORGOT_PASSWORD_PHONE:
-                return (React__default.createElement(SSOPasswordForgotPhone, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default.createElement(SSOPasswordForgotPhone, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.FORGOT_PASSWORD_SETUP:
-                return (React__default.createElement(SSOPasswordForgotSetup, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep }));
+                return (React__default.createElement(SSOPasswordForgotSetup, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, config: step.config }));
             case SSOStepTypeType.OTP:
                 const { phone, email, otpType } = step.config || {};
-                return (React__default.createElement(SSOOTPScreen, { key: [key, phone, email, otpType].join('-'), hidden: !isCurrentStep, index: index }));
+                return (React__default.createElement(SSOOTPScreen, { key: [key, phone, email, otpType].join('-'), hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.EMAIL:
-                return (React__default.createElement(SSOEmailScreen, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default.createElement(SSOEmailScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.SETUP_FULL:
-                return (React__default.createElement(SSOSetupScreen, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default.createElement(SSOSetupScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.VERIFY_PHONE:
-                return (React__default.createElement(SSOPhoneVerify, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default.createElement(SSOPhoneVerify, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.UPDATE_EMAIL:
-                return (React__default.createElement(SSOUpdateEmailScreen, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default.createElement(SSOUpdateEmailScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             default:
                 return React__default.createElement("div", { key: key }, "Not found");
         }