@hhgtech/hhg-components 1.29.375 → 1.29.377-beta-1

package/build/lead.js

@@ -2,55 +2,76 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-a4e6f6fe.js');
+var tslib_es6 = require('./tslib.es6-01e64ef5.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-3d563929.js');
-var translationsContext = require('./translationsContext-55646101.js');
+var index = require('./index-64b63c16.js');
 var miscCookieHelper = require('./miscCookieHelper.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 index$1 = require('./index-0a73d8c3.js');
+var translationsContext = require('./translationsContext-adc177bc.js');
+var utils$1 = require('./utils-8540b9b5.js');
+var index$2 = require('./index-a5f3796f.js');
+var index$3 = require('./index-15e429ef.js');
+var index$5 = require('./index-8b294cc4.js');
+var index$4 = require('./index-d44227b8.js');
+require('./index.styles-cbc41136.js');
 var hooks = require('@mantine/hooks');
-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');
+require('./useMantineLocale-76876cec.js');
+var index$9 = require('./index-3d78afeb.js');
+require('./index-9e9d5c22.js');
+var index$7 = require('./index-f3ba8eaa.js');
+require('./other-b80616ea.js');
+require('./index-bcafdfd1.js');
+var utils = require('./utils-7609c557.js');
+var dates = require('@mantine/dates');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-b1415820.js');
+var index$6 = require('./index-cc378fad.js');
+var translationsProvider = require('./translationsProvider-88a463a2.js');
+var Locale = require('./Locale-82bdbbbd.js');
 var uuid = require('uuid');
-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 PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$9 = require('./index-b81a335e.js');
-var InputDate = require('./InputDate-9746e093.js');
-var Close = require('./Close-2add3da2.js');
+var react = require('@emotion/react');
+var togetherComponentGlobalContext = require('./utils-e872c45a.js');
+var index$8 = require('./index-013dd762.js');
+var index$b = require('./index-7eeee772.js');
+var useScreenSize = require('./useScreenSize-2091bf8d.js');
+var ReactDOM = require('react-dom');
+var index$a = require('./index-e7df401d.js');
+var InputDate = require('./InputDate-abe5f7d3.js');
+var Close = require('./Close-f1c64ef4.js');
+require('./constantsIsProduction.js');
+require('./normalizeLink-ac169899.js');
+require('./constantsDomainLocales.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
-require('./Locale-836a0da1.js');
 require('classnames');
-require('./useUniqueId-188a010a.js');
+require('./useUniqueId-ff8f4531.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-c007890c.js');
+require('slugify');
+require('string-format');
+require('./togetherApiPaths.js');
+require('./constants-f85af0d2.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -102,7 +123,7 @@ if (sessionStorage.getItem('insider_object')) {
 }
 const docLang = document.documentElement.lang;
 // TODO: country code
-const LEAD_LOCALE_DATA = {
+const LEAD_LOCALE_DATA$1 = {
     'vi-VN': {
         popupLang: 'vi',
         countryCode: 'vn',
@@ -144,7 +165,7 @@ const LEAD_LOCALE_DATA = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
+const LEAD_LOCALE = LEAD_LOCALE_DATA$1[docLang] || LEAD_LOCALE_DATA$1['vi-VN'];
 function LEAD_RESET_VAR() {
     // LEAD_CURRENT_URL = location.href.toLowerCase();
     LEAD_CURRENT_URL =
@@ -165,6 +186,11 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
+const LEADGEN_ACTIONS = {
+    SHOW: 'SHOW',
+    SCROLL: 'SCROLL',
+    TIME: 'TIME',
+};
 const LEADGEN_LAYOUT = {
     LightBoxA: 'LightBoxA',
     LightBoxB: 'LightBoxB',
@@ -194,8 +220,10 @@ const LEADGEN_BLOCK = {
     DropdownBlock: 'DropdownBlock',
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
+    TitleBlock: 'TitleBlock',
+    SubtitleBlock: 'SubtitleBlock',
 };
-const LEADGEN_BLOCK_IN_FORM = [
+const LEADGEN_BLOCK_INPUT = [
     LEADGEN_BLOCK.TextBlock,
     LEADGEN_BLOCK.NumberBlock,
     LEADGEN_BLOCK.DateBlock,
@@ -210,7 +238,59 @@ const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.CheckboxBlock,
     LEADGEN_BLOCK.TncBlock,
 ];
+const leadGenFieldNamePhone = (listBlockAdded) => {
+    return listBlockAdded
+        .filter(({ name }) => [
+        LEADGEN_BLOCK.PhoneBlock,
+        LEADGEN_BLOCK.PhoneOtpBlock,
+        LEADGEN_BLOCK.WhatsappOtpBlock,
+        LEADGEN_BLOCK.ZaloOtpBlock,
+    ].includes(name))
+        .map(({ data }) => data.value);
+};
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
+const LEAD_LOCALE_DATA = {
+    'vi-VN': {
+        popupLang: 'vi',
+        countryCode: 'vn',
+        countryCodeNumber: 84,
+    },
+    'id-ID': {
+        popupLang: 'id',
+        countryCode: 'id',
+        countryCodeNumber: 62,
+    },
+    'th-TH': {
+        popupLang: 'th',
+        countryCode: 'th',
+        countryCodeNumber: 66,
+    },
+    'ms-MY': {
+        popupLang: 'ms',
+        countryCode: 'my',
+        countryCodeNumber: 60,
+    },
+    'zh-TW': {
+        popupLang: 'zh',
+        countryCode: 'tw',
+        countryCodeNumber: 886,
+    },
+    'km-KH': {
+        popupLang: 'km',
+        countryCode: 'kh',
+        countryCodeNumber: 855,
+    },
+    'my-MM': {
+        popupLang: 'my',
+        countryCode: 'mm',
+        countryCodeNumber: 95,
+    },
+    'hi-IN': {
+        popupLang: 'hi',
+        countryCode: 'in',
+        countryCodeNumber: 91,
+    },
+};
 const mappingSSOToLead = (userInfoProps) => {
     var _a, _b;
     try {
@@ -226,7 +306,7 @@ const mappingSSOToLead = (userInfoProps) => {
                 if (ssoKey === 'birthday') {
                     const dob = dayjs__default["default"](initValue, 'YYYY-MM-DD', true);
                     if (dob.isValid()) {
-                        user.birthday = dob;
+                        user.birthday = dob.toDate();
                     }
                 }
                 else if (ssoKey === 'gender') {
@@ -249,16 +329,83 @@ const mappingSSOToLead = (userInfoProps) => {
     catch (error) {
         return;
     }
+};
+const formatCampaignDetail = (campaign) => {
+    if (!campaign) {
+        return {};
+    }
+    try {
+        const { extra_fields, thank_you_image } = campaign || {};
+        const { textBlocks: exTextBlocks, imageBlocks: exImageBlocks, listBlockAdded: exListBlockAdded, listBlockThankyou: exListBlockThankyou, actionBlocks: exActionBlocks, } = extra_fields;
+        const textBlocks = JSON.parse(exTextBlocks);
+        const imageBlocks = JSON.parse(exImageBlocks);
+        const listBlockAdded = JSON.parse(exListBlockAdded);
+        const listBlockThankyou = JSON.parse(exListBlockThankyou);
+        const actionBlocks = JSON.parse(exActionBlocks);
+        const ThankYouBlock = {
+            image: { src: thank_you_image },
+        };
+        listBlockThankyou.forEach((block) => {
+            const { name, data } = block || {};
+            const { value: htmlText, align, newtab, url } = data || {};
+            switch (name) {
+                case LEADGEN_BLOCK.TitleBlock: {
+                    ThankYouBlock.title = { htmlText, align };
+                }
+                case LEADGEN_BLOCK.SubtitleBlock: {
+                    ThankYouBlock.description = { htmlText, align };
+                }
+                case LEADGEN_BLOCK.LinkButtonBlock: {
+                    ThankYouBlock.button = { htmlText, newtab, url };
+                }
+            }
+        });
+        return Object.assign(Object.assign({}, campaign), { extra_fields: Object.assign(Object.assign({}, extra_fields), { textBlocks,
+                imageBlocks,
+                listBlockAdded,
+                listBlockThankyou,
+                actionBlocks }), ThankYouBlock });
+    }
+    catch (error) {
+        return {};
+    }
 };
 
 class Store {
     constructor() {
+        this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
         this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
         this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
     }
 }
 const leadStore = new Store();
 
+const METHOD = {
+    GET: 'get',
+    POST: 'POST',
+};
+const LEADGEN_API_PATH = {
+    V2_CAMPAIGN: 'api/v2/campaign',
+    V2_SUBSCRIPTION_LEAD: 'api/v2/subscription-box',
+    V2_SUBSCRIPTION_INFO: 'api/campaign/get-title',
+};
+const SSO_API_PATH = {
+    USER_UPDATE: 'api/user/update',
+};
+const ssoApi = {
+    call(_a) {
+        var { url, data } = _a, config = 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"]);
@@ -362,8 +509,54 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
         },
     });
 };
+const getCampaignByCode = (campaign_code) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
+        method: METHOD.GET,
+    });
+};
+const getSubscriptionBoxInfo = ({ category, site, }) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}`,
+        method: METHOD.GET,
+    });
+};
+const postSubscriptionBoxLead = ({ data }) => {
+    return leadApi.call({
+        url: LEADGEN_API_PATH.V2_SUBSCRIPTION_LEAD,
+        method: METHOD.POST,
+        data,
+    });
+};
+const postUserInfoFromLeadGen = ({ name }) => {
+    return ssoApi.call({
+        url: SSO_API_PATH.USER_UPDATE,
+        method: METHOD.POST,
+        data: { name },
+    });
+};
+const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
+    return leadApi.call({
+        url: `api/campaign/${code}/impression`,
+        method: METHOD.POST,
+        data: {
+            action,
+            title_article,
+            cookie_id,
+            ga_client_id,
+            url,
+            extra,
+            referrer,
+        },
+    });
+};
 const Service = {
     campaignGetById,
+    getCampaignByCode,
+    getSubscriptionBoxInfo,
+    postSubscriptionBoxLead,
+    postUserInfoFromLeadGen,
+    campaignPostImpression,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -470,7 +663,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.useTranslations();
+    const { t } = index$1.useTranslations();
     const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     React.useEffect(() => {
         if (!window.intlTelInputUtils) {
@@ -700,10 +893,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$1.Text, Object.assign({ size: "p3" }, rest), description)) : null;
+    return description ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "p3" }, rest), description)) : null;
 };
 
-const LeadGenContext = React.createContext({});
+const LeadGenContext$1 = React.createContext({});
 
 var useStyles$2 = core.createStyles(() => {
     return {
@@ -756,7 +949,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$2.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$3.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)))));
@@ -767,7 +960,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);
+    const { primaryColor } = React.useContext(LeadGenContext$1);
     const { classes, cx } = useStyles$2(undefined, {
         name: 'LeadGen__Field',
         styles,
@@ -785,15 +978,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$2.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$3.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$2.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$3.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$2.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                return (React__default["default"].createElement(index$3.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':
@@ -801,12 +994,12 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'ZaloOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                return (React__default["default"].createElement(index$2.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
+                return (React__default["default"].createElement(index$3.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$2.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
+                    React__default["default"].createElement(index$3.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)}
@@ -817,12 +1010,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$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(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("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$3.Button, { type: "button", size: "md", color: primaryColor, className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$4.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))));
@@ -831,26 +1024,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$2.Checkbox.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
+                    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: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, 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" }))))));
+                        } }, 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" }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    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" }))))));
+                    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" }))))));
             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$2.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$3.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$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 }))));
+                    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 }))));
         }
         return null;
     })));
@@ -877,12 +1070,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$1.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
+    return heading ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
 };
 
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
     var _a;
-    const { primaryColor } = React.useContext(LeadGenContext);
+    const { primaryColor } = React.useContext(LeadGenContext$1);
     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',
@@ -971,7 +1164,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$3.Button, Object.assign({ size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, loading: isSubmitLoading, color: primaryColor }, submitProps), popUpSubmitText))))));
+                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))))));
 };
 const Form = (props) => {
     const { showOtpPhone, showThankyou } = React.useContext(LeadGenComponentContext);
@@ -992,7 +1185,7 @@ var useStyles = core.createStyles(() => {
 });
 
 const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, styles, classNames, }) => {
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     const phone = otpData.phone;
     const otpType = otpData.type;
     const [otp, setOtp] = React.useState('');
@@ -1102,9 +1295,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$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) => {
+                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) => {
                     setIsDirty(true);
                     setOtp(v);
                     if (isDirty && !v)
@@ -1113,10 +1306,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$3.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
+                React__default["default"].createElement(index$4.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$3.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
+                React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
                         sendOtp();
                     }, disabled: !!resendTimer }, t('lead.otp.resend', {
                     timer: resendTimer ? ` (${resendTimer}s)` : '',
@@ -1397,148 +1590,1709 @@ const translationsMap = {
     'tl-PH': enPH,
 };
 const getTranslations = (locale) => {
-    const translations = translationsMap[locale];
+    const translations = Object.assign(Object.assign({}, translationsProvider.translationsMap[locale]), translationsMap[locale]);
     if (translations) {
         return translations;
     }
     return translationsMap['en-PH'];
 };
 
-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)
-        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$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$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}`,
-                        } }))),
-                React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
-};
-
-// title: titleText
-// titleAlign: textBlocks.titleBlock.data.align
-// subtitle: textBlocks.subtitleBlock.data.value
-// subtitleAlign: textBlocks.subtitleBlock.data.align
-// url: actionBlocks.linkButtonBlock.data.url
-// urlText: actionBlocks.linkButtonBlock.data.value
-// newTab: actionBlocks.linkButtonBlock.data.newtab
-// imageMobile: campaignShow.image
-// imageDesktop: campaignShow.image_desktop
-const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, subtitleAlign, newTab, imageDesktop, imageMobile, onClose, onOtherSubmit, }) => {
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
-    if (!imageMobileLoaded || !imageDesktopLoaded)
-        return null;
-    return (React__default["default"].createElement("div", { id: popupId, className: "lead-modal-wrapper lead-floating-wrapper", "data-popup-url": location.pathname, "data-popup-type": "floating" },
-        React__default["default"].createElement("aside", { className: "le-only-desktop" },
-            React__default["default"].createElement("div", { className: "le-floating-desktop" },
-                React__default["default"].createElement("div", { className: "le-floating-desktop-wrap", style: { position: 'relative', background: '#fff' } },
-                    imageDesktop ? (React__default["default"].createElement("div", null,
-                        React__default["default"].createElement("img", { style: {
-                                maxWidth: 120,
-                                borderTopLeftRadius: 5,
-                                borderBottomLeftRadius: 5,
-                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                            }, src: imageDesktop }))) : null,
-                    React__default["default"].createElement("div", { style: { padding: 20 } },
-                        React__default["default"].createElement("div", { className: `le-floating-desktop-title le-text-align-${titleAlign}` }, title),
-                        React__default["default"].createElement("div", { className: `le-floating-desktop-desc le-text-align-${subtitleAlign}` }, subtitle)),
-                    React__default["default"].createElement("a", { target: newTab ? 'blank' : '_parent', style: { marginLeft: 35, textDecoration: 'none' }, href: url },
-                        React__default["default"].createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText)),
-                    React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))),
-        React__default["default"].createElement("aside", { className: "le-only-mobile" },
-            React__default["default"].createElement("div", { className: "le-floating-mobile" },
-                React__default["default"].createElement("div", { className: "le-floating-mobile-wrap", style: { position: 'relative', background: '#fff' } },
-                    React__default["default"].createElement("aside", { style: { display: 'flex', justifyContent: 'space-between' } },
-                        React__default["default"].createElement("div", null,
-                            React__default["default"].createElement("div", { className: `le-floating-mobile-title le-text-align-${titleAlign}` }, title),
-                            React__default["default"].createElement("div", { className: `le-floating-mobile-desc le-text-align-${subtitleAlign}` }, subtitle)),
-                        imageMobile ? (React__default["default"].createElement("div", null,
-                            React__default["default"].createElement("img", { style: {
-                                    marginLeft: 15,
-                                    marginTop: 4,
-                                    maxWidth: 100,
-                                    aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                                }, src: imageMobile }))) : null),
-                    React__default["default"].createElement("div", { style: { textAlign: 'center', marginTop: 10 } },
-                        React__default["default"].createElement("a", { target: newTab ? 'blank' : '_parent', href: url, style: { textDecoration: 'none' } },
-                            React__default["default"].createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText))),
-                    React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+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 ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
-    const { primaryColor } = React.useContext(LeadGenContext);
-    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
+// import mockLeadData from './mockLeadData'
+const listCampaignScheduled = [];
+const listCampaignScheduledToActivated = [];
+const listCampaignActiveButExpired = [];
+const listCampaignExcludeSonsored = [];
+const listCampaignDifferentSponsor = [];
+const listCampaignNotDisplayInRangeOfTime = [];
+function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
+}
+const getShuffleArray = (array) => {
+    const newArray = [...array];
+    for (let i = newArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        const temp = newArray[i];
+        newArray[i] = newArray[j];
+        newArray[j] = temp;
+    }
+    return newArray;
+};
+const getTimeByTimezone = (timeZone = 'UTC') => {
+    const date = new Date();
+    return new Date(date.toLocaleString('en-US', { timeZone }));
+};
+const parseDateByCampaignTime = (dateStr) => {
+    // Format like this: 2023-04-04 00:00:00
+    try {
+        const [datePart, timePart] = dateStr.split(' ');
+        const [year, month, day] = datePart.split('-').map(Number);
+        const [hours, minutes, seconds] = timePart.split(':').map(Number);
+        /** JavaScript counts months from 0 to 11 */
+        return new Date(year, month - 1, day, hours, minutes, seconds);
+    }
+    catch (err) {
         return null;
-    return (React__default["default"].createElement("div", { className: "lead-modal__thank-you leadgen-inner_thankyou" },
-        React__default["default"].createElement("div", { style: { width: '100%' } },
-            React__default["default"].createElement("img", { src: image, style: {
-                    maxHeight: 162,
-                    objectFit: 'cover',
-                    aspectRatio: `${imageWidth}/${imageHeight}`,
-                }, loading: "lazy" }),
-            title && (React__default["default"].createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
-            subtitle && (React__default["default"].createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
-                const isShowBr = idx < list.length - 1;
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    text,
-                    isShowBr && React__default["default"].createElement("br", null)));
-            }))),
-            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$3.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
+    }
+};
+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);
+/** https://hhgdev.atlassian.net/browse/EL-565 */
+const LEADGEN_MAP_VALIDATE = {
+    name: 'leadgen.message.error.name_required',
+};
+// 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;
+                const { data } = block || {};
+                const { value: fieldName } = data;
+                if (!formRef.current.isTouched(name))
+                    return;
+                if ((typeof value === 'string' && value.trim() === '') ||
+                    typeof value === 'undefined' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return isBLockRequired
+                        ? t((LEADGEN_MAP_VALIDATE === null || LEADGEN_MAP_VALIDATE === void 0 ? void 0 : LEADGEN_MAP_VALIDATE[fieldName]) ||
+                            '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('leadgen.message.error.phone_invalid');
+                        }
+                        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;
+    }
+  }
+
+  ${utils$1.MediaQueries.mbUp} {
+    .leadgen-subscription_box_body {
+      display: flex;
+      > form {
+        flex: 1;
+        min-width: 0;
+
+        .leadgen-form_inputs {
+          .leadgen-form_input {
+            width: calc(50% - 4px);
+          }
+        }
+      }
+
+      .leadgen-btn {
+        margin-top: 0;
+        margin-left: 8px;
+        width: auto;
+        min-height: 56px;
+      }
+    }
+  }
+
+  ${utils$1.MediaQueries.smbDown} {
+    &[data-type='subscription_box_A'] {
+      border-inline: 0;
+      border-radius: 0;
+      margin-inline: -16px;
+      box-shadow: 0px 0px 1px 0px #0000000a, 0px 0px 2px 0px #0000000f,
+        0px 4px 8px 0px #0000000a;
+    }
+  }
+`;
+const StyledLeadGenSubscriptionBoxA = styled__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)) {
+                        const userInfoPhone = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code) + (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone);
+                        ssoValues['sso_verified_profile'] =
+                            phone.number === userInfoPhone ? 1 : 0;
+                        ssoValues['sso_user_id'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
+                        ssoValues['sso_uuid'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid;
+                        LeadLog('** LeadGen SB userInfoPhone : ', userInfoPhone);
+                        LeadLog('** LeadGen SB userInfoPhoneInput : ', phone.number);
+                    }
+                }
+                continue;
+            }
+            newValues[key] = values[key];
+        }
+        setLoading(true);
+        try {
+            const reqValues = Object.assign(Object.assign({}, newValues), ssoValues);
+            const { _data } = (yield submitSubscriptionBox(reqValues)) || {};
+            const { model } = _data || {};
+            if (model && (model === null || model === void 0 ? void 0 : model.id)) {
+                setShowThankyou(true);
+                const metaValues = {
+                    blocks: listBlockAdded || [],
+                    isUpdateSso: false,
+                };
+                /**
+                 *  https://hhgdev.atlassian.net/browse/EL-468
+                 * 	This feature is just using in Subscription Box
+                 */
+                if (newValues === null || newValues === void 0 ? void 0 : newValues.name) {
+                    const { _data: ssoData, code: ssoErrorCode } = yield Service.postUserInfoFromLeadGen({ name: newValues === null || newValues === void 0 ? void 0 : newValues.name });
+                    if (ssoErrorCode && !ssoData) {
+                        return;
+                    }
+                    metaValues.isUpdateSso = true;
+                    onFinish === null || onFinish === void 0 ? void 0 : onFinish(reqValues, metaValues);
+                    return;
+                }
+                onFinish === null || onFinish === void 0 ? void 0 : onFinish(reqValues, metaValues);
+            }
+        }
+        catch (error) {
+            LeadLog('** LeadGen SubscriptionBox error : ', error);
+            pushNotifications({
+                message: t('leadgen.message.error.default'),
+                type: 'danger',
+            });
+        }
+        setLoading(false);
+    }), [
+        subscription_title,
+        listBlockAdded,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.id,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
+    ]);
+    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, { "data-type": "subscription_box_A" },
+            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)
+        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" },
+                        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" },
+                        React__default["default"].createElement("source", { src: imageDestkop }))) : (React__default["default"].createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
+                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
+                        } }))),
+                React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
+};
+
+// title: titleText
+// titleAlign: textBlocks.titleBlock.data.align
+// subtitle: textBlocks.subtitleBlock.data.value
+// subtitleAlign: textBlocks.subtitleBlock.data.align
+// url: actionBlocks.linkButtonBlock.data.url
+// urlText: actionBlocks.linkButtonBlock.data.value
+// newTab: actionBlocks.linkButtonBlock.data.newtab
+// imageMobile: campaignShow.image
+// imageDesktop: campaignShow.image_desktop
+const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, subtitleAlign, newTab, imageDesktop, imageMobile, onClose, onOtherSubmit, }) => {
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
+    if (!imageMobileLoaded || !imageDesktopLoaded)
+        return null;
+    return (React__default["default"].createElement("div", { id: popupId, className: "lead-modal-wrapper lead-floating-wrapper", "data-popup-url": location.pathname, "data-popup-type": "floating" },
+        React__default["default"].createElement("aside", { className: "le-only-desktop" },
+            React__default["default"].createElement("div", { className: "le-floating-desktop" },
+                React__default["default"].createElement("div", { className: "le-floating-desktop-wrap", style: { position: 'relative', background: '#fff' } },
+                    imageDesktop ? (React__default["default"].createElement("div", null,
+                        React__default["default"].createElement("img", { style: {
+                                maxWidth: 120,
+                                borderTopLeftRadius: 5,
+                                borderBottomLeftRadius: 5,
+                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                            }, src: imageDesktop }))) : null,
+                    React__default["default"].createElement("div", { style: { padding: 20 } },
+                        React__default["default"].createElement("div", { className: `le-floating-desktop-title le-text-align-${titleAlign}` }, title),
+                        React__default["default"].createElement("div", { className: `le-floating-desktop-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                    React__default["default"].createElement("a", { target: newTab ? 'blank' : '_parent', style: { marginLeft: 35, textDecoration: 'none' }, href: url },
+                        React__default["default"].createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText)),
+                    React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))),
+        React__default["default"].createElement("aside", { className: "le-only-mobile" },
+            React__default["default"].createElement("div", { className: "le-floating-mobile" },
+                React__default["default"].createElement("div", { className: "le-floating-mobile-wrap", style: { position: 'relative', background: '#fff' } },
+                    React__default["default"].createElement("aside", { style: { display: 'flex', justifyContent: 'space-between' } },
+                        React__default["default"].createElement("div", null,
+                            React__default["default"].createElement("div", { className: `le-floating-mobile-title le-text-align-${titleAlign}` }, title),
+                            React__default["default"].createElement("div", { className: `le-floating-mobile-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                        imageMobile ? (React__default["default"].createElement("div", null,
+                            React__default["default"].createElement("img", { style: {
+                                    marginLeft: 15,
+                                    marginTop: 4,
+                                    maxWidth: 100,
+                                    aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                                }, src: imageMobile }))) : null),
+                    React__default["default"].createElement("div", { style: { textAlign: 'center', marginTop: 10 } },
+                        React__default["default"].createElement("a", { target: newTab ? 'blank' : '_parent', href: url, style: { textDecoration: 'none' } },
+                            React__default["default"].createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText))),
+                    React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+};
+
+const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
+    const { primaryColor } = React.useContext(LeadGenContext$1);
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default["default"].createElement("div", { className: "lead-modal__thank-you leadgen-inner_thankyou" },
+        React__default["default"].createElement("div", { style: { width: '100%' } },
+            React__default["default"].createElement("img", { src: image, style: {
+                    maxHeight: 162,
+                    objectFit: 'cover',
+                    aspectRatio: `${imageWidth}/${imageHeight}`,
+                }, loading: "lazy" }),
+            title && (React__default["default"].createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
+            subtitle && (React__default["default"].createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
+                const isShowBr = idx < list.length - 1;
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    text,
+                    isShowBr && React__default["default"].createElement("br", null)));
+            }))),
+            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)))))));
 };
 
 const InlineLayout = ({ content, inlinePosition, }) => {
@@ -1651,257 +3405,41 @@ const InlineLayout = ({ content, inlinePosition, }) => {
     return ReactDOM.createPortal(content, target);
 };
 
-const SideBarLayout = ({ content }) => {
-    const targets = React.useMemo(() => {
-        const targetDoms = Array.from(document.querySelectorAll('.hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar'));
-        targetDoms.forEach((dom) => {
-            if (dom.querySelector('.sidebar-lead-modal-wrapper'))
-                return;
-            const wrapper = document.createElement('div');
-            wrapper.classList.add('sidebar-lead-modal-wrapper');
-            dom.prepend(wrapper);
-        });
-        return targetDoms.map((d) => d.querySelector('.sidebar-lead-modal-wrapper'));
-    }, []);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, targets.map((target) => ReactDOM.createPortal(content, utils$1.getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
-};
-
-const EmptyIcon = (props) => {
-    const { className, style } = props;
-    return (React__default["default"].createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default["default"].createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
-        React__default["default"].createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
-        React__default["default"].createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
-};
-
-const EmptyComponent = ({ onClose, onContinue, }) => {
-    const { t } = 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" },
-                React__default["default"].createElement(EmptyIcon, { className: "leadgen-empty_image" }),
-                React__default["default"].createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
-        React__default["default"].createElement("div", { className: "leadgen-empty_footer" },
-            React__default["default"].createElement(core.Button, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
-            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 SideBarLayout = ({ content }) => {
+    const targets = React.useMemo(() => {
+        const targetDoms = Array.from(document.querySelectorAll('.hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar'));
+        targetDoms.forEach((dom) => {
+            if (dom.querySelector('.sidebar-lead-modal-wrapper'))
+                return;
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('sidebar-lead-modal-wrapper');
+            dom.prepend(wrapper);
+        });
+        return targetDoms.map((d) => d.querySelector('.sidebar-lead-modal-wrapper'));
+    }, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, targets.map((target) => ReactDOM.createPortal(content, utils$1.getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
+};
+
+const EmptyIcon = (props) => {
+    const { className, style } = props;
+    return (React__default["default"].createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
+        React__default["default"].createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
+        React__default["default"].createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
+        React__default["default"].createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
+};
+
+const EmptyComponent = ({ onClose, onContinue, }) => {
+    const { t } = index$1.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" },
+                React__default["default"].createElement(EmptyIcon, { className: "leadgen-empty_image" }),
+                React__default["default"].createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
+        React__default["default"].createElement("div", { className: "leadgen-empty_footer" },
+            React__default["default"].createElement(core.Button, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
+            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 SubtitleBlock = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const cssInputNotShrink = react.css `
@@ -2228,11 +3766,13 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            $focusEl.scrollIntoView({
-                behavior: 'auto',
-                block: 'center',
-                inline: 'start',
-            });
+            setTimeout(() => {
+                $focusEl.scrollIntoView({
+                    behavior: 'auto',
+                    block: 'center',
+                    inline: 'start',
+                });
+            }, 100);
         }
     }, [shrink]);
     React.useEffect(() => {
@@ -2249,13 +3789,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.useTranslations();
+    const { t } = index$1.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$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); });
+            .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); });
     }, [locale]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
@@ -2298,7 +3838,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$2.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
+                            React__default["default"].createElement(index$3.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))))));
             }
@@ -2314,7 +3854,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$9.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$a.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))));
@@ -2323,7 +3863,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$2.Checkbox.Group, Object.assign({ withAsterisk: required, 
+                    React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
                         label: placeholder, size: "md", sx: {
                             display: 'flex',
@@ -2332,19 +3872,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$2.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$3.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$2.Radio.Group, Object.assign({ withAsterisk: required, 
+                    React__default["default"].createElement(index$3.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$2.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$3.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$2.Select
+                    React__default["default"].createElement(index$3.Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
@@ -2356,7 +3896,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$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)))));
+                        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)))));
         }
         return null;
     })));
@@ -2422,842 +3962,498 @@ const FormContainer = (_a) => {
     var { title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = tslib_es6.__rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
     const HeaderContent = (React__default["default"].createElement("div", { className: "leadgen-form_header" },
         React__default["default"].createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
-        !!description && (React__default["default"].createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } }))));
-    if (!title && !description) {
-        return null;
-    }
-    return (React__default["default"].createElement(StyledFormContainer, Object.assign({ className: core.clsx(className, 'leadgen-form_container'), style: style }, restProps),
-        React__default["default"].createElement("div", { className: "leadgen-form_wrapper" },
-            !!header && (React__default["default"].createElement("div", { className: "leadgen-form_scrollable" },
-                header,
-                HeaderContent,
-                React__default["default"].createElement("div", { className: "leadgen-form_body" }, children))),
-            !header && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                HeaderContent,
-                React__default["default"].createElement("div", { className: "leadgen-form_body" }, children))),
-            React__default["default"].createElement("div", { className: "leadgen-form_footer" }, footer))));
-};
-
-const StyleHeaderImage = styled__default["default"].div `
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  padding-top: ${({ paddingTop }) => paddingTop}%;
-  .leadgen-header_image_feature {
-    position: absolute;
-    inset: 0;
-    min-width: 100%;
-    min-height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    object-position: center;
-  }
-`;
-const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
-    if (!src) {
-        return null;
-    }
-    return (React__default["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);
-    const { t } = index.useTranslations();
-    const phone = otpData.phone;
-    const otpType = otpData.type;
-    const [otp, setOtp] = React.useState('');
-    const [isDirty, setIsDirty] = React.useState(false);
-    const [resendTimer, setResendTimer] = React.useState(autoSendWhenOpen ? 0 : 60);
-    const inputRef = React.useRef(null);
-    const [errorMsg, setErrorMsg] = React.useState();
-    const [displayPhone, setDisplayPhone] = React.useState('');
-    const formatPhoneNumberIntlRef = React.useRef();
-    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
-    React.useEffect(() => {
-        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            if (!formatPhoneNumberIntlRef.current) {
-                const res = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-phone-number-input')); });
-                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
-            }
-            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
-        }))();
-    }, [phone]);
-    const sendOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!phone) {
-            return;
-        }
-        const res = yield Service.sendSMSOtpLead({
-            phone,
-            type: otpType,
-        });
-        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
-        if (respMessage === 'Send sms successfully' ||
-            respMessage === 'Send WhatsApp successfully' ||
-            respMessage === 'Send Zalo successfully') {
-            setResendTimer(60);
-            setTimeout(() => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                    inputRef.current.scrollIntoView({ block: 'center' });
-                }
-            }, 100);
-        }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
-        }
-        else {
-            setErrorMsg(respMessage || 'Something went wrong!');
-            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
-            // setStatusVerifyOTP('idle')
-            // pushNotifications({
-            //   title: respMessage || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-    });
-    const submitOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        if (!phone || !otp) {
-            return;
-        }
-        setIsSubmitLoading(true);
-        const res = yield Service.verifyOtpLead({
-            phone,
-            otp,
-            type: otpType,
-        });
-        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
-        if (respMessage === 'Verify successfully' ||
-            respMessage === 'Verify WhatsApp OTP sucess' ||
-            respMessage === 'Verify Zalo OTP sucess') {
-            onSuccess();
-        }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
-        }
-        else {
-            setErrorMsg(respMessage || 'something Wrong');
-            // setIsShowError(true)
-            // setStatusVerifyOTP('sent')
-            // pushNotifications({
-            //   title: res?._messages[0] || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-        setIsSubmitLoading(false);
-    });
-    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 ');
+        !!description && (React__default["default"].createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } }))));
+    if (!title && !description) {
+        return null;
+    }
+    return (React__default["default"].createElement(StyledFormContainer, Object.assign({ className: core.clsx(className, 'leadgen-form_container'), style: style }, restProps),
+        React__default["default"].createElement("div", { className: "leadgen-form_wrapper" },
+            !!header && (React__default["default"].createElement("div", { className: "leadgen-form_scrollable" },
+                header,
+                HeaderContent,
+                React__default["default"].createElement("div", { className: "leadgen-form_body" }, children))),
+            !header && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                HeaderContent,
+                React__default["default"].createElement("div", { className: "leadgen-form_body" }, children))),
+            React__default["default"].createElement("div", { className: "leadgen-form_footer" }, footer))));
+};
+
+const StyleHeaderImage = styled__default["default"].div `
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding-top: ${({ paddingTop }) => paddingTop}%;
+  .leadgen-header_image_feature {
+    position: absolute;
+    inset: 0;
+    min-width: 100%;
+    min-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+`;
+const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
+    if (!src) {
         return null;
     }
+    return (React__default["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" }))));
+};
+
+const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
+    const { primaryColor } = React.useContext(LeadGenContext$1);
+    const { t } = index$1.useTranslations();
+    const phone = otpData.phone;
+    const otpType = otpData.type;
+    const [otp, setOtp] = React.useState('');
+    const [isDirty, setIsDirty] = React.useState(false);
+    const [resendTimer, setResendTimer] = React.useState(autoSendWhenOpen ? 0 : 60);
+    const inputRef = React.useRef(null);
+    const [errorMsg, setErrorMsg] = React.useState();
+    const [displayPhone, setDisplayPhone] = React.useState('');
+    const formatPhoneNumberIntlRef = React.useRef();
+    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
     React.useEffect(() => {
-        if (isLightBox || isFullscreen) {
-            document.body.classList.add('noscroll');
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (!formatPhoneNumberIntlRef.current) {
+                const res = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-phone-number-input')); });
+                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
+            }
+            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
+        }))();
+    }, [phone]);
+    const sendOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!phone) {
+            return;
         }
-        if (!window.intlTelInputUtils) {
-            require('intl-tel-input/build/js/utils');
+        const res = yield Service.sendSMSOtpLead({
+            phone,
+            type: otpType,
+        });
+        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+        if (respMessage === 'Send sms successfully' ||
+            respMessage === 'Send WhatsApp successfully' ||
+            respMessage === 'Send Zalo successfully') {
+            setResendTimer(60);
+            setTimeout(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.scrollIntoView({ block: 'center' });
+                }
+            }, 100);
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'Something went wrong!');
+            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
+            // setStatusVerifyOTP('idle')
+            // pushNotifications({
+            //   title: respMessage || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
         }
-        clearCacheUsedEmailOrPhone();
-    }, []);
-    const validatingPhoneRef = 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) {
+    const submitOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (!phone || !otp) {
             return;
         }
-        setTimeout(() => {
-            form.onSubmit((v) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (Object.keys(form.errors).length)
-                    return;
-                let newShowOtpPhone = null;
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
-                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'phone',
-                        };
-                    }
-                }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock)) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
-                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'whatsapp',
-                        };
-                    }
-                }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
-                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'zalo',
-                        };
-                    }
-                }
-                if (newShowOtpPhone) {
-                    setIsSubmitLoading(true);
-                    Service.sendSMSOtpLead(newShowOtpPhone)
-                        .then((res) => {
-                        var _a;
-                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
-                        if (respMessage === 'This phone number was verified') {
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
-                            return;
-                        }
-                        setShowOtpPhone(newShowOtpPhone);
-                    })
-                        .finally(() => {
-                        setIsSubmitLoading(false);
-                    });
-                    return;
-                }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
-            })(e);
-        }, 100);
-    };
-    const onOpenChange = (_open) => {
-        setOpen(_open);
-        if (!_open) {
-            setTimeout(() => {
-                onClose();
-            }, 250);
-        }
-    };
-    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
-    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
-    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
-    const renderAfterImageSizes = imageMobileLoaded &&
-        imageDesktopLoaded &&
-        (isFullscreen ? imageBackgroundLoaded : true);
-    const ButtonSubmit = 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});}`;
+        setIsSubmitLoading(true);
+        const res = yield Service.verifyOtpLead({
+            phone,
+            otp,
+            type: otpType,
+        });
+        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
+        if (respMessage === 'Verify successfully' ||
+            respMessage === 'Verify WhatsApp OTP sucess' ||
+            respMessage === 'Verify Zalo OTP sucess') {
+            onSuccess();
         }
-        if (!isMobile && imageOverlayDesktop) {
-            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
         }
-        return styleContent;
-    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
-    const PopupWrapper = (React__default["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,
+        else {
+            setErrorMsg(respMessage || 'something Wrong');
+            // setIsShowError(true)
+            // setStatusVerifyOTP('sent')
+            // pushNotifications({
+            //   title: res?._messages[0] || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+        setIsSubmitLoading(false);
     });
-    const PopupContainer = isDrawer ? (React__default["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 }))))));
+    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);
+                        } }))))));
 };
 
 // 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" })))));
-};
-
-// import mockLeadData from './mockLeadData'
-const listCampaignScheduled = [];
-const listCampaignScheduledToActivated = [];
-const listCampaignActiveButExpired = [];
-const listCampaignExcludeSonsored = [];
-const listCampaignDifferentSponsor = [];
-const listCampaignNotDisplayInRangeOfTime = [];
-function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
-}
-const getShuffleArray = (array) => {
-    const newArray = [...array];
-    for (let i = newArray.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        const temp = newArray[i];
-        newArray[i] = newArray[j];
-        newArray[j] = temp;
-    }
-    return newArray;
-};
-const getTimeByTimezone = (timeZone = 'UTC') => {
-    const date = new Date();
-    return new Date(date.toLocaleString('en-US', { timeZone }));
-};
-const parseDateByCampaignTime = (dateStr) => {
-    // Format like this: 2023-04-04 00:00:00
-    try {
-        const [datePart, timePart] = dateStr.split(' ');
-        const [year, month, day] = datePart.split('-').map(Number);
-        const [hours, minutes, seconds] = timePart.split(':').map(Number);
-        /** JavaScript counts months from 0 to 11 */
-        return new Date(year, month - 1, day, hours, minutes, seconds);
-    }
-    catch (err) {
-        return null;
-    }
-};
-const checkCampaignNowInTimeframe = (c) => {
-    var _a;
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    if (!startedDate || !endedDate) {
-        return false;
-    }
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    if (nowWithTimezoneMs <= endedDate.getTime() &&
-        nowWithTimezoneMs >= startedDate.getTime()) {
-        listCampaignScheduledToActivated.push(c);
-        return true;
-    }
-    return false;
-};
-function checkCampaignActiveButExpireAlready(c) {
-    var _a;
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (c.forever === 1) {
-        return true;
-    }
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (!startedDate || !endedDate) {
-        return true;
-    }
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    /** Check if this expire already, do not show */
-    if (nowWithTimezoneMs > endedDate.getTime()) {
-        listCampaignActiveButExpired.push(c);
-        return false;
-    }
-    return true;
-}
-function shouldNotDisplayIfExcludeAllSponsors(c) {
-    var _a;
-    const excludeSponsored = Number((_a = c.rules.find((i) => i.rule == 'exclude_sponsored')) === null || _a === void 0 ? void 0 : _a.value);
-    const isSponsored = Boolean(document.querySelector('.hhg-disclaimer-text'));
-    if (isSponsored && excludeSponsored) {
-        listCampaignExcludeSonsored.push(c);
-        return true;
-    }
-    return false;
-}
-function shouldDisplayWithCurrentSponsor(c) {
+const LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE = [
+    LEADGEN_LAYOUT.Fullscreen,
+    LEADGEN_LAYOUT.Slider,
+];
+const LEADGEN_LIMIT_LIGHTBOXB = 6;
+const LEADGEN_SHOW_HEADER = [
+    'LightBoxA',
+    'InlineA',
+    LEADGEN_LAYOUT.Sidebar,
+    LEADGEN_LAYOUT.Slider,
+];
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
-    try {
-        // TODO: BE will rename `exclude_sponsored_list` later
-        const stringOrArray = (_a = c.rules.find((i) => i.rule == 'exclude_sponsored_list')) === null || _a === void 0 ? void 0 : _a.value;
-        const whiteListSponsors = stringOrArray instanceof Array ? stringOrArray : JSON.parse(stringOrArray);
-        const dataSponsoredId = Number((_b = document
-            .querySelector('[data-sponsored-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-sponsored-id'));
-        // There is no config for sponsor id and white list, should show as default
-        if (!dataSponsoredId ||
-            dataSponsoredId <= 0 ||
-            whiteListSponsors.length === 0) {
-            return true;
+    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);
         }
-        // Check the dataSponsoredId exists in the white list or not.
-        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
-        if (isExist) {
-            return true;
+        else {
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
         }
-        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);
+    };
+    const textBlocks = JSON.parse(extraFields.textBlocks);
+    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
+    const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const popUpSubmitText = actionBlocks.submitBlock.data.value;
+    const currentPath = location.pathname;
+    const { align: descriptionAlign, value: description } = textBlocks.subtitleBlock.data || {};
+    const { align: titleAlign } = textBlocks.titleBlock.data || {};
+    const isSlider = currentLayout === LEADGEN_LAYOUT.Slider;
+    const isSidebar = currentLayout === LEADGEN_LAYOUT.Sidebar;
+    const isLightBox = currentLayout.includes('LightBox');
+    const isLightBoxA = currentLayout === LEADGEN_LAYOUT.LightBoxA;
+    const isLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB;
+    const isInline = currentLayout.includes('Inline');
+    const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
+    const isInPage = isInline || isSidebar;
+    const isDrawer = isLightBoxB && isMobile;
+    const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
+    const hasForm = isLightBoxA
+        ? listBlockAdded.some((item) => LEADGEN_BLOCK_INPUT.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+        : true;
+    const headerInsideFormContainer = isSlider || isLightBoxA || isFullscreen;
+    const showHeader = !!imageMobile || !!imageDesktop;
+    const onlyHeader = !title && !description;
+    const showButtonClose = !isInline;
+    if (window.innerWidth < 769 &&
+        LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
+        console.log('😎 Not show fullscreen, slider on mobile ');
+        return null;
     }
-    return false;
-};
-const fillterApprearanceTimeCampaign = (c) => {
-    var _a;
-    try {
-        const isTimeInRange = (currentTime, startTime, endTime) => {
-            const startParts = startTime.split(':');
-            const endParts = endTime.split(':');
-            const startDate = new Date();
-            startDate.setHours(Number(startParts[0]), Number(startParts[1]), 0, 0);
-            const endDate = new Date();
-            endDate.setHours(Number(endParts[0]), Number(endParts[1]), 0, 0);
-            return currentTime >= startDate && currentTime <= endDate;
-        };
-        const rulesApprValue = (_a = c.rules.find((i) => i.rule == 'appearance_time')) === null || _a === void 0 ? void 0 : _a.value;
-        const startTime = rulesApprValue.startTime;
-        const endTime = rulesApprValue.endTime || '23:59';
-        if (!startTime) {
-            return true;
+    React.useEffect(() => {
+        if (isLightBox || isFullscreen) {
+            document.body.classList.add('noscroll');
         }
-        if (isTimeInRange(new Date(), startTime, endTime)) {
-            return true;
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
         }
-        listCampaignNotDisplayInRangeOfTime.push(c);
-        return false;
-    }
-    catch (err) {
-        return true;
-    }
-};
-let timeoutRef = null;
-let LEAD_SCROLL_EVENT = null;
-function clearPassiveEvent() {
-    if (timeoutRef) {
-        clearTimeout(timeoutRef);
-        timeoutRef = null;
-    }
-    if (LEAD_SCROLL_EVENT) {
-        window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-        LEAD_SCROLL_EVENT = null;
-    }
-}
-function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
-    // clear previous passive event, check for new condition
-    clearPassiveEvent();
-    const leadCurrentUrl = DEBUG_URL ||
-        ('https://' +
-            location.hostname +
-            location.pathname +
-            location.search).toLowerCase();
-    fetch(leadApi + 'api/campaign/' + leadSiteId, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            url: leadCurrentUrl,
-            ga_client_id: 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);
+        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;
+        }
+        setTimeout(() => {
+            form.onSubmit((v) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                if (Object.keys(form.errors).length)
+                    return;
+                let newShowOtpPhone = null;
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
+                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'phone',
+                        };
+                    }
                 }
-                if (Number.isInteger(scrollRule)) {
-                    impressionAction = 'SCROLL';
-                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
-                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
-                        document.querySelector('body');
-                    const pct = $p.getBoundingClientRect().top;
-                    const pb = $p.offsetHeight;
-                    LeadLog(`👓 Element check scroll: `, $p);
-                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
-                        const wt = window.pageYOffset || document.documentElement.scrollTop;
-                        let percent = 0;
-                        if (wt >= pct) {
-                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
-                        }
-                        LeadLog('---Scroll', percent, scrollRule);
-                        // TODO: CHECK FOOTER HEIGHT
-                        if (percent >= scrollRule) {
-                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock)) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
+                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'whatsapp',
+                        };
+                    }
+                }
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
+                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'zalo',
+                        };
+                    }
+                }
+                if (newShowOtpPhone) {
+                    setIsSubmitLoading(true);
+                    Service.sendSMSOtpLead(newShowOtpPhone)
+                        .then((res) => {
+                        var _a;
+                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+                        if (respMessage === 'This phone number was verified') {
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            return;
                         }
-                    };
-                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
-                        passive: true,
+                        setShowOtpPhone(newShowOtpPhone);
+                    })
+                        .finally(() => {
+                        setIsSubmitLoading(false);
                     });
+                    return;
                 }
-            }
-            else {
-                LeadLog('🚧 No lead campaigns on current URL, tags');
-            }
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+            })(e);
+        }, 100);
+    };
+    const onOpenChange = (_open) => {
+        setOpen(_open);
+        if (!_open) {
+            setTimeout(() => {
+                onClose();
+            }, 250);
         }
-    })
-        .catch((err) => {
-        LeadLog(`Lead error: `, err);
+    };
+    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
+    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
+    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
+    const renderAfterImageSizes = imageMobileLoaded &&
+        imageDesktopLoaded &&
+        (isFullscreen ? imageBackgroundLoaded : true);
+    const ButtonSubmit = 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});}}`;
+        }
+        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,
     });
-}
-const LeadLog = (...params) => {
-    if (process.env.NODE_ENV !== 'production' ||
-        (process.env.NEXT_PUBLIC_DEPLOY_ENV &&
-            process.env.NEXT_PUBLIC_DEPLOY_ENV !== 'production') ||
-        (typeof localStorage !== 'undefined' &&
-            localStorage.getItem('hhg_debug') === 'true')) {
-        console.log(...params);
+    const PopupContainer = isDrawer ? (React__default["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 }));
+    }
+    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') {
@@ -3273,7 +4469,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);
+    const { apiUrl, siteDomain } = React.useContext(LeadGenContext$1);
     React.useEffect(() => {
         const gaCookie = miscCookieHelper.getCookie('_ga') || null;
         fetch(`${apiUrl}api/campaign/${code}/impression`, {
@@ -3668,7 +4864,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default["default"].createElement(LeadGenContext.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
+    return (React__default["default"].createElement(LeadGenContext$1.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) => {
@@ -3689,3 +4885,4 @@ LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close.Close;
 
 exports.LeadGen = LeadGen;
+exports.LeadGenSubscriptionBox = LeadGenSubscriptionBox;