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

package/build/lead.js

@@ -2,76 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-217a5733.js');
+var tslib_es6 = require('./tslib.es6-a4e6f6fe.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
-var index = require('./index-c69ba434.js');
+var index = require('./index-3d563929.js');
+var translationsContext = require('./translationsContext-55646101.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-dd62cf24.js');
-var translationsContext = require('./translationsContext-ac71e4c7.js');
-var utils$1 = require('./utils-3b6801b1.js');
-var index$2 = require('./index-253ec2d9.js');
-var index$3 = require('./index-0a5e6408.js');
-var index$5 = require('./index-0ba8ea71.js');
-var index$4 = require('./index-7b7b50dc.js');
-require('./index.styles-330e816a.js');
+var utils$1 = require('./utils-eb50a5d6.js');
+var index$1 = require('./index-c034f39c.js');
+var index$2 = require('./index-50426772.js');
+var index$4 = require('./index-2364e8df.js');
+var index$3 = require('./index-9b9e59a2.js');
+require('./index.styles-01d7e5fb.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-89cc8207.js');
-var index$9 = require('./index-bbfb5456.js');
-require('./index-da3e2cd5.js');
-var index$7 = require('./index-af6f003e.js');
-require('./other-000eae02.js');
-require('./index-220172c4.js');
-var utils = require('./utils-2de3e40a.js');
-var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-951ae89e.js');
-var index$6 = require('./index-223317ad.js');
-var translationsProvider = require('./translationsProvider-681225a2.js');
-var Locale = require('./Locale-608d8aa7.js');
+require('./useMantineLocale-70ce0f42.js');
+var index$8 = require('./index-1d4f69ed.js');
+require('./index-f73f06bf.js');
+var index$7 = require('./index-72db33ac.js');
+require('./other-23c85ba5.js');
+require('./index-7cc099d8.js');
+var utils = require('./utils-0a02bd15.js');
+require('@mantine/dates');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-c1253ff8.js');
+var index$5 = require('./index-1007e179.js');
 var uuid = require('uuid');
-var PhoneInputBase = require('react-phone-number-input');
+var index$6 = require('./index-6602fed3.js');
+var index$a = require('./index-e6660745.js');
+var useScreenSize = require('./useScreenSize-0d50d147.js');
+var ReactDOM = require('react-dom');
+var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var react = require('@emotion/react');
-var togetherComponentGlobalContext = require('./utils-91d25828.js');
-var index$8 = require('./index-4520c363.js');
-var index$b = require('./index-bca93346.js');
-var useScreenSize = require('./useScreenSize-f2c19a70.js');
-var ReactDOM = require('react-dom');
-var index$a = require('./index-ffa642f4.js');
-var InputDate = require('./InputDate-877c23c7.js');
-var Close = require('./Close-390f3c2d.js');
-require('./constantsIsProduction.js');
-require('./normalizeLink-733224f2.js');
-require('./constantsDomainLocales.js');
+var index$9 = require('./index-b81a335e.js');
+var InputDate = require('./InputDate-9746e093.js');
+var Close = require('./Close-2add3da2.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
+require('./Locale-836a0da1.js');
 require('classnames');
-require('./useUniqueId-391fa11f.js');
+require('./useUniqueId-188a010a.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
+require('./constantsDomainLocales.js');
+require('./constantsIsProduction.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
-require('./i18n-values/en-PH.js');
-require('./i18n-values/hi-IN.js');
-require('./i18n-values/id-ID.js');
-require('./i18n-values/km-KH.js');
-require('./i18n-values/ms-MY.js');
-require('./i18n-values/my-MM.js');
-require('./i18n-values/th-TH.js');
-require('./i18n-values/tl-PH.js');
-require('./i18n-values/vi-VN.js');
-require('./i18n-values/vi-VN_MB.js');
-require('./i18n-values/zh-TW.js');
-require('./index-f6aa6d45.js');
-require('slugify');
-require('string-format');
-require('./togetherApiPaths.js');
-require('./constants-1459a83e.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -123,7 +102,7 @@ if (sessionStorage.getItem('insider_object')) {
 }
 const docLang = document.documentElement.lang;
 // TODO: country code
-const LEAD_LOCALE_DATA$1 = {
+const LEAD_LOCALE_DATA = {
     'vi-VN': {
         popupLang: 'vi',
         countryCode: 'vn',
@@ -165,7 +144,7 @@ const LEAD_LOCALE_DATA$1 = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA$1[docLang] || LEAD_LOCALE_DATA$1['vi-VN'];
+const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
 function LEAD_RESET_VAR() {
     // LEAD_CURRENT_URL = location.href.toLowerCase();
     LEAD_CURRENT_URL =
@@ -186,11 +165,6 @@ 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',
@@ -220,10 +194,8 @@ const LEADGEN_BLOCK = {
     DropdownBlock: 'DropdownBlock',
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
-    TitleBlock: 'TitleBlock',
-    SubtitleBlock: 'SubtitleBlock',
 };
-const LEADGEN_BLOCK_INPUT = [
+const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.TextBlock,
     LEADGEN_BLOCK.NumberBlock,
     LEADGEN_BLOCK.DateBlock,
@@ -238,59 +210,7 @@ const LEADGEN_BLOCK_INPUT = [
     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 {
@@ -306,7 +226,7 @@ const mappingSSOToLead = (userInfoProps) => {
                 if (ssoKey === 'birthday') {
                     const dob = dayjs__default["default"](initValue, 'YYYY-MM-DD', true);
                     if (dob.isValid()) {
-                        user.birthday = dob.toDate();
+                        user.birthday = dob;
                     }
                 }
                 else if (ssoKey === 'gender') {
@@ -329,83 +249,16 @@ 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 = tslib_es6.__rest(_a, ["url", "data"]);
-        const token = miscCookieHelper.getCookie(index.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 = tslib_es6.__rest(_a, ["url", "data"]);
@@ -509,54 +362,8 @@ 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,
@@ -663,7 +470,7 @@ const clearCacheUsedEmailOrPhone = () => {
 // You can give context variables any name
 const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = form.createFormContext();
 const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
-    const { t } = index$1.useTranslations();
+    const { t } = index.useTranslations();
     const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     React.useEffect(() => {
         if (!window.intlTelInputUtils) {
@@ -893,10 +700,10 @@ const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, sh
 const Description = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
     const { description } = React.useContext(LeadGenComponentContext);
-    return description ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "p3" }, rest), description)) : null;
+    return description ? (React__default["default"].createElement(index$1.Text, Object.assign({ size: "p3" }, rest), description)) : null;
 };
 
-const LeadGenContext$1 = React.createContext({});
+const LeadGenContext = React.createContext({});
 
 var useStyles$2 = core.createStyles(() => {
     return {
@@ -949,7 +756,7 @@ const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries$1, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null) })),
         React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
-        React__default["default"].createElement(index$3.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: required, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
+        React__default["default"].createElement(index$2.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: required, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
                 setSearchValue(query);
             }, filter: () => true, clearable: true, searchable: true, onChange: (val) => setAddress(val || ''), icon: React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
                 React__default["default"].createElement("path", { d: "M10 9.792q.605 0 1.032-.427.426-.428.426-1.032 0-.603-.426-1.031A1.4 1.4 0 0 0 10 6.875q-.604 0-1.032.427a1.4 1.4 0 0 0-.426 1.031q0 .604.426 1.032.428.426 1.032.427m0 8.083q-.145 0-.292-.042a.7.7 0 0 1-.27-.145Q6.478 15 5.01 12.708 3.54 10.418 3.54 8.5q0-3.021 1.949-4.823T10 1.875t4.51 1.802q1.95 1.802 1.949 4.823 0 1.917-1.468 4.208-1.47 2.292-4.427 4.98a.7.7 0 0 1-.271.145 1 1 0 0 1-.292.042", fill: "#8C8C8C" })), autoComplete: 'no-auto-complete-' + randRef.current, rightSection: React__default["default"].createElement(React__default["default"].Fragment, null) }, form.getInputProps(name)))));
@@ -960,7 +767,7 @@ const SubtitleBlock$1 = ({ children, align, }) => (React__default["default"].cre
 const TitleBlock$1 = ({ children, align, }) => (React__default["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 } = React.useContext(LeadGenContext$1);
+    const { primaryColor } = React.useContext(LeadGenContext);
     const { classes, cx } = useStyles$2(undefined, {
         name: 'LeadGen__Field',
         styles,
@@ -978,15 +785,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'SubtitleBlock':
                 return (React__default["default"].createElement(SubtitleBlock$1, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                return (React__default["default"].createElement(index$2.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
                     label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
             case 'NumberBlock':
-                return (React__default["default"].createElement(index$3.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                return (React__default["default"].createElement(index$2.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChange={(e) => inputOnChange('number', e)}
                     label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
             case 'EmailBlock':
-                return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                return (React__default["default"].createElement(index$2.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
                     placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
@@ -994,12 +801,12 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'ZaloOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                return (React__default["default"].createElement(index$3.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
+                return (React__default["default"].createElement(index$2.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
                     // error={errorField.phone}
                     className: cx('leadgen-control', classes.control), labelProps: {
                         htmlFor: id,
                     } }, form.getInputProps(value)),
-                    React__default["default"].createElement(index$3.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
+                    React__default["default"].createElement(index$2.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
@@ -1010,12 +817,12 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             }
             case 'DateBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default["default"].createElement(index$4.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", popoverProps: popoverProps }, form.getInputProps(value))),
                     React__default["default"].createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: primaryColor, className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$3.Button, { type: "button", size: "md", color: primaryColor, className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
@@ -1024,26 +831,26 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                     isSendMailChimp && (React__default["default"].createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
+                    React__default["default"].createElement(index$2.Checkbox.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    isSendMailChimp && (React__default["default"].createElement(index$3.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    isSendMailChimp && (React__default["default"].createElement(index$2.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
+                    React__default["default"].createElement(index$2.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default["default"].createElement(index$3.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                    React__default["default"].createElement(index$2.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+                    React__default["default"].createElement(index$2.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
     })));
@@ -1070,12 +877,12 @@ var useStyles$1 = core.createStyles((theme) => {
 const Heading = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
     const { heading } = React.useContext(LeadGenComponentContext);
-    return heading ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
+    return heading ? (React__default["default"].createElement(index$1.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
 };
 
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
     var _a;
-    const { primaryColor } = React.useContext(LeadGenContext$1);
+    const { primaryColor } = React.useContext(LeadGenContext);
     const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
     const { classes, cx } = useStyles$1(undefined, {
         name: 'LeadGen__FormComponent',
@@ -1164,7 +971,7 @@ const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps,
                         control: classes.control,
                     }, listBlockAdded: listBlockAdded, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit, popoverProps: popoverProps })),
             ((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) ? null : (React__default["default"].createElement("div", { className: classes.submitBtnWrapper },
-                React__default["default"].createElement(index$4.Button, Object.assign({ size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, loading: isSubmitLoading, color: primaryColor }, submitProps), popUpSubmitText))))));
+                React__default["default"].createElement(index$3.Button, Object.assign({ size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, loading: isSubmitLoading, color: primaryColor }, submitProps), popUpSubmitText))))));
 };
 const Form = (props) => {
     const { showOtpPhone, showThankyou } = React.useContext(LeadGenComponentContext);
@@ -1185,7 +992,7 @@ var useStyles = core.createStyles(() => {
 });
 
 const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, styles, classNames, }) => {
-    const { t } = index$1.useTranslations();
+    const { t } = index.useTranslations();
     const phone = otpData.phone;
     const otpType = otpData.type;
     const [otp, setOtp] = React.useState('');
@@ -1295,9 +1102,9 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
                 submitOtp();
             }, className: cx(classes.root, className) },
             React__default["default"].createElement("div", { className: classes.header },
-                React__default["default"].createElement(index$6.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
-                React__default["default"].createElement(index$2.Text, { size: "p3", className: classes.description }, t('lead.otp.desc', { phone: displayPhone }))),
-            React__default["default"].createElement(index$3.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: t('lead.otp.phonePlaceholder'), className: classes.control, label: t('lead.otp.phoneLabel'), "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
+                React__default["default"].createElement(index$5.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
+                React__default["default"].createElement(index$1.Text, { size: "p3", className: classes.description }, t('lead.otp.desc', { phone: displayPhone }))),
+            React__default["default"].createElement(index$2.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: t('lead.otp.phonePlaceholder'), className: classes.control, label: t('lead.otp.phoneLabel'), "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
                     setIsDirty(true);
                     setOtp(v);
                     if (isDirty && !v)
@@ -1306,10 +1113,10 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
                         setErrorMsg(undefined);
                 }, error: isDirty ? errorMsg : undefined }),
             React__default["default"].createElement("div", { className: classes.actions },
-                React__default["default"].createElement(index$4.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
+                React__default["default"].createElement(index$3.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
                     // onClick={() => submitOtp()}
                     disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
-                React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
+                React__default["default"].createElement(index$3.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
                         sendOtp();
                     }, disabled: !!resendTimer }, t('lead.otp.resend', {
                     timer: resendTimer ? ` (${resendTimer}s)` : '',
@@ -1590,1610 +1397,69 @@ const translationsMap = {
     'tl-PH': enPH,
 };
 const getTranslations = (locale) => {
-    const translations = Object.assign(Object.assign({}, translationsProvider.translationsMap[locale]), translationsMap[locale]);
+    const translations = translationsMap[locale];
     if (translations) {
         return translations;
     }
     return translationsMap['en-PH'];
 };
 
-const LeadGenTranslationProvider = (props) => {
-    const { locale, children } = props;
-    const translationContextValue = React.useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
-    return (React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: translationContextValue }, children));
+const useImageSize = (src) => {
+    const [width, setWidth] = React.useState(16);
+    const [height, setHeight] = React.useState(9);
+    const [loaded, setLoaded] = React.useState(false);
+    // load src image to get its width and height
+    React.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,
+    };
 };
 
-// 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) {
-    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: miscCookieHelper.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 (!miscCookieHelper.getCookie('hhg-id')) {
-                miscCookieHelper.setCookie('hhg-id', uuid.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 = React.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] = React.useState(forceCampaignProps);
-    const [subscriptionInfo, setSubscriptionInfo] = React.useState({
-        subscriptionIcon: '',
-        subscriptionTitle: '',
-    });
-    const locale = React.useMemo(() => {
-        return localeProps || Locale.LOCALE['PhilippinesEnglish'];
-    }, [localeProps]);
-    const leadGenContextValue = React.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, } = React.useMemo(() => ({
-        url: location.href.toLowerCase() || '',
-        cookie_id: miscCookieHelper.getCookie('hhg-id') || null,
-        ga_client_id: miscCookieHelper.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 = React.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 = React.useCallback((data) => {
-        return Service.postSubscriptionBoxLead({ data });
-    }, []);
-    const submitSubscriptionBox = React.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 = React.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,
-    ]);
-    React.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]);
-    React.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["default"].createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
-            submitSubscriptionBox,
-            impression }) },
-        React__default["default"].createElement(LeadGenTranslationProvider, { locale: locale }, children)));
-};
-const useLeadGenContext = () => {
-    const context = React.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__default["default"].extend(customParseFormat);
-// You can give context variables any name
-const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
-const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
-    var _a;
-    const { t } = index$1.useTranslations();
-    const initialValues = React.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 = React.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__default["default"](value, format, true)
-                            : dayjs__default["default"](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 = React.useRef(form);
-    formRef.current = form;
-    return { form, validateObj };
-};
-
-const StyledLeadGenThankYou = styled__default["default"].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: ${miscTheme.theme.colors.gray900};
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 28px;
-    letter-spacing: -0.2px;
-  }
-
-  .leadgen-description {
-    margin-block: 0;
-    color: ${miscTheme.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["default"].createElement(StyledLeadGenThankYou, { className: className, style: style },
-        React__default["default"].createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
-        React__default["default"].createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
-        React__default["default"].createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
-        !!buttonText && showButton && (React__default["default"].createElement(core.Button, { 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__default["default"].div `
-  margin-top: 16px;
-  .leadgen-btn {
-    margin-top: 16px;
-  }
-`;
-const StyledLeadGenSubscriptionBoxHeaderImage = styled__default["default"].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__default["default"].div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  .leadgen-title {
-    margin-bottom: 0;
-    flex: 1;
-    min-width: 0;
-    color: ${miscTheme.theme.colors.gray900};
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 1.4;
-    letter-spacing: -0.8px;
-  }
-`;
-const StyledLeadGenSubscriptionBox = styled__default["default"].div `
-  padding: 16px;
-  border: 1px solid ${miscTheme.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;
-    }
-  }
-
-  @media screen and (min-width: 768px) {
-    .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;
-      }
-    }
-  }
-`;
-const StyledLeadGenSubscriptionBoxA = styled__default["default"].div `
-  .leadgen-form_input {
-    --phone-select: 45px;
-    .PhoneInput {
-      --phone-select: 45px;
-      .PhoneInputCountry {
-        margin-top: 1px;
-        pointer-events: none;
-        .PhoneInputCountryIconImg,
-        .PhoneInputArrowContainer {
-          display: none;
-        }
-      }
-    }
-  }
-`;
-
-const PhoneInput = React.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 = tslib_es6.__rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
-    const id = idProps || uuid.v1() + name;
-    return (React__default["default"].createElement(core.Input.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["default"].createElement("div", { className: "mantine-Input-wrapper" },
-            React__default["default"].createElement(index$3.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__default["default"].div `
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  .leadgen-form_input {
-    width: calc(50% - 4px);
-  }
-
-  .leadgen-form_input_checkbox {
-    width: 100%;
-  }
-`;
-
-const cssInputNotShrink$1 = react.css `
-  height: 100% !important;
-  min-height: calc(var(--container-height, 56px) * 22 / 56);
-  color: ${miscTheme.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: ${miscTheme.theme.colors.gray400};
-  }
-`;
-const cssInputShrink$1 = react.css `
-  height: auto !important;
-  cursor: text;
-  opacity: 1;
-  transition: 0.1s ease-in-out all;
-`;
-const cssLabelNotShrink$1 = react.css `
-  position: absolute;
-  top: calc(var(--container-height) / 2);
-  left: var(--space-x, 16px);
-  color: ${miscTheme.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 = react.css `
-  color: ${miscTheme.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 = react.css `
-  min-height: var(--container-height, 56px);
-  display: flex;
-  align-items: flex-end;
-  border: 1px solid ${miscTheme.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: ${miscTheme.theme.colors.gray200};
-  }
-`;
-const cssWrapperInputShrink$1 = react.css `
-  height: auto;
-  min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 7px);
-  cursor: text;
-  pointer-events: auto;
-`;
-const cssInputWrapperError$1 = react.css `
-  color: ${miscTheme.theme.colors.red800};
-  font-size: 12px;
-  line-height: 1.5;
-`;
-const StyledTextFieldContainer$1 = styled__default["default"].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: ${miscTheme.theme.colors.red400};
-      }
-    }
-
-    .mantine-Input-wrapper {
-      &:has([data-invalid]) {
-        border-color: ${miscTheme.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: ${miscTheme.theme.colors.gray800} !important;
-      :focus {
-        color: ${miscTheme.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__default["default"].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: ${miscTheme.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: ${miscTheme.theme.colors.gray600};
-      width: 18px;
-      height: 18px;
-    }
-    input[type='checkbox'] {
-      border-radius: 4px;
-    }
-
-    &[data-checked='true'] {
-      input[type='radio'],
-      input[type='checkbox'] {
-        border-color: ${miscTheme.theme.colors.primary600};
-        + svg {
-          color: ${miscTheme.theme.colors.primary600};
-        }
-      }
-
-      input[type='radio'] {
-        background-color: white;
-      }
-    }
-
-    .mantine-Checkbox-input {
-      &:checked {
-        border-color: ${miscTheme.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: ${miscTheme.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 = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "className", "children"]);
-    const containerRef = hooks.useClickOutside(() => {
-        if (shrinkProps) {
-            return;
-        }
-        setShrink(false);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
-    });
-    const [shrink, setShrink] = React.useState(shrinkProps);
-    const onClick = React.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]);
-    React.useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default["default"].createElement(StyledTextFieldContainer$1, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
-        React__default["default"].createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
-};
-const ChoiceField$1 = (props) => {
-    const { children, className } = props, restProps = tslib_es6.__rest(props, ["children", "className"]);
-    return (React__default["default"].createElement(StyledChoiceFieldContainer$1, Object.assign({ className: core.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 = tslib_es6.__rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
-    const [LoadScript, setLoadScript] = React.useState(null);
-    const [value, setValue] = React.useState(defaultValue || valueProps);
-    const { predictions } = usePlacesAutocomplete.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 = React.useCallback((s) => {
-        setValue(s);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
-    }, []);
-    const onClickItem = React.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]);
-    React.useEffect(() => {
-        setValue(valueProps);
-    }, [valueProps]);
-    React.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) {
-            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
-                setLoadScript(() => m.LoadScript);
-            });
-        }
-    }, []);
-    return (React__default["default"].createElement(core.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: index$7.ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
-            return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null), style: { width: '100%' } })),
-                children));
-        } }, restProps)));
-};
-
-const LeadGenForm = React.forwardRef((props, ref) => {
-    const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
-    const formRef = React.useRef(null);
-    const form$1 = formProps || form.useForm({ initialValues, validate });
-    const middlewareFinish = React.useCallback((values, event) => {
-        /** Set `touched` all values for validation when submiting */
-        form$1.setTouched(blocks.reduce((touched, { data }) => {
-            touched[data.value] = true;
-            return touched;
-        }, {}));
-        /** Wait for `touched` state and then submit */
-        setTimeout(() => {
-            const { hasErrors } = form$1.validate();
-            if (hasErrors) {
-                return;
-            }
-            onFinish === null || onFinish === void 0 ? void 0 : onFinish(formatLeadGenFormValue(values, blocks), event);
-        }, 100);
-    }, [form$1, blocks]);
-    const middlewareFinishFailed = React.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]);
-    React.useEffect(() => {
-        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-            if (!window.intlTelInputUtils) {
-                yield require('intl-tel-input/build/js/utils');
-            }
-        }))();
-    }, []);
-    React.useImperativeHandle(ref, () => (Object.assign(Object.assign({}, form$1), { submit: () => {
-            formRef.current.requestSubmit();
-        } })), [form$1, formRef]);
-    if (!blocks || !blocks.length) {
-        return null;
-    }
-    return (React__default["default"].createElement("form", { ref: formRef, onSubmit: form$1.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
-        React__default["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$1.getInputProps(name);
-            const { value, error } = formInputProps;
-            const reactKey = `${id}-${idx}`;
-            switch (blockName) {
-                case LEADGEN_BLOCK.TextBlock: {
-                    return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.NumberInput, 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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
-                }
-                case LEADGEN_BLOCK.LocationBlock: {
-                    return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(dates.DateInput, Object.assign({ locale: (utils.MAPPED_LOCALE === null || utils.MAPPED_LOCALE === void 0 ? void 0 : utils.MAPPED_LOCALE[locale]) || utils.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["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                        React__default["default"].createElement(core.Select, 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$1.getInputProps(name, {
-                        type: 'checkbox',
-                    });
-                    return (React__default["default"].createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
-                        isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default["default"].createElement(core.Checkbox.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["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                            } }, formInputCheckboxProps), listQuestion.map((l, _idx) => (React__default["default"].createElement(core.Checkbox, { name: name, key: _idx, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
-                }
-                case LEADGEN_BLOCK.RadioBlock: {
-                    return (React__default["default"].createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
-                        isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default["default"].createElement(core.Radio.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
-                                return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                            } }, formInputProps), listQuestion.map((l, _index) => (React__default["default"].createElement(core.Radio, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
-                }
-                case LEADGEN_BLOCK.TncBlock:
-                    return (React__default["default"].createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
-                        React__default["default"].createElement(core.Input.Wrapper, { error: error },
-                            React__default["default"].createElement(core.Checkbox, Object.assign({ value: value, name: 'TNC-' + id, label: React__default["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 = React.useRef();
-    const imageComp = React.useMemo(() => {
-        if (!image) {
-            return null;
-        }
-        return (React__default["default"].createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
-            React__default["default"].createElement("img", { src: image, alt: "" })));
-    }, [image]);
-    const titleComp = React.useMemo(() => {
-        if (typeof title === 'string') {
-            return (React__default["default"].createElement("p", { className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
-        }
-        return React__default["default"].createElement("p", { className: "leadgen-title" }, title);
-    }, [title]);
-    return (React__default["default"].createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
-        React__default["default"].createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
-            imageComp,
-            titleComp),
-        React__default["default"].createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
-            React__default["default"].createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
-            React__default["default"].createElement(core.Button, { 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 } = index$1.useTranslations();
-    const { action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
-    const refContainer = React.useRef(null);
-    const [loading, setLoading] = React.useState(false);
-    const [showThankyou, setShowThankyou] = React.useState(false);
-    const validatingEmailRef = React.useRef(false);
-    const validatingPhoneRef = React.useRef(false);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        campaignId: campaign_id,
-        campaign_subot_id,
-        validatingEmailRef,
-        validatingPhoneRef,
-        userInfo,
-    });
-    const subscription_title = React.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 = React.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 = React.useCallback((values) => tslib_es6.__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 = PhoneInputBase.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)) {
-                        ssoValues['sso_verified_profile'] =
-                            phone.number === (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) ? 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;
-                    }
-                }
-                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,
-    ]);
-    React.useEffect(() => {
-        if (refContainer.current) {
-            IObserver.observe(refContainer.current);
-        }
-        return () => {
-            IObserver.disconnect();
-        };
-    }, [categoryId]);
-    return (React__default["default"].createElement("div", { ref: refContainer },
-        React__default["default"].createElement(StyledLeadGenSubscriptionBox, null,
-            showThankyou && (React__default["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["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 = React.memo(LeadGenSubscriptionBoxWithoutMemo);
-
-const Container = () => {
-    const context = React.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["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["default"].createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
-        React__default["default"].createElement(Container, null)));
-};
-const LeadGenSubscriptionBox = LeadGenSubscriptionBoxContainer;
-
-const useImageSize = (src) => {
-    const [width, setWidth] = React.useState(16);
-    const [height, setHeight] = React.useState(9);
-    const [loaded, setLoaded] = React.useState(false);
-    // load src image to get its width and height
-    React.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["default"].createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
-    React__default["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["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)
+const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default["default"].createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
+    React__default["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["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["default"].createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
         React__default["default"].createElement("div", { className: "le-center-tab-popup" },
             React__default["default"].createElement("div", { style: { position: 'relative' } },
                 React__default["default"].createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    index$8.isVideo(imageMobile) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
+                    index$6.isVideo(imageMobile) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
                         React__default["default"].createElement("source", { src: imageMobile }))) : (React__default["default"].createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
                             aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
                         } })),
-                    index$8.isVideo(imageDestkop) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
+                    index$6.isVideo(imageDestkop) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
                         React__default["default"].createElement("source", { src: imageDestkop }))) : (React__default["default"].createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
                             aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
                         } }))),
@@ -3252,7 +1518,7 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
 };
 
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
-    const { primaryColor } = React.useContext(LeadGenContext$1);
+    const { primaryColor } = React.useContext(LeadGenContext);
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
     if (!imageLoaded)
         return null;
@@ -3272,7 +1538,7 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
             }))),
             linkText && (React__default["default"].createElement("div", null,
                 React__default["default"].createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
-                    React__default["default"].createElement(index$4.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
+                    React__default["default"].createElement(index$3.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
 };
 
 const InlineLayout = ({ content, inlinePosition, }) => {
@@ -3409,7 +1675,7 @@ const EmptyIcon = (props) => {
 };
 
 const EmptyComponent = ({ onClose, onContinue, }) => {
-    const { t } = index$1.useTranslations();
+    const { t } = index.useTranslations();
     return (React__default["default"].createElement("div", { className: "leadgen-empty" },
         React__default["default"].createElement("div", { className: "leadgen-empty_body" },
             React__default["default"].createElement("div", { className: "leadgen-empty_wrapper" },
@@ -3420,6 +1686,222 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
             React__default["default"].createElement(core.Button, { 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 = tslib_es6.__rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = React.useState(null);
+    const [value, setValue] = React.useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete.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 = React.useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = React.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]);
+    React.useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    React.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) {
+            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default["default"].createElement(core.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: index$7.ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
+            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
+};
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const customParseFormat = require('dayjs/plugin/customParseFormat');
+dayjs__default["default"].extend(customParseFormat);
+// You can give context variables any name
+const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
+const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
+    const { t } = index.useTranslations();
+    const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const validateObj = React.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__default["default"](value, format, true)
+                            : dayjs__default["default"](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 = React.useRef(form);
+    formRef.current = form;
+    return { form, validateObj };
+};
+
 const SubtitleBlock = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const cssInputNotShrink = react.css `
@@ -3746,13 +2228,11 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
+            $focusEl.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'start',
+            });
         }
     }, [shrink]);
     React.useEffect(() => {
@@ -3769,13 +2249,13 @@ const ChoiceField = (props) => {
 const TitleBlock = ({ children, align, }) => (React__default["default"].createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
-    const { t } = index$1.useTranslations();
+    const { t } = index.useTranslations();
     const form = useLeadFormContext();
     const formValues = form.values;
     const labelTuples = React.useMemo(() => {
         return ((index$7.ISO_FORMAT === null || index$7.ISO_FORMAT === void 0 ? void 0 : index$7.ISO_FORMAT[locale]) || index$7.ISO_FORMAT['vi-VN']).dateFormat
             .split('/')
-            .map((key) => { var _a; return t((_a = index$9.COMMON_DATE_TRANSLATE_KEY === null || index$9.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$9.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
+            .map((key) => { var _a; return t((_a = index$8.COMMON_DATE_TRANSLATE_KEY === null || index$8.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$8.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
     }, [locale]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
@@ -3818,7 +2298,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     }) },
                     React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
                         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
+                            React__default["default"].createElement(index$2.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
                                 id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
             }
@@ -3834,7 +2314,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$a.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$9.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
@@ -3843,7 +2323,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default["default"].createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, 
+                    React__default["default"].createElement(index$2.Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
                         label: placeholder, size: "md", sx: {
                             display: 'flex',
@@ -3852,19 +2332,19 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             gap: 8,
                         }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, 
+                    React__default["default"].createElement(index$2.Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
                         label: placeholder, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field", key: index },
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default["default"].createElement(index$3.Select
+                    React__default["default"].createElement(index$2.Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
@@ -3876,7 +2356,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = tslib_es6.__rest(_d, ["error"]);
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default["default"].createElement(core.Input.Wrapper, { error: error },
-                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
+                        React__default["default"].createElement(index$2.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
         }
         return null;
     })));
@@ -3979,12 +2459,12 @@ const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
     if (!src) {
         return null;
     }
-    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$8.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
+    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$6.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
 };
 
 const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
-    const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { t } = index$1.useTranslations();
+    const { primaryColor } = React.useContext(LeadGenContext);
+    const { t } = index.useTranslations();
     const phone = otpData.phone;
     const otpType = otpData.type;
     const [otp, setOtp] = React.useState('');
@@ -4069,371 +2549,715 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
             //   type: 'danger',
             // })
         }
-        setIsSubmitLoading(false);
+        setIsSubmitLoading(false);
+    });
+    React.useEffect(() => {
+        setTimeout(() => {
+            if (resendTimer > 0) {
+                setResendTimer((r) => r - 1);
+            }
+        }, 1000);
+    }, [resendTimer]);
+    React.useEffect(() => {
+        if (autoSendWhenOpen && !resendTimer) {
+            sendOtp();
+        }
+    }, []);
+    return (React__default["default"].createElement("form", { onSubmit: (e) => {
+            e.preventDefault();
+            submitOtp();
+        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
+        React__default["default"].createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
+                phone: `<strong>${displayPhone}</strong>`,
+            }), footer: React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(core.Button, { 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["default"].createElement(core.Button, { 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["default"].createElement("div", { className: "leadgen-form_inner" },
+                React__default["default"].createElement(index$2.Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
+                    React__default["default"].createElement(index$2.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 } = React.useContext(LeadGenContext);
+    const { isMobile } = useScreenSize.useScreenSize();
+    const [open, setOpen] = React.useState(!!campaignId);
+    const [showOtpPhone, setShowOtpPhone] = React.useState(null);
+    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
+    const [snap, setSnap] = React.useState(0.8);
+    const formRef = React.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 ');
+        return null;
+    }
+    React.useEffect(() => {
+        if (isLightBox || isFullscreen) {
+            document.body.classList.add('noscroll');
+        }
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
+        }
+        clearCacheUsedEmailOrPhone();
+    }, []);
+    const validatingPhoneRef = React.useRef(false);
+    const validatingEmailRef = React.useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+        userInfo,
+        format: (_a = (index$7.ISO_FORMAT[locale] || index$7.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) {
+            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 = React.useMemo(() => {
+        var _a;
+        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default["default"].createElement(core.Button, { 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["default"].createElement(React__default["default"].Fragment, null, LinkButtonBlock.map((item, index) => {
+        var _a, _b, _c;
+        return (React__default["default"].createElement(core.Button, { 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["default"].createElement("header", { className: core.clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
+        React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
+    const PopupEmpty = showEmpty && (React__default["default"].createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
+    const PopupForm = (React__default["default"].createElement(LeadFormProvider, { form: form },
+        React__default["default"].createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
+            React__default["default"].createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+                React__default["default"].createElement("div", { className: "leadgen-form_inner" },
+                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
+    const PopupOtp = showOtpPhone && (React__default["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["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["default"].createElement("div", { className: core.clsx('leadgen-content', {
+            'leadgen-content_small': limitFieldsLightBoxB,
+        }) },
+        !headerInsideFormContainer && PopupHeader,
+        !onlyHeader && (React__default["default"].createElement("div", { className: "leadgen-inner" },
+            PopupThankYou,
+            !showThankyou && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                PopupOtp,
+                PopupEmpty,
+                !(showOtpPhone || showEmpty) && PopupForm))))));
+    const styleOverlay = React.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["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        React__default["default"].createElement("div", { className: core.clsx('leadgen-wrapper', {
+                'leadgen-wrapper_small': limitFieldsLightBoxB,
+            }) },
+            showButtonClose && (React__default["default"].createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
+            PopupContent)));
+    const popupContainerClassName = core.clsx('leadgen', `leadgen-${currentLayout}`, {
+        'leadgen-lightbox': isLightBox,
+        'leadgen-inline': isInPage,
+        'leadgen-slider': isSlider,
     });
-    React.useEffect(() => {
-        setTimeout(() => {
-            if (resendTimer > 0) {
-                setResendTimer((r) => r - 1);
-            }
-        }, 1000);
-    }, [resendTimer]);
-    React.useEffect(() => {
-        if (autoSendWhenOpen && !resendTimer) {
-            sendOtp();
-        }
-    }, []);
-    return (React__default["default"].createElement("form", { onSubmit: (e) => {
-            e.preventDefault();
-            submitOtp();
-        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
-        React__default["default"].createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
-                phone: `<strong>${displayPhone}</strong>`,
-            }), footer: React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(core.Button, { 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["default"].createElement(core.Button, { 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["default"].createElement("div", { className: "leadgen-form_inner" },
-                React__default["default"].createElement(index$3.Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
-                    React__default["default"].createElement(index$3.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);
-                        } }))))));
+    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$a.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+        PopupWrapper,
+        React__default["default"].createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+        isFullscreen ? (React__default["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["default"].createElement(SideBarLayout, { content: PopupContainer });
+    }
+    else if (isInline) {
+        return (React__default["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["default"].createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
+        currentLayout == 'SkinA' ? (React__default["default"].createElement("aside", { className: "le-only-desktop" },
+            React__default["default"].createElement("div", { className: "le-skin-a-desktop" },
+                React__default["default"].createElement("div", { style: { position: 'relative' } },
+                    React__default["default"].createElement("img", { src: imageDesktop, style: {
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default["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["default"].createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
+                    React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default["default"].createElement("aside", { className: "le-only-desktop" },
+            React__default["default"].createElement("div", { className: "" },
+                React__default["default"].createElement("div", { style: { position: 'relative', zIndex: 10000 } },
+                    React__default["default"].createElement("img", { src: imageDesktop, style: {
+                            width: '100%',
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default["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["default"].createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default["default"].createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
+        React__default["default"].createElement("aside", { className: "le-only-mobile" },
+            React__default["default"].createElement("div", { className: "le-skin-mobile" },
+                React__default["default"].createElement("div", { style: { position: 'relative' } },
+                    index$6.isVideo(imageMobile) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true },
+                        React__default["default"].createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default["default"].createElement("img", { src: imageMobile, style: {
+                            width: '100%',
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } })),
+                    React__default["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["default"].createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default["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 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, }) => {
+const TabLayout = ({ popupId, url, newTab, image, onClose, onOtherSubmit, }) => {
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default["default"].createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
+        React__default["default"].createElement("div", { className: "le-tab-popup" },
+            React__default["default"].createElement("div", { style: { position: 'relative' } },
+                React__default["default"].createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    React__default["default"].createElement("img", { className: "js-popup-other-submit", src: image, style: {
+                            aspectRatio: `${imageWidth}/${imageHeight}`,
+                        } })),
+                React__default["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) {
     var _a, _b;
-    const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { isMobile } = useScreenSize.useScreenSize();
-    const [open, setOpen] = React.useState(!!campaignId);
-    const [showOtpPhone, setShowOtpPhone] = React.useState(null);
-    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
-    const [snap, setSnap] = React.useState(0.8);
-    const formRef = React.useRef();
-    const onClose = () => {
-        if (showOtpPhone) {
-            setShowOtpPhone(null);
+    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;
         }
-        else {
-            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+        // Check the dataSponsoredId exists in the white list or not.
+        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
+        if (isExist) {
+            return true;
         }
-    };
-    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;
+        listCampaignDifferentSponsor.push({ id: c.id, rules: c.rules });
+        return false;
     }
-    React.useEffect(() => {
-        if (isLightBox || isFullscreen) {
-            document.body.classList.add('noscroll');
-        }
-        if (!window.intlTelInputUtils) {
-            require('intl-tel-input/build/js/utils');
+    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;
         }
-        clearCacheUsedEmailOrPhone();
-    }, []);
-    const validatingPhoneRef = React.useRef(false);
-    const validatingEmailRef = React.useRef(false);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        validatingPhoneRef,
-        validatingEmailRef,
-        campaignId,
-        campaign_subot_id,
-        userInfo,
-        format: (_a = (index$7.ISO_FORMAT[locale] || index$7.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;
+        if (isTimeInRange(new Date(), startTime, endTime)) {
+            return true;
         }
-        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',
-                        };
+        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: miscCookieHelper.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 (!miscCookieHelper.getCookie('hhg-id')) {
+                miscCookieHelper.setCookie('hhg-id', uuid.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]);
                     }
-                }
-                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',
-                        };
+                    else {
+                        return false;
                     }
                 }
-                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',
-                        };
-                    }
+            });
+            // 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 (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;
+                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);
                         }
-                        setShowOtpPhone(newShowOtpPhone);
-                    })
-                        .finally(() => {
-                        setIsSubmitLoading(false);
+                        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,
                     });
-                    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 = React.useMemo(() => {
-        var _a;
-        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default["default"].createElement(core.Button, { 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["default"].createElement(React__default["default"].Fragment, null, LinkButtonBlock.map((item, index) => {
-        var _a, _b, _c;
-        return (React__default["default"].createElement(core.Button, { 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["default"].createElement("header", { className: core.clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
-        React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
-    const PopupEmpty = showEmpty && (React__default["default"].createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
-    const PopupForm = (React__default["default"].createElement(LeadFormProvider, { form: form },
-        React__default["default"].createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
-            React__default["default"].createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
-                React__default["default"].createElement("div", { className: "leadgen-form_inner" },
-                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
-    const PopupOtp = showOtpPhone && (React__default["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["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["default"].createElement("div", { className: core.clsx('leadgen-content', {
-            'leadgen-content_small': limitFieldsLightBoxB,
-        }) },
-        !headerInsideFormContainer && PopupHeader,
-        !onlyHeader && (React__default["default"].createElement("div", { className: "leadgen-inner" },
-            PopupThankYou,
-            !showThankyou && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                PopupOtp,
-                PopupEmpty,
-                !(showOtpPhone || showEmpty) && PopupForm))))));
-    const styleOverlay = React.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});}}`;
+            }
+            else {
+                LeadLog('🚧 No lead campaigns on current URL, tags');
+            }
         }
-        return styleContent;
-    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
-    const PopupWrapper = (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
-        React__default["default"].createElement("div", { className: core.clsx('leadgen-wrapper', {
-                'leadgen-wrapper_small': limitFieldsLightBoxB,
-            }) },
-            showButtonClose && (React__default["default"].createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
-            PopupContent)));
-    const popupContainerClassName = core.clsx('leadgen', `leadgen-${currentLayout}`, {
-        'leadgen-lightbox': isLightBox,
-        'leadgen-inline': isInPage,
-        'leadgen-slider': isSlider,
+    })
+        .catch((err) => {
+        LeadLog(`Lead error: `, err);
     });
-    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$b.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
-        PopupWrapper,
-        React__default["default"].createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
-        isFullscreen ? (React__default["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["default"].createElement(SideBarLayout, { content: PopupContainer });
-    }
-    else if (isInline) {
-        return (React__default["default"].createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
+}
+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);
     }
-    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["default"].createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
-        currentLayout == 'SkinA' ? (React__default["default"].createElement("aside", { className: "le-only-desktop" },
-            React__default["default"].createElement("div", { className: "le-skin-a-desktop" },
-                React__default["default"].createElement("div", { style: { position: 'relative' } },
-                    React__default["default"].createElement("img", { src: imageDesktop, style: {
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default["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["default"].createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
-                    React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default["default"].createElement("aside", { className: "le-only-desktop" },
-            React__default["default"].createElement("div", { className: "" },
-                React__default["default"].createElement("div", { style: { position: 'relative', zIndex: 10000 } },
-                    React__default["default"].createElement("img", { src: imageDesktop, style: {
-                            width: '100%',
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default["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["default"].createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default["default"].createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
-        React__default["default"].createElement("aside", { className: "le-only-mobile" },
-            React__default["default"].createElement("div", { className: "le-skin-mobile" },
-                React__default["default"].createElement("div", { style: { position: 'relative' } },
-                    index$8.isVideo(imageMobile) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true },
-                        React__default["default"].createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default["default"].createElement("img", { src: imageMobile, style: {
-                            width: '100%',
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        } })),
-                    React__default["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["default"].createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default["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["default"].createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
-        React__default["default"].createElement("div", { className: "le-tab-popup" },
-            React__default["default"].createElement("div", { style: { position: 'relative' } },
-                React__default["default"].createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    React__default["default"].createElement("img", { className: "js-popup-other-submit", src: image, style: {
-                            aspectRatio: `${imageWidth}/${imageHeight}`,
-                        } })),
-                React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
 };
 
 function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
@@ -4449,7 +3273,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 } = React.useContext(LeadGenContext$1);
+    const { apiUrl, siteDomain } = React.useContext(LeadGenContext);
     React.useEffect(() => {
         const gaCookie = miscCookieHelper.getCookie('_ga') || null;
         fetch(`${apiUrl}api/campaign/${code}/impression`, {
@@ -4844,7 +3668,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default["default"].createElement(LeadGenContext$1.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
+    return (React__default["default"].createElement(LeadGenContext.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
         React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
             React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$7.ZINDEX_SSO - 9e6 } },
                 React__default["default"].createElement(core.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) => {
@@ -4865,4 +3689,3 @@ LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close.Close;
 
 exports.LeadGen = LeadGen;
-exports.LeadGenSubscriptionBox = LeadGenSubscriptionBox;