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

package/build/ssoV2.js

@@ -2,29 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-c3f3259f.js');
+var tslib_es6 = require('./tslib.es6-22334994.js');
 var React = require('react');
-var index$5 = require('./index-d87b818e.js');
-var store = require('./store-b6e93a3e.js');
+var index$5 = require('./index-6696ad89.js');
+var store = require('./store-6e91182d.js');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var index$2 = require('./index-de8619b3.js');
-var logoIcon = require('./logoIcon-bdd83bfe.js');
-var index$4 = require('./index-ffa7a87f.js');
-var index$1 = require('./index-5fc2cd51.js');
+var index$2 = require('./index-c96b819e.js');
+var logoIcon = require('./logoIcon-e54bd797.js');
+var index$4 = require('./index-20c597a1.js');
+var index$1 = require('./index-5f56e01d.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-require('./index-e686ca2a.js');
-require('./index-ea3147c3.js');
-var useMantineLocale = require('./useMantineLocale-e6ec128f.js');
-var index$3 = require('./index-dbba4167.js');
-var index = require('./index-b3c64944.js');
+require('./index-62943ea5.js');
+require('./index-8e818b2a.js');
+var useMantineLocale = require('./useMantineLocale-8c2720be.js');
+var index$3 = require('./index-fcdd2edb.js');
+var index = require('./index-d899cf05.js');
 require('@mantine/hooks');
-require('./utils-fe54d063.js');
-require('./other-02cf041a.js');
-require('./index-0c66ee32.js');
-var Locale = require('./Locale-bd14c9e1.js');
-var Google = require('./Google-d68f1d9f.js');
+require('./utils-504829b2.js');
+require('./other-ab6201ba.js');
+require('./index-1a1b73a9.js');
+var Locale = require('./Locale-49f73d3d.js');
+var Google = require('./Google-8931d3a8.js');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var cn = require('classnames');
@@ -32,28 +32,28 @@ var other = require('@hhgtech/icons/other');
 var debounce = require('lodash/debounce');
 var throttle = require('lodash/throttle');
 var Flags = require('react-phone-number-input/flags');
-var useScreenSize = require('./useScreenSize-6405c8d7.js');
+var useScreenSize = require('./useScreenSize-bba57188.js');
 var vaul = require('vaul');
-var utils = require('./utils-a6a14827.js');
-var index$6 = require('./index-6f8821b3.js');
+var utils = require('./utils-9bd88d5a.js');
+var index$6 = require('./index-b0e0926c.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var form = require('@mantine/form');
 var yup = require('yup');
 var dayjs = require('dayjs');
-var index$7 = require('./index-89a13973.js');
+var index$7 = require('./index-cfcd6a21.js');
 require('@mantine/carousel');
 require('./miscTheme.js');
-require('./useUniqueId-2418857a.js');
+require('./useUniqueId-63428d01.js');
 require('./constantsSite.js');
 require('zustand');
 require('./constantsIsProduction.js');
-require('./normalizeLink-504885b8.js');
+require('./normalizeLink-ca1bb1d9.js');
 require('./miscCookieHelper.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
-require('./index.styles-18c4b28b.js');
+require('./index.styles-393f1d67.js');
 require('@mantine/notifications');
-require('./translationsContext-1004699f.js');
+require('./translationsContext-07bca71f.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -190,13 +190,195 @@ const BackgroundHeader = () => (React__default["default"].createElement("svg", {
             React__default["default"].createElement("stop", { stopColor: "#fff", stopOpacity: "0" }),
             React__default["default"].createElement("stop", { offset: "1", stopColor: "#fff" })))));
 
+const isPhoneVerifedAlready = (userInfo, flowData) => {
+    var _a;
+    if (flowData === null || flowData === void 0 ? void 0 : flowData.metaData) {
+        return (_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_phone_verified;
+    }
+    return (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone_verified_at) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone);
+};
+const isSetupFullInfoAlready = (userInfo, flowData) => {
+    var _a, _b, _c;
+    if (flowData === null || flowData === void 0 ? void 0 : flowData.metaData) {
+        return (((_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_name) &&
+            ((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_gender) &&
+            ((_c = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _c === void 0 ? void 0 : _c.is_birthday));
+    }
+    const hasName = !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.name);
+    const hasGender = typeof (userInfo === null || userInfo === void 0 ? void 0 : userInfo.gender) === 'number';
+    const hasBirthday = !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.birthday);
+    return hasName && hasGender && hasBirthday;
+};
+const isExistUpdateEmailStep = (steps) => {
+    return steps.find((s) => s.type === store.SSOStepTypeType.UPDATE_EMAIL);
+};
+
+const isSocialFlowFn = (flowData) => {
+    return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'google' || (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'facebook';
+};
+const isPhoneFlowFn = (flowData) => {
+    return ((flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'sms' ||
+        (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'zalo' ||
+        (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'phone');
+};
+const isEmailFlowFn = (flowData) => {
+    return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'email';
+};
+const isDisplayProgressBarFn = (flowData, step) => {
+    const showProgressBar = (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP ||
+        (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.SETUP_FULL ||
+        (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.VERIFY_PHONE ||
+        (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.PASSWORD ||
+        (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.FORGOT_PASSWORD_PHONE ||
+        (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.FORGOT_PASSWORD_SETUP ||
+        (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.EMAIL ||
+        (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.UPDATE_EMAIL;
+    const isWhiteListFlow = isSocialFlowFn(flowData) ||
+        isPhoneFlowFn(flowData) ||
+        isEmailFlowFn(flowData);
+    return showProgressBar && isWhiteListFlow;
+};
+const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo) => {
+    var _a, _b;
+    const step = steps[currentStepIndex];
+    const isSocialFlow = isSocialFlowFn(flowData);
+    const isPhoneFlow = isPhoneFlowFn(flowData);
+    const isEmailFlow = isEmailFlowFn(flowData);
+    /** Social (Google, Facebook): FIRST => VERIFY_PHONE | OTP => STEP_FULL */
+    if (isSocialFlow) {
+        const arrSteps = [
+            !isPhoneVerifedAlready(userInfo, flowData)
+                ? [store.SSOStepTypeType.VERIFY_PHONE, store.SSOStepTypeType.OTP]
+                : undefined,
+            isExistUpdateEmailStep(steps)
+                ? (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
+                    ? store.SSOStepTypeType.OTP
+                    : store.SSOStepTypeType.UPDATE_EMAIL
+                : undefined,
+            !userInfo || !store.isUserFinishedSetup(userInfo)
+                ? store.SSOStepTypeType.SETUP_FULL
+                : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        const previousStep = steps[currentStepIndex - 1];
+        return [
+            arrSteps.length,
+            (previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === store.SSOStepTypeType.UPDATE_EMAIL
+                ? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
+                : arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    if (isPhoneFlow && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup') {
+        const arrSteps = [
+            !isPhoneVerifedAlready(userInfo, flowData)
+                ? store.SSOStepTypeType.OTP
+                : undefined,
+            !((_a = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _a === void 0 ? void 0 : _a.is_pass)
+                ? store.SSOStepTypeType.FORGOT_PASSWORD_SETUP
+                : undefined,
+            !isSetupFullInfoAlready(userInfo, flowData)
+                ? store.SSOStepTypeType.SETUP_FULL
+                : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        return [
+            arrSteps.length,
+            arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    if (isPhoneFlow && (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'login') {
+        const arrSteps = [
+            store.SSOStepTypeType.PASSWORD,
+            !isPhoneVerifedAlready(userInfo, flowData)
+                ? [store.SSOStepTypeType.FORGOT_PASSWORD_PHONE, store.SSOStepTypeType.OTP]
+                : undefined,
+            isExistUpdateEmailStep(steps)
+                ? (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
+                    ? store.SSOStepTypeType.OTP
+                    : store.SSOStepTypeType.UPDATE_EMAIL
+                : undefined,
+            !isSetupFullInfoAlready(userInfo, flowData)
+                ? store.SSOStepTypeType.SETUP_FULL
+                : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        const previousStep = steps[currentStepIndex - 1];
+        return [
+            arrSteps.length,
+            (previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === store.SSOStepTypeType.UPDATE_EMAIL
+                ? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
+                : arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    if (isEmailFlow) {
+        const hasPasswordStep = !((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_pass);
+        const hasPhoneStep = !isPhoneVerifedAlready(userInfo, flowData);
+        const hasSetupFullStep = !isSetupFullInfoAlready(userInfo, flowData);
+        if (!hasPasswordStep && !hasPhoneStep && !hasSetupFullStep)
+            return [];
+        const arrSteps = [
+            (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
+                ? store.SSOStepTypeType.OTP
+                : store.SSOStepTypeType.EMAIL,
+            hasPasswordStep
+                ? store.SSOStepTypeType.FORGOT_PASSWORD_SETUP
+                : store.SSOStepTypeType.PASSWORD,
+            hasPhoneStep
+                ? (step === null || step === void 0 ? void 0 : step.type) === store.SSOStepTypeType.OTP
+                    ? store.SSOStepTypeType.OTP
+                    : store.SSOStepTypeType.VERIFY_PHONE
+                : undefined,
+            hasSetupFullStep ? store.SSOStepTypeType.SETUP_FULL : undefined,
+        ]
+            .flat()
+            .filter(Boolean);
+        const previousStep = steps[currentStepIndex - 1];
+        return [
+            arrSteps.length,
+            (previousStep === null || previousStep === void 0 ? void 0 : previousStep.type) === store.SSOStepTypeType.VERIFY_PHONE
+                ? arrSteps.findLastIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1
+                : arrSteps.findIndex((type) => type === (step === null || step === void 0 ? void 0 : step.type)) + 1,
+        ];
+    }
+    return [];
+};
+const ProgressBar = () => {
+    // const initUserInfo = useRef<UserInfo | undefined | null>()
+    const { steps, currentStepIndex } = store.useSSOSteps();
+    const { flowData, userInfo } = store.useSSOV2Store();
+    /** No need update state IF userInfo is changed */
+    const initUserInfo = React.useMemo(() => userInfo, [userInfo]);
+    const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, { steps, currentStepIndex }, initUserInfo);
+    if (!activeStepNumber || totalStepNumber === 1)
+        return null;
+    return (React__default["default"].createElement(core.Flex, { gap: 2 }, Array.from({ length: totalStepNumber }).map((_, idx) => {
+        const currentStepNumber = idx + 1;
+        return (React__default["default"].createElement(core.Box, { key: currentStepNumber, style: {
+                width: 'auto',
+                height: 2,
+                flex: 1,
+                borderRadius: 4,
+                backgroundColor: currentStepNumber <= activeStepNumber ? '#00B16A' : '#D2D6DC',
+            } }));
+    })));
+};
+
 const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     var _a;
-    const { steps, goBack } = store.useSSOSteps();
+    const { steps, goBack, currentStepIndex } = store.useSSOSteps();
+    const { flowData } = store.useSSOV2Store();
     const { locale, tracking } = useSSOState();
-    const showBack = steps.length > 1;
-    const showClose = steps.length === 1;
-    const showLogo = steps.length === 1;
+    const currentStep = steps[currentStepIndex];
+    const showProgressBar = isDisplayProgressBarFn(flowData, currentStep);
+    const showBack = (steps.length > 1 && !showProgressBar) ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.OTP ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.PASSWORD ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.EMAIL;
+    const showClose = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.FIRST;
+    const showLogo = (steps.length === 1 || showProgressBar) && !showBack;
     const logoType = (_a = index$2.LOCALE_SPECS[locale]) === null || _a === void 0 ? void 0 : _a.LOGO_TYPE;
     const [closeConfirmOpen, setCloseConfirmOpen] = React__default["default"].useState(false);
     const onCloseClick = () => {
@@ -239,7 +421,11 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         display: 'block',
                     },
                 },
-            }), withCloseButton: false, zIndex: index$2.ZINDEX_SSO },
+            }), withCloseButton: false, zIndex: index$2.ZINDEX_SSO, overlayProps: {
+                'data-event-label': 'Focus out',
+                'data-event-category': tracking === null || tracking === void 0 ? void 0 : tracking.category,
+                'data-event-action': tracking === null || tracking === void 0 ? void 0 : tracking.action,
+            } },
             React__default["default"].createElement("div", { style: {
                     height: 40,
                     display: 'flex',
@@ -252,7 +438,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         padding: 8,
                         background: 'white',
                         borderRadius: '100%',
-                    }, onClick: goBack, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "back" },
+                    }, onClick: goBack, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Back" },
                     React__default["default"].createElement(arrow.ChevronLeft, null))),
                 showLogo && (React__default["default"].createElement(logoIcon.LogoIcon, { type: logoType, height: 32, width: 'unset' })),
                 showClose && (React__default["default"].createElement(index$4.Button, { variant: "white", style: {
@@ -263,6 +449,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         borderRadius: '100%',
                     }, onClick: onCloseClick, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Exit" },
                     React__default["default"].createElement(core$1.Close, null)))),
+            showProgressBar && React__default["default"].createElement(ProgressBar, null),
             React__default["default"].createElement("div", { style: {
                     flex: 1,
                 } }, children)),
@@ -406,7 +593,10 @@ const SSOEmailScreen = ({ hidden, }) => {
     const { t } = index.useTranslations();
     const [loading, setLoading] = React__default["default"].useState(false);
     const [errMsg, setErrMsg] = React__default["default"].useState('');
-    const trackingCategory = `SSO - Sign Up via Email`;
+    const { flowData } = store.useSSOV2Store();
+    const trackingCategory = flowData.flow === 'signup'
+        ? `SSO - Sign Up via Email`
+        : 'SSO - Sign In via Email';
     const trackingAction = 'Continue With Email';
     const { setTracking } = useSSOState();
     React.useEffect(() => {
@@ -434,6 +624,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'login',
+                                metaData: existRes._data,
                             },
                         });
                         // go to password screen
@@ -451,6 +642,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             flowData: {
                                 method: 'email',
                                 flow: 'signup',
+                                metaData: existRes._data,
                             },
                         });
                         if (!((_b = existRes._data) === null || _b === void 0 ? void 0 : _b.provider)) {
@@ -469,7 +661,7 @@ const SSOEmailScreen = ({ hidden, }) => {
                             config: {
                                 email,
                                 otpType: 'email',
-                                afterAction: 'setup',
+                                afterAction: 'forgot',
                             },
                         });
                         goNext();
@@ -1810,7 +2002,7 @@ function CountrySelectWithIcon(_a) {
     var { value, options, className, 
     // iconComponent: Icon,
     // getIconAspectRatio,
-    arrowComponent: Arrow = DefaultArrowComponent, onChange, disabled, readOnly } = _a, rest = tslib_es6.__rest(_a, ["value", "options", "className", "arrowComponent", "onChange", "disabled", "readOnly"]);
+    arrowComponent: Arrow = DefaultArrowComponent, onChange, disabled, readOnly, trackingFn } = _a, rest = tslib_es6.__rest(_a, ["value", "options", "className", "arrowComponent", "onChange", "disabled", "readOnly", "trackingFn"]);
     const { t } = index.useTranslations();
     const [open, setOpen] = React.useState(false);
     const [modalStyle, setModalStyle] = React.useState({});
@@ -1894,13 +2086,13 @@ function CountrySelectWithIcon(_a) {
             React__default["default"].createElement(SelectCountryItem, { option: selectedOption, onSelect: (option) => {
                     onChange_(option.value);
                     setOpen(false);
-                } }))),
+                }, trackingFn: trackingFn }))),
         React__default["default"].createElement(core.Stack, { spacing: 0 },
             React__default["default"].createElement(index$3.Text, { size: "s4" }, t('ssov2.first.search.country.all')),
             filteredOptions.map((option) => (React__default["default"].createElement(SelectCountryItem, { option: option, key: option.value, onSelect: (option) => {
                     onChange_(option.value);
                     setOpen(false);
-                }, selected: selectedOption.value === option.value }))))));
+                }, selected: selectedOption.value === option.value, trackingFn: trackingFn }))))));
     const FlagSelected = Flags__default["default"][selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value];
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: "PhoneInputCountry", ref: countryDivRef },
@@ -1964,7 +2156,7 @@ function CountrySelectWithIcon(_a) {
                     }, onClick: () => setOpen(false) }),
                 React__default["default"].createElement("div", { style: Object.assign({ position: 'fixed', height: 540, top: '100%', left: 0, width: '100%', backgroundColor: 'white', padding: '8px 24px', zIndex: index$2.ZINDEX_SSO + 9, borderRadius: 12, boxShadow: '0px 0px 1px 0px #0000000A, 0px 4px 8px 0px #0000000A, 0px 16px 24px 0px #0000000A, 0px 24px 32px 0px #0000000A', overflow: 'auto' }, modalStyle) }, SelectCountryContent))))));
 }
-const SelectCountryItem = ({ option, onSelect, selected, }) => {
+const SelectCountryItem = ({ option, onSelect, selected, trackingFn, }) => {
     const selectedCallingCode = React.useMemo(() => {
         if (!option.value)
             return '';
@@ -1975,14 +2167,15 @@ const SelectCountryItem = ({ option, onSelect, selected, }) => {
         return '';
     }, [option.value]);
     const Flag = Flags__default["default"][option.value];
-    return (React__default["default"].createElement(core.Stack, { sx: {
+    const tracking = (trackingFn === null || trackingFn === void 0 ? void 0 : trackingFn(option)) || {};
+    return (React__default["default"].createElement(core.Stack, Object.assign({ sx: {
             padding: '0 24px',
             backgroundColor: selected ? '#e3f2ff' : 'transparent',
             ':hover': { backgroundColor: '#F7F9FA' },
             cursor: 'pointer',
             marginLeft: -24,
             marginRight: -24,
-        }, justify: "center", onClick: () => onSelect(option) },
+        }, justify: "center", onClick: () => onSelect(option) }, tracking),
         React__default["default"].createElement(core.Group, { position: "apart", sx: {
                 height: 50,
                 borderBottom: '1px solid #E4E8EC',
@@ -2034,7 +2227,7 @@ function isSameOptionValue(value1, value2) {
 const PhoneForwardRef = (props, ref) => {
     const { isError, defaultCountry, 
     // countries = countriesDefault,
-    countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, className } = props, inputProps = tslib_es6.__rest(props, ["isError", "defaultCountry", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "className"]);
+    countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, className, trackingFn } = props, inputProps = tslib_es6.__rest(props, ["isError", "defaultCountry", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "className", "trackingFn"]);
     const [value, setValue] = React.useState(defaultValue || valueProps);
     const [PhoneInputUtils, setPhoneInputUtils] = React.useState(null);
     const onChange = (val) => {
@@ -2058,7 +2251,7 @@ const PhoneForwardRef = (props, ref) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref: ref, value: value, onChange: onChange, 
         // countries={countries}
-        defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: cn__default["default"](index$5.styles.phoneInput, { isError, [index$5.styles.error]: isError }, className), countrySelectComponent: CountrySelectWithIcon }, inputProps)));
+        defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: cn__default["default"](index$5.styles.phoneInput, { isError, [index$5.styles.error]: isError }, className), countrySelectComponent: CountrySelectWithIcon, countrySelectProps: { trackingFn } }, inputProps)));
 };
 const PhoneWithCustomCountrySelect = React.forwardRef(PhoneForwardRef);
 
@@ -2094,11 +2287,12 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale, onClose, setTracking } = useSSOState();
     const { addStep, goNext } = store.useSSOSteps();
+    const { setUserInfo } = store.useSSOV2Store();
     const [activeTab, setActiveTab] = React__default["default"].useState('login');
     const { legalTextType } = config || {};
     const { t } = index.useTranslations();
-    const trackingCategory = 'Sign In or Sign Up';
-    const trackingAction = `SSO - ${activeTab === 'login' ? 'Sign In' : 'Sign Up'}`;
+    const trackingAction = 'Sign In or Sign Up';
+    const trackingCategory = `SSO - ${activeTab === 'login' ? 'Sign In' : 'Sign Up'}`;
     React.useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -2110,20 +2304,31 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     }, [hidden]);
     const [loading, setLoading] = React__default["default"].useState(false);
     const handleLoginBySocial = (credential, provider) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
         const res = yield loginBySocial(credential, provider);
         if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
             store.handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
             const userInfo = yield store.getUserInfo();
+            setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
             if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo._status) === 1 && userInfo._data) {
                 store.useSSOV2Store.setState({
                     flowData: {
                         method: provider,
                     },
                 });
-                if (!store.isUserFinishedSetup(userInfo._data) ||
-                    !userInfo._data.phone ||
-                    !userInfo._data.phone_verified_at) {
+                const isNotHavePhone = !userInfo._data.phone || !userInfo._data.phone_verified_at;
+                if (isNotHavePhone) {
+                    store.useSSOV2Store.setState((f) => ({
+                        flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'signup', isVerifyPhone: true }),
+                    }));
+                    addStep({
+                        type: store.SSOStepTypeType.VERIFY_PHONE,
+                        config: {
+                            provider: provider,
+                        },
+                    });
+                    goNext();
+                }
+                else if (!store.isUserFinishedSetup(userInfo._data)) {
                     store.useSSOV2Store.setState((f) => ({
                         flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'signup' }),
                     }));
@@ -2154,19 +2359,6 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                         goNext();
                     }
                 }
-                else if (!((_c = userInfo._data) === null || _c === void 0 ? void 0 : _c.phone_verified_at) ||
-                    !((_d = userInfo._data) === null || _d === void 0 ? void 0 : _d.phone)) {
-                    store.useSSOV2Store.setState((f) => ({
-                        flowData: Object.assign(Object.assign({}, f.flowData), { flow: 'login', isVerifyPhone: true }),
-                    }));
-                    addStep({
-                        type: store.SSOStepTypeType.VERIFY_PHONE,
-                        config: {
-                            provider: provider,
-                        },
-                    });
-                    goNext();
-                }
                 else {
                     onClose === null || onClose === void 0 ? void 0 : onClose(true);
                 }
@@ -2206,7 +2398,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         };
     }, []);
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _e, _f;
+        var _c, _d;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2215,12 +2407,13 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            const provider = (_e = userExist._data) === null || _e === void 0 ? void 0 : _e.provider;
-            if ((_f = userExist._data) === null || _f === void 0 ? void 0 : _f.is_pass) {
+            const provider = (_c = userExist._data) === null || _c === void 0 ? void 0 : _c.provider;
+            if ((_d = userExist._data) === null || _d === void 0 ? void 0 : _d.is_pass) {
                 store.useSSOV2Store.setState({
                     flowData: {
                         method: 'zalo',
                         flow: 'login',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2248,6 +2441,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     flowData: {
                         method: 'zalo',
                         flow: 'signup',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2255,7 +2449,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-zalo',
-                        afterAction: 'setup',
+                        afterAction: 'forgot',
                     },
                 });
                 goNext();
@@ -2267,7 +2461,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickContinuePhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _g, _h;
+        var _e, _f;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2276,12 +2470,13 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            const provider = (_g = userExist._data) === null || _g === void 0 ? void 0 : _g.provider;
-            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
+            const provider = (_e = userExist._data) === null || _e === void 0 ? void 0 : _e.provider;
+            if ((_f = userExist._data) === null || _f === void 0 ? void 0 : _f.is_pass) {
                 store.useSSOV2Store.setState({
                     flowData: {
                         method: 'sms',
                         flow: 'login',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2309,6 +2504,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     flowData: {
                         method: 'sms',
                         flow: 'signup',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2316,7 +2512,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-sms',
-                        afterAction: 'setup',
+                        afterAction: 'forgot',
                     },
                 });
                 goNext();
@@ -2328,7 +2524,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickLoginWithPhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k;
+        var _g, _h;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2337,7 +2533,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (!userExist._data || !((_j = userExist._data) === null || _j === void 0 ? void 0 : _j.is_pass)) {
+            if (!userExist._data || !((_g = userExist._data) === null || _g === void 0 ? void 0 : _g.is_pass)) {
                 useMantineLocale.showNotification({
                     message: t('ssov2.first.noAccountOrPass'),
                     type: 'danger',
@@ -2345,11 +2541,12 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                 setActiveTab('signup');
                 return setLoading(false);
             }
-            if ((_k = userExist._data) === null || _k === void 0 ? void 0 : _k.is_pass) {
+            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
                 store.useSSOV2Store.setState({
                     flowData: {
                         method: 'phone',
                         flow: 'login',
+                        metaData: userExist._data,
                     },
                 });
                 addStep({
@@ -2371,7 +2568,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         store.useSSOV2Store.setState({
             flowData: {
                 method: 'email',
-                flow: 'login',
+                flow: activeTab === 'login' ? 'login' : 'signup',
             },
         });
         addStep({
@@ -2428,7 +2625,17 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                         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, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" }))),
+                        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, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone", trackingFn: React.useCallback((option) => {
+                                if (!(option === null || option === void 0 ? void 0 : option.label))
+                                    return;
+                                return {
+                                    'data-event-action': 'Country Selection',
+                                    'data-event-label': option.label,
+                                    'data-event-category': activeTab === 'signup'
+                                        ? 'SSO - Sign Up'
+                                        : 'SSO - Sign In',
+                                };
+                            }, [activeTab]) }))),
                 React__default["default"].createElement(index$4.Button, { size: "lg", variant: "primary", onClick: onClickLoginWithPhone, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue Login", display: activeTab === 'login' ? 'block' : 'none' }, t('ssov2.button.continue')),
                 React__default["default"].createElement(index$4.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Zalo", display: activeTab === 'signup' ? 'block' : 'none' }, t('ssov2.button.otp.zalo')),
                 React__default["default"].createElement(index$4.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", display: activeTab === 'signup' ? 'block' : 'none' }, t('ssov2.button.otp.sms'))),
@@ -2510,10 +2717,8 @@ const initSendUpdateEmailOtp = (email) => tslib_es6.__awaiter(void 0, void 0, vo
     });
 });
 const resendUpdateEmailOTP = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    const formData = new FormData();
     return store.fetchSSOV2Api(store.SSO_V2_PATHS.ECOM_CARE.RESEND_OTP, {
-        method: 'POST',
-        body: formData,
+        method: 'GET',
     });
 });
 const verifyUpdateEmailOTP = (otpCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -2548,7 +2753,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
             ? 'Sign Up'
             : 'Sign In'} via ${trackingMethod}`;
     const trackingAction = isEmail
-        ? 'Verify Email'
+        ? 'Verify Your Email'
         : `Verify Phone Number via ${isZalo ? 'Zalo' : isSMS ? 'SMS' : ''}`;
     React.useEffect(() => {
         if (!hidden) {
@@ -2561,15 +2766,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
     }, [hidden]);
     const addStepAndGoNext = (step) => {
         store.useSSOSteps.setState((old) => {
-            var _a, _b;
             const oldSteps = old.steps;
-            if (((_a = oldSteps[index$1 - 1]) === null || _a === void 0 ? void 0 : _a.type) === store.SSOStepTypeType.VERIFY_PHONE ||
-                ((_b = oldSteps[index$1 - 1]) === null || _b === void 0 ? void 0 : _b.type) === store.SSOStepTypeType.UPDATE_EMAIL) {
-                return {
-                    steps: oldSteps.slice(0, index$1 - 1).concat(step),
-                    currentStepIndex: index$1 - 1,
-                };
-            }
             return {
                 steps: oldSteps.slice(0, index$1).concat(step),
                 currentStepIndex: index$1,
@@ -2900,7 +3097,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                         'data-event-category': trackingCategory,
                         'data-event-action': trackingAction,
                         'data-event-label': 'Enter Code',
-                    } })),
+                    }, placeholder: "*" })),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -2920,6 +3117,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
 const SSOPasswordScreen = ({ hidden, config, }) => {
     const { t } = index.useTranslations();
     const { onClose, setTracking } = useSSOState();
+    const { setUserInfo, flowData } = store.useSSOV2Store();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const phone = config === null || config === void 0 ? void 0 : config.phone;
     const method = config === null || config === void 0 ? void 0 : config.method;
@@ -2983,11 +3181,13 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onAuthSuccess = (data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
         store.handleAuthSuccess(data);
+        const userInfo = yield store.getUserInfo();
+        const isPhoneFlow = isPhoneFlowFn(flowData);
+        const isEmailFlow = isEmailFlowFn(flowData);
+        setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
         if (!phone && !!email) {
-            const userInfo = yield store.getUserInfo();
-            if (!((_c = userInfo._data) === null || _c === void 0 ? void 0 : _c.phone_verified_at) || !((_d = userInfo._data) === null || _d === void 0 ? void 0 : _d.phone)) {
+            if (store.isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
                 store.useSSOV2Store.setState((s) => ({
                     flowData: Object.assign(Object.assign({}, s.flowData), { isVerifyPhone: true }),
                 }));
@@ -3001,6 +3201,27 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
                 return;
             }
         }
+        if (store.isLoginWithPhoneNotVerifedYet(flowData, userInfo._data)) {
+            addStep({
+                type: store.SSOStepTypeType.FORGOT_PASSWORD_PHONE,
+                config: {
+                    phone: `${userInfo._data.area_code}${userInfo._data.phone}`,
+                    afterAction: 'setup',
+                },
+            });
+            goNext();
+            return;
+        }
+        if ((isPhoneFlow || isEmailFlow) && !store.isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+            addStep({
+                type: store.SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                },
+            });
+            goNext();
+            return;
+        }
         onClose === null || onClose === void 0 ? void 0 : onClose(true);
     });
     return (React__default["default"].createElement("form", { style: {
@@ -3049,6 +3270,47 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
         React__default["default"].createElement(index$4.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Sign In" }, t('ssov2.password.signIn'))));
 };
 
+const SetupLater = ({ style = {} }) => {
+    const { t } = index.useTranslations();
+    const { onClose, tracking } = useSSOState();
+    const [loading, setLoading] = React.useState(false);
+    const { userInfo, flowData } = store.useSSOV2Store();
+    const { currentStepIndex, steps, addStep, goNext } = store.useSSOSteps();
+    const currentStep = steps[currentStepIndex];
+    const onClickSetupLater = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (loading)
+            return;
+        setLoading(true);
+        if (userInfo &&
+            !store.isUserFinishedSetup(userInfo) &&
+            ((currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.VERIFY_PHONE ||
+                (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.FORGOT_PASSWORD_PHONE)) {
+            addStep({
+                type: store.SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo,
+                },
+            });
+            goNext();
+        }
+        else if (!store.isFlowFinishedSetup(flowData) &&
+            (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.VERIFY_PHONE) {
+            addStep({
+                type: store.SSOStepTypeType.SETUP_FULL,
+                config: {
+                    userInfo,
+                },
+            });
+            goNext();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+        }
+        setLoading(false);
+    });
+    return (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", color: "#737373", style: Object.assign({ fontWeight: 400 }, style), onClick: onClickSetupLater, disabled: loading, dataEventCategory: tracking === null || tracking === void 0 ? void 0 : tracking.category, dataEventAction: tracking === null || tracking === void 0 ? void 0 : tracking.action, dataEventLabel: "Setup Later" }, t('ssov2.button.setupLater')));
+};
+
 const SSOPasswordForgotPhone = ({ hidden, config, }) => {
     const phone = config === null || config === void 0 ? void 0 : config.phone;
     const { t } = index.useTranslations();
@@ -3096,7 +3358,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-zalo',
-                        afterAction: 'forgot',
+                        afterAction: config.afterAction || 'forgot',
                         provider: (_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider,
                     },
                 });
@@ -3139,7 +3401,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     config: {
                         phone,
                         otpType: 'phone-sms',
-                        afterAction: 'forgot',
+                        afterAction: config.afterAction || 'forgot',
                         provider: (_d = userExist._data) === null || _d === void 0 ? void 0 : _d.provider,
                     },
                 });
@@ -3167,7 +3429,8 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                 isError: !!errMsg, required: true, disabled: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" }),
             errMsg && (React__default["default"].createElement(index$3.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
             React__default["default"].createElement(index$4.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Zalo" }, t('ssov2.button.continueZalo')),
-            React__default["default"].createElement(index$4.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS')))));
+            React__default["default"].createElement(index$4.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS')),
+            React__default["default"].createElement(SetupLater, null))));
 };
 
 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" },
@@ -3208,11 +3471,12 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
     const { t } = index.useTranslations();
     const [loading, setLoading] = React__default["default"].useState(false);
     const [errMsg, setErrMsg] = React__default["default"].useState('');
-    const { setTracking } = useSSOState();
-    const { flowData } = store.useSSOV2Store();
+    const { setTracking, onClose } = useSSOState();
+    const { addStep, goNext } = store.useSSOSteps();
+    const { flowData, setUserInfo } = store.useSSOV2Store();
     const trackingMethod = flowData.method;
     const trackingCategory = `SSO - Sign In via ${trackingMethod}`;
-    const trackingAction = `Setup New Password`;
+    const trackingAction = `Setup Password`;
     React.useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3247,22 +3511,66 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                 password.length <= 50 &&
                 password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/) &&
                 password === confirmPassword) {
-                const res = yield store.resetPassword(password, confirmPassword);
+                const isPhoneOrEmailFlow = isPhoneFlowFn(flowData) || isEmailFlowFn(flowData);
+                const res = isPhoneOrEmailFlow
+                    ? yield store.updateUserInfo({
+                        password,
+                        confirm_password: confirmPassword,
+                        validate: '',
+                    })
+                    : 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);
-                    if (foundPasswordIndex === -1) {
-                        // reset to first step
-                        setSteps((s) => [s[0]]);
-                        store.useSSOSteps.setState({ currentStepIndex: 0 });
+                    if (isPhoneOrEmailFlow) {
+                        store.handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                        const userInfo = yield store.getUserInfo();
+                        // Phone
+                        if (isPhoneFlowFn(flowData)) {
+                            if (userInfo && !store.isUserFinishedSetup(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+                                addStep({
+                                    type: store.SSOStepTypeType.SETUP_FULL,
+                                    config: {
+                                        userInfo: userInfo === null || userInfo === void 0 ? void 0 : userInfo._data,
+                                    },
+                                });
+                                goNext();
+                            }
+                            else {
+                                onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                            }
+                        }
+                        // Email
+                        if (isEmailFlowFn(flowData)) {
+                            setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
+                            if (store.isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+                                addStep({
+                                    type: store.SSOStepTypeType.VERIFY_PHONE,
+                                    config: {
+                                        provider: 'email',
+                                    },
+                                });
+                                goNext();
+                            }
+                            else {
+                                onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                            }
+                        }
                     }
                     else {
-                        setSteps((s) => s.slice(0, foundPasswordIndex + 1));
-                        store.useSSOSteps.setState({ currentStepIndex: foundPasswordIndex });
+                        useMantineLocale.showNotification({
+                            type: 'success',
+                            message: 'Password has been reset successfully',
+                        });
+                        // back to login step
+                        const foundPasswordIndex = steps.findIndex((step) => step.type === store.SSOStepTypeType.PASSWORD);
+                        if (foundPasswordIndex === -1) {
+                            // reset to first step
+                            setSteps((s) => [s[0]]);
+                            store.useSSOSteps.setState({ currentStepIndex: 0 });
+                        }
+                        else {
+                            setSteps((s) => s.slice(0, foundPasswordIndex + 1));
+                            store.useSSOSteps.setState({ currentStepIndex: foundPasswordIndex });
+                        }
                     }
                     // onClose?.()
                 }
@@ -3290,7 +3598,9 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                     action: trackingAction,
                 } }),
             errMsg && (React__default["default"].createElement(index$3.Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default["default"].createElement(index$4.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Save" }, t('ssov2.button.save')))));
+            React__default["default"].createElement(index$4.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup' ? 'Create New Account' : 'Save' }, (flowData === null || flowData === void 0 ? void 0 : flowData.flow) === 'signup'
+                ? t('ssov2.setup.button.createAccount')
+                : t('ssov2.button.save')))));
 };
 
 const SSOPhoneVerify = ({ hidden, config, }) => {
@@ -3311,6 +3621,7 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
             });
         }
     }, [hidden]);
+    const { source } = store.useSSOV2Store();
     const { addStep, goNext } = store.useSSOSteps();
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
@@ -3410,7 +3721,8 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
                             setErrMsg('');
                         }, isError: !!errMsg, required: true, name: "phone", disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone" })),
                 React__default["default"].createElement(index$4.Button, { size: "lg", variant: "primary", onClick: onClickContinueZalo, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Zalo" }, t('ssov2.button.continueZalo')),
-                React__default["default"].createElement(index$4.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS'))))));
+                React__default["default"].createElement(index$4.Button, { size: "lg", variant: "secondary", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS" }, t('ssov2.button.continueSMS')),
+                source !== 'care_onboarding' && source !== 'ecom' && React__default["default"].createElement(SetupLater, null)))));
 };
 
 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" },
@@ -3442,39 +3754,19 @@ const MaleIcon = () => (React__default["default"].createElement("svg", { width:
     React__default["default"].createElement("path", { d: "M11.122 6.393a.157.157 0 0 1-.051-.304c.687-.234 1.688-.344 2.26-.03a.156.156 0 0 1-.15.274c-.463-.254-1.38-.163-2.009.052a.2.2 0 0 1-.05.008m-2.19.572a.16.16 0 0 1-.144-.097c-.013-.027-.123-.097-.363-.129-.325-.043-.672.016-.772.131a.156.156 0 1 1-.236-.205c.214-.245.721-.29 1.103-.228.209.034.475.116.556.311a.156.156 0 0 1-.144.217m.222-.571a.2.2 0 0 1-.05-.009c-.629-.215-1.546-.306-2.009-.051a.156.156 0 1 1-.15-.274c.572-.315 1.572-.206 2.26.03a.156.156 0 0 1-.05.304", fill: "#404040" }),
     React__default["default"].createElement("path", { d: "m11.12 9.547-.019.001a8 8 0 0 1-1.928 0 .156.156 0 1 0-.037.31c.665.08 1.337.08 2.003 0a.156.156 0 0 0-.019-.31", fill: "#D84023" })));
 
+// import { StyledPhone } from '../components/phone'
 // always has name, gender dob
-const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isPhoneDisabled, loading, tracking, }) => {
+const OtherSetup = ({ form, 
+// needPhone,
+// skipPhone,
+needEmail, isEmailDisable, 
+// isPhoneDisabled,
+loading, tracking, }) => {
     const { t } = index.useTranslations();
-    const { locale = 'vi-VN' } = useSSOState();
+    // const { locale = 'vi-VN' } = useSSOState()
     const { setupSource } = store.useSSOV2Store();
     const [dobChanged, setDobChanged] = React__default["default"].useState(false);
     return (React__default["default"].createElement(core.Stack, { spacing: 12 },
-        needPhone && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            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", disabled: loading || isPhoneDisabled, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Phone" })),
-            !skipPhone && (React__default["default"].createElement(core.Group, { spacing: 24 },
-                React__default["default"].createElement(index$3.Text, { size: "p4" }, t('ssov2.setup.field.otp.label')),
-                React__default["default"].createElement(index$5.Radio.Group, Object.assign({ name: "otpMethod", styles: {
-                        root: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            flexWrap: 'wrap',
-                            gap: 24,
-                        },
-                    } }, form.getInputProps('otpMethod')),
-                    React__default["default"].createElement(index$5.Radio, { value: "zalo", label: "Zalo", styles: {
-                            label: {
-                                paddingLeft: 8,
-                            },
-                        }, disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Send OTP Code via Zalo" }),
-                    React__default["default"].createElement(index$5.Radio, { value: "sms", label: "SMS", styles: {
-                            label: {
-                                paddingLeft: 8,
-                            },
-                        }, disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Send OTP Code via SMS" })))))),
-        needEmail && (React__default["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, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Email" }, form.getInputProps('email')))),
         React__default["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, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Name" }, form.getInputProps('name'))),
         React__default["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,
@@ -3489,7 +3781,7 @@ const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isP
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'female');
-                    }, leftIcon: React__default["default"].createElement(FemaleIcon, null), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Gender Female" }, t('ssov2.setup.field.gender.female')),
+                    }, leftIcon: React__default["default"].createElement(FemaleIcon, null), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Gender" }, t('ssov2.setup.field.gender.female')),
                 React__default["default"].createElement(index$4.Button, { type: "button", styles: {
                         root: {
                             flex: 1,
@@ -3501,7 +3793,7 @@ const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isP
                         ? 'secondary'
                         : 'tertiary', onClick: () => {
                         form.setFieldValue('gender', 'male');
-                    }, leftIcon: React__default["default"].createElement(MaleIcon, null), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Gender Male" }, t('ssov2.setup.field.gender.male')))),
+                    }, leftIcon: React__default["default"].createElement(MaleIcon, null), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Gender" }, t('ssov2.setup.field.gender.male')))),
         React__default["default"].createElement(index$7.DatePicker, Object.assign({ name: "dob", label: t('ssov2.setup.field.dob.label'), withAsterisk: true, required: true, placeholder: t('ssov2.setup.field.dob.placeholder'), maxDate: new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate()), disabled: loading, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Birthday" }, form.getInputProps('dob'), { onChange: (e) => {
                 form.getInputProps('dob').onChange(e);
                 setDobChanged(true);
@@ -3509,9 +3801,13 @@ const OtherSetup = ({ form, needPhone, skipPhone, needEmail, isEmailDisable, isP
                 if (!form.getInputProps('dob').value && !dobChanged)
                     return;
                 form.getInputProps('dob').onBlur(e);
-            } }))));
+            } })),
+        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, "data-event-category": tracking === null || tracking === void 0 ? void 0 : tracking.category, "data-event-action": tracking === null || tracking === void 0 ? void 0 : tracking.action, "data-event-label": "Enter Email", style: {
+                display: isEmailDisable ? 'none' : 'block',
+            } }, form.getInputProps('email'))))));
 };
 
+// import { SSOPasswordWithConfirm } from '../passwordForgotSetup/passwordWithConfirm'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getDefaultData = (data) => {
     try {
@@ -3537,7 +3833,6 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     var _a, _b, _c;
     const { onClose, setTracking } = useSSOState();
     const { t } = index.useTranslations();
-    const { goNext, addStep } = store.useSSOSteps();
     const { setupSource, flowData } = store.useSSOV2Store();
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
@@ -3547,13 +3842,6 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     const provider = (_a = config === null || config === void 0 ? void 0 : config.userInfo) === null || _a === void 0 ? void 0 : _a.provider;
     const authFlow = flowData === null || flowData === void 0 ? void 0 : flowData.flow;
     const defaultData = getDefaultData(config === null || config === void 0 ? void 0 : config.setupDefaultData);
-    const needPass = (authMethod === 'phone' ||
-        authMethod === 'zalo' ||
-        authMethod === 'sms' ||
-        authMethod === 'email' ||
-        provider === 'email' ||
-        provider === 'phone') &&
-        !(userInfo === null || userInfo === void 0 ? void 0 : userInfo.is_pass);
     const skipPhone = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) && !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone_verified_at);
     const isPhoneDisabled = !!(configPhone || (defaultData === null || defaultData === void 0 ? void 0 : defaultData.phone) || skipPhone);
     const needPhone = authFlow === 'signup' &&
@@ -3573,8 +3861,6 @@ const SSOSetupScreen = ({ hidden, config, }) => {
         !(flowData === null || flowData === void 0 ? void 0 : flowData.isVerifyPhone) ||
         authMethod === 'facebook' ||
         provider === 'facebook';
-    // const needPhone = !userInfo?.phone_verified_at
-    // const needEmail = authFlow !== 'verify-phone'
     const isEmailDisable = (defaultEmail &&
         (authMethod === 'google' ||
             authMethod === 'email' ||
@@ -3582,7 +3868,7 @@ const SSOSetupScreen = ({ hidden, config, }) => {
             provider === 'email')) ||
         (!!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email) && !!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.email_verified_at));
     const trackingCategory = `SSO - ${authFlow === 'signup' ? 'Sign Up' : 'Existing Users'} via ${authMethod || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.provider)}`;
-    const trackingAction = 'Almost done';
+    const trackingAction = 'Add Information';
     React.useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3611,30 +3897,7 @@ const SSOSetupScreen = ({ hidden, config, }) => {
                 ? dayjs__default["default"](defaultData.birthday, 'MM/DD/YYYY').toDate()
                 : undefined }),
         validateInputOnBlur: true,
-        validate: form.yupResolver(yup__namespace.object().shape(Object.assign(Object.assign(Object.assign(Object.assign({}, (needPass
-            ? {
-                password: yup__namespace
-                    .string()
-                    .required(t('ssov2.validate.password.required'))
-                    .min(8, ' ')
-                    .max(50, ' ')
-                    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, ' '),
-                confirmPassword: yup__namespace
-                    .string()
-                    .required(t('ssov2.validate.confirmPassword.required'))
-                    .test('passwords-match', t('ssov2.validate.confirmPassword.match'), function (value) {
-                    return this.parent.password === value;
-                }),
-            }
-            : {})), (needPhone
-            ? Object.assign({ phone: yup__namespace.string().required(t('ssov2.validate.phone.required')) }, (!skipPhone
-                ? {
-                    otpMethod: yup__namespace
-                        .string()
-                        .required(t('ssov2.validate.otp.required'))
-                        .oneOf(['zalo', 'sms']),
-                }
-                : {})) : {})), (needEmail
+        validate: form.yupResolver(yup__namespace.object().shape(Object.assign(Object.assign({}, (needEmail
             ? {
                 email: setupSource === 'care'
                     ? yup__namespace
@@ -3651,15 +3914,13 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     const onSubmit = (values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
-            const { password, confirmPassword, phone, gender, name, dob, otpMethod } = values;
+            const { phone, gender, name, dob } = values;
             const { phoneNumber, areaCode } = splitPhone(phone || configPhone || '');
             // validate only, delay set data to after otp
             const res = yield 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,
@@ -3667,80 +3928,23 @@ const SSOSetupScreen = ({ hidden, config, }) => {
                 validate: 'true',
             });
             if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
-                // if need phone and has phone then start phone verify step, close after done
-                if (needPhone && !skipPhone) {
-                    const setupData = {
-                        name,
-                        birthday: dayjs__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,
-                                provider,
-                            },
-                        });
-                        goNext();
-                    }
-                    else {
-                        const res = yield resendUpdatePhoneOTP(phoneNumber, areaCode);
-                        if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
-                            setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
-                            return setLoading(false);
-                        }
-                        addStep({
-                            type: store.SSOStepTypeType.OTP,
-                            config: {
-                                phone,
-                                otpType: 'phone-sms',
-                                isUpdatePhone: true,
-                                afterAction: 'submitSetup',
-                                setupData,
-                                provider,
-                            },
-                        });
-                        goNext();
-                    }
+                const res = yield store.updateUserInfo({
+                    name,
+                    birthday: dayjs__default["default"](dob).format('YYYY-MM-DD'),
+                    email: values.email || undefined,
+                    phone_number: phoneNumber || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone),
+                    area_code: areaCode || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code),
+                    gender: gender === 'male' ? 1 : 0,
+                    source: setupSource,
+                    validate: '',
+                });
+                if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
+                    store.handleAuthSuccess(res === null || res === void 0 ? void 0 : res._data);
+                    onClose === null || onClose === void 0 ? void 0 : onClose(true);
                 }
                 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 setLoading(false);
-                    }
+                    setErrMsg(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                    return setLoading(false);
                 }
             }
             else {
@@ -3761,24 +3965,13 @@ const SSOSetupScreen = ({ hidden, config, }) => {
             React__default["default"].createElement(core.Stack, { spacing: 8 },
                 React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, t('ssov2.setup.title')),
                 React__default["default"].createElement(index$3.Text, { size: "p4" }, t('ssov2.setup.description'))),
-            needPass && (React__default["default"].createElement(SSOPasswordWithConfirm, { form: form$1, loading: loading, tracking: {
-                    category: trackingCategory,
-                    action: trackingAction,
-                } })),
             React__default["default"].createElement(OtherSetup, { needPhone: needPhone, skipPhone: skipPhone, needEmail: needEmail, isEmailDisable: isEmailDisable, isPhoneDisabled: isPhoneDisabled, form: form$1, loading: loading, tracking: {
                     category: trackingCategory,
                     action: trackingAction,
                 } }),
             errMsg && (React__default["default"].createElement(index$3.Text, { color: "red.6", size: "p4" }, errMsg)),
-            React__default["default"].createElement(index$4.Button, { type: "submit", variant: "primary", fullWidth: true, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": needPhone && !skipPhone
-                    ? 'Verify Phone Number'
-                    : authFlow === 'signup'
-                        ? 'Create New Account'
-                        : 'Save' }, needPhone && !skipPhone
-                ? t('ssov2.setup.button.veriyPhone')
-                : authFlow === 'signup'
-                    ? t('ssov2.setup.button.createAccount')
-                    : t('ssov2.button.save')))));
+            React__default["default"].createElement(index$4.Button, { type: "submit", variant: "primary", fullWidth: true, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Save" }, t('ssov2.button.save')),
+            React__default["default"].createElement(SetupLater, { style: { marginTop: -8 } }))));
 };
 
 // import {
@@ -3887,6 +4080,20 @@ const SSOScreenRenderer = () => {
     })));
 };
 
+if (!Array.prototype.findLastIndex) {
+    Array.prototype.findLastIndex = function (callback, thisArg) {
+        for (let i = this.length - 1; i >= 0; i--) {
+            if (callback.call(thisArg, this[i], i, this))
+                return i;
+        }
+        return -1;
+    };
+}
+if (!String.prototype.capitalize) {
+    String.prototype.capitalize = function () {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    };
+}
 const SSOV2 = ({ onClose: onCloseProps, locale }) => {
     const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, } = store.useSSOV2Store();
     React.useEffect(() => {