@hhgtech/hhg-components 1.29.538 → 1.29.539-beta-1

package/build/esm/ssoV2.js

@@ -1,64 +1,64 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-2a05b926.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-ddf40843.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useImperativeHandle, useState, useCallback, forwardRef } from 'react';
 import { getCookie, setCookie, deleteCookie } from './miscCookieHelper.js';
-import { I as Input, h as ErrorBoundary, s as styles, O as OTP, i as PasswordInput } from './index-ddab29ea.js';
-import { f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, u as updateUserInfo, r as resetPassword } from './index-5ff48170.js';
+import { I as Input, h as ErrorBoundary, s as styles, O as OTP, i as PasswordInput } from './index-f0c75e06.js';
+import { f as fetchSSOV2Api, w as websiteId, S as SSO_V2_PATHS, c as checkUserExist, a as fetchSSOV2ApiJson, F as FacebookAppId, G as GoogleAuthClientId, h as handleAuthSuccess, g as getUserInfo, u as updateUserInfo, r as resetPassword } from './index-4457d10e.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-303eab27.js';
-import { L as LogoIcon } from './logoIcon-06f180fe.js';
-import { B as Button } from './index-e18d3a10.js';
-import { M as Modal } from './index-5e2c875f.js';
+import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES, Q as QUERY_HEALTH_TOOL } from './index-25edef5c.js';
+import { L as LogoIcon } from './logoIcon-e800a153.js';
+import { B as Button } from './index-86d8b474.js';
+import { M as Modal } from './index-12d47825.js';
 import { Stack, Flex, Box, Group, Divider } from '@mantine/core';
 import '@mantine/dates';
-import './index-a8aa091a.js';
-import { C as CommonGAssets } from './index-398d35a9.js';
-import { s as showNotification } from './index-d62fd0ce.js';
-import { T as Text } from './index-515857b4.js';
-import './index-e5e939d0.js';
-import { u as useTranslations } from './index-3cb62a28.js';
+import './index-d1f6945b.js';
+import { C as CommonGAssets } from './index-b5093b79.js';
+import { s as showNotification } from './index-9971063d.js';
+import { T as Text } from './index-8bf68840.js';
+import './index-fd07a080.js';
+import { u as useTranslations } from './index-0539e710.js';
 import '@mantine/hooks';
-import './utils-67ca0c47.js';
-import './index-689bcdb1.js';
-import { L as LOCALE } from './Locale-2dee4c43.js';
-import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, I as IS_SSOV2_ENABLED, b as isPhoneNotVerifedYet, c as isLoginWithPhoneNotVerifedYet, d as isFlowFinishedSetup, r as redirect } from './store-8d4bd38e.js';
-export { u as useSSOV2Store } from './store-8d4bd38e.js';
-import { I as ImageWrap, u as useScreenSize } from './index-4851531b.js';
+import './utils-166a6323.js';
+import './index-2d5b31e5.js';
+import { L as LOCALE } from './Locale-87c095b7.js';
+import { S as SSOStepTypeType, a as useSSOSteps, u as useSSOV2Store, i as isUserFinishedSetup, I as IS_SSOV2_ENABLED, s as splitPhone, b as isPhoneNotVerifedYet, c as isLoginWithPhoneNotVerifedYet, d as isFlowFinishedSetup, r as redirect } from './store-6164247a.js';
+export { u as useSSOV2Store } from './store-6164247a.js';
+import { I as ImageWrap, u as useScreenSize } from './index-d538af7e.js';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { G as Google, F as Facebook } from './Google-ab0b8873.js';
-import { parsePhoneNumber, getCountryCallingCode } from 'react-phone-number-input';
-import { i as isFeatureWhatsAppEnabled, a as isFeatureZaloEnabled, b as isFeatureSMSEnabled, c as isSupportProduct } from './utils-880359e9.js';
-export { g as getURLwithSSOTracking } from './utils-880359e9.js';
-import { S as Spoiler } from './index-e45b828b.js';
+import { G as Google, F as Facebook } from './Google-b1bf78f9.js';
+import { i as isFeatureWhatsAppEnabled, a as isFeatureZaloEnabled, b as isFeatureSMSEnabled, c as isSupportProduct } from './utils-9babaf5c.js';
+export { g as getURLwithSSOTracking } from './utils-9babaf5c.js';
+import { S as Spoiler } from './index-30a25260.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 import { CaretDown } from '@hhgtech/icons/other';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
+import { getCountryCallingCode } from 'react-phone-number-input';
 import Flags from 'react-phone-number-input/flags';
 import { Drawer } from 'vaul';
-import { M as MAPPED_LOCALE } from './utils-8a236b01.js';
+import { M as MAPPED_LOCALE } from './utils-bedc5379.js';
 import { useForm, yupResolver } from '@mantine/form';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-293735ee.js';
+import { D as DatePicker } from './index-be7b5ff1.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './shared-63d1f7f1.js';
+import './shared-c6bfddc7.js';
 import 'uuid';
-import './useUniqueId-a8c53afd.js';
+import './useUniqueId-fc2fd15d.js';
 import './constantsSite.js';
 import '@emotion/react';
-import './normalizeLink-0f1a50a9.js';
+import './normalizeLink-b738a6d4.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-f02a8f04.js';
+import './index.styles-de545248.js';
 import '@mantine/notifications';
-import './translationsContext-673e5ab9.js';
+import './translationsContext-e3d7ed35.js';
 import 'zustand';
-import './healthTools-74596c00.js';
+import './healthTools-7af97f82.js';
 
 // const fakeData = {
 const fetchFeatureFlag = (site) => __awaiter(void 0, void 0, void 0, function* () {
@@ -425,6 +425,7 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     const showProgressBar = isDisplayProgressBarFn(flowData, currentStep);
     const showBack = (steps.length > 1 && !showProgressBar) ||
         (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.OTP ||
+        ((currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.WHATSAPP_OTP && steps.length > 1) ||
         (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.PASSWORD ||
         (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.EMAIL;
     const showClose = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.FIRST;
@@ -434,15 +435,25 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     const onCloseClick = () => {
         setCloseConfirmOpen(true);
     };
+    const isWhatsAppPhoneVerify = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.WHATSAPP_PHONE_VERIFY;
+    const isWhatsAppLoginFlow = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.WHATSAPP_PHONE_VERIFY ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === SSOStepTypeType.WHATSAPP_OTP;
+    const onModalRequestClose = () => {
+        if (isWhatsAppLoginFlow)
+            return;
+        onCloseClick();
+    };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
+        React__default.createElement(Modal, { opened: opened, onClose: onModalRequestClose, closeOnClickOutside: !isWhatsAppLoginFlow, closeOnEscape: !isWhatsAppLoginFlow, styles: (theme) => ({
                 body: {
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: 16,
+                    gap: isWhatsAppPhoneVerify ? 24 : 16,
                     padding: '32px 24px',
                     position: 'relative',
-                    background: 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 150px)',
+                    background: isWhatsAppPhoneVerify
+                        ? 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 70px)'
+                        : 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 150px)',
                     overflow: 'auto',
                     [theme.fn.smallerThan('sm')]: {
                         height: '100%',
@@ -786,18 +797,6 @@ const useGRecaptchaHandler = () => {
     };
 };
 
-const splitPhone = (phone) => {
-    if (!phone)
-        return { areaCode: undefined, phoneNumber: undefined };
-    const parsedPhone = parsePhoneNumber(phone);
-    return {
-        areaCode: parsedPhone.countryCallingCode
-            ? '+' + parsedPhone.countryCallingCode
-            : '',
-        phoneNumber: parsedPhone.nationalNumber || '',
-    };
-};
-
 // "phone_number":"906911910",
 // "password":"Kenny2103!"
 const loginByPhonePassword = (phone, password) => __awaiter(void 0, void 0, void 0, function* () {
@@ -880,6 +879,25 @@ const loginBySocial = (token, social) => __awaiter(void 0, void 0, void 0, funct
     });
 });
 
+/** Guest: send or resend OTP (same endpoint). Optional referrer e.g. payment page URL. */
+const sendLoginOtpWhatsapp = (phoneNumber, areaCode, referrer) => __awaiter(void 0, void 0, void 0, function* () {
+    return fetchSSOV2ApiJson(SSO_V2_PATHS.WHATSAPP.LOGIN_OTP_WHATSAPP, {
+        phone_number: phoneNumber,
+        area_code: areaCode,
+        website_id: Number(websiteId),
+        ga_client_id: getCookie('_ga') || '',
+        referrer: referrer || (typeof window !== 'undefined' ? window.location.href : ''),
+    }, true);
+});
+/** Guest: verify OTP after WhatsApp login send; `login_type` required by API. */
+const verifyWhatsappOtpGuest = (phoneNumber, areaCode, otpCode) => __awaiter(void 0, void 0, void 0, function* () {
+    return fetchSSOV2ApiJson(SSO_V2_PATHS.WHATSAPP.VERIFY_BY_OTP, {
+        otp_code: otpCode,
+        phone_number: phoneNumber,
+        area_code: areaCode,
+        login_type: 'otp-whatsapp',
+    }, true);
+});
 // "phone_number": "906911910",
 // "area_code":"+84",
 const registerBySendWhatsAppOTP = (phone, areaCode) => __awaiter(void 0, void 0, void 0, function* () {
@@ -3396,10 +3414,13 @@ const SSOOTPScreen = ({ hidden, index, config, }) => {
         setResendTime(30);
         const countdown = () => {
             setResendTime((t) => {
-                if (t - 1 > 0) {
+                if (t <= 0)
+                    return 0;
+                const next = t - 1;
+                if (next > 0) {
                     setTimeout(() => countdown(), 1000);
                 }
-                return t - 1;
+                return next;
             });
         };
         countdown();
@@ -4572,6 +4593,252 @@ const SSOUpdateEmailScreen = ({ hidden, config, }) => {
         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'))));
 };
 
+const SSOWhatsAppOTPScreen = ({ hidden, config, }) => {
+    const { t } = useTranslations();
+    const { onClose, setTracking } = useSSOState();
+    const [loading, setLoading] = React__default.useState(false);
+    const [otp, setOtp] = React__default.useState('');
+    const [error, setError] = React__default.useState('');
+    const submitButtonRef = React__default.useRef(null);
+    const otpRef = React__default.useRef(null);
+    const phone = (config === null || config === void 0 ? void 0 : config.phone) || '';
+    const referrer = config === null || config === void 0 ? void 0 : config.referrer;
+    const useAuthenticatedWhatsAppApis = !!(config === null || config === void 0 ? void 0 : config.useAuthenticatedWhatsAppApis);
+    const trackingCategory = 'SSO - WhatsApp Login';
+    const trackingAction = 'Verify WhatsApp OTP';
+    useEffect(() => {
+        if (!hidden) {
+            setError('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
+    const [resendTime, setResendTime] = React__default.useState(30);
+    const setupResendTimer = () => {
+        setResendTime(30);
+        const countdown = () => {
+            setResendTime((time) => {
+                if (time <= 0)
+                    return 0;
+                const next = time - 1;
+                if (next > 0) {
+                    setTimeout(() => countdown(), 1000);
+                }
+                return next;
+            });
+        };
+        countdown();
+    };
+    const sendOTPCode = (checkResend) => __awaiter(void 0, void 0, void 0, function* () {
+        if (checkResend && resendTime > 0)
+            return;
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            if (!areaCode || !phoneNumber) {
+                setError(t('ssov2.validate.phone.required'));
+                return setLoading(false);
+            }
+            const res = useAuthenticatedWhatsAppApis
+                ? yield resendUpdatePhoneWhatsAppOTP(phoneNumber, areaCode)
+                : yield sendLoginOtpWhatsapp(phoneNumber, areaCode, referrer);
+            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                return setLoading(false);
+            }
+            setupResendTimer();
+        }
+        catch (e) {
+            console.error(e);
+            setError(getErrorTextFromCode(t, ''));
+        }
+        setLoading(false);
+    });
+    const submitOtp = (otpValue) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!otpValue || otpValue.length < 6) {
+            setError(t('ssov2.validate.otp.required'));
+            return;
+        }
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = splitPhone(phone);
+            if (!areaCode || !phoneNumber) {
+                setError(t('ssov2.validate.phone.required'));
+                return setLoading(false);
+            }
+            const res = useAuthenticatedWhatsAppApis
+                ? yield verifyUpdatePhoneWhatsAppOTP(phoneNumber, areaCode, otpValue)
+                : yield verifyWhatsappOtpGuest(phoneNumber, areaCode, otpValue);
+            if ((res === null || res === void 0 ? void 0 : res._status) !== 1) {
+                setOtp('');
+                (_a = otpRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                setError(getErrorTextFromCode(t, res === null || res === void 0 ? void 0 : res.code));
+                return setLoading(false);
+            }
+            if (!useAuthenticatedWhatsAppApis && (res === null || res === void 0 ? void 0 : res._data)) {
+                handleAuthSuccess(res._data);
+            }
+            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+        }
+        catch (e) {
+            console.error(e);
+            setError(getErrorTextFromCode(t, ''));
+        }
+        setLoading(false);
+    });
+    useEffect(() => {
+        setupResendTimer();
+    }, []);
+    const initialAuthOtpSentRef = React__default.useRef(false);
+    useEffect(() => {
+        if (hidden ||
+            !useAuthenticatedWhatsAppApis ||
+            !phone ||
+            initialAuthOtpSentRef.current) {
+            return;
+        }
+        initialAuthOtpSentRef.current = true;
+        sendOTPCode(false);
+    }, [hidden, useAuthenticatedWhatsAppApis, phone]);
+    return (React__default.createElement("form", { style: {
+            display: hidden ? 'none' : 'block',
+        }, onSubmit: (e) => {
+            e.preventDefault();
+            submitOtp(String(otp));
+        } },
+        React__default.createElement(Stack, { spacing: 8 },
+            React__default.createElement(Text, { size: "s1", weight: "semiBold" }, t('ssov2.otp.phone.title')),
+            React__default.createElement(Text, { size: "p4", sx: {
+                    b: {
+                        fontWeight: 'bold',
+                    },
+                } },
+                React__default.createElement("span", { dangerouslySetInnerHTML: {
+                        __html: t('ssov2.otp.phone.description', {
+                            phone,
+                            method: 'WhatsApp',
+                        }),
+                    } }))),
+        React__default.createElement(Stack, { mt: 24, spacing: 8 },
+            React__default.createElement(Input.Wrapper, { error: error },
+                React__default.createElement(OTP, { ref: otpRef, value: otp, onChange: (value) => {
+                        setOtp(String(value));
+                        if (String(value).length === 6) {
+                            setTimeout(() => {
+                                var _a;
+                                (_a = submitButtonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                            }, 100);
+                        }
+                        setError('');
+                    }, otpShareProps: {
+                        'data-event-category': trackingCategory,
+                        'data-event-action': trackingAction,
+                        'data-event-label': 'Enter Code',
+                    }, placeholder: "*" })),
+            React__default.createElement(Group, { spacing: 8, align: "center", style: {
+                    height: 40,
+                } },
+                React__default.createElement(Text, { size: "p4" }, t('ssov2.otp.resendQuestion')),
+                React__default.createElement(Text, { style: {
+                        pointerEvents: resendTime > 0 ? 'none' : 'auto',
+                        cursor: resendTime > 0 ? 'not-allowed' : 'pointer',
+                    }, size: "s4", color: "blue.6", onClick: () => sendOTPCode(true), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Resend OTP" }, t('ssov2.otp.resendText', {
+                    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": "Verify", ref: submitButtonRef }, t('ssov2.whatsappLogin.verifySubmit'))));
+};
+
+const InfoIcon = () => {
+    return (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { minWidth: '16px', position: 'relative', top: '2px' } },
+        React__default.createElement("path", { d: "M8.00004 11.166C8.14177 11.166 8.2605 11.1181 8.35622 11.0222C8.45194 10.9264 8.4998 10.8077 8.4998 10.666V7.83265C8.4998 7.69099 8.45187 7.57225 8.356 7.47642C8.26013 7.38058 8.14133 7.33267 7.9996 7.33267C7.85787 7.33267 7.73914 7.38058 7.64342 7.47642C7.5477 7.57225 7.49984 7.69099 7.49984 7.83265V10.666C7.49984 10.8077 7.54777 10.9264 7.64364 11.0222C7.73951 11.1181 7.85831 11.166 8.00004 11.166ZM7.99982 6.19165C8.15239 6.19165 8.28027 6.14005 8.38347 6.03685C8.48667 5.93365 8.53827 5.80577 8.53827 5.6532C8.53827 5.50064 8.48667 5.37276 8.38347 5.26955C8.28027 5.16635 8.15239 5.11475 7.99982 5.11475C7.84725 5.11475 7.71937 5.16635 7.61617 5.26955C7.51297 5.37276 7.46137 5.50064 7.46137 5.6532C7.46137 5.80577 7.51297 5.93365 7.61617 6.03685C7.71937 6.14005 7.84725 6.19165 7.99982 6.19165ZM8.00094 14.3327C7.12498 14.3327 6.30163 14.1664 5.53087 13.834C4.7601 13.5015 4.08965 13.0504 3.5195 12.4805C2.94935 11.9106 2.49798 11.2404 2.16539 10.47C1.8328 9.69959 1.6665 8.8764 1.6665 8.00045C1.6665 7.12449 1.83273 6.30114 2.16517 5.53038C2.49762 4.75962 2.94878 4.08916 3.51867 3.51902C4.08857 2.94886 4.75873 2.49749 5.52915 2.1649C6.29956 1.83231 7.12275 1.66602 7.9987 1.66602C8.87466 1.66602 9.69802 1.83224 10.4688 2.16468C11.2395 2.49713 11.91 2.94829 12.4801 3.51818C13.0503 4.08808 13.5017 4.75824 13.8343 5.52867C14.1668 6.29908 14.3331 7.12226 14.3331 7.99822C14.3331 8.87417 14.1669 9.69753 13.8345 10.4683C13.502 11.239 13.0509 11.9095 12.481 12.4796C11.9111 13.0498 11.2409 13.5012 10.4705 13.8338C9.70008 14.1664 8.87689 14.3327 8.00094 14.3327ZM7.99982 13.3327C9.48871 13.3327 10.7498 12.816 11.7832 11.7827C12.8165 10.7493 13.3332 9.48822 13.3332 7.99933C13.3332 6.51044 12.8165 5.24933 11.7832 4.216C10.7498 3.18267 9.48871 2.666 7.99982 2.666C6.51093 2.666 5.24982 3.18267 4.21649 4.216C3.18315 5.24933 2.66649 6.51044 2.66649 7.99933C2.66649 9.48822 3.18315 10.7493 4.21649 11.7827C5.24982 12.816 6.51093 13.3327 7.99982 13.3327Z", fill: "#2D87F3" })));
+};
+const SSOWhatsAppPhoneVerifyScreen = ({ hidden, config, }) => {
+    const { t } = useTranslations();
+    const [phone, setPhone] = React__default.useState('');
+    const [loading, setLoading] = React__default.useState(false);
+    const [errMsg, setErrMsg] = React__default.useState('');
+    const { locale, setTracking } = useSSOState();
+    const { addStep, goNext } = useSSOSteps();
+    const referrer = config === null || config === void 0 ? void 0 : config.referrer;
+    const useAuthenticatedWhatsAppApis = !!(config === null || config === void 0 ? void 0 : config.useAuthenticatedWhatsAppApis);
+    const trackingCategory = 'SSO - WhatsApp Login';
+    const trackingAction = 'Enter WhatsApp phone';
+    useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
+    const onContinue = () => __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 res = useAuthenticatedWhatsAppApis
+                ? { _status: 1, code: 'Fake_Code' }
+                : yield sendLoginOtpWhatsapp(phoneNumber, areaCode, referrer);
+            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.WHATSAPP_OTP,
+                config: Object.assign({ phone,
+                    referrer }, (useAuthenticatedWhatsAppApis
+                    ? { useAuthenticatedWhatsAppApis: true }
+                    : {})),
+            });
+            goNext();
+        }
+        catch (e) {
+            console.error(e);
+            setErrMsg(getErrorTextFromCode(t, ''));
+        }
+        setLoading(false);
+    });
+    return (React__default.createElement("div", { style: {
+            display: hidden ? 'none' : 'block',
+        } },
+        React__default.createElement(Stack, { spacing: 24 },
+            React__default.createElement(Box, { sx: {
+                    backgroundColor: '#E3F2FF',
+                    padding: '12px 16px',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    gap: '8px',
+                } },
+                React__default.createElement(InfoIcon, null),
+                React__default.createElement(Text, { styles: {
+                        root: {
+                            fontSize: '13px',
+                        },
+                    }, color: "gray700" }, t('ssov2.whatsappLogin.phoneNotice'))),
+            React__default.createElement(Stack, { spacing: 16 },
+                React__default.createElement(Input.Wrapper, { error: errMsg },
+                    React__default.createElement(StyledPhone, { defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), value: phone, onChange: (value) => {
+                            setPhone(value);
+                            setErrMsg('');
+                        }, isError: !!errMsg, required: true, name: "phone", disabled: loading, placeholder: t('ssov2.setup.field.phone.label'), "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Enter Phone", trackingFn: useCallback((option) => {
+                            if (!(option === null || option === void 0 ? void 0 : option.label))
+                                return;
+                            return {
+                                'data-event-action': 'Country Selection',
+                                'data-event-label': option.label,
+                                'data-event-category': trackingCategory,
+                            };
+                        }, []) })),
+                React__default.createElement(Button, { size: "lg", variant: "primary", onClick: onContinue, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Continue" }, t('ssov2.button.continue'))))));
+};
+
 const SSOScreenRenderer = () => {
     const { steps, currentStepIndex } = useSSOSteps();
     return (React__default.createElement(React__default.Fragment, null, steps.map((step, index) => {
@@ -4580,6 +4847,10 @@ const SSOScreenRenderer = () => {
         switch (step.type) {
             case SSOStepTypeType.FIRST:
                 return (React__default.createElement(SSOFirstScreen, { key: key, hidden: !isCurrentStep, config: step.config }));
+            case SSOStepTypeType.WHATSAPP_PHONE_VERIFY:
+                return (React__default.createElement(SSOWhatsAppPhoneVerifyScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
+            case SSOStepTypeType.WHATSAPP_OTP:
+                return (React__default.createElement(SSOWhatsAppOTPScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.PASSWORD:
                 return (React__default.createElement(SSOPasswordScreen, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, index: index, config: step.config }));
             case SSOStepTypeType.FORGOT_PASSWORD_PHONE:

package/build/esm/{store-8d4bd38e.js → store-6164247a.js}

@@ -1,12 +1,32 @@
-import { a as __awaiter } from './tslib.es6-2a05b926.js';
+import { a as __awaiter } from './tslib.es6-ddf40843.js';
 import { create } from 'zustand';
-import { g as getUserInfo } from './index-5ff48170.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-303eab27.js';
+import { g as getUserInfo } from './index-4457d10e.js';
+import { parsePhoneNumber } from 'react-phone-number-input';
+import { B as BEARER_TOKEN_COOKIE } from './index-25edef5c.js';
 import { getCookie } from './miscCookieHelper.js';
 
+const mergePhone = (phone, areaCode) => {
+    const processedAreaCode = areaCode.startsWith('+') ? areaCode : `+${areaCode}`;
+    const processedPhone = phone.startsWith('0') ? phone.slice(1) : phone;
+    return `${processedAreaCode}${processedPhone}`;
+};
+const splitPhone = (phone) => {
+    if (!phone)
+        return { areaCode: undefined, phoneNumber: undefined };
+    const parsedPhone = parsePhoneNumber(phone);
+    return {
+        areaCode: parsedPhone.countryCallingCode
+            ? '+' + parsedPhone.countryCallingCode
+            : '',
+        phoneNumber: parsedPhone.nationalNumber || '',
+    };
+};
+
 var SSOStepTypeType;
 (function (SSOStepTypeType) {
     SSOStepTypeType["FIRST"] = "first";
+    SSOStepTypeType["WHATSAPP_PHONE_VERIFY"] = "whatsapp_phone_verify";
+    SSOStepTypeType["WHATSAPP_OTP"] = "whatsapp_otp";
     SSOStepTypeType["EMAIL"] = "email";
     SSOStepTypeType["VERIFY_PHONE"] = "verify_phone";
     SSOStepTypeType["PASSWORD"] = "password";
@@ -137,6 +157,48 @@ const useSSOV2Store = create()((set, get) => ({
             });
         }
     },
+    triggerWhatsappLogin: (params) => {
+        const { source, returnUrl, referrer, forceReloadOnClose, isAlreadyLogin, phone_number, area_code, } = params || {};
+        const skipPhoneStep = isAlreadyLogin && phone_number && area_code;
+        if (skipPhoneStep) {
+            const phone = mergePhone(String(phone_number), area_code);
+            useSSOSteps.setState({
+                steps: [
+                    {
+                        type: SSOStepTypeType.WHATSAPP_OTP,
+                        config: {
+                            phone,
+                            referrer,
+                            useAuthenticatedWhatsAppApis: true,
+                        },
+                    },
+                ],
+                currentStepIndex: 0,
+            });
+        }
+        else {
+            useSSOSteps.setState({
+                steps: [
+                    {
+                        type: SSOStepTypeType.WHATSAPP_PHONE_VERIFY,
+                        config: Object.assign({ referrer }, (isAlreadyLogin
+                            ? { useAuthenticatedWhatsAppApis: true }
+                            : {})),
+                    },
+                ],
+                currentStepIndex: 0,
+            });
+        }
+        set({
+            isOpen: true,
+            returnUrl,
+            source,
+            overrideClose: undefined,
+            forceReloadOnClose: forceReloadOnClose || false,
+            flowData: { method: 'whatsapp', flow: 'login' },
+            userInfo: undefined,
+        });
+    },
     triggerCareEmailPhoneVerify: (params) => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
         const userInfo = yield getUserInfo();
@@ -424,4 +486,4 @@ const isLoginWithPhoneNotVerifedYet = (flowData, userInfo) => {
         !(userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone_verified_at));
 };
 
-export { IS_SSOV2_ENABLED as I, SSOStepTypeType as S, useSSOSteps as a, isPhoneNotVerifedYet as b, isLoginWithPhoneNotVerifedYet as c, isFlowFinishedSetup as d, isUserFinishedSetup as i, redirect as r, useSSOV2Store as u };
+export { IS_SSOV2_ENABLED as I, SSOStepTypeType as S, useSSOSteps as a, isPhoneNotVerifedYet as b, isLoginWithPhoneNotVerifedYet as c, isFlowFinishedSetup as d, isUserFinishedSetup as i, redirect as r, splitPhone as s, useSSOV2Store as u };