@hhgtech/hhg-components 1.29.310-beta-5 → 1.29.311

package/build/esm/ssoV2.js

@@ -1,27 +1,27 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-35c86ab7.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-974c8ac0.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-36a2023e.js';
-export { u as useSSOV2Store } from './store-36a2023e.js';
+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 { 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-5756472c.js';
-import { L as LogoIcon } from './logoIcon-f7d8a376.js';
-import { B as Button } from './index-4bd879eb.js';
-import { M as Modal } from './index-f92a27e8.js';
-import { Stack, Flex, Box, Group } from '@mantine/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 '@mantine/dates';
-import './index-a61170d8.js';
-import './index-565a80b0.js';
-import { s as showNotification } from './useMantineLocale-c2b902a7.js';
-import { T as Text } from './index-26ac0d81.js';
-import { u as useTranslations } from './index-88759ed1.js';
+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 '@mantine/hooks';
-import './utils-d7279c01.js';
-import './other-d17b315d.js';
-import './index-6dc065e0.js';
-import { L as LOCALE } from './Locale-e7dd53a3.js';
-import { G as Google, F as Facebook } from './Google-42d190a1.js';
+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 { 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-adb5e955.js';
+import { u as useScreenSize } from './useScreenSize-40c82c05.js';
 import { Drawer } from 'vaul';
-import { M as MAPPED_LOCALE } from './utils-10cbbbdc.js';
-import { S as Spoiler } from './index-7cbc7122.js';
+import { M as MAPPED_LOCALE } from './utils-5f291626.js';
+import { S as Spoiler } from './index-be992c75.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-bba5d96b.js';
+import { D as DatePicker } from './index-6c43703a.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './useUniqueId-310f5e9a.js';
+import './useUniqueId-cf5d6065.js';
 import './constantsSite.js';
 import 'zustand';
 import './constantsIsProduction.js';
-import './normalizeLink-20a616dd.js';
+import './normalizeLink-2bf24c8c.js';
 import './miscCookieHelper.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-0e5fc387.js';
+import './index.styles-dfe31537.js';
 import '@mantine/notifications';
-import './translationsContext-9d15b26c.js';
+import './translationsContext-b6c33e91.js';
 
 const SSOStateContext = createContext({
     locale: LOCALE.Vietnam,
@@ -158,200 +158,13 @@ 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 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 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 arrSteps = [
-            SSOStepTypeType.PASSWORD,
-            !isPhoneVerifedAlready(userInfo, flowData)
-                ? [SSOStepTypeType.FORGOT_PASSWORD_PHONE, SSOStepTypeType.OTP]
-                : 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);
-        if (arrSteps.length === 2 &&
-            arrSteps[0] === SSOStepTypeType.PASSWORD &&
-            arrSteps[1] === SSOStepTypeType.SETUP_FULL) {
-            return [];
-        }
-        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);
-        if (!hasPasswordStep && !hasPhoneStep && !hasSetupFullStep)
-            return [];
-        const arrSteps = [
-            (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
-                ? SSOStepTypeType.OTP
-                : SSOStepTypeType.EMAIL,
-            hasPasswordStep
-                ? 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, currentStepIndex } = useSSOSteps();
-    const { flowData } = useSSOV2Store();
+    const { steps, goBack } = useSSOSteps();
     const { locale, tracking } = useSSOState();
-    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 showBack = steps.length > 1;
+    const showClose = steps.length === 1;
+    const showLogo = steps.length === 1;
     const logoType = (_a = LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
     const [closeConfirmOpen, setCloseConfirmOpen] = React__default.useState(false);
     const onCloseClick = () => {
@@ -418,7 +231,6 @@ 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)),
@@ -590,7 +402,6 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'login',
-                                metaData: existRes._data,
                             },
                         });
                         // go to password screen
@@ -608,7 +419,6 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'signup',
-                                metaData: existRes._data,
                             },
                         });
                         if (!((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.provider)) {
@@ -627,7 +437,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             config: {
                                 email,
                                 otpType: 'email',
-                                afterAction: 'forgot',
+                                afterAction: 'setup',
                             },
                         });
                         goNext();
@@ -2252,7 +2062,6 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     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();
@@ -2269,31 +2078,20 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     }, [hidden]);
     const [loading, setLoading] = React__default.useState(false);
     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,
                     },
                 });
-                const isNotHavePhone = !userInfo._data.phone || !userInfo._data.phone_verified_at;
-                if (isNotHavePhone) {
-                    useSSOV2Store.setState((f) => ({
-                        flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'signup', isVerifyPhone: true }),
-                    }));
-                    addStep({
-                        type: SSOStepTypeType.VERIFY_PHONE,
-                        config: {
-                            provider: provider,
-                        },
-                    });
-                    goNext();
-                }
-                else if (!isUserFinishedSetup(userInfo._data)) {
+                if (!isUserFinishedSetup(userInfo._data) ||
+                    !userInfo._data.phone ||
+                    !userInfo._data.phone_verified_at) {
                     useSSOV2Store.setState((f) => ({
                         flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'signup' }),
                     }));
@@ -2324,6 +2122,19 @@ 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);
                 }
@@ -2363,7 +2174,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         };
     }, []);
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+        var _e, _f;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2372,13 +2183,12 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            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) {
+            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: 'zalo',
                         flow: 'login',
-                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2406,7 +2216,6 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     flowData: {
                         method: 'zalo',
                         flow: 'signup',
-                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2414,7 +2223,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-zalo',
-                        afterAction: 'forgot',
+                        afterAction: 'setup',
                     },
                 });
                 goNext();
@@ -2426,7 +2235,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _e, _f;
+        var _g, _h;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2435,13 +2244,12 @@ 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 = (_g = userExist._data) === null || _g === void 0 ? void 0 : _g.provider;
+            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'sms',
                         flow: 'login',
-                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2469,7 +2277,6 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     flowData: {
                         method: 'sms',
                         flow: 'signup',
-                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2477,7 +2284,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-sms',
-                        afterAction: 'forgot',
+                        afterAction: 'setup',
                     },
                 });
                 goNext();
@@ -2489,7 +2296,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickLoginWithPhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _g, _h;
+        var _j, _k;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2498,7 +2305,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 || !((_g = userExist._data) === null || _g === void 0 ? void 0 : _g.is_pass)) {
+            if (!userExist._data || !((_j = userExist._data) === null || _j === void 0 ? void 0 : _j.is_pass)) {
                 showNotification({
                     message: t('ssov2.first.noAccountOrPass'),
                     type: 'danger',
@@ -2506,12 +2313,11 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                 setActiveTab('signup');
                 return setLoading(false);
             }
-            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
+            if ((_k = userExist._data) === null || _k === void 0 ? void 0 : _k.is_pass) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'phone',
                         flow: 'login',
-                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2672,8 +2478,10 @@ 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: 'GET',
+        method: 'POST',
+        body: formData,
     });
 });
 const verifyUpdateEmailOTP = (otpCode) => __awaiter(void 0, void 0, void 0, function* () {
@@ -2721,7 +2529,15 @@ 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,
@@ -3052,7 +2868,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,
                 } },
@@ -3072,7 +2888,6 @@ 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;
@@ -3136,13 +2951,11 @@ 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) {
-            if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+            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)) {
                 useSSOV2Store.setState((s) => ({
                     flowData: Object.assign(Object.assign({}, s.flowData), { isVerifyPhone: true }),
                 }));
@@ -3156,27 +2969,6 @@ 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: {
@@ -3225,47 +3017,6 @@ 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 } = 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 (!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 }, t('ssov2.button.setupLater')));
-};
-
 const SSOPasswordForgotPhone = ({ hidden, config, }) => {
     const phone = config === null || config === void 0 ? void 0 : config.phone;
     const { t } = useTranslations();
@@ -3313,7 +3064,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-zalo',
-                        afterAction: config.afterAction || 'forgot',
+                        afterAction: 'forgot',
                         provider: (_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider,
                     },
                 });
@@ -3356,7 +3107,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-sms',
-                        afterAction: config.afterAction || 'forgot',
+                        afterAction: 'forgot',
                         provider: (_d = userExist._data) === null || _d === void 0 ? void 0 : _d.provider,
                     },
                 });
@@ -3384,8 +3135,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                 isError: !!errMsg, required: true, disabled: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" }),
             errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
             React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading, "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(SetupLater, null))));
+            React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS')))));
 };
 
 const CheckGrayIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -3426,9 +3176,8 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
     const { t } = useTranslations();
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
-    const { setTracking, onClose } = useSSOState();
-    const { addStep, goNext } = useSSOSteps();
-    const { flowData, setUserInfo } = useSSOV2Store();
+    const { setTracking } = useSSOState();
+    const { flowData } = useSSOV2Store();
     const trackingMethod = flowData.method;
     const trackingCategory = `SSO - Sign In via ${trackingMethod}`;
     const trackingAction = `Setup New Password`;
@@ -3466,66 +3215,22 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                 password.length <= 50 &&
                 password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/) &&
                 password === confirmPassword) {
-                const isPhoneOrEmailFlow = isPhoneFlowFn(flowData) || isEmailFlowFn(flowData);
-                const res = isPhoneOrEmailFlow
-                    ? yield updateUserInfo({
-                        password,
-                        confirm_password: confirmPassword,
-                        validate: '',
-                    })
-                    : yield resetPassword(password, confirmPassword);
+                const res = yield resetPassword(password, confirmPassword);
                 if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                    if (isPhoneOrEmailFlow) {
-                        handleAuthSuccess(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);
-                            }
-                        }
+                    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 {
-                        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 });
-                        }
+                        setSteps((s) => s.slice(0, foundPasswordIndex + 1));
+                        useSSOSteps.setState({ currentStepIndex: foundPasswordIndex });
                     }
                     // onClose?.()
                 }
@@ -3553,9 +3258,7 @@ 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": (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')))));
+            React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Save" }, t('ssov2.button.save')))));
 };
 
 const SSOPhoneVerify = ({ hidden, config, }) => {
@@ -3576,7 +3279,6 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
             });
         }
     }, [hidden]);
-    const { source } = useSSOV2Store();
     const { addStep, goNext } = useSSOSteps();
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
@@ -3676,8 +3378,7 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
                             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')),
-                source !== 'care_onboarding' && source !== 'ecom' && React__default.createElement(SetupLater, null)))));
+                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS'))))));
 };
 
 const FemaleIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -3709,19 +3410,39 @@ 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,
@@ -3756,13 +3477,9 @@ loading, tracking, }) => {
                 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' ? 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", 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 {
@@ -3788,6 +3505,7 @@ 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;
@@ -3797,6 +3515,13 @@ 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' &&
@@ -3816,6 +3541,8 @@ const SSOSetupScreen = ({ hidden, config, }) => {
         !(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' ||
@@ -3852,7 +3579,30 @@ const SSOSetupScreen = ({ hidden, config, }) => {
                 ? dayjs(defaultData.birthday, 'MM/DD/YYYY').toDate()
                 : undefined }),
         validateInputOnBlur: true,
-        validate: yupResolver(yup.object().shape(Object.assign(Object.assign({}, (needEmail
+        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
             ? {
                 email: setupSource === 'care'
                     ? yup
@@ -3869,13 +3619,15 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
-            const { phone, gender, name, dob } = values;
+            const { password, confirmPassword, phone, gender, name, dob, otpMethod } = 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,
@@ -3883,23 +3635,80 @@ const SSOSetupScreen = ({ hidden, config, }) => {
                 validate: 'true',
             });
             if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                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);
+                // 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();
+                    }
                 }
                 else {
-                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                    return setLoading(false);
+                    // 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);
+                    }
                 }
             }
             else {
@@ -3920,13 +3729,24 @@ 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": "Save" }, t('ssov2.button.save')),
-            React__default.createElement(SetupLater, { style: { marginTop: -8 } }))));
+            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')))));
 };
 
 // import {
@@ -4035,15 +3855,6 @@ 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;
-    };
-}
 const SSOV2 = ({ onClose: onCloseProps, locale }) => {
     const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, } = useSSOV2Store();
     useEffect(() => {