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/ssoV2.js CHANGED Viewed

@@ -2,51 +2,51 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var tslib_es6 = require('./tslib.es6-d836fe39.js');
+var tslib_es6 = require('./tslib.es6-a2ac1e35.js');
 var React = require('react');
-var index$5 = require('./index-7e780e5f.js');
+var index$5 = require('./index-3a6ab9f1.js');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var logoIcon = require('./logoIcon-4275e2ee.js');
-var index$3 = require('./index-853ae758.js');
-var index$1 = require('./index-d76e71b2.js');
+var logoIcon = require('./logoIcon-e3454ad7.js');
+var index$3 = require('./index-b7a02d94.js');
+var index$1 = require('./index-7b63ccf0.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-var index$4 = require('./index-da512bdd.js');
-require('./index-24511c91.js');
-require('./index-091d8bb0.js');
-var useMantineLocale = require('./useMantineLocale-48e8eb6a.js');
-var index$2 = require('./index-2449c149.js');
-var index = require('./index-90b1277d.js');
+var index$4 = require('./index-b27d9ae9.js');
+require('./index-9924041d.js');
+require('./index-56ee99d1.js');
+var useMantineLocale = require('./useMantineLocale-007ccab8.js');
+var index$2 = require('./index-abd798b4.js');
+var index = require('./index-4f2da132.js');
 require('@mantine/hooks');
-require('./utils-ae52e1c9.js');
-require('./other-18de93d8.js');
-require('./index-db7a4a46.js');
-var Locale = require('./Locale-f7f03ebc.js');
-var store = require('./store-40beac07.js');
-var Google = require('./Google-52f5af1b.js');
+require('./utils-1d4e8507.js');
+require('./other-050b910e.js');
+require('./index-30a885a2.js');
+var Locale = require('./Locale-8e589472.js');
+var store = require('./store-eb3db02c.js');
+var Google = require('./Google-98731b6c.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-f7c5ea01.js');
+var utils = require('./utils-a9c8fcd4.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var form = require('@mantine/form');
 var yup = require('yup');
 var dayjs = require('dayjs');
-var index$6 = require('./index-f1deef47.js');
+var index$6 = require('./index-b31cc517.js');
 require('@hhgtech/icons/other');
-require('./index.styles-bac5c293.js');
+require('./index.styles-ce54c619.js');
 require('@mantine/carousel');
 require('./miscTheme.js');
-require('./index-20fa2236.js');
+require('./index-48237a4e.js');
 require('classnames');
-require('./useUniqueId-9b4de13d.js');
+require('./useUniqueId-86ea2151.js');
 require('./constantsSite.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('@mantine/notifications');
-require('./translationsContext-0b5b6d26.js');
+require('./translationsContext-51eda546.js');
 require('zustand');
-require('./normalizeLink-d35d8d15.js');
+require('./normalizeLink-399db560.js');
 require('./miscCookieHelper.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -374,6 +374,7 @@ const getErrorTextFromCode = (t, code) => {
 const SSOEmailScreen = ({ hidden, }) => {
     const { t } = index.useTranslations();
+    const [loading, setLoading] = React__default["default"].useState(false);
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     return (React__default["default"].createElement("form", { style: {
@@ -381,65 +382,73 @@ const SSOEmailScreen = ({ hidden, }) => {
         }, onSubmit: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             e.preventDefault();
-            const email = e.currentTarget.email.value;
-            const existRes = yield store.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: store.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 store.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: store.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: store.SSOStepTypeType.OTP,
+                            config: {
+                                email,
+                                otpType: 'email',
+                                afterAction: 'setup',
+                            },
+                        });
+                        goNext();
                     }
-                    // go to register screen
-                    addStep({
-                        type: store.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["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.email.description'))),
-        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
-        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, t('ssov2.email.button'))));
+        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg('') }),
+        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, disabled: loading, loading: loading }, t('ssov2.email.button'))));
 };
 const splitPhone = (phone) => {
@@ -652,6 +661,8 @@ const SSOFirstScreen = ({ hidden }) => {
     const { locale, onClose } = useSSOState();
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     const { t } = index.useTranslations();
+    const [loading, setLoading] = React__default["default"].useState(false);
+    const [loadingOverlay, setLoadingOverlay] = React__default["default"].useState(false);
     const handleLoginBySocial = (credential, provider) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _c, _d, _e;
         const res = yield loginBySocial(credential, provider);
@@ -739,17 +750,18 @@ const SSOFirstScreen = ({ hidden }) => {
     }, []);
     const onClickContinueZalo = () => tslib_es6.__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 store.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',
@@ -774,7 +786,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({
@@ -791,20 +803,22 @@ const SSOFirstScreen = ({ hidden }) => {
         else {
             setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
+        setLoading(false);
     });
     const onClickContinuePhone = () => tslib_es6.__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 store.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',
@@ -829,7 +843,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({
@@ -846,6 +860,7 @@ const SSOFirstScreen = ({ hidden }) => {
         else {
             setErrMsg(getErrorTextFromCode(t, userExist === null || userExist === void 0 ? void 0 : userExist.code));
         }
+        setLoading(false);
     });
     const onClickEmail = () => {
         setShareData({
@@ -858,26 +873,39 @@ const SSOFirstScreen = ({ hidden }) => {
         goNext();
     };
     const onTriggerGoogleLogin = () => {
+        setLoadingOverlay(true);
         const client = window.google.accounts.oauth2.initTokenClient({
             client_id: store.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) => tslib_es6.__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 tslib_es6.__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' });
     };
@@ -886,15 +914,20 @@ const SSOFirstScreen = ({ hidden }) => {
             flexDirection: 'column',
             height: '100%',
         } },
+        React__default["default"].createElement(core.LoadingOverlay, { visible: loadingOverlay, zIndex: 1000, overlayBlur: 1 }),
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.first.title')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.first.description'))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 24 },
             React__default["default"].createElement(core.Stack, { spacing: 16 },
-                React__default["default"].createElement(index$5.Input.Wrapper, { error: errMsg },
-                    React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
-                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
-                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS'))),
+                React__default["default"].createElement("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        onClickContinueZalo();
+                    } },
+                    React__default["default"].createElement(index$5.Input.Wrapper, { error: errMsg },
+                        React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone", disabled: loading }))),
+                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, loading: loading, disabled: loading }, t('ssov2.button.continueZalo')),
+                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, loading: loading, disabled: loading }, t('ssov2.button.continueSMS'))),
             React__default["default"].createElement(core.Stack, { spacing: 16, align: "center" },
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.orContinueWith')),
                 React__default["default"].createElement(core.Group, { spacing: 24 },
@@ -969,6 +1002,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
     const { t } = index.useTranslations();
     const { onClose } = useSSOState();
     const { steps, setSteps, addStep, goNext } = store.useSSOSteps();
+    const [loading, setLoading] = React__default["default"].useState(false);
     const [otp, setOtp] = React__default["default"].useState('');
     const [error, setError] = React__default["default"].useState('');
     const currentStepIndex = index$1;
@@ -979,197 +1013,225 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
         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 = () => tslib_es6.__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 store.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 store.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: store.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 store.updateUserInfo(Object.assign(Object.assign({}, setupData), { validate: '' }));
+                        if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                            store.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: store.SSOStepTypeType.SETUP_FULL,
-                        config: {
-                            phone,
-                            userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
-                        },
-                    });
-                    goNext();
-                }
-                else if (afterAction === 'submitSetup') {
-                    const res = yield store.updateUserInfo(Object.assign(Object.assign({}, setupData), { validate: '' }));
-                    if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                        store.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: store.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: store.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;
-        }
-        store.handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
-        // if (otpType === 'update-email') {
-        //   onClose?.(true)
-        //   return
-        // }
-        if (afterAction === 'forgot') {
-            addStep({
-                type: store.SSOStepTypeType.FORGOT_PASSWORD_SETUP,
-            });
-            goNext();
-        }
-        else if (afterAction === 'setup') {
-            const userInfo = yield store.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;
+            store.handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+            // if (otpType === 'update-email') {
+            //   onClose?.(true)
+            //   return
+            // }
+            if (afterAction === 'forgot') {
+                addStep({
+                    type: store.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 store.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: store.SSOStepTypeType.SETUP_FULL,
+                    config: {
+                        phone,
+                        userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                    },
+                });
+                goNext();
+            }
+            else if (afterAction === 'update-email') {
+                addStep({
+                    type: store.SSOStepTypeType.UPDATE_EMAIL,
+                });
+                goNext();
+            }
+            else {
                 onClose === null || onClose === void 0 ? void 0 : onClose(true);
-                return;
             }
-            addStep({
-                type: store.SSOStepTypeType.SETUP_FULL,
-                config: {
-                    phone,
-                    userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
-                },
-            });
-            goNext();
-        }
-        else if (afterAction === 'update-email') {
-            addStep({
-                type: store.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 = () => tslib_es6.__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["default"].useState(30);
     const setupResendTimer = () => {
@@ -1211,7 +1273,10 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
                     } }))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
             React__default["default"].createElement(index$5.Input.Wrapper, { error: error },
-                React__default["default"].createElement(index$5.OTP, { value: otp, onChange: (otp) => setOtp(String(otp)) })),
+                React__default["default"].createElement(index$5.OTP, { value: otp, onChange: (otp) => {
+                        setOtp(String(otp));
+                        setError('');
+                    } })),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -1222,8 +1287,8 @@ const SSOOTPScreen = ({ hidden, index: index$1, }) => {
                     }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true) }, t('ssov2.otp.resendText', {
                     count: resendTime,
                 })))),
-        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, t('ssov2.button.continue')),
-        !isEmail && (React__default["default"].createElement(index$3.Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true }, t('ssov2.otp.sendVia', {
+        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.continue')),
+        !isEmail && (React__default["default"].createElement(index$3.Button, { size: "lg", variant: "tertiary", mt: 12, onClick: swapZaloSms, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.otp.sendVia', {
             method: otpType === 'phone-sms' ? 'Zalo' : 'SMS',
         })))));
 };
@@ -1233,42 +1298,51 @@ const SSOPasswordScreen = ({ hidden, index: index$1, }) => {
     const { t } = index.useTranslations();
     const { onClose } = useSSOState();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const [loading, setLoading] = React__default["default"].useState(false);
     const { steps, addStep, goNext, setShareData } = store.useSSOSteps();
     const thisStep = steps[index$1];
     const phone = (_a = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _a === void 0 ? void 0 : _a.phone;
     const email = (_b = thisStep === null || thisStep === void 0 ? void 0 : thisStep.config) === null || _b === void 0 ? void 0 : _b.email;
     const resetPassword = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        if (phone) {
-            addStep({
-                type: store.SSOStepTypeType.FORGOT_PASSWORD_PHONE,
-            });
-        }
-        else {
-            const existRes = yield store.checkUserExist({ email });
-            if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
-                let res;
-                if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
-                    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: store.SSOStepTypeType.OTP,
-                    config: {
-                        email,
-                        otpType: 'email',
-                        afterAction: 'forgot',
-                    },
+                    type: store.SSOStepTypeType.FORGOT_PASSWORD_PHONE,
                 });
             }
+            else {
+                const existRes = yield store.checkUserExist({ email });
+                if ((existRes === null || existRes === void 0 ? void 0 : existRes._status) === 1) {
+                    let res;
+                    if (!((_c = existRes._data) === null || _c === void 0 ? void 0 : _c.provider)) {
+                        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: store.SSOStepTypeType.OTP,
+                        config: {
+                            email,
+                            otpType: 'email',
+                            afterAction: 'forgot',
+                        },
+                    });
+                }
+            }
+            goNext();
         }
-        goNext();
+        catch (e) {
+            setErrMsg(getErrorTextFromCode(t, ''));
+            console.error(e);
+        }
+        setLoading(false);
     });
     const onAuthSuccess = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _d, _e;
@@ -1291,39 +1365,32 @@ const SSOPasswordScreen = ({ hidden, index: index$1, }) => {
     });
     return (React__default["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
-        }, onSubmit: (e) => {
+        }, onSubmit: (e) => tslib_es6.__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["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" },
                 t('ssov2.password.title1'),
@@ -1331,7 +1398,7 @@ const SSOPasswordScreen = ({ hidden, index: index$1, }) => {
                 t('ssov2.password.title2')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.password.description'))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
-            React__default["default"].createElement(index$5.PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg('') }),
+            React__default["default"].createElement(index$5.PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg(''), disabled: loading, required: true }),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -1339,90 +1406,107 @@ const SSOPasswordScreen = ({ hidden, index: index$1, }) => {
                 React__default["default"].createElement(index$2.Text, { size: "s4", color: "blue.6", style: {
                         cursor: 'pointer',
                     }, onClick: resetPassword }, t('ssov2.password.reset')))),
-        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true }, t('ssov2.password.signIn'))));
+        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading }, t('ssov2.password.signIn'))));
 };
 const SSOPasswordForgotPhone = ({ hidden, }) => {
     const { t } = index.useTranslations();
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const [loading, setLoading] = React__default["default"].useState(false);
     const { locale } = useSSOState();
     const { addStep, goNext, setShareData } = store.useSSOSteps();
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
-        const { areaCode, phoneNumber } = splitPhone(phone);
-        if (!areaCode || !phoneNumber || !phone) {
-            setErrMsg(t('ssov2.validate.phone.required'));
-            return;
-        }
-        const userExist = yield store.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 store.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: store.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: store.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 = () => tslib_es6.__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 store.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 store.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: store.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: store.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["default"].createElement("div", { style: {
             display: hidden ? 'none' : 'block',
@@ -1431,10 +1515,10 @@ const SSOPasswordForgotPhone = ({ hidden, }) => {
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.resetPassword.title')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.resetPassword.description'))),
         React__default["default"].createElement(core.Stack, { mt: 24, spacing: 16 },
-            React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true }),
+            React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, disabled: loading }),
             errMsg && (React__default["default"].createElement(index$2.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
-            React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS')))));
+            React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
+            React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading }, t('ssov2.button.continueSMS')))));
 };
 const CheckGrayIcon = () => (React__default["default"].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1445,7 +1529,7 @@ const CheckRedIcon = () => (React__default["default"].createElement("svg", { wid
     React__default["default"].createElement("path", { d: "m8.001 8.703 2.049 2.048q.138.14.348.142a.47.47 0 0 0 .355-.142.48.48 0 0 0 .145-.35.48.48 0 0 0-.145-.352L8.703 8l2.05-2.049a.48.48 0 0 0 .141-.348.47.47 0 0 0-.141-.354.48.48 0 0 0-.352-.145.48.48 0 0 0-.351.145L8.001 7.298l-2.048-2.05a.48.48 0 0 0-.349-.14.47.47 0 0 0-.354.14.48.48 0 0 0-.145.352q0 .207.145.351l2.049 2.05-2.049 2.048a.48.48 0 0 0-.142.348.47.47 0 0 0 .142.354.48.48 0 0 0 .351.145.48.48 0 0 0 .352-.145zm.001 5.63a6.2 6.2 0 0 1-2.47-.498 6.4 6.4 0 0 1-2.011-1.354 6.4 6.4 0 0 1-1.354-2.01A6.2 6.2 0 0 1 1.668 8q0-1.315.499-2.47A6.4 6.4 0 0 1 3.52 3.52a6.4 6.4 0 0 1 2.01-1.354 6.2 6.2 0 0 1 2.47-.5q1.314 0 2.47.5 1.156.498 2.012 1.353.855.855 1.354 2.01.499 1.156.499 2.47t-.499 2.47a6.4 6.4 0 0 1-1.354 2.011 6.4 6.4 0 0 1-2.01 1.355 6.2 6.2 0 0 1-2.47.498", fill: "#F44D2C" })));
 const SSOPasswordWithConfirm = (_a) => {
-    var { form } = _a, props = tslib_es6.__rest(_a, ["form"]);
+    var { form, loading } = _a, props = tslib_es6.__rest(_a, ["form", "loading"]);
     const { t } = index.useTranslations();
     const [atLeast8Chars, setAtLeast8Chars] = React__default["default"].useState(undefined);
     const [atLeastOneUpper, setAtLeastOneUpper] = React__default["default"].useState(undefined);
@@ -1457,7 +1541,10 @@ const SSOPasswordWithConfirm = (_a) => {
         setAtLeastOneUpper(!!password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/));
     }, [password]);
     return (React__default["default"].createElement(core.Stack, Object.assign({ spacing: 12 }, props),
-        React__default["default"].createElement(index$5.PasswordInput, Object.assign({ name: "password", placeholder: t('ssov2.passwordForgotSetup.field.password.placeholder'), label: t('ssov2.passwordForgotSetup.field.password.label'), required: true, withAsterisk: true }, form.getInputProps('password'))),
+        React__default["default"].createElement(index$5.PasswordInput, Object.assign({ name: "password", placeholder: t('ssov2.passwordForgotSetup.field.password.placeholder'), label: t('ssov2.passwordForgotSetup.field.password.label'), required: true, withAsterisk: true }, form.getInputProps('password'), { onBlur: (e) => {
+                form.getInputProps('password').onBlur(e);
+                form.values.confirmPassword && form.validateField('confirmPassword');
+            }, disabled: loading })),
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "n1" },
                 atLeast8Chars ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
@@ -1467,11 +1554,13 @@ const SSOPasswordWithConfirm = (_a) => {
                 atLeastOneUpper ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
                 ' ',
                 t('ssov2.passwordForgotSetup.field.password.atLeastOneUpper'))),
-        React__default["default"].createElement(index$5.PasswordInput, Object.assign({ name: "confirm-password", placeholder: t('ssov2.passwordForgotSetup.field.passwordConfirm.placeholder'), label: t('ssov2.passwordForgotSetup.field.passwordConfirm.label'), required: true, withAsterisk: true }, form.getInputProps('confirmPassword')))));
+        React__default["default"].createElement(index$5.PasswordInput, Object.assign({ name: "confirm-password", placeholder: t('ssov2.passwordForgotSetup.field.passwordConfirm.placeholder'), label: t('ssov2.passwordForgotSetup.field.passwordConfirm.label'), required: true, withAsterisk: true, disabled: loading }, form.getInputProps('confirmPassword')))));
 };
 const SSOPasswordForgotSetup = ({ hidden }) => {
     const { t } = index.useTranslations();
+    const [loading, setLoading] = React__default["default"].useState(false);
+    const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { steps, setSteps, goBack, currentStepIndex, addStep, goNext } = store.useSSOSteps();
     const form$1 = form.useForm({
         validate: form.yupResolver(yup__namespace.object().shape({
@@ -1490,43 +1579,48 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
         })),
     });
     const onSubmit = (values) => tslib_es6.__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 store.resetPassword(password, confirmPassword);
-            if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                useMantineLocale.showNotification({
-                    type: 'success',
-                    message: 'Password has been reset successfully',
-                });
-                // back to login step
-                const foundPasswordIndex = steps.findIndex((step) => step.type === store.SSOStepTypeType.PASSWORD);
-                const foundPasswordStep = steps.find((step) => step.type === store.SSOStepTypeType.PASSWORD);
-                if (foundPasswordIndex === -1 || !foundPasswordStep) {
-                    // reset to first step
-                    setSteps((s) => [s[0]]);
-                }
-                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 store.resetPassword(password, confirmPassword);
+                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                    useMantineLocale.showNotification({
+                        type: 'success',
+                        message: 'Password has been reset successfully',
+                    });
+                    // back to login step
+                    const foundPasswordIndex = steps.findIndex((step) => step.type === store.SSOStepTypeType.PASSWORD);
+                    const foundPasswordStep = steps.find((step) => step.type === store.SSOStepTypeType.PASSWORD);
+                    if (foundPasswordIndex === -1 || !foundPasswordStep) {
+                        // reset to first step
+                        setSteps((s) => [s[0]]);
+                    }
+                    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
-                useMantineLocale.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["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
@@ -1535,83 +1629,101 @@ const SSOPasswordForgotSetup = ({ hidden }) => {
             React__default["default"].createElement(core.Stack, { spacing: 8 },
                 React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.passwordForgotSetup.title')),
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.passwordForgotSetup.description'))),
-            React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1 }),
-            React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true }, t('ssov2.button.save')))));
+            React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1, loading: loading }),
+            errMsg && (React__default["default"].createElement(index$2.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
+            React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading }, t('ssov2.button.save')))));
 };
 const SSOPhoneVerify = ({ hidden, index: index$1, }) => {
     const { t } = index.useTranslations();
     const [phone, setPhone] = React__default["default"].useState('');
+    const [loading, setLoading] = React__default["default"].useState(false);
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale } = useSSOState();
     const { addStep, goNext, steps } = store.useSSOSteps();
     const currentStep = steps[index$1];
     const { afterAction } = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.config) || {};
     const onClickContinueZalo = () => tslib_es6.__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 store.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 store.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: store.SSOStepTypeType.OTP,
+                        config: {
+                            phone,
+                            otpType: 'phone-zalo',
+                            isUpdatePhone: true,
+                            afterAction: afterAction || 'setup',
+                        },
+                    });
+                    goNext();
+                }
+                else {
+                    setErrMsg(t('ssov2.phone.alreadyUsed'));
                 }
-                addStep({
-                    type: store.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 = () => tslib_es6.__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 store.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 store.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: store.SSOStepTypeType.OTP,
+                        config: {
+                            phone,
+                            otpType: 'phone-sms',
+                            isUpdatePhone: true,
+                            afterAction: afterAction || 'setup',
+                        },
+                    });
+                    goNext();
+                }
+                else {
+                    setErrMsg(t('ssov2.phone.alreadyUsed'));
                 }
-                addStep({
-                    type: store.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["default"].createElement("div", { style: {
             display: hidden ? 'none' : 'block',
@@ -1622,9 +1734,12 @@ const SSOPhoneVerify = ({ hidden, index: index$1, }) => {
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.phoneVerify.description'))),
             React__default["default"].createElement(core.Stack, { spacing: 16 },
                 React__default["default"].createElement(index$5.Input.Wrapper, { error: errMsg },
-                    React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => setPhone(value), isError: !!errMsg, required: true, name: "phone" })),
-                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo }, t('ssov2.button.continueZalo')),
-                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone }, t('ssov2.button.continueSMS'))))));
+                    React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => {
+                            setPhone(value);
+                            setErrMsg('');
+                        }, isError: !!errMsg, required: true, name: "phone", disabled: loading })),
+                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading }, t('ssov2.button.continueZalo')),
+                React__default["default"].createElement(index$3.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading }, t('ssov2.button.continueSMS'))))));
 };
 const FemaleIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1657,7 +1772,7 @@ const MaleIcon = () => (React__default["default"].createElement("svg", { width:
     React__default["default"].createElement("path", { d: "m11.12 9.547-.019.001a8 8 0 0 1-1.928 0 .156.156 0 1 0-.037.31c.665.08 1.337.08 2.003 0a.156.156 0 0 0-.019-.31", fill: "#D84023" })));
 // always has name, gender dob
-const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
+const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, loading, }) => {
     const { t } = index.useTranslations();
     const { locale = 'vi-VN' } = useSSOState();
     const { setupSource } = store.useSSOV2Store();
@@ -1666,7 +1781,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
             React__default["default"].createElement(index$5.Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.phone.label'), withAsterisk: true }, form.getInputProps('phone')),
                 React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: form.getInputProps('phone').value, onChange: (value) => {
                         form.setFieldValue('phone', value);
-                    }, isError: !!form.getInputProps('phone').error, required: true, name: "phone" })),
+                    }, isError: !!form.getInputProps('phone').error, required: true, name: "phone", disabled: loading })),
             React__default["default"].createElement(core.Group, { spacing: 24 },
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.setup.field.otp.label')),
                 React__default["default"].createElement(index$5.Radio.Group, Object.assign({ name: "otpMethod", styles: {
@@ -1681,14 +1796,14 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                             label: {
                                 paddingLeft: 8,
                             },
-                        } }),
+                        }, disabled: loading }),
                     React__default["default"].createElement(index$5.Radio, { value: "sms", label: "SMS", styles: {
                             label: {
                                 paddingLeft: 8,
                             },
-                        } }))))),
-        needEmail && (React__default["default"].createElement(index$5.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["default"].createElement(index$5.Input, Object.assign({ name: "name", label: t('ssov2.setup.field.name.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.name.placeholder') }, form.getInputProps('name'))),
+                        }, disabled: loading }))))),
+        needEmail && (React__default["default"].createElement(index$5.Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable || loading, required: setupSource === 'care' ? true : false, withAsterisk: setupSource === 'care' ? true : false }, form.getInputProps('email')))),
+        React__default["default"].createElement(index$5.Input, Object.assign({ name: "name", label: t('ssov2.setup.field.name.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.name.placeholder'), disabled: loading }, form.getInputProps('name'))),
         React__default["default"].createElement(index$5.Input.Wrapper, Object.assign({ label: t('ssov2.setup.field.gender.label'), withAsterisk: true }, form.getInputProps('gender')),
             React__default["default"].createElement(core.Group, null,
                 React__default["default"].createElement(index$3.Button, { type: "button", styles: {
@@ -1705,7 +1820,7 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
-                    }, leftIcon: React__default["default"].createElement(FemaleIcon, null) }, t('ssov2.setup.field.gender.female')),
+                    }, leftIcon: React__default["default"].createElement(FemaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.female')),
                 React__default["default"].createElement(index$3.Button, { type: "button", styles: {
                         root: {
                             flex: 1,
@@ -1720,8 +1835,8 @@ const OtherSetup = ({ form, needPhone, needEmail, isEmailDisable, }) => {
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    }, leftIcon: React__default["default"].createElement(MaleIcon, null) }, t('ssov2.setup.field.gender.male')))),
-        React__default["default"].createElement(index$6.DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date() }, form.getInputProps('dob')))));
+                    }, leftIcon: React__default["default"].createElement(MaleIcon, null), disabled: loading }, t('ssov2.setup.field.gender.male')))),
+        React__default["default"].createElement(index$6.DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date(), disabled: loading }, form.getInputProps('dob')))));
 };
 const SSOSetupScreen = ({ hidden, index: index$1, }) => {
@@ -1731,6 +1846,7 @@ const SSOSetupScreen = ({ hidden, index: index$1, }) => {
     const { goNext, steps, addStep, shareData } = store.useSSOSteps();
     const { setupSource } = store.useSSOV2Store();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const [loading, setLoading] = React__default["default"].useState(false);
     const currentStep = steps[index$1];
     const config = currentStep === null || currentStep === void 0 ? void 0 : currentStep.config;
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
@@ -1809,100 +1925,108 @@ const SSOSetupScreen = ({ hidden, index: index$1, }) => {
                 .oneOf(['male', 'female'], t('ssov2.validate.gender.oneOf')), dob: yup__namespace.date().required(t('ssov2.validate.dob.required')), name: yup__namespace.string().required(t('ssov2.validate.name.required')) }))),
     });
     const onSubmit = (values) => tslib_es6.__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 store.updateUserInfo({
-            name,
-            birthday: dayjs__default["default"](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__default["default"](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 store.updateUserInfo({
+                name,
+                birthday: dayjs__default["default"](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__default["default"](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: store.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: store.SSOStepTypeType.OTP,
+                            config: {
+                                phone,
+                                otpType: 'phone-sms',
+                                isUpdatePhone: true,
+                                afterAction: 'submitSetup',
+                                setupData,
+                            },
+                        });
+                        goNext();
                     }
-                    addStep({
-                        type: store.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 store.updateUserInfo({
+                        name,
+                        birthday: dayjs__default["default"](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) {
+                        store.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: store.SSOStepTypeType.OTP,
-                        config: {
-                            phone,
-                            otpType: 'phone-sms',
-                            isUpdatePhone: true,
-                            afterAction: 'submitSetup',
-                            setupData,
-                        },
-                    });
-                    goNext();
                 }
             }
             else {
-                // close?
-                const res = yield store.updateUserInfo({
-                    name,
-                    birthday: dayjs__default["default"](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) {
-                    store.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["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
@@ -1911,10 +2035,10 @@ const SSOSetupScreen = ({ hidden, index: index$1, }) => {
             React__default["default"].createElement(core.Stack, { spacing: 8 },
                 React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.setup.title')),
                 React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.setup.description'))),
-            needPass && React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1 }),
-            React__default["default"].createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form$1 }),
+            needPass && (React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1, loading: loading })),
+            React__default["default"].createElement(OtherSetup, { needPhone: needPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, form: form$1, loading: loading }),
             errMsg && (React__default["default"].createElement(index$2.Text, { color: "red.6", size: "p4" }, errMsg)),
-            React__default["default"].createElement(index$3.Button, { type: "submit", variant: "primary", fullWidth: true }, needPhone
+            React__default["default"].createElement(index$3.Button, { type: "submit", variant: "primary", fullWidth: true, loading: loading, disabled: loading }, needPhone
                 ? t('ssov2.setup.button.veriyPhone')
                 : authFlow === 'register'
                     ? t('ssov2.setup.button.createAccount')
@@ -1925,46 +2049,57 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
     const { t } = index.useTranslations();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { addStep, goNext, setShareData } = store.useSSOSteps();
+    const [loading, setLoading] = React__default["default"].useState(false);
     return (React__default["default"].createElement("form", { style: {
             display: hidden ? 'none' : 'block',
         }, onSubmit: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
             e.preventDefault();
-            const email = e.currentTarget.email.value;
-            const existRes = yield store.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 store.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: store.SSOStepTypeType.OTP,
+                            config: {
+                                email,
+                                otpType: 'update-email',
+                                afterAction: 'setup',
+                            },
+                        });
+                        goNext();
+                    }
+                    else {
+                        setErrMsg(t('ssov2.email.alreadyUsed'));
                     }
-                    addStep({
-                        type: store.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["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$2.Text, { size: "s1", weight: "semiBold" }, t('ssov2.updateEmail.title')),
             React__default["default"].createElement(index$2.Text, { size: "p4" }, t('ssov2.updateEmail.description'))),
-        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24 }),
-        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16 }, t('ssov2.updateEmail.button'))));
+        React__default["default"].createElement(index$5.Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, onChange: () => setErrMsg(''), disabled: loading }),
+        React__default["default"].createElement(index$3.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, loading: loading, disabled: loading }, t('ssov2.updateEmail.button'))));
 };
 const SSOScreenRenderer = () => {