@hhgtech/hhg-components 1.29.358-beta-2 → 1.29.358-beta-3

package/build/lead.js

@@ -2,47 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-04a10581.js');
+var tslib_es6 = require('./tslib.es6-6b1cfb74.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-fbf149ea.js');
-var translationsContext = require('./translationsContext-413fe085.js');
+var index = require('./index-ff76ed2d.js');
+var translationsContext = require('./translationsContext-57f66cea.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var utils$1 = require('./utils-32810910.js');
-var index$1 = require('./index-05b9ca78.js');
-var index$2 = require('./index-e1853b05.js');
-var index$4 = require('./index-f8044024.js');
-var utils = require('./utils-55eb8342.js');
-var dates = require('@mantine/dates');
-var index$7 = require('./index-a5405974.js');
-require('./index-19ad226f.js');
-require('./index-72e51fe9.js');
-require('./useMantineLocale-fbbbe2fc.js');
-var index$5 = require('./index-cc75c3dc.js');
-require('./index.styles-d39cba6b.js');
+var utils$1 = require('./utils-3477b358.js');
+var index$1 = require('./index-68a15657.js');
+var index$2 = require('./index-a1e35f0e.js');
+var index$4 = require('./index-2805c84a.js');
+var utils = require('./utils-db88e1f0.js');
+require('@mantine/dates');
+var index$8 = require('./index-c0c4b849.js');
+require('./index-94931efa.js');
+require('./index-8cf81c7d.js');
+require('./useMantineLocale-63af12b7.js');
+var index$5 = require('./index-aee6e489.js');
+require('./index.styles-35f25c8b.js');
 var hooks = require('@mantine/hooks');
-require('./other-bff0cdfb.js');
-require('./index-03289e9d.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-50b9d0b8.js');
-var index$3 = require('./index-608d527a.js');
-var index$6 = require('./index-5f0e6e1c.js');
-var styled = require('@emotion/styled');
+require('./other-21a7da43.js');
+require('./index-ce3c1f14.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-4a26eef9.js');
+var index$3 = require('./index-8ba84075.js');
+var index$6 = require('./index-cb770834.js');
 var uuid = require('uuid');
+var index$7 = require('./index-799db6c5.js');
+var index$9 = require('./index-3d2e85dc.js');
+var useScreenSize = require('./useScreenSize-0c280791.js');
+var ReactDOM = require('react-dom');
 var react = require('@emotion/react');
+var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$8 = require('./index-10b5f5bc.js');
-var index$9 = require('./index-8e3454ef.js');
-var useScreenSize = require('./useScreenSize-71fb3d5d.js');
-var ReactDOM = require('react-dom');
-var Close = require('./Close-3cb8f40f.js');
+var Close = require('./Close-7a4b7517.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
-require('./Locale-b74a18e2.js');
+require('./Locale-34fa0b01.js');
 require('classnames');
-require('./useUniqueId-373f702e.js');
+require('./useUniqueId-2b3757d6.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('date-fns/locale');
@@ -101,7 +101,7 @@ if (sessionStorage.getItem('insider_object')) {
 }
 const docLang = document.documentElement.lang;
 // TODO: country code
-const LEAD_LOCALE_DATA$1 = {
+const LEAD_LOCALE_DATA = {
     'vi-VN': {
         popupLang: 'vi',
         countryCode: 'vn',
@@ -143,7 +143,7 @@ const LEAD_LOCALE_DATA$1 = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA$1[docLang] || LEAD_LOCALE_DATA$1['vi-VN'];
+const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
 function LEAD_RESET_VAR() {
     // LEAD_CURRENT_URL = location.href.toLowerCase();
     LEAD_CURRENT_URL =
@@ -164,11 +164,6 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
-const LEADGEN_ACTIONS = {
-    SHOW: 'SHOW',
-    SCROLL: 'SCROLL',
-    TIME: 'TIME',
-};
 const LEADGEN_LAYOUT = {
     LightBoxA: 'LightBoxA',
     LightBoxB: 'LightBoxB',
@@ -198,10 +193,8 @@ const LEADGEN_BLOCK = {
     DropdownBlock: 'DropdownBlock',
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
-    TitleBlock: 'TitleBlock',
-    SubtitleBlock: 'SubtitleBlock',
 };
-const LEADGEN_BLOCK_INPUT = [
+const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.TextBlock,
     LEADGEN_BLOCK.NumberBlock,
     LEADGEN_BLOCK.DateBlock,
@@ -217,48 +210,6 @@ const LEADGEN_BLOCK_INPUT = [
     LEADGEN_BLOCK.TncBlock,
 ];
 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 {
@@ -274,7 +225,7 @@ const mappingSSOToLead = (userInfoProps) => {
                 if (ssoKey === 'birthday') {
                     const dob = dayjs__default["default"](initValue, 'YYYY-MM-DD', true);
                     if (dob.isValid()) {
-                        user.birthday = dob.toDate();
+                        user.birthday = dob;
                     }
                 }
                 else if (ssoKey === 'gender') {
@@ -297,46 +248,6 @@ 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 {
@@ -347,13 +258,6 @@ class Store {
 }
 const leadStore = new Store();
 
-const LEADGEN_API_METHOD = {
-    GET: 'get',
-    POST: 'POST',
-};
-const LEADGEN_API_PATH = {
-    V2_CAMPAIGN: 'api/v2/campaign',
-};
 const leadApi = {
     call(_a) {
         var { url, data = undefined } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
@@ -457,39 +361,8 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
         },
     });
 };
-const campaignGetByCode = (campaign_code) => {
-    return leadApi.call({
-        url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
-        method: LEADGEN_API_METHOD.GET,
-    });
-};
-const campaignPostLead = ({ data }) => {
-    return leadApi.call({
-        url: 'api/v2/subscription-box',
-        method: LEADGEN_API_METHOD.POST,
-        data,
-    });
-};
-const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
-    return leadApi.call({
-        url: `api/campaign/${code}/impression`,
-        method: LEADGEN_API_METHOD.POST,
-        data: {
-            action,
-            title_article,
-            cookie_id,
-            ga_client_id,
-            url,
-            extra,
-            referrer,
-        },
-    });
-};
 const Service = {
     campaignGetById,
-    campaignGetByCode,
-    campaignPostLead,
-    campaignPostImpression,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -1491,1065 +1364,66 @@ const getTranslations = (locale) => {
 
 const LeadGenContext = React.createContext({});
 
-const LeadGenSubscriptionBoxContext = React.createContext({});
-const LeadGenSubscriptionBoxProvider = (props) => {
-    const { campaign_code, apiUrl: apiUrlProps, apiSubotUrl, locale, forceCampaign: forceCampaignProps, children, } = props;
-    const [forceCampaign, setForceCampaign] = React.useState(forceCampaignProps);
-    const leadGenSubscriptionBoxValue = React.useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [campaign_code, locale, forceCampaign]);
-    const translationContextValue = { locale, values: getTranslations(locale) };
+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(() => {
-        if (forceCampaignProps) {
-            setForceCampaign(forceCampaignProps);
-            return;
-        }
-        if (campaign_code) {
-            Service.campaignGetByCode(campaign_code).then((res) => {
-                const { _data } = res || {};
-                const { campaigns } = _data || {};
-                setForceCampaign(formatCampaignDetail(campaigns));
+        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;
         }
-    }, [campaign_code]);
-    React.useEffect(() => {
-        leadStore.apiLeadUrl = apiUrlProps;
-        leadStore.apiSubotUrl = apiSubotUrl;
-        return () => {
-            setForceCampaign(null);
-        };
-    }, []);
-    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        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(LeadGenSubscriptionBoxContext.Provider, { value: leadGenSubscriptionBoxValue },
-        React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: translationContextValue }, children)));
-};
-
-// You can give context variables any name
-const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
-const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
-    var _a;
-    const { t } = index.useTranslations();
-    const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
-    const LEAD_LOCALE = LEAD_LOCALE_DATA[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
-        LEAD_LOCALE_DATA['vi-VN'];
-    const validateObj = React.useMemo(() => {
-        const InputBlocks = [
-            'TextBlock',
-            'NumberBlock',
-            'EmailBlock',
-            'PhoneBlock',
-            'DateBlock',
-            'CheckboxBlock',
-            'RadioBlock',
-            'DropdownBlock',
-            'PhoneOtpBlock',
-            'WhatsappOtpBlock',
-            'ZaloOtpBlock',
-            'LocationBlock',
-            'TncBlock',
-        ];
-        // ALL are required and can skip if not touched yet
-        const withSharedCheck = (name, cb, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        block) => {
-            return (value) => {
-                var _a;
-                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
-                if (!formRef.current.isTouched(name))
-                    return;
-                if ((typeof value === 'string' && value.replace(' ', '') === '') ||
-                    typeof value === 'undefined' ||
-                    value === '' ||
-                    (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) => {
-            var _a;
-            const isRequired = (_a = b.data.required) !== null && _a !== void 0 ? _a : true;
-            if (b.name === 'NumberBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && isNaN(Number(value))) {
-                            return t('validator.number');
-                        }
-                    }, b) });
-            }
-            else if (b.name === 'EmailBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-                            return t('validator.email');
-                        }
-                        if (!value)
-                            return;
-                        validatingEmailRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(b.data.value, 'Validating...');
-                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                email: value,
-                            })
-                                .then((tKey) => {
-                                if (tKey) {
-                                    formRef.current.setFieldError(b.data.value, t(tKey));
-                                }
-                                else {
-                                    formRef.current.clearFieldError(b.data.value);
-                                }
-                                validatingEmailRef.current = false;
-                            })
-                                .catch((e) => {
-                                console.error(e);
-                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
-                                validatingEmailRef.current = false;
-                            });
-                        }, 200);
-                    }, b) });
-            }
-            else if (b.name === 'PhoneBlock' ||
-                b.name === 'PhoneOtpBlock' ||
-                b.name === 'ZaloOtpBlock' ||
-                b.name === 'WhatsappOtpBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (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(b.data.value, 'Validating...');
-                            if (b.data.singleSubmission) {
-                                checkUsedPhoneOnlyWithCache(campaignId, value)
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(b.data.value, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(b.data.value);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((err) => {
-                                    console.error(err);
-                                    formRef.current.setFieldError(b.data.value, err.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                            else {
-                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                    phone: value,
-                                })
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(b.data.value, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(b.data.value);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((e) => {
-                                    console.error(e);
-                                    formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                        }, 200);
-                    }, b) });
-            }
-            else if (b.name === 'DateBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && isNaN(Date.parse(value))) {
-                            return t('validator.date');
-                        }
-                    }, b) });
-            }
-            else if (b.name === '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), { [b.data.value]: withSharedCheck(b.data.value, undefined, b) });
-            }
-        }, {});
-    }, [listBlockAdded.map((b) => b.name).join(',')]);
-    const form = useLeadForm({
-        validateInputOnChange: true,
-        clearInputErrorOnChange: true,
-        validate: validateObj,
-        initialValues,
-    });
-    const formRef = React.useRef(form);
-    formRef.current = form;
-    return { form, validateObj };
-};
-
-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$2.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 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-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-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 LEADGEN_ORDER_INPUT_WRAPPER = [
-    'label',
-    'input',
-    'description',
-    'error',
-];
-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 = (values, event) => {
-        onFinish === null || onFinish === void 0 ? void 0 : onFinish(values, event);
-    };
-    const middlewareFinishFailed = (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);
-    };
-    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 '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 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: 600;
-    line-height: 1.4;
-    letter-spacing: -0.8px;
-  }
-`;
-const StyledLeadGenSubscriptionBox = styled__default["default"].div `
-  padding: 16px;
-  border: 1px solid ${miscTheme.theme.colors.neutral100};
-  border-radius: 12px;
-  margin-inline: auto;
-  .leadgen-form_inputs {
-    .leadgen-form_input {
-      width: 100%;
-    }
-  }
-
-  .leadgen-form_input {
-    .mantine-Input-wrapper {
-      max-height: 56px;
-    }
-  }
-
-  @media screen and (min-width: 768px) {
-    .leadgen-subscription_box_body {
-      display: flex;
-      > form {
-        flex: 1;
-        min-width: 0;
-
-        .leadgen-form_inputs {
-          .leadgen-form_input {
-            width: calc(50% - 4px);
-          }
-        }
-      }
-
-      .leadgen-btn {
-        margin-top: 0;
-        margin-left: 8px;
-        width: auto;
-        min-height: 56px;
-      }
-    }
-  }
-`;
-const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, siteId, siteDomain, forceCampaign, campaign_code, article_id, subscription_title: subscriptionTitleProps, }) => {
-    var _a, _b, _c;
-    const refContainer = React.useRef(null);
-    const validatingEmailRef = React.useRef(false);
-    const validatingPhoneRef = React.useRef(false);
-    const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
-    const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
-    const { submitBlock } = actionBlocks || {};
-    const [loading, setLoading] = React.useState(false);
-    const [showThankyou, setShowThankyou] = React.useState(false);
-    const formRef = React.useRef(null);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        campaignId: campaign_id,
-        campaign_subot_id,
-        validatingEmailRef,
-        validatingPhoneRef,
-        userInfo,
-    });
-    const subscription_title = React.useMemo(() => { var _a, _b; return subscriptionTitleProps || ((_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); }, [subscriptionTitleProps, (_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 { apiUrl } = React.useMemo(() => {
-        let apiUrl = leadStore.apiLeadUrl;
-        if (apiUrl.includes('localhost')) {
-            apiUrl = 'https://dev.leadgen.hellobacsi.com/';
-        }
-        return {
-            apiUrl,
-        };
-    }, [siteDomain, siteId]);
-    const url = React.useMemo(() => location.href.toLowerCase() || '', []);
-    const article_title = React.useMemo(() => document.title || '', []);
-    const cookie_id = React.useMemo(() => miscCookieHelper.getCookie('hhg-id') || null, []);
-    const ga_client_id = React.useMemo(() => miscCookieHelper.getCookie('_ga') || null, []);
-    const leadgenImpression = React.useCallback(() => {
-        Service.campaignPostImpression({
-            url,
-            action: LEADGEN_ACTIONS.SCROLL,
-            code: campaign_code,
-            title_article: article_title,
-            cookie_id,
-            ga_client_id,
-            extra: { cookie_id, article_id, subscription_title },
-        });
-    }, [
-        article_id,
-        article_title,
-        cookie_id,
-        ga_client_id,
-        campaign_code,
-        subscription_title,
-    ]);
-    const intersectionObserverCallback = React.useCallback((entries) => {
-        entries.forEach((entry) => {
-            const { isIntersecting, target } = entry;
-            if (isIntersecting && target === refContainer.current) {
-                leadgenImpression();
-            }
-        });
-    }, [leadgenImpression]);
-    const IObserver = new IntersectionObserver(intersectionObserverCallback);
-    const middlewareOnSubmit = React.useCallback((value) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        const newValue = {
-            url,
-            article_title,
-            cookie_id,
-            ga_client_id,
-            article_id,
-            campaign_id,
-            campaign_code,
-            subscription_title: subscription_title,
-        };
-        listBlockAdded.forEach(({ data: { value: k } }) => {
-            newValue[k] = value[k];
-        });
-        setLoading(true);
-        try {
-            const { _data } = (yield Service.campaignPostLead({ data: newValue })) || {};
-            const { model } = _data;
-            if (model && model.id) {
-                setShowThankyou(true);
-            }
-        }
-        catch (error) {
-            console.log('** Error : ', error);
-        }
-        setLoading(false);
-    }), [
-        url,
-        article_id,
-        article_title,
-        cookie_id,
-        ga_client_id,
-        campaign_code,
-        subscription_title,
-        listBlockAdded,
-    ]);
-    React.useEffect(() => {
-        if (refContainer.current) {
-            IObserver.observe(refContainer.current);
-        }
-        return () => {
-            IObserver.disconnect();
-        };
-    }, [
-        url,
-        article_id,
-        article_title,
-        ga_client_id,
-        campaign_id,
-        campaign_code,
-        subscription_title,
-    ]);
-    return (React__default["default"].createElement("div", { ref: refContainer },
-        React__default["default"].createElement(StyledLeadGenSubscriptionBox, null,
-            showThankyou && (React__default["default"].createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
-            !showThankyou && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(StyledLeadGenSubscriptionBoxHeader, null,
-                    !!image && (React__default["default"].createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
-                        React__default["default"].createElement("img", { src: image, alt: "" }))),
-                    React__default["default"].createElement("p", { className: "leadgen-title" }, subscription_title)),
-                React__default["default"].createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
-                    React__default["default"].createElement(LeadGenForm, { ref: formRef, form: form, rules: validateObj, blocks: listBlockAdded, locale: locale, onFinish: middlewareOnSubmit }),
-                    React__default["default"].createElement(core.Button, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value)))))));
-};
-const LeadGenSubscriptionBoxWithMemo = React.memo(LeadGenSubscriptionBoxWithoutMemo);
-
-const Container = () => {
-    const context = React.useContext(LeadGenSubscriptionBoxContext);
-    const { 
-    // apiUrl: apiUrlProps,
-    // apiSubotUrl,
-    campaign_code, article_id, subscription_title, locale, siteId, siteDomain, userInfo, forceCampaign, } = context;
-    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
-        return null;
-    }
-    return (React__default["default"].createElement(LeadGenSubscriptionBoxWithMemo, { locale: locale, userInfo: userInfo, siteId: siteId, siteDomain: siteDomain, forceCampaign: forceCampaign, campaign_code: campaign_code, article_id: article_id, subscription_title: subscription_title }));
-};
-Container.displayName = 'LeadGenSubscriptionBox';
-const LeadGenSubscriptionBoxContainer = (props) => {
-    const { campaign_code } = props;
-    if (!campaign_code) {
-        return null;
-    }
-    return (React__default["default"].createElement(LeadGenSubscriptionBoxProvider, Object.assign({}, props),
-        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" })))));
+    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$7.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$7.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
@@ -2771,6 +1645,211 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
             React__default["default"].createElement(core.Button, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
 };
 
+const libraries = ['places'];
+const GoogleLocationBlock = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = tslib_es6.__rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = React.useState(null);
+    const [value, setValue] = React.useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete.usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = React.useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = React.useCallback((item) => {
+        /** For sure get value */
+        setValue(item.value);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    React.useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    React.useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default["default"].createElement(core.Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: index$8.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)));
+};
+
+// You can give context variables any name
+const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
+const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
+    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.replace(' ', '') === '') ||
+                    typeof value === 'undefined' ||
+                    value === '' ||
+                    (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) => {
+            var _a;
+            const isRequired = (_a = b.data.required) !== null && _a !== void 0 ? _a : true;
+            if (b.name === 'NumberBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (value && isNaN(Number(value))) {
+                            return t('validator.number');
+                        }
+                    }, b) });
+            }
+            else if (b.name === 'EmailBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return t('validator.email');
+                        }
+                        if (!value)
+                            return;
+                        validatingEmailRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(b.data.value, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                email: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(b.data.value, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(b.data.value);
+                                }
+                                validatingEmailRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                validatingEmailRef.current = false;
+                            });
+                        }, 200);
+                    }, b) });
+            }
+            else if (b.name === 'PhoneBlock' ||
+                b.name === 'PhoneOtpBlock' ||
+                b.name === 'ZaloOtpBlock' ||
+                b.name === 'WhatsappOtpBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (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(b.data.value, 'Validating...');
+                            if (b.data.singleSubmission) {
+                                checkUsedPhoneOnlyWithCache(campaignId, value)
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(b.data.value, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(b.data.value);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((err) => {
+                                    console.error(err);
+                                    formRef.current.setFieldError(b.data.value, err.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                            else {
+                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                    phone: value,
+                                })
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(b.data.value, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(b.data.value);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((e) => {
+                                    console.error(e);
+                                    formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                        }, 200);
+                    }, b) });
+            }
+            else if (b.name === 'DateBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (value && isNaN(Date.parse(value))) {
+                            return t('validator.date');
+                        }
+                    }, b) });
+            }
+            else if (b.name === '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), { [b.data.value]: withSharedCheck(b.data.value, undefined, b) });
+            }
+        }, {});
+    }, [listBlockAdded.map((b) => b.name).join(',')]);
+    const form = useLeadForm({
+        validateInputOnChange: true,
+        clearInputErrorOnChange: true,
+        validate: validateObj,
+        initialValues,
+    });
+    const formRef = React.useRef(form);
+    formRef.current = form;
+    return { form, validateObj };
+};
+
 const SubtitleBlock = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const cssInputNotShrink = react.css `
@@ -3089,13 +2168,11 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
+            $focusEl.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'start',
+            });
         }
     }, [shrink]);
     React.useEffect(() => {
@@ -3229,6 +2306,17 @@ const StyledFormContainer = styled__default["default"].div `
     flex-direction: column;
   }
 
+  .leadgen-form_inner {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+
+    &:has(.leadgen-header) {
+      display: block;
+    }
+  }
+
   .leadgen-form_body {
     flex: 1;
     min-height: 0;
@@ -3268,16 +2356,22 @@ const StyledFormContainer = styled__default["default"].div `
  *
  */
 const FormContainer = (_a) => {
-    var { title, titleAlign, description, descriptionAlign, className, style, children, footer } = _a, restProps = tslib_es6.__rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "footer"]);
+    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" },
-            React__default["default"].createElement("div", { className: "leadgen-form_header" },
-                React__default["default"].createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
-                React__default["default"].createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } })),
-            React__default["default"].createElement("div", { className: "leadgen-form_body" }, children),
+            !!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))));
 };
 
@@ -3302,7 +2396,7 @@ const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
     if (!src) {
         return null;
     }
-    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$8.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
+    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$7.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, }) => {
@@ -3479,8 +2573,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     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)))
+        ? 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;
@@ -3604,7 +2699,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     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, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+            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: () => {
@@ -3615,7 +2710,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const PopupContent = (React__default["default"].createElement("div", { className: core.clsx('leadgen-content', {
             'leadgen-content_small': limitFieldsLightBoxB,
         }) },
-        PopupHeader,
+        !headerInsideFormContainer && PopupHeader,
         !onlyHeader && (React__default["default"].createElement("div", { className: "leadgen-inner" },
             PopupThankYou,
             !showThankyou && (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -3644,7 +2739,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$9.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$9.DrawerComponent, { fadeFromIndex: index$8.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: {
@@ -3707,7 +2802,7 @@ const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile,
         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 },
+                    index$7.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}`,
@@ -4504,7 +3599,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
     }, [showCampaign]);
     return (React__default["default"].createElement(LeadGenContext.Provider, { value: { 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.Box, { sx: { position: 'fixed', zIndex: index$8.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) => {
                     var _a;
                     return (React__default["default"].createElement(core.Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -4523,4 +3618,3 @@ LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close.Close;
 
 exports.LeadGen = LeadGen;
-exports.LeadGenSubscriptionBox = LeadGenSubscriptionBox;