@hhgtech/hhg-components 1.29.374 → 1.29.375-beta-2

package/build/esm/lead.js

@@ -1,52 +1,73 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-eb6746ec.js';
-import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback } from 'react';
-import { createStyles, Box, Button as Button$1, Autocomplete, clsx, Input as Input$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
+import { _ as __rest, a as __awaiter } from './tslib.es6-34c3d3bf.js';
+import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo } from 'react';
+import { createStyles, Box, Button as Button$1, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
-import { createFormContext } from '@mantine/form';
-import { u as useTranslations } from './index-e401fea0.js';
-import { T as TranslationsContext } from './translationsContext-23b5bf84.js';
+import { createFormContext, useForm } from '@mantine/form';
+import { B as BEARER_TOKEN_COOKIE } from './index-22fd28bb.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-770949fe.js';
-import { T as Text } from './index-5024511e.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-e93b1f65.js';
-import { D as DatePicker } from './index-8885ef87.js';
-import { B as Button } from './index-6ab5e856.js';
-import './index.styles-c9d6db26.js';
+import { u as useTranslations } from './index-97c7b8a6.js';
+import { T as TranslationsContext } from './translationsContext-13869044.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f97b6496.js';
+import { T as Text } from './index-8f74d63d.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-d37dade0.js';
+import { D as DatePicker } from './index-da65e1c5.js';
+import { B as Button } from './index-cd4c901f.js';
+import './index.styles-9a39d828.js';
 import { useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-ee478730.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-395867d1.js';
-import './index-bd1a993e.js';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-35c4c26f.js';
-import './other-7cac897b.js';
-import './index-7f0089a7.js';
-import { M as MAPPED_LOCALE } from './utils-84d5275f.js';
-import '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-119a12f3.js';
-import { H as Heading$1 } from './index-5ff6b134.js';
+import './useMantineLocale-95434bd7.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-6a09ecad.js';
+import './index-ee0d43e6.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-2b0b5ecd.js';
+import './other-ad977443.js';
+import './index-fef08243.js';
+import { M as MAPPED_LOCALE } from './utils-b0412385.js';
+import { DateInput } from '@mantine/dates';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-ef8cc9c6.js';
+import { H as Heading$1 } from './index-1201d09e.js';
+import { t as translationsMap$1 } from './translationsProvider-2b2fc65d.js';
+import { L as LOCALE } from './Locale-6cbef683.js';
 import { v1 } from 'uuid';
-import { i as isVideo } from './index-d14b8ec2.js';
-import { D as DrawerComponent } from './index-44df64aa.js';
-import { u as useScreenSize } from './useScreenSize-241e66fa.js';
-import { createPortal } from 'react-dom';
-import { css } from '@emotion/react';
+import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { B as Button$2 } from './index-f4607daa.js';
-import { I as InputDate } from './InputDate-86cf8a56.js';
-import { C as Close } from './Close-544c792d.js';
+import { css } from '@emotion/react';
+import { T as TogetherComponentGlobalContext } from './utils-7e9b37e9.js';
+import { i as isVideo } from './index-39ead392.js';
+import { D as DrawerComponent } from './index-b4398a57.js';
+import { u as useScreenSize } from './useScreenSize-bf03486c.js';
+import { createPortal } from 'react-dom';
+import { B as Button$2 } from './index-3f972b22.js';
+import { I as InputDate } from './InputDate-ae62bf9a.js';
+import { C as Close } from './Close-1f4384ad.js';
+import './constantsIsProduction.js';
+import './normalizeLink-c0dec424.js';
+import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-3430abbb.js';
 import 'classnames';
-import './useUniqueId-15198ead.js';
+import './useUniqueId-bf8b1319.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
-import './constantsDomainLocales.js';
-import './constantsIsProduction.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
+import './i18n-values/en-PH.js';
+import './i18n-values/hi-IN.js';
+import './i18n-values/id-ID.js';
+import './i18n-values/km-KH.js';
+import './i18n-values/ms-MY.js';
+import './i18n-values/my-MM.js';
+import './i18n-values/th-TH.js';
+import './i18n-values/tl-PH.js';
+import './i18n-values/vi-VN.js';
+import './i18n-values/vi-VN_MB.js';
+import './i18n-values/zh-TW.js';
+import './index-0869dad7.js';
+import 'slugify';
+import 'string-format';
+import './togetherApiPaths.js';
+import './constants-e9127712.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -73,7 +94,7 @@ if (sessionStorage.getItem('insider_object')) {
 }
 const docLang = document.documentElement.lang;
 // TODO: country code
-const LEAD_LOCALE_DATA = {
+const LEAD_LOCALE_DATA$1 = {
     'vi-VN': {
         popupLang: 'vi',
         countryCode: 'vn',
@@ -115,7 +136,7 @@ const LEAD_LOCALE_DATA = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
+const LEAD_LOCALE = LEAD_LOCALE_DATA$1[docLang] || LEAD_LOCALE_DATA$1['vi-VN'];
 function LEAD_RESET_VAR() {
     // LEAD_CURRENT_URL = location.href.toLowerCase();
     LEAD_CURRENT_URL =
@@ -136,6 +157,11 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
+const LEADGEN_ACTIONS = {
+    SHOW: 'SHOW',
+    SCROLL: 'SCROLL',
+    TIME: 'TIME',
+};
 const LEADGEN_LAYOUT = {
     LightBoxA: 'LightBoxA',
     LightBoxB: 'LightBoxB',
@@ -165,8 +191,10 @@ const LEADGEN_BLOCK = {
     DropdownBlock: 'DropdownBlock',
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
+    TitleBlock: 'TitleBlock',
+    SubtitleBlock: 'SubtitleBlock',
 };
-const LEADGEN_BLOCK_IN_FORM = [
+const LEADGEN_BLOCK_INPUT = [
     LEADGEN_BLOCK.TextBlock,
     LEADGEN_BLOCK.NumberBlock,
     LEADGEN_BLOCK.DateBlock,
@@ -181,7 +209,59 @@ const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.CheckboxBlock,
     LEADGEN_BLOCK.TncBlock,
 ];
+const leadGenFieldNamePhone = (listBlockAdded) => {
+    return listBlockAdded
+        .filter(({ name }) => [
+        LEADGEN_BLOCK.PhoneBlock,
+        LEADGEN_BLOCK.PhoneOtpBlock,
+        LEADGEN_BLOCK.WhatsappOtpBlock,
+        LEADGEN_BLOCK.ZaloOtpBlock,
+    ].includes(name))
+        .map(({ data }) => data.value);
+};
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
+const LEAD_LOCALE_DATA = {
+    'vi-VN': {
+        popupLang: 'vi',
+        countryCode: 'vn',
+        countryCodeNumber: 84,
+    },
+    'id-ID': {
+        popupLang: 'id',
+        countryCode: 'id',
+        countryCodeNumber: 62,
+    },
+    'th-TH': {
+        popupLang: 'th',
+        countryCode: 'th',
+        countryCodeNumber: 66,
+    },
+    'ms-MY': {
+        popupLang: 'ms',
+        countryCode: 'my',
+        countryCodeNumber: 60,
+    },
+    'zh-TW': {
+        popupLang: 'zh',
+        countryCode: 'tw',
+        countryCodeNumber: 886,
+    },
+    'km-KH': {
+        popupLang: 'km',
+        countryCode: 'kh',
+        countryCodeNumber: 855,
+    },
+    'my-MM': {
+        popupLang: 'my',
+        countryCode: 'mm',
+        countryCodeNumber: 95,
+    },
+    'hi-IN': {
+        popupLang: 'hi',
+        countryCode: 'in',
+        countryCodeNumber: 91,
+    },
+};
 const mappingSSOToLead = (userInfoProps) => {
     var _a, _b;
     try {
@@ -197,7 +277,7 @@ const mappingSSOToLead = (userInfoProps) => {
                 if (ssoKey === 'birthday') {
                     const dob = dayjs(initValue, 'YYYY-MM-DD', true);
                     if (dob.isValid()) {
-                        user.birthday = dob;
+                        user.birthday = dob.toDate();
                     }
                 }
                 else if (ssoKey === 'gender') {
@@ -220,16 +300,83 @@ const mappingSSOToLead = (userInfoProps) => {
     catch (error) {
         return;
     }
+};
+const formatCampaignDetail = (campaign) => {
+    if (!campaign) {
+        return {};
+    }
+    try {
+        const { extra_fields, thank_you_image } = campaign || {};
+        const { textBlocks: exTextBlocks, imageBlocks: exImageBlocks, listBlockAdded: exListBlockAdded, listBlockThankyou: exListBlockThankyou, actionBlocks: exActionBlocks, } = extra_fields;
+        const textBlocks = JSON.parse(exTextBlocks);
+        const imageBlocks = JSON.parse(exImageBlocks);
+        const listBlockAdded = JSON.parse(exListBlockAdded);
+        const listBlockThankyou = JSON.parse(exListBlockThankyou);
+        const actionBlocks = JSON.parse(exActionBlocks);
+        const ThankYouBlock = {
+            image: { src: thank_you_image },
+        };
+        listBlockThankyou.forEach((block) => {
+            const { name, data } = block || {};
+            const { value: htmlText, align, newtab, url } = data || {};
+            switch (name) {
+                case LEADGEN_BLOCK.TitleBlock: {
+                    ThankYouBlock.title = { htmlText, align };
+                }
+                case LEADGEN_BLOCK.SubtitleBlock: {
+                    ThankYouBlock.description = { htmlText, align };
+                }
+                case LEADGEN_BLOCK.LinkButtonBlock: {
+                    ThankYouBlock.button = { htmlText, newtab, url };
+                }
+            }
+        });
+        return Object.assign(Object.assign({}, campaign), { extra_fields: Object.assign(Object.assign({}, extra_fields), { textBlocks,
+                imageBlocks,
+                listBlockAdded,
+                listBlockThankyou,
+                actionBlocks }), ThankYouBlock });
+    }
+    catch (error) {
+        return {};
+    }
 };
 
 class Store {
     constructor() {
+        this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
         this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
         this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
     }
 }
 const leadStore = new Store();
 
+const METHOD = {
+    GET: 'get',
+    POST: 'POST',
+};
+const LEADGEN_API_PATH = {
+    V2_CAMPAIGN: 'api/v2/campaign',
+    V2_SUBSCRIPTION_LEAD: 'api/v2/subscription-box',
+    V2_SUBSCRIPTION_INFO: 'api/campaign/get-title',
+};
+const SSO_API_PATH = {
+    USER_UPDATE: 'api/user/update',
+};
+const ssoApi = {
+    call(_a) {
+        var { url, data } = _a, config = __rest(_a, ["url", "data"]);
+        const token = getCookie(BEARER_TOKEN_COOKIE);
+        config.body = JSON.stringify(data);
+        config.headers = {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        };
+        return fetch(`${leadStore.apiSsoUrl}${url}`, config)
+            .then((res) => res.json())
+            .catch(() => ({}));
+    },
+};
 const leadApi = {
     call(_a) {
         var { url, data = undefined } = _a, config = __rest(_a, ["url", "data"]);
@@ -333,8 +480,54 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
         },
     });
 };
+const getCampaignByCode = (campaign_code) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
+        method: METHOD.GET,
+    });
+};
+const getSubscriptionBoxInfo = ({ category, site, }) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}`,
+        method: METHOD.GET,
+    });
+};
+const postSubscriptionBoxLead = ({ data }) => {
+    return leadApi.call({
+        url: LEADGEN_API_PATH.V2_SUBSCRIPTION_LEAD,
+        method: METHOD.POST,
+        data,
+    });
+};
+const postUserInfoFromLeadGen = ({ name }) => {
+    return ssoApi.call({
+        url: SSO_API_PATH.USER_UPDATE,
+        method: METHOD.POST,
+        data: { name },
+    });
+};
+const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
+    return leadApi.call({
+        url: `api/campaign/${code}/impression`,
+        method: METHOD.POST,
+        data: {
+            action,
+            title_article,
+            cookie_id,
+            ga_client_id,
+            url,
+            extra,
+            referrer,
+        },
+    });
+};
 const Service = {
     campaignGetById,
+    getCampaignByCode,
+    getSubscriptionBoxInfo,
+    postSubscriptionBoxLead,
+    postUserInfoFromLeadGen,
+    campaignPostImpression,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -674,7 +867,7 @@ const Description = (_a) => {
     return description ? (React__default.createElement(Text, Object.assign({ size: "p3" }, rest), description)) : null;
 };
 
-const LeadGenContext = createContext({});
+const LeadGenContext$1 = createContext({});
 
 var useStyles$2 = createStyles(() => {
     return {
@@ -738,7 +931,7 @@ const SubtitleBlock$1 = ({ children, align, }) => (React__default.createElement(
 const TitleBlock$1 = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, styles, classNames, popoverProps, }) => {
-    const { primaryColor } = useContext(LeadGenContext);
+    const { primaryColor } = useContext(LeadGenContext$1);
     const { classes, cx } = useStyles$2(undefined, {
         name: 'LeadGen__Field',
         styles,
@@ -853,7 +1046,7 @@ const Heading = (_a) => {
 
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
     var _a;
-    const { primaryColor } = useContext(LeadGenContext);
+    const { primaryColor } = useContext(LeadGenContext$1);
     const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = useContext(LeadGenComponentContext);
     const { classes, cx } = useStyles$1(undefined, {
         name: 'LeadGen__FormComponent',
@@ -1363,149 +1556,1704 @@ const translationsMap = {
     'my-MM': myMM,
     'km-KH': kmKH,
     'zh-TW': zhTW,
+    'zh-CN': zhTW,
     'th-TH': thTH,
     'tl-PH': enPH,
 };
 const getTranslations = (locale) => {
-    const translations = translationsMap[locale];
+    const translations = Object.assign(Object.assign({}, translationsMap$1[locale]), translationsMap[locale]);
     if (translations) {
         return translations;
     }
     return translationsMap['en-PH'];
 };
 
-const useImageSize = (src) => {
-    const [width, setWidth] = useState(16);
-    const [height, setHeight] = useState(9);
-    const [loaded, setLoaded] = useState(false);
-    // load src image to get its width and height
-    useEffect(() => {
-        setLoaded(false);
-        if (src) {
-            const img = new Image();
-            img.addEventListener('load', () => {
-                setWidth(img.naturalWidth);
-                setHeight(img.naturalHeight);
-                setLoaded(true);
-            });
-            img.addEventListener('error', () => {
-                setWidth(16);
-                setHeight(9);
-                setLoaded(true);
-            });
-            img.src = src;
-        }
-        else {
-            setWidth(16);
-            setHeight(9);
-            setLoaded(true);
-        }
-    }, [src]);
-    return {
-        loaded,
-        width,
-        height,
-    };
-};
-
-const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
-    React__default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: svgClassName },
-        React__default.createElement("path", { d: "M9.99981 10.8432L14.0583 14.9017C14.1691 15.0125 14.3083 15.0691 14.476 15.0717C14.6437 15.0743 14.7854 15.0176 14.9013 14.9017C15.0172 14.7858 15.0752 14.6453 15.0752 14.4802C15.0752 14.3151 15.0172 14.1746 14.9013 14.0587L10.8429 10.0002L14.9013 5.9417C15.0121 5.83094 15.0688 5.69172 15.0713 5.52402C15.0739 5.35634 15.0172 5.21456 14.9013 5.09866C14.7854 4.98276 14.6449 4.9248 14.4798 4.9248C14.3147 4.9248 14.1742 4.98276 14.0583 5.09866L9.99981 9.15712L5.94133 5.09866C5.83057 4.98789 5.69135 4.93122 5.52365 4.92866C5.35598 4.92609 5.21419 4.98276 5.09829 5.09866C4.98239 5.21456 4.92444 5.35506 4.92444 5.52018C4.92444 5.6853 4.98239 5.82581 5.09829 5.9417L9.15675 10.0002L5.09829 14.0587C4.98752 14.1694 4.93085 14.3087 4.9283 14.4763C4.92572 14.644 4.98239 14.7858 5.09829 14.9017C5.21419 15.0176 5.3547 15.0756 5.51982 15.0756C5.68493 15.0756 5.82544 15.0176 5.94133 14.9017L9.99981 10.8432Z" }))));
-
-// url: imageBlocks.imageMobile.data.url
-// newTab: imageBlocks.imageMobile.data.newtab
-// imageMobile: campaignShow.image
-// imageDestkop: campaignShow.image_desktop
-const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
-    if (!imageMobileLoaded || !imageDestkopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
-        React__default.createElement("div", { className: "le-center-tab-popup" },
-            React__default.createElement("div", { style: { position: 'relative' } },
-                React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    isVideo(imageMobile) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
-                        React__default.createElement("source", { src: imageMobile }))) : (React__default.createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        } })),
-                    isVideo(imageDestkop) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
-                        React__default.createElement("source", { src: imageDestkop }))) : (React__default.createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
-                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
-                        } }))),
-                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
-};
-
-// title: titleText
-// titleAlign: textBlocks.titleBlock.data.align
-// subtitle: textBlocks.subtitleBlock.data.value
-// subtitleAlign: textBlocks.subtitleBlock.data.align
-// url: actionBlocks.linkButtonBlock.data.url
-// urlText: actionBlocks.linkButtonBlock.data.value
-// newTab: actionBlocks.linkButtonBlock.data.newtab
-// imageMobile: campaignShow.image
-// imageDesktop: campaignShow.image_desktop
-const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, subtitleAlign, newTab, imageDesktop, imageMobile, onClose, onOtherSubmit, }) => {
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
-    if (!imageMobileLoaded || !imageDesktopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper lead-floating-wrapper", "data-popup-url": location.pathname, "data-popup-type": "floating" },
-        React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "le-floating-desktop" },
-                React__default.createElement("div", { className: "le-floating-desktop-wrap", style: { position: 'relative', background: '#fff' } },
-                    imageDesktop ? (React__default.createElement("div", null,
-                        React__default.createElement("img", { style: {
-                                maxWidth: 120,
-                                borderTopLeftRadius: 5,
-                                borderBottomLeftRadius: 5,
-                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                            }, src: imageDesktop }))) : null,
-                    React__default.createElement("div", { style: { padding: 20 } },
-                        React__default.createElement("div", { className: `le-floating-desktop-title le-text-align-${titleAlign}` }, title),
-                        React__default.createElement("div", { className: `le-floating-desktop-desc le-text-align-${subtitleAlign}` }, subtitle)),
-                    React__default.createElement("a", { target: newTab ? 'blank' : '_parent', style: { marginLeft: 35, textDecoration: 'none' }, href: url },
-                        React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText)),
-                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))),
-        React__default.createElement("aside", { className: "le-only-mobile" },
-            React__default.createElement("div", { className: "le-floating-mobile" },
-                React__default.createElement("div", { className: "le-floating-mobile-wrap", style: { position: 'relative', background: '#fff' } },
-                    React__default.createElement("aside", { style: { display: 'flex', justifyContent: 'space-between' } },
-                        React__default.createElement("div", null,
-                            React__default.createElement("div", { className: `le-floating-mobile-title le-text-align-${titleAlign}` }, title),
-                            React__default.createElement("div", { className: `le-floating-mobile-desc le-text-align-${subtitleAlign}` }, subtitle)),
-                        imageMobile ? (React__default.createElement("div", null,
-                            React__default.createElement("img", { style: {
-                                    marginLeft: 15,
-                                    marginTop: 4,
-                                    maxWidth: 100,
-                                    aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                                }, src: imageMobile }))) : null),
-                    React__default.createElement("div", { style: { textAlign: 'center', marginTop: 10 } },
-                        React__default.createElement("a", { target: newTab ? 'blank' : '_parent', href: url, style: { textDecoration: 'none' } },
-                            React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText))),
-                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+const LeadGenTranslationProvider = (props) => {
+    const { locale, children } = props;
+    const translationContextValue = useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
+    return (React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children));
 };
 
-const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
-    const { primaryColor } = useContext(LeadGenContext);
-    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
+// import mockLeadData from './mockLeadData'
+const listCampaignScheduled = [];
+const listCampaignScheduledToActivated = [];
+const listCampaignActiveButExpired = [];
+const listCampaignExcludeSonsored = [];
+const listCampaignDifferentSponsor = [];
+const listCampaignNotDisplayInRangeOfTime = [];
+function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
+}
+const getShuffleArray = (array) => {
+    const newArray = [...array];
+    for (let i = newArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        const temp = newArray[i];
+        newArray[i] = newArray[j];
+        newArray[j] = temp;
+    }
+    return newArray;
+};
+const getTimeByTimezone = (timeZone = 'UTC') => {
+    const date = new Date();
+    return new Date(date.toLocaleString('en-US', { timeZone }));
+};
+const parseDateByCampaignTime = (dateStr) => {
+    // Format like this: 2023-04-04 00:00:00
+    try {
+        const [datePart, timePart] = dateStr.split(' ');
+        const [year, month, day] = datePart.split('-').map(Number);
+        const [hours, minutes, seconds] = timePart.split(':').map(Number);
+        /** JavaScript counts months from 0 to 11 */
+        return new Date(year, month - 1, day, hours, minutes, seconds);
+    }
+    catch (err) {
         return null;
-    return (React__default.createElement("div", { className: "lead-modal__thank-you leadgen-inner_thankyou" },
-        React__default.createElement("div", { style: { width: '100%' } },
-            React__default.createElement("img", { src: image, style: {
-                    maxHeight: 162,
-                    objectFit: 'cover',
-                    aspectRatio: `${imageWidth}/${imageHeight}`,
-                }, loading: "lazy" }),
-            title && (React__default.createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
-            subtitle && (React__default.createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
-                const isShowBr = idx < list.length - 1;
-                return (React__default.createElement(React__default.Fragment, null,
-                    text,
-                    isShowBr && React__default.createElement("br", null)));
-            }))),
+    }
+};
+const checkCampaignNowInTimeframe = (c) => {
+    var _a;
+    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
+    const startedAtStr = c.started_at;
+    const endedAtStr = c.ended_at;
+    const startedDate = parseDateByCampaignTime(startedAtStr);
+    const endedDate = parseDateByCampaignTime(endedAtStr);
+    if (!startedDate || !endedDate) {
+        return false;
+    }
+    const timeZone = LEAD_TIMEZONE_DATA[siteId];
+    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
+    if (nowWithTimezoneMs <= endedDate.getTime() &&
+        nowWithTimezoneMs >= startedDate.getTime()) {
+        listCampaignScheduledToActivated.push(c);
+        return true;
+    }
+    return false;
+};
+function checkCampaignActiveButExpireAlready(c) {
+    var _a;
+    /** Do not setup timeframe for this campaign. No need to check */
+    if (c.forever === 1) {
+        return true;
+    }
+    const startedAtStr = c.started_at;
+    const endedAtStr = c.ended_at;
+    const startedDate = parseDateByCampaignTime(startedAtStr);
+    const endedDate = parseDateByCampaignTime(endedAtStr);
+    /** Do not setup timeframe for this campaign. No need to check */
+    if (!startedDate || !endedDate) {
+        return true;
+    }
+    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
+    const timeZone = LEAD_TIMEZONE_DATA[siteId];
+    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
+    /** Check if this expire already, do not show */
+    if (nowWithTimezoneMs > endedDate.getTime()) {
+        listCampaignActiveButExpired.push(c);
+        return false;
+    }
+    return true;
+}
+function shouldNotDisplayIfExcludeAllSponsors(c) {
+    var _a;
+    const excludeSponsored = Number((_a = c.rules.find((i) => i.rule == 'exclude_sponsored')) === null || _a === void 0 ? void 0 : _a.value);
+    const isSponsored = Boolean(document.querySelector('.hhg-disclaimer-text'));
+    if (isSponsored && excludeSponsored) {
+        listCampaignExcludeSonsored.push(c);
+        return true;
+    }
+    return false;
+}
+function shouldDisplayWithCurrentSponsor(c) {
+    var _a, _b;
+    try {
+        // TODO: BE will rename `exclude_sponsored_list` later
+        const stringOrArray = (_a = c.rules.find((i) => i.rule == 'exclude_sponsored_list')) === null || _a === void 0 ? void 0 : _a.value;
+        const whiteListSponsors = stringOrArray instanceof Array ? stringOrArray : JSON.parse(stringOrArray);
+        const dataSponsoredId = Number((_b = document
+            .querySelector('[data-sponsored-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-sponsored-id'));
+        // There is no config for sponsor id and white list, should show as default
+        if (!dataSponsoredId ||
+            dataSponsoredId <= 0 ||
+            whiteListSponsors.length === 0) {
+            return true;
+        }
+        // Check the dataSponsoredId exists in the white list or not.
+        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
+        if (isExist) {
+            return true;
+        }
+        listCampaignDifferentSponsor.push({ id: c.id, rules: c.rules });
+        return false;
+    }
+    catch (err) {
+        // Default is show
+        return true;
+    }
+}
+const filterFnCampaign = (c) => {
+    if (shouldNotDisplayIfExcludeAllSponsors(c)) {
+        return false;
+    }
+    else if (!shouldDisplayWithCurrentSponsor(c)) {
+        return false;
+    }
+    /** Active */
+    if (c.formatted_status === 1) {
+        return checkCampaignActiveButExpireAlready(c);
+    }
+    /** Schedule */
+    if (c.formatted_status === 0) {
+        listCampaignScheduled.push(c);
+        return checkCampaignNowInTimeframe(c);
+    }
+    return false;
+};
+const fillterApprearanceTimeCampaign = (c) => {
+    var _a;
+    try {
+        const isTimeInRange = (currentTime, startTime, endTime) => {
+            const startParts = startTime.split(':');
+            const endParts = endTime.split(':');
+            const startDate = new Date();
+            startDate.setHours(Number(startParts[0]), Number(startParts[1]), 0, 0);
+            const endDate = new Date();
+            endDate.setHours(Number(endParts[0]), Number(endParts[1]), 0, 0);
+            return currentTime >= startDate && currentTime <= endDate;
+        };
+        const rulesApprValue = (_a = c.rules.find((i) => i.rule == 'appearance_time')) === null || _a === void 0 ? void 0 : _a.value;
+        const startTime = rulesApprValue.startTime;
+        const endTime = rulesApprValue.endTime || '23:59';
+        if (!startTime) {
+            return true;
+        }
+        if (isTimeInRange(new Date(), startTime, endTime)) {
+            return true;
+        }
+        listCampaignNotDisplayInRangeOfTime.push(c);
+        return false;
+    }
+    catch (err) {
+        return true;
+    }
+};
+let timeoutRef = null;
+let LEAD_SCROLL_EVENT = null;
+function clearPassiveEvent() {
+    if (timeoutRef) {
+        clearTimeout(timeoutRef);
+        timeoutRef = null;
+    }
+    if (LEAD_SCROLL_EVENT) {
+        window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
+        LEAD_SCROLL_EVENT = null;
+    }
+}
+function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
+    // clear previous passive event, check for new condition
+    clearPassiveEvent();
+    const leadCurrentUrl = DEBUG_URL ||
+        ('https://' +
+            location.hostname +
+            location.pathname +
+            location.search).toLowerCase();
+    fetch(leadApi + 'api/campaign/' + leadSiteId, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            url: leadCurrentUrl,
+            ga_client_id: getCookie('_ga') || null,
+        }),
+    })
+        .then((response) => {
+        return response.json();
+        // return mockLeadData || response.json()
+    })
+        .then((data) => {
+        var _a, _b, _c, _d;
+        LeadLog('List campagin: ', data);
+        LEAD_RESET_VAR();
+        if (data._status == 1) {
+            const campaigns = (((_b = (_a = data._data) === null || _a === void 0 ? void 0 : _a.campaigns) === null || _b === void 0 ? void 0 : _b.filter(filterFnCampaign)) || []).filter(fillterApprearanceTimeCampaign);
+            if (!getCookie('hhg-id')) {
+                setCookie('hhg-id', v1(), {
+                    domain: '.' + leadDomain,
+                    path: '/',
+                });
+                LeadLog('😍 Set HHG ID cookie');
+            }
+            // getCookie('hhg-id')
+            // TODO: HP-534 Filter desktop
+            let campaignsDevice = [];
+            if (isMobile()) {
+                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
+            }
+            else {
+                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
+            }
+            LeadLog(`👓 campaignsDevice`, campaignsDevice);
+            LeadLog('--listCampaignScheduled', listCampaignScheduled);
+            LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
+            LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
+            LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
+            LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
+            LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
+            // Check links
+            let listLinksObj = campaignsDevice
+                .map((i, index) => i.targets
+                .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
+                .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+                .flat(1);
+            // Check list link match current href
+            listLinksObj = listLinksObj.filter((i) => {
+                var _a;
+                const target = new URL(String(i.target).toLowerCase());
+                if (i.option == 'exact_match')
+                    // FOR TEST LOCAL:
+                    // return Boolean(location.pathname === target.pathname)
+                    return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
+                if (i.option == 'start_with') {
+                    // FOR TEST LOCAL:
+                    // if (location.pathname.includes(target.pathname)) {
+                    if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
+                        const listExcluding = i.sub_target
+                            .filter((i) => i.option == 'excluding')
+                            .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+                        return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
+                    }
+                    else {
+                        return false;
+                    }
+                }
+            });
+            // Check tags
+            const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
+            const listTags = listMetaTag.map((i) => i.content);
+            let listCampaignHasTag = [];
+            let listTagsObj = [];
+            if (listTags && listTags.length) {
+                listCampaignHasTag = campaignsDevice
+                    .map((i, index) => i.targets
+                    .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
+                    .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+                    .flat(1);
+                listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
+            }
+            const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
+            const cookieKeys = document.cookie
+                .split('; ')
+                .map((i) => i.split('=')[0]);
+            const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
+            LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
+            const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
+            LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
+            const listCampaignSubmitedClosed = [
+                ...listCampaignCodeSubmited,
+                ...listCampaignCodeClosed,
+            ];
+            const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
+                const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
+                return !hasSubmited;
+            });
+            const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
+            // .sort(
+            //   (a, b) =>
+            //     (listCampaignValid[a.campaignIndex]?.score || 0) -
+            //     (listCampaignValid[b.campaignIndex]?.score || 0),
+            // )
+            LeadLog('--listCampaignValid : ', listCampaignValid);
+            if (listCampaignValid && listCampaignValid.length) {
+                const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
+                LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
+                const { rules } = CAMPAIGN_SHOW;
+                // CHECK RULE TRIGGER POPUP
+                const timeoutRule = Number((_c = rules.find((i) => i.rule == 'time')) === null || _c === void 0 ? void 0 : _c.value);
+                LeadLog(`timeoutRule`, timeoutRule);
+                const scrollRule = Number((_d = rules.find((i) => i.rule == 'scroll')) === null || _d === void 0 ? void 0 : _d.value);
+                LeadLog(`scrollRule`, scrollRule);
+                let impressionAction = 'TIME';
+                if (Number.isInteger(timeoutRule)) {
+                    impressionAction = 'TIME';
+                    LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
+                    timeoutRef = setTimeout(() => {
+                        onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                    }, timeoutRule * 1000);
+                }
+                if (Number.isInteger(scrollRule)) {
+                    impressionAction = 'SCROLL';
+                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
+                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
+                        document.querySelector('body');
+                    const pct = $p.getBoundingClientRect().top;
+                    const pb = $p.offsetHeight;
+                    LeadLog(`👓 Element check scroll: `, $p);
+                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
+                        const wt = window.pageYOffset || document.documentElement.scrollTop;
+                        let percent = 0;
+                        if (wt >= pct) {
+                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
+                        }
+                        LeadLog('---Scroll', percent, scrollRule);
+                        // TODO: CHECK FOOTER HEIGHT
+                        if (percent >= scrollRule) {
+                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
+                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                        }
+                    };
+                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
+                        passive: true,
+                    });
+                }
+            }
+            else {
+                LeadLog('🚧 No lead campaigns on current URL, tags');
+            }
+        }
+    })
+        .catch((err) => {
+        LeadLog(`Lead error: `, err);
+    });
+}
+const LeadLog = (...params) => {
+    if (process.env.NODE_ENV !== 'production' ||
+        (process.env.NEXT_PUBLIC_DEPLOY_ENV &&
+            process.env.NEXT_PUBLIC_DEPLOY_ENV !== 'production') ||
+        (typeof localStorage !== 'undefined' &&
+            localStorage.getItem('hhg_debug') === 'true')) {
+        console.log(...params);
+    }
+};
+
+const LeadGenContext = createContext({
+    submit(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen Submit : ', value);
+        return Promise.reject(value);
+    },
+    submitSubscriptionBox(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen SubmitSubscriptionBox : ', value);
+        return Promise.reject(value);
+    },
+    impression(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen Impression : ', value);
+        return Promise.reject(value);
+    },
+    /** For Subscription Box */
+    subscriptionIcon: '',
+    subscriptionTitle: '',
+});
+const LeadGenContextProvider = (props) => {
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, } = props;
+    const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
+    const [subscriptionInfo, setSubscriptionInfo] = useState({
+        subscriptionIcon: '',
+        subscriptionTitle: '',
+    });
+    const locale = useMemo(() => {
+        return localeProps || LOCALE['PhilippinesEnglish'];
+    }, [localeProps]);
+    const leadGenContextValue = useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [...Object.values(props), forceCampaign]);
+    const { url, campaign_id, campaign_code, cookie_id, ga_client_id, category_id, article_id, article_title, } = useMemo(() => ({
+        url: location.href.toLowerCase() || '',
+        cookie_id: getCookie('hhg-id') || null,
+        ga_client_id: getCookie('_ga'),
+        campaign_id: forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id,
+        campaign_code: campaignCodeProps || (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code),
+        category_id: categoryId,
+        article_id: articleId,
+        article_title: document.title || '',
+    }), [campaignCodeProps, articleId, categoryId, forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id]);
+    const fetchCampaign = useCallback((campaign_code) => {
+        Service.getCampaignByCode(campaign_code).then((res) => {
+            const { _data } = res || {};
+            const { campaigns } = _data || {};
+            LeadLog('** LeadGen Campaign : ', campaigns);
+            setForceCampaign(formatCampaignDetail(campaigns));
+        });
+    }, [campaignCodeProps]);
+    // TODO : Update form for LeadGen
+    const submit = useCallback((data) => {
+        return Service.postSubscriptionBoxLead({ data });
+    }, []);
+    const submitSubscriptionBox = useCallback((value) => {
+        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { campaign_id,
+            site_domain, url: (value === null || value === void 0 ? void 0 : value.url) || url, ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id }), extraValues), { article_id,
+            category_id, article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || article_title });
+        return Service.postSubscriptionBoxLead({ data });
+    }, [
+        extraValues,
+        site_domain,
+        campaign_id,
+        article_id,
+        article_title,
+        category_id,
+        url,
+        ga_client_id,
+    ]);
+    const impression = useCallback((value) => {
+        return Service.campaignPostImpression({
+            url: (value === null || value === void 0 ? void 0 : value.url) || url,
+            action: (value === null || value === void 0 ? void 0 : value.action) || LEADGEN_ACTIONS.SCROLL,
+            code: (value === null || value === void 0 ? void 0 : value.code) || campaign_code,
+            title_article: (value === null || value === void 0 ? void 0 : value.title_article) || article_title,
+            cookie_id: (value === null || value === void 0 ? void 0 : value.cookie_id) || cookie_id,
+            ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id,
+            extra: (value === null || value === void 0 ? void 0 : value.extra) || Object.assign({ cookie_id,
+                article_id, subscription_title: subscriptionInfo.subscriptionTitle }, extraValues),
+            referrer: value === null || value === void 0 ? void 0 : value.referrer,
+        });
+    }, [
+        extraValues,
+        campaign_id,
+        url,
+        campaign_code,
+        article_title,
+        cookie_id,
+        ga_client_id,
+        article_id,
+        subscriptionInfo.subscriptionTitle,
+    ]);
+    useEffect(() => {
+        if (forceCampaignProps) {
+            setForceCampaign(forceCampaignProps);
+            return;
+        }
+        /** For Subscription Box */
+        if (categoryId) {
+            Service.getSubscriptionBoxInfo({
+                category: categoryId,
+                site: site_domain,
+            }).then((res) => {
+                const { _data } = res || {};
+                const { item, campaign_code } = _data || {};
+                const { icon, content } = item || {};
+                LeadLog('** LeadGen SubscriptionBox campaign_code : ', campaign_code);
+                LeadLog('** LeadGen SubscriptionBox subscription_icon : ', icon);
+                LeadLog('** LeadGen SubscriptionBox subscription_title : ', content);
+                setSubscriptionInfo({
+                    subscriptionIcon: icon,
+                    subscriptionTitle: content,
+                });
+                if (campaign_code) {
+                    fetchCampaign(campaign_code);
+                }
+            });
+            return;
+        }
+        if (campaignCodeProps) {
+            fetchCampaign(campaignCodeProps);
+        }
+    }, [campaignCodeProps, categoryId]);
+    useEffect(() => {
+        leadStore.apiSsoUrl = apiSsoUrl;
+        leadStore.apiLeadUrl = apiLeadUrl;
+        leadStore.apiSubotUrl = apiSubotUrl;
+    }, [apiLeadUrl, apiSubotUrl, apiSsoUrl]);
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
+            submitSubscriptionBox,
+            impression }) },
+        React__default.createElement(LeadGenTranslationProvider, { locale: locale }, children)));
+};
+const useLeadGenContext = () => {
+    const context = useContext(LeadGenContext);
+    return Object.assign(Object.assign({}, context), { apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const customParseFormat = require('dayjs/plugin/customParseFormat');
+dayjs.extend(customParseFormat);
+// You can give context variables any name
+const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
+const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
+    var _a;
+    const { t } = useTranslations();
+    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const LEAD_LOCALE = LEAD_LOCALE_DATA[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
+        LEAD_LOCALE_DATA['vi-VN'];
+    const validateObj = useMemo(() => {
+        const InputBlocks = [
+            'TextBlock',
+            'NumberBlock',
+            'EmailBlock',
+            'PhoneBlock',
+            'DateBlock',
+            'CheckboxBlock',
+            'RadioBlock',
+            'DropdownBlock',
+            'PhoneOtpBlock',
+            'WhatsappOtpBlock',
+            'ZaloOtpBlock',
+            'LocationBlock',
+            'TncBlock',
+        ];
+        // ALL are required and can skip if not touched yet
+        const withSharedCheck = (name, cb, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        block) => {
+            return (value) => {
+                var _a;
+                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
+                if (!formRef.current.isTouched(name))
+                    return;
+                if ((typeof value === 'string' && value.trim() === '') ||
+                    typeof value === 'undefined' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return isBLockRequired
+                        ? t('validator.required')
+                        : cb === null || cb === void 0 ? void 0 : cb(value);
+                }
+                return cb === null || cb === void 0 ? void 0 : cb(value);
+            };
+        };
+        return listBlockAdded
+            .filter((b) => InputBlocks.includes(b.name))
+            .reduce((r, b) => {
+            const { name: fieldType, data } = b || {};
+            const { value: fieldName, required } = data || {};
+            const isRequired = required !== null && required !== void 0 ? required : true;
+            if (fieldType === 'NumberBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value && isNaN(Number(value))) {
+                            return t('validator.number');
+                        }
+                    }, b) });
+            }
+            else if (fieldType === 'EmailBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return t('validator.email');
+                        }
+                        if (!value)
+                            return;
+                        validatingEmailRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(fieldName, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                email: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(fieldName, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(fieldName);
+                                }
+                                validatingEmailRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
+                                validatingEmailRef.current = false;
+                            });
+                        }, 200);
+                    }, b) });
+            }
+            else if (fieldType === 'PhoneBlock' ||
+                fieldType === 'PhoneOtpBlock' ||
+                fieldType === 'ZaloOtpBlock' ||
+                fieldType === 'WhatsappOtpBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value &&
+                            window.intlTelInputUtils &&
+                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
+                            return t('validator.phone');
+                        }
+                        if (!value)
+                            return;
+                        validatingPhoneRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(fieldName, 'Validating...');
+                            if (b.data.singleSubmission) {
+                                checkUsedPhoneOnlyWithCache(campaignId, value)
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(fieldName, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(fieldName);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((err) => {
+                                    console.error(err);
+                                    formRef.current.setFieldError(fieldName, err.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                            else {
+                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                    phone: value,
+                                })
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(fieldName, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(fieldName);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((e) => {
+                                    console.error(e);
+                                    formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                        }, 200);
+                    }, b) });
+            }
+            else if (fieldType === 'DateBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (!isRequired && !value) {
+                            return;
+                        }
+                        const errMsg = t('validator.dateInvalid');
+                        const dayInJS = typeof value === 'string'
+                            ? dayjs(value, format, true)
+                            : dayjs(value);
+                        if (!dayInJS.isValid()) {
+                            return errMsg;
+                        }
+                    }, b) });
+            }
+            else if (fieldType === 'TncBlock') {
+                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
+                        if (isRequired && !value) {
+                            return t('validator.required');
+                        }
+                    }, b) });
+            }
+            else {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, undefined, b) });
+            }
+        }, {});
+    }, [listBlockAdded.map((b) => b.name).join(','), format]);
+    const form = useLeadForm({
+        validateInputOnChange: true,
+        validateInputOnBlur: true,
+        clearInputErrorOnChange: true,
+        validate: validateObj,
+        initialValues,
+    });
+    const formRef = useRef(form);
+    formRef.current = form;
+    return { form, validateObj };
+};
+
+const StyledLeadGenThankYou = styled.div `
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  padding-block: 24px;
+
+  .leadgen-image {
+    width: 120px;
+    height: 120px;
+    margin-inline: auto;
+    object-fit: contain;
+    object-position: center;
+    text-align: center;
+  }
+
+  .leadgen-title {
+    margin-block: 0;
+    color: ${theme.colors.gray900};
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 28px;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-description {
+    margin-block: 0;
+    color: ${theme.colors.gray600};
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: -0.2px;
+    text-align: center;
+  }
+
+  > [data-align] {
+    &[data-align='right'] {
+      text-align: right;
+    }
+    &[data-align='center'] {
+      text-align: center;
+    }
+  }
+`;
+const LeadGenThankYou = ({ image, title, description, showButton = false, button, className, style, }) => {
+    const { src } = image;
+    const { htmlText: titleText, align: titleAlign } = title;
+    const { htmlText: descriptionText, align: descriptionAlign } = description;
+    const { htmlText: buttonText, newtab, url, onClick } = button;
+    return (React__default.createElement(StyledLeadGenThankYou, { className: className, style: style },
+        React__default.createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
+        React__default.createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
+        React__default.createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
+        !!buttonText && showButton && (React__default.createElement(Button$1, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
+};
+
+const StyledLeadGenSubscriptionBoxBody = styled.div `
+  margin-top: 16px;
+  .leadgen-btn {
+    margin-top: 16px;
+  }
+`;
+const StyledLeadGenSubscriptionBoxHeaderImage = styled.div `
+  margin-top: 3px;
+  margin-right: 20px;
+  width: 44px;
+  height: 44px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fix: contain;
+    onject-position: center;
+  }
+
+  :has(img[src='']) {
+    display: none;
+  }
+`;
+const StyledLeadGenSubscriptionBoxHeader = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  .leadgen-title {
+    margin-bottom: 0;
+    flex: 1;
+    min-width: 0;
+    color: ${theme.colors.gray900};
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+    letter-spacing: -0.8px;
+  }
+`;
+const StyledLeadGenSubscriptionBox = styled.div `
+  padding: 16px;
+  border: 1px solid ${theme.colors.neutral100};
+  border-radius: 12px;
+  margin-inline: auto;
+  .leadgen-form_inputs {
+    .leadgen-form_input {
+      width: 100%;
+    }
+  }
+
+  .leadgen-form_input {
+    .mantine-Input-wrapper {
+      max-height: 56px;
+    }
+  }
+
+  ${MediaQueries.mbUp} {
+    .leadgen-subscription_box_body {
+      display: flex;
+      > form {
+        flex: 1;
+        min-width: 0;
+
+        .leadgen-form_inputs {
+          .leadgen-form_input {
+            width: calc(50% - 4px);
+          }
+        }
+      }
+
+      .leadgen-btn {
+        margin-top: 0;
+        margin-left: 8px;
+        width: auto;
+        min-height: 56px;
+      }
+    }
+  }
+
+  ${MediaQueries.smbDown} {
+    &[data-type='subscription_box_A'] {
+      border-inline: 0;
+      border-radius: 0;
+      margin-inline: -16px;
+      box-shadow: 0px 0px 1px 0px #0000000a/0px 0px 2px 0px #0000000f/0px 4px
+        8px 0px #0000000a;
+    }
+  }
+`;
+const StyledLeadGenSubscriptionBoxA = styled.div `
+  .leadgen-form_input {
+    --phone-select: 45px;
+    .PhoneInput {
+      --phone-select: 45px;
+      .PhoneInputCountry {
+        margin-top: 1px;
+        pointer-events: none;
+        .PhoneInputCountryIconImg,
+        .PhoneInputArrowContainer {
+          display: none;
+        }
+      }
+    }
+  }
+`;
+
+const PhoneInput = forwardRef((props, ref) => {
+    const { defaultCountry, id: idProps, name, placeholder, label, labelElement, labelProps, description, descriptionProps, withAsterisk, inputMode, inputContainer, inputWrapperOrder, error, className, classNames, style, styles } = props, restProps = __rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
+    const id = idProps || v1() + name;
+    return (React__default.createElement(Input$1.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
+        React__default.createElement("div", { className: "mantine-Input-wrapper" },
+            React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
+});
+
+const formatLeadGenFormValue = (values, blocks) => {
+    const newValues = {};
+    for (const block of blocks) {
+        const { data } = block || {};
+        const { value: fieldName } = data || {};
+        if (fieldName in values) {
+            newValues[fieldName] = values[fieldName];
+        }
+    }
+    return newValues;
+};
+
+const StyledLeadGenFormInner = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  .leadgen-form_input {
+    width: calc(50% - 4px);
+  }
+
+  .leadgen-form_input_checkbox {
+    width: 100%;
+  }
+`;
+
+const cssInputNotShrink$1 = css `
+  height: 100% !important;
+  min-height: calc(var(--container-height, 56px) * 22 / 56);
+  color: ${theme.colors.gray800};
+  font-size: var(--input, 16px);
+  line-height: calc(var(--container-height, 56px) * 22 / 56);
+  border: none !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+
+  ::placeholder {
+    color: ${theme.colors.gray400};
+  }
+`;
+const cssInputShrink$1 = css `
+  height: auto !important;
+  cursor: text;
+  opacity: 1;
+  transition: 0.1s ease-in-out all;
+`;
+const cssLabelNotShrink$1 = css `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  left: var(--space-x, 16px);
+  color: ${theme.colors.gray400};
+  font-size: var(--label-not-shrink, 16px);
+  font-weight: 400;
+  line-height: calc(var(--container-height, 56px) * 18 / 56);
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: 0.125s ease-in all;
+`;
+const cssLabelShrink$1 = css `
+  color: ${theme.colors.gray600};
+  font-weight: 600;
+  font-size: var(--label-shrink, 12px);
+  top: calc(var(--container-height) * 7 / 56);
+  transform: none;
+  transition: 0.125s ease-out all;
+`;
+const cssWrapperInputNotShrink$1 = css `
+  min-height: var(--container-height, 56px);
+  display: flex;
+  align-items: flex-end;
+  border: 1px solid ${theme.colors.gray200};
+  border-radius: 8px;
+  background-color: #fff;
+  padding-inline: var(--space-x, 16px);
+  padding-block: var(--space-y-not-shrink, 16px);
+  cursor: pointer;
+  pointer-events: none;
+
+  &:has(.mantine-Input-rightSection) {
+    padding-right: var(--container-height, 56px);
+  }
+
+  .mantine-Input-icon {
+    display: none;
+  }
+
+  .mantine-NumberInput-control {
+    border-color: ${theme.colors.gray200};
+  }
+`;
+const cssWrapperInputShrink$1 = css `
+  height: auto;
+  min-height: var(--container-height, 56px);
+  padding-block: var(--space-y-shrink, 7px);
+  cursor: text;
+  pointer-events: auto;
+`;
+const cssInputWrapperError$1 = css `
+  color: ${theme.colors.red800};
+  font-size: 12px;
+  line-height: 1.5;
+`;
+const StyledTextFieldContainer$1 = styled.div `
+  --space-x: 16px;
+  --space-y-not-shrink: 16px;
+  --space-y-shrink: 7px;
+  --container-height: 56px;
+  --label-not-shrink: 16px;
+  --label-shrink: 12px;
+  --input: 16px;
+
+  position: relative;
+  min-width: 100px;
+  max-width: 100%;
+  display: inline-block;
+
+  .textField_wrapper {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .mantine-InputWrapper-root {
+    &[data-invalid='true'] {
+      .mantine-Input-wrapper {
+        border-color: ${theme.colors.red400};
+      }
+    }
+
+    .mantine-Input-wrapper {
+      &:has([data-invalid]) {
+        border-color: ${theme.colors.red400};
+      }
+    }
+
+    .mantine-InputWrapper-error {
+      font-size: 12px !important;
+    }
+  }
+
+  .mantine-InputWrapper-label {
+    ${cssLabelNotShrink$1}
+  }
+
+  .mantine-Input-wrapper {
+    ${cssWrapperInputNotShrink$1}
+
+    + .mantine-Popover-dropdown[data-position="bottom-start"] {
+      left: 0 !important;
+    }
+    + .mantine-Popover-dropdown[data-position='top-start'] {
+      top: unset !important;
+      left: 0 !important;
+      bottom: 100% !important;
+    }
+  }
+
+  .mantine-Input-input {
+    ${cssInputNotShrink$1}
+  }
+
+  &.textField_shrink,
+  &:focus-within {
+    .mantine-InputWrapper-label {
+      ${cssLabelShrink$1}
+    }
+
+    .mantine-Input-wrapper {
+      ${cssWrapperInputShrink$1}
+      &.mantine-Select-wrapper {
+        .mantine-Select-rightSection {
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .mantine-Input-input {
+      ${cssInputShrink$1}
+    }
+
+    &:has(.PhoneInput) {
+      .mantine-InputWrapper-label {
+        left: var(--space-x, 16px);
+      }
+      .PhoneInput {
+        .PhoneInputInput {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .PhoneInput {
+    --phone-select: 75px;
+    --phone-input-space-x: 8px;
+    width: 100%;
+    opacity: 1;
+    border: none;
+    .PhoneInputCountry {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: var(--phone-select, 75px);
+    }
+    .PhoneInputInput {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.5;
+      outline: none !important;
+      border: none;
+      box-shadow: none;
+      padding: 0 var(--phone-input-space-x, 8px);
+      opacity: 0;
+      color: ${theme.colors.gray800} !important;
+      :focus {
+        color: ${theme.colors.gray800} !important;
+      }
+    }
+  }
+
+  &:has(.PhoneInput) {
+    .mantine-InputWrapper-label {
+      left: calc(
+        var(--space-x, 16px) + var(--phone-select, 75px) +
+          var(--phone-input-space-x, 8px)
+      );
+    }
+  }
+`;
+const StyledChoiceFieldContainer$1 = styled.div `
+  &.leadgen-form_checkbox,
+  &.leadgen-form_radio {
+    width: 100%;
+  }
+
+  &.leadgen-form_dropdown {
+    width: calc(50% - 12px);
+  }
+
+  .mantine-InputWrapper-root {
+    display: block;
+    .mantine-InputWrapper-error {
+      font-size: 12px !important;
+    }
+  }
+
+  .mantine-InputWrapper-label {
+    margin-bottom: 0.5rem;
+    color: ${theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .mantine-Radio-root,
+  .mantine-Checkbox-root {
+    gap: 8px;
+    min-width: calc(50% - 4px);
+
+    input[type='radio'],
+    input[type='checkbox'] {
+      border-color: ${theme.colors.gray600};
+      width: 18px;
+      height: 18px;
+    }
+    input[type='checkbox'] {
+      border-radius: 4px;
+    }
+
+    &[data-checked='true'] {
+      input[type='radio'],
+      input[type='checkbox'] {
+        border-color: ${theme.colors.primary600};
+        + svg {
+          color: ${theme.colors.primary600};
+        }
+      }
+
+      input[type='radio'] {
+        background-color: white;
+      }
+    }
+
+    .mantine-Checkbox-input {
+      &:checked {
+        border-color: ${theme.colors.primary600};
+      }
+    }
+  }
+
+  .mantine-Radio-inner,
+  .mantine-Checkbox-inner {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mantine-Radio-body,
+  .mantine-Checkbox-body {
+    display: flex;
+    align-items: center;
+  }
+
+  .mantine-Radio-label,
+  .mantine-Checkbox-label {
+    padding-left: 8px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    line-height: 1.4;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-choiceContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .mantine-InputWrapper-error {
+    ${cssInputWrapperError$1}
+  }
+`;
+
+const TextField$1 = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+    const containerRef = useClickOutside(() => {
+        if (shrinkProps) {
+            return;
+        }
+        setShrink(false);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
+    });
+    const [shrink, setShrink] = useState(shrinkProps);
+    const onClick = useCallback((e) => {
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        if (shrink) {
+            return;
+        }
+        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus();
+            setTimeout(() => {
+                $focusEl.scrollIntoView({
+                    behavior: 'auto',
+                    block: 'center',
+                    inline: 'start',
+                });
+            }, 100);
+        }
+    }, [shrink]);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(StyledTextFieldContainer$1, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
+        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+};
+const ChoiceField$1 = (props) => {
+    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+    return (React__default.createElement(StyledChoiceFieldContainer$1, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
+};
+
+const libraries = ['places'];
+const GoogleLocationBlock = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = useState(null);
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = useCallback((item) => {
+        /** For sure get value */
+        setValue(item.value);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
+            return (React__default.createElement(React__default.Fragment, null,
+                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
+};
+
+const LeadGenForm = forwardRef((props, ref) => {
+    const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
+    const formRef = useRef(null);
+    const form = formProps || useForm({ initialValues, validate });
+    const middlewareFinish = useCallback((values, event) => {
+        /** Set `touched` all values for validation when submiting */
+        form.setTouched(blocks.reduce((touched, { data }) => {
+            touched[data.value] = true;
+            return touched;
+        }, {}));
+        /** Wait for `touched` state and then submit */
+        setTimeout(() => {
+            const { hasErrors } = form.validate();
+            if (hasErrors) {
+                return;
+            }
+            onFinish === null || onFinish === void 0 ? void 0 : onFinish(formatLeadGenFormValue(values, blocks), event);
+        }, 100);
+    }, [form, blocks]);
+    const middlewareFinishFailed = useCallback((errors, values, events) => {
+        if (scrollToErrorField && errors) {
+            const firstErrorKey = Object.keys(errors)[0];
+            const firstErrorElement = document.querySelector(`[name="${firstErrorKey}"]`);
+            if (firstErrorElement && (firstErrorElement === null || firstErrorElement === void 0 ? void 0 : firstErrorElement.focus)) {
+                setTimeout(() => {
+                    firstErrorElement === null || firstErrorElement === void 0 ? void 0 : firstErrorElement.focus();
+                    firstErrorElement.scrollIntoView({
+                        behavior: 'auto',
+                        block: 'center',
+                        inline: 'center',
+                    });
+                }, 100);
+            }
+        }
+        onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errors, values, events);
+    }, [scrollToErrorField]);
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            if (!window.intlTelInputUtils) {
+                yield require('intl-tel-input/build/js/utils');
+            }
+        }))();
+    }, []);
+    useImperativeHandle(ref, () => (Object.assign(Object.assign({}, form), { submit: () => {
+            formRef.current.requestSubmit();
+        } })), [form, formRef]);
+    if (!blocks || !blocks.length) {
+        return null;
+    }
+    return (React__default.createElement("form", { ref: formRef, onSubmit: form.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
+        React__default.createElement(StyledLeadGenFormInner, { className: "leadgen-form_inputs" }, blocks.map((block, idx) => {
+            const { id, name: blockName, data } = block;
+            const { placeholder, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
+            const formInputProps = form.getInputProps(name);
+            const { value, error } = formInputProps;
+            const reactKey = `${id}-${idx}`;
+            switch (blockName) {
+                case LEADGEN_BLOCK.TextBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.NumberBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.EmailBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.PhoneOtpBlock:
+                case LEADGEN_BLOCK.WhatsappOtpBlock:
+                case LEADGEN_BLOCK.ZaloOtpBlock:
+                case LEADGEN_BLOCK.PhoneBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.LocationBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.DateBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.DropdownBlock:
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
+                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
+                                value: l.value,
+                                label: l.placeholder,
+                            })) }, formInputProps))));
+                case LEADGEN_BLOCK.CheckboxBlock: {
+                    const formInputCheckboxProps = form.getInputProps(name, {
+                        type: 'checkbox',
+                    });
+                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                        isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
+                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flexWrap: 'wrap',
+                                gap: 8,
+                            }, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                                return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
+                            } }, formInputCheckboxProps), listQuestion.map((l, _idx) => (React__default.createElement(Checkbox$1, { name: name, key: _idx, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                }
+                case LEADGEN_BLOCK.RadioBlock: {
+                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                        isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
+                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                                return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
+                            } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                }
+                case LEADGEN_BLOCK.TncBlock:
+                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                        React__default.createElement(Input$1.Wrapper, { error: error },
+                            React__default.createElement(Checkbox$1, Object.assign({ value: value, name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, formInputProps)))));
+                default: {
+                    return null;
+                }
+            }
+        }))));
+});
+
+const LEADGEN_ORDER_INPUT_WRAPPER = ['label', 'input', 'description', 'error'];
+
+const LeadGenSubscriptionBoxA = (props) => {
+    const { loading, image, title, submitText, locale, blocks, form, rules, onFinish, } = props;
+    const formRef = useRef();
+    const imageComp = useMemo(() => {
+        if (!image) {
+            return null;
+        }
+        return (React__default.createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
+            React__default.createElement("img", { src: image, alt: "" })));
+    }, [image]);
+    const titleComp = useMemo(() => {
+        if (typeof title === 'string') {
+            return (React__default.createElement("p", { className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
+        }
+        return React__default.createElement("p", { className: "leadgen-title" }, title);
+    }, [title]);
+    return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
+        React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
+            imageComp,
+            titleComp),
+        React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
+            React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
+            React__default.createElement(Button$1, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => {
+                    formRef.current.submit();
+                }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, submitText))));
+};
+
+const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, categoryId, }) => {
+    var _a, _b, _c;
+    const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
+    const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
+    const { submitBlock } = actionBlocks || {};
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, submitSubscriptionBox, impression, onFinish, } = useLeadGenContext();
+    const { t } = useTranslations();
+    const { action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const refContainer = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [showThankyou, setShowThankyou] = useState(false);
+    const validatingEmailRef = useRef(false);
+    const validatingPhoneRef = useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        campaignId: campaign_id,
+        campaign_subot_id,
+        validatingEmailRef,
+        validatingPhoneRef,
+        userInfo,
+    });
+    const subscription_title = useMemo(() => {
+        var _a, _b;
+        return subscriptionTitle ||
+            ((_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value) ||
+            t('leadgen.message.title.default');
+    }, [subscriptionTitle, (_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value]);
+    const { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
+    const intersectionObserverCallback = useCallback((entries) => {
+        entries.forEach((entry) => {
+            const { isIntersecting, target } = entry;
+            if (!showThankyou &&
+                isIntersecting &&
+                target === refContainer.current) {
+                impression();
+            }
+        });
+    }, [impression, showThankyou]);
+    const IObserver = new IntersectionObserver(intersectionObserverCallback);
+    const middlewareOnSubmit = useCallback((values) => __awaiter(void 0, void 0, void 0, function* () {
+        const newValues = {
+            subscription_title,
+        };
+        const ssoValues = {
+            sso_user_id: undefined,
+            sso_uuid: undefined,
+            sso_verified_profile: undefined,
+        };
+        const valueKeys = Object.keys(values);
+        for (const key of valueKeys) {
+            const isPhoneField = leadGenFieldNamePhone(listBlockAdded).some((k) => k === key);
+            if (isPhoneField) {
+                const phone = parsePhoneNumber(values[key]);
+                if (phone.isValid()) {
+                    /** Seperate `area_code` and `phone_number` for BE */
+                    newValues['area_code'] = `+${phone.countryCallingCode}`;
+                    newValues['phone_number'] = phone.nationalNumber;
+                    /** Only case login has this update */
+                    if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid)) {
+                        const userInfoPhone = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code) + (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone);
+                        ssoValues['sso_verified_profile'] =
+                            phone.number === userInfoPhone ? 1 : 0;
+                        ssoValues['sso_user_id'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
+                        ssoValues['sso_uuid'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid;
+                        LeadLog('** LeadGen SB userInfoPhone : ', userInfoPhone);
+                        LeadLog('** LeadGen SB userInfoPhoneInput : ', phone.number);
+                    }
+                }
+                continue;
+            }
+            newValues[key] = values[key];
+        }
+        setLoading(true);
+        try {
+            const reqValues = Object.assign(Object.assign({}, newValues), ssoValues);
+            const { _data } = (yield submitSubscriptionBox(reqValues)) || {};
+            const { model } = _data || {};
+            if (model && (model === null || model === void 0 ? void 0 : model.id)) {
+                setShowThankyou(true);
+                const metaValues = {
+                    blocks: listBlockAdded || [],
+                    isUpdateSso: false,
+                };
+                /**
+                 *  https://hhgdev.atlassian.net/browse/EL-468
+                 * 	This feature is just using in Subscription Box
+                 */
+                if (newValues === null || newValues === void 0 ? void 0 : newValues.name) {
+                    const { _data: ssoData, code: ssoErrorCode } = yield Service.postUserInfoFromLeadGen({ name: newValues === null || newValues === void 0 ? void 0 : newValues.name });
+                    if (ssoErrorCode && !ssoData) {
+                        return;
+                    }
+                    metaValues.isUpdateSso = true;
+                    onFinish === null || onFinish === void 0 ? void 0 : onFinish(reqValues, metaValues);
+                    return;
+                }
+                onFinish === null || onFinish === void 0 ? void 0 : onFinish(reqValues, metaValues);
+            }
+        }
+        catch (error) {
+            LeadLog('** LeadGen SubscriptionBox error : ', error);
+            pushNotifications({
+                message: t('leadgen.message.error.default'),
+                type: 'danger',
+            });
+        }
+        setLoading(false);
+    }), [
+        subscription_title,
+        listBlockAdded,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.id,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
+    ]);
+    useEffect(() => {
+        if (refContainer.current) {
+            IObserver.observe(refContainer.current);
+        }
+        return () => {
+            IObserver.disconnect();
+        };
+    }, [categoryId]);
+    return (React__default.createElement("div", { ref: refContainer },
+        React__default.createElement(StyledLeadGenSubscriptionBox, { "data-type": "subscription_box_A" },
+            showThankyou && (React__default.createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiLeadUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
+            !showThankyou && (React__default.createElement(LeadGenSubscriptionBoxA, { loading: loading, image: subscriptionIcon || image, title: subscription_title, submitText: (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value, blocks: listBlockAdded, locale: locale, form: form, rules: validateObj, onFinish: middlewareOnSubmit })))));
+};
+const LeadGenSubscriptionBox$1 = memo(LeadGenSubscriptionBoxWithoutMemo);
+
+const Container = () => {
+    const context = useContext(LeadGenContext);
+    const { campaign_code, locale, siteId, siteDomain, userInfo, forceCampaign } = context;
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code }));
+};
+Container.displayName = 'LeadGenSubscriptionBox';
+const LeadGenSubscriptionBoxContainer = (props) => {
+    const { apiUrl, apiSubotUrl } = props;
+    return (React__default.createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
+        React__default.createElement(Container, null)));
+};
+const LeadGenSubscriptionBox = LeadGenSubscriptionBoxContainer;
+
+const useImageSize = (src) => {
+    const [width, setWidth] = useState(16);
+    const [height, setHeight] = useState(9);
+    const [loaded, setLoaded] = useState(false);
+    // load src image to get its width and height
+    useEffect(() => {
+        setLoaded(false);
+        if (src) {
+            const img = new Image();
+            img.addEventListener('load', () => {
+                setWidth(img.naturalWidth);
+                setHeight(img.naturalHeight);
+                setLoaded(true);
+            });
+            img.addEventListener('error', () => {
+                setWidth(16);
+                setHeight(9);
+                setLoaded(true);
+            });
+            img.src = src;
+        }
+        else {
+            setWidth(16);
+            setHeight(9);
+            setLoaded(true);
+        }
+    }, [src]);
+    return {
+        loaded,
+        width,
+        height,
+    };
+};
+
+const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
+    React__default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: svgClassName },
+        React__default.createElement("path", { d: "M9.99981 10.8432L14.0583 14.9017C14.1691 15.0125 14.3083 15.0691 14.476 15.0717C14.6437 15.0743 14.7854 15.0176 14.9013 14.9017C15.0172 14.7858 15.0752 14.6453 15.0752 14.4802C15.0752 14.3151 15.0172 14.1746 14.9013 14.0587L10.8429 10.0002L14.9013 5.9417C15.0121 5.83094 15.0688 5.69172 15.0713 5.52402C15.0739 5.35634 15.0172 5.21456 14.9013 5.09866C14.7854 4.98276 14.6449 4.9248 14.4798 4.9248C14.3147 4.9248 14.1742 4.98276 14.0583 5.09866L9.99981 9.15712L5.94133 5.09866C5.83057 4.98789 5.69135 4.93122 5.52365 4.92866C5.35598 4.92609 5.21419 4.98276 5.09829 5.09866C4.98239 5.21456 4.92444 5.35506 4.92444 5.52018C4.92444 5.6853 4.98239 5.82581 5.09829 5.9417L9.15675 10.0002L5.09829 14.0587C4.98752 14.1694 4.93085 14.3087 4.9283 14.4763C4.92572 14.644 4.98239 14.7858 5.09829 14.9017C5.21419 15.0176 5.3547 15.0756 5.51982 15.0756C5.68493 15.0756 5.82544 15.0176 5.94133 14.9017L9.99981 10.8432Z" }))));
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// imageMobile: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
+    if (!imageMobileLoaded || !imageDestkopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
+        React__default.createElement("div", { className: "le-center-tab-popup" },
+            React__default.createElement("div", { style: { position: 'relative' } },
+                React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    isVideo(imageMobile) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
+                        React__default.createElement("source", { src: imageMobile }))) : (React__default.createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } })),
+                    isVideo(imageDestkop) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
+                        React__default.createElement("source", { src: imageDestkop }))) : (React__default.createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
+                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
+                        } }))),
+                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
+};
+
+// title: titleText
+// titleAlign: textBlocks.titleBlock.data.align
+// subtitle: textBlocks.subtitleBlock.data.value
+// subtitleAlign: textBlocks.subtitleBlock.data.align
+// url: actionBlocks.linkButtonBlock.data.url
+// urlText: actionBlocks.linkButtonBlock.data.value
+// newTab: actionBlocks.linkButtonBlock.data.newtab
+// imageMobile: campaignShow.image
+// imageDesktop: campaignShow.image_desktop
+const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, subtitleAlign, newTab, imageDesktop, imageMobile, onClose, onOtherSubmit, }) => {
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
+    if (!imageMobileLoaded || !imageDesktopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper lead-floating-wrapper", "data-popup-url": location.pathname, "data-popup-type": "floating" },
+        React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "le-floating-desktop" },
+                React__default.createElement("div", { className: "le-floating-desktop-wrap", style: { position: 'relative', background: '#fff' } },
+                    imageDesktop ? (React__default.createElement("div", null,
+                        React__default.createElement("img", { style: {
+                                maxWidth: 120,
+                                borderTopLeftRadius: 5,
+                                borderBottomLeftRadius: 5,
+                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                            }, src: imageDesktop }))) : null,
+                    React__default.createElement("div", { style: { padding: 20 } },
+                        React__default.createElement("div", { className: `le-floating-desktop-title le-text-align-${titleAlign}` }, title),
+                        React__default.createElement("div", { className: `le-floating-desktop-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                    React__default.createElement("a", { target: newTab ? 'blank' : '_parent', style: { marginLeft: 35, textDecoration: 'none' }, href: url },
+                        React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText)),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))),
+        React__default.createElement("aside", { className: "le-only-mobile" },
+            React__default.createElement("div", { className: "le-floating-mobile" },
+                React__default.createElement("div", { className: "le-floating-mobile-wrap", style: { position: 'relative', background: '#fff' } },
+                    React__default.createElement("aside", { style: { display: 'flex', justifyContent: 'space-between' } },
+                        React__default.createElement("div", null,
+                            React__default.createElement("div", { className: `le-floating-mobile-title le-text-align-${titleAlign}` }, title),
+                            React__default.createElement("div", { className: `le-floating-mobile-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                        imageMobile ? (React__default.createElement("div", null,
+                            React__default.createElement("img", { style: {
+                                    marginLeft: 15,
+                                    marginTop: 4,
+                                    maxWidth: 100,
+                                    aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                                }, src: imageMobile }))) : null),
+                    React__default.createElement("div", { style: { textAlign: 'center', marginTop: 10 } },
+                        React__default.createElement("a", { target: newTab ? 'blank' : '_parent', href: url, style: { textDecoration: 'none' } },
+                            React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText))),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+};
+
+const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
+    const { primaryColor } = useContext(LeadGenContext$1);
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default.createElement("div", { className: "lead-modal__thank-you leadgen-inner_thankyou" },
+        React__default.createElement("div", { style: { width: '100%' } },
+            React__default.createElement("img", { src: image, style: {
+                    maxHeight: 162,
+                    objectFit: 'cover',
+                    aspectRatio: `${imageWidth}/${imageHeight}`,
+                }, loading: "lazy" }),
+            title && (React__default.createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
+            subtitle && (React__default.createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
+                const isShowBr = idx < list.length - 1;
+                return (React__default.createElement(React__default.Fragment, null,
+                    text,
+                    isShowBr && React__default.createElement("br", null)));
+            }))),
             linkText && (React__default.createElement("div", null,
                 React__default.createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
                     React__default.createElement(Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
@@ -1614,262 +3362,46 @@ const InlineLayout = ({ content, inlinePosition, }) => {
                     return target.parentElement.querySelector('.inline-lead-wrapper');
                 }
             }
-        }
-    }, [inlinePosition]);
-    if (!inlinePosition || !target)
-        return null;
-    return createPortal(content, target);
-};
-
-const SideBarLayout = ({ content }) => {
-    const targets = useMemo(() => {
-        const targetDoms = Array.from(document.querySelectorAll('.hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar'));
-        targetDoms.forEach((dom) => {
-            if (dom.querySelector('.sidebar-lead-modal-wrapper'))
-                return;
-            const wrapper = document.createElement('div');
-            wrapper.classList.add('sidebar-lead-modal-wrapper');
-            dom.prepend(wrapper);
-        });
-        return targetDoms.map((d) => d.querySelector('.sidebar-lead-modal-wrapper'));
-    }, []);
-    return (React__default.createElement(React__default.Fragment, null, targets.map((target) => createPortal(content, getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
-};
-
-const EmptyIcon = (props) => {
-    const { className, style } = props;
-    return (React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
-        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
-        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
-};
-
-const EmptyComponent = ({ onClose, onContinue, }) => {
-    const { t } = useTranslations();
-    return (React__default.createElement("div", { className: "leadgen-empty" },
-        React__default.createElement("div", { className: "leadgen-empty_body" },
-            React__default.createElement("div", { className: "leadgen-empty_wrapper" },
-                React__default.createElement(EmptyIcon, { className: "leadgen-empty_image" }),
-                React__default.createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
-        React__default.createElement("div", { className: "leadgen-empty_footer" },
-            React__default.createElement(Button$1, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
-            React__default.createElement(Button$1, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
-};
-
-const libraries = ['places'];
-const GoogleLocationBlock = (props) => {
-    var _a;
-    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
-    const [LoadScript, setLoadScript] = useState(null);
-    const [value, setValue] = useState(defaultValue || valueProps);
-    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const onChangeAutocomplete = useCallback((s) => {
-        setValue(s);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
-    }, []);
-    const onClickItem = useCallback((item) => {
-        /** For sure get value */
-        setValue(item.value);
-        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
-    }, [onChangeProps, predictions]);
-    useEffect(() => {
-        setValue(valueProps);
-    }, [valueProps]);
-    useEffect(() => {
-        var _a, _b, _c;
-        // only load extra google script when not yet loaded
-        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
-            import('@react-google-maps/api').then((m) => {
-                setLoadScript(() => m.LoadScript);
-            });
-        }
-    }, []);
-    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
-            return { value: pred.description, label: pred.description };
-        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
-            return (React__default.createElement(React__default.Fragment, null,
-                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
-                children));
-        } }, restProps)));
-};
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const customParseFormat = require('dayjs/plugin/customParseFormat');
-dayjs.extend(customParseFormat);
-// You can give context variables any name
-const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
-const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
-    const { t } = useTranslations();
-    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
-    const validateObj = useMemo(() => {
-        const InputBlocks = [
-            'TextBlock',
-            'NumberBlock',
-            'EmailBlock',
-            'PhoneBlock',
-            'DateBlock',
-            'CheckboxBlock',
-            'RadioBlock',
-            'DropdownBlock',
-            'PhoneOtpBlock',
-            'WhatsappOtpBlock',
-            'ZaloOtpBlock',
-            'LocationBlock',
-            'TncBlock',
-        ];
-        // ALL are required and can skip if not touched yet
-        const withSharedCheck = (name, cb, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        block) => {
-            return (value) => {
-                var _a;
-                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
-                if (!formRef.current.isTouched(name))
-                    return;
-                if ((typeof value === 'string' && value.trim() === '') ||
-                    typeof value === 'undefined' ||
-                    (Array.isArray(value) && value.length === 0)) {
-                    return isBLockRequired
-                        ? t('validator.required')
-                        : cb === null || cb === void 0 ? void 0 : cb(value);
-                }
-                return cb === null || cb === void 0 ? void 0 : cb(value);
-            };
-        };
-        return listBlockAdded
-            .filter((b) => InputBlocks.includes(b.name))
-            .reduce((r, b) => {
-            const { name: fieldType, data } = b || {};
-            const { value: fieldName, required } = data || {};
-            const isRequired = required !== null && required !== void 0 ? required : true;
-            if (fieldType === 'NumberBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (value && isNaN(Number(value))) {
-                            return t('validator.number');
-                        }
-                    }, b) });
-            }
-            else if (fieldType === 'EmailBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-                            return t('validator.email');
-                        }
-                        if (!value)
-                            return;
-                        validatingEmailRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(fieldName, 'Validating...');
-                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                email: value,
-                            })
-                                .then((tKey) => {
-                                if (tKey) {
-                                    formRef.current.setFieldError(fieldName, t(tKey));
-                                }
-                                else {
-                                    formRef.current.clearFieldError(fieldName);
-                                }
-                                validatingEmailRef.current = false;
-                            })
-                                .catch((e) => {
-                                console.error(e);
-                                formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
-                                validatingEmailRef.current = false;
-                            });
-                        }, 200);
-                    }, b) });
-            }
-            else if (fieldType === 'PhoneBlock' ||
-                fieldType === 'PhoneOtpBlock' ||
-                fieldType === 'ZaloOtpBlock' ||
-                fieldType === 'WhatsappOtpBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (value &&
-                            window.intlTelInputUtils &&
-                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
-                            return t('validator.phone');
-                        }
-                        if (!value)
-                            return;
-                        validatingPhoneRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(fieldName, 'Validating...');
-                            if (b.data.singleSubmission) {
-                                checkUsedPhoneOnlyWithCache(campaignId, value)
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(fieldName, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(fieldName);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((err) => {
-                                    console.error(err);
-                                    formRef.current.setFieldError(fieldName, err.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                            else {
-                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                    phone: value,
-                                })
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(fieldName, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(fieldName);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((e) => {
-                                    console.error(e);
-                                    formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                        }, 200);
-                    }, b) });
-            }
-            else if (fieldType === 'DateBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (!isRequired && !value) {
-                            return;
-                        }
-                        const errMsg = t('validator.dateInvalid');
-                        const dayInJS = typeof value === 'string'
-                            ? dayjs(value, format, true)
-                            : dayjs(value);
-                        if (!dayInJS.isValid()) {
-                            return errMsg;
-                        }
-                    }, b) });
-            }
-            else if (fieldType === 'TncBlock') {
-                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
-                        if (isRequired && !value) {
-                            return t('validator.required');
-                        }
-                    }, b) });
-            }
-            else {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, undefined, b) });
-            }
-        }, {});
-    }, [listBlockAdded.map((b) => b.name).join(','), format]);
-    const form = useLeadForm({
-        validateInputOnChange: true,
-        validateInputOnBlur: true,
-        clearInputErrorOnChange: true,
-        validate: validateObj,
-        initialValues,
-    });
-    const formRef = useRef(form);
-    formRef.current = form;
-    return { form, validateObj };
+        }
+    }, [inlinePosition]);
+    if (!inlinePosition || !target)
+        return null;
+    return createPortal(content, target);
+};
+
+const SideBarLayout = ({ content }) => {
+    const targets = useMemo(() => {
+        const targetDoms = Array.from(document.querySelectorAll('.hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar'));
+        targetDoms.forEach((dom) => {
+            if (dom.querySelector('.sidebar-lead-modal-wrapper'))
+                return;
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('sidebar-lead-modal-wrapper');
+            dom.prepend(wrapper);
+        });
+        return targetDoms.map((d) => d.querySelector('.sidebar-lead-modal-wrapper'));
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null, targets.map((target) => createPortal(content, getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
+};
+
+const EmptyIcon = (props) => {
+    const { className, style } = props;
+    return (React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
+        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
+        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
+        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
+};
+
+const EmptyComponent = ({ onClose, onContinue, }) => {
+    const { t } = useTranslations();
+    return (React__default.createElement("div", { className: "leadgen-empty" },
+        React__default.createElement("div", { className: "leadgen-empty_body" },
+            React__default.createElement("div", { className: "leadgen-empty_wrapper" },
+                React__default.createElement(EmptyIcon, { className: "leadgen-empty_image" }),
+                React__default.createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
+        React__default.createElement("div", { className: "leadgen-empty_footer" },
+            React__default.createElement(Button$1, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
+            React__default.createElement(Button$1, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
 };
 
 const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
@@ -2198,11 +3730,13 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            $focusEl.scrollIntoView({
-                behavior: 'auto',
-                block: 'center',
-                inline: 'start',
-            });
+            setTimeout(() => {
+                $focusEl.scrollIntoView({
+                    behavior: 'auto',
+                    block: 'center',
+                    inline: 'start',
+                });
+            }, 100);
         }
     }, [shrink]);
     useEffect(() => {
@@ -2402,832 +3936,488 @@ const FormContainer = (_a) => {
                 header,
                 HeaderContent,
                 React__default.createElement("div", { className: "leadgen-form_body" }, children))),
-            !header && (React__default.createElement(React__default.Fragment, null,
-                HeaderContent,
-                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
-            React__default.createElement("div", { className: "leadgen-form_footer" }, footer))));
-};
-
-const StyleHeaderImage = styled.div `
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  padding-top: ${({ paddingTop }) => paddingTop}%;
-  .leadgen-header_image_feature {
-    position: absolute;
-    inset: 0;
-    min-width: 100%;
-    min-height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    object-position: center;
-  }
-`;
-const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
-    if (!src) {
-        return null;
-    }
-    return (React__default.createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: clsx(className, 'leadgen-header_image'), style: style }, isVideo(src) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default.createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
-};
-
-const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
-    const { primaryColor } = useContext(LeadGenContext);
-    const { t } = useTranslations();
-    const phone = otpData.phone;
-    const otpType = otpData.type;
-    const [otp, setOtp] = useState('');
-    const [isDirty, setIsDirty] = useState(false);
-    const [resendTimer, setResendTimer] = useState(autoSendWhenOpen ? 0 : 60);
-    const inputRef = useRef(null);
-    const [errorMsg, setErrorMsg] = useState();
-    const [displayPhone, setDisplayPhone] = useState('');
-    const formatPhoneNumberIntlRef = useRef();
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            if (!formatPhoneNumberIntlRef.current) {
-                const res = yield import('react-phone-number-input');
-                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
-            }
-            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
-        }))();
-    }, [phone]);
-    const sendOtp = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!phone) {
-            return;
-        }
-        const res = yield Service.sendSMSOtpLead({
-            phone,
-            type: otpType,
-        });
-        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
-        if (respMessage === 'Send sms successfully' ||
-            respMessage === 'Send WhatsApp successfully' ||
-            respMessage === 'Send Zalo successfully') {
-            setResendTimer(60);
-            setTimeout(() => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                    inputRef.current.scrollIntoView({ block: 'center' });
-                }
-            }, 100);
-        }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
-        }
-        else {
-            setErrorMsg(respMessage || 'Something went wrong!');
-            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
-            // setStatusVerifyOTP('idle')
-            // pushNotifications({
-            //   title: respMessage || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-    });
-    const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (!phone || !otp) {
-            return;
-        }
-        setIsSubmitLoading(true);
-        const res = yield Service.verifyOtpLead({
-            phone,
-            otp,
-            type: otpType,
-        });
-        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
-        if (respMessage === 'Verify successfully' ||
-            respMessage === 'Verify WhatsApp OTP sucess' ||
-            respMessage === 'Verify Zalo OTP sucess') {
-            onSuccess();
-        }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
-        }
-        else {
-            setErrorMsg(respMessage || 'something Wrong');
-            // setIsShowError(true)
-            // setStatusVerifyOTP('sent')
-            // pushNotifications({
-            //   title: res?._messages[0] || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-        setIsSubmitLoading(false);
-    });
-    useEffect(() => {
-        setTimeout(() => {
-            if (resendTimer > 0) {
-                setResendTimer((r) => r - 1);
-            }
-        }, 1000);
-    }, [resendTimer]);
-    useEffect(() => {
-        if (autoSendWhenOpen && !resendTimer) {
-            sendOtp();
-        }
-    }, []);
-    return (React__default.createElement("form", { onSubmit: (e) => {
-            e.preventDefault();
-            submitOtp();
-        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
-        React__default.createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
-                phone: `<strong>${displayPhone}</strong>`,
-            }), footer: React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Button$1, { type: "submit", size: "lg", variant: "filled", className: `lead-modal__btn leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
-                React__default.createElement(Button$1, { type: "button", size: "lg", variant: "light", className: `lead-modal__btn lead-phone-otp-button leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, onClick: () => {
-                        sendOtp();
-                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
-                    timer: resendTimer ? ` (${resendTimer}s)` : '',
-                }))) },
-            React__default.createElement("div", { className: "leadgen-form_inner" },
-                React__default.createElement(Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
-                    React__default.createElement(OTP, { ref: inputRef, name: '_' + name + '-otp', value: otp, onChange: (v) => {
-                            setIsDirty(true);
-                            setOtp(v.toString());
-                            if (isDirty && !v)
-                                setErrorMsg('OTP is required');
-                            else
-                                setErrorMsg(undefined);
-                        } }))))));
-};
-
-// url: imageBlocks.imageMobile.data.url
-// newTab: imageBlocks.imageMobile.data.newtab
-// image: campaignShow.image
-// imageDestkop: campaignShow.image_desktop
-const LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE = [
-    LEADGEN_LAYOUT.Fullscreen,
-    LEADGEN_LAYOUT.Slider,
-];
-const LEADGEN_LIMIT_LIGHTBOXB = 6;
-const LEADGEN_SHOW_HEADER = [
-    'LightBoxA',
-    'InlineA',
-    LEADGEN_LAYOUT.Sidebar,
-    LEADGEN_LAYOUT.Slider,
-];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
-    var _a, _b;
-    const { primaryColor } = useContext(LeadGenContext);
-    const { isMobile } = useScreenSize();
-    const [open, setOpen] = useState(!!campaignId);
-    const [showOtpPhone, setShowOtpPhone] = useState(null);
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [snap, setSnap] = useState(0.8);
-    const formRef = useRef();
-    const onClose = () => {
-        if (showOtpPhone) {
-            setShowOtpPhone(null);
-        }
-        else {
-            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
-        }
-    };
-    const textBlocks = JSON.parse(extraFields.textBlocks);
-    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
-    const actionBlocks = JSON.parse(extraFields.actionBlocks);
-    const popUpSubmitText = actionBlocks.submitBlock.data.value;
-    const currentPath = location.pathname;
-    const { align: descriptionAlign, value: description } = textBlocks.subtitleBlock.data || {};
-    const { align: titleAlign } = textBlocks.titleBlock.data || {};
-    const isSlider = currentLayout === LEADGEN_LAYOUT.Slider;
-    const isSidebar = currentLayout === LEADGEN_LAYOUT.Sidebar;
-    const isLightBox = currentLayout.includes('LightBox');
-    const isLightBoxA = currentLayout === LEADGEN_LAYOUT.LightBoxA;
-    const isLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB;
-    const isInline = currentLayout.includes('Inline');
-    const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
-    const isInPage = isInline || isSidebar;
-    const isDrawer = isLightBoxB && isMobile;
-    const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
-    const hasForm = isLightBoxA
-        ? listBlockAdded.some((item) => LEADGEN_BLOCK_IN_FORM.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
-        : true;
-    const headerInsideFormContainer = isSlider || isLightBoxA || isFullscreen;
-    const showHeader = !!imageMobile || !!imageDesktop;
-    const onlyHeader = !title && !description;
-    const showButtonClose = !isInline;
-    if (window.innerWidth < 769 &&
-        LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
-        console.log('😎 Not show fullscreen, slider on mobile ');
+            !header && (React__default.createElement(React__default.Fragment, null,
+                HeaderContent,
+                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
+            React__default.createElement("div", { className: "leadgen-form_footer" }, footer))));
+};
+
+const StyleHeaderImage = styled.div `
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding-top: ${({ paddingTop }) => paddingTop}%;
+  .leadgen-header_image_feature {
+    position: absolute;
+    inset: 0;
+    min-width: 100%;
+    min-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+`;
+const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
+    if (!src) {
         return null;
     }
+    return (React__default.createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: clsx(className, 'leadgen-header_image'), style: style }, isVideo(src) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default.createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
+};
+
+const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
+    const { primaryColor } = useContext(LeadGenContext$1);
+    const { t } = useTranslations();
+    const phone = otpData.phone;
+    const otpType = otpData.type;
+    const [otp, setOtp] = useState('');
+    const [isDirty, setIsDirty] = useState(false);
+    const [resendTimer, setResendTimer] = useState(autoSendWhenOpen ? 0 : 60);
+    const inputRef = useRef(null);
+    const [errorMsg, setErrorMsg] = useState();
+    const [displayPhone, setDisplayPhone] = useState('');
+    const formatPhoneNumberIntlRef = useRef();
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
     useEffect(() => {
-        if (isLightBox || isFullscreen) {
-            document.body.classList.add('noscroll');
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (!formatPhoneNumberIntlRef.current) {
+                const res = yield import('react-phone-number-input');
+                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
+            }
+            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
+        }))();
+    }, [phone]);
+    const sendOtp = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!phone) {
+            return;
         }
-        if (!window.intlTelInputUtils) {
-            require('intl-tel-input/build/js/utils');
+        const res = yield Service.sendSMSOtpLead({
+            phone,
+            type: otpType,
+        });
+        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+        if (respMessage === 'Send sms successfully' ||
+            respMessage === 'Send WhatsApp successfully' ||
+            respMessage === 'Send Zalo successfully') {
+            setResendTimer(60);
+            setTimeout(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.scrollIntoView({ block: 'center' });
+                }
+            }, 100);
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'Something went wrong!');
+            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
+            // setStatusVerifyOTP('idle')
+            // pushNotifications({
+            //   title: respMessage || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
         }
-        clearCacheUsedEmailOrPhone();
-    }, []);
-    const validatingPhoneRef = useRef(false);
-    const validatingEmailRef = useRef(false);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        validatingPhoneRef,
-        validatingEmailRef,
-        campaignId,
-        campaign_subot_id,
-        userInfo,
-        format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
-    const middlewareOnSubmit = (e) => {
-        e.preventDefault();
-        // mark all as touched to allow validation
-        const fields = Object.keys(validateObj);
-        const fieldStatus = fields.reduce((acc, cur) => {
-            acc[cur] = true;
-            return acc;
-        }, {});
-        form.setTouched(fieldStatus);
-        if (validatingEmailRef.current || validatingPhoneRef.current) {
+    const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!phone || !otp) {
             return;
         }
-        setTimeout(() => {
-            form.onSubmit((v) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (Object.keys(form.errors).length)
-                    return;
-                let newShowOtpPhone = null;
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
-                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'phone',
-                        };
-                    }
-                }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock)) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
-                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'whatsapp',
-                        };
-                    }
-                }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
-                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'zalo',
-                        };
-                    }
-                }
-                if (newShowOtpPhone) {
-                    setIsSubmitLoading(true);
-                    Service.sendSMSOtpLead(newShowOtpPhone)
-                        .then((res) => {
-                        var _a;
-                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
-                        if (respMessage === 'This phone number was verified') {
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
-                            return;
-                        }
-                        setShowOtpPhone(newShowOtpPhone);
-                    })
-                        .finally(() => {
-                        setIsSubmitLoading(false);
-                    });
-                    return;
-                }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
-            })(e);
-        }, 100);
-    };
-    const onOpenChange = (_open) => {
-        setOpen(_open);
-        if (!_open) {
-            setTimeout(() => {
-                onClose();
-            }, 250);
-        }
-    };
-    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
-    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
-    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
-    const renderAfterImageSizes = imageMobileLoaded &&
-        imageDesktopLoaded &&
-        (isFullscreen ? imageBackgroundLoaded : true);
-    const ButtonSubmit = useMemo(() => {
-        var _a;
-        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$1, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
-    }, [popUpSubmitText, isSubmitLoading, (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide]);
-    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
-    const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
-        var _a, _b, _c;
-        return (React__default.createElement(Button$1, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, onClick: () => {
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
-            } }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
-    })));
-    const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
-        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
-    const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
-    const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
-        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
-            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
-                React__default.createElement("div", { className: "leadgen-form_inner" },
-                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
-    const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
-            setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
-        } }));
-    const PopupThankYou = showThankyou && (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
-    const PopupContent = (React__default.createElement("div", { className: clsx('leadgen-content', {
-            'leadgen-content_small': limitFieldsLightBoxB,
-        }) },
-        !headerInsideFormContainer && PopupHeader,
-        !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
-            PopupThankYou,
-            !showThankyou && (React__default.createElement(React__default.Fragment, null,
-                PopupOtp,
-                PopupEmpty,
-                !(showOtpPhone || showEmpty) && PopupForm))))));
-    const styleOverlay = useMemo(() => {
-        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
-        if (isMobile && imageOverlayMobile) {
-            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
+        setIsSubmitLoading(true);
+        const res = yield Service.verifyOtpLead({
+            phone,
+            otp,
+            type: otpType,
+        });
+        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
+        if (respMessage === 'Verify successfully' ||
+            respMessage === 'Verify WhatsApp OTP sucess' ||
+            respMessage === 'Verify Zalo OTP sucess') {
+            onSuccess();
         }
-        if (!isMobile && imageOverlayDesktop) {
-            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
         }
-        return styleContent;
-    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
-    const PopupWrapper = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
-        React__default.createElement("div", { className: clsx('leadgen-wrapper', {
-                'leadgen-wrapper_small': limitFieldsLightBoxB,
-            }) },
-            showButtonClose && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
-            PopupContent)));
-    const popupContainerClassName = clsx('leadgen', `leadgen-${currentLayout}`, {
-        'leadgen-lightbox': isLightBox,
-        'leadgen-inline': isInPage,
-        'leadgen-slider': isSlider,
+        else {
+            setErrorMsg(respMessage || 'something Wrong');
+            // setIsShowError(true)
+            // setStatusVerifyOTP('sent')
+            // pushNotifications({
+            //   title: res?._messages[0] || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+        setIsSubmitLoading(false);
     });
-    const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
-        PopupWrapper,
-        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
-        isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
-                aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
-            } })) : null,
-        PopupWrapper));
-    if (!renderAfterImageSizes)
-        return null;
-    if (isLightBox || isFullscreen || isSlider) {
-        return PopupContainer;
-    }
-    else if (isSidebar) {
-        return React__default.createElement(SideBarLayout, { content: PopupContainer });
-    }
-    else if (isInline) {
-        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
-    }
-    return null;
-};
-
-const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile, imageDesktop, currentLayout, onOtherSubmit, }) => {
-    const currentPath = location.pathname;
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
-    if (!imageMobileLoaded || !imageDesktopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
-        currentLayout == 'SkinA' ? (React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "le-skin-a-desktop" },
-                React__default.createElement("div", { style: { position: 'relative' } },
-                    React__default.createElement("img", { src: imageDesktop, style: {
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '75%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            width: 'calc(100% - 15px)',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "" },
-                React__default.createElement("div", { style: { position: 'relative', zIndex: 10000 } },
-                    React__default.createElement("img", { src: imageDesktop, style: {
-                            width: '100%',
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '75%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            width: '100%',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
-        React__default.createElement("aside", { className: "le-only-mobile" },
-            React__default.createElement("div", { className: "le-skin-mobile" },
-                React__default.createElement("div", { style: { position: 'relative' } },
-                    isVideo(imageMobile) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true },
-                        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { src: imageMobile, style: {
-                            width: '100%',
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        } })),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '82%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            maxWidth: 'calc(100% - 15px)',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", svgClassName: "le-mobile-btn", onClose: onClose }))))));
+    useEffect(() => {
+        setTimeout(() => {
+            if (resendTimer > 0) {
+                setResendTimer((r) => r - 1);
+            }
+        }, 1000);
+    }, [resendTimer]);
+    useEffect(() => {
+        if (autoSendWhenOpen && !resendTimer) {
+            sendOtp();
+        }
+    }, []);
+    return (React__default.createElement("form", { onSubmit: (e) => {
+            e.preventDefault();
+            submitOtp();
+        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
+        React__default.createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
+                phone: `<strong>${displayPhone}</strong>`,
+            }), footer: React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Button$1, { type: "submit", size: "lg", variant: "filled", className: `lead-modal__btn leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
+                React__default.createElement(Button$1, { type: "button", size: "lg", variant: "light", className: `lead-modal__btn lead-phone-otp-button leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, onClick: () => {
+                        sendOtp();
+                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
+                    timer: resendTimer ? ` (${resendTimer}s)` : '',
+                }))) },
+            React__default.createElement("div", { className: "leadgen-form_inner" },
+                React__default.createElement(Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
+                    React__default.createElement(OTP, { ref: inputRef, name: '_' + name + '-otp', value: otp, onChange: (v) => {
+                            setIsDirty(true);
+                            setOtp(v.toString());
+                            if (isDirty && !v)
+                                setErrorMsg('OTP is required');
+                            else
+                                setErrorMsg(undefined);
+                        } }))))));
 };
 
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
 // image: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
-const TabLayout = ({ popupId, url, newTab, image, onClose, onOtherSubmit, }) => {
-    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
-        React__default.createElement("div", { className: "le-tab-popup" },
-            React__default.createElement("div", { style: { position: 'relative' } },
-                React__default.createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    React__default.createElement("img", { className: "js-popup-other-submit", src: image, style: {
-                            aspectRatio: `${imageWidth}/${imageHeight}`,
-                        } })),
-                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
-};
-
-// import mockLeadData from './mockLeadData'
-const listCampaignScheduled = [];
-const listCampaignScheduledToActivated = [];
-const listCampaignActiveButExpired = [];
-const listCampaignExcludeSonsored = [];
-const listCampaignDifferentSponsor = [];
-const listCampaignNotDisplayInRangeOfTime = [];
-function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
-}
-const getShuffleArray = (array) => {
-    const newArray = [...array];
-    for (let i = newArray.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        const temp = newArray[i];
-        newArray[i] = newArray[j];
-        newArray[j] = temp;
-    }
-    return newArray;
-};
-const getTimeByTimezone = (timeZone = 'UTC') => {
-    const date = new Date();
-    return new Date(date.toLocaleString('en-US', { timeZone }));
-};
-const parseDateByCampaignTime = (dateStr) => {
-    // Format like this: 2023-04-04 00:00:00
-    try {
-        const [datePart, timePart] = dateStr.split(' ');
-        const [year, month, day] = datePart.split('-').map(Number);
-        const [hours, minutes, seconds] = timePart.split(':').map(Number);
-        /** JavaScript counts months from 0 to 11 */
-        return new Date(year, month - 1, day, hours, minutes, seconds);
-    }
-    catch (err) {
-        return null;
-    }
-};
-const checkCampaignNowInTimeframe = (c) => {
-    var _a;
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    if (!startedDate || !endedDate) {
-        return false;
-    }
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    if (nowWithTimezoneMs <= endedDate.getTime() &&
-        nowWithTimezoneMs >= startedDate.getTime()) {
-        listCampaignScheduledToActivated.push(c);
-        return true;
-    }
-    return false;
-};
-function checkCampaignActiveButExpireAlready(c) {
-    var _a;
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (c.forever === 1) {
-        return true;
-    }
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (!startedDate || !endedDate) {
-        return true;
-    }
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    /** Check if this expire already, do not show */
-    if (nowWithTimezoneMs > endedDate.getTime()) {
-        listCampaignActiveButExpired.push(c);
-        return false;
-    }
-    return true;
-}
-function shouldNotDisplayIfExcludeAllSponsors(c) {
-    var _a;
-    const excludeSponsored = Number((_a = c.rules.find((i) => i.rule == 'exclude_sponsored')) === null || _a === void 0 ? void 0 : _a.value);
-    const isSponsored = Boolean(document.querySelector('.hhg-disclaimer-text'));
-    if (isSponsored && excludeSponsored) {
-        listCampaignExcludeSonsored.push(c);
-        return true;
-    }
-    return false;
-}
-function shouldDisplayWithCurrentSponsor(c) {
+const LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE = [
+    LEADGEN_LAYOUT.Fullscreen,
+    LEADGEN_LAYOUT.Slider,
+];
+const LEADGEN_LIMIT_LIGHTBOXB = 6;
+const LEADGEN_SHOW_HEADER = [
+    'LightBoxA',
+    'InlineA',
+    LEADGEN_LAYOUT.Sidebar,
+    LEADGEN_LAYOUT.Slider,
+];
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
-    try {
-        // TODO: BE will rename `exclude_sponsored_list` later
-        const stringOrArray = (_a = c.rules.find((i) => i.rule == 'exclude_sponsored_list')) === null || _a === void 0 ? void 0 : _a.value;
-        const whiteListSponsors = stringOrArray instanceof Array ? stringOrArray : JSON.parse(stringOrArray);
-        const dataSponsoredId = Number((_b = document
-            .querySelector('[data-sponsored-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-sponsored-id'));
-        // There is no config for sponsor id and white list, should show as default
-        if (!dataSponsoredId ||
-            dataSponsoredId <= 0 ||
-            whiteListSponsors.length === 0) {
-            return true;
-        }
-        // Check the dataSponsoredId exists in the white list or not.
-        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
-        if (isExist) {
-            return true;
+    const { primaryColor } = useContext(LeadGenContext$1);
+    const { isMobile } = useScreenSize();
+    const [open, setOpen] = useState(!!campaignId);
+    const [showOtpPhone, setShowOtpPhone] = useState(null);
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const [snap, setSnap] = useState(0.8);
+    const formRef = useRef();
+    const onClose = () => {
+        if (showOtpPhone) {
+            setShowOtpPhone(null);
         }
-        listCampaignDifferentSponsor.push({ id: c.id, rules: c.rules });
-        return false;
-    }
-    catch (err) {
-        // Default is show
-        return true;
-    }
-}
-const filterFnCampaign = (c) => {
-    if (shouldNotDisplayIfExcludeAllSponsors(c)) {
-        return false;
-    }
-    else if (!shouldDisplayWithCurrentSponsor(c)) {
-        return false;
-    }
-    /** Active */
-    if (c.formatted_status === 1) {
-        return checkCampaignActiveButExpireAlready(c);
-    }
-    /** Schedule */
-    if (c.formatted_status === 0) {
-        listCampaignScheduled.push(c);
-        return checkCampaignNowInTimeframe(c);
+        else {
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+        }
+    };
+    const textBlocks = JSON.parse(extraFields.textBlocks);
+    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
+    const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const popUpSubmitText = actionBlocks.submitBlock.data.value;
+    const currentPath = location.pathname;
+    const { align: descriptionAlign, value: description } = textBlocks.subtitleBlock.data || {};
+    const { align: titleAlign } = textBlocks.titleBlock.data || {};
+    const isSlider = currentLayout === LEADGEN_LAYOUT.Slider;
+    const isSidebar = currentLayout === LEADGEN_LAYOUT.Sidebar;
+    const isLightBox = currentLayout.includes('LightBox');
+    const isLightBoxA = currentLayout === LEADGEN_LAYOUT.LightBoxA;
+    const isLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB;
+    const isInline = currentLayout.includes('Inline');
+    const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
+    const isInPage = isInline || isSidebar;
+    const isDrawer = isLightBoxB && isMobile;
+    const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
+    const hasForm = isLightBoxA
+        ? listBlockAdded.some((item) => LEADGEN_BLOCK_INPUT.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+        : true;
+    const headerInsideFormContainer = isSlider || isLightBoxA || isFullscreen;
+    const showHeader = !!imageMobile || !!imageDesktop;
+    const onlyHeader = !title && !description;
+    const showButtonClose = !isInline;
+    if (window.innerWidth < 769 &&
+        LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
+        console.log('😎 Not show fullscreen, slider on mobile ');
+        return null;
     }
-    return false;
-};
-const fillterApprearanceTimeCampaign = (c) => {
-    var _a;
-    try {
-        const isTimeInRange = (currentTime, startTime, endTime) => {
-            const startParts = startTime.split(':');
-            const endParts = endTime.split(':');
-            const startDate = new Date();
-            startDate.setHours(Number(startParts[0]), Number(startParts[1]), 0, 0);
-            const endDate = new Date();
-            endDate.setHours(Number(endParts[0]), Number(endParts[1]), 0, 0);
-            return currentTime >= startDate && currentTime <= endDate;
-        };
-        const rulesApprValue = (_a = c.rules.find((i) => i.rule == 'appearance_time')) === null || _a === void 0 ? void 0 : _a.value;
-        const startTime = rulesApprValue.startTime;
-        const endTime = rulesApprValue.endTime || '23:59';
-        if (!startTime) {
-            return true;
+    useEffect(() => {
+        if (isLightBox || isFullscreen) {
+            document.body.classList.add('noscroll');
         }
-        if (isTimeInRange(new Date(), startTime, endTime)) {
-            return true;
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
         }
-        listCampaignNotDisplayInRangeOfTime.push(c);
-        return false;
-    }
-    catch (err) {
-        return true;
-    }
-};
-let timeoutRef = null;
-let LEAD_SCROLL_EVENT = null;
-function clearPassiveEvent() {
-    if (timeoutRef) {
-        clearTimeout(timeoutRef);
-        timeoutRef = null;
-    }
-    if (LEAD_SCROLL_EVENT) {
-        window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-        LEAD_SCROLL_EVENT = null;
-    }
-}
-function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
-    // clear previous passive event, check for new condition
-    clearPassiveEvent();
-    const leadCurrentUrl = DEBUG_URL ||
-        ('https://' +
-            location.hostname +
-            location.pathname +
-            location.search).toLowerCase();
-    fetch(leadApi + 'api/campaign/' + leadSiteId, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            url: leadCurrentUrl,
-            ga_client_id: getCookie('_ga') || null,
-        }),
-    })
-        .then((response) => {
-        return response.json();
-        // return mockLeadData || response.json()
-    })
-        .then((data) => {
-        var _a, _b, _c, _d;
-        LeadLog('List campagin: ', data);
-        LEAD_RESET_VAR();
-        if (data._status == 1) {
-            const campaigns = (((_b = (_a = data._data) === null || _a === void 0 ? void 0 : _a.campaigns) === null || _b === void 0 ? void 0 : _b.filter(filterFnCampaign)) || []).filter(fillterApprearanceTimeCampaign);
-            if (!getCookie('hhg-id')) {
-                setCookie('hhg-id', v1(), {
-                    domain: '.' + leadDomain,
-                    path: '/',
-                });
-                LeadLog('😍 Set HHG ID cookie');
-            }
-            // getCookie('hhg-id')
-            // TODO: HP-534 Filter desktop
-            let campaignsDevice = [];
-            if (isMobile()) {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
-            }
-            else {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
-            }
-            LeadLog(`👓 campaignsDevice`, campaignsDevice);
-            LeadLog('--listCampaignScheduled', listCampaignScheduled);
-            LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
-            LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
-            LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
-            LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
-            LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
-            // Check links
-            let listLinksObj = campaignsDevice
-                .map((i, index) => i.targets
-                .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
-                .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                .flat(1);
-            // Check list link match current href
-            listLinksObj = listLinksObj.filter((i) => {
-                var _a;
-                const target = new URL(String(i.target).toLowerCase());
-                if (i.option == 'exact_match')
-                    // FOR TEST LOCAL:
-                    // return Boolean(location.pathname === target.pathname)
-                    return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
-                if (i.option == 'start_with') {
-                    // FOR TEST LOCAL:
-                    // if (location.pathname.includes(target.pathname)) {
-                    if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
-                        const listExcluding = i.sub_target
-                            .filter((i) => i.option == 'excluding')
-                            .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
-                        return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
-                    }
-                    else {
-                        return false;
-                    }
-                }
-            });
-            // Check tags
-            const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
-            const listTags = listMetaTag.map((i) => i.content);
-            let listCampaignHasTag = [];
-            let listTagsObj = [];
-            if (listTags && listTags.length) {
-                listCampaignHasTag = campaignsDevice
-                    .map((i, index) => i.targets
-                    .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
-                    .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                    .flat(1);
-                listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
-            }
-            const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
-            const cookieKeys = document.cookie
-                .split('; ')
-                .map((i) => i.split('=')[0]);
-            const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
-            LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
-            const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
-            LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
-            const listCampaignSubmitedClosed = [
-                ...listCampaignCodeSubmited,
-                ...listCampaignCodeClosed,
-            ];
-            const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
-                const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
-                return !hasSubmited;
-            });
-            const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
-            // .sort(
-            //   (a, b) =>
-            //     (listCampaignValid[a.campaignIndex]?.score || 0) -
-            //     (listCampaignValid[b.campaignIndex]?.score || 0),
-            // )
-            LeadLog('--listCampaignValid : ', listCampaignValid);
-            if (listCampaignValid && listCampaignValid.length) {
-                const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
-                LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
-                const { rules } = CAMPAIGN_SHOW;
-                // CHECK RULE TRIGGER POPUP
-                const timeoutRule = Number((_c = rules.find((i) => i.rule == 'time')) === null || _c === void 0 ? void 0 : _c.value);
-                LeadLog(`timeoutRule`, timeoutRule);
-                const scrollRule = Number((_d = rules.find((i) => i.rule == 'scroll')) === null || _d === void 0 ? void 0 : _d.value);
-                LeadLog(`scrollRule`, scrollRule);
-                let impressionAction = 'TIME';
-                if (Number.isInteger(timeoutRule)) {
-                    impressionAction = 'TIME';
-                    LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
-                    timeoutRef = setTimeout(() => {
-                        onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
-                    }, timeoutRule * 1000);
+        clearCacheUsedEmailOrPhone();
+    }, []);
+    const validatingPhoneRef = useRef(false);
+    const validatingEmailRef = useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+        userInfo,
+        format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
+    });
+    const onFocus = (e) => {
+        const target = e.target;
+        target.scrollIntoView({
+            block: 'center',
+            inline: 'nearest',
+            behavior: 'auto',
+        });
+    };
+    const middlewareOnSubmit = (e) => {
+        e.preventDefault();
+        // mark all as touched to allow validation
+        const fields = Object.keys(validateObj);
+        const fieldStatus = fields.reduce((acc, cur) => {
+            acc[cur] = true;
+            return acc;
+        }, {});
+        form.setTouched(fieldStatus);
+        if (validatingEmailRef.current || validatingPhoneRef.current) {
+            return;
+        }
+        setTimeout(() => {
+            form.onSubmit((v) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                if (Object.keys(form.errors).length)
+                    return;
+                let newShowOtpPhone = null;
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
+                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'phone',
+                        };
+                    }
                 }
-                if (Number.isInteger(scrollRule)) {
-                    impressionAction = 'SCROLL';
-                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
-                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
-                        document.querySelector('body');
-                    const pct = $p.getBoundingClientRect().top;
-                    const pb = $p.offsetHeight;
-                    LeadLog(`👓 Element check scroll: `, $p);
-                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
-                        const wt = window.pageYOffset || document.documentElement.scrollTop;
-                        let percent = 0;
-                        if (wt >= pct) {
-                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
-                        }
-                        LeadLog('---Scroll', percent, scrollRule);
-                        // TODO: CHECK FOOTER HEIGHT
-                        if (percent >= scrollRule) {
-                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock)) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
+                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'whatsapp',
+                        };
+                    }
+                }
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
+                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'zalo',
+                        };
+                    }
+                }
+                if (newShowOtpPhone) {
+                    setIsSubmitLoading(true);
+                    Service.sendSMSOtpLead(newShowOtpPhone)
+                        .then((res) => {
+                        var _a;
+                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+                        if (respMessage === 'This phone number was verified') {
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            return;
                         }
-                    };
-                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
-                        passive: true,
+                        setShowOtpPhone(newShowOtpPhone);
+                    })
+                        .finally(() => {
+                        setIsSubmitLoading(false);
                     });
+                    return;
                 }
-            }
-            else {
-                LeadLog('🚧 No lead campaigns on current URL, tags');
-            }
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+            })(e);
+        }, 100);
+    };
+    const onOpenChange = (_open) => {
+        setOpen(_open);
+        if (!_open) {
+            setTimeout(() => {
+                onClose();
+            }, 250);
         }
-    })
-        .catch((err) => {
-        LeadLog(`Lead error: `, err);
+    };
+    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
+    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
+    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
+    const renderAfterImageSizes = imageMobileLoaded &&
+        imageDesktopLoaded &&
+        (isFullscreen ? imageBackgroundLoaded : true);
+    const ButtonSubmit = useMemo(() => {
+        var _a;
+        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$1, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
+    }, [popUpSubmitText, isSubmitLoading, (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide]);
+    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
+    const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
+        var _a, _b, _c;
+        return (React__default.createElement(Button$1, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, onClick: () => {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
+            } }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
+    })));
+    const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
+        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
+    const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
+    const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
+        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
+            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+                React__default.createElement("div", { className: "leadgen-form_inner" },
+                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
+    const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+            setShowOtpPhone(null);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+        } }));
+    const PopupThankYou = showThankyou && (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
+    const PopupContent = (React__default.createElement("div", { className: clsx('leadgen-content', {
+            'leadgen-content_small': limitFieldsLightBoxB,
+        }) },
+        !headerInsideFormContainer && PopupHeader,
+        !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
+            PopupThankYou,
+            !showThankyou && (React__default.createElement(React__default.Fragment, null,
+                PopupOtp,
+                PopupEmpty,
+                !(showOtpPhone || showEmpty) && PopupForm))))));
+    const styleOverlay = useMemo(() => {
+        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
+        if (isMobile && imageOverlayMobile) {
+            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
+        }
+        if (!isMobile && imageOverlayDesktop) {
+            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
+        }
+        return styleContent;
+    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
+    const PopupWrapper = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        React__default.createElement("div", { className: clsx('leadgen-wrapper', {
+                'leadgen-wrapper_small': limitFieldsLightBoxB,
+            }) },
+            showButtonClose && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
+            PopupContent)));
+    const popupContainerClassName = clsx('leadgen', `leadgen-${currentLayout}`, {
+        'leadgen-lightbox': isLightBox,
+        'leadgen-inline': isInPage,
+        'leadgen-slider': isSlider,
     });
-}
-const LeadLog = (...params) => {
-    if (process.env.NODE_ENV !== 'production' ||
-        (process.env.NEXT_PUBLIC_DEPLOY_ENV &&
-            process.env.NEXT_PUBLIC_DEPLOY_ENV !== 'production') ||
-        (typeof localStorage !== 'undefined' &&
-            localStorage.getItem('hhg_debug') === 'true')) {
-        console.log(...params);
+    const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+        PopupWrapper,
+        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+        isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
+                aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
+            } })) : null,
+        PopupWrapper));
+    if (!renderAfterImageSizes)
+        return null;
+    if (isLightBox || isFullscreen || isSlider) {
+        return PopupContainer;
+    }
+    else if (isSidebar) {
+        return React__default.createElement(SideBarLayout, { content: PopupContainer });
+    }
+    else if (isInline) {
+        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
     }
+    return null;
+};
+
+const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile, imageDesktop, currentLayout, onOtherSubmit, }) => {
+    const currentPath = location.pathname;
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
+    if (!imageMobileLoaded || !imageDesktopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
+        currentLayout == 'SkinA' ? (React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "le-skin-a-desktop" },
+                React__default.createElement("div", { style: { position: 'relative' } },
+                    React__default.createElement("img", { src: imageDesktop, style: {
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '75%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            width: 'calc(100% - 15px)',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "" },
+                React__default.createElement("div", { style: { position: 'relative', zIndex: 10000 } },
+                    React__default.createElement("img", { src: imageDesktop, style: {
+                            width: '100%',
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '75%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            width: '100%',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
+        React__default.createElement("aside", { className: "le-only-mobile" },
+            React__default.createElement("div", { className: "le-skin-mobile" },
+                React__default.createElement("div", { style: { position: 'relative' } },
+                    isVideo(imageMobile) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true },
+                        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { src: imageMobile, style: {
+                            width: '100%',
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } })),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '82%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            maxWidth: 'calc(100% - 15px)',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", svgClassName: "le-mobile-btn", onClose: onClose }))))));
+};
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// image: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const TabLayout = ({ popupId, url, newTab, image, onClose, onOtherSubmit, }) => {
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
+        React__default.createElement("div", { className: "le-tab-popup" },
+            React__default.createElement("div", { style: { position: 'relative' } },
+                React__default.createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    React__default.createElement("img", { className: "js-popup-other-submit", src: image, style: {
+                            aspectRatio: `${imageWidth}/${imageHeight}`,
+                        } })),
+                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
 };
 
 function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
@@ -3243,7 +4433,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
 }
 const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
-    const { apiUrl, siteDomain } = useContext(LeadGenContext);
+    const { apiUrl, siteDomain } = useContext(LeadGenContext$1);
     useEffect(() => {
         const gaCookie = getCookie('_ga') || null;
         fetch(`${apiUrl}api/campaign/${code}/impression`, {
@@ -3638,7 +4828,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default.createElement(LeadGenContext.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
+    return (React__default.createElement(LeadGenContext$1.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
         React__default.createElement(TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
             React__default.createElement(Box, { sx: { position: 'fixed', zIndex: ZINDEX_SSO - 9e6 } },
                 React__default.createElement(Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease" }, (styles) => {
@@ -3658,4 +4848,4 @@ LeadGen.Thankyou = Thankyou;
 LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close;
 
-export { LeadGen };
+export { LeadGen, LeadGenSubscriptionBox };