@hhgtech/hhg-components 1.29.134 → 1.29.136

package/build/ssoV2.js

@@ -5,47 +5,46 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var logoIcon = require('./logoIcon-dfa1ea13.js');
-var index$1 = require('./index-a0a2321b.js');
-var index = require('./index-e8251765.js');
+var logoIcon = require('./logoIcon-ac286d9a.js');
+var index$2 = require('./index-91f5fadb.js');
+var index$1 = require('./index-447aa18b.js');
 var core = require('@mantine/core');
 var throttle = require('lodash/throttle');
-var index$3 = require('./index-3e801e33.js');
+var index$4 = require('./index-53b1d680.js');
 require('@mantine/dates');
-var index$4 = require('./index-920ebbb7.js');
-require('./index-291e6f28.js');
-require('./index-e6bdfb93.js');
-var useMantineLocale = require('./useMantineLocale-d59fa63b.js');
-var index$2 = require('./index-7f563129.js');
-var useTranslations = require('./useTranslations-928d4ace.js');
+var index$5 = require('./index-58ef4c66.js');
+require('./index-c9911c65.js');
+require('./index-a4cdd0ad.js');
+var useMantineLocale = require('./useMantineLocale-ceb23b28.js');
+var index$3 = require('./index-f301a143.js');
+var index = require('./index-1358bae0.js');
 require('@mantine/hooks');
-require('./utils-54857ab8.js');
-require('./other-427e38dc.js');
-require('./index-41f6c400.js');
-var Locale = require('./Locale-409f6e0e.js');
-require('./translationsContext-e1cd3ed4.js');
-require('string-format');
-var tslib_es6 = require('./tslib.es6-6cf152d6.js');
+require('./utils-ee304330.js');
+require('./other-2ce2695a.js');
+require('./index-3fa5e9f1.js');
+var Locale = require('./Locale-4d114b4b.js');
+require('./translationsContext-014418fe.js');
+var store = require('./store-d38577de.js');
+var tslib_es6 = require('./tslib.es6-e3715db4.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
-var normalizeLink = require('./normalizeLink-32afb65d.js');
-var routing = require('./routing-9b87917d.js');
+var normalizeLink = require('./normalizeLink-ddf52fdd.js');
+var routing = require('./routing-c06127ea.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
-var Google = require('./Google-a544b3d8.js');
+var Google = require('./Google-a3896ff8.js');
 var other = require('@hhgtech/icons/other');
-require('./index.styles-b57afab1.js');
+require('./index.styles-d4cfe368.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-cb95e189.js');
+var utils = require('./utils-d82de9f1.js');
 var form = require('@mantine/form');
 var yup = require('yup');
 var dayjs = require('dayjs');
-var store = require('./store-a4d15bba.js');
-var index$5 = require('./index-d919834a.js');
-require('./index-8244f19c.js');
+var index$6 = require('./index-bdadc7a8.js');
+require('./index-4391671f.js');
 require('@mantine/carousel');
 require('./miscTheme.js');
 require('classnames');
-require('./useUniqueId-f1ce19f5.js');
+require('./useUniqueId-7b676392.js');
 require('./constantsSite.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
@@ -239,7 +238,7 @@ const getContents = (t) => {
 };
 const CollectInfoTextPopup = () => {
     const { openCollectInfoPopup, setOpenCollectInfoPopup } = useSSOState();
-    useTranslations.useTranslations();
+    index.useTranslations();
     const contents = getContents();
     const [mobileDragOffset, setMobileDragOffset] = React.useState(0);
     const dragStartYRef = React.useRef(0);
@@ -259,7 +258,7 @@ const CollectInfoTextPopup = () => {
           transform: translateY(${Math.round(mobileDragOffset)}px);
         }
       `),
-        React__default["default"].createElement(index.Modal, { opened: openCollectInfoPopup, onClose: () => setOpenCollectInfoPopup(false), withCloseButton: false, zIndex: 400, styles: (theme) => ({
+        React__default["default"].createElement(index$1.Modal, { opened: openCollectInfoPopup, onClose: () => setOpenCollectInfoPopup(false), withCloseButton: false, zIndex: 400, styles: (theme) => ({
                 body: {
                     padding: '32px 24px',
                     position: 'relative',
@@ -344,7 +343,7 @@ const CollectInfoTextPopup = () => {
             React__default["default"].createElement("div", { style: {
                     height: 40,
                 } },
-                React__default["default"].createElement(index$1.Button, { variant: "white", sx: (theme) => ({
+                React__default["default"].createElement(index$2.Button, { variant: "white", sx: (theme) => ({
                         width: 40,
                         height: 40,
                         padding: 8,
@@ -359,8 +358,8 @@ const CollectInfoTextPopup = () => {
             React__default["default"].createElement(core.Stack, { pos: "relative", mt: 100, spacing: 8, style: {
                     zIndex: 1,
                 } },
-                React__default["default"].createElement(index$2.Text, { size: "h4" }, "Why We Need Your Information"),
-                React__default["default"].createElement(index$3.Accordion, { styles: {
+                React__default["default"].createElement(index$3.Text, { size: "h4" }, "Why We Need Your Information"),
+                React__default["default"].createElement(index$4.Accordion, { styles: {
                         item: {
                             borderBottomColor: '#E4E8EC',
                             paddingBottom: 16,
@@ -373,15 +372,15 @@ const CollectInfoTextPopup = () => {
                             padding: 0,
                             marginTop: 8,
                         },
-                    } }, contents.map((item, index) => (React__default["default"].createElement(index$3.Accordion.Item, { key: index, value: item.label },
-                    React__default["default"].createElement(index$3.Accordion.Control, { icon: item.icon },
-                        React__default["default"].createElement(index$2.Text, { size: "s3", weight: "semiBold" }, item.label)),
-                    React__default["default"].createElement(index$3.Accordion.Panel, null,
-                        React__default["default"].createElement(index$2.Text, { size: "p3" }, item.description))))))))));
+                    } }, contents.map((item, index) => (React__default["default"].createElement(index$4.Accordion.Item, { key: index, value: item.label },
+                    React__default["default"].createElement(index$4.Accordion.Control, { icon: item.icon },
+                        React__default["default"].createElement(index$3.Text, { size: "s3", weight: "semiBold" }, item.label)),
+                    React__default["default"].createElement(index$4.Accordion.Panel, null,
+                        React__default["default"].createElement(index$3.Text, { size: "p3" }, item.description))))))))));
 };
 
 const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
-    return (React__default["default"].createElement(index.Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: 400, styles: (theme) => ({
+    return (React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: () => onCancel(), withCloseButton: false, zIndex: 400, styles: (theme) => ({
             body: {
                 padding: '32px 24px',
                 position: 'relative',
@@ -417,13 +416,13 @@ const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
                 zIndex: 1,
                 textAlign: 'center',
             } },
-            React__default["default"].createElement(index$2.Text, { size: "h4" }, "Are you sure you want to exit?"),
-            React__default["default"].createElement(index$2.Text, { size: "p3" }, "You\u2019re just a step away from completing your account setup. Do you really want to leave?")),
+            React__default["default"].createElement(index$3.Text, { size: "h4" }, "Are you sure you want to exit?"),
+            React__default["default"].createElement(index$3.Text, { size: "p3" }, "You\u2019re just a step away from completing your account setup. Do you really want to leave?")),
         React__default["default"].createElement(core.Stack, { mt: 32, spacing: 8, align: "center" },
-            React__default["default"].createElement(index$1.Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40 },
-                React__default["default"].createElement(index$2.Text, { size: "s2", weight: "regular", color: "inherit" }, "Cancel")),
-            React__default["default"].createElement(index$1.Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true },
-                React__default["default"].createElement(index$2.Text, { size: "p2", weight: "regular", color: "gray.6" }, "I want to exit now")))));
+            React__default["default"].createElement(index$2.Button, { variant: "primary", size: "lg", onClick: onCancel, w: "50%", radius: 40 },
+                React__default["default"].createElement(index$3.Text, { size: "s2", weight: "regular", color: "inherit" }, "Cancel")),
+            React__default["default"].createElement(index$2.Button, { variant: "white", size: "lg", onClick: onClose, fullWidth: true },
+                React__default["default"].createElement(index$3.Text, { size: "p2", weight: "regular", color: "gray.6" }, "I want to exit now")))));
 };
 const BackgroundHeader = () => (React__default["default"].createElement("svg", { width: "292", height: "255", viewBox: "0 0 292 255", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
         position: 'absolute',
@@ -454,75 +453,20 @@ const BackgroundHeader = () => (React__default["default"].createElement("svg", {
             React__default["default"].createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
             React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff" })))));
 
-var SSOStepTypeType;
-(function (SSOStepTypeType) {
-    SSOStepTypeType["FIRST"] = "first";
-    SSOStepTypeType["EMAIL"] = "email";
-    SSOStepTypeType["VERIFY_PHONE"] = "verify_phone";
-    SSOStepTypeType["PASSWORD"] = "password";
-    SSOStepTypeType["UPDATE_EMAIL"] = "update_email";
-    SSOStepTypeType["FORGOT_PASSWORD_PHONE"] = "forgot_password_phone";
-    SSOStepTypeType["FORGOT_PASSWORD_SETUP"] = "forgot_password_setup";
-    SSOStepTypeType["OTP"] = "otp";
-    SSOStepTypeType["SETUP_FULL"] = "setup_full";
-})(SSOStepTypeType || (SSOStepTypeType = {}));
-const SSOStepsContext = React.createContext({
-    currentStepIndex: 0,
-    steps: [
-        {
-            type: SSOStepTypeType.FIRST,
-        },
-    ],
-    setSteps: () => false,
-    goNext: () => false,
-    goBack: () => false,
-    addStep: () => false,
-});
-const SSOStepsProvider = ({ children, defaultSteps, }) => {
-    const [steps, setSteps] = React.useState(defaultSteps || [
-        {
-            type: SSOStepTypeType.FIRST,
-        },
-    ]);
-    const [currentStepIndex, setCurrentStepIndex] = React.useState(0);
-    const [shareData, setShareData] = React.useState({});
-    return (React__default["default"].createElement(SSOStepsContext.Provider, { value: {
-            currentStepIndex,
-            steps,
-            setSteps,
-            addStep: (step) => {
-                setSteps((s) => [...s, step]);
-            },
-            goNext: () => {
-                setCurrentStepIndex((index) => index + 1);
-            },
-            goBack: () => {
-                setCurrentStepIndex((index) => index - 1);
-                // remove step when go back
-                setSteps((steps) => steps.slice(0, steps.length - 1));
-            },
-            shareData,
-            setShareData,
-        } }, children));
-};
-const useSSOSteps = () => {
-    return React__default["default"].useContext(SSOStepsContext);
-};
-
 const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     var _a;
-    const { steps, goBack } = useSSOSteps();
+    const { steps, goBack } = store.useSSOSteps();
     const { locale } = useSSOState();
     const showBack = steps.length > 1;
     const showClose = steps.length === 1;
     const showLogo = steps.length === 1;
-    const logoType = (_a = index$4.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
+    const logoType = (_a = index$5.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
     const [closeConfirmOpen, setCloseConfirmOpen] = React__default["default"].useState(false);
     const onCloseClick = () => {
         setCloseConfirmOpen(true);
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index.Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
+        React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
                 body: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -559,7 +503,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                     alignItems: 'center',
                     justifyContent: 'space-between',
                 } },
-                showBack && (React__default["default"].createElement(index$1.Button, { variant: "white", style: {
+                showBack && (React__default["default"].createElement(index$2.Button, { variant: "white", style: {
                         width: 40,
                         height: 40,
                         padding: 8,
@@ -568,7 +512,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                     }, onClick: goBack },
                     React__default["default"].createElement(arrow.ChevronLeft, null))),
                 showLogo && (React__default["default"].createElement(logoIcon.LogoIcon, { type: logoType, height: 32, width: 'unset' })),
-                showClose && (React__default["default"].createElement(index$1.Button, { variant: "white", style: {
+                showClose && (React__default["default"].createElement(index$2.Button, { variant: "white", style: {
                         width: 40,
                         height: 40,
                         padding: 8,
@@ -620,9 +564,9 @@ const SSO_V2_PATHS = {
 };
 
 const locale = process.env.UNIFY_LOCALE || 'vi-VN';
-const websiteId = index$4.LOCALE_SPECS[locale].SITE_ID;
-index$4.LOCALE_SPECS[locale].PHONE;
-const allAvailableAreaCodes = Object.keys(index$4.LOCALE_SPECS).map((locale) => index$4.LOCALE_SPECS[locale].PHONE);
+const websiteId = index$5.LOCALE_SPECS[locale].SITE_ID;
+index$5.LOCALE_SPECS[locale].PHONE;
+const allAvailableAreaCodes = Object.keys(index$5.LOCALE_SPECS).map((locale) => index$5.LOCALE_SPECS[locale].PHONE);
 const getSSOV2ApiUrl = (path) => {
     return normalizeLink.normalizeLinkSlash(`${routing.getCurrentSsoUrl(locale)}/api/v2/${path}`);
 };
@@ -738,7 +682,7 @@ const handleAuthSuccess = (res) => {
             expires: new Date(res.expire_in * 1000).toUTCString(),
         });
     (res === null || res === void 0 ? void 0 : res.refresh_token) &&
-        miscCookieHelper.setCookie(index$4.BEARER_REFRESH_TOKEN_COOKIE, res.refresh_token, {
+        miscCookieHelper.setCookie(index$5.BEARER_REFRESH_TOKEN_COOKIE, res.refresh_token, {
             domain: window.location.hostname === 'localhost'
                 ? 'localhost'
                 : `.${constantsDomainLocales.domainLocales[process.env.UNIFY_LOCALE || 'vi-VN']}`,
@@ -786,7 +730,7 @@ const verifyByEmailOTP = (email, otpCode) => tslib_es6.__awaiter(void 0, void 0,
 
 const SSOEmailScreen = ({ hidden, }) => {
     const [errMsg, setErrMsg] = React__default["default"].useState('');
-    const { addStep, goNext, setShareData } = useSSOSteps();
+    const { addStep, goNext, setShareData } = store.useSSOSteps();
     return (React__default["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -802,7 +746,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                     });
                     // go to password screen
                     addStep({
-                        type: SSOStepTypeType.PASSWORD,
+                        type: store.SSOStepTypeType.PASSWORD,
                         config: {
                             email,
                         },
@@ -827,7 +771,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                     }
                     // go to register screen
                     addStep({
-                        type: SSOStepTypeType.OTP,
+                        type: store.SSOStepTypeType.OTP,
                         config: {
                             email,
                             otpType: 'email',
@@ -842,10 +786,10 @@ const SSOEmailScreen = ({ hidden, }) => {
             }
         }) },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, "Continue with email"),
-            React__default["default"].createElement(index$2.Text, { size: "p4" }, "S\u1EED d\u1EE5ng email c\u1EE7a b\u1EA1n \u0111\u1EC3 ti\u1EBFp t\u1EE5c \u0111\u0103ng nh\u1EADp ho\u1EB7c \u0111\u0103ng k\u00FD")),
-        React__default["default"].createElement(index$3.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
-        React__default["default"].createElement(index$1.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, "Verify Your Email")));
+            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Continue with email"),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, "S\u1EED d\u1EE5ng email c\u1EE7a b\u1EA1n \u0111\u1EC3 ti\u1EBFp t\u1EE5c \u0111\u0103ng nh\u1EADp ho\u1EB7c \u0111\u0103ng k\u00FD")),
+        React__default["default"].createElement(index$4.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, "Verify Your Email")));
 };
 
 const splitPhone = (phone) => {
@@ -1019,7 +963,7 @@ const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => tslib_es6.__await
 
 const CollectInfoText = () => {
     const { setOpenCollectInfoPopup } = useSSOState();
-    return (React__default["default"].createElement(index$2.Text, { size: "p4", onClick: () => {
+    return (React__default["default"].createElement(index$3.Text, { size: "p4", onClick: () => {
             setOpenCollectInfoPopup(true);
         }, color: "blue.6", style: {
             cursor: 'pointer',
@@ -1039,7 +983,7 @@ const MailIcon = (props) => (React__default["default"].createElement("svg", Obje
         React__default["default"].createElement("clipPath", { id: "clip0_869_25628" },
             React__default["default"].createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
 
-const StyledPhone = styled__default["default"](index$3.Phone) `
+const StyledPhone = styled__default["default"](index$4.Phone) `
   position: relative;
   .PhoneInputCountry {
     background: unset;
@@ -1070,7 +1014,7 @@ const SSOFirstScreen = ({ hidden }) => {
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale, onClose } = useSSOState();
-    const { addStep, goNext, setShareData } = useSSOSteps();
+    const { addStep, goNext, setShareData } = store.useSSOSteps();
     const handleLoginBySocial = (credential, provider) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _c, _d, _e, _f, _g;
         const res = yield loginBySocial(credential, provider);
@@ -1092,7 +1036,7 @@ const SSOFirstScreen = ({ hidden }) => {
                                     birthday: response.birthday, // "MM/DD/YYYY"
                                 } })));
                             addStep({
-                                type: SSOStepTypeType.SETUP_FULL,
+                                type: store.SSOStepTypeType.SETUP_FULL,
                                 config: {
                                     userInfo: userInfo._data,
                                 },
@@ -1102,7 +1046,7 @@ const SSOFirstScreen = ({ hidden }) => {
                     }
                     else {
                         addStep({
-                            type: SSOStepTypeType.SETUP_FULL,
+                            type: store.SSOStepTypeType.SETUP_FULL,
                             config: {
                                 userInfo: userInfo._data,
                             },
@@ -1114,7 +1058,7 @@ const SSOFirstScreen = ({ hidden }) => {
                     !((_e = userInfo._data) === null || _e === void 0 ? void 0 : _e.phone)) {
                     setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'verify-phone' })));
                     addStep({
-                        type: SSOStepTypeType.VERIFY_PHONE,
+                        type: store.SSOStepTypeType.VERIFY_PHONE,
                     });
                     goNext();
                 }
@@ -1172,7 +1116,7 @@ const SSOFirstScreen = ({ hidden }) => {
             if ((_j = userExist._data) === null || _j === void 0 ? void 0 : _j.is_pass) {
                 setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'login' })));
                 addStep({
-                    type: SSOStepTypeType.PASSWORD,
+                    type: store.SSOStepTypeType.PASSWORD,
                     config: {
                         phone,
                     },
@@ -1193,7 +1137,7 @@ const SSOFirstScreen = ({ hidden }) => {
                 }
                 setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
                 addStep({
-                    type: SSOStepTypeType.OTP,
+                    type: store.SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-zalo',
@@ -1223,7 +1167,7 @@ const SSOFirstScreen = ({ hidden }) => {
             if ((_o = userExist._data) === null || _o === void 0 ? void 0 : _o.is_pass) {
                 setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'login' })));
                 addStep({
-                    type: SSOStepTypeType.PASSWORD,
+                    type: store.SSOStepTypeType.PASSWORD,
                     config: {
                         phone,
                     },
@@ -1244,7 +1188,7 @@ const SSOFirstScreen = ({ hidden }) => {
                 }
                 setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
                 addStep({
-                    type: SSOStepTypeType.OTP,
+                    type: store.SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-sms',
@@ -1264,7 +1208,7 @@ const SSOFirstScreen = ({ hidden }) => {
             authFlow: 'register',
         });
         addStep({
-            type: SSOStepTypeType.EMAIL,
+            type: store.SSOStepTypeType.EMAIL,
         });
         goNext();
     };
@@ -1298,19 +1242,19 @@ const SSOFirstScreen = ({ hidden }) => {
             height: '100%',
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, "Sign in or Sign up"),
-            React__default["default"].createElement(index$2.Text, { size: "p4" }, "Continue with your phone number, email or your socials to log in or sign up.")),
+            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Sign in or Sign up"),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, "Continue with your phone number, email or your socials to log in or sign up.")),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 16 },
-                React__default["default"].createElement(index$3.Input.Wrapper, { error: errMsg },
+                React__default["default"].createElement(index$4.Input.Wrapper, { error: errMsg },
                     React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
-                React__default["default"].createElement(index$1.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
-                React__default["default"].createElement(index$1.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS")),
+                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
+                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS")),
             React__default["default"].createElement(core.Stack, { spacing: 16, align: "center" },
-                React__default["default"].createElement(index$2.Text, { size: "p4" }, "Or continue with"),
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Or continue with"),
                 React__default["default"].createElement(core.Group, { spacing: 24 },
                     React__default["default"].createElement("script", { src: "https://accounts.google.com/gsi/client", async: true }),
-                    React__default["default"].createElement(index$1.Button, { variant: "white", style: {
+                    React__default["default"].createElement(index$2.Button, { variant: "white", style: {
                             width: 48,
                             height: 48,
                             padding: 12,
@@ -1318,7 +1262,7 @@ const SSOFirstScreen = ({ hidden }) => {
                             borderRadius: '100%',
                         }, onClick: onTriggerGoogleLogin },
                         React__default["default"].createElement(Google.Google, { style: { width: 24, height: 24 } })),
-                    React__default["default"].createElement(index$1.Button, { variant: "white", style: {
+                    React__default["default"].createElement(index$2.Button, { variant: "white", style: {
                             width: 48,
                             height: 48,
                             padding: 12,
@@ -1326,7 +1270,7 @@ const SSOFirstScreen = ({ hidden }) => {
                             borderRadius: '100%',
                         }, onClick: onTriggerFacebookLogin },
                         React__default["default"].createElement(Google.Facebook, { style: { width: 24, height: 24 } })),
-                    React__default["default"].createElement(index$1.Button, { variant: "white", style: {
+                    React__default["default"].createElement(index$2.Button, { variant: "white", style: {
                             width: 48,
                             height: 48,
                             padding: 12,
@@ -1341,17 +1285,17 @@ const SSOFirstScreen = ({ hidden }) => {
                 },
             }) },
             React__default["default"].createElement(CollectInfoText, null),
-            React__default["default"].createElement(index$2.Text, { size: "p5", color: "gray.6" },
+            React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6" },
                 "By tapping continue, I confirm that I have read, understand and agree to the",
                 ' ',
-                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_a = index$4.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
+                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_a = index$5.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
                         color: '#262626',
                         textDecoration: 'underline',
                     } }, "Privacy Policy"),
                 ' ',
                 "and the",
                 ' ',
-                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_b = index$4.STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
+                React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_b = index$5.STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
                         color: '#262626',
                         textDecoration: 'underline',
                     } }, "Terms of Service"),
@@ -1359,15 +1303,39 @@ const SSOFirstScreen = ({ hidden }) => {
                 "of Hello Health Group."))));
 };
 
+const initSendUpdateEmailOtp = (email) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('email', email);
+    return fetchSSOV2Api(SSO_V2_PATHS.ECOM_CARE.SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const resendUpdateEmailOTP = () => tslib_es6.__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,
+    });
+});
+const verifyUpdateEmailOTP = (otpCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('code', otpCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.ECOM_CARE.VERIFY_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+
 const SSOOTPScreen = ({ hidden, index, }) => {
     const { onClose } = useSSOState();
-    const { steps, setSteps, addStep, goNext } = useSSOSteps();
+    const { steps, setSteps, addStep, goNext } = store.useSSOSteps();
     const [otp, setOtp] = React__default["default"].useState('');
     const [error, setError] = React__default["default"].useState('');
     const currentStepIndex = index;
     const currentStep = steps[currentStepIndex];
     const { phone, email, otpType, isUpdatePhone, afterAction, setupData } = currentStep.config;
-    const isEmail = otpType === 'email';
+    const isEmail = otpType === 'email' || otpType === 'update-email';
     const sendOTPCode = (checkResend) => {
         if (checkResend && resendTime > 0)
             return;
@@ -1391,6 +1359,9 @@ const SSOOTPScreen = ({ hidden, index, }) => {
             else if (otpType === 'email') {
                 resendEmailOTP(email);
             }
+            else if (otpType === 'update-email') {
+                resendUpdateEmailOTP();
+            }
         }
         setupResendTimer();
     };
@@ -1415,7 +1386,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                         return;
                     }
                     addStep({
-                        type: SSOStepTypeType.SETUP_FULL,
+                        type: store.SSOStepTypeType.SETUP_FULL,
                         config: {
                             phone,
                             userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
@@ -1454,16 +1425,23 @@ const SSOOTPScreen = ({ hidden, index, }) => {
         else if (otpType === 'email') {
             res = yield verifyByEmailOTP(email, otp);
         }
+        else if (otpType === 'update-email') {
+            res = yield verifyUpdateEmailOTP(otp);
+        }
         if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
             setOtp('');
             // log error
             setError(((_d = res._messages) === null || _d === void 0 ? void 0 : _d[0]) || 'API error');
             return;
         }
+        if (otpType === 'update-email') {
+            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+            return;
+        }
         handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
         if (afterAction === 'forgot') {
             addStep({
-                type: SSOStepTypeType.FORGOT_PASSWORD_SETUP,
+                type: store.SSOStepTypeType.FORGOT_PASSWORD_SETUP,
             });
             goNext();
         }
@@ -1475,7 +1453,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                 return;
             }
             addStep({
-                type: SSOStepTypeType.SETUP_FULL,
+                type: store.SSOStepTypeType.SETUP_FULL,
                 config: {
                     phone,
                     userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
@@ -1524,8 +1502,8 @@ const SSOOTPScreen = ({ hidden, index, }) => {
             submitOtp();
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, isEmail ? 'Verify Email' : 'Verify Phone Number'),
-            React__default["default"].createElement(index$2.Text, { size: "p4" }, isEmail ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, isEmail ? 'Verify Email' : 'Verify Phone Number'),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, isEmail ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                 "Enter the 6-digit OTP sent to your email ",
                 React__default["default"].createElement("b", null, email),
                 ".")) : (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -1537,21 +1515,21 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                 ". OTP code will expire in ",
                 React__default["default"].createElement("b", null, "10 mins"))))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
-            React__default["default"].createElement(index$3.Input.Wrapper, { error: error },
-                React__default["default"].createElement(index$3.OTP, { value: otp, onChange: (otp) => setOtp(String(otp)) })),
+            React__default["default"].createElement(index$4.Input.Wrapper, { error: error },
+                React__default["default"].createElement(index$4.OTP, { value: otp, onChange: (otp) => setOtp(String(otp)) })),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
-                React__default["default"].createElement(index$2.Text, { size: "p4" }, "Didn\u2019t receive the code?"),
-                React__default["default"].createElement(index$2.Text, { style: {
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Didn\u2019t receive the code?"),
+                React__default["default"].createElement(index$3.Text, { style: {
                         pointerEvents: resendTime > 0 ? 'none' : 'auto',
                         cursor: resendTime > 0 ? 'not-allowed' : 'pointer',
                     }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) },
                     "Resend (",
                     resendTime,
                     ")"))),
-        React__default["default"].createElement(index$1.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Continue"),
-        !isEmail && (React__default["default"].createElement(index$1.Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true },
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Continue"),
+        !isEmail && (React__default["default"].createElement(index$2.Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true },
             "Send OTP Code via ",
             otpType === 'phone-sms' ? 'Zalo' : 'SMS'))));
 };
@@ -1560,7 +1538,7 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
     var _a, _b;
     const { onClose } = useSSOState();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
-    const { steps, addStep, goNext, setShareData } = useSSOSteps();
+    const { steps, addStep, goNext, setShareData } = store.useSSOSteps();
     const thisStep = steps[index];
     const phone = (_a = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _a === void 0 ? void 0 : _a.phone;
     const email = (_b = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _b === void 0 ? void 0 : _b.email;
@@ -1568,7 +1546,7 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
         var _c, _d;
         if (phone) {
             addStep({
-                type: SSOStepTypeType.FORGOT_PASSWORD_PHONE,
+                type: store.SSOStepTypeType.FORGOT_PASSWORD_PHONE,
             });
         }
         else {
@@ -1586,7 +1564,7 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
                     return;
                 }
                 addStep({
-                    type: SSOStepTypeType.OTP,
+                    type: store.SSOStepTypeType.OTP,
                     config: {
                         email,
                         otpType: 'email',
@@ -1608,7 +1586,7 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
                     authFlow: 'verify-phone',
                 });
                 addStep({
-                    type: SSOStepTypeType.VERIFY_PHONE,
+                    type: store.SSOStepTypeType.VERIFY_PHONE,
                 });
                 goNext();
                 return;
@@ -1654,28 +1632,28 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
             }
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" },
+            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" },
                 "Welcome back!",
                 React__default["default"].createElement("br", null),
                 "Enter your password"),
-            React__default["default"].createElement(index$2.Text, { size: "p4" }, "\u0110\u0103ng nh\u1EADp b\u1EB1ng m\u1EADt kh\u1EA9u c\u1EE7a b\u1EA1n.")),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, "\u0110\u0103ng nh\u1EADp b\u1EB1ng m\u1EADt kh\u1EA9u c\u1EE7a b\u1EA1n.")),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
-            React__default["default"].createElement(index$3.PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined }),
+            React__default["default"].createElement(index$4.PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined }),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
-                React__default["default"].createElement(index$2.Text, { size: "p4" }, "Forgot Password?"),
-                React__default["default"].createElement(index$2.Text, { size: "s4", color: "blue.6", style: {
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Forgot Password?"),
+                React__default["default"].createElement(index$3.Text, { size: "s4", color: "blue.6", style: {
                         cursor: 'pointer',
                     }, onClick: resetPassword }, "Reset"))),
-        React__default["default"].createElement(index$1.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Sign In")));
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, "Sign In")));
 };
 
 const SSOPasswordForgotPhone = ({ hidden, }) => {
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale } = useSSOState();
-    const { addStep, goNext, setShareData } = useSSOSteps();
+    const { addStep, goNext, setShareData } = store.useSSOSteps();
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
         const { areaCode, phoneNumber } = splitPhone(phone);
@@ -1697,7 +1675,7 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             }
             setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
             addStep({
-                type: SSOStepTypeType.OTP,
+                type: store.SSOStepTypeType.OTP,
                 config: {
                     phone,
                     otpType: 'phone-zalo',
@@ -1731,7 +1709,7 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             }
             setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
             addStep({
-                type: SSOStepTypeType.OTP,
+                type: store.SSOStepTypeType.OTP,
                 config: {
                     phone,
                     otpType: 'phone-sms',
@@ -1748,13 +1726,13 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             display: hidden ? 'none' : 'block',
         } },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, "Reset password"),
-            React__default["default"].createElement(index$2.Text, { size: "p4" }, "Please provide the phone number you used to create your account.")),
+            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Reset password"),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, "Please provide the phone number you used to create your account.")),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 16 },
             React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true }),
-            errMsg && (React__default["default"].createElement(index$2.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default["default"].createElement(index$1.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
-            React__default["default"].createElement(index$1.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS"))));
+            errMsg && (React__default["default"].createElement(index$3.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
+            React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
+            React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS"))));
 };
 
 const CheckGrayIcon = () => (React__default["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1776,21 +1754,21 @@ const SSOPasswordWithConfirm = (_a) => {
         setAtLeastOneUpper(!!password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/));
     }, [password]);
     return (React__default["default"].createElement(core.Stack, Object.assign({ spacing: 12 }, props),
-        React__default["default"].createElement(index$3.PasswordInput, Object.assign({ name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", label: "Password", required: true, withAsterisk: true }, form.getInputProps('password'))),
+        React__default["default"].createElement(index$4.PasswordInput, Object.assign({ name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", label: "Password", required: true, withAsterisk: true }, form.getInputProps('password'))),
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$2.Text, { size: "n1" },
+            React__default["default"].createElement(index$3.Text, { size: "n1" },
                 atLeast8Chars ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
                 ' ',
                 "At least 8 characters."),
-            React__default["default"].createElement(index$2.Text, { size: "n1" },
+            React__default["default"].createElement(index$3.Text, { size: "n1" },
                 atLeastOneUpper ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
                 ' ',
                 "At least one uppercase letter, one lowercase letter, and one number.")),
-        React__default["default"].createElement(index$3.PasswordInput, Object.assign({ name: "confirm-password", placeholder: "X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u", label: "Confirm Password", required: true, withAsterisk: true }, form.getInputProps('confirmPassword')))));
+        React__default["default"].createElement(index$4.PasswordInput, Object.assign({ name: "confirm-password", placeholder: "X\u00E1c nh\u1EADn m\u1EADt kh\u1EA9u", label: "Confirm Password", required: true, withAsterisk: true }, form.getInputProps('confirmPassword')))));
 };
 
 const SSOPasswordForgotSetup = ({ hidden }) => {
-    const { steps, setSteps, goBack, currentStepIndex, addStep, goNext } = useSSOSteps();
+    const { steps, setSteps, goBack, currentStepIndex, addStep, goNext } = store.useSSOSteps();
     const form$1 = form.useForm({
         validate: form.yupResolver(yup__namespace.object().shape({
             password: yup__namespace
@@ -1821,8 +1799,8 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
                     message: 'Password has been reset successfully',
                 });
                 // back to login step
-                const foundPasswordIndex = steps.findIndex((step) => step.type === SSOStepTypeType.PASSWORD);
-                const foundPasswordStep = steps.find((step) => step.type === SSOStepTypeType.PASSWORD);
+                const foundPasswordIndex = steps.findIndex((step) => step.type === store.SSOStepTypeType.PASSWORD);
+                const foundPasswordStep = steps.find((step) => step.type === store.SSOStepTypeType.PASSWORD);
                 if (foundPasswordIndex === -1 || !foundPasswordStep) {
                     // reset to first step
                     setSteps((s) => [s[0]]);
@@ -1852,18 +1830,18 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
         }, onSubmit: form$1.onSubmit(onSubmit) },
         React__default["default"].createElement(core.Stack, { spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 8 },
-                React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, "Setup your password"),
-                React__default["default"].createElement(index$2.Text, { size: "p4" }, "Set up your login password and other details to complete the registration process.")),
+                React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Setup your password"),
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Set up your login password and other details to complete the registration process.")),
             React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1 }),
             React__default["default"].createElement(CollectInfoText, null),
-            React__default["default"].createElement(index$1.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true }, "Save"))));
+            React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true }, "Save"))));
 };
 
 const SSOPhoneVerify = ({ hidden, }) => {
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale } = useSSOState();
-    const { addStep, goNext } = useSSOSteps();
+    const { addStep, goNext } = store.useSSOSteps();
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         const { areaCode, phoneNumber } = splitPhone(phone);
@@ -1876,7 +1854,7 @@ const SSOPhoneVerify = ({ hidden, }) => {
                     return;
                 }
                 addStep({
-                    type: SSOStepTypeType.OTP,
+                    type: store.SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-zalo',
@@ -1906,7 +1884,7 @@ const SSOPhoneVerify = ({ hidden, }) => {
                     return;
                 }
                 addStep({
-                    type: SSOStepTypeType.OTP,
+                    type: store.SSOStepTypeType.OTP,
                     config: {
                         phone,
                         otpType: 'phone-sms',
@@ -1929,13 +1907,13 @@ const SSOPhoneVerify = ({ hidden, }) => {
         } },
         React__default["default"].createElement(core.Stack, { spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 8 },
-                React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, "Verify Phone Number"),
-                React__default["default"].createElement(index$2.Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
+                React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Verify Phone Number"),
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
             React__default["default"].createElement(core.Stack, { spacing: 16 },
-                React__default["default"].createElement(index$3.Input.Wrapper, { error: errMsg },
+                React__default["default"].createElement(index$4.Input.Wrapper, { error: errMsg },
                     React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
-                React__default["default"].createElement(index$1.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
-                React__default["default"].createElement(index$1.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS")),
+                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, "Continue with Zalo"),
+                React__default["default"].createElement(index$2.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, "Continue with SMS")),
             React__default["default"].createElement(CollectInfoText, null))));
 };
 
@@ -1973,13 +1951,13 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
     const { locale = 'vi-VN' } = useSSOState();
     return (React__default["default"].createElement(core.Stack, { spacing: 12 },
         needPhone && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(index$3.Input.Wrapper, Object.assign({ label: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i", withAsterisk: true }, form.getInputProps('phone')),
+            React__default["default"].createElement(index$4.Input.Wrapper, Object.assign({ label: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i", withAsterisk: true }, form.getInputProps('phone')),
                 React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: form.getInputProps('phone').value, onChange: (value) => {
                         form.setFieldValue('phone', value);
                     }, isError: !!form.getInputProps('phone').error, required: true, name: "phone" })),
             React__default["default"].createElement(core.Group, { spacing: 24 },
-                React__default["default"].createElement(index$2.Text, { size: "p4" }, "Nh\u1EADn OTP qua"),
-                React__default["default"].createElement(index$3.Radio.Group, Object.assign({ name: "otpMethod", styles: {
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Nh\u1EADn OTP qua"),
+                React__default["default"].createElement(index$4.Radio.Group, Object.assign({ name: "otpMethod", styles: {
                         root: {
                             display: 'flex',
                             flexDirection: 'row',
@@ -1987,21 +1965,21 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                             gap: 24,
                         },
                     } }, form.getInputProps('otpMethod')),
-                    React__default["default"].createElement(index$3.Radio, { value: "zalo", label: "Zalo", styles: {
+                    React__default["default"].createElement(index$4.Radio, { value: "zalo", label: "Zalo", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
                         } }),
-                    React__default["default"].createElement(index$3.Radio, { value: "sms", label: "SMS", styles: {
+                    React__default["default"].createElement(index$4.Radio, { value: "sms", label: "SMS", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
                         } }))))),
-        needEmail && (React__default["default"].createElement(index$3.Input, Object.assign({ name: "email", type: "email", label: "Email", disabled: isEmailDisable }, form.getInputProps('email')))),
-        React__default["default"].createElement(index$3.Input, Object.assign({ name: "name", label: "Name", withAsterisk: true, required: true, placeholder: "Enter your name" }, form.getInputProps('name'))),
-        React__default["default"].createElement(index$3.Input.Wrapper, Object.assign({ label: "Gender", withAsterisk: true }, form.getInputProps('gender')),
+        needEmail && (React__default["default"].createElement(index$4.Input, Object.assign({ name: "email", type: "email", label: "Email", disabled: isEmailDisable }, form.getInputProps('email')))),
+        React__default["default"].createElement(index$4.Input, Object.assign({ name: "name", label: "Name", withAsterisk: true, required: true, placeholder: "Enter your name" }, form.getInputProps('name'))),
+        React__default["default"].createElement(index$4.Input.Wrapper, Object.assign({ label: "Gender", withAsterisk: true }, form.getInputProps('gender')),
             React__default["default"].createElement(core.Group, null,
-                React__default["default"].createElement(index$1.Button, { type: "button", styles: {
+                React__default["default"].createElement(index$2.Button, { type: "button", styles: {
                         root: {
                             flex: 1,
                         },
@@ -2016,7 +1994,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
                     }, leftIcon: React__default["default"].createElement(FemaleIcon, null) }, "Female"),
-                React__default["default"].createElement(index$1.Button, { type: "button", styles: {
+                React__default["default"].createElement(index$2.Button, { type: "button", styles: {
                         root: {
                             flex: 1,
                         },
@@ -2031,12 +2009,12 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
                     }, leftIcon: React__default["default"].createElement(MaleIcon, null) }, "Male"))),
-        React__default["default"].createElement(index$5.DatePicker, Object.assign({ name: "dob", label: "Birthday", withAsterisk: true, required: true, placeholder: "Enter your birthday", maxDate: new Date() }, form.getInputProps('dob')))));
+        React__default["default"].createElement(index$6.DatePicker, Object.assign({ name: "dob", label: "Birthday", withAsterisk: true, required: true, placeholder: "Enter your birthday", maxDate: new Date() }, form.getInputProps('dob')))));
 };
 
 const SSOSetupScreen = ({ hidden, index, }) => {
     const { onClose } = useSSOState();
-    const { goNext, steps, addStep, shareData } = useSSOSteps();
+    const { goNext, steps, addStep, shareData } = store.useSSOSteps();
     const { setupSource } = store.useSSOV2Store();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const currentStep = steps[index];
@@ -2144,7 +2122,7 @@ const SSOSetupScreen = ({ hidden, index, }) => {
                         return;
                     }
                     addStep({
-                        type: SSOStepTypeType.OTP,
+                        type: store.SSOStepTypeType.OTP,
                         config: {
                             phone,
                             otpType: 'phone-zalo',
@@ -2162,7 +2140,7 @@ const SSOSetupScreen = ({ hidden, index, }) => {
                         return;
                     }
                     addStep({
-                        type: SSOStepTypeType.OTP,
+                        type: store.SSOStepTypeType.OTP,
                         config: {
                             phone,
                             otpType: 'phone-sms',
@@ -2208,49 +2186,96 @@ const SSOSetupScreen = ({ hidden, index, }) => {
         }, onSubmit: form$1.onSubmit(onSubmit) },
         React__default["default"].createElement(core.Stack, { spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 8 },
-                React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, "Almost done!"),
-                React__default["default"].createElement(index$2.Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
+                React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Almost done!"),
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, "Please provide additional information to complete the account registration process.")),
             needPass && React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1 }),
             React__default["default"].createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form$1 }),
             React__default["default"].createElement(CollectInfoText, null),
-            errMsg && (React__default["default"].createElement(index$2.Text, { color: "red.6", size: "p4" }, errMsg)),
-            React__default["default"].createElement(index$1.Button, { type: "submit", variant: "primary", fullWidth: true }, needPhone
+            errMsg && (React__default["default"].createElement(index$3.Text, { color: "red.6", size: "p4" }, errMsg)),
+            React__default["default"].createElement(index$2.Button, { type: "submit", variant: "primary", fullWidth: true }, needPhone
                 ? 'Verify Phone Number'
                 : authFlow === 'register'
                     ? 'Create new account'
                     : 'Save'))));
 };
 
+const SSOUpdateEmailScreen = ({ hidden, }) => {
+    const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const { addStep, goNext, setShareData } = store.useSSOSteps();
+    return (React__default["default"].createElement("form", { style: {
+            display: hidden ? 'none' : 'block',
+        }, onSubmit: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            e.preventDefault();
+            const email = e.currentTarget.email.value;
+            const existRes = yield checkUserExist({ email });
+            if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
+                if (!existRes._data) {
+                    setShareData({
+                        authMethod: 'mail',
+                        authFlow: 'verify-mail',
+                    });
+                    const res = yield initSendUpdateEmailOtp(email);
+                    if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                        setErrMsg(((_a = res._messages) === null || _a === void 0 ? void 0 : _a[0]) || 'API error');
+                        return;
+                    }
+                    addStep({
+                        type: store.SSOStepTypeType.OTP,
+                        config: {
+                            email,
+                            otpType: 'update-email',
+                        },
+                    });
+                    goNext();
+                }
+                else {
+                    setErrMsg('Email đã tồn tại');
+                }
+            }
+            else {
+                setErrMsg(((_b = existRes._messages) === null || _b === void 0 ? void 0 : _b[0]) || 'api error');
+            }
+        }) },
+        React__default["default"].createElement(core.Stack, { spacing: 8 },
+            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, "Update Your Email"),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, "Please update and verify your email to continue using our services.")),
+        React__default["default"].createElement(index$4.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
+        React__default["default"].createElement(index$2.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, "Verify Your Email")));
+};
+
 const SSOScreenRenderer = () => {
-    const { steps, currentStepIndex } = useSSOSteps();
+    const { steps, currentStepIndex } = store.useSSOSteps();
     return (React__default["default"].createElement(React__default["default"].Fragment, null, steps.map((step, index) => {
         const isCurrentStep = index === currentStepIndex;
         const key = `${step.type}-${index}`;
         switch (step.type) {
-            case SSOStepTypeType.FIRST:
+            case store.SSOStepTypeType.FIRST:
                 return React__default["default"].createElement(SSOFirstScreen, { key: key, hidden: !isCurrentStep });
-            case SSOStepTypeType.PASSWORD:
+            case store.SSOStepTypeType.PASSWORD:
                 return (React__default["default"].createElement(SSOPasswordScreen, { key: key, hidden: !isCurrentStep, index: index }));
-            case SSOStepTypeType.FORGOT_PASSWORD_PHONE:
+            case store.SSOStepTypeType.FORGOT_PASSWORD_PHONE:
                 return (React__default["default"].createElement(SSOPasswordForgotPhone, { key: key, hidden: !isCurrentStep, index: index }));
-            case SSOStepTypeType.FORGOT_PASSWORD_SETUP:
+            case store.SSOStepTypeType.FORGOT_PASSWORD_SETUP:
                 return React__default["default"].createElement(SSOPasswordForgotSetup, { key: key, hidden: !isCurrentStep });
-            case SSOStepTypeType.OTP:
+            case store.SSOStepTypeType.OTP:
                 const { phone, email, otpType } = step.config || {};
                 return (React__default["default"].createElement(SSOOTPScreen, { key: [key, phone, email, otpType].join('-'), hidden: !isCurrentStep, index: index }));
-            case SSOStepTypeType.EMAIL:
+            case store.SSOStepTypeType.EMAIL:
                 return (React__default["default"].createElement(SSOEmailScreen, { key: key, hidden: !isCurrentStep, index: index }));
-            case SSOStepTypeType.SETUP_FULL:
+            case store.SSOStepTypeType.SETUP_FULL:
                 return (React__default["default"].createElement(SSOSetupScreen, { key: key, hidden: !isCurrentStep, index: index }));
-            case SSOStepTypeType.VERIFY_PHONE:
+            case store.SSOStepTypeType.VERIFY_PHONE:
                 return (React__default["default"].createElement(SSOPhoneVerify, { key: key, hidden: !isCurrentStep, index: index }));
+            case store.SSOStepTypeType.UPDATE_EMAIL:
+                return (React__default["default"].createElement(SSOUpdateEmailScreen, { key: key, hidden: !isCurrentStep, index: index }));
             default:
                 return React__default["default"].createElement("div", { key: key }, "Not found");
         }
     })));
 };
 
-const SSOV2 = ({ onClose: onCloseProps, locale, defaultSteps, }) => {
+const SSOV2 = ({ onClose: onCloseProps, locale }) => {
     const { isOpen, setOpen, returnUrl, setMounted } = store.useSSOV2Store();
     React.useEffect(() => {
         setMounted(true);
@@ -2270,9 +2295,8 @@ const SSOV2 = ({ onClose: onCloseProps, locale, defaultSteps, }) => {
         onCloseProps === null || onCloseProps === void 0 ? void 0 : onCloseProps();
     };
     return (React__default["default"].createElement(SSOStateProvider, { onClose: onClose, locale: locale },
-        React__default["default"].createElement(SSOStepsProvider, { defaultSteps: defaultSteps },
-            React__default["default"].createElement(SSOPopupWrapper, { opened: true, onClose: onClose },
-                React__default["default"].createElement(SSOScreenRenderer, null)))));
+        React__default["default"].createElement(SSOPopupWrapper, { opened: true, onClose: onClose },
+            React__default["default"].createElement(SSOScreenRenderer, null))));
 };
 
 exports.useSSOV2Store = store.useSSOV2Store;