@hhgtech/hhg-components 1.29.536 → 1.29.537-beta-1

package/build/esm/pwg.js

@@ -1,46 +1,46 @@
 import React__default, { useMemo, useState, useRef } from 'react';
-import { M as MarryBabyText, a as MarryBabyHeading } from './index-5e9efd56.js';
-import { T as Text } from './index-27a453db.js';
-import { P as PillCarousel } from './index-fdc2d81a.js';
-import { u as useTranslations } from './index-04f5a769.js';
+import { M as MarryBabyText, a as MarryBabyHeading } from './index-649ac860.js';
+import { T as Text } from './index-f3039502.js';
+import { P as PillCarousel } from './index-b91873a4.js';
+import { u as useTranslations } from './index-36070e8a.js';
 import { theme } from './miscTheme.js';
 import { ResponsiveContainer, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis, Area, ReferenceDot } from 'recharts';
-import { C as CustomReferenceDot } from './index-73bc6f9a.js';
-import { a as useOutsideClick } from './useOutsideClick-b8be9ada.js';
+import { C as CustomReferenceDot } from './index-389ca966.js';
+import { a as useOutsideClick } from './useOutsideClick-6a06a79e.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-fe9009b6.js';
+import { _ as __rest } from './tslib.es6-21073c93.js';
 import '@mantine/core';
-import './index-0e289cc5.js';
-import './index-6aa38f4a.js';
-import './Locale-bde3683e.js';
-import './index-4fca4ac5.js';
+import './index-d7e6093a.js';
+import './index-157ac67c.js';
+import './Locale-8aeb6d32.js';
+import './index-37e16100.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
-import './index-291d0e7b.js';
-import './utils-5695d65c.js';
-import './index-4d145ba4.js';
-import './index-305ea4ff.js';
+import './index-0ba6e582.js';
+import './utils-0c1f4154.js';
+import './index-9f068e82.js';
+import './index-cd656759.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
 import '@mantine/carousel';
-import './index-148eaa77.js';
+import './index-22c474de.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index-aba99a3c.js';
+import './index-cdc53951.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './shared-8bf3d323.js';
+import './shared-bc0427be.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-43fd3cbc.js';
+import './useUniqueId-65a759d1.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
-import './index-c6bbfde7.js';
+import './index-be940957.js';
 import '@mantine/dates';
-import './index.styles-5b593573.js';
-import './translationsContext-17fbb119.js';
-import './index-0302841d.js';
+import './index.styles-0a7b8af0.js';
+import './translationsContext-9687e179.js';
+import './index-e28977c2.js';
 
 const CustomizedAxisTick = (props) => {
     const { x, y, payload, activeWeek } = props;

package/build/esm/ssoV2/api/index.d.ts

@@ -12,6 +12,8 @@ export type ReturnType<T = any> = {
     code?: string;
 };
 export declare const fetchSSOV2Api: <T>(path: string, options?: RequestInit, noAuth?: boolean) => Promise<ReturnType<T>>;
+/** JSON body (e.g. WhatsApp login-otp / verify-code); omits FormData-only ga/referrer append. */
+export declare const fetchSSOV2ApiJson: <T>(path: string, body: Record<string, unknown>, noAuth?: boolean) => Promise<ReturnType<T>>;
 export declare const fetchSSOApi: <T>(path: string, options?: RequestInit, noAuth?: boolean) => Promise<ReturnType<T>>;
 export declare const resetPassword: (password: string, confirmPassword: string) => Promise<ReturnType<LoggedInResponseType>>;
 export declare const checkUserExist: ({ email, phone, }: {

package/build/esm/ssoV2/api/paths.d.ts

@@ -15,6 +15,7 @@ export declare const SSO_V2_PATHS: {
         UPDATE_PHONE_VERIFY_OTP: string;
     };
     WHATSAPP: {
+        LOGIN_OTP_WHATSAPP: string;
         REGISTER_BY_SEND_OTP: string;
         SEND_OTP: string;
         UPDATE_PHONE_SEND_OTP: string;

package/build/esm/ssoV2/api/whatsapp.d.ts

@@ -1,6 +1,10 @@
 import { LoggedInResponseType } from "./";
+/** Guest: send or resend OTP (same endpoint). Optional referrer e.g. payment page URL. */
+export declare const sendLoginOtpWhatsapp: (phoneNumber: string, areaCode: string, referrer?: string) => Promise<import("./").ReturnType<LoggedInResponseType>>;
+/** Guest: verify OTP after WhatsApp login send; `login_type` required by API. */
+export declare const verifyWhatsappOtpGuest: (phoneNumber: string, areaCode: string, otpCode: string) => Promise<import("./").ReturnType<LoggedInResponseType>>;
 export declare const registerBySendWhatsAppOTP: (phone: string, areaCode: string) => Promise<import("./").ReturnType<unknown>>;
 export declare const resendWhatsAppOTP: (phone: string, areaCode: string) => Promise<import("./").ReturnType<unknown>>;
 export declare const resendUpdatePhoneWhatsAppOTP: (phone: string, areaCode: string) => Promise<import("./").ReturnType<unknown>>;
-export declare const verifyUpdatePhoneWhatsAppOTP: (phone: string, areaCode: string, otpCode: string) => Promise<import("./").ReturnType<unknown>>;
+export declare const verifyUpdatePhoneWhatsAppOTP: (phone: string, areaCode: string, otpCode: string) => Promise<import("./").ReturnType<LoggedInResponseType>>;
 export declare const verifyByWhatsAppOTP: (phone: string, areaCode: string, otpCode: string) => Promise<import("./").ReturnType<LoggedInResponseType>>;

package/build/esm/ssoV2/screens/components/progressBar.utils.d.ts

@@ -7,3 +7,4 @@ export declare const isExistUpdateEmailStep: (steps: SSOStepsContextType['steps'
 export declare const isVerifyPhoneInTheSignUp: (steps: SSOStepsContextType['steps'], flowData: SSOV2StoreType['flowData']) => boolean;
 export declare const isVerifyPhoneInTheLogin: (steps: SSOStepsContextType['steps'], flowData: SSOV2StoreType['flowData']) => boolean;
 export declare const parseEmailFromToken: (token: string) => any;
+export declare const parsePhoneFromToken: (token: string) => string;

package/build/esm/ssoV2/screens/whatsAppOTP.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/** Matches data set in steps; optional fields because step.config is loosely typed. */
+export type WhatsAppOTPStepConfig = {
+    phone?: string;
+    referrer?: string;
+    /** Logged-in WhatsApp verification: Bearer `sms-social/whatsapp` send + verify APIs. */
+    useAuthenticatedWhatsAppApis?: boolean;
+};
+export declare const SSOWhatsAppOTPScreen: ({ hidden, config, }: {
+    hidden?: boolean;
+    index?: number;
+    config?: WhatsAppOTPStepConfig;
+}) => React.JSX.Element;

package/build/esm/ssoV2/screens/whatsAppPhoneVerify.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const SSOWhatsAppPhoneVerifyScreen: ({ hidden, config, }: {
+    hidden?: boolean;
+    index?: number;
+    config?: {
+        referrer?: string;
+        useAuthenticatedWhatsAppApis?: boolean;
+    };
+}) => React.JSX.Element;

package/build/esm/ssoV2/ssoStateManager/store.d.ts

@@ -20,6 +20,22 @@ export type SSOV2StoreType = {
         legalTextType?: 'community' | 'default';
         forceReloadOnClose?: boolean;
     }) => void;
+    /** WhatsApp-only flow; always opens (no bearer-token short-circuit). */
+    triggerWhatsappLogin: (params?: {
+        source?: string;
+        returnUrl?: string;
+        /** Prefer payment or product URL for `referrer` on send-OTP API. */
+        referrer?: string;
+        forceReloadOnClose?: boolean;
+        /**
+         * Logged-in user still needs WhatsApp verification (`whatsapp_verify` from profile).
+         * With `phone_number` + `area_code`: skip to OTP; Bearer `sent-otp` + `whatsapp-verify-code`.
+         * With `isAlreadyLogin` only (no phone/area): start at phone step; send uses Bearer `sms-social/whatsapp/sent-otp`.
+         */
+        isAlreadyLogin?: boolean;
+        phone_number?: string;
+        area_code?: string;
+    }) => void;
     triggerCareEmailPhoneVerify: (params?: {
         source?: string;
         returnUrl?: string;

package/build/esm/ssoV2/stepsManager/index.d.ts

@@ -1,5 +1,7 @@
 export declare enum SSOStepTypeType {
     FIRST = "first",
+    WHATSAPP_PHONE_VERIFY = "whatsapp_phone_verify",
+    WHATSAPP_OTP = "whatsapp_otp",
     EMAIL = "email",
     VERIFY_PHONE = "verify_phone",
     PASSWORD = "password",

package/build/esm/ssoV2.js

@@ -1,64 +1,64 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-fe9009b6.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-21073c93.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-305ea4ff.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-acb0e372.js';
+import { I as Input, h as ErrorBoundary, s as styles, O as OTP, i as PasswordInput } from './index-cd656759.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-faa0c8a9.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-aba99a3c.js';
-import { L as LogoIcon } from './logoIcon-4af03905.js';
-import { B as Button } from './index-c6bbfde7.js';
-import { M as Modal } from './index-88c8037d.js';
+import { Z as ZINDEX_SSO, L as LOCALE_SPECS, S as STATIC_PAGES, Q as QUERY_HEALTH_TOOL } from './index-cdc53951.js';
+import { L as LogoIcon } from './logoIcon-eafea823.js';
+import { B as Button } from './index-be940957.js';
+import { M as Modal } from './index-87e6d4d7.js';
 import { Stack, Flex, Box, Group, Divider } from '@mantine/core';
 import '@mantine/dates';
-import './index-6aa38f4a.js';
-import { C as CommonGAssets } from './index-4fca4ac5.js';
-import { s as showNotification } from './index-148eaa77.js';
-import { T as Text } from './index-27a453db.js';
-import './index-0e289cc5.js';
-import { u as useTranslations } from './index-04f5a769.js';
+import './index-157ac67c.js';
+import { C as CommonGAssets } from './index-37e16100.js';
+import { s as showNotification } from './index-22c474de.js';
+import { T as Text } from './index-f3039502.js';
+import './index-d7e6093a.js';
+import { u as useTranslations } from './index-36070e8a.js';
 import '@mantine/hooks';
-import './utils-5695d65c.js';
-import './index-0302841d.js';
-import { L as LOCALE } from './Locale-bde3683e.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-39a0405a.js';
-export { u as useSSOV2Store } from './store-39a0405a.js';
-import { I as ImageWrap, u as useScreenSize } from './index-291d0e7b.js';
+import './utils-0c1f4154.js';
+import './index-e28977c2.js';
+import { L as LOCALE } from './Locale-8aeb6d32.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-16651a70.js';
+export { u as useSSOV2Store } from './store-16651a70.js';
+import { I as ImageWrap, u as useScreenSize } from './index-0ba6e582.js';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { G as Google, F as Facebook } from './Google-5c126384.js';
-import { parsePhoneNumber, getCountryCallingCode } from 'react-phone-number-input';
-import { i as isFeatureWhatsAppEnabled, a as isFeatureZaloEnabled, b as isFeatureSMSEnabled, c as isSupportProduct } from './utils-29a6e3dc.js';
-export { g as getURLwithSSOTracking } from './utils-29a6e3dc.js';
-import { S as Spoiler } from './index-ef45163b.js';
+import { G as Google, F as Facebook } from './Google-4e1d0b33.js';
+import { i as isFeatureWhatsAppEnabled, a as isFeatureZaloEnabled, b as isFeatureSMSEnabled, c as isSupportProduct } from './utils-01d7bd5f.js';
+export { g as getURLwithSSOTracking } from './utils-01d7bd5f.js';
+import { S as Spoiler } from './index-00c1029f.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-17cfbfab.js';
+import { M as MAPPED_LOCALE } from './utils-2e4a3855.js';
 import { useForm, yupResolver } from '@mantine/form';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { D as DatePicker } from './index-ab64efc3.js';
+import { D as DatePicker } from './index-258a0f64.js';
 import '@mantine/carousel';
 import './miscTheme.js';
-import './shared-8bf3d323.js';
+import './shared-bc0427be.js';
 import 'uuid';
-import './useUniqueId-43fd3cbc.js';
+import './useUniqueId-65a759d1.js';
 import './constantsSite.js';
 import '@emotion/react';
-import './normalizeLink-ca423f45.js';
+import './normalizeLink-233a9807.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-5b593573.js';
+import './index.styles-0a7b8af0.js';
 import '@mantine/notifications';
-import './translationsContext-17fbb119.js';
+import './translationsContext-9687e179.js';
 import 'zustand';
-import './healthTools-e6cef33b.js';
+import './healthTools-587af33d.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* () {
@@ -4572,6 +4590,249 @@ 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 - 1 > 0) {
+                    setTimeout(() => countdown(), 1000);
+                }
+                return time - 1;
+            });
+        };
+        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
+                ? yield resendUpdatePhoneWhatsAppOTP(phoneNumber, areaCode)
+                : 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 +4841,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: