@hhgtech/hhg-components 1.29.336 → 1.29.337-beta-1

package/build/esm/lead.js

@@ -1,42 +1,44 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-735dfef4.js';
-import React__default, { createContext, useEffect, useMemo, useRef, useState, useContext } from 'react';
-import { createStyles, Box, Portal, Transition, Overlay } from '@mantine/core';
+import { _ as __rest, a as __awaiter } from './tslib.es6-fcc12e6e.js';
+import React__default, { createContext, useEffect, useMemo, useRef, useState, useContext, useCallback } from 'react';
+import { createStyles, Box, Autocomplete, clsx, Input as Input$1, TextInput, NumberInput as NumberInput$1, Button as Button$2, Portal, Transition, Overlay } from '@mantine/core';
 import dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
 import { createFormContext } from '@mantine/form';
-import { u as useTranslations } from './index-9375dd2d.js';
-import { T as Text } from './index-44b4df08.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-357b1f40.js';
-import { D as DatePicker } from './index-59b5b421.js';
-import { M as MAPPED_LOCALE } from './utils-80825d8f.js';
+import { u as useTranslations } from './index-0a3a25e0.js';
+import { T as Text } from './index-792c8b5e.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-ab659554.js';
+import { D as DatePicker } from './index-215fad60.js';
+import { M as MAPPED_LOCALE } from './utils-0e45e875.js';
 import '@mantine/dates';
-import { Z as ZINDEX_SSO } from './index-72559aa7.js';
-import './index-d6cbe5e5.js';
-import { C as CommonGAssets } from './index-83a1d865.js';
-import './useMantineLocale-ef76978e.js';
-import { B as Button$1 } from './index-d8b25254.js';
-import './index.styles-704e7b92.js';
-import { T as TranslationsContext } from './translationsContext-009a6fbd.js';
-import '@mantine/hooks';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-05de9e6f.js';
-import './other-dd42ca10.js';
-import './index-aaf2ef71.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-0da51415.js';
-import { B as Button } from './index-9a835113.js';
-import { H as Heading$1 } from './index-bb9828a7.js';
+import { Z as ZINDEX_SSO } from './index-b956898a.js';
+import './index-6d9897a3.js';
+import { C as CommonGAssets } from './index-d66398fb.js';
+import './useMantineLocale-8ec56dce.js';
+import { B as Button$1 } from './index-171a1210.js';
+import './index.styles-3222cfcd.js';
+import { T as TranslationsContext } from './translationsContext-37e6b331.js';
+import { useClickOutside } from '@mantine/hooks';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f0fb373d.js';
+import './other-b7db4eb0.js';
+import './index-098da010.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-bb098124.js';
+import { B as Button } from './index-fe73e1d6.js';
+import { H as Heading$1 } from './index-3ce2819c.js';
 import { v1 } from 'uuid';
-import { i as isVideo } from './index-5ea205c5.js';
-import { theme } from './miscTheme.js';
+import { i as isVideo } from './index-b2f5d056.js';
+import { D as DrawerComponent } from './index-4fc18fd0.js';
+import { u as useScreenSize } from './useScreenSize-ff87e07d.js';
 import { createPortal } from 'react-dom';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { theme } from './miscTheme.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { C as Close } from './Close-491e3063.js';
+import { C as Close } from './Close-81c5dea0.js';
 import '@hhgtech/icons/other';
-import './useScreenSize-4a16c943.js';
-import '@emotion/styled';
 import '@mantine/carousel';
-import './Locale-ff445b5a.js';
+import './Locale-aabbe16c.js';
 import 'classnames';
-import './useUniqueId-73f9d065.js';
+import './useUniqueId-a4141363.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -44,6 +46,7 @@ import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
 import '@mantine/notifications';
+import 'vaul';
 
 const LeadGenComponentContext = createContext({});
 
@@ -517,7 +520,7 @@ const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validati
     return { form, validateObj };
 };
 
-const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, }) => {
+const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, showEmpty, setShowEmpty, }) => {
     var _a, _b;
     const extraFields = campaign.extra_fields;
     const campaignId = campaign.id;
@@ -570,6 +573,8 @@ const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, sh
             onSubmit,
             showThankyou,
             setShowThankyou,
+            showEmpty,
+            setShowEmpty,
         } }, children)) : null;
 };
 
@@ -586,7 +591,7 @@ var useStyles$2 = createStyles(() => {
 });
 
 const libraries$1 = ['places'];
-const LocationBlock$1 = ({ name, placeholder, locale, required = true, }) => {
+const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
     var _a;
     const form = useLeadFormContext$1();
     const [searchValue, setSearchValue] = useState('');
@@ -686,7 +691,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                         id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
             }
             case 'LocationBlock': {
-                return (React__default.createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
@@ -1036,7 +1041,10 @@ var enPH = {
 	"lead.otp.verify": "Verify",
 	"lead.otp.resend": "Resend OTP{timer}",
 	"lead.otp.phoneLabel": "Phone OTP",
-	"lead.otp.phonePlaceholder": "Enter OTP"
+	"lead.otp.phonePlaceholder": "Enter OTP",
+	"lead.empty.title": "Oops, seem your information is empty, do you want to submit the information again?",
+	"lead.empty.cancel": "Cancel",
+	"lead.empty.submitAgain": "Submit again"
 };
 
 var hiIN = {
@@ -1052,7 +1060,10 @@ var hiIN = {
 	"lead.otp.title": "Enter OTP",
 	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
 	"lead.otp.verify": "Verify",
-	"lead.otp.resend": "Resend OTP{timer}"
+	"lead.otp.resend": "Resend OTP{timer}",
+	"lead.empty.title": "ऊप्स! लगता है आपकी जानकारी खाली है। क्या आप जानकारी फिर से सबमिट करना चाहते हैं?",
+	"lead.empty.cancel": "रद्द करें",
+	"lead.empty.submitAgain": "फिर से सबमिट करें"
 };
 
 var idID = {
@@ -1070,7 +1081,10 @@ var idID = {
 	"lead.otp.verify": "Verifikasi",
 	"lead.otp.resend": "Kirim Ulang OTP {timer}",
 	"lead.otp.phoneLabel": "OTP Telepon",
-	"lead.otp.phonePlaceholder": "Masukkan OTP"
+	"lead.otp.phonePlaceholder": "Masukkan OTP",
+	"lead.empty.title": "Oops, sepertinya informasi Anda kosong. Apakah Anda ingin mengirimkan informasi lagi?",
+	"lead.empty.cancel": "Batal",
+	"lead.empty.submitAgain": "Kirim lagi"
 };
 
 var kmKH = {
@@ -1088,7 +1102,10 @@ var kmKH = {
 	"lead.otp.verify": "ផ្ទៀងផ្ទាត់",
 	"lead.otp.resend": "ផ្ញើ OTP ម្តងទៀត {timer}",
 	"lead.otp.phoneLabel": "OTP ទូរស័ព្ទ",
-	"lead.otp.phonePlaceholder": "បញ្ចូល OTP"
+	"lead.otp.phonePlaceholder": "បញ្ចូល OTP",
+	"lead.empty.title": "អូុបស! ហាក់ដូចជាព័ត៌មានរបស់អ្នកទទេ។ តើអ្នកចង់ដាក់ស្នើព័ត៌មានម្តងទៀតទេ?",
+	"lead.empty.cancel": "លុប​ចោល",
+	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត"
 };
 
 var msMY = {
@@ -1106,7 +1123,10 @@ var msMY = {
 	"lead.otp.verify": "Sahkan",
 	"lead.otp.resend": "Hantar semula OTP {timer}",
 	"lead.otp.phoneLabel": "OTP Telefon",
-	"lead.otp.phonePlaceholder": "Masukkan OTP"
+	"lead.otp.phonePlaceholder": "Masukkan OTP",
+	"lead.empty.title": "Oops, nampaknya maklumat anda kosong. Adakah anda ingin menghantar maklumat semula?",
+	"lead.empty.cancel": "Batal",
+	"lead.empty.submitAgain": "Hantar semula"
 };
 
 var myMM = {
@@ -1124,7 +1144,10 @@ var myMM = {
 	"lead.otp.verify": "အတည်ပြုပါ",
 	"lead.otp.resend": "OTP ကိုထပ်မံပို့ရန် {timer}",
 	"lead.otp.phoneLabel": "ဖုန်း OTP",
-	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ"
+	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ",
+	"lead.empty.title": "အုပ်စ်! သင့်အချက်အလက်သည် ဗလာဖြစ်နေသလိုဖြစ်သည်။ ထပ်မံတင်သွင်းလိုပါသလား?",
+	"lead.empty.cancel": "မလုပ်ဆောင်ပါ",
+	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ"
 };
 
 var thTH = {
@@ -1142,7 +1165,10 @@ var thTH = {
 	"lead.otp.verify": "ยืนยัน",
 	"lead.otp.resend": "ส่ง OTP อีกครั้ง {timer}",
 	"lead.otp.phoneLabel": "OTP โทรศัพท์",
-	"lead.otp.phonePlaceholder": "ป้อน OTP"
+	"lead.otp.phonePlaceholder": "ป้อน OTP",
+	"lead.empty.title": "อุ๊ปส์! ดูเหมือนว่าข้อมูลของคุณว่างเปล่า คุณต้องการส่งข้อมูลอีกครั้งหรือไม่?",
+	"lead.empty.cancel": "ยกเลิก",
+	"lead.empty.submitAgain": "ส่งอีกครั้ง"
 };
 
 var viVN = {
@@ -1171,7 +1197,10 @@ var viVN = {
 	"lead.otp.verify": "Xác minh",
 	"lead.otp.resend": "Gửi lại OTP {timer}",
 	"lead.otp.phoneLabel": "Nhập OTP",
-	"lead.otp.phonePlaceholder": "Nhập OTP"
+	"lead.otp.phonePlaceholder": "Nhập OTP",
+	"lead.empty.title": "Oops, có vẻ như thông tin của bạn đang trống. Bạn có muốn gửi lại thông tin không?",
+	"lead.empty.cancel": "Hủy",
+	"lead.empty.submitAgain": "Gửi lại"
 };
 
 var zhTW = {
@@ -1189,7 +1218,10 @@ var zhTW = {
 	"lead.otp.verify": "驗證",
 	"lead.otp.resend": "重新發送 OTP {timer}",
 	"lead.otp.phoneLabel": "電話 OTP",
-	"lead.otp.phonePlaceholder": "輸入 OTP"
+	"lead.otp.phonePlaceholder": "輸入 OTP",
+	"lead.empty.title": "哎呀，您的資訊似乎是空的，您想要重新提交資訊嗎？",
+	"lead.empty.cancel": "取消",
+	"lead.empty.submitAgain": "重新提交"
 };
 
 const translationsMap = {
@@ -1249,9 +1281,8 @@ const useImageSize = (src) => {
 };
 
 const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
-    React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", className: svgClassName },
-        React__default.createElement("circle", { cx: "16", cy: "16", r: "16", fill: "white" }),
-        React__default.createElement("path", { d: "m16 17.05-5.075 5.075a.74.74 0 0 1-.512.212.7.7 0 0 1-.538-.212.72.72 0 0 1-.225-.525q0-.3.225-.525L14.95 16l-5.075-5.075a.74.74 0 0 1-.212-.513.7.7 0 0 1 .212-.537.72.72 0 0 1 .525-.225q.3 0 .525.225L16 14.95l5.075-5.075a.74.74 0 0 1 .513-.213.7.7 0 0 1 .537.213.72.72 0 0 1 .225.525.72.72 0 0 1-.225.525L17.05 16l5.075 5.075a.74.74 0 0 1 .212.512.7.7 0 0 1-.212.538.72.72 0 0 1-.525.225.72.72 0 0 1-.525-.225z", fill: "#595959" }))));
+    React__default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: svgClassName },
+        React__default.createElement("path", { d: "M9.99981 10.8432L14.0583 14.9017C14.1691 15.0125 14.3083 15.0691 14.476 15.0717C14.6437 15.0743 14.7854 15.0176 14.9013 14.9017C15.0172 14.7858 15.0752 14.6453 15.0752 14.4802C15.0752 14.3151 15.0172 14.1746 14.9013 14.0587L10.8429 10.0002L14.9013 5.9417C15.0121 5.83094 15.0688 5.69172 15.0713 5.52402C15.0739 5.35634 15.0172 5.21456 14.9013 5.09866C14.7854 4.98276 14.6449 4.9248 14.4798 4.9248C14.3147 4.9248 14.1742 4.98276 14.0583 5.09866L9.99981 9.15712L5.94133 5.09866C5.83057 4.98789 5.69135 4.93122 5.52365 4.92866C5.35598 4.92609 5.21419 4.98276 5.09829 5.09866C4.98239 5.21456 4.92444 5.35506 4.92444 5.52018C4.92444 5.6853 4.98239 5.82581 5.09829 5.9417L9.15675 10.0002L5.09829 14.0587C4.98752 14.1694 4.93085 14.3087 4.9283 14.4763C4.92572 14.644 4.98239 14.7858 5.09829 14.9017C5.21419 15.0176 5.3547 15.0756 5.51982 15.0756C5.68493 15.0756 5.82544 15.0176 5.94133 14.9017L9.99981 10.8432Z" }))));
 
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
@@ -1328,6 +1359,192 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default.createElement("div", { className: "lead-modal__thank-you" },
+        React__default.createElement("div", { style: { width: '100%' } },
+            React__default.createElement("img", { src: image, style: {
+                    maxHeight: 162,
+                    objectFit: 'cover',
+                    aspectRatio: `${imageWidth}/${imageHeight}`,
+                }, loading: "lazy" }),
+            title && (React__default.createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
+            subtitle && (React__default.createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
+                const isShowBr = idx < list.length - 1;
+                return (React__default.createElement(React__default.Fragment, null,
+                    text,
+                    isShowBr && React__default.createElement("br", null)));
+            }))),
+            linkText && (React__default.createElement("div", null,
+                React__default.createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
+                    React__default.createElement("button", { className: `lead-modal__btn ${LEAD_CLASS}` }, linkText)))))));
+};
+
+const InlineLayout = ({ content, inlinePosition, }) => {
+    const target = useMemo(() => {
+        if (!inlinePosition)
+            return null;
+        const parents = document.querySelectorAll(`[data-url="${location.pathname}"] .body-content`);
+        const allChildren = Array.from(parents).reduce((r, p) => {
+            return [...r, ...Array.from(p.children)];
+        }, []);
+        if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
+            // find the third p tag in the body content, some other tags might mix in between
+            const allPTags = allChildren.filter((c) => c.nodeName === 'P');
+            const allH2Tags = allChildren.filter((c) => c.nodeName === 'H2');
+            let target = null;
+            switch (inlinePosition) {
+                case '1th':
+                    target = allPTags[0];
+                    break;
+                case '2th':
+                    target = allPTags[1];
+                    break;
+                case '3th':
+                    target = allPTags[2];
+                    break;
+                case '4th':
+                    target = allPTags[3];
+                    break;
+                case '5th':
+                    target = allPTags[4];
+                    break;
+                case '6th':
+                    target = allPTags[5];
+                    break;
+                case '7th':
+                    target = allPTags[6];
+                    break;
+                case '8th':
+                    target = allPTags[7];
+                    break;
+                case '9th':
+                    target = allPTags[8];
+                    break;
+                case '10th':
+                    target = allPTags[9];
+                    break;
+                case '11th':
+                    target = allPTags[10];
+                    break;
+                case '12th':
+                    target = allPTags[11];
+                    break;
+                case 'lastP':
+                    target = allPTags[allPTags.length - 1];
+                    break;
+                case '1thH2':
+                    target = allH2Tags[0];
+                    break;
+                case '2thH2':
+                    target = allH2Tags[1];
+                    break;
+                case '3thH2':
+                    target = allH2Tags[2];
+                    break;
+                case '4thH2':
+                    target = allH2Tags[3];
+                    break;
+                case '5thH2':
+                    target = allH2Tags[4];
+                    break;
+                case '6thH2':
+                    target = allH2Tags[5];
+                    break;
+                case '7thH2':
+                    target = allH2Tags[6];
+                    break;
+                case '8thH2':
+                    target = allH2Tags[7];
+                    break;
+                case '9thH2':
+                    target = allH2Tags[8];
+                    break;
+                case '10thH2':
+                    target = allH2Tags[9];
+                    break;
+                case 'lastH2':
+                    target = allH2Tags[allH2Tags.length - 1];
+                    break;
+            }
+            if (target) {
+                if (!target.parentElement.querySelector('.inline-lead-wrapper')) {
+                    const wrapper = document.createElement('div');
+                    wrapper.classList.add('inline-lead-wrapper');
+                    if (target.nextElementSibling) {
+                        target.parentElement.insertBefore(wrapper, target.nextElementSibling);
+                    }
+                    else {
+                        target.parentElement.appendChild(wrapper);
+                    }
+                    return wrapper;
+                }
+                else {
+                    return target.parentElement.querySelector('.inline-lead-wrapper');
+                }
+            }
+        }
+    }, [inlinePosition]);
+    if (!inlinePosition || !target)
+        return null;
+    return createPortal(content, target);
+};
+
+const SideBarLayout = ({ content }) => {
+    const targets = useMemo(() => {
+        const targetDoms = Array.from(document.querySelectorAll('.hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar'));
+        targetDoms.forEach((dom) => {
+            if (dom.querySelector('.sidebar-lead-modal-wrapper'))
+                return;
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('sidebar-lead-modal-wrapper');
+            dom.prepend(wrapper);
+        });
+        return targetDoms.map((d) => d.querySelector('.sidebar-lead-modal-wrapper'));
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null, targets.map((target) => createPortal(content, getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
+};
+
+const libraries = ['places'];
+const GoogleLocation = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = useState(null);
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = useCallback((item) => {
+        /** For sure get value */
+        setValue(item.value);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, inputContainer: (children) => {
+            return (React__default.createElement(React__default.Fragment, null,
+                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
+};
+
 // You can give context variables any name
 const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
@@ -1357,9 +1574,9 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
                 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 === 'undefined' ||
+                if ((typeof value === 'string' && value.replace(' ', '') === '') ||
+                    typeof value === 'undefined' ||
                     value === '' ||
-                    (typeof value === 'string' && value.replace(' ', '') === '') ||
                     (Array.isArray(value) && value.length === 0)) {
                     return isBLockRequired
                         ? t('validator.required')
@@ -1493,108 +1710,407 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
     return { form, validateObj };
 };
 
-const libraries = ['places'];
-const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
-    var _a;
-    const form = useLeadFormContext();
-    const [searchValue, setSearchValue] = useState('');
-    const [address, setAddress] = useState('');
-    const { predictions } = usePlacesAutocomplete(searchValue, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const [LoadScript, setLoadScript] = useState(null);
-    const [ready, setReady] = useState(false);
-    const randRef = useRef(Math.random().toString(36).substring(7));
-    const options = useMemo(() => {
-        const _opts = predictions.map((p) => {
-            return {
-                value: p.description,
-                label: p.description,
-            };
-        });
-        const isExist = _opts.find((o) => o.value === address);
-        if (!address || isExist) {
-            return _opts;
+const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const cssInputNotShrink = css `
+  height: 100% !important;
+  min-height: calc(var(--container-height, 56px) * 22 / 56);
+  color: ${theme.colors.gray800};
+  font-size: var(--input, 16px);
+  line-height: calc(var(--container-height, 56px) * 22 / 56);
+  border: none !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+
+  ::placeholder {
+    color: ${theme.colors.gray400};
+  }
+`;
+const cssInputShrink = css `
+  height: auto !important;
+  cursor: text;
+  opacity: 1;
+  transition: 0.1s ease-in-out all;
+`;
+const cssLabelNotShrink = css `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  left: var(--space-x, 16px);
+  color: ${theme.colors.gray400};
+  font-size: var(--label-not-shrink, 16px);
+  font-weight: 400;
+  line-height: calc(var(--container-height, 56px) * 18 / 56);
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: 0.125s ease-in all;
+`;
+const cssLabelShrink = css `
+  color: ${theme.colors.gray600};
+  font-weight: 600;
+  font-size: var(--label-shrink, 12px);
+  top: calc(var(--container-height) * 7 / 56);
+  transform: none;
+  transition: 0.125s ease-out all;
+`;
+const cssWrapperInputNotShrink = css `
+  min-height: var(--container-height, 56px);
+  display: flex;
+  align-items: flex-end;
+  border: 1px solid ${theme.colors.gray200};
+  border-radius: 8px;
+  background-color: #fff;
+  padding-inline: var(--space-x, 16px);
+  padding-block: var(--space-y-not-shrink, 16px);
+  cursor: pointer;
+  pointer-events: none;
+
+  &:has(.mantine-Input-rightSection) {
+    padding-right: var(--container-height, 56px);
+  }
+
+  .mantine-Input-icon {
+    display: none;
+  }
+
+  .mantine-NumberInput-control {
+    border-color: ${theme.colors.gray200};
+  }
+`;
+const cssWrapperInputShrink = css `
+  height: auto;
+  min-height: var(--container-height, 56px);
+  padding-block: var(--space-y-shrink, 7px);
+  cursor: text;
+  pointer-events: auto;
+`;
+const cssInputWrapperError = css `
+  color: ${theme.colors.red800};
+  font-size: 12px;
+  line-height: 1.5;
+`;
+const StyledTextFieldContainer = styled.div `
+  --space-x: 16px;
+  --space-y-not-shrink: 16px;
+  --space-y-shrink: 7px;
+  --container-height: 56px;
+  --label-not-shrink: 16px;
+  --label-shrink: 12px;
+  --input: 16px;
+
+  position: relative;
+  min-width: 100px;
+  max-width: 100%;
+  display: inline-block;
+
+  .textField_wrapper {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .mantine-InputWrapper-root {
+    &[data-invalid='true'] {
+      .mantine-Input-wrapper {
+        border-color: ${theme.colors.red400};
+      }
+    }
+
+    .mantine-Input-wrapper {
+      &:has([data-invalid]) {
+        border-color: ${theme.colors.red400};
+      }
+    }
+  }
+
+  .mantine-InputWrapper-label {
+    ${cssLabelNotShrink}
+  }
+
+  .mantine-Input-wrapper {
+    ${cssWrapperInputNotShrink}
+
+    + .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}
+  }
+
+  &.textField_shrink,
+  &:focus-within {
+    .mantine-InputWrapper-label {
+      ${cssLabelShrink}
+    }
+
+    .mantine-Input-wrapper {
+      ${cssWrapperInputShrink}
+      &.mantine-Select-wrapper {
+        .mantine-Select-rightSection {
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .mantine-Input-input {
+      ${cssInputShrink}
+    }
+
+    &:has(.PhoneInput) {
+      .mantine-InputWrapper-label {
+        left: var(--space-x, 16px);
+      }
+      .PhoneInput {
+        .PhoneInputInput {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .PhoneInput {
+    --phone-select: 75px;
+    --phone-input-space-x: 8px;
+    width: 100%;
+    opacity: 1;
+    border: none;
+    .PhoneInputCountry {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: var(--phone-select, 75px);
+    }
+    .PhoneInputInput {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.5;
+      outline: none !important;
+      border: none;
+      box-shadow: none;
+      padding: 0 var(--phone-input-space-x, 8px);
+      opacity: 0;
+      color: ${theme.colors.gray800} !important;
+      :focus {
+        color: ${theme.colors.gray800} !important;
+      }
+    }
+  }
+
+  &:has(.PhoneInput) {
+    .mantine-InputWrapper-label {
+      left: calc(
+        var(--space-x, 16px) + var(--phone-select, 75px) +
+          var(--phone-input-space-x, 8px)
+      );
+    }
+  }
+`;
+const StyledChoiceFieldContainer = styled.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: ${theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .mantine-Radio-root,
+  .mantine-Checkbox-root {
+    gap: 8px;
+    min-width: calc(50% - 4px);
+
+    input[type='radio'],
+    input[type='checkbox'] {
+      border-color: ${theme.colors.gray600};
+      width: 18px;
+      height: 18px;
+    }
+    input[type='checkbox'] {
+      border-radius: 4px;
+    }
+
+    &[data-checked='true'] {
+      input[type='radio'],
+      input[type='checkbox'] {
+        border-color: ${theme.colors.primary600};
+      }
+
+      input[type='radio'] {
+        background-color: white;
+      }
+    }
+
+    .mantine-Checkbox-input {
+      &:checked {
+        border-color: ${theme.colors.primary600};
+      }
+    }
+  }
+
+  .mantine-Radio-inner,
+  .mantine-Checkbox-inner {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mantine-Radio-body,
+  .mantine-Checkbox-body {
+    display: flex;
+    align-items: center;
+  }
+
+  .mantine-Radio-label,
+  .mantine-Checkbox-label {
+    padding-left: 8px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    line-height: 1.4;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-choiceContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .mantine-InputWrapper-error {
+    ${cssInputWrapperError}
+  }
+`;
+
+const TextField = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+    const containerRef = useClickOutside(() => {
+        if (shrinkProps) {
+            return;
         }
-        return [{ value: address, label: address }].concat(_opts);
-    }, [predictions, address]);
-    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)) {
-            import('@react-google-maps/api').then((m) => {
-                setLoadScript(() => m.LoadScript);
-                setTimeout(() => {
-                    setReady(true);
-                }, 200);
-            });
+        setShrink(false);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
+    });
+    const [shrink, setShrink] = useState(shrinkProps);
+    const onClick = useCallback((e) => {
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        if (shrink) {
+            return;
         }
-        else {
-            setReady(true);
+        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();
+            $focusEl.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'start',
+            });
         }
-    }, []);
-    if (!ready)
-        return (React__default.createElement("div", { style: {
-                height: 73,
-            } }));
-    return (React__default.createElement(React__default.Fragment, null,
-        LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null) })),
-        React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
-        React__default.createElement(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.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
-                React__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.createElement(React__default.Fragment, null) }, form.getInputProps(name)))));
+    }, [shrink]);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
+        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+};
+const ChoiceField = (props) => {
+    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+    return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
 };
 
-const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
-
 const TitleBlock = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const form = useLeadFormContext();
+    const formValues = form.values;
     return (React__default.createElement(React__default.Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
         const { name = '', data = {} } = b || {};
         const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
         const required = (_a = data.required) !== null && _a !== void 0 ? _a : true;
+        const formValue = (formValues === null || formValues === void 0 ? void 0 : formValues[value]) || null;
         switch (name) {
             case 'TitleBlock':
                 return (React__default.createElement(TitleBlock, { key: index, align: align }, value));
             case 'SubtitleBlock':
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: "lead-modal__form-control", 
-                    // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
+                        // className="lead-modal__form-control leadgen-form_field"
+                        // onChangeRaw={(e) => inputOnChange('text', e)}
+                        label: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'NumberBlock':
-                return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: "lead-modal__form-control", 
-                    // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(NumberInput$1, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
+                        // className="lead-modal__form-control leadgen-form_field"
+                        // onChange={(e) => inputOnChange('number', e)}
+                        label: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
-                    // type="email"
-                    placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                        // type="email"
+                        placeholder: placeholder, 
+                        // className="lead-modal__form-control leadgen-form_field"
+                        label: placeholder, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                return (React__default.createElement(Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
-                    // error={errorField.phone}
-                    className: "lead-modal__form-control", labelProps: {
-                        htmlFor: id,
-                    } }, form.getInputProps(value)),
-                    React__default.createElement(Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
-                            form.setFieldValue(value, v);
-                        }, 
-                        // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+                const _b = form.getInputProps(value), { error } = _b, formPhoneInputWrapper = __rest(_b, ["error"]);
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: clsx('lead-modal__form-control leadgen-form_field', {
+                        'leadgen-form_field_error': !!error,
+                    }) },
+                    React__default.createElement(Input$1.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, "data-invalid": !!error, labelProps: {
+                            htmlFor: id,
+                        }, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, formPhoneInputWrapper, { error: error }),
+                        React__default.createElement("div", { className: "mantine-Input-wrapper" },
+                            React__default.createElement(Phone, { className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
+                                    form.setFieldValue(value, v);
+                                }, 
+                                // onBlur={(e) => inputOnBlur('tel', e)}
+                                id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })))));
             }
             case 'LocationBlock': {
-                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(GoogleLocation, Object.assign({ withAsterisk: required, key: index, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             case 'DateBlock':
-                return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "date" }, form.getInputProps(value))),
-                    React__default.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(DatePicker, Object.assign({ clearable: true, withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, label: placeholder, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                            return (React__default.createElement(React__default.Fragment, null,
+                                children,
+                                React__default.createElement("input", { type: "hidden", "data-control": "date", name: value, value: formValue })));
+                        } }, form.getInputProps(value)))));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
                     React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
@@ -1603,30 +2119,42 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
             case 'CheckboxBlock':
-                return (React__default.createElement(React__default.Fragment, null,
+                return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox" },
                     isSendMailChimp && (React__default.createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, className: "lead-modal__form-control", key: index, label: placeholder, size: "md", sx: {
+                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, 
+                        // className="lead-modal__form-control leadgen-form_field"
+                        key: index, label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
+                            flexWrap: 'wrap',
                             gap: 8,
+                        }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                            return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
             case 'RadioBlock':
-                return (React__default.createElement(React__default.Fragment, null,
-                    isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: "lead-modal__form-control", key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                return (React__default.createElement(ChoiceField, { className: "leadgen-form_radio" },
+                    isSendMailChimp && (React__default.createElement(Input$1, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
+                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, 
+                        // className="lead-modal__form-control leadgen-form_field"
+                        key: index, label: placeholder, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                            return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
-                return (React__default.createElement(React__default.Fragment, null,
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default.createElement(Select, Object.assign({ key: index, className: "lead-modal__form-control", label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                    React__default.createElement(Select, Object.assign({ key: index, 
+                        // className="lead-modal__form-control leadgen-form_field"
+                        label: placeholder, placeholder: 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.createElement(React__default.Fragment, null,
-                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__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 }))));
+                const _c = form.getInputProps(`TNC-${b.id}`), { error } = _c, tncInputProps = __rest(_c, ["error"]);
+                return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox" },
+                    React__default.createElement(Input$1.Wrapper, { error: error },
+                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
         }
         return null;
     })));
@@ -1757,169 +2285,27 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
             })))));
 };
 
-const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
-    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
-        return null;
-    return (React__default.createElement("div", { className: "lead-modal__thank-you" },
-        React__default.createElement("div", { style: { width: '100%' } },
-            React__default.createElement("img", { src: image, style: {
-                    maxHeight: 162,
-                    objectFit: 'cover',
-                    aspectRatio: `${imageWidth}/${imageHeight}`,
-                }, loading: "lazy" }),
-            title && (React__default.createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
-            subtitle && (React__default.createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
-                const isShowBr = idx < list.length - 1;
-                return (React__default.createElement(React__default.Fragment, null,
-                    text,
-                    isShowBr && React__default.createElement("br", null)));
-            }))),
-            linkText && (React__default.createElement("div", null,
-                React__default.createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
-                    React__default.createElement("button", { className: `lead-modal__btn ${LEAD_CLASS}` }, linkText)))))));
-};
-
-const InlineLayout = ({ content, inlinePosition, }) => {
-    const target = useMemo(() => {
-        if (!inlinePosition)
-            return null;
-        const parents = document.querySelectorAll(`[data-url="${location.pathname}"] .body-content`);
-        const allChildren = Array.from(parents).reduce((r, p) => {
-            return [...r, ...Array.from(p.children)];
-        }, []);
-        if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
-            // find the third p tag in the body content, some other tags might mix in between
-            const allPTags = allChildren.filter((c) => c.nodeName === 'P');
-            const allH2Tags = allChildren.filter((c) => c.nodeName === 'H2');
-            let target = null;
-            switch (inlinePosition) {
-                case '1th':
-                    target = allPTags[0];
-                    break;
-                case '2th':
-                    target = allPTags[1];
-                    break;
-                case '3th':
-                    target = allPTags[2];
-                    break;
-                case '4th':
-                    target = allPTags[3];
-                    break;
-                case '5th':
-                    target = allPTags[4];
-                    break;
-                case '6th':
-                    target = allPTags[5];
-                    break;
-                case '7th':
-                    target = allPTags[6];
-                    break;
-                case '8th':
-                    target = allPTags[7];
-                    break;
-                case '9th':
-                    target = allPTags[8];
-                    break;
-                case '10th':
-                    target = allPTags[9];
-                    break;
-                case '11th':
-                    target = allPTags[10];
-                    break;
-                case '12th':
-                    target = allPTags[11];
-                    break;
-                case 'lastP':
-                    target = allPTags[allPTags.length - 1];
-                    break;
-                case '1thH2':
-                    target = allH2Tags[0];
-                    break;
-                case '2thH2':
-                    target = allH2Tags[1];
-                    break;
-                case '3thH2':
-                    target = allH2Tags[2];
-                    break;
-                case '4thH2':
-                    target = allH2Tags[3];
-                    break;
-                case '5thH2':
-                    target = allH2Tags[4];
-                    break;
-                case '6thH2':
-                    target = allH2Tags[5];
-                    break;
-                case '7thH2':
-                    target = allH2Tags[6];
-                    break;
-                case '8thH2':
-                    target = allH2Tags[7];
-                    break;
-                case '9thH2':
-                    target = allH2Tags[8];
-                    break;
-                case '10thH2':
-                    target = allH2Tags[9];
-                    break;
-                case 'lastH2':
-                    target = allH2Tags[allH2Tags.length - 1];
-                    break;
-            }
-            if (target) {
-                if (!target.parentElement.querySelector('.inline-lead-wrapper')) {
-                    const wrapper = document.createElement('div');
-                    wrapper.classList.add('inline-lead-wrapper');
-                    if (target.nextElementSibling) {
-                        target.parentElement.insertBefore(wrapper, target.nextElementSibling);
-                    }
-                    else {
-                        target.parentElement.appendChild(wrapper);
-                    }
-                    return wrapper;
-                }
-                else {
-                    return target.parentElement.querySelector('.inline-lead-wrapper');
-                }
-            }
-        }
-    }, [inlinePosition]);
-    if (!inlinePosition || !target)
-        return null;
-    return createPortal(content, target);
-};
-
-const SideBarLayout = ({ content }) => {
-    const targets = useMemo(() => {
-        const targetDoms = Array.from(document.querySelectorAll('.hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar'));
-        targetDoms.forEach((dom) => {
-            if (dom.querySelector('.sidebar-lead-modal-wrapper'))
-                return;
-            const wrapper = document.createElement('div');
-            wrapper.classList.add('sidebar-lead-modal-wrapper');
-            dom.prepend(wrapper);
-        });
-        return targetDoms.map((d) => d.querySelector('.sidebar-lead-modal-wrapper'));
-    }, []);
-    return (React__default.createElement(React__default.Fragment, null, targets.map((target) => createPortal(content, getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
+const EmptyIcon = (props) => {
+    const { className, style } = props;
+    return (React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
+        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
+        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
+        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
 };
 
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
 // image: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, }) => {
+const LEADGEN_LIMIT_LIGHTBOXB = 6;
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, }) => {
     var _a, _b, _c;
-    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
-    const actionBlocks = JSON.parse(extraFields.actionBlocks);
-    const textBlocks = JSON.parse(extraFields.textBlocks);
-    const popUpSubmitText = actionBlocks.submitBlock.data.value;
-    const currentPath = location.pathname;
-    const isInPage = currentLayout.includes('Inline') || currentLayout === 'Sidebar';
-    const isSlider = currentLayout === 'Slider';
+    const { t } = useTranslations();
+    const { isMobile } = useScreenSize();
+    const [open, setOpen] = useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const [snap, setSnap] = useState(0.8);
     const formRef = useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -1929,6 +2315,35 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
         }
     };
+    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
+    const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const textBlocks = JSON.parse(extraFields.textBlocks);
+    const popUpSubmitText = actionBlocks.submitBlock.data.value;
+    const currentPath = location.pathname;
+    const isInPage = currentLayout.includes('Inline') || currentLayout === 'Sidebar';
+    const isSlider = currentLayout === 'Slider';
+    const isDrawer = currentLayout.includes('LightBoxB') && isMobile;
+    const isLightBox = currentLayout.includes('LightBox');
+    const isSmallLightBoxB = currentLayout === 'LightBoxB' &&
+        listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
+    const isShowHeader = showOtpPhone || !!imageMobile || !!imageDesktop;
+    const isFormSubmit = currentLayout === 'LightBoxA'
+        ? listBlockAdded.some((item) => [
+            'TextBlock',
+            'NumberBlock',
+            'DateBlock',
+            'EmailBlock',
+            'PhoneBlock',
+            'PhoneOtpBlock',
+            'WhatsappOtpBlock',
+            'ZaloOtpBlock',
+            'LocationBlock',
+            'RadioBlock',
+            'DropdownBlock',
+            'CheckboxBlock',
+            'TncBlock',
+        ].some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+        : true;
     if (window.innerWidth < 769 &&
         ['Fullscreen', 'Slider'].includes(currentLayout)) {
         console.log('😎 Not show fullscreen, slider on mobile ');
@@ -2019,83 +2434,141 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             })(e);
         }, 100);
     };
+    const onOpenChange = (_open) => {
+        setOpen(_open);
+        if (!_open) {
+            setTimeout(() => {
+                onClose();
+            }, 250);
+        }
+    };
     const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
     const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
     const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
     const renderAfterImageSizes = imageMobileLoaded &&
         imageDesktopLoaded &&
         (currentLayout == 'Fullscreen' ? imageBackgroundLoaded : true);
-    const PopupContent = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("style", { dangerouslySetInnerHTML: {
-                __html: `
-          .le-newbuilder-overlay {
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          ${imageOverlayMobile
-                    ? `
-              .le-newbuilder-overlay {
-                background: url(${imageOverlayMobile}) ;
-              }`
-                    : ``}
-          ${imageOverlayDesktop
-                    ? `
-              @media screen and (min-width:768px) {
-                .le-newbuilder-overlay {
-                  background: url(${imageOverlayDesktop}) ;
-                }
-              }`
-                    : ``}`,
-            } }),
-        React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: `lead-modal lead-modal-wrapper modal--animate-scale ${isInPage ? 'le-buider-inline' : ''} ${isSlider ? 'le-buider-slider' : ''}` },
+    const ButtonSubmit = !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$2, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: clsx(`lead-modal__btn ${LEAD_CLASS}`, {
+            'leadgen-btn': isLightBox,
+            'leadgen-btn_action': isLightBox,
+        }), loading: isSubmitLoading }, popUpSubmitText));
+    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == 'LinkButtonBlock');
+    const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
+        var _a, _b, _c;
+        return (React__default.createElement(Button$2, { 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: clsx(`lead-modal__btn ${LEAD_CLASS}`, {
+                'leadgen-btn': isLightBox,
+                'leadgen-btn_action': isLightBox,
+            }), 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 = (React__default.createElement("header", { className: clsx('lead-modal__header', {
+            'leadgen-header': isLightBox,
+            'leadgen-header_hidden': !isShowHeader,
+        }) }, showOtpPhone ? (React__default.createElement("img", { src: CommonGAssets.getAssetPath('lead-otp-thumb.png'), draggable: "false", alt: "", style: {
+            width: '100%',
+            minHeight: '150px',
+            backgroundColor: '#f2f2f2',
+        }, loading: "lazy" })) : (React__default.createElement(React__default.Fragment, null, ['LightBoxA', 'InlineA', 'Sidebar', 'Slider'].includes(currentLayout) ? (imageMobile ? (isVideo(imageMobile) ? (React__default.createElement("video", { className: "lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
+        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { draggable: "false", className: "lead-modal__image lead-modal-image-cover", src: imageMobile, style: {
+            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+        }, alt: "" }))) : null) : (React__default.createElement(React__default.Fragment, null,
+        imageDesktop ? (isVideo(imageDesktop) ? (React__default.createElement("video", { className: "le-only-desktop lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
+            React__default.createElement("source", { src: imageDesktop, type: "video/mp4" }))) : (React__default.createElement("img", { draggable: "false", className: "le-only-desktop lead-modal__image lead-modal-image-cover", style: {
+                objectFit: 'cover',
+                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+            }, src: imageDesktop, alt: "" }))) : null,
+        imageMobile ? (isVideo(imageMobile) ? (React__default.createElement("video", { className: "le-only-mobile lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
+            React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { draggable: "false", className: "le-only-mobile lead-modal__image lead-modal-image-cover", src: imageMobile, alt: "", style: {
+                aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+            } }))) : null))))));
+    const PopupEmpty = showEmpty && (React__default.createElement("div", { className: "leadgen-empty" },
+        React__default.createElement("div", { className: "leadgen-empty_body" },
+            React__default.createElement("div", { className: "leadgen-empty_wrapper" },
+                React__default.createElement(EmptyIcon, { className: "leadgen-empty_image" }),
+                React__default.createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
+        React__default.createElement("div", { className: "leadgen-empty_footer" },
+            React__default.createElement(Button$2, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
+            React__default.createElement(Button$2, { onClick: () => setShowEmpty(false), size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
+    const PopupFormTitle = (React__default.createElement("h2", { title: title, className: clsx(LEAD_CLASS, `lead-modal__title`, `le-text-align-${(_b = textBlocks.titleBlock.data) === null || _b === void 0 ? void 0 : _b.align}`, { 'leadgen-title': isLightBox }) }, title));
+    const PopupFormDescription = (React__default.createElement("p", { title: textBlocks.subtitleBlock.data.value, className: clsx(LEAD_CLASS, `lead-modal__description`, `le-text-align-${(_c = textBlocks.subtitleBlock.data) === null || _c === void 0 ? void 0 : _c.align}`, { 'leadgen-description': isLightBox }) }, textBlocks.subtitleBlock.data.value));
+    const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
+        React__default.createElement("form", { ref: formRef, className: clsx(`lead-modal__form ${popupId}`, {
+                'leadgen-form': isLightBox,
+            }), onSubmit: middlewareOnSubmit },
+            React__default.createElement("div", { className: clsx('lead-modal__form-header', {
+                    'leadgen-form_header': isLightBox,
+                }) },
+                PopupFormTitle,
+                PopupFormDescription),
+            React__default.createElement("div", { className: clsx('lead-modal__form-control-wrapper', {
+                    'leadgen-form_body': isLightBox,
+                }), "data-hidden": !isFormSubmit },
+                React__default.createElement("div", { className: "leadgen-form_inner" },
+                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))),
+            React__default.createElement("div", { className: "leadgen-form_footer" }, isFormSubmit ? ButtonSubmit : ButtonLink))));
+    const PopupThankYou = showThankyou && (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
+    const popupContentClassName = clsx('lead-modal__content', `le-newbuilder-${currentLayout}`, 'leadPopupContent', { 'leadgen-content': isLightBox });
+    const PopupContent = (React__default.createElement("div", { className: popupContentClassName },
+        PopupHeader,
+        React__default.createElement("div", { className: "leadgen-inner" },
+            PopupThankYou,
+            !showThankyou && (React__default.createElement(React__default.Fragment, null,
+                showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+                        setShowOtpPhone(null);
+                        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+                    } })),
+                showEmpty && PopupEmpty,
+                React__default.createElement("div", { "data-hidden": !!showOtpPhone || !!showEmpty, className: clsx('lead-modal__body le-newbuilder-overlay', {
+                        'leadgen-body': isLightBox,
+                    }) }, PopupForm))))));
+    const PopupWrapper = (React__default.createElement("div", { className: clsx(`lead-modal__wrapper le-newbuilder-wrap-${currentLayout}`, {
+            'leadgen-wrapper': isLightBox,
+            'leadgen-wrapper_small': isSmallLightBoxB,
+        }) },
+        !currentLayout.includes('Inline') && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: clsx('close-button-top-right', {
+                'leadgen-close_btn': isLightBox,
+            }) })),
+        PopupContent));
+    const styleOverlay = useMemo(() => {
+        let styleContent = `.le-newbuilder-overlay {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
+        if (isMobile && imageOverlayMobile) {
+            styleContent += `.le-newbuilder-overlay {background-image: url(${imageOverlayMobile});}`;
+        }
+        if (!isMobile && imageOverlayDesktop) {
+            styleContent += `@media screen and (min-width:768px) {.le-newbuilder-overlay {background-image: url(${imageOverlayDesktop});}}`;
+        }
+        return styleContent;
+    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
+    const popupContainerClassName = clsx('lead-modal lead-modal-wrapper modal--animate-scale', {
+        'le-buider-inline': !!isInPage,
+        'le-buider-slider': !!isSlider,
+        leadgen: isLightBox,
+        [`leadgen-${currentLayout}`]: isLightBox,
+    });
+    const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        PopupWrapper,
+        React__default.createElement("div", { className: "", style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
             currentLayout == 'Fullscreen' ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                     aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
                 } })) : null,
-            React__default.createElement("div", { className: `lead-modal__wrapper le-newbuilder-wrap-${currentLayout}` },
-                React__default.createElement("div", { className: `lead-modal__content le-newbuilder-${currentLayout}` }, showThankyou ? (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image })) : (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("header", { className: "lead-modal__header" }, showOtpPhone ? (React__default.createElement("img", { src: CommonGAssets.getAssetPath('lead-otp-thumb.png'), draggable: "false", alt: "", style: {
-                            width: '100%',
-                            minHeight: '150px',
-                            backgroundColor: '#f2f2f2',
-                        }, loading: "lazy" })) : (React__default.createElement(React__default.Fragment, null, ['LightBoxA', 'InlineA', 'Sidebar', 'Slider'].includes(currentLayout) ? (imageMobile ? (isVideo(imageMobile) ? (React__default.createElement("video", { className: "lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
-                        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { draggable: "false", className: "lead-modal__image lead-modal-image-cover", src: imageMobile, style: {
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        }, alt: "" }))) : null) : (React__default.createElement(React__default.Fragment, null,
-                        imageDesktop ? (isVideo(imageDesktop) ? (React__default.createElement("video", { className: "le-only-desktop lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
-                            React__default.createElement("source", { src: imageDesktop, type: "video/mp4" }))) : (React__default.createElement("img", { draggable: "false", className: "le-only-desktop lead-modal__image lead-modal-image-cover", style: {
-                                objectFit: 'cover',
-                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                            }, src: imageDesktop, alt: "" }))) : null,
-                        imageMobile ? (isVideo(imageMobile) ? (React__default.createElement("video", { className: "le-only-mobile lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
-                            React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { draggable: "false", className: "le-only-mobile lead-modal__image lead-modal-image-cover", src: imageMobile, alt: "", style: {
-                                aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                            } }))) : null))))),
-                    showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
-                            setShowOtpPhone(null);
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
-                        } })),
-                    React__default.createElement("div", { "data-hidden": !!showOtpPhone, className: "lead-modal__body le-newbuilder-overlay" },
-                        React__default.createElement(LeadFormProvider, { form: form },
-                            React__default.createElement("form", { ref: formRef, className: `lead-modal__form ${popupId}`, onSubmit: middlewareOnSubmit },
-                                React__default.createElement("div", { style: { marginBottom: 20 } },
-                                    React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + ((_a = textBlocks.titleBlock.data) === null || _a === void 0 ? void 0 : _a.align)} ${LEAD_CLASS}` }, title),
-                                    React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + ((_b = textBlocks.titleBlock.data) === null || _b === void 0 ? void 0 : _b.align)} ${LEAD_CLASS}` }, textBlocks.subtitleBlock.data.value)),
-                                React__default.createElement("div", { className: "lead-modal__form-control-wrapper" },
-                                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit })),
-                                ((_c = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _c === void 0 ? void 0 : _c.isHide) ? null : (React__default.createElement(Button, { size: "md", id: "lead-submit", type: "submit", className: `lead-modal__btn ${LEAD_CLASS}`, isLoading: isSubmitLoading }, popUpSubmitText)))))))),
-                !currentLayout.includes('Inline') && (React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+            PopupWrapper)));
     if (!renderAfterImageSizes)
         return null;
     if (currentLayout.includes('LightBox') ||
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Slider') {
-        return PopupContent;
+        return PopupContainer;
     }
     else if (currentLayout == 'Sidebar') {
-        return React__default.createElement(SideBarLayout, { content: PopupContent });
+        return React__default.createElement(SideBarLayout, { content: PopupContainer });
     }
     else if (currentLayout.includes('Inline')) {
-        return (React__default.createElement(InlineLayout, { content: PopupContent, inlinePosition: extraFields.popupInlinePosition }));
+        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
     }
     return null;
 };
@@ -2540,7 +3013,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, }) => {
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = useContext(LeadGenContext);
     useEffect(() => {
@@ -2659,7 +3132,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default.createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaign_subot_id: campaign.bot_id || [], locale: locale }));
+        return (React__default.createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__default.createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));
@@ -2684,6 +3157,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
     const [showCampaign, setShowCampaign] = useState(forceCampaign);
     const [action, setAction] = useState('');
     const [showThankyou, setShowThankyou] = useState(null);
+    const [showEmpty, setShowEmpty] = useState(false);
     useEffect(() => {
         if (forceCampaign) {
             setShowCampaign(forceCampaign);
@@ -2699,6 +3173,11 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
         setShowCampaign(campaign);
         setAction(action);
     };
+    const onCloseBase = () => {
+        document.body.classList.remove('noscroll');
+        setShowCampaign(null);
+        setShowThankyou(null);
+    };
     const onClose = () => {
         var _a, _b;
         if (!showCampaign)
@@ -2716,7 +3195,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
                 }
             }
         }
-        document.body.classList.remove('noscroll');
         fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
             method: 'POST',
             headers: {
@@ -2730,8 +3208,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
                 duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
             }),
         });
-        setShowCampaign(null);
-        setShowThankyou(null);
+        onCloseBase();
     }; //
     useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
@@ -2773,8 +3250,10 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
     }, []);
     const onSubmit = (currentForm, formDataObj, categoryLevel, categoryData) => __awaiter(void 0, void 0, void 0, function* () {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        if (!formDataObj)
+        if (!formDataObj || Object.values(formDataObj).every((v) => !Boolean(v))) {
+            setShowEmpty(true);
             return;
+        }
         LeadLog('submitHandler', categoryLevel, categoryData);
         const formData = Object.keys(formDataObj)
             .filter((key) => !!formDataObj[key])
@@ -2782,6 +3261,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
             name: key,
             value: String(formDataObj[key]),
         }));
+        console.log('** RYAN index.tsx 218 formData : ', formData);
         const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
         // Get ga_client_id from cookies
         const gaCookie = getCookie('_ga') || null;
@@ -2929,18 +3409,15 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
         }
     }, [showCampaign]);
     return (React__default.createElement(LeadGenContext.Provider, { value: { apiUrl, siteDomain, siteId, locale } },
-        React__default.createElement(TranslationsContext.Provider, { value: {
-                locale,
-                values: getTranslations(locale),
-            } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
+        React__default.createElement(TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
             React__default.createElement(Box, { sx: { position: 'fixed', zIndex: ZINDEX_SSO - 9e6 } },
                 React__default.createElement(Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease" }, (styles) => {
                     var _a;
                     return (React__default.createElement(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.createElement(React__default.Fragment, null,
                         !!showCampaign.extra_fields.currentLayout &&
                             !showCampaign.extra_fields.currentLayout.includes('Inline') &&
-                            !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default.createElement(Overlay, { color: "#000", opacity: 0.5, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                        React__default.createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale })))));
+                            !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default.createElement(Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
+                        React__default.createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty })))));
                 })))))));
 };
 const LeadGen = _LeadGen;