@hhgtech/hhg-components 1.29.311 → 1.29.313-beta-1

package/build/esm/ssoV2.js

@@ -1,27 +1,27 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-709d7787.js';
-import React__default, { createContext, useEffect, useState, useMemo, useCallback, forwardRef } from 'react';
-import { I as Input, s as styles, O as OTP, f as PasswordInput, R as Radio, E as ErrorBoundary } from './index-b5a40899.js';
-import { a as useSSOSteps, f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, u as useSSOV2Store, b as SSOStepTypeType, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, i as isUserFinishedSetup, d as updateUserInfo, r as resetPassword, e as redirect } from './store-2a1b6eeb.js';
-export { u as useSSOV2Store } from './store-2a1b6eeb.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-dc0b4bb5.js';
+import React__default, { createContext, useMemo, useEffect, useState, useCallback, forwardRef } from 'react';
+import { I as Input, s as styles, O as OTP, f as PasswordInput, E as ErrorBoundary } from './index-d1717b80.js';
+import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, f as fetchSSOV2Api, w as websiteId, b as SSO_V2_PATHS, c as checkUserExist, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, d as updateUserInfo, e as isPhoneNotVerifedYet, j as isLoginWithPhoneNotVerifedYet, k as isFlowFinishedSetup, r as resetPassword, l as redirect } from './store-c97a7b72.js';
+export { u as useSSOV2Store } from './store-c97a7b72.js';
 import { ChevronLeft } from '@hhgtech/icons/arrow';
-import { Close, Search } from '@hhgtech/icons/core';
-import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-b4ead995.js';
-import { L as LogoIcon } from './logoIcon-90c6ed4d.js';
-import { B as Button } from './index-0099b8f2.js';
-import { M as Modal } from './index-2bf08a6b.js';
-import { Stack, Group, Box } from '@mantine/core';
+import { Close, Search, ReplySquare } from '@hhgtech/icons/core';
+import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-4aa69e87.js';
+import { L as LogoIcon } from './logoIcon-c0e996da.js';
+import { B as Button } from './index-9e5d3098.js';
+import { M as Modal } from './index-6b43b997.js';
+import { Stack, Flex, Box, Group, Divider } from '@mantine/core';
 import '@mantine/dates';
-import './index-4a13f41d.js';
-import './index-d50c1b6d.js';
-import { s as showNotification } from './useMantineLocale-bd1e758a.js';
-import { T as Text } from './index-14bfa2c9.js';
-import { u as useTranslations } from './index-6bb36621.js';
+import './index-fe29a330.js';
+import './index-51d21547.js';
+import { s as showNotification } from './useMantineLocale-d719cece.js';
+import { T as Text } from './index-b5967e5a.js';
+import { u as useTranslations } from './index-8feac2e3.js';
 import '@mantine/hooks';
-import './utils-e21b8836.js';
-import './other-8e7af889.js';
-import './index-6354b22f.js';
-import { L as LOCALE } from './Locale-05f46f2a.js';
-import { G as Google, F as Facebook } from './Google-64dc9f05.js';
+import './utils-98ba790c.js';
+import './other-a9ddfef3.js';
+import './index-abdd5b13.js';
+import { L as LOCALE } from './Locale-ca064114.js';
+import { G as Google, F as Facebook } from './Google-1ea2f735.js';
 import { parsePhoneNumber, getCountryCallingCode } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import cn from 'classnames';
@@ -29,28 +29,28 @@ import { CaretDown } from '@hhgtech/icons/other';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import Flags from 'react-phone-number-input/flags';
-import { u as useScreenSize } from './useScreenSize-40c82c05.js';
+import { u as useScreenSize } from './useScreenSize-ec9488ba.js';
 import { Drawer } from 'vaul';
-import { M as MAPPED_LOCALE } from './utils-5f291626.js';
-import { S as Spoiler } from './index-be992c75.js';
+import { M as MAPPED_LOCALE } from './utils-154d7c18.js';
+import { S as Spoiler } from './index-74d19a0c.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-6c43703a.js';
+import { D as DatePicker } from './index-26335a2a.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './useUniqueId-cf5d6065.js';
+import './useUniqueId-ef63b218.js';
 import './constantsSite.js';
 import 'zustand';
 import './constantsIsProduction.js';
-import './normalizeLink-2bf24c8c.js';
+import './normalizeLink-659f4fc2.js';
 import './miscCookieHelper.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-dfe31537.js';
+import './index.styles-e2fabf72.js';
 import '@mantine/notifications';
-import './translationsContext-b6c33e91.js';
+import './translationsContext-77ad18c1.js';
 
 const SSOStateContext = createContext({
     locale: LOCALE.Vietnam,
@@ -158,13 +158,227 @@ 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 isPhoneVerifedAlready = (userInfo, flowData) => {
+    var _a;
+    if (flowData === null || flowData === void 0 ? void 0 : flowData.metaData) {
+        return (_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_phone_verified;
+    }
+    return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone_verified_at) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone);
+};
+const isSetupFullInfoAlready = (userInfo, flowData) => {
+    var _a, _b, _c;
+    if (flowData === null || flowData === void 0 ? void 0 : flowData.metaData) {
+        return (((_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_name) &&
+            ((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_gender) &&
+            ((_c = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _c === void 0 ? void 0 : _c.is_birthday));
+    }
+    const hasName = !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.name);
+    const hasGender = typeof (userInfo === null || userInfo === void 0 ? void 0 : userInfo.gender) === 'number';
+    const hasBirthday = !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.birthday);
+    return hasName && hasGender && hasBirthday;
+};
+const isExistUpdateEmailStep = (steps) => {
+    return steps.find((s) => s.type === SSOStepTypeType.UPDATE_EMAIL);
+};
+const isVerifyPhoneInTheSignUp = (steps, flowData) => {
+    var _a;
+    return ((_a = steps[0]) === null || _a === void 0 ? void 0 : _a.type) === SSOStepTypeType.FIRST && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup';
+};
+const parseEmailFromToken = (token) => {
+    try {
+        const base64Url = token.split('.')[1];
+        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+        const jsonPayload = decodeURIComponent(atob(base64)
+            .split('')
+            .map(function (c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        })
+            .join(''));
+        const payload = JSON.parse(jsonPayload);
+        return payload.email;
+    }
+    catch (err) {
+        return '';
+    }
+};
+
+const isSocialFlowFn = (flowData) => {
+    return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'google' || (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'facebook';
+};
+const isPhoneFlowFn = (flowData) => {
+    return ((flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'sms' ||
+        (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'zalo' ||
+        (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'phone');
+};
+const isEmailFlowFn = (flowData) => {
+    return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'email';
+};
+const isResetPasswordFlowFn = (steps) => {
+    // First -> Passsword -> Password Forgot Setup
+    const passwordStep = steps.findIndex((s) => s.type === SSOStepTypeType.PASSWORD);
+    const passwordForgotStep = steps.findIndex((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_SETUP);
+    return (passwordStep > 0 &&
+        passwordForgotStep > 0 &&
+        passwordForgotStep > passwordStep);
+};
+const isDisplayProgressBarFn = (flowData, step) => {
+    const showProgressBar = (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.SETUP_FULL ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.VERIFY_PHONE ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.PASSWORD ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.FORGOT_PASSWORD_PHONE ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.FORGOT_PASSWORD_SETUP ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.EMAIL ||
+        (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.UPDATE_EMAIL;
+    const isWhiteListFlow = isSocialFlowFn(flowData) ||
+        isPhoneFlowFn(flowData) ||
+        isEmailFlowFn(flowData);
+    return showProgressBar && isWhiteListFlow;
+};
+const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo) => {
+    var _a, _b;
+    const step = steps[currentStepIndex];
+    const isSocialFlow = isSocialFlowFn(flowData);
+    const isPhoneFlow = isPhoneFlowFn(flowData);
+    const isEmailFlow = isEmailFlowFn(flowData);
+    /** Social (Google, Facebook): FIRST => VERIFY_PHONE | OTP => STEP_FULL */
+    if (isSocialFlow) {
+        const arrSteps = [
+            !isPhoneVerifedAlready(userInfo, flowData)
+                ? [SSOStepTypeType.VERIFY_PHONE, SSOStepTypeType.OTP]
+                : undefined,
+            isExistUpdateEmailStep(steps)
+                ? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
+                    ? SSOStepTypeType.OTP
+                    : SSOStepTypeType.UPDATE_EMAIL
+                : undefined,
+            !userInfo || !isUserFinishedSetup(userInfo)
+                ? SSOStepTypeType.SETUP_FULL
+                : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        const previousStep = steps[currentStepIndex - 1];
+        return [
+            arrSteps.length,
+            (previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === SSOStepTypeType.UPDATE_EMAIL
+                ? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
+                : arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    if (isPhoneFlow && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup') {
+        const arrSteps = [
+            !isPhoneVerifedAlready(userInfo, flowData)
+                ? SSOStepTypeType.OTP
+                : undefined,
+            !((_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_pass)
+                ? SSOStepTypeType.FORGOT_PASSWORD_SETUP
+                : undefined,
+            !isSetupFullInfoAlready(userInfo, flowData)
+                ? SSOStepTypeType.SETUP_FULL
+                : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        return [
+            arrSteps.length,
+            arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    if (isPhoneFlow && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'login') {
+        const isForgotPasswordPhone = steps.find((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_PHONE);
+        const arrSteps = [
+            SSOStepTypeType.PASSWORD,
+            !isPhoneVerifedAlready(userInfo, flowData) || isForgotPasswordPhone
+                ? [SSOStepTypeType.FORGOT_PASSWORD_PHONE, SSOStepTypeType.OTP]
+                : undefined,
+            isForgotPasswordPhone ? SSOStepTypeType.FORGOT_PASSWORD_SETUP : undefined,
+            isExistUpdateEmailStep(steps)
+                ? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
+                    ? SSOStepTypeType.OTP
+                    : SSOStepTypeType.UPDATE_EMAIL
+                : undefined,
+            !isSetupFullInfoAlready(userInfo, flowData)
+                ? SSOStepTypeType.SETUP_FULL
+                : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        const previousStep = steps[currentStepIndex - 1];
+        return [
+            arrSteps.length,
+            (previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === SSOStepTypeType.UPDATE_EMAIL
+                ? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
+                : arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    if (isEmailFlow) {
+        const hasPasswordStep = !((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_pass);
+        const hasPhoneStep = !isPhoneVerifedAlready(userInfo, flowData);
+        const hasSetupFullStep = !isSetupFullInfoAlready(userInfo, flowData);
+        const isForgotPasswordSetup = steps.find((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_SETUP);
+        if (!hasPasswordStep && !hasPhoneStep && !hasSetupFullStep)
+            return [];
+        const arrSteps = [
+            (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
+                ? SSOStepTypeType.OTP
+                : SSOStepTypeType.EMAIL,
+            hasPasswordStep || isForgotPasswordSetup
+                ? SSOStepTypeType.FORGOT_PASSWORD_SETUP
+                : SSOStepTypeType.PASSWORD,
+            hasPhoneStep
+                ? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
+                    ? SSOStepTypeType.OTP
+                    : SSOStepTypeType.VERIFY_PHONE
+                : undefined,
+            hasSetupFullStep ? SSOStepTypeType.SETUP_FULL : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        const previousStep = steps[currentStepIndex - 1];
+        return [
+            arrSteps.length,
+            (previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === SSOStepTypeType.VERIFY_PHONE
+                ? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
+                : arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    return [];
+};
+const ProgressBar = () => {
+    // const initUserInfo = useRef<UserInfo | undefined | null>()
+    const { steps, currentStepIndex } = useSSOSteps();
+    const { flowData, userInfo } = useSSOV2Store();
+    /** No need update state IF userInfo is changed */
+    const initUserInfo = useMemo(() => userInfo, [userInfo]);
+    const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, { steps, currentStepIndex }, initUserInfo);
+    if (!activeStepNumber || totalStepNumber === 1)
+        return null;
+    return (React__default.createElement(Flex, { gap: 2 }, Array.from({ length: totalStepNumber }).map((_, idx) => {
+        const currentStepNumber = idx + 1;
+        return (React__default.createElement(Box, { key: currentStepNumber, style: {
+                width: 'auto',
+                height: 2,
+                flex: 1,
+                borderRadius: 4,
+                backgroundColor: currentStepNumber <= activeStepNumber ? '#00B16A' : '#D2D6DC',
+            } }));
+    })));
+};
+
 const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     var _a;
-    const { steps, goBack } = useSSOSteps();
+    const { steps, goBack, currentStepIndex } = useSSOSteps();
+    const { flowData } = useSSOV2Store();
     const { locale, tracking } = useSSOState();
-    const showBack = steps.length > 1;
-    const showClose = steps.length === 1;
-    const showLogo = steps.length === 1;
+    const currentStep = steps[currentStepIndex];
+    const showProgressBar = isDisplayProgressBarFn(flowData, currentStep);
+    const showBack = (steps.length > 1 && !showProgressBar) ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.OTP ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.PASSWORD ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.EMAIL;
+    const showClose = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.FIRST;
+    const showLogo = (steps.length === 1 || showProgressBar) && !showBack;
     const logoType = (_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
     const [closeConfirmOpen, setCloseConfirmOpen] = React__default.useState(false);
     const onCloseClick = () => {
@@ -207,7 +421,11 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         display: 'block',
                     },
                 },
-            }), withCloseButton: false, zIndex: ZINDEX_SSO },
+            }), withCloseButton: false, zIndex: ZINDEX_SSO, overlayProps: {
+                'data-event-label': 'Focus out',
+                'data-event-category': tracking === null || tracking === void 0 ? void 0 : tracking.category,
+                'data-event-action': tracking === null || tracking === void 0 ? void 0 : tracking.action,
+            } },
             React__default.createElement("div", { style: {
                     height: 40,
                     display: 'flex',
@@ -220,7 +438,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         padding: 8,
                         background: 'white',
                         borderRadius: '100%',
-                    }, 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" },
+                    }, 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: {
@@ -231,6 +449,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         borderRadius: '100%',
                     }, 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)))),
+            showProgressBar && React__default.createElement(ProgressBar, null),
             React__default.createElement("div", { style: {
                     flex: 1,
                 } }, children)),
@@ -374,7 +593,10 @@ const SSOEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
-    const trackingCategory = `SSO - Sign Up via Email`;
+    const { flowData } = useSSOV2Store();
+    const trackingCategory = flowData.flow === 'signup'
+        ? `SSO - Sign Up via Email`
+        : 'SSO - Sign In via Email';
     const trackingAction = 'Continue With Email';
     const { setTracking } = useSSOState();
     useEffect(() => {
@@ -402,6 +624,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'login',
+                                metaData: existRes._data,
                             },
                         });
                         // go to password screen
@@ -419,6 +642,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'signup',
+                                metaData: existRes._data,
                             },
                         });
                         if (!((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.provider)) {
@@ -437,7 +661,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             config: {
                                 email,
                                 otpType: 'email',
-                                afterAction: 'setup',
+                                afterAction: 'forgot',
                             },
                         });
                         goNext();
@@ -616,12 +840,7 @@ const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0,
 });
 
 const MailIcon = (props) => (React__default.createElement("svg", Object.assign({ width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    React__default.createElement("g", { clipPath: "url(#clip0_1284_30810)" },
-        React__default.createElement("rect", { x: "0.666992", width: "20", height: "20", rx: "10", fill: "#00B16A" }),
-        React__default.createElement("path", { d: "M13.792 4.6875H7.54199C5.66699 4.6875 4.41699 5.625 4.41699 7.8125V12.1875C4.41699 14.375 5.66699 15.3125 7.54199 15.3125H13.792C15.667 15.3125 16.917 14.375 16.917 12.1875V7.8125C16.917 5.625 15.667 4.6875 13.792 4.6875ZM14.0857 8.49375L12.1295 10.0563C11.717 10.3875 11.192 10.55 10.667 10.55C10.142 10.55 9.61074 10.3875 9.20449 10.0563L7.24824 8.49375C7.04824 8.33125 7.01699 8.03125 7.17324 7.83125C7.33574 7.63125 7.62949 7.59375 7.82949 7.75625L9.78574 9.31875C10.2607 9.7 11.067 9.7 11.542 9.31875L13.4982 7.75625C13.6982 7.59375 13.9982 7.625 14.1545 7.83125C14.317 8.03125 14.2857 8.33125 14.0857 8.49375Z", fill: "white" })),
-    React__default.createElement("defs", null,
-        React__default.createElement("clipPath", { id: "clip0_1284_30810" },
-            React__default.createElement("rect", { width: "20", height: "20", fill: "white", transform: "translate(0.666992)" })))));
+    React__default.createElement("path", { d: "M15.043 2.56348H6.29297C3.66797 2.56348 1.91797 3.87598 1.91797 6.93848V13.0635C1.91797 16.126 3.66797 17.4385 6.29297 17.4385H15.043C17.668 17.4385 19.418 16.126 19.418 13.0635V6.93848C19.418 3.87598 17.668 2.56348 15.043 2.56348ZM15.4542 7.89223L12.7155 10.0797C12.138 10.5435 11.403 10.771 10.668 10.771C9.93297 10.771 9.18922 10.5435 8.62047 10.0797L5.88172 7.89223C5.60172 7.66473 5.55797 7.24473 5.77672 6.96473C6.00422 6.68473 6.41547 6.63223 6.69547 6.85973L9.43422 9.04723C10.0992 9.58098 11.228 9.58098 11.893 9.04723L14.6317 6.85973C14.9117 6.63223 15.3317 6.67598 15.5505 6.96473C15.778 7.24473 15.7342 7.66473 15.4542 7.89223Z", fill: "#00B16A" })));
 
 function createCommonjsModule(fn) {
   var module = { exports: {} };
@@ -1778,7 +1997,7 @@ function CountrySelectWithIcon(_a) {
     var { value, options, className, 
     // iconComponent: Icon,
     // getIconAspectRatio,
-    arrowComponent: Arrow = DefaultArrowComponent, onChange, disabled, readOnly } = _a, rest = __rest(_a, ["value", "options", "className", "arrowComponent", "onChange", "disabled", "readOnly"]);
+    arrowComponent: Arrow = DefaultArrowComponent, onChange, disabled, readOnly, trackingFn } = _a, rest = __rest(_a, ["value", "options", "className", "arrowComponent", "onChange", "disabled", "readOnly", "trackingFn"]);
     const { t } = useTranslations();
     const [open, setOpen] = useState(false);
     const [modalStyle, setModalStyle] = useState({});
@@ -1862,13 +2081,13 @@ function CountrySelectWithIcon(_a) {
             React__default.createElement(SelectCountryItem, { option: selectedOption, onSelect: (option) => {
                     onChange_(option.value);
                     setOpen(false);
-                } }))),
+                }, trackingFn: trackingFn }))),
         React__default.createElement(Stack, { spacing: 0 },
             React__default.createElement(Text, { size: "s4" }, t('ssov2.first.search.country.all')),
             filteredOptions.map((option) => (React__default.createElement(SelectCountryItem, { option: option, key: option.value, onSelect: (option) => {
                     onChange_(option.value);
                     setOpen(false);
-                }, selected: selectedOption.value === option.value }))))));
+                }, selected: selectedOption.value === option.value, trackingFn: trackingFn }))))));
     const FlagSelected = Flags[selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value];
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "PhoneInputCountry", ref: countryDivRef },
@@ -1932,7 +2151,7 @@ function CountrySelectWithIcon(_a) {
                     }, onClick: () => setOpen(false) }),
                 React__default.createElement("div", { style: Object.assign({ position: 'fixed', height: 540, top: '100%', left: 0, width: '100%', backgroundColor: 'white', padding: '8px 24px', zIndex: ZINDEX_SSO + 9, borderRadius: 12, boxShadow: '0px 0px 1px 0px #0000000A, 0px 4px 8px 0px #0000000A, 0px 16px 24px 0px #0000000A, 0px 24px 32px 0px #0000000A', overflow: 'auto' }, modalStyle) }, SelectCountryContent))))));
 }
-const SelectCountryItem = ({ option, onSelect, selected, }) => {
+const SelectCountryItem = ({ option, onSelect, selected, trackingFn, }) => {
     const selectedCallingCode = useMemo(() => {
         if (!option.value)
             return '';
@@ -1943,14 +2162,15 @@ const SelectCountryItem = ({ option, onSelect, selected, }) => {
         return '';
     }, [option.value]);
     const Flag = Flags[option.value];
-    return (React__default.createElement(Stack, { sx: {
+    const tracking = (trackingFn === null || trackingFn === void 0 ? void 0 : trackingFn(option)) || {};
+    return (React__default.createElement(Stack, Object.assign({ sx: {
             padding: '0 24px',
             backgroundColor: selected ? '#e3f2ff' : 'transparent',
             ':hover': { backgroundColor: '#F7F9FA' },
             cursor: 'pointer',
             marginLeft: -24,
             marginRight: -24,
-        }, justify: "center", onClick: () => onSelect(option) },
+        }, justify: "center", onClick: () => onSelect(option) }, tracking),
         React__default.createElement(Group, { position: "apart", sx: {
                 height: 50,
                 borderBottom: '1px solid #E4E8EC',
@@ -2002,7 +2222,7 @@ function isSameOptionValue(value1, value2) {
 const PhoneForwardRef = (props, ref) => {
     const { isError, defaultCountry, 
     // countries = countriesDefault,
-    countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, className } = props, inputProps = __rest(props, ["isError", "defaultCountry", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "className"]);
+    countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, className, trackingFn } = props, inputProps = __rest(props, ["isError", "defaultCountry", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "className", "trackingFn"]);
     const [value, setValue] = useState(defaultValue || valueProps);
     const [PhoneInputUtils, setPhoneInputUtils] = useState(null);
     const onChange = (val) => {
@@ -2026,7 +2246,7 @@ const PhoneForwardRef = (props, ref) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref: ref, value: value, onChange: onChange, 
         // countries={countries}
-        defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: cn(styles.phoneInput, { isError, [styles.error]: isError }, className), countrySelectComponent: CountrySelectWithIcon }, inputProps)));
+        defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: cn(styles.phoneInput, { isError, [styles.error]: isError }, className), countrySelectComponent: CountrySelectWithIcon, countrySelectProps: { trackingFn } }, inputProps)));
 };
 const PhoneWithCustomCountrySelect = forwardRef(PhoneForwardRef);
 
@@ -2056,17 +2276,32 @@ const StyledPhone = styled(PhoneWithCustomCountrySelect) `
   }
 `;
 
+const Zalo = ({ size = 20, useCurrentColor = false }) => {
+    const color = useCurrentColor ? 'currentColor' : '#0068FF';
+    return (React__default.createElement("svg", { width: (size * 21) / 20, height: size, viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default.createElement("path", { d: "M13.7007 6.55306C13.9781 6.55306 14.2555 6.55306 14.5336 6.55306C14.529 8.17796 14.529 9.8035 14.5336 11.4284C14.262 11.3903 13.81 11.5642 13.7079 11.2027C13.691 9.65349 13.7066 8.10296 13.7007 6.55306Z", fill: color }),
+        React__default.createElement("path", { d: "M5.21482 6.61061C6.50542 6.60932 7.79474 6.60091 9.0847 6.60996C9.07564 6.86278 9.06142 7.13823 8.89201 7.34256C8.01005 8.44048 7.14685 9.55262 6.26554 10.6505C7.20245 10.6564 8.13937 10.6525 9.07629 10.6525C9.05883 10.8717 9.13578 11.1271 8.99353 11.3172C8.9043 11.44 8.74265 11.429 8.6088 11.4303C7.43652 11.4239 6.26424 11.4362 5.09261 11.4239C5.09584 11.1762 5.09843 10.9021 5.27172 10.7049C6.14333 9.61146 7.02529 8.52583 7.89302 7.42985C7.00136 7.43114 6.10906 7.42403 5.2174 7.43373C5.21159 7.15957 5.21352 6.88477 5.21482 6.61061Z", fill: color }),
+        React__default.createElement("path", { d: "M16.5981 7.68655C17.5267 7.47899 18.5341 8.08873 18.7882 9.00302C19.1069 9.95416 18.525 11.0851 17.5635 11.3747C16.7469 11.6625 15.7692 11.2868 15.3457 10.5342C15.0133 9.97809 14.9933 9.25002 15.2953 8.67778C15.5513 8.17279 16.046 7.80358 16.5981 7.68655ZM16.5826 8.51031C16.0162 8.71011 15.711 9.39938 15.9322 9.9561C16.1151 10.4824 16.7313 10.8044 17.2667 10.6428C17.8778 10.4967 18.247 9.78087 18.0304 9.19441C17.8493 8.61377 17.1478 8.27883 16.5826 8.51031Z", fill: color }),
+        React__default.createElement("path", { d: "M9.71965 8.36353C10.1665 7.81005 10.9488 7.53718 11.6381 7.73439C11.8657 7.79194 12.072 7.90574 12.2711 8.02666C12.2692 7.96588 12.2647 7.84496 12.2627 7.78418C12.5233 7.78289 12.7832 7.78354 13.0438 7.78224C13.0425 8.99784 13.0412 10.2134 13.0445 11.4297C12.8531 11.4245 12.6584 11.4472 12.4703 11.4084C12.3384 11.3547 12.2976 11.2105 12.2453 11.0928C11.5262 11.6515 10.3966 11.5247 9.79919 10.8445C9.16229 10.1856 9.12931 9.06315 9.71965 8.36353ZM10.7723 8.52648C10.1736 8.73727 9.88324 9.50865 10.1865 10.0647C10.4451 10.6066 11.1732 10.8342 11.6937 10.5355C12.1767 10.282 12.3998 9.65285 12.1922 9.14979C11.9911 8.60277 11.3129 8.29629 10.7723 8.52648Z", fill: color }),
+        React__default.createElement("path", { d: "M4.20742 0.101327C4.89217 -0.00665471 5.58855 -0.00730131 6.28041 0.008217L6.22092 0.0631777C5.31569 0.656106 4.56499 1.47017 4.02249 2.4045C2.93492 4.27511 2.53856 6.48711 2.62843 8.63123C2.71766 10.377 3.13666 12.1325 4.02508 13.6501C4.1738 13.9217 4.42144 14.1616 4.42532 14.4913C4.45313 15.1987 4.10332 15.8653 3.63001 16.371C3.66105 16.4033 3.69144 16.4356 3.72247 16.468C4.16539 16.9516 4.63805 17.4062 5.08809 17.8834C5.72757 18.6063 6.45628 19.2464 7.08283 19.9822C6.04052 19.9977 4.98592 20.0462 3.9559 19.8516C2.65947 19.6001 1.50853 18.7013 0.958922 17.4999C0.625925 16.8055 0.526349 16.0289 0.500485 15.2679C0.499838 11.7543 0.499838 8.24133 0.500485 4.72837C0.51471 3.55415 0.825723 2.32562 1.65207 1.45465C2.30643 0.716886 3.233 0.237112 4.20742 0.101327Z", fill: color }),
+        React__default.createElement("path", { d: "M6.22092 0.0631777C6.36576 0.0217955 6.51706 0.0088636 6.66707 0.00433743C9.25281 0.0140364 11.8386 0.00304423 14.4243 0.00757041C15.1155 0.0159762 15.8106 -0.0305788 16.4966 0.0748164C17.4465 0.147235 18.3608 0.549418 19.0675 1.18502C19.9546 2.03271 20.4279 3.25348 20.4428 4.47102C20.4435 7.89863 20.4415 11.3288 20.4447 14.7551C20.4357 14.7752 20.4182 14.8166 20.4092 14.8373C19.4878 15.8679 18.2489 16.5656 16.9538 17.0169C15.2086 17.6118 13.3393 17.8032 11.5049 17.6635C9.67051 17.5058 7.8219 17.0266 6.26618 16.0128C5.47087 16.3665 4.59344 16.5397 3.72247 16.468C3.69144 16.4356 3.66105 16.4033 3.63001 16.371C4.10332 15.8653 4.45313 15.1987 4.42532 14.4913C4.42144 14.1616 4.1738 13.9217 4.02508 13.6501C3.13666 12.1325 2.71766 10.377 2.62843 8.63123C2.53856 6.48711 2.93492 4.27511 4.02249 2.4045C4.56499 1.47017 5.31569 0.656106 6.22092 0.0631777ZM13.7007 6.55306C13.7066 8.10296 13.691 9.65349 13.7079 11.2027C13.81 11.5642 14.262 11.3903 14.5336 11.4284C14.529 9.8035 14.529 8.17796 14.5336 6.55306C14.2555 6.55306 13.9781 6.55306 13.7007 6.55306ZM5.21482 6.61061C5.21352 6.88477 5.21159 7.15957 5.2174 7.43373C6.10906 7.42403 7.00136 7.43114 7.89302 7.42985C7.02529 8.52583 6.14333 9.61146 5.27172 10.7049C5.09843 10.9021 5.09584 11.1762 5.09261 11.4239C6.26424 11.4362 7.43652 11.4239 8.6088 11.4303C8.74265 11.429 8.9043 11.44 8.99353 11.3172C9.13578 11.1271 9.05883 10.8717 9.07629 10.6525C8.13937 10.6525 7.20245 10.6564 6.26554 10.6505C7.14685 9.55262 8.01005 8.44048 8.89201 7.34256C9.06142 7.13823 9.07564 6.86278 9.0847 6.60996C7.79474 6.60091 6.50542 6.60932 5.21482 6.61061ZM16.5981 7.68655C16.046 7.80358 15.5513 8.17279 15.2953 8.67778C14.9933 9.25002 15.0133 9.97809 15.3457 10.5342C15.7692 11.2868 16.7469 11.6625 17.5635 11.3747C18.525 11.0851 19.1069 9.95416 18.7882 9.00302C18.5341 8.08873 17.5267 7.47899 16.5981 7.68655ZM9.71965 8.36353C9.12931 9.06315 9.16229 10.1856 9.79919 10.8445C10.3966 11.5247 11.5262 11.6515 12.2453 11.0928C12.2976 11.2105 12.3384 11.3547 12.4703 11.4084C12.6584 11.4472 12.8531 11.4245 13.0445 11.4297C13.0412 10.2134 13.0425 8.99784 13.0438 7.78224C12.7832 7.78354 12.5233 7.78289 12.2627 7.78418C12.2647 7.84496 12.2692 7.96588 12.2711 8.02666C12.072 7.90574 11.8657 7.79194 11.6381 7.73439C10.9488 7.53718 10.1665 7.81005 9.71965 8.36353Z", fill: "white" }),
+        React__default.createElement("path", { d: "M10.7737 8.52648C11.3142 8.29629 11.9925 8.60278 12.1936 9.1498C12.4012 9.65285 12.1781 10.282 11.6951 10.5355C11.1746 10.8342 10.4465 10.6066 10.1879 10.0647C9.8846 9.50866 10.1749 8.73727 10.7737 8.52648Z", fill: "white" }),
+        React__default.createElement("path", { d: "M16.5822 8.51048C17.1473 8.279 17.8489 8.61394 18.0299 9.19458C18.2465 9.78104 17.8773 10.4968 17.2663 10.643C16.7309 10.8046 16.1147 10.4826 15.9317 9.95627C15.7106 9.39955 16.0158 8.71028 16.5822 8.51048Z", fill: "white" }),
+        React__default.createElement("path", { d: "M20.4094 14.8378L20.4604 14.7822C20.487 15.7929 20.3777 16.8475 19.8817 17.7469C19.305 18.8021 18.2588 19.5858 17.082 19.8367C16.4218 19.9731 15.7448 20.0035 15.0724 19.9951C13.0039 19.9957 10.9354 19.9951 8.86698 19.9957C8.27211 19.986 7.67595 20.0138 7.08302 19.9828C6.45646 19.247 5.72775 18.6068 5.08827 17.8839C4.63824 17.4068 4.16557 16.9522 3.72266 16.4685C4.59362 16.5403 5.47105 16.367 6.26637 16.0133C7.82208 17.0272 9.67069 17.5063 11.5051 17.6641C13.3395 17.8038 15.2088 17.6124 16.954 17.0175C18.2491 16.5662 19.488 15.8685 20.4094 14.8378Z", fill: color })));
+};
+
 const SSOFirstScreen = ({ hidden, config, }) => {
     var _a, _b;
     const [phone, setPhone] = React__default.useState('');
     const [errMsg, setErrMsg] = React__default.useState('');
     const { locale, onClose, setTracking } = useSSOState();
     const { addStep, goNext } = useSSOSteps();
+    const { setUserInfo } = useSSOV2Store();
     const [activeTab, setActiveTab] = React__default.useState('login');
     const { legalTextType } = config || {};
     const { t } = useTranslations();
-    const trackingCategory = 'Sign In or Sign Up';
-    const trackingAction = `SSO - ${activeTab === 'login' ? 'Sign In' : 'Sign Up'}`;
+    const trackingAction = 'Sign In or Sign Up';
+    const trackingCategory = `SSO - ${activeTab === 'login' ? 'Sign In' : 'Sign Up'}`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -2077,24 +2312,42 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
     }, [hidden]);
     const [loading, setLoading] = React__default.useState(false);
+    // onTrigger -> handleLoginBySocial -> loginBySocial
     const handleLoginBySocial = (credential, provider) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
         const res = yield loginBySocial(credential, provider);
         if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
             handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
             const userInfo = yield getUserInfo();
+            setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
             if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) === 1 && userInfo._data) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: provider,
                     },
                 });
-                if (!isUserFinishedSetup(userInfo._data) ||
-                    !userInfo._data.phone ||
-                    !userInfo._data.phone_verified_at) {
-                    useSSOV2Store.setState((f) => ({
-                        flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'signup' }),
-                    }));
+                const isNotHavePhone = !userInfo._data.phone || !userInfo._data.phone_verified_at;
+                if (isNotHavePhone) {
+                    useSSOV2Store.setState((f) => {
+                        var _a;
+                        return ({
+                            flowData: Object.assign(Object.assign({}, f.flowData), { flow: ((_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) === null || _a === void 0 ? void 0 : _a.first_time_login) ? 'signup' : 'login', isVerifyPhone: true }),
+                        });
+                    });
+                    addStep({
+                        type: SSOStepTypeType.VERIFY_PHONE,
+                        config: {
+                            provider: provider,
+                        },
+                    });
+                    goNext();
+                }
+                else if (!isUserFinishedSetup(userInfo._data)) {
+                    useSSOV2Store.setState((f) => {
+                        var _a;
+                        return ({
+                            flowData: Object.assign(Object.assign({}, f.flowData), { flow: ((_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) === null || _a === void 0 ? void 0 : _a.first_time_login) ? 'signup' : 'login' }),
+                        });
+                    });
                     if (provider === 'facebook') {
                         window.FB.api('/me', { fields: 'name, email, gender, birthday' }, function (response) {
                             addStep({
@@ -2122,19 +2375,6 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                         goNext();
                     }
                 }
-                else if (!((_c = userInfo._data) === null || _c === void 0 ? void 0 : _c.phone_verified_at) ||
-                    !((_d = userInfo._data) === null || _d === void 0 ? void 0 : _d.phone)) {
-                    useSSOV2Store.setState((f) => ({
-                        flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'login', isVerifyPhone: true }),
-                    }));
-                    addStep({
-                        type: SSOStepTypeType.VERIFY_PHONE,
-                        config: {
-                            provider: provider,
-                        },
-                    });
-                    goNext();
-                }
                 else {
                     onClose === null || onClose === void 0 ? void 0 : onClose(true);
                 }
@@ -2174,7 +2414,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         };
     }, []);
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _e, _f;
+        var _c, _d;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2183,12 +2423,13 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            const provider = (_e = userExist._data) === null || _e === void 0 ? void 0 : _e.provider;
-            if ((_f = userExist._data) === null || _f === void 0 ? void 0 : _f.is_pass) {
+            const provider = (_c = userExist._data) === null || _c === void 0 ? void 0 : _c.provider;
+            if ((_d = userExist._data) === null || _d === void 0 ? void 0 : _d.is_pass) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'zalo',
                         flow: 'login',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2216,6 +2457,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     flowData: {
                         method: 'zalo',
                         flow: 'signup',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2223,7 +2465,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-zalo',
-                        afterAction: 'setup',
+                        afterAction: 'forgot',
                     },
                 });
                 goNext();
@@ -2235,7 +2477,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _g, _h;
+        var _e, _f;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2244,12 +2486,13 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            const provider = (_g = userExist._data) === null || _g === void 0 ? void 0 : _g.provider;
-            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
+            const provider = (_e = userExist._data) === null || _e === void 0 ? void 0 : _e.provider;
+            if ((_f = userExist._data) === null || _f === void 0 ? void 0 : _f.is_pass) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'sms',
                         flow: 'login',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2277,6 +2520,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     flowData: {
                         method: 'sms',
                         flow: 'signup',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2284,7 +2528,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-sms',
-                        afterAction: 'setup',
+                        afterAction: 'forgot',
                     },
                 });
                 goNext();
@@ -2296,7 +2540,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickLoginWithPhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k;
+        var _g, _h;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2305,7 +2549,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (!userExist._data || !((_j = userExist._data) === null || _j === void 0 ? void 0 : _j.is_pass)) {
+            if (!userExist._data || !((_g = userExist._data) === null || _g === void 0 ? void 0 : _g.is_pass)) {
                 showNotification({
                     message: t('ssov2.first.noAccountOrPass'),
                     type: 'danger',
@@ -2313,11 +2557,12 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                 setActiveTab('signup');
                 return setLoading(false);
             }
-            if ((_k = userExist._data) === null || _k === void 0 ? void 0 : _k.is_pass) {
+            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'phone',
                         flow: 'login',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2339,7 +2584,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         useSSOV2Store.setState({
             flowData: {
                 method: 'email',
-                flow: 'login',
+                flow: activeTab === 'login' ? 'login' : 'signup',
             },
         });
         addStep({
@@ -2396,10 +2641,21 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                         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, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" }))),
+                        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", trackingFn: useCallback((option) => {
+                                if (!(option === null || option === void 0 ? void 0 : option.label))
+                                    return;
+                                return {
+                                    'data-event-action': 'Country Selection',
+                                    'data-event-label': option.label,
+                                    'data-event-category': activeTab === 'signup'
+                                        ? 'SSO - Sign Up'
+                                        : 'SSO - Sign In',
+                                };
+                            }, [activeTab]) }))),
                 React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickLoginWithPhone, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue Login", display: activeTab === 'login' ? 'block' : 'none' }, t('ssov2.button.continue')),
-                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", display: activeTab === 'signup' ? 'block' : 'none' }, t('ssov2.button.otp.zalo')),
-                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", display: activeTab === 'signup' ? 'block' : 'none' }, t('ssov2.button.otp.sms'))),
+                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", display: activeTab === 'signup' ? 'block' : 'none', leftIcon: React__default.createElement(Zalo, null) }, t('ssov2.button.otp.zalo')),
+                React__default.createElement(Button, { size: "sm", variant: "white", onClick: onClickContinuePhone, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", display: activeTab === 'signup' ? 'block' : 'none', style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.otp.sms'))),
+            React__default.createElement(Divider, { color: "#E4E8EC", display: activeTab === 'signup' ? 'block' : 'none' }),
             React__default.createElement(Stack, { spacing: 16, align: "center" },
                 React__default.createElement(Text, { size: "p4", color: "gray.4" }, t('ssov2.orContinueWith')),
                 React__default.createElement(Group, { spacing: 8, style: {
@@ -2478,10 +2734,8 @@ const initSendUpdateEmailOtp = (email) => __awaiter(void 0, void 0, void 0, func
     });
 });
 const resendUpdateEmailOTP = () => __awaiter(void 0, void 0, void 0, function* () {
-    const formData = new FormData();
     return fetchSSOV2Api(SSO_V2_PATHS.ECOM_CARE.RESEND_OTP, {
-        method: 'POST',
-        body: formData,
+        method: 'GET',
     });
 });
 const verifyUpdateEmailOTP = (otpCode) => __awaiter(void 0, void 0, void 0, function* () {
@@ -2496,8 +2750,8 @@ const verifyUpdateEmailOTP = (otpCode) => __awaiter(void 0, void 0, void 0, func
 const SSOOTPScreen = ({ hidden, index, config, }) => {
     const { t } = useTranslations();
     const { onClose, setTracking } = useSSOState();
-    const { setSteps } = useSSOSteps();
-    const { flowData } = useSSOV2Store();
+    const { setSteps, steps } = useSSOSteps();
+    const { flowData, userInfo } = useSSOV2Store();
     const [loading, setLoading] = React__default.useState(false);
     const [otp, setOtp] = React__default.useState('');
     const [error, setError] = React__default.useState('');
@@ -2509,14 +2763,14 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
     const isEmail = otpType === 'email' || otpType === 'update-email';
     const isZalo = otpType === 'phone-zalo';
     const isSMS = otpType === 'phone-sms';
-    const trackingMethod = flowData.method;
-    const trackingCategory = `SSO - ${otpType === 'update-email' || isUpdatePhone
-        ? 'Existing Users'
-        : flowData.flow === 'signup'
-            ? 'Sign Up'
-            : 'Sign In'} via ${trackingMethod}`;
+    const trackingMethod = flowData === null || flowData === void 0 ? void 0 : flowData.method;
+    const trackingCategory = userInfo && !userInfo.first_time_login
+        ? `SSO - Existing User via ${trackingMethod}`
+        : isVerifyPhoneInTheSignUp(steps, flowData)
+            ? `SSO - Sign Up via ${trackingMethod}`
+            : `SSO - Sign In via ${trackingMethod}`;
     const trackingAction = isEmail
-        ? 'Verify Email'
+        ? 'Verify Your Email'
         : `Verify Phone Number via ${isZalo ? 'Zalo' : isSMS ? 'SMS' : ''}`;
     useEffect(() => {
         if (!hidden) {
@@ -2529,15 +2783,7 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
     }, [hidden]);
     const addStepAndGoNext = (step) => {
         useSSOSteps.setState((old) => {
-            var _a, _b;
             const oldSteps = old.steps;
-            if (((_a = oldSteps[index - 1]) === null || _a === void 0 ? void 0 : _a.type) === SSOStepTypeType.VERIFY_PHONE ||
-                ((_b = oldSteps[index - 1]) === null || _b === void 0 ? void 0 : _b.type) === SSOStepTypeType.UPDATE_EMAIL) {
-                return {
-                    steps: oldSteps.slice(0, index - 1).concat(step),
-                    currentStepIndex: index - 1,
-                };
-            }
             return {
                 steps: oldSteps.slice(0, index).concat(step),
                 currentStepIndex: index,
@@ -2868,7 +3114,7 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
                         'data-event-category': trackingCategory,
                         'data-event-action': trackingAction,
                         'data-event-label': 'Enter Code',
-                    } })),
+                    }, placeholder: "*" })),
             React__default.createElement(Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -2880,7 +3126,7 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
                     count: resendTime,
                 })))),
         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", ref: submitButtonRef }, 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', {
+        !isEmail && (React__default.createElement(Button, { size: "sm", variant: "white", 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'}`, leftIcon: otpType === 'phone-sms' ? (React__default.createElement(Zalo, { size: 18, useCurrentColor: true })) : (React__default.createElement(ReplySquare, { size: 18 })), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
             method: otpType === 'phone-sms' ? 'Zalo' : 'SMS',
         })))));
 };
@@ -2888,6 +3134,7 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
 const SSOPasswordScreen = ({ hidden, config, }) => {
     const { t } = useTranslations();
     const { onClose, setTracking } = useSSOState();
+    const { setUserInfo, flowData } = useSSOV2Store();
     const [errMsg, setErrMsg] = React__default.useState('');
     const phone = config === null || config === void 0 ? void 0 : config.phone;
     const method = config === null || config === void 0 ? void 0 : config.method;
@@ -2923,9 +3170,15 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
                     let res;
                     if (!((_a = existRes._data) === null || _a === void 0 ? void 0 : _a.provider)) {
                         res = yield registerBySendEmailOTP(email);
+                        useSSOV2Store.setState((f) => ({
+                            flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'signup' }),
+                        }));
                     }
                     else {
                         res = yield resendEmailOTP(email);
+                        useSSOV2Store.setState((f) => ({
+                            flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'login' }),
+                        }));
                     }
                     if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
                         setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
@@ -2951,11 +3204,13 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onAuthSuccess = (data) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
         handleAuthSuccess(data);
+        const userInfo = yield getUserInfo();
+        const isPhoneFlow = isPhoneFlowFn(flowData);
+        const isEmailFlow = isEmailFlowFn(flowData);
+        setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
         if (!phone && !!email) {
-            const userInfo = yield getUserInfo();
-            if (!((_c = userInfo._data) === null || _c === void 0 ? void 0 : _c.phone_verified_at) || !((_d = userInfo._data) === null || _d === void 0 ? void 0 : _d.phone)) {
+            if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
                 useSSOV2Store.setState((s) => ({
                     flowData: Object.assign(Object.assign({}, s.flowData), { isVerifyPhone: true }),
                 }));
@@ -2969,6 +3224,27 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
                 return;
             }
         }
+        if (isLoginWithPhoneNotVerifedYet(flowData, userInfo._data)) {
+            addStep({
+                type: SSOStepTypeType.FORGOT_PASSWORD_PHONE,
+                config: {
+                    phone: `${userInfo._data.area_code}${userInfo._data.phone}`,
+                    afterAction: 'setup',
+                },
+            });
+            goNext();
+            return;
+        }
+        if ((isPhoneFlow || isEmailFlow) && !isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+            addStep({
+                type: SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                },
+            });
+            goNext();
+            return;
+        }
         onClose === null || onClose === void 0 ? void 0 : onClose(true);
     });
     return (React__default.createElement("form", { style: {
@@ -3017,6 +3293,48 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
         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 SetupLater = ({ style = {} }) => {
+    const { t } = useTranslations();
+    const { onClose, tracking } = useSSOState();
+    const [loading, setLoading] = useState(false);
+    const { userInfo, flowData } = useSSOV2Store();
+    const { currentStepIndex, steps, addStep, goNext } = useSSOSteps();
+    const currentStep = steps[currentStepIndex];
+    const onClickSetupLater = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (loading)
+            return;
+        setLoading(true);
+        if (userInfo &&
+            !isUserFinishedSetup(userInfo) &&
+            ((currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.VERIFY_PHONE ||
+                (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.FORGOT_PASSWORD_PHONE)) {
+            addStep({
+                type: SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo,
+                },
+            });
+            goNext();
+        }
+        else if (!userInfo &&
+            !isFlowFinishedSetup(flowData) &&
+            (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.VERIFY_PHONE) {
+            addStep({
+                type: SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo,
+                },
+            });
+            goNext();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+        }
+        setLoading(false);
+    });
+    return (React__default.createElement(Button, { size: "sm", variant: "white", color: "#737373", style: Object.assign({ fontWeight: 400 }, style), onClick: onClickSetupLater, disabled: loading, dataEventCategory: tracking === null || tracking === void 0 ? void 0 : tracking.category, dataEventAction: tracking === null || tracking === void 0 ? void 0 : tracking.action, dataEventLabel: "Setup Later" }, t('ssov2.button.setupLater')));
+};
+
 const SSOPasswordForgotPhone = ({ hidden, config, }) => {
     const phone = config === null || config === void 0 ? void 0 : config.phone;
     const { t } = useTranslations();
@@ -3064,7 +3382,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-zalo',
-                        afterAction: 'forgot',
+                        afterAction: config.afterAction || 'forgot',
                         provider: (_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider,
                     },
                 });
@@ -3107,7 +3425,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-sms',
-                        afterAction: 'forgot',
+                        afterAction: config.afterAction || 'forgot',
                         provider: (_d = userExist._data) === null || _d === void 0 ? void 0 : _d.provider,
                     },
                 });
@@ -3132,10 +3450,19 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
         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: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" }),
+                isError: !!errMsg, required: true, disabled: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone", trackingFn: useCallback((option) => {
+                    if (!(option === null || option === void 0 ? void 0 : option.label))
+                        return;
+                    return {
+                        'data-event-action': 'Country Selection',
+                        'data-event-label': option.label,
+                        'data-event-category': trackingCategory,
+                    };
+                }, []) }),
             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, "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')))));
+            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", leftIcon: React__default.createElement(Zalo, null) }, t('ssov2.button.continueZalo')),
+            React__default.createElement(Button, { size: "sm", variant: "white", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS')),
+            React__default.createElement(SetupLater, null))));
 };
 
 const CheckGrayIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -3176,11 +3503,14 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
     const { t } = useTranslations();
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
-    const { setTracking } = useSSOState();
-    const { flowData } = useSSOV2Store();
+    const { setTracking, onClose } = useSSOState();
+    const { addStep, goNext } = useSSOSteps();
+    const { flowData, setUserInfo } = useSSOV2Store();
     const trackingMethod = flowData.method;
-    const trackingCategory = `SSO - Sign In via ${trackingMethod}`;
-    const trackingAction = `Setup New Password`;
+    const trackingCategory = flowData.flow === 'login'
+        ? `SSO - Sign In via ${trackingMethod}`
+        : `SSO - Sign Up via ${trackingMethod}`;
+    const trackingAction = `Setup Password`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3208,6 +3538,7 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
         })),
     });
     const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         setLoading(true);
         try {
             const { password, confirmPassword } = values;
@@ -3215,22 +3546,72 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                 password.length <= 50 &&
                 password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/) &&
                 password === confirmPassword) {
-                const res = yield resetPassword(password, confirmPassword);
+                const isPhoneOrEmailFlow = isPhoneFlowFn(flowData) || isEmailFlowFn(flowData);
+                const res = isPhoneOrEmailFlow
+                    ? yield updateUserInfo({
+                        password,
+                        confirm_password: confirmPassword,
+                        validate: '',
+                    })
+                    : yield resetPassword(password, confirmPassword);
                 if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                    showNotification({
-                        type: 'success',
-                        message: 'Password has been reset successfully',
-                    });
-                    // back to login step
-                    const foundPasswordIndex = steps.findIndex((step) => step.type === SSOStepTypeType.PASSWORD);
-                    if (foundPasswordIndex === -1) {
-                        // reset to first step
-                        setSteps((s) => [s[0]]);
-                        useSSOSteps.setState({ currentStepIndex: 0 });
+                    if (isPhoneOrEmailFlow) {
+                        // Login again to fetch token
+                        const email = parseEmailFromToken((_a = res === null || res === void 0 ? void 0 : res._data) === null || _a === void 0 ? void 0 : _a.token);
+                        // Only Email flow have the verify phone before. Need new profile to tracking correctly
+                        const newTokenRes = isEmailFlowFn(flowData) && isResetPasswordFlowFn(steps)
+                            ? yield loginByEmailPassword(email, password)
+                            : null;
+                        handleAuthSuccess((newTokenRes === null || newTokenRes === void 0 ? void 0 : newTokenRes._data) || (res === null || res === void 0 ? void 0 : res._data));
+                        const userInfo = yield getUserInfo();
+                        // Phone
+                        if (isPhoneFlowFn(flowData)) {
+                            if (userInfo && !isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+                                addStep({
+                                    type: SSOStepTypeType.SETUP_FULL,
+                                    config: {
+                                        userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                                    },
+                                });
+                                goNext();
+                            }
+                            else {
+                                onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                            }
+                        }
+                        // Email
+                        if (isEmailFlowFn(flowData)) {
+                            setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
+                            if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+                                addStep({
+                                    type: SSOStepTypeType.VERIFY_PHONE,
+                                    config: {
+                                        provider: 'email',
+                                    },
+                                });
+                                goNext();
+                            }
+                            else {
+                                onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                            }
+                        }
                     }
                     else {
-                        setSteps((s) => s.slice(0, foundPasswordIndex + 1));
-                        useSSOSteps.setState({ currentStepIndex: foundPasswordIndex });
+                        showNotification({
+                            type: 'success',
+                            message: 'Password has been reset successfully',
+                        });
+                        // back to login step
+                        const foundPasswordIndex = steps.findIndex((step) => step.type === SSOStepTypeType.PASSWORD);
+                        if (foundPasswordIndex === -1) {
+                            // reset to first step
+                            setSteps((s) => [s[0]]);
+                            useSSOSteps.setState({ currentStepIndex: 0 });
+                        }
+                        else {
+                            setSteps((s) => s.slice(0, foundPasswordIndex + 1));
+                            useSSOSteps.setState({ currentStepIndex: foundPasswordIndex });
+                        }
                     }
                     // onClose?.()
                 }
@@ -3258,7 +3639,9 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                     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, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Save" }, 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": (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup' ? 'Create New Account' : 'Save' }, (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup'
+                ? t('ssov2.setup.button.createAccount')
+                : t('ssov2.button.save')))));
 };
 
 const SSOPhoneVerify = ({ hidden, config, }) => {
@@ -3267,8 +3650,15 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
     const { locale, setTracking } = useSSOState();
+    const { flowData, userInfo } = useSSOV2Store();
+    const { steps } = useSSOSteps();
     const { afterAction, provider } = config || {};
-    const trackingCategory = `SSO - Existing Users via ${provider}`;
+    const trackingMethod = flowData === null || flowData === void 0 ? void 0 : flowData.method;
+    const trackingCategory = userInfo && !userInfo.first_time_login
+        ? `SSO - Existing User via ${trackingMethod}`
+        : isVerifyPhoneInTheSignUp(steps, flowData)
+            ? `SSO - Sign Up via ${trackingMethod}`
+            : `SSO - Sign In via ${trackingMethod}`;
     const trackingAction = 'Verify Phone Number';
     useEffect(() => {
         if (!hidden) {
@@ -3279,6 +3669,7 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
             });
         }
     }, [hidden]);
+    const { source } = useSSOV2Store();
     const { addStep, goNext } = useSSOSteps();
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
@@ -3376,9 +3767,18 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
                     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, "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'))))));
+                        }, isError: !!errMsg, required: true, name: "phone", disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone", trackingFn: useCallback((option) => {
+                            if (!(option === null || option === void 0 ? void 0 : option.label))
+                                return;
+                            return {
+                                'data-event-action': 'Country Selection',
+                                'data-event-label': option.label,
+                                'data-event-category': trackingCategory,
+                            };
+                        }, []) })),
+                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", leftIcon: React__default.createElement(Zalo, null) }, t('ssov2.button.continueZalo')),
+                React__default.createElement(Button, { size: "sm", variant: "white", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS')),
+                source !== 'care_onboarding' && source !== 'ecom' && React__default.createElement(SetupLater, null)))));
 };
 
 const FemaleIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -3410,39 +3810,19 @@ const MaleIcon = () => (React__default.createElement("svg", { width: "20", heigh
     React__default.createElement("path", { d: "M11.122 6.393a.157.157 0 0 1-.051-.304c.687-.234 1.688-.344 2.26-.03a.156.156 0 0 1-.15.274c-.463-.254-1.38-.163-2.009.052a.2.2 0 0 1-.05.008m-2.19.572a.16.16 0 0 1-.144-.097c-.013-.027-.123-.097-.363-.129-.325-.043-.672.016-.772.131a.156.156 0 1 1-.236-.205c.214-.245.721-.29 1.103-.228.209.034.475.116.556.311a.156.156 0 0 1-.144.217m.222-.571a.2.2 0 0 1-.05-.009c-.629-.215-1.546-.306-2.009-.051a.156.156 0 1 1-.15-.274c.572-.315 1.572-.206 2.26.03a.156.156 0 0 1-.05.304", fill: "#404040" }),
     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" })));
 
+// import { StyledPhone } from '../components/phone'
 // always has name, gender dob
-const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isPhoneDisabled, loading, tracking, }) => {
+const OtherSetup = ({ form, 
+// needPhone,
+// skipPhone,
+needEmail, isEmailDisable, 
+// isPhoneDisabled,
+loading, tracking, }) => {
     const { t } = useTranslations();
-    const { locale = 'vi-VN' } = useSSOState();
+    // const { locale = 'vi-VN' } = useSSOState()
     const { setupSource } = useSSOV2Store();
     const [dobChanged, setDobChanged] = React__default.useState(false);
     return (React__default.createElement(Stack, { spacing: 12 },
-        needPhone && (React__default.createElement(React__default.Fragment, null,
-            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 || isPhoneDisabled, "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" })),
-            !skipPhone && (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: {
-                        root: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            flexWrap: 'wrap',
-                            gap: 24,
-                        },
-                    } }, form.getInputProps('otpMethod')),
-                    React__default.createElement(Radio, { value: "zalo", label: "Zalo", styles: {
-                            label: {
-                                paddingLeft: 8,
-                            },
-                        }, 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, "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,
@@ -3457,7 +3837,7 @@ const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isP
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('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')),
+                    }, 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" }, t('ssov2.setup.field.gender.female')),
                 React__default.createElement(Button, { type: "button", styles: {
                         root: {
                             flex: 1,
@@ -3469,7 +3849,7 @@ const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isP
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    }, 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')))),
+                    }, 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" }, 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'), { onChange: (e) => {
                 form.getInputProps('dob').onChange(e);
                 setDobChanged(true);
@@ -3477,9 +3857,13 @@ const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isP
                 if (!form.getInputProps('dob').value && !dobChanged)
                     return;
                 form.getInputProps('dob').onBlur(e);
-            } }))));
+            } })),
+        needEmail && (React__default.createElement(Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable || loading, required: setupSource === 'care' || setupSource === 'ecom' ? true : false, withAsterisk: setupSource === 'care' || setupSource === 'ecom' ? 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", style: {
+                display: isEmailDisable ? 'none' : 'block',
+            } }, form.getInputProps('email'))))));
 };
 
+// import { SSOPasswordWithConfirm } from '../passwordForgotSetup/passwordWithConfirm'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getDefaultData = (data) => {
     try {
@@ -3505,7 +3889,6 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     var _a, _b, _c;
     const { onClose, setTracking } = useSSOState();
     const { t } = useTranslations();
-    const { goNext, addStep } = useSSOSteps();
     const { setupSource, flowData } = useSSOV2Store();
     const [errMsg, setErrMsg] = React__default.useState('');
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
@@ -3515,13 +3898,6 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     const provider = (_a = config === null || config === void 0 ? void 0 : config.userInfo) === null || _a === void 0 ? void 0 : _a.provider;
     const authFlow = flowData === null || flowData === void 0 ? void 0 : flowData.flow;
     const defaultData = getDefaultData(config === null || config === void 0 ? void 0 : config.setupDefaultData);
-    const needPass = (authMethod === 'phone' ||
-        authMethod === 'zalo' ||
-        authMethod === 'sms' ||
-        authMethod === 'email' ||
-        provider === 'email' ||
-        provider === 'phone') &&
-        !(userInfo === null || userInfo === void 0 ? void 0 : userInfo.is_pass);
     const skipPhone = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) && !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone_verified_at);
     const isPhoneDisabled = !!(configPhone || (defaultData === null || defaultData === void 0 ? void 0 : defaultData.phone) || skipPhone);
     const needPhone = authFlow === 'signup' &&
@@ -3538,11 +3914,10 @@ const SSOSetupScreen = ({ hidden, config, }) => {
             : undefined) ||
         undefined;
     const needEmail = setupSource === 'care' ||
+        setupSource === 'ecom' ||
         !(flowData === null || flowData === void 0 ? void 0 : flowData.isVerifyPhone) ||
         authMethod === 'facebook' ||
         provider === 'facebook';
-    // const needPhone = !userInfo?.phone_verified_at
-    // const needEmail = authFlow !== 'verify-phone'
     const isEmailDisable = (defaultEmail &&
         (authMethod === 'google' ||
             authMethod === 'email' ||
@@ -3550,7 +3925,7 @@ const SSOSetupScreen = ({ hidden, config, }) => {
             provider === 'email')) ||
         (!!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) && !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email_verified_at));
     const trackingCategory = `SSO - ${authFlow === 'signup' ? 'Sign Up' : 'Existing Users'} via ${authMethod || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.provider)}`;
-    const trackingAction = 'Almost done';
+    const trackingAction = 'Add Information';
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3579,32 +3954,9 @@ const SSOSetupScreen = ({ hidden, config, }) => {
                 ? dayjs(defaultData.birthday, 'MM/DD/YYYY').toDate()
                 : undefined }),
         validateInputOnBlur: true,
-        validate: yupResolver(yup.object().shape(Object.assign(Object.assign(Object.assign(Object.assign({}, (needPass
-            ? {
-                password: yup
-                    .string()
-                    .required(t('ssov2.validate.password.required'))
-                    .min(8, ' ')
-                    .max(50, ' ')
-                    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, ' '),
-                confirmPassword: yup
-                    .string()
-                    .required(t('ssov2.validate.confirmPassword.required'))
-                    .test('passwords-match', t('ssov2.validate.confirmPassword.match'), function (value) {
-                    return this.parent.password === value;
-                }),
-            }
-            : {})), (needPhone
-            ? Object.assign({ phone: yup.string().required(t('ssov2.validate.phone.required')) }, (!skipPhone
-                ? {
-                    otpMethod: yup
-                        .string()
-                        .required(t('ssov2.validate.otp.required'))
-                        .oneOf(['zalo', 'sms']),
-                }
-                : {})) : {})), (needEmail
+        validate: yupResolver(yup.object().shape(Object.assign(Object.assign({}, (needEmail
             ? {
-                email: setupSource === 'care'
+                email: setupSource === 'care' || setupSource === 'ecom'
                     ? yup
                         .string()
                         .email(t('ssov2.validate.email.invalid'))
@@ -3619,15 +3971,13 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
-            const { password, confirmPassword, phone, gender, name, dob, otpMethod } = values;
+            const { phone, gender, name, dob } = values;
             const { phoneNumber, areaCode } = splitPhone(phone || configPhone || '');
             // validate only, delay set data to after otp
             const res = yield updateUserInfo({
                 name,
                 birthday: dayjs(dob).format('YYYY-MM-DD'),
                 email: values.email || undefined,
-                password,
-                confirm_password: confirmPassword,
                 phone_number: phoneNumber || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone),
                 area_code: areaCode || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code) || '84',
                 gender: gender === 'male' ? 1 : 0,
@@ -3635,80 +3985,23 @@ const SSOSetupScreen = ({ hidden, config, }) => {
                 validate: 'true',
             });
             if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                // if need phone and has phone then start phone verify step, close after done
-                if (needPhone && !skipPhone) {
-                    const setupData = {
-                        name,
-                        birthday: dayjs(dob).format('YYYY-MM-DD'),
-                        email: values.email || undefined,
-                        password,
-                        confirm_password: confirmPassword,
-                        phone_number: phoneNumber || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone),
-                        area_code: areaCode || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code) || '84',
-                        gender: gender === 'male' ? 1 : 0,
-                        source: setupSource,
-                    };
-                    if (otpMethod === 'zalo') {
-                        const res = yield resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
-                        if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                            setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                            return setLoading(false);
-                        }
-                        addStep({
-                            type: SSOStepTypeType.OTP,
-                            config: {
-                                phone,
-                                otpType: 'phone-zalo',
-                                isUpdatePhone: true,
-                                afterAction: 'submitSetup',
-                                setupData,
-                                provider,
-                            },
-                        });
-                        goNext();
-                    }
-                    else {
-                        const res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
-                        if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                            setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                            return setLoading(false);
-                        }
-                        addStep({
-                            type: SSOStepTypeType.OTP,
-                            config: {
-                                phone,
-                                otpType: 'phone-sms',
-                                isUpdatePhone: true,
-                                afterAction: 'submitSetup',
-                                setupData,
-                                provider,
-                            },
-                        });
-                        goNext();
-                    }
+                const res = yield updateUserInfo({
+                    name,
+                    birthday: dayjs(dob).format('YYYY-MM-DD'),
+                    email: values.email || undefined,
+                    phone_number: phoneNumber || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone),
+                    area_code: areaCode || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code),
+                    gender: gender === 'male' ? 1 : 0,
+                    source: setupSource,
+                    validate: '',
+                });
+                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                    handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                    onClose === null || onClose === void 0 ? void 0 : onClose(true);
                 }
                 else {
-                    // close?
-                    const res = yield updateUserInfo({
-                        name,
-                        birthday: dayjs(dob).format('YYYY-MM-DD'),
-                        email: values.email || undefined,
-                        password,
-                        confirm_password: confirmPassword,
-                        phone_number: phoneNumber || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone),
-                        area_code: areaCode || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code),
-                        gender: gender === 'male' ? 1 : 0,
-                        source: setupSource,
-                        validate: '',
-                    });
-                    if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                        handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
-                        onClose === null || onClose === void 0 ? void 0 : onClose(true);
-                    }
-                    else {
-                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                        return setLoading(false);
-                    }
+                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                    return setLoading(false);
                 }
             }
             else {
@@ -3729,36 +4022,22 @@ const SSOSetupScreen = ({ hidden, config, }) => {
             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, tracking: {
-                    category: trackingCategory,
-                    action: trackingAction,
-                } })),
             React__default.createElement(OtherSetup, { needPhone: needPhone, skipPhone: skipPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, isPhoneDisabled: isPhoneDisabled, 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, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": needPhone && !skipPhone
-                    ? 'Verify Phone Number'
-                    : authFlow === 'signup'
-                        ? 'Create New Account'
-                        : 'Save' }, needPhone && !skipPhone
-                ? t('ssov2.setup.button.veriyPhone')
-                : authFlow === 'signup'
-                    ? t('ssov2.setup.button.createAccount')
-                    : t('ssov2.button.save')))));
+            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": "Save" }, t('ssov2.button.save')),
+            React__default.createElement(SetupLater, { style: { marginTop: -8 } }))));
 };
 
-// import {
-//   getSSOFlowFromUserProfile,
-//   useSSOV2Store,
-// } from '../ssoStateManager/store'
 const SSOUpdateEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
     const [errMsg, setErrMsg] = React__default.useState('');
     const { setTracking } = useSSOState();
-    const trackingCategory = `SSO - Update Email`;
-    const trackingAction = 'Update Your Email';
+    const { flowData } = useSSOV2Store();
+    const trackingCategory = `SSO - Existing User via ${flowData === null || flowData === void 0 ? void 0 : flowData.method}`;
+    const trackingAction = 'Continue With Email';
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3784,9 +4063,6 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
                 if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
                     const userInfo = yield getUserInfo();
                     if (!existRes._data || email === ((_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) === null || _a === void 0 ? void 0 : _a.email)) {
-                        // useSSOV2Store.setState({
-                        //   flowData: getSSOFlowFromUserProfile(userInfo?._data),
-                        // })
                         const res = yield initSendUpdateEmailOtp(email);
                         if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
                             setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
@@ -3855,6 +4131,20 @@ const SSOScreenRenderer = () => {
     })));
 };
 
+if (!Array.prototype.findLastIndex) {
+    Array.prototype.findLastIndex = function (callback, thisArg) {
+        for (let i = this.length - 1; i >= 0; i--) {
+            if (callback.call(thisArg, this[i], i, this))
+                return i;
+        }
+        return -1;
+    };
+}
+if (!String.prototype.capitalize) {
+    String.prototype.capitalize = function () {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    };
+}
 const SSOV2 = ({ onClose: onCloseProps, locale }) => {
     const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, } = useSSOV2Store();
     useEffect(() => {