@hhgtech/hhg-components 1.29.189 → 1.29.191

package/build/ssoV2.js

@@ -2,51 +2,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-9230afe1.js');
+var tslib_es6 = require('./tslib.es6-ebf23f83.js');
 var React = require('react');
-var index$5 = require('./index-82b36521.js');
+var index$5 = require('./index-c61be47d.js');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var logoIcon = require('./logoIcon-6c03fa9a.js');
-var index$3 = require('./index-2b256b37.js');
-var index$1 = require('./index-af8f7497.js');
+var logoIcon = require('./logoIcon-95f91ae0.js');
+var index$3 = require('./index-c5369b47.js');
+var index$1 = require('./index-886a7295.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$4 = require('./index-abe49996.js');
-require('./index-c460033f.js');
-require('./index-baea3a9f.js');
-var useMantineLocale = require('./useMantineLocale-9e7b23a3.js');
-var index$2 = require('./index-e7c52532.js');
-var index = require('./index-1a1ee2b2.js');
+var index$4 = require('./index-87edb6e4.js');
+require('./index-4028b0a6.js');
+require('./index-06dfebfd.js');
+var useMantineLocale = require('./useMantineLocale-5a8d9e34.js');
+var index$2 = require('./index-36b1ce0c.js');
+var index = require('./index-a5f9a8ac.js');
 require('@mantine/hooks');
-require('./utils-6210e19e.js');
-require('./other-e9d029f8.js');
-require('./index-44f63560.js');
-var Locale = require('./Locale-42e65f5b.js');
-var store = require('./store-d4382481.js');
-var Google = require('./Google-b7466355.js');
+require('./utils-131c325a.js');
+require('./other-310ccb80.js');
+require('./index-60afca15.js');
+var Locale = require('./Locale-fccbbea5.js');
+var store = require('./store-37776536.js');
+var Google = require('./Google-97359f36.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-f51eb9c0.js');
+var utils = require('./utils-917714a4.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var form = require('@mantine/form');
 var yup = require('yup');
 var dayjs = require('dayjs');
-var index$6 = require('./index-f08a17dd.js');
+var index$6 = require('./index-d0f37684.js');
 require('@hhgtech/icons/other');
-require('./index.styles-759fe410.js');
+require('./index.styles-d7fd622a.js');
 require('@mantine/carousel');
 require('./miscTheme.js');
-require('./index-34494d40.js');
+require('./index-a65cc35b.js');
 require('classnames');
-require('./useUniqueId-d2fdd7cb.js');
+require('./useUniqueId-75b2cd00.js');
 require('./constantsSite.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('@mantine/notifications');
-require('./translationsContext-645b8d66.js');
+require('./translationsContext-c81744d0.js');
 require('zustand');
-require('./normalizeLink-37ede4c5.js');
+require('./normalizeLink-f7f3a8ff.js');
 require('./miscCookieHelper.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -74,8 +74,30 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 
+const SSOStateContext = React.createContext({
+    locale: Locale.LOCALE.Vietnam,
+    onClose: () => false,
+    setTracking: () => false,
+});
+const SSOStateProvider = ({ children, locale = Locale.LOCALE.Vietnam, onClose, }) => {
+    const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default["default"].useState(false);
+    const [tracking, setTracking] = React__default["default"].useState();
+    return (React__default["default"].createElement(SSOStateContext.Provider, { value: {
+            locale,
+            onClose,
+            openCollectInfoPopup,
+            setOpenCollectInfoPopup,
+            tracking,
+            setTracking,
+        } }, children));
+};
+const useSSOState = () => {
+    return React__default["default"].useContext(SSOStateContext);
+};
+
 const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
     const { t } = index.useTranslations();
+    const { tracking } = useSSOState();
     return (React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: 400, styles: (theme) => ({
             body: {
                 padding: '32px 24px',
@@ -115,9 +137,9 @@ const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
             React__default["default"].createElement(index$2.Text, { size: "h4" }, t('ssov2.popup.close.title')),
             React__default["default"].createElement(index$2.Text, { size: "p3" }, t('ssov2.popup.close.description'))),
         React__default["default"].createElement(core.Stack, { mt: 32, spacing: 8, align: "center" },
-            React__default["default"].createElement(index$3.Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40 },
+            React__default["default"].createElement(index$3.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["default"].createElement(index$2.Text, { size: "s2", weight: "regular", color: "inherit" }, t('ssov2.button.cancel'))),
-            React__default["default"].createElement(index$3.Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true },
+            React__default["default"].createElement(index$3.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["default"].createElement(index$2.Text, { size: "p2", weight: "regular", color: "gray.6" }, t('ssov2.button.exitNow'))))));
 };
 const BackgroundHeader = () => (React__default["default"].createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
@@ -149,27 +171,10 @@ const BackgroundHeader = () => (React__default["default"].createElement("svg", {
             React__default["default"].createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
             React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff" })))));
 
-const SSOStateContext = React.createContext({
-    locale: Locale.LOCALE.Vietnam,
-    onClose: () => false,
-});
-const SSOStateProvider = ({ children, locale = Locale.LOCALE.Vietnam, onClose, }) => {
-    const [openCollectInfoPopup, setOpenCollectInfoPopup] = React__default["default"].useState(false);
-    return (React__default["default"].createElement(SSOStateContext.Provider, { value: {
-            locale,
-            onClose,
-            openCollectInfoPopup,
-            setOpenCollectInfoPopup,
-        } }, children));
-};
-const useSSOState = () => {
-    return React__default["default"].useContext(SSOStateContext);
-};
-
 const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     var _a;
     const { steps, goBack } = store.useSSOSteps();
-    const { locale } = useSSOState();
+    const { locale, tracking } = useSSOState();
     const showBack = steps.length > 1;
     const showClose = steps.length === 1;
     const showLogo = steps.length === 1;
@@ -222,7 +227,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["default"].createElement(arrow.ChevronLeft, null))),
                 showLogo && (React__default["default"].createElement(logoIcon.LogoIcon, { type: logoType, height: 32, width: 'unset' })),
                 showClose && (React__default["default"].createElement(index$3.Button, { variant: "white", style: {
@@ -231,7 +236,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["default"].createElement(core$1.Close, null)))),
             React__default["default"].createElement("div", { style: {
                     flex: 1,
@@ -376,6 +381,18 @@ const SSOEmailScreen = ({ hidden, }) => {
     const { t } = index.useTranslations();
     const [loading, setLoading] = React__default["default"].useState(false);
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const trackingCategory = `SSO - Sign Up via Email`;
+    const trackingAction = 'Continue With Email';
+    const { setTracking } = useSSOState();
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     return (React__default["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
@@ -447,8 +464,8 @@ const SSOEmailScreen = ({ hidden, }) => {
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.email.description'))),
-        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg('') }),
-        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, disabled: loading, loading: loading }, t('ssov2.email.button'))));
+        React__default["default"].createElement(index$5.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["default"].createElement(index$3.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) => {
@@ -658,9 +675,20 @@ const SSOFirstScreen = ({ hidden }) => {
     var _a, _b;
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
-    const { locale, onClose } = useSSOState();
+    const { locale, onClose, setTracking } = useSSOState();
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     const { t } = index.useTranslations();
+    const trackingCategory = 'Sign In or Sign Up';
+    const trackingAction = 'SSO - Sign Up';
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
     const [loading, setLoading] = React__default["default"].useState(false);
     const [loadingOverlay, setLoadingOverlay] = React__default["default"].useState(false);
     const handleLoginBySocial = (credential, provider) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -707,6 +735,9 @@ const SSOFirstScreen = ({ hidden }) => {
                     setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'verify-phone' })));
                     addStep({
                         type: store.SSOStepTypeType.VERIFY_PHONE,
+                        config: {
+                            provider: provider,
+                        },
                     });
                     goNext();
                 }
@@ -772,6 +803,7 @@ const SSOFirstScreen = ({ hidden }) => {
                     type: store.SSOStepTypeType.PASSWORD,
                     config: {
                         phone,
+                        isZalo: true,
                     },
                 });
                 goNext();
@@ -925,9 +957,9 @@ const SSOFirstScreen = ({ hidden }) => {
                         onClickContinueZalo();
                     } },
                     React__default["default"].createElement(index$5.Input.Wrapper, { error: errMsg },
-                        React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone", disabled: loading }))),
-                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, loading: loading, disabled: loading }, t('ssov2.button.continueZalo')),
-                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, loading: loading, disabled: loading }, t('ssov2.button.continueSMS'))),
+                        React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.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["default"].createElement(index$3.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["default"].createElement(index$3.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["default"].createElement(core.Stack, { spacing: 16, align: "center" },
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.orContinueWith')),
                 React__default["default"].createElement(core.Group, { spacing: 24 },
@@ -938,7 +970,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["default"].createElement(Google.Google, { style: { width: 24, height: 24 } })),
                     React__default["default"].createElement(index$3.Button, { variant: "white", style: {
                             width: 48,
@@ -946,7 +978,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["default"].createElement(Google.Facebook, { style: { width: 24, height: 24 } })),
                     React__default["default"].createElement(index$3.Button, { variant: "white", style: {
                             width: 48,
@@ -954,7 +986,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["default"].createElement(MailIcon, null))))),
         React__default["default"].createElement(core.Stack, { spacing: 24, sx: (theme) => ({
                 marginTop: 56,
@@ -966,11 +998,11 @@ const SSOFirstScreen = ({ hidden }) => {
                 privacy: (React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_a = index$4.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["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_b = index$4.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'))),
             })))));
 };
 
@@ -998,17 +1030,38 @@ const verifyUpdateEmailOTP = (otpCode) => tslib_es6.__awaiter(void 0, void 0, vo
     });
 });
 
-const SSOOTPScreen = ({ hidden, index: index$1, }) => {
+const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
     const { t } = index.useTranslations();
-    const { onClose } = useSSOState();
-    const { steps, setSteps, addStep, goNext } = store.useSSOSteps();
+    const { onClose, setTracking } = useSSOState();
+    const { setSteps, addStep, goNext, shareData } = store.useSSOSteps();
     const [loading, setLoading] = React__default["default"].useState(false);
     const [otp, setOtp] = React__default["default"].useState('');
     const [error, setError] = React__default["default"].useState('');
-    const currentStepIndex = index$1;
-    const currentStep = steps[currentStepIndex];
-    const { phone, email, otpType, isUpdatePhone, afterAction, setupData } = currentStep.config;
+    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}`;
+    React.useEffect(() => {
+        if (!hidden) {
+            setError('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
     const sendOTPCode = (checkResend) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         if (checkResend && resendTime > 0)
             return;
@@ -1156,6 +1209,9 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
             if (afterAction === 'forgot') {
                 addStep({
                     type: store.SSOStepTypeType.FORGOT_PASSWORD_SETUP,
+                    config: {
+                        provider: isZalo ? 'Zalo' : isSMS ? 'SMS' : isEmail ? 'Email' : '',
+                    },
                 });
                 goNext();
             }
@@ -1224,7 +1280,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
                 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$1
                 ? Object.assign(Object.assign({}, step), { config: Object.assign(Object.assign({}, step.config), { otpType: newType }) }) : step));
         }
         catch (e) {
@@ -1276,7 +1332,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
                 React__default["default"].createElement(index$5.OTP, { value: otp, onChange: (otp) => {
                         setOtp(String(otp));
                         setError('');
-                    } })),
+                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Code" })),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -1284,39 +1340,52 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
                 React__default["default"].createElement(index$2.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["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.continue')),
-        !isEmail && (React__default["default"].createElement(index$3.Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.otp.sendVia', {
+        React__default["default"].createElement(index$3.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["default"].createElement(index$3.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: index$1, }) => {
-    var _a, _b;
+const SSOPasswordScreen = ({ hidden, config, }) => {
     const { t } = index.useTranslations();
-    const { onClose } = useSSOState();
+    const { onClose, setTracking } = useSSOState();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    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 trackingCategory = `SSO - Sign In via ${email ? 'Email' : isZalo ? 'Zalo' : 'SMS'}`;
+    const trackingAction = 'Welcome Back';
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
     const [loading, setLoading] = React__default["default"].useState(false);
-    const { steps, addStep, goNext, setShareData } = store.useSSOSteps();
-    const thisStep = steps[index$1];
-    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 } = store.useSSOSteps();
     const resetPassword = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+        var _a;
         setLoading(true);
         try {
             if (phone) {
                 addStep({
                     type: store.SSOStepTypeType.FORGOT_PASSWORD_PHONE,
+                    config: {
+                        phone,
+                    },
                 });
             }
             else {
                 const existRes = yield store.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 {
@@ -1345,17 +1414,20 @@ const SSOPasswordScreen = ({ hidden, index: index$1, }) => {
         setLoading(false);
     });
     const onAuthSuccess = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e;
+        var _b, _c;
         store.handleAuthSuccess(data);
         if (!phone && !!email) {
             const userInfo = yield store.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: store.SSOStepTypeType.VERIFY_PHONE,
+                    config: {
+                        provider: 'email',
+                    },
                 });
                 goNext();
                 return;
@@ -1398,23 +1470,34 @@ const SSOPasswordScreen = ({ hidden, index: index$1, }) => {
                 t('ssov2.password.title2')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.password.description'))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
-            React__default["default"].createElement(index$5.PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg(''), disabled: loading, required: true }),
+            React__default["default"].createElement(index$5.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["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.password.forgotPassword')),
                 React__default["default"].createElement(index$2.Text, { size: "s4", color: "blue.6", style: {
                         cursor: 'pointer',
-                    }, onClick: resetPassword }, t('ssov2.password.reset')))),
-        React__default["default"].createElement(index$3.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["default"].createElement(index$3.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 } = index.useTranslations();
-    const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const { setTracking, locale } = useSSOState();
+    const trackingCategory = `SSO - Sign In via Phone`;
+    const trackingAction = 'Forgot Password';
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
     const [loading, setLoading] = React__default["default"].useState(false);
-    const { locale } = useSSOState();
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
@@ -1515,10 +1598,12 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.resetPassword.title')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.resetPassword.description'))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 16 },
-            React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, disabled: loading }),
+            React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.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["default"].createElement(index$2.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
-            React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading }, t('ssov2.button.continueSMS')))));
+            React__default["default"].createElement(index$3.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["default"].createElement(index$3.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["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1529,7 +1614,7 @@ const CheckRedIcon = () => (React__default["default"].createElement("svg", { wid
     React__default["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 = tslib_es6.__rest(_a, ["form", "loading"]);
+    var { form, loading, tracking } = _a, props = tslib_es6.__rest(_a, ["form", "loading", "tracking"]);
     const { t } = index.useTranslations();
     const [atLeast8Chars, setAtLeast8Chars] = React__default["default"].useState(undefined);
     const [atLeastOneUpper, setAtLeastOneUpper] = React__default["default"].useState(undefined);
@@ -1544,7 +1629,7 @@ const SSOPasswordWithConfirm = (_a) => {
         React__default["default"].createElement(index$5.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["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "n1" },
                 atLeast8Chars ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
@@ -1554,13 +1639,25 @@ const SSOPasswordWithConfirm = (_a) => {
                 atLeastOneUpper ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
                 ' ',
                 t('ssov2.passwordForgotSetup.field.password.atLeastOneUpper'))),
-        React__default["default"].createElement(index$5.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["default"].createElement(index$5.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 } = index.useTranslations();
     const [loading, setLoading] = React__default["default"].useState(false);
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const { setTracking } = useSSOState();
+    const trackingCategory = `SSO - Sign In via ${config.provider}`;
+    const trackingAction = `Setup New Password`;
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
     const { steps, setSteps, goBack, currentStepIndex, addStep, goNext } = store.useSSOSteps();
     const form$1 = form.useForm({
         validate: form.yupResolver(yup__namespace.object().shape({
@@ -1629,20 +1726,33 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
             React__default["default"].createElement(core.Stack, { spacing: 8 },
                 React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.passwordForgotSetup.title')),
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.passwordForgotSetup.description'))),
-            React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1, loading: loading }),
+            React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1, loading: loading, tracking: {
+                    category: trackingCategory,
+                    action: trackingAction,
+                } }),
             errMsg && (React__default["default"].createElement(index$2.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.save')))));
+            React__default["default"].createElement(index$3.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: index$1, }) => {
+const SSOPhoneVerify = ({ hidden, config, }) => {
     const { t } = index.useTranslations();
     const [phone, setPhone] = React__default["default"].useState('');
     const [loading, setLoading] = React__default["default"].useState(false);
     const [errMsg, setErrMsg] = React__default["default"].useState('');
-    const { locale } = useSSOState();
-    const { addStep, goNext, steps } = store.useSSOSteps();
-    const currentStep = steps[index$1];
-    const { afterAction } = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.config) || {};
+    const { locale, setTracking } = useSSOState();
+    const { afterAction, provider } = config || {};
+    const trackingCategory = `SSO - Existing Users via ${provider}`;
+    const trackingAction = 'Verify Phone Number';
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
+    const { addStep, goNext } = store.useSSOSteps();
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
@@ -1737,9 +1847,9 @@ const SSOPhoneVerify = ({ hidden, index: index$1, }) => {
                     React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => {
                             setPhone(value);
                             setErrMsg('');
-                        }, isError: !!errMsg, required: true, name: "phone", disabled: loading })),
-                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
-                React__default["default"].createElement(index$3.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["default"].createElement(index$3.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["default"].createElement(index$3.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["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1772,7 +1882,7 @@ const MaleIcon = () => (React__default["default"].createElement("svg", { width:
     React__default["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 } = index.useTranslations();
     const { locale = 'vi-VN' } = useSSOState();
     const { setupSource } = store.useSSOV2Store();
@@ -1781,7 +1891,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) =>
             React__default["default"].createElement(index$5.Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.phone.label'), withAsterisk: true }, form.getInputProps('phone')),
                 React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.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["default"].createElement(core.Group, { spacing: 24 },
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.setup.field.otp.label')),
                 React__default["default"].createElement(index$5.Radio.Group, Object.assign({ name: "otpMethod", styles: {
@@ -1796,14 +1906,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["default"].createElement(index$5.Radio, { value: "sms", label: "SMS", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
-                        }, disabled: loading }))))),
-        needEmail && (React__default["default"].createElement(index$5.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["default"].createElement(index$5.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["default"].createElement(index$5.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["default"].createElement(index$5.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["default"].createElement(index$5.Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.gender.label'), withAsterisk: true }, form.getInputProps('gender')),
             React__default["default"].createElement(core.Group, null,
                 React__default["default"].createElement(index$3.Button, { type: "button", styles: {
@@ -1820,7 +1930,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) =>
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
-                    }, leftIcon: React__default["default"].createElement(FemaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.female')),
+                    }, leftIcon: React__default["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["default"].createElement(index$3.Button, { type: "button", styles: {
                         root: {
                             flex: 1,
@@ -1835,27 +1945,37 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) =>
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    }, leftIcon: React__default["default"].createElement(MaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.male')))),
-        React__default["default"].createElement(index$6.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["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["default"].createElement(index$6.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: index$1, }) => {
+const SSOSetupScreen = ({ hidden, config, }) => {
     var _a, _b;
-    const { onClose } = useSSOState();
+    const { onClose, setTracking } = useSSOState();
     const { t } = index.useTranslations();
-    const { goNext, steps, addStep, shareData } = store.useSSOSteps();
+    const { goNext, addStep, shareData } = store.useSSOSteps();
     const { setupSource } = store.useSSOV2Store();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
-    const [loading, setLoading] = React__default["default"].useState(false);
-    const currentStep = steps[index$1];
-    const config = currentStep === null || currentStep === void 0 ? void 0 : currentStep.config;
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
+    const trackingCategory = `SSO - Sign Up via ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.provider}`;
+    const trackingAction = 'Almost done';
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
+    const [loading, setLoading] = React__default["default"].useState(false);
     const configPhone = config === null || config === void 0 ? void 0 : config.phone;
     const authMethod = shareData === null || shareData === void 0 ? void 0 : shareData.authMethod;
     const provider = (_a = config === null || config === void 0 ? void 0 : config.userInfo) === null || _a === void 0 ? void 0 : _a.provider;
     const authFlow = shareData === null || shareData === void 0 ? void 0 : shareData.authFlow;
     const defaultData = shareData === null || shareData === void 0 ? void 0 : shareData.setupDefaultData;
-    const needPass = authFlow === 'register' && (authMethod === 'mail' || authMethod === 'phone');
+    const needPass = ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.provider) === 'email' || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.provider) === 'phone') &&
+        !(userInfo === null || userInfo === void 0 ? void 0 : userInfo.is_pass);
     const needPhone = authFlow === 'register' &&
         (authMethod === 'mail' ||
             authMethod === 'google' ||
@@ -2035,10 +2155,20 @@ const SSOSetupScreen = ({ hidden, index: index$1, }) => {
             React__default["default"].createElement(core.Stack, { spacing: 8 },
                 React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.setup.title')),
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.setup.description'))),
-            needPass && (React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1, loading: loading })),
-            React__default["default"].createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form$1, loading: loading }),
+            needPass && (React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1, loading: loading, tracking: {
+                    category: trackingCategory,
+                    action: trackingAction,
+                } })),
+            React__default["default"].createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form$1, loading: loading, tracking: {
+                    category: trackingCategory,
+                    action: trackingAction,
+                } }),
             errMsg && (React__default["default"].createElement(index$2.Text, { color: "red.6", size: "p4" }, errMsg)),
-            React__default["default"].createElement(index$3.Button, { type: "submit", variant: "primary", fullWidth: true, loading: loading, disabled: loading }, needPhone
+            React__default["default"].createElement(index$3.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')
@@ -2048,6 +2178,18 @@ const SSOSetupScreen = ({ hidden, index: index$1, }) => {
 const SSOUpdateEmailScreen = ({ hidden, }) => {
     const { t } = index.useTranslations();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const { setTracking } = useSSOState();
+    const trackingCategory = `SSO - Update Email`;
+    const trackingAction = 'Update Your Email';
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     const [loading, setLoading] = React__default["default"].useState(false);
     return (React__default["default"].createElement("form", { style: {
@@ -2098,8 +2240,8 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.updateEmail.title')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.updateEmail.description'))),
-        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, onChange: () => setErrMsg(''), disabled: loading }),
-        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, loading: loading, disabled: loading }, t('ssov2.updateEmail.button'))));
+        React__default["default"].createElement(index$5.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["default"].createElement(index$3.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 = () => {
@@ -2111,22 +2253,22 @@ const SSOScreenRenderer = () => {
             case store.SSOStepTypeType.FIRST:
                 return React__default["default"].createElement(SSOFirstScreen, { key: key, hidden: !isCurrentStep });
             case store.SSOStepTypeType.PASSWORD:
-                return (React__default["default"].createElement(SSOPasswordScreen, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, index: index }));
+                return (React__default["default"].createElement(SSOPasswordScreen, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.FORGOT_PASSWORD_PHONE:
-                return (React__default["default"].createElement(SSOPasswordForgotPhone, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default["default"].createElement(SSOPasswordForgotPhone, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.FORGOT_PASSWORD_SETUP:
-                return (React__default["default"].createElement(SSOPasswordForgotSetup, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep }));
+                return (React__default["default"].createElement(SSOPasswordForgotSetup, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, config: step.config }));
             case store.SSOStepTypeType.OTP:
                 const { phone, email, otpType } = step.config || {};
-                return (React__default["default"].createElement(SSOOTPScreen, { key: [key, phone, email, otpType].join('-'), hidden: !isCurrentStep, index: index }));
+                return (React__default["default"].createElement(SSOOTPScreen, { key: [key, phone, email, otpType].join('-'), hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.EMAIL:
-                return (React__default["default"].createElement(SSOEmailScreen, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default["default"].createElement(SSOEmailScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.SETUP_FULL:
-                return (React__default["default"].createElement(SSOSetupScreen, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default["default"].createElement(SSOSetupScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.VERIFY_PHONE:
-                return (React__default["default"].createElement(SSOPhoneVerify, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default["default"].createElement(SSOPhoneVerify, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.UPDATE_EMAIL:
-                return (React__default["default"].createElement(SSOUpdateEmailScreen, { key: key, hidden: !isCurrentStep, index: index }));
+                return (React__default["default"].createElement(SSOUpdateEmailScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             default:
                 return React__default["default"].createElement("div", { key: key }, "Not found");
         }