@hhgtech/hhg-components 1.29.314-beta-4 → 1.29.314-beta-6

package/build/esm/ssoV2.js

@@ -1,27 +1,27 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-f98f7578.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-197ae64e.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-7a4a2228.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-4c399e7b.js';
-export { u as useSSOV2Store } from './store-4c399e7b.js';
+import { I as Input, s as styles, O as OTP, f as PasswordInput, E as ErrorBoundary } from './index-3a3807cc.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-29cacb75.js';
+export { u as useSSOV2Store } from './store-29cacb75.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 } from './index-f483577d.js';
-import { L as LogoIcon } from './logoIcon-bbba0b86.js';
-import { B as Button } from './index-0060d35e.js';
-import { M as Modal } from './index-b456c550.js';
+import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-f621868f.js';
+import { L as LogoIcon } from './logoIcon-8b5257c9.js';
+import { B as Button } from './index-ffd5176c.js';
+import { M as Modal } from './index-0554da67.js';
 import { Stack, Flex, Box, Group, Divider } from '@mantine/core';
 import '@mantine/dates';
-import './index-d435fd47.js';
-import './index-4fd3b30d.js';
-import { s as showNotification } from './useMantineLocale-c437483b.js';
-import { T as Text } from './index-e57c0db6.js';
-import { u as useTranslations } from './index-01cf7a69.js';
+import './index-2d7c0f3f.js';
+import './index-5aca5a65.js';
+import { s as showNotification } from './useMantineLocale-65c8b5d4.js';
+import { T as Text } from './index-21cd8d4d.js';
+import { u as useTranslations } from './index-2e0ba895.js';
 import '@mantine/hooks';
-import './utils-6e159aa4.js';
-import './other-281f8ebc.js';
-import './index-5283d5f1.js';
-import { L as LOCALE } from './Locale-361ccc47.js';
-import { G as Google, F as Facebook } from './Google-67a80ad5.js';
+import './utils-2f1b22bf.js';
+import './other-d68fde3e.js';
+import './index-9a790659.js';
+import { L as LOCALE } from './Locale-7ca0ff77.js';
+import { G as Google, F as Facebook } from './Google-7d4660a0.js';
 import { parsePhoneNumber, getCountryCallingCode } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import cn from 'classnames';
@@ -29,28 +29,28 @@ 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-8ce9d779.js';
+import { u as useScreenSize } from './useScreenSize-0ca91872.js';
 import { Drawer } from 'vaul';
-import { M as MAPPED_LOCALE } from './utils-d4fff87c.js';
-import { S as Spoiler } from './index-47af5727.js';
+import { M as MAPPED_LOCALE } from './utils-8980bc81.js';
+import { S as Spoiler } from './index-196643a1.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { useForm, yupResolver } from '@mantine/form';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-cfae5ab7.js';
+import { D as DatePicker } from './index-9274c472.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './useUniqueId-f0d0846c.js';
+import './useUniqueId-c4042789.js';
 import './constantsSite.js';
 import 'zustand';
 import './constantsIsProduction.js';
-import './normalizeLink-50f8eb77.js';
+import './normalizeLink-73fbd3c5.js';
 import './miscCookieHelper.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-d03f0e59.js';
+import './index.styles-54383f91.js';
 import '@mantine/notifications';
-import './translationsContext-9e769397.js';
+import './translationsContext-58fca5ef.js';
 
 const SSOStateContext = createContext({
     locale: LOCALE.Vietnam,
@@ -208,7 +208,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';
@@ -680,7 +681,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 +784,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,6 +893,16 @@ 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 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" })));
 
@@ -2276,6 +2340,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" },
@@ -2476,7 +2546,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         setLoading(false);
     });
-    const onClickContinuePhone = () => __awaiter(void 0, void 0, void 0, function* () {
+    const onClickContinueWhatsApp = () => __awaiter(void 0, void 0, void 0, function* () {
         var _e, _f;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
@@ -2488,6 +2558,69 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
             const provider = (_e = userExist._data) === null || _e === void 0 ? void 0 : _e.provider;
             if ((_f = userExist._data) === null || _f === void 0 ? void 0 : _f.is_pass) {
+                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 _g, _h;
+        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 = (_g = userExist._data) === null || _g === void 0 ? void 0 : _g.provider;
+            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'sms',
@@ -2540,7 +2673,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         setLoading(false);
     });
     const onClickLoginWithPhone = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _g, _h;
+        var _j, _k;
         setLoading(true);
         const { areaCode, phoneNumber } = splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
@@ -2549,7 +2682,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
         }
         const userExist = yield checkUserExist({ phone: phoneNumber });
         if ((userExist === null || userExist === void 0 ? void 0 : userExist._status) === 1) {
-            if (!userExist._data || !((_g = userExist._data) === null || _g === void 0 ? void 0 : _g.is_pass)) {
+            if (!userExist._data || !((_j = userExist._data) === null || _j === void 0 ? void 0 : _j.is_pass)) {
                 showNotification({
                     message: t('ssov2.first.noAccountOrPass'),
                     type: 'danger',
@@ -2557,7 +2690,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
                 setActiveTab('signup');
                 return setLoading(false);
             }
-            if ((_h = userExist._data) === null || _h === void 0 ? void 0 : _h.is_pass) {
+            if ((_k = userExist._data) === null || _k === void 0 ? void 0 : _k.is_pass) {
                 useSSOV2Store.setState({
                     flowData: {
                         method: 'phone',
@@ -2653,8 +2786,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')),
@@ -2763,6 +2897,7 @@ 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}`
@@ -2771,7 +2906,7 @@ const SSOOTPScreen = ({ hidden, index, 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' : ''}`;
     useEffect(() => {
         if (!hidden) {
             setError('');
@@ -2805,6 +2940,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 +2951,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 +2992,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 +3020,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 +3079,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 +3104,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 +3140,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 +3181,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 +3195,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 +3206,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 +3258,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,9 +3294,16 @@ 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, }) => {
@@ -3282,7 +3457,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,
                 } },
@@ -3355,7 +3530,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 +3543,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 +3601,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 +3617,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 +3628,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 +3644,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 +3678,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))));
 };
 
@@ -3492,10 +3711,10 @@ const SSOPasswordWithConfirm = (_a) => {
         React__default.createElement(Stack, { spacing: 8 },
             React__default.createElement(Group, { spacing: 4, align: "center" },
                 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(Text, { size: "n1", style: { flex: 1 } }, t('ssov2.passwordForgotSetup.field.password.atLeast8Chars'))),
             React__default.createElement(Group, { spacing: 4, align: "center" },
                 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')))));
 };
 
@@ -3755,6 +3974,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 +4037,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)))));
 };
 
@@ -4096,7 +4358,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'))));
 };