@hhgtech/hhg-components 1.29.337-beta-7 → 1.29.337

package/build/esm/lead.js

@@ -1,44 +1,42 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-0dadaffe.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 { _ as __rest, a as __awaiter } from './tslib.es6-7b710789.js';
+import React__default, { createContext, useEffect, useMemo, useRef, useState, useContext } from 'react';
+import { createStyles, Box, 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-4133adac.js';
-import { T as Text } from './index-d4756da4.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-0856d008.js';
-import { D as DatePicker } from './index-bc0f28a2.js';
-import { M as MAPPED_LOCALE } from './utils-89adeaf2.js';
+import { u as useTranslations } from './index-5539b7bd.js';
+import { T as Text } from './index-b380b8ce.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-51482477.js';
+import { D as DatePicker } from './index-196497c1.js';
+import { M as MAPPED_LOCALE } from './utils-351e2780.js';
 import '@mantine/dates';
-import { Z as ZINDEX_SSO } from './index-49b82bec.js';
-import './index-12474271.js';
-import { C as CommonGAssets } from './index-a62f9674.js';
-import './useMantineLocale-0b9063e9.js';
-import { B as Button$1 } from './index-a02c7f7a.js';
-import './index.styles-d845a625.js';
-import { T as TranslationsContext } from './translationsContext-3a93695a.js';
-import { useClickOutside } from '@mantine/hooks';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-6b640789.js';
-import './other-87ae468b.js';
-import './index-087b0ef8.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-a343c010.js';
-import { B as Button } from './index-41144b7e.js';
-import { H as Heading$1 } from './index-52a9228a.js';
+import { Z as ZINDEX_SSO } from './index-6366de18.js';
+import './index-b067b442.js';
+import { C as CommonGAssets } from './index-93183ae3.js';
+import './useMantineLocale-8cc72830.js';
+import { B as Button$1 } from './index-cc394577.js';
+import './index.styles-01bc7738.js';
+import { T as TranslationsContext } from './translationsContext-6625ef10.js';
+import '@mantine/hooks';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-a7413d88.js';
+import './other-978957e0.js';
+import './index-0c8caf51.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-206540a6.js';
+import { B as Button } from './index-5f57b1dc.js';
+import { H as Heading$1 } from './index-b2c17404.js';
 import { v1 } from 'uuid';
-import { i as isVideo } from './index-4f31d38d.js';
-import { D as DrawerComponent } from './index-8410a781.js';
-import { u as useScreenSize } from './useScreenSize-4ee1316a.js';
-import { createPortal } from 'react-dom';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
+import { i as isVideo } from './index-ad8421da.js';
 import { theme } from './miscTheme.js';
+import { createPortal } from 'react-dom';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { C as Close } from './Close-1a781973.js';
+import { C as Close } from './Close-50ddb594.js';
 import '@hhgtech/icons/other';
+import './useScreenSize-623e1764.js';
+import '@emotion/styled';
 import '@mantine/carousel';
-import './Locale-3f8c59fd.js';
+import './Locale-3221a5f1.js';
 import 'classnames';
-import './useUniqueId-1fd7483c.js';
+import './useUniqueId-dc3856df.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -46,7 +44,6 @@ import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
 import '@mantine/notifications';
-import 'vaul';
 
 const LeadGenComponentContext = createContext({});
 
@@ -520,7 +517,7 @@ const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validati
     return { form, validateObj };
 };
 
-const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, showEmpty, setShowEmpty, }) => {
+const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, }) => {
     var _a, _b;
     const extraFields = campaign.extra_fields;
     const campaignId = campaign.id;
@@ -573,8 +570,6 @@ const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, sh
             onSubmit,
             showThankyou,
             setShowThankyou,
-            showEmpty,
-            setShowEmpty,
         } }, children)) : null;
 };
 
@@ -591,7 +586,7 @@ var useStyles$2 = createStyles(() => {
 });
 
 const libraries$1 = ['places'];
-const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
+const LocationBlock$1 = ({ name, placeholder, locale, required = true, }) => {
     var _a;
     const form = useLeadFormContext$1();
     const [searchValue, setSearchValue] = useState('');
@@ -691,7 +686,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, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+                return (React__default.createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
@@ -1041,10 +1036,7 @@ var enPH = {
 	"lead.otp.verify": "Verify",
 	"lead.otp.resend": "Resend OTP{timer}",
 	"lead.otp.phoneLabel": "Phone 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"
+	"lead.otp.phonePlaceholder": "Enter OTP"
 };
 
 var hiIN = {
@@ -1060,10 +1052,7 @@ 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.empty.title": "ऊप्स! लगता है आपकी जानकारी खाली है। क्या आप जानकारी फिर से सबमिट करना चाहते हैं?",
-	"lead.empty.cancel": "रद्द करें",
-	"lead.empty.submitAgain": "फिर से सबमिट करें"
+	"lead.otp.resend": "Resend OTP{timer}"
 };
 
 var idID = {
@@ -1081,10 +1070,7 @@ var idID = {
 	"lead.otp.verify": "Verifikasi",
 	"lead.otp.resend": "Kirim Ulang OTP {timer}",
 	"lead.otp.phoneLabel": "OTP Telepon",
-	"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"
+	"lead.otp.phonePlaceholder": "Masukkan OTP"
 };
 
 var kmKH = {
@@ -1102,10 +1088,7 @@ var kmKH = {
 	"lead.otp.verify": "ផ្ទៀងផ្ទាត់",
 	"lead.otp.resend": "ផ្ញើ OTP ម្តងទៀត {timer}",
 	"lead.otp.phoneLabel": "OTP ទូរស័ព្ទ",
-	"lead.otp.phonePlaceholder": "បញ្ចូល OTP",
-	"lead.empty.title": "អូុបស! ហាក់ដូចជាព័ត៌មានរបស់អ្នកទទេ។ តើអ្នកចង់ដាក់ស្នើព័ត៌មានម្តងទៀតទេ?",
-	"lead.empty.cancel": "លុប​ចោល",
-	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត"
+	"lead.otp.phonePlaceholder": "បញ្ចូល OTP"
 };
 
 var msMY = {
@@ -1123,10 +1106,7 @@ var msMY = {
 	"lead.otp.verify": "Sahkan",
 	"lead.otp.resend": "Hantar semula OTP {timer}",
 	"lead.otp.phoneLabel": "OTP Telefon",
-	"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"
+	"lead.otp.phonePlaceholder": "Masukkan OTP"
 };
 
 var myMM = {
@@ -1144,10 +1124,7 @@ var myMM = {
 	"lead.otp.verify": "အတည်ပြုပါ",
 	"lead.otp.resend": "OTP ကိုထပ်မံပို့ရန် {timer}",
 	"lead.otp.phoneLabel": "ဖုန်း OTP",
-	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ",
-	"lead.empty.title": "အုပ်စ်! သင့်အချက်အလက်သည် ဗလာဖြစ်နေသလိုဖြစ်သည်။ ထပ်မံတင်သွင်းလိုပါသလား?",
-	"lead.empty.cancel": "မလုပ်ဆောင်ပါ",
-	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ"
+	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ"
 };
 
 var thTH = {
@@ -1165,10 +1142,7 @@ var thTH = {
 	"lead.otp.verify": "ยืนยัน",
 	"lead.otp.resend": "ส่ง OTP อีกครั้ง {timer}",
 	"lead.otp.phoneLabel": "OTP โทรศัพท์",
-	"lead.otp.phonePlaceholder": "ป้อน OTP",
-	"lead.empty.title": "อุ๊ปส์! ดูเหมือนว่าข้อมูลของคุณว่างเปล่า คุณต้องการส่งข้อมูลอีกครั้งหรือไม่?",
-	"lead.empty.cancel": "ยกเลิก",
-	"lead.empty.submitAgain": "ส่งอีกครั้ง"
+	"lead.otp.phonePlaceholder": "ป้อน OTP"
 };
 
 var viVN = {
@@ -1197,10 +1171,7 @@ 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.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"
+	"lead.otp.phonePlaceholder": "Nhập OTP"
 };
 
 var zhTW = {
@@ -1218,10 +1189,7 @@ var zhTW = {
 	"lead.otp.verify": "驗證",
 	"lead.otp.resend": "重新發送 OTP {timer}",
 	"lead.otp.phoneLabel": "電話 OTP",
-	"lead.otp.phonePlaceholder": "輸入 OTP",
-	"lead.empty.title": "哎呀，您的資訊似乎是空的，您想要重新提交資訊嗎？",
-	"lead.empty.cancel": "取消",
-	"lead.empty.submitAgain": "重新提交"
+	"lead.otp.phonePlaceholder": "輸入 OTP"
 };
 
 const translationsMap = {
@@ -1281,8 +1249,9 @@ 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: "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" }))));
+    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" }))));
 
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
@@ -1359,192 +1328,6 @@ 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 = [], }) => {
@@ -1574,9 +1357,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 === 'string' && value.replace(' ', '') === '') ||
-                    typeof value === 'undefined' ||
+                if (typeof value === 'undefined' ||
                     value === '' ||
+                    (typeof value === 'string' && value.replace(' ', '') === '') ||
                     (Array.isArray(value) && value.length === 0)) {
                     return isBLockRequired
                         ? t('validator.required')
@@ -1710,407 +1493,108 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
     return { form, validateObj };
 };
 
-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;
-        }
-        setShrink(false);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
-    });
-    const [shrink, setShrink] = useState(shrinkProps);
-    const onClick = useCallback((e) => {
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
-        if (shrink) {
-            return;
+const 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 $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',
+        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);
             });
         }
-    }, [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));
+        else {
+            setReady(true);
+        }
+    }, []);
+    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)))));
 };
 
+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(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)))));
+                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))));
             case 'NumberBlock':
-                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)))));
+                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))));
             case 'EmailBlock':
-                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)))));
+                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))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                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" })))));
+                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" })));
             }
             case 'LocationBlock': {
-                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)))));
+                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
-                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)))));
+                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" })));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
                     React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
@@ -2119,42 +1603,30 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
             case 'CheckboxBlock':
-                return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox" },
+                return (React__default.createElement(React__default.Fragment, null,
                     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 leadgen-form_field"
-                        key: index, label: placeholder, size: "md", sx: {
+                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, className: "lead-modal__form-control", 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(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" }))))));
+                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" }))))));
             case 'DropdownBlock':
-                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                return (React__default.createElement(React__default.Fragment, null,
                     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 leadgen-form_field"
-                        label: placeholder, placeholder: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                    React__default.createElement(Select, Object.assign({ key: index, className: "lead-modal__form-control", label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
             case 'TncBlock':
-                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)))));
+                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 }))));
         }
         return null;
     })));
@@ -2285,27 +1757,169 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
             })))));
 };
 
-const EmptyIcon = (props) => {
-    const { className, style } = props;
-    return (React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
-        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
-        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
+const 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')))));
 };
 
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
 // image: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
-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, }) => {
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, }) => {
     var _a, _b, _c;
-    const { t } = useTranslations();
-    const { isMobile } = useScreenSize();
-    const [open, setOpen] = useState(!!campaignId);
+    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 [showOtpPhone, setShowOtpPhone] = useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [snap, setSnap] = useState(0.8);
     const formRef = useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -2315,35 +1929,6 @@ 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 ');
@@ -2434,134 +2019,83 @@ 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 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 leadgen-btn_action'), 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 leadgen-btn_action'), 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', `leadgen-${currentLayout}`, {
-        'le-buider-inline': !!isInPage,
-        'le-buider-slider': !!isSlider,
-        leadgen: 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 },
+    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' : ''}` },
             currentLayout == 'Fullscreen' ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                     aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
                 } })) : null,
-            PopupWrapper)));
+            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" }))))));
     if (!renderAfterImageSizes)
         return null;
     if (currentLayout.includes('LightBox') ||
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Slider') {
-        return PopupContainer;
+        return PopupContent;
     }
     else if (currentLayout == 'Sidebar') {
-        return React__default.createElement(SideBarLayout, { content: PopupContainer });
+        return React__default.createElement(SideBarLayout, { content: PopupContent });
     }
     else if (currentLayout.includes('Inline')) {
-        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
+        return (React__default.createElement(InlineLayout, { content: PopupContent, inlinePosition: extraFields.popupInlinePosition }));
     }
     return null;
 };
@@ -3006,7 +2540,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, }) => {
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = useContext(LeadGenContext);
     useEffect(() => {
@@ -3125,7 +2659,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, showEmpty: showEmpty, setShowEmpty: setShowEmpty }));
+        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 }));
     }
     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 }));
@@ -3150,7 +2684,6 @@ 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);
@@ -3166,11 +2699,6 @@ 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)
@@ -3188,6 +2716,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
                 }
             }
         }
+        document.body.classList.remove('noscroll');
         fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
             method: 'POST',
             headers: {
@@ -3201,7 +2730,8 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
                 duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
             }),
         });
-        onCloseBase();
+        setShowCampaign(null);
+        setShowThankyou(null);
     }; //
     useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
@@ -3243,10 +2773,8 @@ 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 || Object.values(formDataObj).every((v) => !Boolean(v))) {
-            setShowEmpty(true);
+        if (!formDataObj)
             return;
-        }
         LeadLog('submitHandler', categoryLevel, categoryData);
         const formData = Object.keys(formDataObj)
             .filter((key) => !!formDataObj[key])
@@ -3254,7 +2782,6 @@ 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;
@@ -3402,15 +2929,18 @@ 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, showEmpty: showEmpty, setShowEmpty: setShowEmpty }, 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 }, 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.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 })))));
+                            !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 })))));
                 })))))));
 };
 const LeadGen = _LeadGen;