npm - @hhgtech/hhg-components - Versions diffs - 1.29.187 → 1.29.188 - Mend

@hhgtech/hhg-components 1.29.187 → 1.29.188

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (489) hide show

package/build/esm/ssoV2.js CHANGED Viewed

@@ -1,49 +1,49 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-a95a1380.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-fabffebd.js';
 import React__default, { createContext, useEffect } from 'react';
-import { I as Input, P as Phone, O as OTP, f as PasswordInput, R as Radio, E as ErrorBoundary } from './index-2a82a182.js';
+import { I as Input, P as Phone, O as OTP, f as PasswordInput, R as Radio, E as ErrorBoundary } from './index-18373462.js';
 import { ChevronLeft } from '@hhgtech/icons/arrow';
 import { Close } from '@hhgtech/icons/core';
-import { L as LogoIcon } from './logoIcon-fec701e8.js';
-import { B as Button } from './index-8b6d2388.js';
-import { M as Modal } from './index-118c2c8e.js';
-import { Stack, Group } from '@mantine/core';
+import { L as LogoIcon } from './logoIcon-19b961db.js';
+import { B as Button } from './index-9cce954f.js';
+import { M as Modal } from './index-3d03b664.js';
+import { Stack, LoadingOverlay, Group } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, S as STATIC_PAGES } from './index-c26ff0ab.js';
-import './index-ebe0e7c8.js';
-import './index-34dddec0.js';
-import { s as showNotification } from './useMantineLocale-9516e7f9.js';
-import { T as Text } from './index-15f27ddc.js';
-import { u as useTranslations } from './index-29dcf47d.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES } from './index-6a555c42.js';
+import './index-a02223d2.js';
+import './index-863dc32d.js';
+import { s as showNotification } from './useMantineLocale-d89aa467.js';
+import { T as Text } from './index-f56800e7.js';
+import { u as useTranslations } from './index-9312f46a.js';
 import '@mantine/hooks';
-import './utils-40ab4114.js';
-import './other-54672859.js';
-import './index-f24d5e3e.js';
-import { L as LOCALE } from './Locale-8d44445f.js';
-import { a as useSSOSteps, f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, b as SSOStepTypeType, d as allAvailableAreaCodes, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, e as updateUserInfo, r as resetPassword, u as useSSOV2Store, i as redirect } from './store-0e3bf0dd.js';
-export { u as useSSOV2Store } from './store-0e3bf0dd.js';
-import { G as Google, F as Facebook } from './Google-61e99a72.js';
+import './utils-a1df0ee3.js';
+import './other-1ccded8c.js';
+import './index-57ede743.js';
+import { L as LOCALE } from './Locale-90e9a3c9.js';
+import { a as useSSOSteps, f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, b as SSOStepTypeType, d as allAvailableAreaCodes, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, e as updateUserInfo, r as resetPassword, u as useSSOV2Store, i as redirect } from './store-c01b5c45.js';
+export { u as useSSOV2Store } from './store-c01b5c45.js';
+import { G as Google, F as Facebook } from './Google-e9a0164b.js';
 import styled from '@emotion/styled';
-import { M as MAPPED_LOCALE } from './utils-e8fc6daf.js';
+import { M as MAPPED_LOCALE } from './utils-a8196146.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-e64f8d68.js';
+import { D as DatePicker } from './index-9048db90.js';
 import '@hhgtech/icons/other';
-import './index.styles-9d9404ae.js';
+import './index.styles-29eadbd0.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './index-9ee1596f.js';
+import './index-f42c3988.js';
 import 'classnames';
-import './useUniqueId-4904bb63.js';
+import './useUniqueId-7a3045f0.js';
 import './constantsSite.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
 import '@mantine/notifications';
-import './translationsContext-45d92bdb.js';
+import './translationsContext-08e9c793.js';
 import 'zustand';
-import './normalizeLink-aa88d767.js';
+import './normalizeLink-76ffb98c.js';
 import './miscCookieHelper.js';
 const ConfirmClosePopup = ({ opened, onCancel, onClose, }) => {
@@ -346,6 +346,7 @@ const getErrorTextFromCode = (t, code) => {
 const SSOEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
+    const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
     const { addStep, goNext, setShareData } = useSSOSteps();
     return (React__default.createElement("form", { style: {
@@ -353,65 +354,73 @@ const SSOEmailScreen = ({ hidden, }) => {
         }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             e.preventDefault();
-            const email = e.currentTarget.email.value;
-            const existRes = yield checkUserExist({ email });
-            if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
-                const provider = (_a = existRes._data) === null || _a === void 0 ? void 0 : _a.provider;
-                if (provider === 'google' || provider === 'facebook') {
-                    setErrMsg(t('ssov2.useOtherMethod.email'));
-                    return;
-                }
-                if ((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.is_pass) {
-                    setShareData({
-                        authMethod: 'mail',
-                        authFlow: 'login',
-                    });
-                    // go to password screen
-                    addStep({
-                        type: SSOStepTypeType.PASSWORD,
-                        config: {
-                            email,
-                        },
-                    });
-                    goNext();
-                }
-                else {
-                    let res;
-                    setShareData({
-                        authMethod: 'mail',
-                        authFlow: 'register',
-                    });
-                    if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
-                        res = yield registerBySendEmailOTP(email);
+            setLoading(true);
+            try {
+                const email = e.currentTarget.email.value;
+                const existRes = yield checkUserExist({ email });
+                if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
+                    const provider = (_a = existRes._data) === null || _a === void 0 ? void 0 : _a.provider;
+                    if (provider === 'google' || provider === 'facebook') {
+                        setErrMsg(t('ssov2.useOtherMethod.email'));
+                        return setLoading(false);
                     }
-                    else {
-                        res = yield resendEmailOTP(email);
+                    if ((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.is_pass) {
+                        setShareData({
+                            authMethod: 'mail',
+                            authFlow: 'login',
+                        });
+                        // go to password screen
+                        addStep({
+                            type: SSOStepTypeType.PASSWORD,
+                            config: {
+                                email,
+                            },
+                        });
+                        goNext();
                     }
-                    if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                        return;
+                    else {
+                        let res;
+                        setShareData({
+                            authMethod: 'mail',
+                            authFlow: 'register',
+                        });
+                        if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
+                            res = yield registerBySendEmailOTP(email);
+                        }
+                        else {
+                            res = yield resendEmailOTP(email);
+                        }
+                        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);
+                        }
+                        // go to register screen
+                        addStep({
+                            type: SSOStepTypeType.OTP,
+                            config: {
+                                email,
+                                otpType: 'email',
+                                afterAction: 'setup',
+                            },
+                        });
+                        goNext();
                     }
-                    // go to register screen
-                    addStep({
-                        type: SSOStepTypeType.OTP,
-                        config: {
-                            email,
-                            otpType: 'email',
-                            afterAction: 'setup',
-                        },
-                    });
-                    goNext();
+                }
+                else {
+                    setErrMsg(getErrorTextFromCode(t, existRes === null || existRes === void 0 ? void 0 : existRes.code));
                 }
             }
-            else {
-                setErrMsg(getErrorTextFromCode(t, existRes === null || existRes === void 0 ? void 0 : existRes.code));
+            catch (e) {
+                console.error(e);
+                setErrMsg(getErrorTextFromCode(t, ''));
             }
+            setLoading(false);
         }) },
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.email.description'))),
-        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, t('ssov2.email.button'))));
+        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg('') }),
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, disabled: loading, loading: loading }, t('ssov2.email.button'))));
 };
 const splitPhone = (phone) => {
@@ -624,6 +633,8 @@ const SSOFirstScreen = ({ hidden }) => {
     const { locale, onClose } = useSSOState();
     const { addStep, goNext, setShareData } = useSSOSteps();
     const { t } = useTranslations();
+    const [loading, setLoading] = React__default.useState(false);
+    const [loadingOverlay, setLoadingOverlay] = React__default.useState(false);
     const handleLoginBySocial = (credential, provider) => __awaiter(void 0, void 0, void 0, function* () {
         var _c, _d, _e;
         const res = yield loginBySocial(credential, provider);
@@ -711,17 +722,18 @@ const SSOFirstScreen = ({ hidden }) => {
     }, []);
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
         var _f, _g;
+        setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
             setErrMsg(t('ssov2.validate.phone.required'));
-            return;
+            return setLoading(false);
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
             const provider = (_f = userExist._data) === null || _f === void 0 ? void 0 : _f.provider;
             if (provider === 'google' || provider === 'facebook') {
                 setErrMsg(t('ssov2.useOtherMethod.phone'));
-                return;
+                return setLoading(false);
             }
             setShareData({
                 authMethod: 'phone',
@@ -746,7 +758,7 @@ const SSOFirstScreen = ({ hidden }) => {
                 }
                 if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
                     setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                    return;
+                    return setLoading(false);
                 }
                 setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
                 addStep({
@@ -763,20 +775,22 @@ const SSOFirstScreen = ({ hidden }) => {
         else {
             setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
+        setLoading(false);
     });
     const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
         var _h, _j;
+        setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
             setErrMsg(t('ssov2.validate.phone.required'));
-            return;
+            return setLoading(false);
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
             const provider = (_h = userExist._data) === null || _h === void 0 ? void 0 : _h.provider;
             if (provider === 'google' || provider === 'facebook') {
                 setErrMsg(t('ssov2.useOtherMethod.phone'));
-                return;
+                return setLoading(false);
             }
             setShareData({
                 authMethod: 'phone',
@@ -801,7 +815,7 @@ const SSOFirstScreen = ({ hidden }) => {
                 }
                 if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
                     setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                    return;
+                    return setLoading(false);
                 }
                 setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
                 addStep({
@@ -818,6 +832,7 @@ const SSOFirstScreen = ({ hidden }) => {
         else {
             setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
+        setLoading(false);
     });
     const onClickEmail = () => {
         setShareData({
@@ -830,26 +845,39 @@ const SSOFirstScreen = ({ hidden }) => {
         goNext();
     };
     const onTriggerGoogleLogin = () => {
+        setLoadingOverlay(true);
         const client = window.google.accounts.oauth2.initTokenClient({
             client_id: GoogleAuthClientId,
             scope: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid',
             ux_mode: 'popup',
-            callback: (response) => {
-                handleLoginBySocial(response.access_token, 'google');
+            callback: (response) => __awaiter(void 0, void 0, void 0, function* () {
+                if (response.access_token) {
+                    yield handleLoginBySocial(response.access_token, 'google');
+                }
+                else {
+                    setErrMsg(t('ssov2.error.googleLogin'));
+                }
+                setLoadingOverlay(false);
+            }),
+            error_callback: () => {
+                setErrMsg(t('ssov2.error.googleLogin'));
+                setLoadingOverlay(false);
             },
         });
         client === null || client === void 0 ? void 0 : client.requestAccessToken();
     };
     const onTriggerFacebookLogin = () => {
+        setLoadingOverlay(true);
         window.FB.login(function (response) {
             var _a;
             return __awaiter(this, void 0, void 0, function* () {
                 if ((_a = response === null || response === void 0 ? void 0 : response.authResponse) === null || _a === void 0 ? void 0 : _a.accessToken) {
-                    handleLoginBySocial(response.authResponse.accessToken, 'facebook');
+                    yield handleLoginBySocial(response.authResponse.accessToken, 'facebook');
                 }
                 else {
                     setErrMsg(t('ssov2.error.facebookLogin'));
                 }
+                setLoadingOverlay(false);
             });
         }, { scope: 'public_profile,email,user_gender,user_birthday' });
     };
@@ -858,15 +886,20 @@ const SSOFirstScreen = ({ hidden }) => {
             flexDirection: 'column',
             height: '100%',
         } },
+        React__default.createElement(LoadingOverlay, { visible: loadingOverlay, zIndex: 1000, overlayBlur: 1 }),
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.first.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.first.description'))),
         React__default.createElement(Stack, { mt: 24, spacing: 24 },
             React__default.createElement(Stack, { spacing: 16 },
-                React__default.createElement(Input.Wrapper, { error: errMsg },
-                    React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
-                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
-                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS'))),
+                React__default.createElement("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        onClickContinueZalo();
+                    } },
+                    React__default.createElement(Input.Wrapper, { error: errMsg },
+                        React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone", disabled: loading }))),
+                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, loading: loading, disabled: loading }, t('ssov2.button.continueZalo')),
+                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, loading: loading, disabled: loading }, t('ssov2.button.continueSMS'))),
             React__default.createElement(Stack, { spacing: 16, align: "center" },
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.orContinueWith')),
                 React__default.createElement(Group, { spacing: 24 },
@@ -941,6 +974,7 @@ const SSOOTPScreen = ({ hidden, index, }) => {
     const { t } = useTranslations();
     const { onClose } = useSSOState();
     const { steps, setSteps, addStep, goNext } = useSSOSteps();
+    const [loading, setLoading] = React__default.useState(false);
     const [otp, setOtp] = React__default.useState('');
     const [error, setError] = React__default.useState('');
     const currentStepIndex = index;
@@ -951,197 +985,225 @@ const SSOOTPScreen = ({ hidden, index, }) => {
         if (checkResend && resendTime > 0)
             return;
         // send otp code logic here
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        let res;
-        if (isUpdatePhone) {
-            if (otpType === 'phone-sms') {
-                res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
-            }
-            else if (otpType === 'phone-zalo') {
-                res = yield resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
-            }
-        }
-        else {
-            if (otpType === 'phone-sms') {
-                res = yield resendPhoneOTP(phoneNumber, areaCode);
-            }
-            else if (otpType === 'phone-zalo') {
-                res = yield resendZaloOTP(phoneNumber, areaCode);
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            let res;
+            if (isUpdatePhone) {
+                if (otpType === 'phone-sms') {
+                    res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
+                }
+                else if (otpType === 'phone-zalo') {
+                    res = yield resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
+                }
             }
-            else if (otpType === 'email') {
-                res = yield resendEmailOTP(email);
+            else {
+                if (otpType === 'phone-sms') {
+                    res = yield resendPhoneOTP(phoneNumber, areaCode);
+                }
+                else if (otpType === 'phone-zalo') {
+                    res = yield resendZaloOTP(phoneNumber, areaCode);
+                }
+                else if (otpType === 'email') {
+                    res = yield resendEmailOTP(email);
+                }
+                else if (otpType === 'update-email') {
+                    res = yield resendUpdateEmailOTP();
+                }
             }
-            else if (otpType === 'update-email') {
-                res = yield resendUpdateEmailOTP();
+            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                // log error
+                setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                return setLoading(false);
             }
+            setupResendTimer();
         }
-        if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-            // log error
-            setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-            return;
+        catch (e) {
+            console.error(e);
+            setError(getErrorTextFromCode(t, ''));
         }
-        setupResendTimer();
+        setLoading(false);
     });
     const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        // submit otp code logic here
-        if (isUpdatePhone) {
-            let res;
-            if (otpType === 'phone-sms') {
-                res = yield verifyUpdatePhoneOTP(areaCode, otp);
-            }
-            else if (otpType === 'phone-zalo') {
-                res = yield verifyUpdatePhoneZaloOTP(phoneNumber, areaCode, otp);
-            }
-            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                if (afterAction === 'setup') {
-                    const userInfo = yield getUserInfo();
-                    if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
-                        // log error
-                        setError(getErrorTextFromCode(t, userInfo === null || userInfo === void 0 ? void 0 : userInfo.code));
-                        return;
+        if (!otp || otp.length < 6) {
+            setError(t('ssov2.validate.otp.required'));
+            return;
+        }
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            // submit otp code logic here
+            if (isUpdatePhone) {
+                let res;
+                if (otpType === 'phone-sms') {
+                    res = yield verifyUpdatePhoneOTP(areaCode, otp);
+                }
+                else if (otpType === 'phone-zalo') {
+                    res = yield verifyUpdatePhoneZaloOTP(phoneNumber, areaCode, otp);
+                }
+                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                    if (afterAction === 'setup') {
+                        const userInfo = yield getUserInfo();
+                        if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
+                            // log error
+                            setError(getErrorTextFromCode(t, userInfo === null || userInfo === void 0 ? void 0 : userInfo.code));
+                            return setLoading(false);
+                        }
+                        // check if really need setup
+                        const noNeedSetup = ((_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) === null || _a === void 0 ? void 0 : _a.id) &&
+                            userInfo._data.phone &&
+                            userInfo._data.phone_verified_at &&
+                            userInfo._data.email &&
+                            // userInfo._data.email_verified_at &&
+                            !userInfo._data.email.includes('@hhg.com') &&
+                            userInfo._data.name &&
+                            userInfo._data.birthday &&
+                            (typeof userInfo._data.gender === 'number' ||
+                                typeof userInfo._data.gender === 'string');
+                        if (noNeedSetup) {
+                            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                            return;
+                        }
+                        addStep({
+                            type: SSOStepTypeType.SETUP_FULL,
+                            config: {
+                                phone,
+                                userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                            },
+                        });
+                        goNext();
                     }
-                    // check if really need setup
-                    const noNeedSetup = ((_a = userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) === null || _a === void 0 ? void 0 : _a.id) &&
-                        userInfo._data.phone &&
-                        userInfo._data.phone_verified_at &&
-                        userInfo._data.email &&
-                        // userInfo._data.email_verified_at &&
-                        !userInfo._data.email.includes('@hhg.com') &&
-                        userInfo._data.name &&
-                        userInfo._data.birthday &&
-                        (typeof userInfo._data.gender === 'number' ||
-                            typeof userInfo._data.gender === 'string');
-                    if (noNeedSetup) {
-                        onClose === null || onClose === void 0 ? void 0 : onClose(true);
-                        return;
+                    else if (afterAction === 'submitSetup') {
+                        const res = yield updateUserInfo(Object.assign(Object.assign({}, setupData), { 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 {
+                            // log error
+                            setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                        }
                     }
-                    addStep({
-                        type: SSOStepTypeType.SETUP_FULL,
-                        config: {
-                            phone,
-                            userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
-                        },
-                    });
-                    goNext();
-                }
-                else if (afterAction === 'submitSetup') {
-                    const res = yield updateUserInfo(Object.assign(Object.assign({}, setupData), { 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 if (afterAction === 'update-email') {
+                        addStep({
+                            type: SSOStepTypeType.UPDATE_EMAIL,
+                        });
+                        goNext();
                     }
                     else {
-                        // log error
-                        setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                        onClose === null || onClose === void 0 ? void 0 : onClose(true);
                     }
                 }
-                else if (afterAction === 'update-email') {
-                    addStep({
-                        type: SSOStepTypeType.UPDATE_EMAIL,
-                    });
-                    goNext();
-                }
                 else {
-                    onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                    // log error
+                    setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                 }
+                return setLoading(false);
             }
-            else {
+            let res;
+            if (otpType === 'phone-sms') {
+                res = yield verifyByPhoneOTP(phoneNumber, areaCode, otp);
+            }
+            else if (otpType === 'phone-zalo') {
+                res = yield verifyByZaloOTP(phoneNumber, areaCode, otp);
+            }
+            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(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                return setLoading(false);
             }
-            return;
-        }
-        let res;
-        if (otpType === 'phone-sms') {
-            res = yield verifyByPhoneOTP(phoneNumber, areaCode, otp);
-        }
-        else if (otpType === 'phone-zalo') {
-            res = yield verifyByZaloOTP(phoneNumber, areaCode, otp);
-        }
-        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(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-            return;
-        }
-        handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
-        // if (otpType === 'update-email') {
-        //   onClose?.(true)
-        //   return
-        // }
-        if (afterAction === 'forgot') {
-            addStep({
-                type: SSOStepTypeType.FORGOT_PASSWORD_SETUP,
-            });
-            goNext();
-        }
-        else if (afterAction === 'setup') {
-            const userInfo = yield getUserInfo();
-            if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
-                // log error
-                setError(getErrorTextFromCode(t, userInfo === null || userInfo === void 0 ? void 0 : userInfo.code));
-                return;
+            handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+            // if (otpType === 'update-email') {
+            //   onClose?.(true)
+            //   return
+            // }
+            if (afterAction === 'forgot') {
+                addStep({
+                    type: SSOStepTypeType.FORGOT_PASSWORD_SETUP,
+                });
+                goNext();
             }
-            // check if really need setup
-            const noNeedSetup = ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) === null || _b === void 0 ? void 0 : _b.id) &&
-                userInfo._data.phone &&
-                userInfo._data.phone_verified_at &&
-                userInfo._data.email &&
-                // userInfo._data.email_verified_at &&
-                !userInfo._data.email.includes('@hhg.com') &&
-                userInfo._data.name &&
-                userInfo._data.birthday &&
-                (typeof userInfo._data.gender === 'number' ||
-                    typeof userInfo._data.gender === 'string');
-            if (noNeedSetup) {
+            else if (afterAction === 'setup') {
+                const userInfo = yield getUserInfo();
+                if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) !== 1) {
+                    // log error
+                    setError(getErrorTextFromCode(t, userInfo === null || userInfo === void 0 ? void 0 : userInfo.code));
+                    return setLoading(false);
+                }
+                // check if really need setup
+                const noNeedSetup = ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) === null || _b === void 0 ? void 0 : _b.id) &&
+                    userInfo._data.phone &&
+                    userInfo._data.phone_verified_at &&
+                    userInfo._data.email &&
+                    // userInfo._data.email_verified_at &&
+                    !userInfo._data.email.includes('@hhg.com') &&
+                    userInfo._data.name &&
+                    userInfo._data.birthday &&
+                    (typeof userInfo._data.gender === 'number' ||
+                        typeof userInfo._data.gender === 'string');
+                if (noNeedSetup) {
+                    onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                    return setLoading(false);
+                }
+                addStep({
+                    type: SSOStepTypeType.SETUP_FULL,
+                    config: {
+                        phone,
+                        userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                    },
+                });
+                goNext();
+            }
+            else if (afterAction === 'update-email') {
+                addStep({
+                    type: SSOStepTypeType.UPDATE_EMAIL,
+                });
+                goNext();
+            }
+            else {
                 onClose === null || onClose === void 0 ? void 0 : onClose(true);
-                return;
             }
-            addStep({
-                type: SSOStepTypeType.SETUP_FULL,
-                config: {
-                    phone,
-                    userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
-                },
-            });
-            goNext();
-        }
-        else if (afterAction === 'update-email') {
-            addStep({
-                type: SSOStepTypeType.UPDATE_EMAIL,
-            });
-            goNext();
         }
-        else {
-            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+        catch (e) {
+            console.error(e);
+            setError(getErrorTextFromCode(t, ''));
         }
+        setLoading(false);
     });
     const swapZaloSms = () => __awaiter(void 0, void 0, void 0, function* () {
         if (isEmail)
             return;
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        const newType = otpType === 'phone-sms' ? 'phone-zalo' : 'phone-sms';
-        let res;
-        if (newType === 'phone-sms') {
-            res = yield resendPhoneOTP(phoneNumber, areaCode);
-        }
-        else {
-            res = yield resendZaloOTP(phoneNumber, areaCode);
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            const newType = otpType === 'phone-sms' ? 'phone-zalo' : 'phone-sms';
+            let res;
+            if (newType === 'phone-sms') {
+                res = yield resendPhoneOTP(phoneNumber, areaCode);
+            }
+            else {
+                res = yield resendZaloOTP(phoneNumber, areaCode);
+            }
+            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                return setLoading(false);
+            }
+            setSteps((s) => s.map((step, i) => i === currentStepIndex
+                ? Object.assign(Object.assign({}, step), { config: Object.assign(Object.assign({}, step.config), { otpType: newType }) }) : step));
         }
-        if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-            setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-            return;
+        catch (e) {
+            console.error(e);
+            setError(getErrorTextFromCode(t, ''));
         }
-        setSteps((s) => s.map((step, i) => i === currentStepIndex
-            ? Object.assign(Object.assign({}, step), { config: Object.assign(Object.assign({}, step.config), { otpType: newType }) }) : step));
+        setLoading(false);
     });
     const [resendTime, setResendTime] = React__default.useState(30);
     const setupResendTimer = () => {
@@ -1183,7 +1245,10 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                     } }))),
         React__default.createElement(Stack, { mt: 24, spacing: 8 },
             React__default.createElement(Input.Wrapper, { error: error },
-                React__default.createElement(OTP, { value: otp, onChange: (otp) => setOtp(String(otp)) })),
+                React__default.createElement(OTP, { value: otp, onChange: (otp) => {
+                        setOtp(String(otp));
+                        setError('');
+                    } })),
             React__default.createElement(Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -1194,8 +1259,8 @@ const SSOOTPScreen = ({ hidden, index, }) => {
                     }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) }, t('ssov2.otp.resendText', {
                     count: resendTime,
                 })))),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, t('ssov2.button.continue')),
-        !isEmail && (React__default.createElement(Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true }, t('ssov2.otp.sendVia', {
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.continue')),
+        !isEmail && (React__default.createElement(Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.otp.sendVia', {
             method: otpType === 'phone-sms' ? 'Zalo' : 'SMS',
         })))));
 };
@@ -1205,42 +1270,51 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
     const { t } = useTranslations();
     const { onClose } = useSSOState();
     const [errMsg, setErrMsg] = React__default.useState('');
+    const [loading, setLoading] = React__default.useState(false);
     const { steps, addStep, goNext, setShareData } = useSSOSteps();
     const thisStep = steps[index];
     const phone = (_a = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _a === void 0 ? void 0 : _a.phone;
     const email = (_b = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _b === void 0 ? void 0 : _b.email;
     const resetPassword = () => __awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        if (phone) {
-            addStep({
-                type: SSOStepTypeType.FORGOT_PASSWORD_PHONE,
-            });
-        }
-        else {
-            const existRes = yield checkUserExist({ email });
-            if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
-                let res;
-                if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
-                    res = yield registerBySendEmailOTP(email);
-                }
-                else {
-                    res = yield resendEmailOTP(email);
-                }
-                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(true);
+        try {
+            if (phone) {
                 addStep({
-                    type: SSOStepTypeType.OTP,
-                    config: {
-                        email,
-                        otpType: 'email',
-                        afterAction: 'forgot',
-                    },
+                    type: SSOStepTypeType.FORGOT_PASSWORD_PHONE,
                 });
             }
+            else {
+                const existRes = yield checkUserExist({ email });
+                if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
+                    let res;
+                    if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
+                        res = yield registerBySendEmailOTP(email);
+                    }
+                    else {
+                        res = yield resendEmailOTP(email);
+                    }
+                    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: {
+                            email,
+                            otpType: 'email',
+                            afterAction: 'forgot',
+                        },
+                    });
+                }
+            }
+            goNext();
         }
-        goNext();
+        catch (e) {
+            setErrMsg(getErrorTextFromCode(t, ''));
+            console.error(e);
+        }
+        setLoading(false);
     });
     const onAuthSuccess = (data) => __awaiter(void 0, void 0, void 0, function* () {
         var _d, _e;
@@ -1263,39 +1337,32 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
     });
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
-        }, onSubmit: (e) => {
+        }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
             e.preventDefault();
-            const password = e.currentTarget.password.value;
-            // call api to login with email and password, if fail then show error
-            if (phone) {
-                loginByPhonePassword(phone, password)
-                    .then((res) => {
-                    if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                        onAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
-                    }
-                    else {
-                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                    }
-                })
-                    .catch(() => {
-                    setErrMsg(getErrorTextFromCode(t, ''));
-                });
+            setLoading(true);
+            try {
+                const password = e.currentTarget.password.value;
+                // call api to login with email and password, if fail then show error
+                let res;
+                if (phone) {
+                    res = yield loginByPhonePassword(phone, password);
+                }
+                else {
+                    res = yield loginByEmailPassword(email, password);
+                }
+                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                    yield onAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                }
+                else {
+                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                }
             }
-            else {
-                loginByEmailPassword(email, password)
-                    .then((res) => {
-                    if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                        onAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
-                    }
-                    else {
-                        setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                    }
-                })
-                    .catch(() => {
-                    setErrMsg(getErrorTextFromCode(t, ''));
-                });
+            catch (e) {
+                setErrMsg(getErrorTextFromCode(t, ''));
+                console.error(e);
             }
-        } },
+            setLoading(false);
+        }) },
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" },
                 t('ssov2.password.title1'),
@@ -1303,7 +1370,7 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
                 t('ssov2.password.title2')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.password.description'))),
         React__default.createElement(Stack, { mt: 24, spacing: 8 },
-            React__default.createElement(PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg('') }),
+            React__default.createElement(PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg(''), disabled: loading, required: true }),
             React__default.createElement(Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -1311,90 +1378,107 @@ const SSOPasswordScreen = ({ hidden, index, }) => {
                 React__default.createElement(Text, { size: "s4", color: "blue.6", style: {
                         cursor: 'pointer',
                     }, onClick: resetPassword }, t('ssov2.password.reset')))),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, t('ssov2.password.signIn'))));
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.password.signIn'))));
 };
 const SSOPasswordForgotPhone = ({ hidden, }) => {
     const { t } = useTranslations();
     const [phone, setPhone] = React__default.useState('');
     const [errMsg, setErrMsg] = React__default.useState('');
+    const [loading, setLoading] = React__default.useState(false);
     const { locale } = useSSOState();
     const { addStep, goNext, setShareData } = useSSOSteps();
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        if (!areaCode || !phoneNumber || !phone) {
-            setErrMsg(t('ssov2.validate.phone.required'));
-            return;
-        }
-        const userExist = yield checkUserExist({ phone: phoneNumber });
-        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            setShareData({
-                authMethod: 'phone',
-            });
-            let res;
-            if (!((_a = userExist._data) === null || _a === void 0 ? void 0 : _a.provider)) {
-                res = yield registerBySendZaloOTP(phoneNumber, areaCode);
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            if (!areaCode || !phoneNumber || !phone) {
+                setErrMsg(t('ssov2.validate.phone.required'));
+                return setLoading(false);
             }
-            else {
-                res = yield resendZaloOTP(phoneNumber, areaCode);
+            const userExist = yield checkUserExist({ phone: phoneNumber });
+            if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
+                setShareData({
+                    authMethod: 'phone',
+                });
+                let res;
+                if (!((_a = userExist._data) === null || _a === void 0 ? void 0 : _a.provider)) {
+                    res = yield registerBySendZaloOTP(phoneNumber, areaCode);
+                }
+                else {
+                    res = yield resendZaloOTP(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);
+                }
+                setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
+                addStep({
+                    type: SSOStepTypeType.OTP,
+                    config: {
+                        phone,
+                        otpType: 'phone-zalo',
+                        afterAction: 'forgot',
+                    },
+                });
+                goNext();
             }
-            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                return;
+            else {
+                setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
             }
-            setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
-            addStep({
-                type: SSOStepTypeType.OTP,
-                config: {
-                    phone,
-                    otpType: 'phone-zalo',
-                    afterAction: 'forgot',
-                },
-            });
-            goNext();
         }
-        else {
-            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
+        catch (e) {
+            console.error(e);
+            setErrMsg(getErrorTextFromCode(t, ''));
         }
+        setLoading(false);
     });
     const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        if (!areaCode || !phoneNumber || !phone) {
-            setErrMsg(t('ssov2.validate.phone.required'));
-            return;
-        }
-        const userExist = yield checkUserExist({ phone: phoneNumber });
-        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            setShareData({
-                authMethod: 'phone',
-            });
-            let res;
-            if (!((_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider)) {
-                res = yield registerBySendPhoneOTP(phoneNumber, areaCode);
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            if (!areaCode || !phoneNumber || !phone) {
+                setErrMsg(t('ssov2.validate.phone.required'));
+                return setLoading(false);
             }
-            else {
-                res = yield resendPhoneOTP(phoneNumber, areaCode);
+            const userExist = yield checkUserExist({ phone: phoneNumber });
+            if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
+                setShareData({
+                    authMethod: 'phone',
+                });
+                let res;
+                if (!((_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider)) {
+                    res = yield registerBySendPhoneOTP(phoneNumber, areaCode);
+                }
+                else {
+                    res = yield resendPhoneOTP(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);
+                }
+                setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
+                addStep({
+                    type: SSOStepTypeType.OTP,
+                    config: {
+                        phone,
+                        otpType: 'phone-sms',
+                        afterAction: 'forgot',
+                    },
+                });
+                goNext();
             }
-            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                return;
+            else {
+                setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
             }
-            setShareData((a) => (Object.assign(Object.assign({}, a), { authFlow: 'register' })));
-            addStep({
-                type: SSOStepTypeType.OTP,
-                config: {
-                    phone,
-                    otpType: 'phone-sms',
-                    afterAction: 'forgot',
-                },
-            });
-            goNext();
         }
-        else {
-            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
+        catch (e) {
+            console.error(e);
+            setErrMsg(getErrorTextFromCode(t, ''));
         }
+        setLoading(false);
     });
     return (React__default.createElement("div", { style: {
             display: hidden ? 'none' : 'block',
@@ -1403,10 +1487,10 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.resetPassword.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.resetPassword.description'))),
         React__default.createElement(Stack, { mt: 24, spacing: 16 },
-            React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true }),
+            React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, disabled: loading }),
             errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
-            React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS')))));
+            React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
+            React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading }, t('ssov2.button.continueSMS')))));
 };
 const CheckGrayIcon = () => (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1417,7 +1501,7 @@ const CheckRedIcon = () => (React__default.createElement("svg", { width: "16", h
     React__default.createElement("path", { d: "m8.001 8.703 2.049 2.048q.138.14.348.142a.47.47 0 0 0 .355-.142.48.48 0 0 0 .145-.35.48.48 0 0 0-.145-.352L8.703 8l2.05-2.049a.48.48 0 0 0 .141-.348.47.47 0 0 0-.141-.354.48.48 0 0 0-.352-.145.48.48 0 0 0-.351.145L8.001 7.298l-2.048-2.05a.48.48 0 0 0-.349-.14.47.47 0 0 0-.354.14.48.48 0 0 0-.145.352q0 .207.145.351l2.049 2.05-2.049 2.048a.48.48 0 0 0-.142.348.47.47 0 0 0 .142.354.48.48 0 0 0 .351.145.48.48 0 0 0 .352-.145zm.001 5.63a6.2 6.2 0 0 1-2.47-.498 6.4 6.4 0 0 1-2.011-1.354 6.4 6.4 0 0 1-1.354-2.01A6.2 6.2 0 0 1 1.668 8q0-1.315.499-2.47A6.4 6.4 0 0 1 3.52 3.52a6.4 6.4 0 0 1 2.01-1.354 6.2 6.2 0 0 1 2.47-.5q1.314 0 2.47.5 1.156.498 2.012 1.353.855.855 1.354 2.01.499 1.156.499 2.47t-.499 2.47a6.4 6.4 0 0 1-1.354 2.011 6.4 6.4 0 0 1-2.01 1.355 6.2 6.2 0 0 1-2.47.498", fill: "#F44D2C" })));
 const SSOPasswordWithConfirm = (_a) => {
-    var { form } = _a, props = __rest(_a, ["form"]);
+    var { form, loading } = _a, props = __rest(_a, ["form", "loading"]);
     const { t } = useTranslations();
     const [atLeast8Chars, setAtLeast8Chars] = React__default.useState(undefined);
     const [atLeastOneUpper, setAtLeastOneUpper] = React__default.useState(undefined);
@@ -1429,7 +1513,10 @@ const SSOPasswordWithConfirm = (_a) => {
         setAtLeastOneUpper(!!password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/));
     }, [password]);
     return (React__default.createElement(Stack, Object.assign({ spacing: 12 }, props),
-        React__default.createElement(PasswordInput, Object.assign({ name: "password", placeholder: t('ssov2.passwordForgotSetup.field.password.placeholder'), label: t('ssov2.passwordForgotSetup.field.password.label'), required: true, withAsterisk: true }, form.getInputProps('password'))),
+        React__default.createElement(PasswordInput, Object.assign({ name: "password", placeholder: t('ssov2.passwordForgotSetup.field.password.placeholder'), label: t('ssov2.passwordForgotSetup.field.password.label'), required: true, withAsterisk: true }, form.getInputProps('password'), { onBlur: (e) => {
+                form.getInputProps('password').onBlur(e);
+                form.values.confirmPassword && form.validateField('confirmPassword');
+            }, disabled: loading })),
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "n1" },
                 atLeast8Chars ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
@@ -1439,11 +1526,13 @@ const SSOPasswordWithConfirm = (_a) => {
                 atLeastOneUpper ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
                 ' ',
                 t('ssov2.passwordForgotSetup.field.password.atLeastOneUpper'))),
-        React__default.createElement(PasswordInput, Object.assign({ name: "confirm-password", placeholder: t('ssov2.passwordForgotSetup.field.passwordConfirm.placeholder'), label: t('ssov2.passwordForgotSetup.field.passwordConfirm.label'), required: true, withAsterisk: true }, form.getInputProps('confirmPassword')))));
+        React__default.createElement(PasswordInput, Object.assign({ name: "confirm-password", placeholder: t('ssov2.passwordForgotSetup.field.passwordConfirm.placeholder'), label: t('ssov2.passwordForgotSetup.field.passwordConfirm.label'), required: true, withAsterisk: true, disabled: loading }, form.getInputProps('confirmPassword')))));
 };
 const SSOPasswordForgotSetup = ({ hidden }) => {
     const { t } = useTranslations();
+    const [loading, setLoading] = React__default.useState(false);
+    const [errMsg, setErrMsg] = React__default.useState('');
     const { steps, setSteps, goBack, currentStepIndex, addStep, goNext } = useSSOSteps();
     const form = useForm({
         validate: yupResolver(yup.object().shape({
@@ -1462,43 +1551,48 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
         })),
     });
     const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
-        const { password, confirmPassword } = values;
-        if (password.length >= 8 &&
-            password.length <= 50 &&
-            password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/) &&
-            password === confirmPassword) {
-            const res = yield resetPassword(password, confirmPassword);
-            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                showNotification({
-                    type: 'success',
-                    message: 'Password has been reset successfully',
-                });
-                // back to login step
-                const foundPasswordIndex = steps.findIndex((step) => step.type === SSOStepTypeType.PASSWORD);
-                const foundPasswordStep = steps.find((step) => step.type === SSOStepTypeType.PASSWORD);
-                if (foundPasswordIndex === -1 || !foundPasswordStep) {
-                    // reset to first step
-                    setSteps((s) => [s[0]]);
-                }
-                else {
-                    const diffIndex = currentStepIndex - foundPasswordIndex;
-                    for (let i = 0; i < diffIndex; i++) {
+        setLoading(true);
+        try {
+            const { password, confirmPassword } = values;
+            if (password.length >= 8 &&
+                password.length <= 50 &&
+                password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/) &&
+                password === confirmPassword) {
+                const res = yield resetPassword(password, confirmPassword);
+                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                    showNotification({
+                        type: 'success',
+                        message: 'Password has been reset successfully',
+                    });
+                    // back to login step
+                    const foundPasswordIndex = steps.findIndex((step) => step.type === SSOStepTypeType.PASSWORD);
+                    const foundPasswordStep = steps.find((step) => step.type === SSOStepTypeType.PASSWORD);
+                    if (foundPasswordIndex === -1 || !foundPasswordStep) {
+                        // reset to first step
+                        setSteps((s) => [s[0]]);
+                    }
+                    else {
+                        const diffIndex = currentStepIndex - foundPasswordIndex;
+                        for (let i = 0; i < diffIndex; i++) {
+                            goBack();
+                        }
                         goBack();
+                        addStep(foundPasswordStep);
+                        goNext();
                     }
-                    goBack();
-                    addStep(foundPasswordStep);
-                    goNext();
+                    // onClose?.()
+                }
+                else {
+                    // toast error message
+                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
                 }
-                // onClose?.()
-            }
-            else {
-                // toast error message
-                showNotification({
-                    type: 'danger',
-                    message: getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code),
-                });
             }
         }
+        catch (e) {
+            console.error(e);
+            setErrMsg(getErrorTextFromCode(t, e === null || e === void 0 ? void 0 : e.code));
+        }
+        setLoading(false);
     });
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
@@ -1507,83 +1601,101 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
             React__default.createElement(Stack, { spacing: 8 },
                 React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.passwordForgotSetup.title')),
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.passwordForgotSetup.description'))),
-            React__default.createElement(SSOPasswordWithConfirm, { form: form }),
-            React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true }, t('ssov2.button.save')))));
+            React__default.createElement(SSOPasswordWithConfirm, { form: form, loading: loading }),
+            errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
+            React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.save')))));
 };
 const SSOPhoneVerify = ({ hidden, index, }) => {
     const { t } = useTranslations();
     const [phone, setPhone] = React__default.useState('');
+    const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
     const { locale } = useSSOState();
     const { addStep, goNext, steps } = useSSOSteps();
     const currentStep = steps[index];
     const { afterAction } = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.config) || {};
     const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        if (!areaCode || !phoneNumber || !phone) {
-            setErrMsg(t('ssov2.validate.phone.required'));
-            return;
-        }
-        const userExist = yield checkUserExist({ phone: phoneNumber });
-        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (!userExist._data) {
-                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(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            if (!areaCode || !phoneNumber || !phone) {
+                setErrMsg(t('ssov2.validate.phone.required'));
+                return setLoading(false);
+            }
+            const userExist = yield checkUserExist({ phone: phoneNumber });
+            if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
+                if (!userExist._data) {
+                    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: afterAction || 'setup',
+                        },
+                    });
+                    goNext();
+                }
+                else {
+                    setErrMsg(t('ssov2.phone.alreadyUsed'));
                 }
-                addStep({
-                    type: SSOStepTypeType.OTP,
-                    config: {
-                        phone,
-                        otpType: 'phone-zalo',
-                        isUpdatePhone: true,
-                        afterAction: afterAction || 'setup',
-                    },
-                });
-                goNext();
             }
             else {
-                setErrMsg(t('ssov2.phone.alreadyUsed'));
+                setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
             }
         }
-        else {
-            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
+        catch (e) {
+            console.log(e);
+            setErrMsg(getErrorTextFromCode(t, ''));
         }
+        setLoading(false);
     });
     const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        if (!areaCode || !phoneNumber || !phone) {
-            setErrMsg(t('ssov2.validate.phone.required'));
-            return;
-        }
-        const userExist = yield checkUserExist({ phone: phoneNumber });
-        if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (!userExist._data) {
-                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(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            if (!areaCode || !phoneNumber || !phone) {
+                setErrMsg(t('ssov2.validate.phone.required'));
+                return setLoading(false);
+            }
+            const userExist = yield checkUserExist({ phone: phoneNumber });
+            if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
+                if (!userExist._data) {
+                    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: afterAction || 'setup',
+                        },
+                    });
+                    goNext();
+                }
+                else {
+                    setErrMsg(t('ssov2.phone.alreadyUsed'));
                 }
-                addStep({
-                    type: SSOStepTypeType.OTP,
-                    config: {
-                        phone,
-                        otpType: 'phone-sms',
-                        isUpdatePhone: true,
-                        afterAction: afterAction || 'setup',
-                    },
-                });
-                goNext();
             }
             else {
-                setErrMsg(t('ssov2.phone.alreadyUsed'));
+                setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
             }
         }
-        else {
-            setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
+        catch (e) {
+            console.log(e);
+            setErrMsg(getErrorTextFromCode(t, ''));
         }
+        setLoading(false);
     });
     return (React__default.createElement("div", { style: {
             display: hidden ? 'none' : 'block',
@@ -1594,9 +1706,12 @@ const SSOPhoneVerify = ({ hidden, index, }) => {
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.phoneVerify.description'))),
             React__default.createElement(Stack, { spacing: 16 },
                 React__default.createElement(Input.Wrapper, { error: errMsg },
-                    React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
-                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
-                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS'))))));
+                    React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => {
+                            setPhone(value);
+                            setErrMsg('');
+                        }, isError: !!errMsg, required: true, name: "phone", disabled: loading })),
+                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
+                React__default.createElement(Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading }, t('ssov2.button.continueSMS'))))));
 };
 const FemaleIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1629,7 +1744,7 @@ const MaleIcon = () => (React__default.createElement("svg", { width: "20", heigh
     React__default.createElement("path", { d: "m11.12 9.547-.019.001a8 8 0 0 1-1.928 0 .156.156 0 1 0-.037.31c.665.08 1.337.08 2.003 0a.156.156 0 0 0-.019-.31", fill: "#D84023" })));
 // always has name, gender dob
-const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
+const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) => {
     const { t } = useTranslations();
     const { locale = 'vi-VN' } = useSSOState();
     const { setupSource } = useSSOV2Store();
@@ -1638,7 +1753,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
             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" })),
+                    }, isError: !!form.getInputProps('phone').error, required: true, name: "phone", disabled: loading })),
             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: {
@@ -1653,14 +1768,14 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                             label: {
                                 paddingLeft: 8,
                             },
-                        } }),
+                        }, disabled: loading }),
                     React__default.createElement(Radio, { value: "sms", label: "SMS", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
-                        } }))))),
-        needEmail && (React__default.createElement(Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable, required: setupSource === 'care' ? true : false, withAsterisk: setupSource === 'care' ? true : false }, form.getInputProps('email')))),
-        React__default.createElement(Input, Object.assign({ name: "name", label: t('ssov2.setup.field.name.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.name.placeholder') }, form.getInputProps('name'))),
+                        }, disabled: loading }))))),
+        needEmail && (React__default.createElement(Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable || loading, required: setupSource === 'care' ? true : false, withAsterisk: setupSource === 'care' ? true : false }, form.getInputProps('email')))),
+        React__default.createElement(Input, Object.assign({ name: "name", label: t('ssov2.setup.field.name.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.name.placeholder'), disabled: loading }, form.getInputProps('name'))),
         React__default.createElement(Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.gender.label'), withAsterisk: true }, form.getInputProps('gender')),
             React__default.createElement(Group, null,
                 React__default.createElement(Button, { type: "button", styles: {
@@ -1677,7 +1792,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
-                    }, leftIcon: React__default.createElement(FemaleIcon, null) }, t('ssov2.setup.field.gender.female')),
+                    }, leftIcon: React__default.createElement(FemaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.female')),
                 React__default.createElement(Button, { type: "button", styles: {
                         root: {
                             flex: 1,
@@ -1692,8 +1807,8 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    }, leftIcon: React__default.createElement(MaleIcon, null) }, t('ssov2.setup.field.gender.male')))),
-        React__default.createElement(DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date() }, form.getInputProps('dob')))));
+                    }, leftIcon: React__default.createElement(MaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.male')))),
+        React__default.createElement(DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date(), disabled: loading }, form.getInputProps('dob')))));
 };
 const SSOSetupScreen = ({ hidden, index, }) => {
@@ -1703,6 +1818,7 @@ const SSOSetupScreen = ({ hidden, index, }) => {
     const { goNext, steps, addStep, shareData } = useSSOSteps();
     const { setupSource } = useSSOV2Store();
     const [errMsg, setErrMsg] = React__default.useState('');
+    const [loading, setLoading] = React__default.useState(false);
     const currentStep = steps[index];
     const config = currentStep === null || currentStep === void 0 ? void 0 : currentStep.config;
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
@@ -1781,100 +1897,108 @@ const SSOSetupScreen = ({ hidden, index, }) => {
                 .oneOf(['male', 'female'], t('ssov2.validate.gender.oneOf')), dob: yup.date().required(t('ssov2.validate.dob.required')), name: yup.string().required(t('ssov2.validate.name.required')) }))),
     });
     const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
-        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,
-            source: setupSource,
-            validate: 'true',
-        });
-        if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-            // if need phone and has phone then start phone verify step, close after done
-            if (needPhone) {
-                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(true);
+        try {
+            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,
+                source: setupSource,
+                validate: 'true',
+            });
+            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                // if need phone and has phone then start phone verify step, close after done
+                if (needPhone) {
+                    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,
+                            },
+                        });
+                        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,
+                            },
+                        });
+                        goNext();
                     }
-                    addStep({
-                        type: SSOStepTypeType.OTP,
-                        config: {
-                            phone,
-                            otpType: 'phone-zalo',
-                            isUpdatePhone: true,
-                            afterAction: 'submitSetup',
-                            setupData,
-                        },
-                    });
-                    goNext();
                 }
                 else {
-                    const res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
-                    if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                    // 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;
+                        return setLoading(false);
                     }
-                    addStep({
-                        type: SSOStepTypeType.OTP,
-                        config: {
-                            phone,
-                            otpType: 'phone-sms',
-                            isUpdatePhone: true,
-                            afterAction: 'submitSetup',
-                            setupData,
-                        },
-                    });
-                    goNext();
                 }
             }
             else {
-                // close?
-                const res = yield updateUserInfo({
-                    name,
-                    birthday: dayjs(dob).format('YYYY-MM-DD'),
-                    email: values.email || undefined,
-                    password,
-                    confirm_password: confirmPassword,
-                    phone_number: phoneNumber || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone),
-                    area_code: areaCode || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code),
-                    gender: gender === 'male' ? 1 : 0,
-                    source: setupSource,
-                    validate: '',
-                });
-                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                    handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
-                    onClose === null || onClose === void 0 ? void 0 : onClose(true);
-                }
-                else {
-                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                    return;
-                }
+                // toast error message
+                setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
             }
         }
-        else {
-            // toast error message
-            setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+        catch (e) {
+            console.error(e);
+            setErrMsg(getErrorTextFromCode(t, ''));
         }
+        setLoading(false);
     });
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
@@ -1883,10 +2007,10 @@ const SSOSetupScreen = ({ hidden, index, }) => {
             React__default.createElement(Stack, { spacing: 8 },
                 React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.setup.title')),
                 React__default.createElement(Text, { size: "p4" }, t('ssov2.setup.description'))),
-            needPass && React__default.createElement(SSOPasswordWithConfirm, { form: form }),
-            React__default.createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form }),
+            needPass && (React__default.createElement(SSOPasswordWithConfirm, { form: form, loading: loading })),
+            React__default.createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form, loading: loading }),
             errMsg && (React__default.createElement(Text, { color: "red.6", size: "p4" }, errMsg)),
-            React__default.createElement(Button, { type: "submit", variant: "primary", fullWidth: true }, needPhone
+            React__default.createElement(Button, { type: "submit", variant: "primary", fullWidth: true, loading: loading, disabled: loading }, needPhone
                 ? t('ssov2.setup.button.veriyPhone')
                 : authFlow === 'register'
                     ? t('ssov2.setup.button.createAccount')
@@ -1897,46 +2021,57 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
     const [errMsg, setErrMsg] = React__default.useState('');
     const { addStep, goNext, setShareData } = useSSOSteps();
+    const [loading, setLoading] = React__default.useState(false);
     return (React__default.createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
             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(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                        return;
+            if (loading)
+                return;
+            setLoading(true);
+            try {
+                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(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                            return setLoading(false);
+                        }
+                        addStep({
+                            type: SSOStepTypeType.OTP,
+                            config: {
+                                email,
+                                otpType: 'update-email',
+                                afterAction: 'setup',
+                            },
+                        });
+                        goNext();
+                    }
+                    else {
+                        setErrMsg(t('ssov2.email.alreadyUsed'));
                     }
-                    addStep({
-                        type: SSOStepTypeType.OTP,
-                        config: {
-                            email,
-                            otpType: 'update-email',
-                            afterAction: 'setup',
-                        },
-                    });
-                    goNext();
                 }
                 else {
-                    setErrMsg(t('ssov2.email.alreadyUsed'));
+                    setErrMsg(getErrorTextFromCode(t, existRes === null || existRes === void 0 ? void 0 : existRes.code));
                 }
             }
-            else {
-                setErrMsg(getErrorTextFromCode(t, existRes === null || existRes === void 0 ? void 0 : existRes.code));
+            catch (e) {
+                setErrMsg(getErrorTextFromCode(t, ''));
+                console.error(e);
             }
+            setLoading(false);
         }) },
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.updateEmail.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.updateEmail.description'))),
-        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
-        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, t('ssov2.updateEmail.button'))));
+        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, onChange: () => setErrMsg(''), disabled: loading }),
+        React__default.createElement(Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, loading: loading, disabled: loading }, t('ssov2.updateEmail.button'))));
 };
 const SSOScreenRenderer = () => {