@hhgtech/hhg-components 1.29.332 → 1.29.334-beta-1

package/build/esm/ssoV2.js

@@ -1,56 +1,73 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-8b49e916.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-e23bfd26.js';
 import React__default, { createContext, useMemo, useEffect, useState, useCallback, forwardRef } from 'react';
-import { I as Input, s as styles, O as OTP, f as PasswordInput, E as ErrorBoundary } from './index-b862cd16.js';
-import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, f as fetchSSOV2Api, w as websiteId, b as SSO_V2_PATHS, c as checkUserExist, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, d as updateUserInfo, e as isPhoneNotVerifedYet, j as isLoginWithPhoneNotVerifedYet, k as isFlowFinishedSetup, r as resetPassword, l as redirect } from './store-937026d6.js';
-export { u as useSSOV2Store } from './store-937026d6.js';
+import { getCookie, setCookie, deleteCookie } from './miscCookieHelper.js';
+import { I as Input, s as styles, O as OTP, f as PasswordInput, E as ErrorBoundary } from './index-2ae8c1c0.js';
+import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, f as fetchSSOV2Api, w as websiteId, b as SSO_V2_PATHS, c as checkUserExist, l as locale, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, d as updateUserInfo, e as isPhoneNotVerifedYet, j as isLoginWithPhoneNotVerifedYet, k as isFlowFinishedSetup, r as resetPassword, m as redirect } from './store-d1eca1fa.js';
+export { u as useSSOV2Store } from './store-d1eca1fa.js';
+import { isProduction } from './constantsIsProduction.js';
 import { ChevronLeft } from '@hhgtech/icons/arrow';
 import { Close, Search, ReplySquare } from '@hhgtech/icons/core';
-import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES, Q as QUERY_HEALTH_TOOL } from './index-737db3be.js';
-import { L as LogoIcon } from './logoIcon-024fd614.js';
-import { B as Button } from './index-cf7a91f6.js';
-import { M as Modal } from './index-123655ef.js';
+import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES, Q as QUERY_HEALTH_TOOL } from './index-81772684.js';
+import { L as LogoIcon } from './logoIcon-b2e3b6df.js';
+import { B as Button } from './index-11d07def.js';
+import { M as Modal } from './index-50127890.js';
 import { Stack, Flex, Box, Group, Divider } from '@mantine/core';
 import '@mantine/dates';
-import './index-340baab5.js';
-import './index-d247dffe.js';
-import { s as showNotification } from './useMantineLocale-5fd08281.js';
-import { T as Text } from './index-553c50fe.js';
-import { u as useTranslations } from './index-94c25537.js';
+import './index-02d06202.js';
+import { C as CommonGAssets } from './index-000e0e9e.js';
+import { s as showNotification } from './useMantineLocale-1c095a66.js';
+import { T as Text } from './index-262b1416.js';
+import { u as useTranslations } from './index-e422ad02.js';
 import '@mantine/hooks';
-import './utils-8921b115.js';
-import './other-f9bf3f6d.js';
-import './index-3e8b2ccd.js';
-import { L as LOCALE } from './Locale-22ec3908.js';
-import { G as Google, F as Facebook } from './Google-8ccb1c86.js';
+import './utils-cdbd3de5.js';
+import './other-0db5dab2.js';
+import './index-df46e084.js';
+import { L as LOCALE } from './Locale-00bfd7ae.js';
+import { I as ImageWrap, u as useScreenSize } from './useScreenSize-3a80d6c1.js';
+import { G as Google, F as Facebook } from './Google-2abb6d1e.js';
 import { parsePhoneNumber, getCountryCallingCode } from 'react-phone-number-input';
+import { S as Spoiler } from './index-663f72f5.js';
+import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import styled from '@emotion/styled';
 import cn from 'classnames';
 import { CaretDown } from '@hhgtech/icons/other';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import Flags from 'react-phone-number-input/flags';
-import { u as useScreenSize } from './useScreenSize-11bcbfcc.js';
 import { Drawer } from 'vaul';
-import { M as MAPPED_LOCALE } from './utils-8b70a691.js';
-import { S as Spoiler } from './index-2a338d3f.js';
-import { domainLocales } from './constantsDomainLocales.js';
+import { M as MAPPED_LOCALE } from './utils-d0d4f26f.js';
 import { useForm, yupResolver } from '@mantine/form';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-c66fecf7.js';
+import { D as DatePicker } from './index-26e9ffe8.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './useUniqueId-30da00de.js';
+import './useUniqueId-5817d5a2.js';
 import './constantsSite.js';
 import 'zustand';
-import './constantsIsProduction.js';
-import './normalizeLink-5406e34c.js';
-import './miscCookieHelper.js';
+import './normalizeLink-43a86413.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-4e255421.js';
+import './index.styles-d02c3a5a.js';
 import '@mantine/notifications';
-import './translationsContext-7f3cb10c.js';
+import './translationsContext-10772791.js';
+
+// const fakeData = {
+const fetchFeatureFlag = (site) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    let data = null;
+    try {
+        const baseUrl = isProduction
+            ? 'https://mobile-be.hellohealthgroup.com'
+            : '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 = createContext({
     locale: LOCALE.Vietnam,
@@ -208,7 +225,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';
@@ -221,6 +239,14 @@ const isResetPasswordFlowFn = (steps) => {
         passwordForgotStep > 0 &&
         passwordForgotStep > passwordStep);
 };
+const isResetPasswordViePhoneFlowFn = (steps) => {
+    // First -> Passsword -> Password Forgot Phone
+    const passwordStep = steps.findIndex((s) => s.type === SSOStepTypeType.PASSWORD);
+    const passwordForgotStep = steps.findIndex((s) => s.type === 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) === SSOStepTypeType.OTP ||
         (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.SETUP_FULL ||
@@ -235,29 +261,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)
-                ? [SSOStepTypeType.VERIFY_PHONE, SSOStepTypeType.OTP]
-                : undefined,
-            isExistUpdateEmailStep(steps)
-                ? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
-                    ? SSOStepTypeType.OTP
-                    : SSOStepTypeType.UPDATE_EMAIL
-                : undefined,
-            !userInfo || !isUserFinishedSetup(userInfo)
-                ? SSOStepTypeType.SETUP_FULL
-                : undefined,
-        ]
-            .flat()
-            .filter(Boolean);
+        // Ignore Phone in Community if in update email step
+        const isCommunityUpdateEmail = useSSOV2Store().setupSource === 'community' &&
+            ((_a = steps[0]) === null || _a === void 0 ? void 0 : _a.type) === SSOStepTypeType.UPDATE_EMAIL;
+        const arrSteps = isCommunityUpdateEmail
+            ? [
+                SSOStepTypeType.UPDATE_EMAIL,
+                SSOStepTypeType.OTP,
+                !userInfo || !isUserFinishedSetup(userInfo)
+                    ? SSOStepTypeType.SETUP_FULL
+                    : undefined,
+            ]
+                .flat()
+                .filter(Boolean)
+            : [
+                !isPhoneVerifedAlready(userInfo, flowData) && abTestFlow !== 'B'
+                    ? [SSOStepTypeType.VERIFY_PHONE, SSOStepTypeType.OTP]
+                    : undefined,
+                isExistUpdateEmailStep(steps)
+                    ? (step === null || step === void 0 ? void 0 : step.type) === SSOStepTypeType.OTP
+                        ? SSOStepTypeType.OTP
+                        : SSOStepTypeType.UPDATE_EMAIL
+                    : undefined,
+                !userInfo || !isUserFinishedSetup(userInfo)
+                    ? SSOStepTypeType.SETUP_FULL
+                    : undefined,
+            ]
+                .flat()
+                .filter(Boolean);
         const previousStep = steps[currentStepIndex - 1];
         return [
             arrSteps.length,
@@ -271,7 +310,7 @@ const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo)
             !isPhoneVerifedAlready(userInfo, flowData)
                 ? 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)
                 ? SSOStepTypeType.FORGOT_PASSWORD_SETUP
                 : undefined,
             !isSetupFullInfoAlready(userInfo, flowData)
@@ -313,8 +352,11 @@ 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 hasPhoneStep = !isPhoneVerifedAlready(userInfo, flowData);
+        const hasPhoneStepCase1 = !isPhoneVerifedAlready(userInfo, flowData) && abTestFlow !== 'B';
+        const hasPhoneStepCase2 = !isPhoneVerifedAlready(userInfo, flowData) &&
+            useSSOV2Store.getState().source === 'care_onboarding';
+        const hasPasswordStep = !((_c = flowData === null || flowData === void 0 ? void 0 : flowData.metaData) === null || _c === void 0 ? void 0 : _c.is_pass);
+        const hasPhoneStep = hasPhoneStepCase1 || hasPhoneStepCase2;
         const hasSetupFullStep = !isSetupFullInfoAlready(userInfo, flowData);
         const isForgotPasswordSetup = steps.find((s) => s.type === SSOStepTypeType.FORGOT_PASSWORD_SETUP);
         if (!hasPasswordStep && !hasPhoneStep && !hasSetupFullStep)
@@ -348,10 +390,10 @@ const getCurrentStepNumber = (flowData, { steps, currentStepIndex, }, userInfo)
 const ProgressBar = () => {
     // const initUserInfo = useRef<UserInfo | undefined | null>()
     const { steps, currentStepIndex } = useSSOSteps();
-    const { flowData, userInfo } = useSSOV2Store();
+    const { flowData, userInfo, abTestFlow } = useSSOV2Store();
     /** No need update state IF userInfo is changed */
     const initUserInfo = 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.createElement(Flex, { gap: 2 }, Array.from({ length: totalStepNumber }).map((_, idx) => {
@@ -440,7 +482,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.createElement(ChevronLeft, null))),
-                showLogo && (React__default.createElement(LogoIcon, { type: logoType, height: 32, width: 'unset' })),
+                showLogo && (React__default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                    React__default.createElement(LogoIcon, { type: logoType, height: 32, width: 'unset' }),
+                    locale === LOCALE.Indonesia && (React__default.createElement(ImageWrap, { alt: "", src: CommonGAssets.getAssetPath('sehat-badge.png'), style: {
+                            width: 56,
+                            height: 23,
+                        } })))),
                 showClose && (React__default.createElement(Button, { variant: "white", style: {
                         width: 40,
                         height: 40,
@@ -593,11 +640,11 @@ const SSOEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
-    const { flowData } = useSSOV2Store();
+    const { flowData, abTestFlow } = useSSOV2Store();
     const trackingCategory = flowData.flow === 'signup'
-        ? `SSO - Sign Up via Email`
-        : 'SSO - Sign In via Email';
-    const trackingAction = 'Continue With Email';
+        ? `SSO - Sign Up via Email_Phone_Adoption_Test_${abTestFlow}`
+        : `SSO - Sign In via Email_Phone_Adoption_Test_${abTestFlow}`;
+    const trackingAction = `Continue With Email`;
     const { setTracking } = useSSOState();
     useEffect(() => {
         if (!hidden) {
@@ -680,7 +727,7 @@ const SSOEmailScreen = ({ hidden, }) => {
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.email.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.email.description'))),
-        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, disabled: loading, onChange: () => setErrMsg(''), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
+        React__default.createElement(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.createElement(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'))));
 };
 
@@ -783,6 +830,59 @@ const loginBySocial = (token, social) => __awaiter(void 0, void 0, void 0, funct
     });
 });
 
+// "phone_number": "906911910",
+// "area_code":"+84",
+const registerBySendWhatsAppOTP = (phone, areaCode) => __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', websiteId);
+    return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.REGISTER_BY_SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+// "phone_number": "906911910",
+// "area_code":"+84",
+const resendWhatsAppOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const resendUpdatePhoneWhatsAppOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
+    const formData = new FormData();
+    formData.append('phone_number', phone);
+    formData.append('area_code', areaCode);
+    return fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.UPDATE_PHONE_SEND_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const verifyUpdatePhoneWhatsAppOTP = (phone, areaCode, otpCode) => __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 fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.UPDATE_PHONE_VERIFY_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+const verifyByWhatsAppOTP = (phone, areaCode, otpCode) => __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 fetchSSOV2Api(SSO_V2_PATHS.WHATSAPP.VERIFY_BY_OTP, {
+        method: 'POST',
+        body: formData,
+    });
+});
+
 // "phone_number": "906911910",
 // "area_code":"+84",
 const registerBySendZaloOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
@@ -839,9 +939,118 @@ const verifyUpdatePhoneZaloOTP = (phone, areaCode, otpCode) => __awaiter(void 0,
     });
 });
 
+// VietNam: Zalo - SMS
+// Info: WhatsApp
+// Malay: WhatsApp và SMS
+const isFeatureWhatsAppEnabled = [
+    LOCALE.Indonesia,
+    LOCALE.Malaysia,
+].includes(locale);
+const isFeatureSMSEnabled = [LOCALE.Vietnam, LOCALE.Malaysia].includes(locale);
+const isFeatureZaloEnabled = [LOCALE.Vietnam].includes(locale);
+const isSupportProduct = (featureFlagsProduct) => {
+    const setupSource = useSSOV2Store.getState().setupSource || 'discover';
+    const isSupportDiscover = (featureFlagsProduct === null || featureFlagsProduct === void 0 ? void 0 : featureFlagsProduct.find((p) => p.name === 'discover')) &&
+        setupSource === 'discover';
+    const isSupportTogether = (featureFlagsProduct === null || featureFlagsProduct === void 0 ? void 0 : featureFlagsProduct.find((p) => p.name === 'together')) &&
+        setupSource === 'community';
+    const isSupportCare = (featureFlagsProduct === null || featureFlagsProduct === void 0 ? void 0 : featureFlagsProduct.find((p) => p.name === 'care')) &&
+        setupSource === 'care';
+    return isSupportDiscover || isSupportTogether || isSupportCare;
+};
+
 const MailIcon = (props) => (React__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.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 } = useTranslations();
+    const { locale } = useSSOState();
+    return (React__default.createElement(Stack, { spacing: 24, sx: (theme) => ({
+            marginTop: 56,
+            [theme.fn.smallerThan('sm')]: {
+                marginTop: 'auto',
+                paddingTop: 50,
+            },
+        }) },
+        React__default.createElement(Spoiler, { maxHeight: 74, showLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true, align: "left" }, t('home.seeMore')), hideLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true, align: "left" }, t('articlePage.showLess')) },
+            React__default.createElement(Text, { size: "p5", color: "gray.6" }, t(legalTextType === 'community'
+                ? 'ssov2.policyText.community'
+                : 'ssov2.policyText', {
+                privacy: (React__default.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_a = 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.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_b = 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 { t } = useTranslations();
+    return (React__default.createElement("div", { style: {
+            display: hidden ? 'none' : 'flex',
+            flexDirection: 'column',
+            height: '100%',
+        } },
+        React__default.createElement(Stack, { mt: 8, spacing: 8 },
+            React__default.createElement(Text, { size: "h4", weight: "semiBold" }, t('home.navigator.menu.category.noDatas.title')),
+            React__default.createElement(Text, { size: "p4" }, t('ssov2.abTestingFlowB.description'))),
+        React__default.createElement(Stack, { mt: 24, spacing: 24 },
+            React__default.createElement(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.createElement(Google, { style: {
+                        width: 20,
+                        height: 20,
+                        marginRight: 4,
+                        borderRadius: '100%',
+                    } }),
+                ' ',
+                React__default.createElement(Text, { size: "p4", color: "black", weight: "semiBold" }, t('ssov2.button.continueGoogle'))),
+            React__default.createElement(Stack, { spacing: 24, align: "center" },
+                React__default.createElement(Text, { size: "p4", color: "gray.4" }, t('ssov2.orContinueWith')),
+                React__default.createElement(Group, { spacing: 8, style: {
+                        width: '100%',
+                    } },
+                    React__default.createElement(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.createElement(Facebook, { style: {
+                                width: 20,
+                                height: 20,
+                                marginRight: 4,
+                                borderRadius: '100%',
+                            } }),
+                        ' ',
+                        React__default.createElement(Text, { size: "p4", color: "black", weight: "regular" }, "Facebook")),
+                    React__default.createElement(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.createElement(MailIcon, { style: {
+                                marginRight: 4,
+                            } }),
+                        ' ',
+                        React__default.createElement(Text, { size: "p4", color: "black", weight: "regular" }, "Email"))))),
+        React__default.createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory })));
+};
+
 function createCommonjsModule(fn) {
   var module = { exports: {} };
 	return fn(module, module.exports), module.exports;
@@ -2276,6 +2485,12 @@ const StyledPhone = styled(PhoneWithCustomCountrySelect) `
   }
 `;
 
+const WhatsApp = ({ size = 20 }) => {
+    return (React__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.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.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.createElement("svg", { width: (size * 21) / 20, height: size, viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -2291,17 +2506,16 @@ const Zalo = ({ size = 20, useCurrentColor = false }) => {
 };
 
 const SSOFirstScreen = ({ hidden, config, }) => {
-    var _a, _b;
     const [phone, setPhone] = React__default.useState('');
     const [errMsg, setErrMsg] = React__default.useState('');
     const { locale, onClose, setTracking } = useSSOState();
     const { addStep, goNext } = useSSOSteps();
-    const { setUserInfo } = useSSOV2Store();
+    const { setUserInfo, abTestFlow } = useSSOV2Store();
     const [activeTab, setActiveTab] = React__default.useState('login');
     const { legalTextType } = config || {};
     const { t } = useTranslations();
-    const trackingAction = 'Sign In or Sign Up';
-    const trackingCategory = `SSO - ${activeTab === 'login' ? 'Sign In' : 'Sign Up'}`;
+    const trackingAction = abTestFlow === 'B' ? `Sign Up` : `Sign In or Sign Up`;
+    const trackingCategory = `SSO - ${activeTab === 'login' ? 'Sign In' : 'Sign Up'}_Phone_Adoption_Test_${abTestFlow}`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -2326,7 +2540,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                     },
                 });
                 const isNotHavePhone = !userInfo._data.phone || !userInfo._data.phone_verified_at;
-                if (isNotHavePhone) {
+                if (isNotHavePhone && abTestFlow !== 'B') {
                     useSSOV2Store.setState((f) => {
                         var _a;
                         return ({
@@ -2414,7 +2628,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         };
     }, []);
     const onClickContinueZalo = () => __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) {
@@ -2423,8 +2637,8 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield 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) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'zalo',
@@ -2476,6 +2690,69 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         setLoading(false);
     });
+    const onClickContinueWhatsApp = () => __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 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) {
+                useSSOV2Store.setState({
+                    flowData: {
+                        method: 'whatsapp',
+                        flow: 'login',
+                        metaData: userExist._data,
+                    },
+                });
+                addStep({
+                    type: 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);
+                }
+                useSSOV2Store.setState({
+                    flowData: {
+                        method: 'whatsapp',
+                        flow: 'signup',
+                        metaData: userExist._data,
+                    },
+                });
+                addStep({
+                    type: 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 = () => __awaiter(void 0, void 0, void 0, function* () {
         var _e, _f;
         setLoading(true);
@@ -2618,6 +2895,9 @@ const SSOFirstScreen = ({ hidden, config, }) => {
             });
         }, { scope: 'public_profile,email,user_gender,user_birthday' });
     };
+    if (abTestFlow === 'B') {
+        return (React__default.createElement(FirstBFlow, { hidden: hidden, activeTab: activeTab, legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory, onTriggerGoogleLogin: onTriggerGoogleLogin, onTriggerFacebookLogin: onTriggerFacebookLogin, onClickEmail: onClickEmail }));
+    }
     return (React__default.createElement("div", { style: {
             display: hidden ? 'none' : 'flex',
             flexDirection: 'column',
@@ -2653,8 +2933,9 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                                 };
                             }, [activeTab]) }))),
                 React__default.createElement(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.createElement(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.createElement(Zalo, null) }, t('ssov2.button.otp.zalo')),
-                React__default.createElement(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.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.otp.sms'))),
+                isFeatureWhatsAppEnabled && (React__default.createElement(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.createElement(WhatsApp, null), color: "#00B16A" }, t('ssov2.button.otp.whatsapp'))),
+                isFeatureZaloEnabled && (React__default.createElement(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.createElement(Zalo, null) }, t('ssov2.button.otp.zalo'))),
+                isFeatureSMSEnabled && (React__default.createElement(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.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.otp.sms')))),
             React__default.createElement(Divider, { color: "#E4E8EC", display: activeTab === 'signup' ? 'block' : 'none' }),
             React__default.createElement(Stack, { spacing: 16, align: "center" },
                 React__default.createElement(Text, { size: "p4", color: "gray.4" }, t('ssov2.orContinueWith')),
@@ -2703,26 +2984,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                             } }),
                         ' ',
                         React__default.createElement(Text, { size: "p4", color: "black", weight: "regular" }, "Email"))))),
-        React__default.createElement(Stack, { spacing: 24, sx: (theme) => ({
-                marginTop: 56,
-                [theme.fn.smallerThan('sm')]: {
-                    marginTop: 'auto',
-                    paddingTop: 50,
-                },
-            }) },
-            React__default.createElement(Spoiler, { maxHeight: 74, showLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true }, t('home.seeMore')), hideLabel: React__default.createElement(Text, { size: "p5", color: "gray.6", underline: true }, t('articlePage.showLess')) },
-                React__default.createElement(Text, { size: "p5", color: "gray.6" }, t(legalTextType === 'community'
-                    ? 'ssov2.policyText.community'
-                    : 'ssov2.policyText', {
-                    privacy: (React__default.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_a = 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.createElement("a", { href: `https://${domainLocales[locale]}/static/${((_b = 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.createElement(PolicyContent, { legalTextType: legalTextType, trackingAction: trackingAction, trackingCategory: trackingCategory })));
 };
 
 const initSendUpdateEmailOtp = (email) => __awaiter(void 0, void 0, void 0, function* () {
@@ -2751,7 +3013,7 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
     const { t } = useTranslations();
     const { onClose, setTracking } = useSSOState();
     const { setSteps, steps } = useSSOSteps();
-    const { flowData, userInfo } = useSSOV2Store();
+    const { flowData, userInfo, abTestFlow } = useSSOV2Store();
     const [loading, setLoading] = React__default.useState(false);
     const [otp, setOtp] = React__default.useState('');
     const [error, setError] = React__default.useState('');
@@ -2763,15 +3025,16 @@ const SSOOTPScreen = ({ hidden, index, 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}`
+        ? `SSO - Existing User via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`
         : isVerifyPhoneInTheSignUp(steps, flowData)
-            ? `SSO - Sign Up via ${trackingMethod}`
-            : `SSO - Sign In via ${trackingMethod}`;
+            ? `SSO - Sign Up via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`
+            : `SSO - Sign In via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`;
     const trackingAction = isEmail
-        ? 'Verify Your Email'
-        : `Verify Phone Number via ${isZalo ? 'Zalo' : isSMS ? 'SMS' : ''}`;
+        ? `Verify Your Email`
+        : `Verify Phone Number via ${isZalo ? 'Zalo' : isSMS ? 'SMS' : isWhatsApp ? 'WhatsApp' : ''}`;
     useEffect(() => {
         if (!hidden) {
             setError('');
@@ -2805,6 +3068,9 @@ const SSOOTPScreen = ({ hidden, index, 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') {
@@ -2813,6 +3079,9 @@ const SSOOTPScreen = ({ hidden, index, 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);
                 }
@@ -2851,6 +3120,9 @@ const SSOOTPScreen = ({ hidden, index, 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 getUserInfo();
@@ -2876,6 +3148,7 @@ const SSOOTPScreen = ({ hidden, index, 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') &&
@@ -2934,6 +3207,9 @@ const SSOOTPScreen = ({ hidden, index, 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);
             }
@@ -2956,7 +3232,15 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
                 addStepAndGoNext({
                     type: SSOStepTypeType.FORGOT_PASSWORD_SETUP,
                     config: {
-                        provider: isZalo ? 'Zalo' : isSMS ? 'SMS' : isEmail ? 'Email' : '',
+                        provider: isZalo
+                            ? 'Zalo'
+                            : isSMS
+                                ? 'SMS'
+                                : isWhatsApp
+                                    ? 'WhatsApp'
+                                    : isEmail
+                                        ? 'Email'
+                                        : '',
                     },
                 });
             }
@@ -2984,6 +3268,7 @@ const SSOOTPScreen = ({ hidden, index, 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') &&
@@ -3024,13 +3309,12 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
         }
         setLoading(false);
     });
-    const swapZaloSms = () => __awaiter(void 0, void 0, void 0, function* () {
+    const swapAnotherMethod = (newType) => __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') {
@@ -3039,6 +3323,9 @@ const SSOOTPScreen = ({ hidden, index, 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') {
@@ -3047,6 +3334,9 @@ const SSOOTPScreen = ({ hidden, index, 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));
@@ -3096,7 +3386,13 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
                             : 'ssov2.otp.phone.description', {
                             email,
                             phone,
-                            method: otpType === 'phone-sms' ? 'SMS' : 'Zalo',
+                            method: isSMS
+                                ? 'SMS'
+                                : isZalo
+                                    ? 'Zalo'
+                                    : isWhatsApp
+                                        ? 'WhatsApp'
+                                        : '',
                         }),
                     } }))),
         React__default.createElement(Stack, { mt: 24, spacing: 8 },
@@ -3126,21 +3422,28 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
                     count: resendTime,
                 })))),
         React__default.createElement(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.createElement(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.createElement(Zalo, { size: 18, useCurrentColor: true })) : (React__default.createElement(ReplySquare, { size: 18 })), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
-            method: otpType === 'phone-sms' ? 'Zalo' : 'SMS',
-        })))));
+        !isEmail && (React__default.createElement(React__default.Fragment, null,
+            isFeatureWhatsAppEnabled && (React__default.createElement(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.createElement(WhatsApp, null), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
+                method: 'WhatsApp',
+            }))),
+            isFeatureZaloEnabled && (React__default.createElement(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.createElement(Zalo, null), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
+                method: 'Zalo',
+            }))),
+            isFeatureSMSEnabled && (React__default.createElement(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.createElement(ReplySquare, { size: 18 }), style: { fontWeight: 400 }, color: "#595959" }, t('ssov2.otp.sendVia', {
+                method: 'SMS',
+            })))))));
 };
 
 const SSOPasswordScreen = ({ hidden, config, }) => {
     const { t } = useTranslations();
     const { onClose, setTracking } = useSSOState();
-    const { setUserInfo, flowData } = useSSOV2Store();
+    const { setUserInfo, flowData, abTestFlow } = useSSOV2Store();
     const [errMsg, setErrMsg] = React__default.useState('');
     const phone = config === null || config === void 0 ? void 0 : config.phone;
     const method = config === null || config === void 0 ? void 0 : config.method;
     const email = config === null || config === void 0 ? void 0 : config.email;
-    const trackingCategory = `SSO - Sign In via ${email ? 'Email' : method}`;
-    const trackingAction = 'Welcome Back';
+    const trackingCategory = `SSO - Sign In via ${email ? 'Email' : method}_Phone_Adoption_Test_${abTestFlow}`;
+    const trackingAction = `Welcome Back`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3210,7 +3513,7 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
         const isEmailFlow = isEmailFlowFn(flowData);
         setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
         if (!phone && !!email) {
-            if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+            if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) && abTestFlow !== 'B') {
                 useSSOV2Store.setState((s) => ({
                     flowData: Object.assign(Object.assign({}, s.flowData), { isVerifyPhone: true }),
                 }));
@@ -3282,7 +3585,7 @@ const SSOPasswordScreen = ({ hidden, config, }) => {
                 t('ssov2.password.title2')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.password.description'))),
         React__default.createElement(Stack, { mt: 24, spacing: 8 },
-            React__default.createElement(PasswordInput, { name: "password", placeholder: "Nh\u1EADp m\u1EADt kh\u1EA9u", error: errMsg || undefined, onChange: () => setErrMsg(''), disabled: loading, required: true, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Password" }),
+            React__default.createElement(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.createElement(Group, { spacing: 8, align: "center", style: {
                     height: 40,
                 } },
@@ -3301,6 +3604,7 @@ const SetupLater = ({ style = {} }) => {
     const { currentStepIndex, steps, addStep, goNext } = useSSOSteps();
     const currentStep = steps[currentStepIndex];
     const onClickSetupLater = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (loading)
             return;
         setLoading(true);
@@ -3309,7 +3613,9 @@ const SetupLater = ({ style = {} }) => {
             ((currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.VERIFY_PHONE ||
                 (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.FORGOT_PASSWORD_PHONE)) {
             addStep({
-                type: SSOStepTypeType.SETUP_FULL,
+                type: ((_a = currentStep.config) === null || _a === void 0 ? void 0 : _a.afterAction) === 'update-email'
+                    ? SSOStepTypeType.UPDATE_EMAIL
+                    : SSOStepTypeType.SETUP_FULL,
                 config: {
                     userInfo,
                 },
@@ -3328,7 +3634,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);
     });
@@ -3340,10 +3647,10 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
     const { t } = useTranslations();
     const [errMsg, setErrMsg] = React__default.useState('');
     const { setTracking, locale } = useSSOState();
-    const { flowData } = useSSOV2Store();
+    const { flowData, abTestFlow } = useSSOV2Store();
     const trackingMethod = flowData.method;
-    const trackingCategory = `SSO - Sign In via ${trackingMethod}`;
-    const trackingAction = 'Forgot Password';
+    const trackingCategory = `SSO - Sign In via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`;
+    const trackingAction = `Forgot Password`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3355,7 +3662,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
     }, [hidden]);
     const [loading, setLoading] = React__default.useState(false);
     const { addStep, goNext } = useSSOSteps();
-    const onClickContinueZalo = () => __awaiter(void 0, void 0, void 0, function* () {
+    const onClickContinueWhatsApp = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         setLoading(true);
         try {
@@ -3368,6 +3675,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: 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 = () => __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 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 {
@@ -3383,7 +3733,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();
@@ -3399,7 +3749,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c, _d;
+        var _e, _f;
         setLoading(true);
         try {
             const { areaCode, phoneNumber } = splitPhone(phone);
@@ -3410,7 +3760,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
             const userExist = yield 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 {
@@ -3426,7 +3776,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();
@@ -3460,8 +3810,9 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
                     };
                 }, []) }),
             errMsg && (React__default.createElement(Text, { size: "label2", color: "red.6", mt: -12 }, errMsg)),
-            React__default.createElement(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.createElement(Zalo, null) }, t('ssov2.button.continueZalo')),
-            React__default.createElement(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.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS')),
+            isFeatureWhatsAppEnabled && (React__default.createElement(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.createElement(WhatsApp, null), color: "#00B16A" }, t('ssov2.button.continueWhatsApp'))),
+            isFeatureZaloEnabled && (React__default.createElement(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.createElement(Zalo, null) }, t('ssov2.button.continueZalo'))),
+            isFeatureSMSEnabled && (React__default.createElement(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.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS'))),
             React__default.createElement(SetupLater, null))));
 };
 
@@ -3490,12 +3841,12 @@ const SSOPasswordWithConfirm = (_a) => {
                 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.createElement(Stack, { spacing: 8 },
-            React__default.createElement(Group, { spacing: 4, align: "center" },
+            React__default.createElement(Group, { spacing: 4, align: "flex-start" },
                 atLeast8Chars ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeast8Chars === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
-                React__default.createElement(Text, { size: "n1" }, t('ssov2.passwordForgotSetup.field.password.atLeast8Chars'))),
-            React__default.createElement(Group, { spacing: 4, align: "center" },
+                React__default.createElement(Text, { size: "n1", style: { flex: 1 } }, t('ssov2.passwordForgotSetup.field.password.atLeast8Chars'))),
+            React__default.createElement(Group, { spacing: 4, align: "flex-start" },
                 atLeastOneUpper ? (React__default.createElement(CheckGreenIcon, null)) : typeof atLeastOneUpper === 'undefined' ? (React__default.createElement(CheckGrayIcon, null)) : (React__default.createElement(CheckRedIcon, null)),
-                React__default.createElement(Text, { size: "n1" }, t('ssov2.passwordForgotSetup.field.password.atLeastOneUpper')))),
+                React__default.createElement(Text, { size: "n1", style: { flex: 1 } }, t('ssov2.passwordForgotSetup.field.password.atLeastOneUpper')))),
         React__default.createElement(PasswordInput, Object.assign({ name: "confirm-password", placeholder: t('ssov2.passwordForgotSetup.field.passwordConfirm.placeholder'), label: t('ssov2.passwordForgotSetup.field.passwordConfirm.label'), required: true, withAsterisk: true, 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')))));
 };
 
@@ -3505,11 +3856,11 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
     const [errMsg, setErrMsg] = React__default.useState('');
     const { setTracking, onClose } = useSSOState();
     const { addStep, goNext } = useSSOSteps();
-    const { flowData, setUserInfo } = useSSOV2Store();
+    const { flowData, setUserInfo, source, abTestFlow } = useSSOV2Store();
     const trackingMethod = flowData.method;
     const trackingCategory = flowData.flow === 'login'
-        ? `SSO - Sign In via ${trackingMethod}`
-        : `SSO - Sign Up via ${trackingMethod}`;
+        ? `SSO - Sign In via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`
+        : `SSO - Sign Up via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`;
     const trackingAction = `Setup Password`;
     useEffect(() => {
         if (!hidden) {
@@ -3582,7 +3933,11 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                         // Email
                         if (isEmailFlowFn(flowData)) {
                             setUserInfo(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data);
-                            if (isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data)) {
+                            const careOnboardingAndNotVerifiedYet = isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) &&
+                                source === 'care_onboarding';
+                            const abTestFlowAAndNotVerifiedYet = isPhoneNotVerifedYet(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data) && abTestFlow !== 'B';
+                            if (careOnboardingAndNotVerifiedYet ||
+                                abTestFlowAAndNotVerifiedYet) {
                                 addStep({
                                     type: SSOStepTypeType.VERIFY_PHONE,
                                     config: {
@@ -3591,6 +3946,15 @@ const SSOPasswordForgotSetup = ({ hidden, }) => {
                                 });
                                 goNext();
                             }
+                            else if (!isSetupFullInfoAlready(userInfo === null || userInfo === void 0 ? void 0 : userInfo._data, flowData)) {
+                                addStep({
+                                    type: 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);
                             }
@@ -3650,16 +4014,16 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
     const [loading, setLoading] = React__default.useState(false);
     const [errMsg, setErrMsg] = React__default.useState('');
     const { locale, setTracking } = useSSOState();
-    const { flowData, userInfo } = useSSOV2Store();
+    const { flowData, userInfo, abTestFlow } = useSSOV2Store();
     const { steps } = useSSOSteps();
     const { afterAction, provider } = config || {};
     const trackingMethod = flowData === null || flowData === void 0 ? void 0 : flowData.method;
     const trackingCategory = userInfo && !userInfo.first_time_login
-        ? `SSO - Existing User via ${trackingMethod}`
+        ? `SSO - Existing User via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`
         : isVerifyPhoneInTheSignUp(steps, flowData)
-            ? `SSO - Sign Up via ${trackingMethod}`
-            : `SSO - Sign In via ${trackingMethod}`;
-    const trackingAction = 'Verify Phone Number';
+            ? `SSO - Sign Up via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`
+            : `SSO - Sign In via ${trackingMethod}_Phone_Adoption_Test_${abTestFlow}`;
+    const trackingAction = `Verify Phone Number`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -3755,6 +4119,48 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
         }
         setLoading(false);
     });
+    const onClickContinueWhatsApp = () => __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 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: 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.createElement("div", { style: {
             display: hidden ? 'none' : 'block',
         } },
@@ -3776,8 +4182,9 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
                                 'data-event-category': trackingCategory,
                             };
                         }, []) })),
-                React__default.createElement(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.createElement(Zalo, null) }, t('ssov2.button.continueZalo')),
-                React__default.createElement(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.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS')),
+                isFeatureWhatsAppEnabled && (React__default.createElement(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.createElement(WhatsApp, null), color: "#00B16A" }, t('ssov2.button.continueWhatsApp'))),
+                isFeatureZaloEnabled && (React__default.createElement(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.createElement(Zalo, null) }, t('ssov2.button.continueZalo'))),
+                isFeatureSMSEnabled && (React__default.createElement(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.createElement(ReplySquare, { size: 18 }) }, t('ssov2.button.continueSMS'))),
                 source !== 'care_onboarding' && source !== 'ecom' && React__default.createElement(SetupLater, null)))));
 };
 
@@ -3858,7 +4265,7 @@ loading, tracking, }) => {
                     return;
                 form.getInputProps('dob').onBlur(e);
             } })),
-        needEmail && (React__default.createElement(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.createElement(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'))))));
 };
@@ -3893,7 +4300,7 @@ const SSOSetupScreen = ({ hidden, config, }) => {
     var _a, _b, _c;
     const { onClose, setTracking } = useSSOState();
     const { t } = useTranslations();
-    const { setupSource, flowData } = useSSOV2Store();
+    const { setupSource, flowData, abTestFlow } = useSSOV2Store();
     const [errMsg, setErrMsg] = React__default.useState('');
     const userInfo = config === null || config === void 0 ? void 0 : config.userInfo;
     const [loading, setLoading] = React__default.useState(false);
@@ -3919,6 +4326,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';
@@ -3928,8 +4336,8 @@ const SSOSetupScreen = ({ hidden, config, }) => {
             provider === 'google' ||
             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 = 'Add Information';
+    const trackingCategory = `SSO - ${authFlow === 'signup' ? 'Sign Up' : 'Existing Users'} via ${authMethod || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.provider)}_Phone_Adoption_Test_${abTestFlow}`;
+    const trackingAction = `Add Information`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -4039,9 +4447,9 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
     const { t } = useTranslations();
     const [errMsg, setErrMsg] = React__default.useState('');
     const { setTracking } = useSSOState();
-    const { flowData } = useSSOV2Store();
-    const trackingCategory = `SSO - Existing User via ${flowData === null || flowData === void 0 ? void 0 : flowData.method}`;
-    const trackingAction = 'Continue With Email';
+    const { flowData, abTestFlow } = useSSOV2Store();
+    const trackingCategory = `SSO - Existing User via ${flowData === null || flowData === void 0 ? void 0 : flowData.method}_Phone_Adoption_Test_${abTestFlow}`;
+    const trackingAction = `Continue With Email`;
     useEffect(() => {
         if (!hidden) {
             setErrMsg('');
@@ -4100,7 +4508,7 @@ const SSOUpdateEmailScreen = ({ hidden, }) => {
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.updateEmail.title')),
             React__default.createElement(Text, { size: "p4" }, t('ssov2.updateEmail.description'))),
-        React__default.createElement(Input, { name: "email", placeholder: "Email c\u1EE7a b\u1EA1n", error: errMsg || undefined, type: "email", required: true, mt: 24, onChange: () => setErrMsg(''), disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Email" }),
+        React__default.createElement(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.createElement(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'))));
 };
 
@@ -4150,7 +4558,7 @@ if (!String.prototype.capitalize) {
     };
 }
 const SSOV2 = ({ onClose: onCloseProps, locale }) => {
-    const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, } = useSSOV2Store();
+    const { isOpen, setOpen, returnUrl, setMounted, source, overrideClose, setOnCloseProp, forceReloadOnClose, setABTestFlow, } = useSSOV2Store();
     useEffect(() => {
         setMounted(true);
         return () => {
@@ -4168,6 +4576,36 @@ const SSOV2 = ({ onClose: onCloseProps, locale }) => {
     useEffect(() => {
         setOnCloseProp(onCloseProps);
     }, [onCloseProps]);
+    useEffect(() => {
+        const site = MAP_DOMAIN_BY_LOCALE[locale];
+        const previousABTestingFlow = getCookie('abTestingFlow');
+        fetchFeatureFlag(site).then((data) => {
+            if (data.is_enabled && isSupportProduct(data.products)) {
+                if (previousABTestingFlow) {
+                    setABTestFlow(previousABTestingFlow);
+                }
+                else {
+                    const randomBetween100Percent = Math.floor(Math.random() * 100 + 1);
+                    const aFlow = data.a_percentage;
+                    if (randomBetween100Percent <= aFlow) {
+                        setCookie('abTestingFlow', 'A', {
+                            days: 30,
+                        });
+                        setABTestFlow('A');
+                    }
+                    else {
+                        setCookie('abTestingFlow', 'B', {
+                            days: 30,
+                        });
+                        setABTestFlow('B');
+                    }
+                }
+            }
+            else {
+                deleteCookie('abTestingFlow');
+            }
+        });
+    }, [locale]);
     if (!isOpen) {
         return null;
     }