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

package/build/ssoV2.js

@@ -2,65 +2,65 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-9e779357.js');
+var tslib_es6 = require('./tslib.es6-846b102f.js');
 var React = require('react');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$8 = require('./index-39c50d1d.js');
-var index$7 = require('./index-a448c144.js');
+var index$8 = require('./index-41b8bee2.js');
+var index$7 = require('./index-349046c7.js');
 var constantsIsProduction = require('./constantsIsProduction.js');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var index$2 = require('./index-ad80faca.js');
-var logoIcon = require('./logoIcon-8586d9c0.js');
-var index$4 = require('./index-86e91f1c.js');
-var index$1 = require('./index-5a09d026.js');
+var index$2 = require('./index-6650ecc0.js');
+var logoIcon = require('./logoIcon-6181a180.js');
+var index$4 = require('./index-975cfb80.js');
+var index$1 = require('./index-ac1bd4bc.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-require('./index-fe452da6.js');
-var index$6 = require('./index-c1e5c630.js');
-var index$a = require('./index-0f632f2e.js');
-var index$3 = require('./index-95ded02e.js');
-require('./index-2129f33e.js');
-var index = require('./index-4d7a3dab.js');
+require('./index-daf28048.js');
+var index$6 = require('./index-da6ff3f3.js');
+var index$a = require('./index-1afb1514.js');
+var index$3 = require('./index-3e37e4f0.js');
+require('./index-8ea0c2af.js');
+var index = require('./index-13d474a5.js');
 require('@mantine/hooks');
-require('./utils-09f93798.js');
-require('./index-438bcf6b.js');
-var Locale = require('./Locale-3ca2be0f.js');
-var store = require('./store-b9d36c29.js');
-var index$5 = require('./index-9962b2c3.js');
+require('./utils-d8ceac0a.js');
+require('./index-0a6af1d4.js');
+var Locale = require('./Locale-cd485f23.js');
+var store = require('./store-3d7f4568.js');
+var index$5 = require('./index-03aefcdd.js');
 var ReCAPTCHA = require('react-google-recaptcha');
-var Google = require('./Google-851ffcea.js');
-var PhoneInputBase = require('react-phone-number-input');
-var utils = require('./utils-ea109d16.js');
-var index$9 = require('./index-bce4f3bd.js');
+var Google = require('./Google-ddacfbee.js');
+var utils = require('./utils-6f2fcdd8.js');
+var index$9 = require('./index-944cf89b.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var styled = require('@emotion/styled');
 var classNames = require('classnames');
 var other = require('@hhgtech/icons/other');
 var debounce = require('lodash/debounce');
 var throttle = require('lodash/throttle');
+var PhoneInputBase = require('react-phone-number-input');
 var Flags = require('react-phone-number-input/flags');
 var vaul = require('vaul');
-var utils$1 = require('./utils-ab37e8ab.js');
+var utils$1 = require('./utils-e05bcfc1.js');
 var form = require('@mantine/form');
 var yup = require('yup');
 var dayjs = require('dayjs');
-var index$b = require('./index-bd1c1c87.js');
+var index$b = require('./index-e83d9d05.js');
 require('@mantine/carousel');
 require('./miscTheme.js');
-require('./shared-86d011f6.js');
+require('./shared-774b4209.js');
 require('uuid');
-require('./useUniqueId-6539444e.js');
+require('./useUniqueId-e7ed53a5.js');
 require('./constantsSite.js');
 require('@emotion/react');
-require('./normalizeLink-ce6fe207.js');
+require('./normalizeLink-e4adc547.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
-require('./index.styles-efc85da8.js');
+require('./index.styles-65ab8804.js');
 require('@mantine/notifications');
-require('./translationsContext-504cf17e.js');
+require('./translationsContext-2d08bbd7.js');
 require('zustand');
-require('./healthTools-a1ee21dc.js');
+require('./healthTools-d8432869.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -457,6 +457,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) === store.SSOStepTypeType.OTP ||
+        ((currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_OTP && steps.length > 1) ||
         (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.PASSWORD ||
         (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.EMAIL;
     const showClose = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.FIRST;
@@ -466,15 +467,25 @@ const SSOPopupWrapper = ({ children, opened, onClose, }) => {
     const onCloseClick = () => {
         setCloseConfirmOpen(true);
     };
+    const isWhatsAppPhoneVerify = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_PHONE_VERIFY;
+    const isWhatsAppLoginFlow = (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_PHONE_VERIFY ||
+        (currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) === store.SSOStepTypeType.WHATSAPP_OTP;
+    const onModalRequestClose = () => {
+        if (isWhatsAppLoginFlow)
+            return;
+        onCloseClick();
+    };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(index$1.Modal, { opened: opened, onClose: onCloseClick, styles: (theme) => ({
+        React__default["default"].createElement(index$1.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%',
@@ -818,23 +829,11 @@ const useGRecaptchaHandler = () => {
     };
 };
 
-const splitPhone = (phone) => {
-    if (!phone)
-        return { areaCode: undefined, phoneNumber: undefined };
-    const parsedPhone = PhoneInputBase.parsePhoneNumber(phone);
-    return {
-        areaCode: parsedPhone.countryCallingCode
-            ? '+' + parsedPhone.countryCallingCode
-            : '',
-        phoneNumber: parsedPhone.nationalNumber || '',
-    };
-};
-
 // "phone_number":"906911910",
 // "password":"Kenny2103!"
 const loginByPhonePassword = (phone, password) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
     const formData = new FormData();
-    let { phoneNumber } = splitPhone(phone);
+    let { phoneNumber } = store.splitPhone(phone);
     phoneNumber = phoneNumber.startsWith('0')
         ? phoneNumber.substring(1)
         : phoneNumber;
@@ -912,6 +911,25 @@ const loginBySocial = (token, social) => tslib_es6.__awaiter(void 0, void 0, voi
     });
 });
 
+/** Guest: send or resend OTP (same endpoint). Optional referrer e.g. payment page URL. */
+const sendLoginOtpWhatsapp = (phoneNumber, areaCode, referrer) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    return index$7.fetchSSOV2ApiJson(index$7.SSO_V2_PATHS.WHATSAPP.LOGIN_OTP_WHATSAPP, {
+        phone_number: phoneNumber,
+        area_code: areaCode,
+        website_id: Number(index$7.websiteId),
+        ga_client_id: miscCookieHelper.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    return index$7.fetchSSOV2ApiJson(index$7.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -2693,7 +2711,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b;
         setLoading(true);
-        const { areaCode, phoneNumber } = splitPhone(phone);
+        const { areaCode, phoneNumber } = store.splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
             setErrMsg(t('ssov2.validate.phone.required'));
             return setLoading(false);
@@ -2756,7 +2774,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     const onClickContinueWhatsApp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _c, _d;
         setLoading(true);
-        const { areaCode, phoneNumber } = splitPhone(phone);
+        const { areaCode, phoneNumber } = store.splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
             setErrMsg(t('ssov2.validate.phone.required'));
             return setLoading(false);
@@ -2819,7 +2837,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     const onClickContinuePhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _e, _f;
         setLoading(true);
-        const { areaCode, phoneNumber } = splitPhone(phone);
+        const { areaCode, phoneNumber } = store.splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
             setErrMsg(t('ssov2.validate.phone.required'));
             return setLoading(false);
@@ -2883,7 +2901,7 @@ const SSOFirstScreen = ({ hidden, config, }) => {
     const onClickLoginWithPhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _g, _h;
         setLoading(true);
-        const { areaCode, phoneNumber } = splitPhone(phone);
+        const { areaCode, phoneNumber } = store.splitPhone(phone);
         if (!areaCode || !phoneNumber || !phone) {
             setErrMsg(t('ssov2.validate.phone.required'));
             return setLoading(false);
@@ -3126,7 +3144,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
         // send otp code logic here
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             let res;
             if (isUpdatePhone) {
                 if (otpType === 'phone-sms') {
@@ -3178,7 +3196,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
         }
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             // submit otp code logic here
             if (isUpdatePhone) {
                 let res;
@@ -3385,7 +3403,7 @@ const SSOOTPScreen = ({ hidden, index: index$1, config, }) => {
             return;
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             let res;
             if (isUpdatePhone) {
                 if (newType === 'phone-sms') {
@@ -3428,10 +3446,13 @@ const SSOOTPScreen = ({ hidden, index: index$1, 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();
@@ -3740,7 +3761,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
         var _a, _b;
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             if (!areaCode || !phoneNumber || !phone) {
                 setErrMsg(t('ssov2.validate.phone.required'));
                 return setLoading(false);
@@ -3783,7 +3804,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
         var _c, _d;
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             if (!areaCode || !phoneNumber || !phone) {
                 setErrMsg(t('ssov2.validate.phone.required'));
                 return setLoading(false);
@@ -3826,7 +3847,7 @@ const SSOPasswordForgotPhone = ({ hidden, config, }) => {
         var _e, _f;
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             if (!areaCode || !phoneNumber || !phone) {
                 setErrMsg(t('ssov2.validate.phone.required'));
                 return setLoading(false);
@@ -4115,7 +4136,7 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
     const onClickContinueZalo = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             if (!areaCode || !phoneNumber || !phone) {
                 setErrMsg(t('ssov2.validate.phone.required'));
                 return setLoading(false);
@@ -4158,7 +4179,7 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
     const onClickContinuePhone = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             if (!areaCode || !phoneNumber || !phone) {
                 setErrMsg(t('ssov2.validate.phone.required'));
                 return setLoading(false);
@@ -4201,7 +4222,7 @@ const SSOPhoneVerify = ({ hidden, config, }) => {
     const onClickContinueWhatsApp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         setLoading(true);
         try {
-            const { areaCode, phoneNumber } = splitPhone(phone);
+            const { areaCode, phoneNumber } = store.splitPhone(phone);
             if (!areaCode || !phoneNumber || !phone) {
                 setErrMsg(t('ssov2.validate.phone.required'));
                 return setLoading(false);
@@ -4464,7 +4485,7 @@ const SSOSetupScreen = ({ hidden, config, }) => {
         setLoading(true);
         try {
             const { phone, gender, name, dob } = values;
-            const { phoneNumber, areaCode } = splitPhone(phone || configPhone || '');
+            const { phoneNumber, areaCode } = store.splitPhone(phone || configPhone || '');
             // validate only, delay set data to after otp
             const res = yield index$7.updateUserInfo({
                 name,
@@ -4604,6 +4625,252 @@ const SSOUpdateEmailScreen = ({ hidden, config, }) => {
         React__default["default"].createElement(index$4.Button, { type: "submit", size: "lg", variant: "primary", fullWidth: true, mt: 16, loading: loading, disabled: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Verify Your Email" }, t('ssov2.updateEmail.button'))));
 };
 
+const SSOWhatsAppOTPScreen = ({ hidden, config, }) => {
+    const { t } = index.useTranslations();
+    const { onClose, setTracking } = useSSOState();
+    const [loading, setLoading] = React__default["default"].useState(false);
+    const [otp, setOtp] = React__default["default"].useState('');
+    const [error, setError] = React__default["default"].useState('');
+    const submitButtonRef = React__default["default"].useRef(null);
+    const otpRef = React__default["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';
+    React.useEffect(() => {
+        if (!hidden) {
+            setError('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
+    const [resendTime, setResendTime] = React__default["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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (checkResend && resendTime > 0)
+            return;
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = store.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) => tslib_es6.__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 } = store.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)) {
+                index$7.handleAuthSuccess(res._data);
+            }
+            onClose === null || onClose === void 0 ? void 0 : onClose(true);
+        }
+        catch (e) {
+            console.error(e);
+            setError(getErrorTextFromCode(t, ''));
+        }
+        setLoading(false);
+    });
+    React.useEffect(() => {
+        setupResendTimer();
+    }, []);
+    const initialAuthOtpSentRef = React__default["default"].useRef(false);
+    React.useEffect(() => {
+        if (hidden ||
+            !useAuthenticatedWhatsAppApis ||
+            !phone ||
+            initialAuthOtpSentRef.current) {
+            return;
+        }
+        initialAuthOtpSentRef.current = true;
+        sendOTPCode(false);
+    }, [hidden, useAuthenticatedWhatsAppApis, phone]);
+    return (React__default["default"].createElement("form", { style: {
+            display: hidden ? 'none' : 'block',
+        }, onSubmit: (e) => {
+            e.preventDefault();
+            submitOtp(String(otp));
+        } },
+        React__default["default"].createElement(core.Stack, { spacing: 8 },
+            React__default["default"].createElement(index$3.Text, { size: "s1", weight: "semiBold" }, t('ssov2.otp.phone.title')),
+            React__default["default"].createElement(index$3.Text, { size: "p4", sx: {
+                    b: {
+                        fontWeight: 'bold',
+                    },
+                } },
+                React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
+                        __html: t('ssov2.otp.phone.description', {
+                            phone,
+                            method: 'WhatsApp',
+                        }),
+                    } }))),
+        React__default["default"].createElement(core.Stack, { mt: 24, spacing: 8 },
+            React__default["default"].createElement(index$8.Input.Wrapper, { error: error },
+                React__default["default"].createElement(index$8.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["default"].createElement(core.Group, { spacing: 8, align: "center", style: {
+                    height: 40,
+                } },
+                React__default["default"].createElement(index$3.Text, { size: "p4" }, t('ssov2.otp.resendQuestion')),
+                React__default["default"].createElement(index$3.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["default"].createElement(index$4.Button, { type: "submit", size: "lg", variant: "primary", mt: 12, fullWidth: true, disabled: loading, loading: loading, "data-event-category": trackingCategory, "data-event-action": trackingAction, "data-event-label": "Verify", ref: submitButtonRef }, t('ssov2.whatsappLogin.verifySubmit'))));
+};
+
+const InfoIcon = () => {
+    return (React__default["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["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 } = index.useTranslations();
+    const [phone, setPhone] = React__default["default"].useState('');
+    const [loading, setLoading] = React__default["default"].useState(false);
+    const [errMsg, setErrMsg] = React__default["default"].useState('');
+    const { locale, setTracking } = useSSOState();
+    const { addStep, goNext } = store.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';
+    React.useEffect(() => {
+        if (!hidden) {
+            setErrMsg('');
+            setTracking({
+                category: trackingCategory,
+                action: trackingAction,
+            });
+        }
+    }, [hidden]);
+    const onContinue = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        try {
+            const { areaCode, phoneNumber } = store.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: store.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["default"].createElement("div", { style: {
+            display: hidden ? 'none' : 'block',
+        } },
+        React__default["default"].createElement(core.Stack, { spacing: 24 },
+            React__default["default"].createElement(core.Box, { sx: {
+                    backgroundColor: '#E3F2FF',
+                    padding: '12px 16px',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    gap: '8px',
+                } },
+                React__default["default"].createElement(InfoIcon, null),
+                React__default["default"].createElement(index$3.Text, { styles: {
+                        root: {
+                            fontSize: '13px',
+                        },
+                    }, color: "gray700" }, t('ssov2.whatsappLogin.phoneNotice'))),
+            React__default["default"].createElement(core.Stack, { spacing: 16 },
+                React__default["default"].createElement(index$8.Input.Wrapper, { error: errMsg },
+                    React__default["default"].createElement(StyledPhone, { defaultCountry: (locale ? utils$1.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: React.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["default"].createElement(index$4.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 } = store.useSSOSteps();
     return (React__default["default"].createElement(React__default["default"].Fragment, null, steps.map((step, index) => {
@@ -4612,6 +4879,10 @@ const SSOScreenRenderer = () => {
         switch (step.type) {
             case store.SSOStepTypeType.FIRST:
                 return (React__default["default"].createElement(SSOFirstScreen, { key: key, hidden: !isCurrentStep, config: step.config }));
+            case store.SSOStepTypeType.WHATSAPP_PHONE_VERIFY:
+                return (React__default["default"].createElement(SSOWhatsAppPhoneVerifyScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
+            case store.SSOStepTypeType.WHATSAPP_OTP:
+                return (React__default["default"].createElement(SSOWhatsAppOTPScreen, { key: key, hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.PASSWORD:
                 return (React__default["default"].createElement(SSOPasswordScreen, { key: key + '-' + currentStepIndex, hidden: !isCurrentStep, index: index, config: step.config }));
             case store.SSOStepTypeType.FORGOT_PASSWORD_PHONE: