@hhgtech/hhg-components 1.29.332-beta-2 → 1.29.332-beta-4

package/build/ssoV2.js

@@ -2,58 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-af233969.js');
+var tslib_es6 = require('./tslib.es6-3a0325d0.js');
 var React = require('react');
-var index$5 = require('./index-119e18e1.js');
-var store = require('./store-7f5903a1.js');
+var miscCookieHelper = require('./miscCookieHelper.js');
+var index$6 = require('./index-22cab0de.js');
+var store = require('./store-86ea7a53.js');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var index$2 = require('./index-7a1ad389.js');
-var logoIcon = require('./logoIcon-e3a0433c.js');
-var index$4 = require('./index-26d24411.js');
-var index$1 = require('./index-321a21c6.js');
+var index$2 = require('./index-ed2bb521.js');
+var logoIcon = require('./logoIcon-09b80183.js');
+var index$4 = require('./index-3f1ddea9.js');
+var index$1 = require('./index-988449fe.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-require('./index-80cc4168.js');
-require('./index-ba44f30e.js');
-var useMantineLocale = require('./useMantineLocale-1e39b18b.js');
-var index$3 = require('./index-965888fd.js');
-var index = require('./index-7b305dc2.js');
+require('./index-82dd24bb.js');
+var index$5 = require('./index-e8d3dc9c.js');
+var useMantineLocale = require('./useMantineLocale-2d77aba2.js');
+var index$3 = require('./index-3ad88e9e.js');
+var index = require('./index-bb90f2ab.js');
 require('@mantine/hooks');
-require('./utils-bfae5c4f.js');
-require('./other-49d7d04c.js');
-require('./index-8a6bec1a.js');
-var Locale = require('./Locale-29c4aa10.js');
-var Google = require('./Google-e2baeeee.js');
+require('./utils-835b5f8e.js');
+require('./other-c4c46533.js');
+require('./index-da84de2e.js');
+var Locale = require('./Locale-c99e0a99.js');
+var useScreenSize = require('./useScreenSize-701825b1.js');
+var Google = require('./Google-f2a4fc53.js');
 var PhoneInputBase = require('react-phone-number-input');
+var index$7 = require('./index-82738b25.js');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
 var styled = require('@emotion/styled');
 var cn = require('classnames');
 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-42737a5f.js');
 var vaul = require('vaul');
-var utils = require('./utils-64a0cb14.js');
-var index$6 = require('./index-3be445d4.js');
-var constantsDomainLocales = require('./constantsDomainLocales.js');
+var utils = require('./utils-a817ecf9.js');
 var form = require('@mantine/form');
 var yup = require('yup');
 var dayjs = require('dayjs');
-var index$7 = require('./index-ba781174.js');
+var index$8 = require('./index-23964dc2.js');
 require('@mantine/carousel');
 require('./miscTheme.js');
-require('./useUniqueId-69a422c8.js');
+require('./useUniqueId-b4dd505c.js');
 require('./constantsSite.js');
 require('zustand');
 require('./constantsIsProduction.js');
-require('./normalizeLink-78099ea1.js');
-require('./miscCookieHelper.js');
+require('./normalizeLink-ac8fab6c.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
-require('./index.styles-7c549786.js');
+require('./index.styles-25928d6e.js');
 require('@mantine/notifications');
-require('./translationsContext-bcf08185.js');
+require('./translationsContext-847c20c0.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -84,6 +84,21 @@ var Flags__default = /*#__PURE__*/_interopDefault(Flags);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 
+/** */
+const fetchFeatureFlag = (site) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    let data = null;
+    try {
+        const baseUrl = 'https://staging-mobile-be.hellohealthgroup.com';
+        const response = yield fetch(`${baseUrl}/api/feature-flag/v1/list?site=${site}`);
+        data = yield response.json();
+    }
+    catch (err) {
+        data = null;
+    }
+    return (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.flags) === null || _b === void 0 ? void 0 : _b.find((o) => o.name === 'SSO_V2_flag');
+});
+
 const SSOStateContext = React.createContext({
     locale: Locale.LOCALE.Vietnam,
     onClose: () => false,
@@ -240,7 +255,8 @@ const isSocialFlowFn = (flowData) => {
 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');
+        (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'phone' ||
+        (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'whatsapp');
 };
 const isEmailFlowFn = (flowData) => {
     return (flowData === null || flowData === void 0 ? void 0 : flowData.method) === 'email';
@@ -253,6 +269,14 @@ const isResetPasswordFlowFn = (steps) => {
         passwordForgotStep > 0 &&
         passwordForgotStep > passwordStep);
 };
+const isResetPasswordViePhoneFlowFn = (steps) => {
+    // First -> Passsword -> Password Forgot Phone
+    const passwordStep = steps.findIndex((s) => s.type === store.SSOStepTypeType.PASSWORD);
+    const passwordForgotStep = steps.findIndex((s) => s.type === store.SSOStepTypeType.FORGOT_PASSWORD_PHONE);
+    return (passwordStep > 0 &&
+        passwordForgotStep > 0 &&
+        passwordForgotStep > passwordStep);
+};
 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 ||
@@ -267,29 +291,42 @@ const isDisplayProgressBarFn = (flowData, step) => {
         isEmailFlowFn(flowData);
     return showProgressBar && isWhiteListFlow;
 };
-const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo) => {
-    var _a, _b;
+const getCurrentStepNumber = (flowData, { steps, currentStepIndex, abTestFlow, }, userInfo) => {
+    var _a, _b, _c;
     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);
+        // Ignore Phone in Community if in update email step
+        const isCommunityUpdateEmail = store.useSSOV2Store().setupSource === 'community' &&
+            ((_a = steps[0]) === null || _a === void 0 ? void 0 : _a.type) === store.SSOStepTypeType.UPDATE_EMAIL;
+        const arrSteps = isCommunityUpdateEmail
+            ? [
+                store.SSOStepTypeType.UPDATE_EMAIL,
+                store.SSOStepTypeType.OTP,
+                !userInfo || !store.isUserFinishedSetup(userInfo)
+                    ? store.SSOStepTypeType.SETUP_FULL
+                    : undefined,
+            ]
+                .flat()
+                .filter(Boolean)
+            : [
+                !isPhoneVerifedAlready(userInfo, flowData) && abTestFlow !== 'B'
+                    ? [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,
@@ -303,7 +340,7 @@ const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo)
             !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)
+            !((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_pass)
                 ? store.SSOStepTypeType.FORGOT_PASSWORD_SETUP
                 : undefined,
             !isSetupFullInfoAlready(userInfo, flowData)
@@ -345,7 +382,7 @@ const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo)
         ];
     }
     if (isEmailFlow) {
-        const hasPasswordStep = !((_b = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _b === void 0 ? void 0 : _b.is_pass);
+        const hasPasswordStep = !((_c = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _c === void 0 ? void 0 : _c.is_pass);
         const hasPhoneStep = !isPhoneVerifedAlready(userInfo, flowData);
         const hasSetupFullStep = !isSetupFullInfoAlready(userInfo, flowData);
         const isForgotPasswordSetup = steps.find((s) => s.type === store.SSOStepTypeType.FORGOT_PASSWORD_SETUP);
@@ -380,10 +417,10 @@ const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo)
 const ProgressBar = () => {
     // const initUserInfo = useRef<UserInfo | undefined | null>()
     const { steps, currentStepIndex } = store.useSSOSteps();
-    const { flowData, userInfo } = store.useSSOV2Store();
+    const { flowData, userInfo, abTestFlow } = store.useSSOV2Store();
     /** No need update state IF userInfo is changed */
     const initUserInfo = React.useMemo(() => userInfo, [userInfo]);
-    const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, { steps, currentStepIndex }, initUserInfo);
+    const [totalStepNumber, activeStepNumber] = getCurrentStepNumber(flowData, { steps, currentStepIndex, abTestFlow }, initUserInfo);
     if (!activeStepNumber || totalStepNumber === 1)
         return null;
     return (React__default["default"].createElement(core.Flex, { gap: 2 }, Array.from({ length: totalStepNumber }).map((_, idx) => {
@@ -472,7 +509,12 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
                         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" },
                     React__default["default"].createElement(arrow.ChevronLeft, null))),
-                showLogo && (React__default["default"].createElement(logoIcon.LogoIcon, { type: logoType, height: 32, width: 'unset' })),
+                showLogo && (React__default["default"].createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                    React__default["default"].createElement(logoIcon.LogoIcon, { type: logoType, height: 32, width: 'unset' }),
+                    locale === Locale.LOCALE.Indonesia && (React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "", src: index$5.CommonGAssets.getAssetPath('sehat-badge.png'), style: {
+                            width: 56,
+                            height: 23,
+                        } })))),
                 showClose && (React__default["default"].createElement(index$4.Button, { variant: "white", style: {
                         width: 40,
                         height: 40,
@@ -712,7 +754,7 @@ const SSOEmailScreen = ({ hidden, }) => {
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
             React__default["default"].createElement(index$3.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, disabled: loading, onChange: () => setErrMsg(''), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
+        React__default["default"].createElement(index$6.Input, { name: "email", placeholder: t('onboarding.formEmail.yourEmail'), error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg(''), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
         React__default["default"].createElement(index$4.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Verify Your Email" }, t('ssov2.email.button'))));
 };
 
@@ -815,6 +857,59 @@ const loginBySocial = (token, social) => tslib_es6.__awaiter(void 0, void 0, voi
     });
 });
 
+// "phone_number": "906911910",
+// "area_code":"+84",
+const registerBySendWhatsAppOTP = (phone, areaCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    formData.append('website_id', store.websiteId);
+    return store.fetchSSOV2Api(store.SSO_V2_PATHS.WHATSAPP.REGISTER_BY_SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+// "phone_number": "906911910",
+// "area_code":"+84",
+const resendWhatsAppOTP = (phone, areaCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return store.fetchSSOV2Api(store.SSO_V2_PATHS.WHATSAPP.SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const resendUpdatePhoneWhatsAppOTP = (phone, areaCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return store.fetchSSOV2Api(store.SSO_V2_PATHS.WHATSAPP.UPDATE_PHONE_SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const verifyUpdatePhoneWhatsAppOTP = (phone, areaCode, otpCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('otp_code', otpCode);
+    formData.append('area_code', areaCode);
+    return store.fetchSSOV2Api(store.SSO_V2_PATHS.WHATSAPP.UPDATE_PHONE_VERIFY_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const verifyByWhatsAppOTP = (phone, areaCode, otpCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('otp_code', otpCode);
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return store.fetchSSOV2Api(store.SSO_V2_PATHS.WHATSAPP.VERIFY_BY_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+
 // "phone_number": "906911910",
 // "area_code":"+84",
 const registerBySendZaloOTP = (phone, areaCode) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -871,9 +966,113 @@ const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => tslib_es6.__await
     });
 });
 
+// VietNam: Zalo - SMS
+// Info: WhatsApp
+// Malay: WhatsApp và SMS
+const isFeatureWhatsAppEnabled = [
+    Locale.LOCALE.Indonesia,
+    Locale.LOCALE.Malaysia,
+].includes(store.locale);
+const isFeatureSMSEnabled = [Locale.LOCALE.Vietnam, Locale.LOCALE.Malaysia].includes(store.locale);
+const isFeatureZaloEnabled = [Locale.LOCALE.Vietnam].includes(store.locale);
+
 const MailIcon = (props) => (React__default["default"].createElement("svg", Object.assign({ width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React__default["default"].createElement("path", { d: "M15.043 2.56348H6.29297C3.66797 2.56348 1.91797 3.87598 1.91797 6.93848V13.0635C1.91797 16.126 3.66797 17.4385 6.29297 17.4385H15.043C17.668 17.4385 19.418 16.126 19.418 13.0635V6.93848C19.418 3.87598 17.668 2.56348 15.043 2.56348ZM15.4542 7.89223L12.7155 10.0797C12.138 10.5435 11.403 10.771 10.668 10.771C9.93297 10.771 9.18922 10.5435 8.62047 10.0797L5.88172 7.89223C5.60172 7.66473 5.55797 7.24473 5.77672 6.96473C6.00422 6.68473 6.41547 6.63223 6.69547 6.85973L9.43422 9.04723C10.0992 9.58098 11.228 9.58098 11.893 9.04723L14.6317 6.85973C14.9117 6.63223 15.3317 6.67598 15.5505 6.96473C15.778 7.24473 15.7342 7.66473 15.4542 7.89223Z", fill: "#00B16A" })));
 
+const PolicyContent = ({ legalTextType, trackingCategory, trackingAction, }) => {
+    var _a, _b;
+    const { t } = index.useTranslations();
+    const { locale } = useSSOState();
+    return (React__default["default"].createElement(core.Stack, { spacing: 24, sx: (theme) => ({
+            marginTop: 56,
+            [theme.fn.smallerThan('sm')]: {
+                marginTop: 'auto',
+                paddingTop: 50,
+            },
+        }) },
+        React__default["default"].createElement(index$7.Spoiler, { maxHeight: 74, showLabel: React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6", underline: true }, t('home.seeMore')), hideLabel: React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6", underline: true }, t('articlePage.showLess')) },
+            React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6" }, t(legalTextType === 'community'
+                ? 'ssov2.policyText.community'
+                : 'ssov2.policyText', {
+                privacy: (React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_a = index$2.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
+                        color: '#262626',
+                        textDecoration: 'underline',
+                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Privacy Policy", rel: "noreferrer" }, t('ssov2.policyText.privacy'))),
+                terms: (React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_b = index$2.STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
+                        color: '#262626',
+                        textDecoration: 'underline',
+                    }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Terms of Service", rel: "noreferrer" }, t('ssov2.policyText.terms'))),
+            })))));
+};
+
+const FirstBFlow = ({ hidden, 
+// activeTab,
+legalTextType, trackingAction, trackingCategory, onTriggerGoogleLogin, onTriggerFacebookLogin, onClickEmail, }) => {
+    const { locale } = useSSOState();
+    const domain = constantsDomainLocales.MAP_DOMAIN_BY_LOCALE[locale];
+    const { t } = index.useTranslations();
+    return (React__default["default"].createElement("div", { style: {
+            display: hidden ? 'none' : 'flex',
+            flexDirection: 'column',
+            height: '100%',
+        } },
+        React__default["default"].createElement(core.Stack, { mt: 8, spacing: 8 },
+            React__default["default"].createElement(index$3.Text, { size: "h4", weight: "semiBold" },
+                "Welcome to",
+                ' ',
+                domain.replace('.com.ph', '').replace('.tw', '').replace('.com', '')),
+            React__default["default"].createElement(index$3.Text, { size: "p4" }, "Sign up or log in with your email or social media account.")),
+        React__default["default"].createElement(core.Stack, { mt: 24, spacing: 24 },
+            React__default["default"].createElement(index$4.Button, { variant: "white", style: {
+                    flex: 1,
+                    height: 48,
+                    padding: 12,
+                    background: '#F7F9FC',
+                    borderRadius: 8,
+                }, onClick: onTriggerGoogleLogin, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Google" },
+                React__default["default"].createElement(Google.Google, { style: {
+                        width: 20,
+                        height: 20,
+                        marginRight: 4,
+                        borderRadius: '100%',
+                    } }),
+                ' ',
+                React__default["default"].createElement(index$3.Text, { size: "p4", color: "black", weight: "semiBold" }, "Continue with Google")),
+            React__default["default"].createElement(core.Stack, { spacing: 24, align: "center" },
+                React__default["default"].createElement(index$3.Text, { size: "p4", color: "gray.4" }, t('ssov2.orContinueWith')),
+                React__default["default"].createElement(core.Group, { spacing: 8, style: {
+                        width: '100%',
+                    } },
+                    React__default["default"].createElement(index$4.Button, { variant: "white", style: {
+                            flex: 1,
+                            height: 48,
+                            padding: 12,
+                            background: '#F7F9FC',
+                            borderRadius: 8,
+                        }, onClick: onTriggerFacebookLogin, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Facebook" },
+                        React__default["default"].createElement(Google.Facebook, { style: {
+                                width: 20,
+                                height: 20,
+                                marginRight: 4,
+                                borderRadius: '100%',
+                            } }),
+                        ' ',
+                        React__default["default"].createElement(index$3.Text, { size: "p4", color: "black", weight: "regular" }, "Facebook")),
+                    React__default["default"].createElement(index$4.Button, { variant: "white", style: {
+                            flex: 1,
+                            height: 48,
+                            padding: 12,
+                            background: '#F7F9FC',
+                            borderRadius: 8,
+                        }, onClick: onClickEmail, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with Email" },
+                        React__default["default"].createElement(MailIcon, { style: {
+                                marginRight: 4,
+                            } }),
+                        ' ',
+                        React__default["default"].createElement(index$3.Text, { size: "p4", color: "black", weight: "regular" }, "Email"))))),
+        React__default["default"].createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory })));
+};
+
 function createCommonjsModule(fn) {
   var module = { exports: {} };
 	return fn(module, module.exports), module.exports;
@@ -2107,7 +2306,7 @@ function CountrySelectWithIcon(_a) {
     const SelectCountryContent = (React__default["default"].createElement(core.Stack, { spacing: 24 },
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$3.Text, { size: "s4" }, t('ssov2.first.country.code')),
-            React__default["default"].createElement(index$5.Input, { size: "lg", placeholder: t('ssov2.first.search.country.placeholder'), icon: React__default["default"].createElement(core$1.Search, null), value: search, onChange: (value) => setSearch(value) })),
+            React__default["default"].createElement(index$6.Input, { size: "lg", placeholder: t('ssov2.first.search.country.placeholder'), icon: React__default["default"].createElement(core$1.Search, null), value: search, onChange: (value) => setSearch(value) })),
         !!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) && (React__default["default"].createElement(core.Stack, { spacing: 0 },
             React__default["default"].createElement(index$3.Text, { size: "s4" }, t('ssov2.first.search.country.selected')),
             React__default["default"].createElement(SelectCountryItem, { option: selectedOption, onSelect: (option) => {
@@ -2278,7 +2477,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, countrySelectProps: { trackingFn } }, inputProps)));
+        defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: cn__default["default"](index$6.styles.phoneInput, { isError, [index$6.styles.error]: isError }, className), countrySelectComponent: CountrySelectWithIcon, countrySelectProps: { trackingFn } }, inputProps)));
 };
 const PhoneWithCustomCountrySelect = React.forwardRef(PhoneForwardRef);
 
@@ -2308,6 +2507,12 @@ const StyledPhone = styled__default["default"](PhoneWithCustomCountrySelect) `
   }
 `;
 
+const WhatsApp = ({ size = 20 }) => {
+    return (React__default["default"].createElement("svg", { width: (size * 19) / 18, height: size, viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.92578 1.07422C5.78895 1.07422 2.42578 4.43738 2.42578 8.57422C2.42578 10.0305 2.83992 11.4277 3.62269 12.6382L2.48494 15.1458C2.38027 15.3779 2.41668 15.6464 2.58506 15.8421C2.71249 15.9923 2.89453 16.0742 3.08112 16.0742C3.14028 16.0742 3.19489 16.0651 3.25406 16.0515L6.39423 15.1913C7.47736 15.7693 8.69247 16.0742 9.92578 16.0742C14.0626 16.0742 17.4258 12.711 17.4258 8.57422C17.4258 4.44193 14.0626 1.07422 9.92578 1.07422ZM9.92578 14.7635C8.82899 14.7635 7.75497 14.4723 6.80836 13.9216C6.70824 13.8624 6.59447 13.8306 6.47614 13.8306C6.41698 13.8306 6.35782 13.8397 6.30321 13.8533L4.25072 14.4177L4.96522 12.843C5.06079 12.6291 5.03804 12.3788 4.90151 12.1877C4.13695 11.1273 3.73191 9.88035 3.73191 8.56967C3.73191 5.15644 6.508 2.38035 9.92123 2.38035C13.3345 2.38035 16.1105 5.15644 16.1105 8.56967C16.1151 11.9874 13.339 14.7635 9.92578 14.7635Z", fill: "currentColor" }),
+        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8115 9.69834C12.4975 9.51175 12.0879 9.30241 11.7193 9.4526C11.4371 9.57092 11.2551 10.0124 11.0685 10.2399C10.9729 10.3582 10.8637 10.3764 10.7181 10.3173C9.65315 9.89404 8.83397 9.17954 8.2469 8.20108C8.14678 8.0509 8.16498 7.92802 8.2833 7.78694C8.46079 7.57759 8.68379 7.34095 8.73385 7.05879C8.78391 6.77663 8.65193 6.44896 8.53361 6.19865C8.38343 5.88009 8.21959 5.42043 7.89647 5.2384C7.60066 5.07001 7.21383 5.16558 6.94987 5.37948C6.49477 5.74811 6.27633 6.33063 6.28543 6.90405C6.28543 7.06788 6.30818 7.23172 6.34459 7.38645C6.43561 7.76418 6.6131 8.11916 6.80879 8.45593C6.95897 8.71079 7.11826 8.95654 7.29119 9.19319C7.86006 9.96685 8.57002 10.6404 9.38919 11.141C9.79878 11.3913 10.2402 11.6143 10.6999 11.7645C11.2141 11.9329 11.6692 12.1104 12.2244 12.0057C12.8024 11.8965 13.3758 11.5369 13.6079 10.9772C13.6762 10.8133 13.7081 10.6267 13.6717 10.4538C13.5897 10.0897 13.1028 9.87128 12.8115 9.69834Z", fill: "currentColor" })));
+};
+
 const Zalo = ({ size = 20, useCurrentColor = false }) => {
     const color = useCurrentColor ? 'currentColor' : '#0068FF';
     return (React__default["default"].createElement("svg", { width: (size * 21) / 20, height: size, viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -2323,12 +2528,11 @@ const Zalo = ({ size = 20, useCurrentColor = false }) => {
 };
 
 const SSOFirstScreen = ({ hidden, config, }) => {
-    var _a, _b;
     const [phone, setPhone] = React__default["default"].useState('');
     const [errMsg, setErrMsg] = React__default["default"].useState('');
     const { locale, onClose, setTracking } = useSSOState();
     const { addStep, goNext } = store.useSSOSteps();
-    const { setUserInfo } = store.useSSOV2Store();
+    const { setUserInfo, abTestFlow } = store.useSSOV2Store();
     const [activeTab, setActiveTab] = React__default["default"].useState('login');
     const { legalTextType } = config || {};
     const { t } = index.useTranslations();
@@ -2358,7 +2562,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     },
                 });
                 const isNotHavePhone = !userInfo._data.phone || !userInfo._data.phone_verified_at;
-                if (isNotHavePhone) {
+                if (isNotHavePhone && abTestFlow !== 'B') {
                     store.useSSOV2Store.setState((f) => {
                         var _a;
                         return ({
@@ -2446,7 +2650,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         };
     }, []);
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+        var _a, _b;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2455,8 +2659,8 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield store.checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            const provider = (_c = userExist._data) === null || _c === void 0 ? void 0 : _c.provider;
-            if ((_d = userExist._data) === null || _d === void 0 ? void 0 : _d.is_pass) {
+            const provider = (_a = userExist._data) === null || _a === void 0 ? void 0 : _a.provider;
+            if ((_b = userExist._data) === null || _b === void 0 ? void 0 : _b.is_pass) {
                 store.useSSOV2Store.setState({
                     flowData: {
                         method: 'zalo',
@@ -2508,6 +2712,69 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         setLoading(false);
     });
+    const onClickContinueWhatsApp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d;
+        setLoading(true);
+        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) {
+            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: 'whatsapp',
+                        flow: 'login',
+                        metaData: userExist._data,
+                    },
+                });
+                addStep({
+                    type: store.SSOStepTypeType.PASSWORD,
+                    config: {
+                        phone,
+                        method: 'whatsapp',
+                    },
+                });
+                goNext();
+            }
+            else {
+                let res;
+                if (!provider) {
+                    res = yield registerBySendWhatsAppOTP(phoneNumber, areaCode);
+                }
+                else {
+                    res = yield resendWhatsAppOTP(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);
+                }
+                store.useSSOV2Store.setState({
+                    flowData: {
+                        method: 'whatsapp',
+                        flow: 'signup',
+                        metaData: userExist._data,
+                    },
+                });
+                addStep({
+                    type: store.SSOStepTypeType.OTP,
+                    config: {
+                        phone,
+                        otpType: 'phone-whatsapp',
+                        afterAction: 'forgot',
+                    },
+                });
+                goNext();
+            }
+        }
+        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 _e, _f;
         setLoading(true);
@@ -2650,6 +2917,9 @@ const SSOFirstScreen = ({ hidden, config, }) => {
             });
         }, { scope: 'public_profile,email,user_gender,user_birthday' });
     };
+    if (abTestFlow === 'B') {
+        return (React__default["default"].createElement(FirstBFlow, { hidden: hidden, activeTab: activeTab, legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory, onTriggerGoogleLogin: onTriggerGoogleLogin, onTriggerFacebookLogin: onTriggerFacebookLogin, onClickEmail: onClickEmail }));
+    }
     return (React__default["default"].createElement("div", { style: {
             display: hidden ? 'none' : 'flex',
             flexDirection: 'column',
@@ -2672,7 +2942,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                         e.preventDefault();
                         onClickContinueZalo();
                     } },
-                    React__default["default"].createElement(index$5.Input.Wrapper, { error: errMsg },
+                    React__default["default"].createElement(index$6.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", trackingFn: React.useCallback((option) => {
                                 if (!(option === null || option === void 0 ? void 0 : option.label))
                                     return;
@@ -2685,8 +2955,9 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                                 };
                             }, [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', leftIcon: React__default["default"].createElement(Zalo, null) }, t('ssov2.button.otp.zalo')),
-                React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", 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', style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default["default"].createElement(core$1.ReplySquare, { size: 18 }) }, t('ssov2.button.otp.sms'))),
+                isFeatureWhatsAppEnabled && (React__default["default"].createElement(index$4.Button, { size: "lg", variant: "primary", onClick: onClickContinueWhatsApp, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with WhatsApp", display: activeTab === 'signup' ? 'block' : 'none', leftIcon: React__default["default"].createElement(WhatsApp, null), color: "#00B16A" }, t('ssov2.button.otp.whatsapp'))),
+                isFeatureZaloEnabled && (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', leftIcon: React__default["default"].createElement(Zalo, null) }, t('ssov2.button.otp.zalo'))),
+                isFeatureSMSEnabled && (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", 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', style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default["default"].createElement(core$1.ReplySquare, { size: 18 }) }, t('ssov2.button.otp.sms')))),
             React__default["default"].createElement(core.Divider, { color: "#E4E8EC", display: activeTab === 'signup' ? 'block' : 'none' }),
             React__default["default"].createElement(core.Stack, { spacing: 16, align: "center" },
                 React__default["default"].createElement(index$3.Text, { size: "p4", color: "gray.4" }, t('ssov2.orContinueWith')),
@@ -2735,26 +3006,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                             } }),
                         ' ',
                         React__default["default"].createElement(index$3.Text, { size: "p4", color: "black", weight: "regular" }, "Email"))))),
-        React__default["default"].createElement(core.Stack, { spacing: 24, sx: (theme) => ({
-                marginTop: 56,
-                [theme.fn.smallerThan('sm')]: {
-                    marginTop: 'auto',
-                    paddingTop: 50,
-                },
-            }) },
-            React__default["default"].createElement(index$6.Spoiler, { maxHeight: 74, showLabel: React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6", underline: true }, t('home.seeMore')), hideLabel: React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6", underline: true }, t('articlePage.showLess')) },
-                React__default["default"].createElement(index$3.Text, { size: "p5", color: "gray.6" }, t(legalTextType === 'community'
-                    ? 'ssov2.policyText.community'
-                    : 'ssov2.policyText', {
-                    privacy: (React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_a = index$2.STATIC_PAGES[locale]) === null || _a === void 0 ? void 0 : _a.PRIVACY_POLICY) || ''}`, target: "_blank", style: {
-                            color: '#262626',
-                            textDecoration: 'underline',
-                        }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Privacy Policy" }, t('ssov2.policyText.privacy'))),
-                    terms: (React__default["default"].createElement("a", { href: `https://${constantsDomainLocales.domainLocales[locale]}/static/${((_b = index$2.STATIC_PAGES[locale]) === null || _b === void 0 ? void 0 : _b.TERM_OF_USE) || ''}`, target: "_blank", style: {
-                            color: '#262626',
-                            textDecoration: 'underline',
-                        }, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Terms of Service" }, t('ssov2.policyText.terms'))),
-                }))))));
+        React__default["default"].createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory })));
 };
 
 const initSendUpdateEmailOtp = (email) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -2795,6 +3047,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
     const isEmail = otpType === 'email' || otpType === 'update-email';
     const isZalo = otpType === 'phone-zalo';
     const isSMS = otpType === 'phone-sms';
+    const isWhatsApp = otpType === 'phone-whatsapp';
     const trackingMethod = flowData === null || flowData === void 0 ? void 0 : flowData.method;
     const trackingCategory = userInfo && !userInfo.first_time_login
         ? `SSO - Existing User via ${trackingMethod}`
@@ -2803,7 +3056,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
             : `SSO - Sign In via ${trackingMethod}`;
     const trackingAction = isEmail
         ? 'Verify Your Email'
-        : `Verify Phone Number via ${isZalo ? 'Zalo' : isSMS ? 'SMS' : ''}`;
+        : `Verify Phone Number via ${isZalo ? 'Zalo' : isSMS ? 'SMS' : isWhatsApp ? 'WhatsApp' : ''}`;
     React.useEffect(() => {
         if (!hidden) {
             setError('');
@@ -2837,6 +3090,9 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                 else if (otpType === 'phone-zalo') {
                     res = yield resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
                 }
+                else if (otpType === 'phone-whatsapp') {
+                    res = yield resendUpdatePhoneWhatsAppOTP(phoneNumber, areaCode);
+                }
             }
             else {
                 if (otpType === 'phone-sms') {
@@ -2845,6 +3101,9 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                 else if (otpType === 'phone-zalo') {
                     res = yield resendZaloOTP(phoneNumber, areaCode);
                 }
+                else if (otpType === 'phone-whatsapp') {
+                    res = yield resendWhatsAppOTP(phoneNumber, areaCode);
+                }
                 else if (otpType === 'email') {
                     res = yield resendEmailOTP(email);
                 }
@@ -2883,6 +3142,9 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                 else if (otpType === 'phone-zalo') {
                     res = yield verifyUpdatePhoneZaloOTP(phoneNumber, areaCode, otp);
                 }
+                else if (otpType === 'phone-whatsapp') {
+                    res = yield verifyUpdatePhoneWhatsAppOTP(phoneNumber, areaCode, otp);
+                }
                 if ((res === null || res === void 0 ? void 0 : res._status) === 1) {
                     if (afterAction === 'setup') {
                         const userInfo = yield store.getUserInfo();
@@ -2908,6 +3170,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                             const needPass = (flowData.method === 'email' ||
                                 flowData.method === 'zalo' ||
                                 flowData.method === 'sms' ||
+                                flowData.method === 'whatsapp' ||
                                 flowData.method === 'phone' ||
                                 (userInfo === null || userInfo === void 0 ? void 0 : userInfo._data.provider) === 'email' ||
                                 (userInfo === null || userInfo === void 0 ? void 0 : userInfo._data.provider) === 'phone') &&
@@ -2966,6 +3229,9 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
             else if (otpType === 'phone-zalo') {
                 res = yield verifyByZaloOTP(phoneNumber, areaCode, otp);
             }
+            else if (otpType === 'phone-whatsapp') {
+                res = yield verifyByWhatsAppOTP(phoneNumber, areaCode, otp);
+            }
             else if (otpType === 'email') {
                 res = yield verifyByEmailOTP(email, otp);
             }
@@ -2988,7 +3254,15 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                 addStepAndGoNext({
                     type: store.SSOStepTypeType.FORGOT_PASSWORD_SETUP,
                     config: {
-                        provider: isZalo ? 'Zalo' : isSMS ? 'SMS' : isEmail ? 'Email' : '',
+                        provider: isZalo
+                            ? 'Zalo'
+                            : isSMS
+                                ? 'SMS'
+                                : isWhatsApp
+                                    ? 'WhatsApp'
+                                    : isEmail
+                                        ? 'Email'
+                                        : '',
                     },
                 });
             }
@@ -3016,6 +3290,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                     const needPass = (flowData.method === 'email' ||
                         flowData.method === 'zalo' ||
                         flowData.method === 'sms' ||
+                        flowData.method === 'whatsapp' ||
                         flowData.method === 'phone' ||
                         (userInfo === null || userInfo === void 0 ? void 0 : userInfo._data.provider) === 'email' ||
                         (userInfo === null || userInfo === void 0 ? void 0 : userInfo._data.provider) === 'phone') &&
@@ -3056,13 +3331,12 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
         }
         setLoading(false);
     });
-    const swapZaloSms = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const swapAnotherMethod = (newType) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         if (isEmail)
             return;
         setLoading(true);
         try {
             const { areaCode, phoneNumber } = splitPhone(phone);
-            const newType = otpType === 'phone-sms' ? 'phone-zalo' : 'phone-sms';
             let res;
             if (isUpdatePhone) {
                 if (newType === 'phone-sms') {
@@ -3071,6 +3345,9 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                 else if (newType === 'phone-zalo') {
                     res = yield resendUpdatePhoneZaloOTP(phoneNumber, areaCode);
                 }
+                else if (newType === 'phone-whatsapp') {
+                    res = yield resendUpdatePhoneWhatsAppOTP(phoneNumber, areaCode);
+                }
             }
             else {
                 if (newType === 'phone-sms') {
@@ -3079,6 +3356,9 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                 else if (newType === 'phone-zalo') {
                     res = yield resendZaloOTP(phoneNumber, areaCode);
                 }
+                else if (newType === 'phone-whatsapp') {
+                    res = yield resendWhatsAppOTP(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));
@@ -3128,12 +3408,18 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                             : 'ssov2.otp.phone.description', {
                             email,
                             phone,
-                            method: otpType === 'phone-sms' ? 'SMS' : 'Zalo',
+                            method: isSMS
+                                ? 'SMS'
+                                : isZalo
+                                    ? 'Zalo'
+                                    : isWhatsApp
+                                        ? 'WhatsApp'
+                                        : '',
                         }),
                     } }))),
         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, { ref: otpRef, value: otp, onChange: (otp) => {
+            React__default["default"].createElement(index$6.Input.Wrapper, { error: error },
+                React__default["default"].createElement(index$6.OTP, { ref: otpRef, value: otp, onChange: (otp) => {
                         setOtp(String(otp));
                         if (String(otp).length === 6) {
                             setTimeout(() => {
@@ -3158,9 +3444,16 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
                     count: resendTime,
                 })))),
         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": "Continue", ref: submitButtonRef }, t('ssov2.button.continue')),
-        !isEmail && (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", mt: 12, onClick: swapZaloSms, fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": `Send OTP Code via ${otpType === 'phone-sms' ? 'Zalo' : 'SMS'}`, leftIcon: otpType === 'phone-sms' ? (React__default["default"].createElement(Zalo, { size: 18, useCurrentColor: true })) : (React__default["default"].createElement(core$1.ReplySquare, { size: 18 })), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
-            method: otpType === 'phone-sms' ? 'Zalo' : 'SMS',
-        })))));
+        !isEmail && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            isFeatureWhatsAppEnabled && (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", mt: 12, fullWidth: true, onClick: () => swapAnotherMethod('phone-whatsapp'), loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Send OTP Code via WhatsApp", display: !isWhatsApp ? 'block' : 'none', leftIcon: React__default["default"].createElement(WhatsApp, null), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
+                method: 'WhatsApp',
+            }))),
+            isFeatureZaloEnabled && (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", mt: 12, fullWidth: true, onClick: () => swapAnotherMethod('phone-zalo'), loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Send OTP Code via Zalo", display: !isZalo ? 'block' : 'none', leftIcon: React__default["default"].createElement(Zalo, null), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
+                method: 'Zalo',
+            }))),
+            isFeatureSMSEnabled && (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", mt: 12, fullWidth: true, onClick: () => swapAnotherMethod('phone-sms'), loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Send OTP Code via SMS", display: !isSMS ? 'block' : 'none', leftIcon: React__default["default"].createElement(core$1.ReplySquare, { size: 18 }), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
+                method: 'SMS',
+            })))))));
 };
 
 const SSOPasswordScreen = ({ hidden, config, }) => {
@@ -3314,7 +3607,7 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
                 t('ssov2.password.title2')),
             React__default["default"].createElement(index$3.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(''), disabled: loading, required: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Password" }),
+            React__default["default"].createElement(index$6.PasswordInput, { name: "password", placeholder: t('ssov2.passwordForgotSetup.field.password.placeholder'), error: errMsg || undefined, onChange: () => setErrMsg(''), disabled: loading, required: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Password" }),
             React__default["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -3333,6 +3626,7 @@ const SetupLater = ({ style = {} }) => {
     const { currentStepIndex, steps, addStep, goNext } = store.useSSOSteps();
     const currentStep = steps[currentStepIndex];
     const onClickSetupLater = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (loading)
             return;
         setLoading(true);
@@ -3341,7 +3635,9 @@ const SetupLater = ({ style = {} }) => {
             ((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,
+                type: ((_a = currentStep.config) === null || _a === void 0 ? void 0 : _a.afterAction) === 'update-email'
+                    ? store.SSOStepTypeType.UPDATE_EMAIL
+                    : store.SSOStepTypeType.SETUP_FULL,
                 config: {
                     userInfo,
                 },
@@ -3360,7 +3656,8 @@ const SetupLater = ({ style = {} }) => {
             goNext();
         }
         else {
-            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+            const isResetPasswordFlow = isResetPasswordViePhoneFlowFn(steps);
+            onClose === null || onClose === void 0 ? void 0 : onClose(!isResetPasswordFlow);
         }
         setLoading(false);
     });
@@ -3387,7 +3684,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
     }, [hidden]);
     const [loading, setLoading] = React__default["default"].useState(false);
     const { addStep, goNext } = store.useSSOSteps();
-    const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const onClickContinueWhatsApp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         setLoading(true);
         try {
@@ -3400,6 +3697,49 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
             if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
                 let res;
                 if (!((_a = userExist._data) === null || _a === void 0 ? void 0 : _a.provider)) {
+                    res = yield registerBySendWhatsAppOTP(phoneNumber, areaCode);
+                }
+                else {
+                    res = yield resendWhatsAppOTP(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-whatsapp',
+                        afterAction: config.afterAction || 'forgot',
+                        provider: (_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider,
+                    },
+                });
+                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 onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d;
+        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) {
+                let res;
+                if (!((_c = userExist._data) === null || _c === void 0 ? void 0 : _c.provider)) {
                     res = yield registerBySendZaloOTP(phoneNumber, areaCode);
                 }
                 else {
@@ -3415,7 +3755,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                         phone,
                         otpType: 'phone-zalo',
                         afterAction: config.afterAction || 'forgot',
-                        provider: (_b = userExist._data) === null || _b === void 0 ? void 0 : _b.provider,
+                        provider: (_d = userExist._data) === null || _d === void 0 ? void 0 : _d.provider,
                     },
                 });
                 goNext();
@@ -3431,7 +3771,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickContinuePhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+        var _e, _f;
         setLoading(true);
         try {
             const { areaCode, phoneNumber } = splitPhone(phone);
@@ -3442,7 +3782,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
             const userExist = yield store.checkUserExist({ phone: phoneNumber });
             if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
                 let res;
-                if (!((_c = userExist._data) === null || _c === void 0 ? void 0 : _c.provider)) {
+                if (!((_e = userExist._data) === null || _e === void 0 ? void 0 : _e.provider)) {
                     res = yield registerBySendPhoneOTP(phoneNumber, areaCode);
                 }
                 else {
@@ -3458,7 +3798,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                         phone,
                         otpType: 'phone-sms',
                         afterAction: config.afterAction || 'forgot',
-                        provider: (_d = userExist._data) === null || _d === void 0 ? void 0 : _d.provider,
+                        provider: (_f = userExist._data) === null || _f === void 0 ? void 0 : _f.provider,
                     },
                 });
                 goNext();
@@ -3492,8 +3832,9 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     };
                 }, []) }),
             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", leftIcon: React__default["default"].createElement(Zalo, null) }, t('ssov2.button.continueZalo')),
-            React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default["default"].createElement(core$1.ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS')),
+            isFeatureWhatsAppEnabled && (React__default["default"].createElement(index$4.Button, { size: "lg", variant: "primary", onClick: onClickContinueWhatsApp, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with WhatsApp", leftIcon: React__default["default"].createElement(WhatsApp, null), color: "#00B16A" }, t('ssov2.button.continueWhatsApp'))),
+            isFeatureZaloEnabled && (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", leftIcon: React__default["default"].createElement(Zalo, null) }, t('ssov2.button.continueZalo'))),
+            isFeatureSMSEnabled && (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default["default"].createElement(core$1.ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS'))),
             React__default["default"].createElement(SetupLater, null))));
 };
 
@@ -3517,18 +3858,18 @@ 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'), { onBlur: (e) => {
+        React__default["default"].createElement(index$6.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, "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 Password" })),
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(core.Group, { spacing: 4, align: "center" },
+            React__default["default"].createElement(core.Group, { spacing: 4, align: "flex-start" },
                 atLeast8Chars ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
-                React__default["default"].createElement(index$3.Text, { size: "n1" }, t('ssov2.passwordForgotSetup.field.password.atLeast8Chars'))),
-            React__default["default"].createElement(core.Group, { spacing: 4, align: "center" },
+                React__default["default"].createElement(index$3.Text, { size: "n1", style: { flex: 1 } }, t('ssov2.passwordForgotSetup.field.password.atLeast8Chars'))),
+            React__default["default"].createElement(core.Group, { spacing: 4, align: "flex-start" },
                 atLeastOneUpper ? (React__default["default"].createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default["default"].createElement(CheckGrayIcon, null)) : (React__default["default"].createElement(CheckRedIcon, null)),
-                React__default["default"].createElement(index$3.Text, { size: "n1" }, 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, 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": "Confirm Password" }, form.getInputProps('confirmPassword')))));
+                React__default["default"].createElement(index$3.Text, { size: "n1", style: { flex: 1 } }, t('ssov2.passwordForgotSetup.field.password.atLeastOneUpper')))),
+        React__default["default"].createElement(index$6.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, "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": "Confirm Password" }, form.getInputProps('confirmPassword')))));
 };
 
 const SSOPasswordForgotSetup = ({ hidden, }) => {
@@ -3787,6 +4128,48 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
         }
         setLoading(false);
     });
+    const onClickContinueWhatsApp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        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 resendUpdatePhoneWhatsAppOTP(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: {
+                            provider,
+                            phone,
+                            otpType: 'phone-whatsapp',
+                            isUpdatePhone: true,
+                            afterAction: afterAction || 'setup',
+                        },
+                    });
+                    goNext();
+                }
+                else {
+                    setErrMsg(t('ssov2.phone.alreadyUsed'));
+                }
+            }
+            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',
         } },
@@ -3795,7 +4178,7 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
                 React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, t('ssov2.phoneVerify.title')),
                 React__default["default"].createElement(index$3.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(index$6.Input.Wrapper, { error: errMsg },
                     React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => {
                             setPhone(value);
                             setErrMsg('');
@@ -3808,8 +4191,9 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
                                 'data-event-category': trackingCategory,
                             };
                         }, []) })),
-                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", leftIcon: React__default["default"].createElement(Zalo, null) }, t('ssov2.button.continueZalo')),
-                React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default["default"].createElement(core$1.ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS')),
+                isFeatureWhatsAppEnabled && (React__default["default"].createElement(index$4.Button, { size: "lg", variant: "primary", onClick: onClickContinueWhatsApp, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with WhatsApp", leftIcon: React__default["default"].createElement(WhatsApp, null), color: "#00B16A" }, t('ssov2.button.continueWhatsApp'))),
+                isFeatureZaloEnabled && (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", leftIcon: React__default["default"].createElement(Zalo, null) }, t('ssov2.button.continueZalo'))),
+                isFeatureSMSEnabled && (React__default["default"].createElement(index$4.Button, { size: "sm", variant: "white", onClick: onClickContinuePhone, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue with SMS", style: { fontWeight: 400 }, color: "#595959", leftIcon: React__default["default"].createElement(core$1.ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS'))),
                 source !== 'care_onboarding' && source !== 'ecom' && React__default["default"].createElement(SetupLater, null)))));
 };
 
@@ -3855,8 +4239,8 @@ loading, tracking, }) => {
     const { setupSource } = store.useSSOV2Store();
     const [dobChanged, setDobChanged] = React__default["default"].useState(false);
     return (React__default["default"].createElement(core.Stack, { spacing: 12 },
-        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(index$6.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$6.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$4.Button, { type: "button", styles: {
                         root: {
@@ -3882,7 +4266,7 @@ loading, tracking, }) => {
                         : '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" }, 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) => {
+        React__default["default"].createElement(index$8.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);
             }, onBlur: (e) => {
@@ -3890,7 +4274,7 @@ loading, tracking, }) => {
                     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' || setupSource === 'ecom' ? true : false, withAsterisk: setupSource === 'care' || setupSource === 'ecom' ? 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: {
+        needEmail && (React__default["default"].createElement(index$6.Input, Object.assign({ name: "email", type: "email", label: t('ssov2.setup.field.email.label'), disabled: isEmailDisable || loading, required: ['care', 'ecom', 'community'].includes(setupSource), withAsterisk: ['care', 'ecom', 'community'].includes(setupSource), "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'))))));
 };
@@ -3951,6 +4335,7 @@ const SSOSetupScreen = ({ hidden, config, }) => {
         undefined;
     const needEmail = setupSource === 'care' ||
         setupSource === 'ecom' ||
+        setupSource === 'community' ||
         !(flowData === null || flowData === void 0 ? void 0 : flowData.isVerifyPhone) ||
         authMethod === 'facebook' ||
         provider === 'facebook';
@@ -4132,7 +4517,7 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
         React__default["default"].createElement(core.Stack, { spacing: 8 },
             React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, t('ssov2.updateEmail.title')),
             React__default["default"].createElement(index$3.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, onChange: () => setErrMsg(''), disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
+        React__default["default"].createElement(index$6.Input, { name: "email", placeholder: t('onboarding.formEmail.yourEmail'), error: errMsg || undefined, type: "email", required: true, mt: 24, onChange: () => setErrMsg(''), disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
         React__default["default"].createElement(index$4.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Verify Your Email" }, t('ssov2.updateEmail.button'))));
 };
 
@@ -4182,7 +4567,7 @@ if (!String.prototype.capitalize) {
     };
 }
 const SSOV2 = ({ onClose: onCloseProps, locale }) => {
-    const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, } = store.useSSOV2Store();
+    const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, setABTestFlow, } = store.useSSOV2Store();
     React.useEffect(() => {
         setMounted(true);
         return () => {
@@ -4200,6 +4585,37 @@ const SSOV2 = ({ onClose: onCloseProps, locale }) => {
     React.useEffect(() => {
         setOnCloseProp(onCloseProps);
     }, [onCloseProps]);
+    React.useEffect(() => {
+        const site = constantsDomainLocales.MAP_DOMAIN_BY_LOCALE[locale];
+        const previousABTestingFlow = miscCookieHelper.getCookie('abTestingFlow');
+        fetchFeatureFlag(site).then((data) => {
+            if (data.is_enabled) {
+                if (previousABTestingFlow) {
+                    setABTestFlow(previousABTestingFlow);
+                }
+                else {
+                    const randomBetween100Percent = Math.floor(Math.random() * 100 + 1);
+                    const aFlow = data.a_percentage;
+                    console.log('randomBetween100Percent', randomBetween100Percent);
+                    if (randomBetween100Percent <= aFlow) {
+                        miscCookieHelper.setCookie('abTestingFlow', 'A', {
+                            days: 30,
+                        });
+                        setABTestFlow('A');
+                    }
+                    else {
+                        miscCookieHelper.setCookie('abTestingFlow', 'B', {
+                            days: 30,
+                        });
+                        setABTestFlow('B');
+                    }
+                }
+            }
+            else {
+                miscCookieHelper.deleteCookie('abTestingFlow');
+            }
+        });
+    }, [locale]);
     if (!isOpen) {
         return null;
     }
@@ -4230,7 +4646,7 @@ const SSOV2 = ({ onClose: onCloseProps, locale }) => {
             onCloseProps === null || onCloseProps === void 0 ? void 0 : onCloseProps();
         }
     });
-    return (React__default["default"].createElement(index$5.ErrorBoundary, null,
+    return (React__default["default"].createElement(index$6.ErrorBoundary, null,
         React__default["default"].createElement(SSOStateProvider, { onClose: onClose, locale: locale },
             React__default["default"].createElement(SSOPopupWrapper, { opened: true, onClose: onClose },
                 React__default["default"].createElement(SSOScreenRenderer, null)))));