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

package/build/esm/lead.js

@@ -1,44 +1,44 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-3b3bf6ee.js';
-import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, forwardRef, useCallback, useImperativeHandle, memo } from 'react';
-import { createStyles, Box, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$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-ec147d4e.js';
+import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback } from 'react';
+import { createStyles, Box, Button as Button$2, Autocomplete, clsx, Input as Input$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
-import { createFormContext, useForm } from '@mantine/form';
-import { u as useTranslations } from './index-ed4991de.js';
-import { T as TranslationsContext } from './translationsContext-eadc2f8c.js';
+import { createFormContext } from '@mantine/form';
+import { u as useTranslations } from './index-66b3f2a6.js';
+import { T as TranslationsContext } from './translationsContext-d7e74248.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-0499e7df.js';
-import { T as Text } from './index-8cbad76d.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-a043265d.js';
-import { D as DatePicker } from './index-021da3d3.js';
-import { M as MAPPED_LOCALE } from './utils-55b98af6.js';
-import { DateInput } from '@mantine/dates';
-import { Z as ZINDEX_SSO } from './index-1de1575d.js';
-import './index-e8c7d06c.js';
-import './index-3f5277e4.js';
-import './useMantineLocale-61a713dc.js';
-import { B as Button$1 } from './index-5130c494.js';
-import './index.styles-7e8e723e.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-cd21d010.js';
+import { T as Text } from './index-53d47678.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-edb08ee4.js';
+import { D as DatePicker } from './index-a4b4cee3.js';
+import { M as MAPPED_LOCALE } from './utils-a3b9d7d0.js';
+import '@mantine/dates';
+import { Z as ZINDEX_SSO } from './index-11d5337e.js';
+import './index-cc86d927.js';
+import './index-179f52e7.js';
+import './useMantineLocale-5d6ca417.js';
+import { B as Button$1 } from './index-bd572333.js';
+import './index.styles-6c3c23d3.js';
 import { useClickOutside } from '@mantine/hooks';
-import './other-3c2c2888.js';
-import './index-afa718a7.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-b79b68b2.js';
-import { B as Button } from './index-4b210adb.js';
-import { H as Heading$1 } from './index-17b7c39c.js';
-import styled from '@emotion/styled';
+import './other-acddb230.js';
+import './index-16e4de05.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-18305867.js';
+import { B as Button } from './index-7c8f3b35.js';
+import { H as Heading$1 } from './index-84607991.js';
 import { v1 } from 'uuid';
+import { i as isVideo } from './index-d03a12b1.js';
+import { D as DrawerComponent } from './index-4298b53e.js';
+import { u as useScreenSize } from './useScreenSize-02f86d84.js';
+import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { i as isVideo } from './index-02c8be33.js';
-import { D as DrawerComponent } from './index-58bb5f33.js';
-import { u as useScreenSize } from './useScreenSize-0a846318.js';
-import { createPortal } from 'react-dom';
-import { C as Close } from './Close-dfe80a9c.js';
+import { C as Close } from './Close-bf351f60.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-0fe839f4.js';
+import './Locale-559226db.js';
 import 'classnames';
-import './useUniqueId-4f87763e.js';
+import './useUniqueId-629ceab2.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -72,7 +72,7 @@ if (sessionStorage.getItem('insider_object')) {
 }
 const docLang = document.documentElement.lang;
 // TODO: country code
-const LEAD_LOCALE_DATA$1 = {
+const LEAD_LOCALE_DATA = {
     'vi-VN': {
         popupLang: 'vi',
         countryCode: 'vn',
@@ -114,7 +114,7 @@ const LEAD_LOCALE_DATA$1 = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA$1[docLang] || LEAD_LOCALE_DATA$1['vi-VN'];
+const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
 function LEAD_RESET_VAR() {
     // LEAD_CURRENT_URL = location.href.toLowerCase();
     LEAD_CURRENT_URL =
@@ -135,11 +135,6 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
-const LEADGEN_ACTIONS = {
-    SHOW: 'SHOW',
-    SCROLL: 'SCROLL',
-    TIME: 'TIME',
-};
 const LEADGEN_LAYOUT = {
     LightBoxA: 'LightBoxA',
     LightBoxB: 'LightBoxB',
@@ -169,10 +164,8 @@ const LEADGEN_BLOCK = {
     DropdownBlock: 'DropdownBlock',
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
-    TitleBlock: 'TitleBlock',
-    SubtitleBlock: 'SubtitleBlock',
 };
-const LEADGEN_BLOCK_INPUT = [
+const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.TextBlock,
     LEADGEN_BLOCK.NumberBlock,
     LEADGEN_BLOCK.DateBlock,
@@ -188,48 +181,6 @@ const LEADGEN_BLOCK_INPUT = [
     LEADGEN_BLOCK.TncBlock,
 ];
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
-const LEAD_LOCALE_DATA = {
-    'vi-VN': {
-        popupLang: 'vi',
-        countryCode: 'vn',
-        countryCodeNumber: 84,
-    },
-    'id-ID': {
-        popupLang: 'id',
-        countryCode: 'id',
-        countryCodeNumber: 62,
-    },
-    'th-TH': {
-        popupLang: 'th',
-        countryCode: 'th',
-        countryCodeNumber: 66,
-    },
-    'ms-MY': {
-        popupLang: 'ms',
-        countryCode: 'my',
-        countryCodeNumber: 60,
-    },
-    'zh-TW': {
-        popupLang: 'zh',
-        countryCode: 'tw',
-        countryCodeNumber: 886,
-    },
-    'km-KH': {
-        popupLang: 'km',
-        countryCode: 'kh',
-        countryCodeNumber: 855,
-    },
-    'my-MM': {
-        popupLang: 'my',
-        countryCode: 'mm',
-        countryCodeNumber: 95,
-    },
-    'hi-IN': {
-        popupLang: 'hi',
-        countryCode: 'in',
-        countryCodeNumber: 91,
-    },
-};
 const mappingSSOToLead = (userInfoProps) => {
     var _a, _b;
     try {
@@ -245,7 +196,7 @@ const mappingSSOToLead = (userInfoProps) => {
                 if (ssoKey === 'birthday') {
                     const dob = dayjs(initValue, 'YYYY-MM-DD', true);
                     if (dob.isValid()) {
-                        user.birthday = dob.toDate();
+                        user.birthday = dob;
                     }
                 }
                 else if (ssoKey === 'gender') {
@@ -268,46 +219,6 @@ const mappingSSOToLead = (userInfoProps) => {
     catch (error) {
         return;
     }
-};
-const formatCampaignDetail = (campaign) => {
-    if (!campaign) {
-        return {};
-    }
-    try {
-        const { extra_fields, thank_you_image } = campaign || {};
-        const { textBlocks: exTextBlocks, imageBlocks: exImageBlocks, listBlockAdded: exListBlockAdded, listBlockThankyou: exListBlockThankyou, actionBlocks: exActionBlocks, } = extra_fields;
-        const textBlocks = JSON.parse(exTextBlocks);
-        const imageBlocks = JSON.parse(exImageBlocks);
-        const listBlockAdded = JSON.parse(exListBlockAdded);
-        const listBlockThankyou = JSON.parse(exListBlockThankyou);
-        const actionBlocks = JSON.parse(exActionBlocks);
-        const ThankYouBlock = {
-            image: { src: thank_you_image },
-        };
-        listBlockThankyou.forEach((block) => {
-            const { name, data } = block || {};
-            const { value: htmlText, align, newtab, url } = data || {};
-            switch (name) {
-                case LEADGEN_BLOCK.TitleBlock: {
-                    ThankYouBlock.title = { htmlText, align };
-                }
-                case LEADGEN_BLOCK.SubtitleBlock: {
-                    ThankYouBlock.description = { htmlText, align };
-                }
-                case LEADGEN_BLOCK.LinkButtonBlock: {
-                    ThankYouBlock.button = { htmlText, newtab, url };
-                }
-            }
-        });
-        return Object.assign(Object.assign({}, campaign), { extra_fields: Object.assign(Object.assign({}, extra_fields), { textBlocks,
-                imageBlocks,
-                listBlockAdded,
-                listBlockThankyou,
-                actionBlocks }), ThankYouBlock });
-    }
-    catch (error) {
-        return {};
-    }
 };
 
 class Store {
@@ -318,13 +229,6 @@ class Store {
 }
 const leadStore = new Store();
 
-const LEADGEN_API_METHOD = {
-    GET: 'get',
-    POST: 'POST',
-};
-const LEADGEN_API_PATH = {
-    V2_CAMPAIGN: 'api/v2/campaign',
-};
 const leadApi = {
     call(_a) {
         var { url, data = undefined } = _a, config = __rest(_a, ["url", "data"]);
@@ -428,39 +332,8 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
         },
     });
 };
-const campaignGetByCode = (campaign_code) => {
-    return leadApi.call({
-        url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
-        method: LEADGEN_API_METHOD.GET,
-    });
-};
-const campaignPostLead = ({ data }) => {
-    return leadApi.call({
-        url: 'api/v2/subscription-box',
-        method: LEADGEN_API_METHOD.POST,
-        data,
-    });
-};
-const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
-    return leadApi.call({
-        url: `api/campaign/${code}/impression`,
-        method: LEADGEN_API_METHOD.POST,
-        data: {
-            action,
-            title_article,
-            cookie_id,
-            ga_client_id,
-            url,
-            extra,
-            referrer,
-        },
-    });
-};
 const Service = {
     campaignGetById,
-    campaignGetByCode,
-    campaignPostLead,
-    campaignPostImpression,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -1462,1065 +1335,66 @@ const getTranslations = (locale) => {
 
 const LeadGenContext = createContext({});
 
-const LeadGenSubscriptionBoxContext = createContext({});
-const LeadGenSubscriptionBoxProvider = (props) => {
-    const { campaign_code, apiUrl: apiUrlProps, apiSubotUrl, locale, forceCampaign: forceCampaignProps, children, } = props;
-    const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
-    const leadGenSubscriptionBoxValue = useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [campaign_code, locale, forceCampaign]);
-    const translationContextValue = { locale, values: getTranslations(locale) };
+const useImageSize = (src) => {
+    const [width, setWidth] = useState(16);
+    const [height, setHeight] = useState(9);
+    const [loaded, setLoaded] = useState(false);
+    // load src image to get its width and height
     useEffect(() => {
-        if (forceCampaignProps) {
-            setForceCampaign(forceCampaignProps);
-            return;
-        }
-        if (campaign_code) {
-            Service.campaignGetByCode(campaign_code).then((res) => {
-                const { _data } = res || {};
-                const { campaigns } = _data || {};
-                setForceCampaign(formatCampaignDetail(campaigns));
+        setLoaded(false);
+        if (src) {
+            const img = new Image();
+            img.addEventListener('load', () => {
+                setWidth(img.naturalWidth);
+                setHeight(img.naturalHeight);
+                setLoaded(true);
+            });
+            img.addEventListener('error', () => {
+                setWidth(16);
+                setHeight(9);
+                setLoaded(true);
             });
+            img.src = src;
         }
-    }, [campaign_code]);
-    useEffect(() => {
-        leadStore.apiLeadUrl = apiUrlProps;
-        leadStore.apiSubotUrl = apiSubotUrl;
-        return () => {
-            setForceCampaign(null);
-        };
-    }, []);
-    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        else {
+            setWidth(16);
+            setHeight(9);
+            setLoaded(true);
+        }
+    }, [src]);
+    return {
+        loaded,
+        width,
+        height,
+    };
+};
+
+const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.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" }))));
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// imageMobile: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
+    if (!imageMobileLoaded || !imageDestkopLoaded)
         return null;
-    }
-    return (React__default.createElement(LeadGenSubscriptionBoxContext.Provider, { value: leadGenSubscriptionBoxValue },
-        React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children)));
-};
-
-// You can give context variables any name
-const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
-const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
-    var _a;
-    const { t } = useTranslations();
-    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
-    const LEAD_LOCALE = LEAD_LOCALE_DATA[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
-        LEAD_LOCALE_DATA['vi-VN'];
-    const validateObj = useMemo(() => {
-        const InputBlocks = [
-            'TextBlock',
-            'NumberBlock',
-            'EmailBlock',
-            'PhoneBlock',
-            'DateBlock',
-            'CheckboxBlock',
-            'RadioBlock',
-            'DropdownBlock',
-            'PhoneOtpBlock',
-            'WhatsappOtpBlock',
-            'ZaloOtpBlock',
-            'LocationBlock',
-            'TncBlock',
-        ];
-        // ALL are required and can skip if not touched yet
-        const withSharedCheck = (name, cb, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        block) => {
-            return (value) => {
-                var _a;
-                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
-                if (!formRef.current.isTouched(name))
-                    return;
-                if ((typeof value === 'string' && value.replace(' ', '') === '') ||
-                    typeof value === 'undefined' ||
-                    value === '' ||
-                    (Array.isArray(value) && value.length === 0)) {
-                    return isBLockRequired
-                        ? t('validator.required')
-                        : cb === null || cb === void 0 ? void 0 : cb(value);
-                }
-                return cb === null || cb === void 0 ? void 0 : cb(value);
-            };
-        };
-        return listBlockAdded
-            .filter((b) => InputBlocks.includes(b.name))
-            .reduce((r, b) => {
-            var _a;
-            const isRequired = (_a = b.data.required) !== null && _a !== void 0 ? _a : true;
-            if (b.name === 'NumberBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && isNaN(Number(value))) {
-                            return t('validator.number');
-                        }
-                    }, b) });
-            }
-            else if (b.name === 'EmailBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-                            return t('validator.email');
-                        }
-                        if (!value)
-                            return;
-                        validatingEmailRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(b.data.value, 'Validating...');
-                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                email: value,
-                            })
-                                .then((tKey) => {
-                                if (tKey) {
-                                    formRef.current.setFieldError(b.data.value, t(tKey));
-                                }
-                                else {
-                                    formRef.current.clearFieldError(b.data.value);
-                                }
-                                validatingEmailRef.current = false;
-                            })
-                                .catch((e) => {
-                                console.error(e);
-                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
-                                validatingEmailRef.current = false;
-                            });
-                        }, 200);
-                    }, b) });
-            }
-            else if (b.name === 'PhoneBlock' ||
-                b.name === 'PhoneOtpBlock' ||
-                b.name === 'ZaloOtpBlock' ||
-                b.name === 'WhatsappOtpBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value &&
-                            window.intlTelInputUtils &&
-                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
-                            return t('validator.phone');
-                        }
-                        if (!value)
-                            return;
-                        validatingPhoneRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(b.data.value, 'Validating...');
-                            if (b.data.singleSubmission) {
-                                checkUsedPhoneOnlyWithCache(campaignId, value)
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(b.data.value, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(b.data.value);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((err) => {
-                                    console.error(err);
-                                    formRef.current.setFieldError(b.data.value, err.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                            else {
-                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                    phone: value,
-                                })
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(b.data.value, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(b.data.value);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((e) => {
-                                    console.error(e);
-                                    formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                        }, 200);
-                    }, b) });
-            }
-            else if (b.name === 'DateBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && isNaN(Date.parse(value))) {
-                            return t('validator.date');
-                        }
-                    }, b) });
-            }
-            else if (b.name === 'TncBlock') {
-                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
-                        if (isRequired && !value) {
-                            return t('validator.required');
-                        }
-                    }, b) });
-            }
-            else {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, undefined, b) });
-            }
-        }, {});
-    }, [listBlockAdded.map((b) => b.name).join(',')]);
-    const form = useLeadForm({
-        validateInputOnChange: true,
-        clearInputErrorOnChange: true,
-        validate: validateObj,
-        initialValues,
-    });
-    const formRef = useRef(form);
-    formRef.current = form;
-    return { form, validateObj };
-};
-
-const PhoneInput = forwardRef((props, ref) => {
-    const { defaultCountry, id: idProps, name, placeholder, label, labelElement, labelProps, description, descriptionProps, withAsterisk, inputMode, inputContainer, inputWrapperOrder, error, className, classNames, style, styles } = props, restProps = __rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
-    const id = idProps || v1() + name;
-    return (React__default.createElement(Input$1.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
-        React__default.createElement("div", { className: "mantine-Input-wrapper" },
-            React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
-});
-
-const StyledLeadGenFormInner = styled.div `
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  .leadgen-form_input {
-    width: calc(50% - 4px);
-  }
-
-  .leadgen-form_input_checkbox {
-    width: 100%;
-  }
-`;
-
-const cssInputNotShrink$1 = 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$1 = css `
-  height: auto !important;
-  cursor: text;
-  opacity: 1;
-  transition: 0.1s ease-in-out all;
-`;
-const cssLabelNotShrink$1 = 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$1 = 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$1 = 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$1 = css `
-  height: auto;
-  min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 7px);
-  cursor: text;
-  pointer-events: auto;
-`;
-const cssInputWrapperError$1 = css `
-  color: ${theme.colors.red800};
-  font-size: 12px;
-  line-height: 1.5;
-`;
-const StyledTextFieldContainer$1 = 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$1}
-  }
-
-  .mantine-Input-wrapper {
-    ${cssWrapperInputNotShrink$1}
-
-    + .mantine-Popover-dropdown[data-position="bottom-start"] {
-      left: 0 !important;
-    }
-    + .mantine-Popover-dropdown[data-position='top-start'] {
-      top: unset !important;
-      left: 0 !important;
-      bottom: 100% !important;
-    }
-  }
-
-  .mantine-Input-input {
-    ${cssInputNotShrink$1}
-  }
-
-  &.textField_shrink,
-  &:focus-within {
-    .mantine-InputWrapper-label {
-      ${cssLabelShrink$1}
-    }
-
-    .mantine-Input-wrapper {
-      ${cssWrapperInputShrink$1}
-      &.mantine-Select-wrapper {
-        .mantine-Select-rightSection {
-          pointer-events: auto !important;
-        }
-      }
-    }
-
-    .mantine-Input-input {
-      ${cssInputShrink$1}
-    }
-
-    &:has(.PhoneInput) {
-      .mantine-InputWrapper-label {
-        left: var(--space-x, 16px);
-      }
-      .PhoneInput {
-        .PhoneInputInput {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .PhoneInput {
-    --phone-select: 75px;
-    --phone-input-space-x: 8px;
-    width: 100%;
-    opacity: 1;
-    border: none;
-    .PhoneInputCountry {
-      background-color: transparent;
-      border: none;
-      padding: 0;
-      width: var(--phone-select, 75px);
-    }
-    .PhoneInputInput {
-      flex: 1;
-      min-width: 0;
-      line-height: 1.5;
-      outline: none !important;
-      border: none;
-      box-shadow: none;
-      padding: 0 var(--phone-input-space-x, 8px);
-      opacity: 0;
-      color: ${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$1 = 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};
-        + svg {
-          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$1}
-  }
-`;
-
-const TextField$1 = (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 $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
-        }
-    }, [shrink]);
-    useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default.createElement(StyledTextFieldContainer$1, 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$1 = (props) => {
-    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
-    return (React__default.createElement(StyledChoiceFieldContainer$1, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
-};
-
-const libraries = ['places'];
-const GoogleLocationBlock = (props) => {
-    var _a;
-    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __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, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, 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)));
-};
-
-const LEADGEN_ORDER_INPUT_WRAPPER = [
-    'label',
-    'input',
-    'description',
-    'error',
-];
-const LeadGenForm = forwardRef((props, ref) => {
-    const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
-    const formRef = useRef(null);
-    const form = formProps || useForm({ initialValues, validate });
-    const middlewareFinish = (values, event) => {
-        onFinish === null || onFinish === void 0 ? void 0 : onFinish(values, event);
-    };
-    const middlewareFinishFailed = (errors, values, events) => {
-        if (scrollToErrorField && errors) {
-            const firstErrorKey = Object.keys(errors)[0];
-            const firstErrorElement = document.querySelector(`[name="${firstErrorKey}"]`);
-            if (firstErrorElement && (firstErrorElement === null || firstErrorElement === void 0 ? void 0 : firstErrorElement.focus)) {
-                setTimeout(() => {
-                    firstErrorElement === null || firstErrorElement === void 0 ? void 0 : firstErrorElement.focus();
-                    firstErrorElement.scrollIntoView({
-                        behavior: 'auto',
-                        block: 'center',
-                        inline: 'center',
-                    });
-                }, 100);
-            }
-        }
-        onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errors, values, events);
-    };
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            if (!window.intlTelInputUtils) {
-                yield require('intl-tel-input/build/js/utils');
-            }
-        }))();
-    }, []);
-    useImperativeHandle(ref, () => (Object.assign(Object.assign({}, form), { submit: () => formRef.current.requestSubmit() })), [form, formRef]);
-    if (!blocks || !blocks.length) {
-        return null;
-    }
-    return (React__default.createElement("form", { ref: formRef, onSubmit: form.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
-        React__default.createElement(StyledLeadGenFormInner, { className: "leadgen-form_inputs" }, blocks.map((block, idx) => {
-            const { id, name: blockName, data } = block;
-            const { placeholder, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
-            const formInputProps = form.getInputProps(name);
-            const { value, error } = formInputProps;
-            const reactKey = `${id}-${idx}`;
-            switch (blockName) {
-                case LEADGEN_BLOCK.TextBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
-                }
-                case LEADGEN_BLOCK.NumberBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
-                }
-                case LEADGEN_BLOCK.EmailBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
-                }
-                case LEADGEN_BLOCK.PhoneOtpBlock:
-                case LEADGEN_BLOCK.WhatsappOtpBlock:
-                case LEADGEN_BLOCK.ZaloOtpBlock:
-                case LEADGEN_BLOCK.PhoneBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
-                }
-                case LEADGEN_BLOCK.LocationBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
-                }
-                case LEADGEN_BLOCK.DateBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
-                }
-                case LEADGEN_BLOCK.DropdownBlock:
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
-                                value: l.value,
-                                label: l.placeholder,
-                            })) }, formInputProps))));
-                case LEADGEN_BLOCK.CheckboxBlock: {
-                    const formInputCheckboxProps = form.getInputProps(name, {
-                        type: 'checkbox',
-                    });
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
-                        isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                flexWrap: 'wrap',
-                                gap: 8,
-                            }, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
-                                return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
-                            } }, formInputCheckboxProps), listQuestion.map((l, _idx) => (React__default.createElement(Checkbox$1, { name: name, key: _idx, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
-                }
-                case LEADGEN_BLOCK.RadioBlock: {
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
-                        isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
-                                return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
-                            } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
-                }
-                case 'TncBlock':
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
-                        React__default.createElement(Input$1.Wrapper, { error: error },
-                            React__default.createElement(Checkbox$1, Object.assign({ value: value, name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, formInputProps)))));
-                default: {
-                    return null;
-                }
-            }
-        }))));
-});
-
-const StyledLeadGenThankYou = styled.div `
-  display: flex;
-  gap: 8px;
-  flex-direction: column;
-  padding-block: 24px;
-
-  .leadgen-image {
-    width: 120px;
-    height: 120px;
-    margin-inline: auto;
-    object-fit: contain;
-    object-position: center;
-    text-align: center;
-  }
-
-  .leadgen-title {
-    margin-block: 0;
-    color: ${theme.colors.gray900};
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 28px;
-    letter-spacing: -0.2px;
-  }
-
-  .leadgen-description {
-    margin-block: 0;
-    color: ${theme.colors.gray600};
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-    letter-spacing: -0.2px;
-    text-align: center;
-  }
-
-  > [data-align] {
-    &[data-align='right'] {
-      text-align: right;
-    }
-    &[data-align='center'] {
-      text-align: center;
-    }
-  }
-`;
-const LeadGenThankYou = ({ image, title, description, showButton = false, button, className, style, }) => {
-    const { src } = image;
-    const { htmlText: titleText, align: titleAlign } = title;
-    const { htmlText: descriptionText, align: descriptionAlign } = description;
-    const { htmlText: buttonText, newtab, url, onClick } = button;
-    return (React__default.createElement(StyledLeadGenThankYou, { className: className, style: style },
-        React__default.createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
-        React__default.createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
-        React__default.createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
-        !!buttonText && showButton && (React__default.createElement(Button$2, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
-};
-
-const StyledLeadGenSubscriptionBoxBody = styled.div `
-  margin-top: 16px;
-  .leadgen-btn {
-    margin-top: 16px;
-  }
-`;
-const StyledLeadGenSubscriptionBoxHeaderImage = styled.div `
-  margin-top: 3px;
-  margin-right: 20px;
-  width: 44px;
-  height: 44px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fix: contain;
-    onject-position: center;
-  }
-
-  :has(img[src='']) {
-    display: none;
-  }
-`;
-const StyledLeadGenSubscriptionBoxHeader = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  .leadgen-title {
-    margin-bottom: 0;
-    flex: 1;
-    min-width: 0;
-    color: ${theme.colors.gray900};
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 1.4;
-    letter-spacing: -0.8px;
-  }
-`;
-const StyledLeadGenSubscriptionBox = styled.div `
-  padding: 16px;
-  border: 1px solid ${theme.colors.neutral100};
-  border-radius: 12px;
-  margin-inline: auto;
-  .leadgen-form_inputs {
-    .leadgen-form_input {
-      width: 100%;
-    }
-  }
-
-  .leadgen-form_input {
-    .mantine-Input-wrapper {
-      max-height: 56px;
-    }
-  }
-
-  @media screen and (min-width: 768px) {
-    .leadgen-subscription_box_body {
-      display: flex;
-      > form {
-        flex: 1;
-        min-width: 0;
-
-        .leadgen-form_inputs {
-          .leadgen-form_input {
-            width: calc(50% - 4px);
-          }
-        }
-      }
-
-      .leadgen-btn {
-        margin-top: 0;
-        margin-left: 8px;
-        width: auto;
-        min-height: 56px;
-      }
-    }
-  }
-`;
-const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, siteId, siteDomain, forceCampaign, campaign_code, article_id, subscription_title: subscriptionTitleProps, }) => {
-    var _a, _b, _c;
-    const refContainer = useRef(null);
-    const validatingEmailRef = useRef(false);
-    const validatingPhoneRef = useRef(false);
-    const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
-    const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
-    const { submitBlock } = actionBlocks || {};
-    const [loading, setLoading] = useState(false);
-    const [showThankyou, setShowThankyou] = useState(false);
-    const formRef = useRef(null);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        campaignId: campaign_id,
-        campaign_subot_id,
-        validatingEmailRef,
-        validatingPhoneRef,
-        userInfo,
-    });
-    const subscription_title = useMemo(() => { var _a, _b; return subscriptionTitleProps || ((_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value); }, [subscriptionTitleProps, (_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value]);
-    const { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
-    const { apiUrl } = useMemo(() => {
-        let apiUrl = leadStore.apiLeadUrl;
-        if (apiUrl.includes('localhost')) {
-            apiUrl = 'https://dev.leadgen.hellobacsi.com/';
-        }
-        return {
-            apiUrl,
-        };
-    }, [siteDomain, siteId]);
-    const url = useMemo(() => location.href.toLowerCase() || '', []);
-    const article_title = useMemo(() => document.title || '', []);
-    const cookie_id = useMemo(() => getCookie('hhg-id') || null, []);
-    const ga_client_id = useMemo(() => getCookie('_ga') || null, []);
-    const leadgenImpression = useCallback(() => {
-        Service.campaignPostImpression({
-            url,
-            action: LEADGEN_ACTIONS.SCROLL,
-            code: campaign_code,
-            title_article: article_title,
-            cookie_id,
-            ga_client_id,
-            extra: { cookie_id, article_id, subscription_title },
-        });
-    }, [
-        article_id,
-        article_title,
-        cookie_id,
-        ga_client_id,
-        campaign_code,
-        subscription_title,
-    ]);
-    const intersectionObserverCallback = useCallback((entries) => {
-        entries.forEach((entry) => {
-            const { isIntersecting, target } = entry;
-            if (isIntersecting && target === refContainer.current) {
-                leadgenImpression();
-            }
-        });
-    }, [leadgenImpression]);
-    const IObserver = new IntersectionObserver(intersectionObserverCallback);
-    const middlewareOnSubmit = useCallback((value) => __awaiter(void 0, void 0, void 0, function* () {
-        const newValue = {
-            url,
-            article_title,
-            cookie_id,
-            ga_client_id,
-            article_id,
-            campaign_id,
-            campaign_code,
-            subscription_title: subscription_title,
-        };
-        listBlockAdded.forEach(({ data: { value: k } }) => {
-            newValue[k] = value[k];
-        });
-        setLoading(true);
-        try {
-            const { _data } = (yield Service.campaignPostLead({ data: newValue })) || {};
-            const { model } = _data;
-            if (model && model.id) {
-                setShowThankyou(true);
-            }
-        }
-        catch (error) {
-            console.log('** Error : ', error);
-        }
-        setLoading(false);
-    }), [
-        url,
-        article_id,
-        article_title,
-        cookie_id,
-        ga_client_id,
-        campaign_code,
-        subscription_title,
-        listBlockAdded,
-    ]);
-    useEffect(() => {
-        if (refContainer.current) {
-            IObserver.observe(refContainer.current);
-        }
-        return () => {
-            IObserver.disconnect();
-        };
-    }, [
-        url,
-        article_id,
-        article_title,
-        ga_client_id,
-        campaign_id,
-        campaign_code,
-        subscription_title,
-    ]);
-    return (React__default.createElement("div", { ref: refContainer },
-        React__default.createElement(StyledLeadGenSubscriptionBox, null,
-            showThankyou && (React__default.createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
-            !showThankyou && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(StyledLeadGenSubscriptionBoxHeader, null,
-                    !!image && (React__default.createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
-                        React__default.createElement("img", { src: image, alt: "" }))),
-                    React__default.createElement("p", { className: "leadgen-title" }, subscription_title)),
-                React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
-                    React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: validateObj, blocks: listBlockAdded, locale: locale, onFinish: middlewareOnSubmit }),
-                    React__default.createElement(Button$2, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value)))))));
-};
-const LeadGenSubscriptionBoxWithMemo = memo(LeadGenSubscriptionBoxWithoutMemo);
-
-const Container = () => {
-    const context = useContext(LeadGenSubscriptionBoxContext);
-    const { 
-    // apiUrl: apiUrlProps,
-    // apiSubotUrl,
-    campaign_code, article_id, subscription_title, locale, siteId, siteDomain, userInfo, forceCampaign, } = context;
-    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
-        return null;
-    }
-    return (React__default.createElement(LeadGenSubscriptionBoxWithMemo, { locale: locale, userInfo: userInfo, siteId: siteId, siteDomain: siteDomain, forceCampaign: forceCampaign, campaign_code: campaign_code, article_id: article_id, subscription_title: subscription_title }));
-};
-Container.displayName = 'LeadGenSubscriptionBox';
-const LeadGenSubscriptionBoxContainer = (props) => {
-    const { campaign_code } = props;
-    if (!campaign_code) {
-        return null;
-    }
-    return (React__default.createElement(LeadGenSubscriptionBoxProvider, Object.assign({}, props),
-        React__default.createElement(Container, null)));
-};
-const LeadGenSubscriptionBox = LeadGenSubscriptionBoxContainer;
-
-const useImageSize = (src) => {
-    const [width, setWidth] = useState(16);
-    const [height, setHeight] = useState(9);
-    const [loaded, setLoaded] = useState(false);
-    // load src image to get its width and height
-    useEffect(() => {
-        setLoaded(false);
-        if (src) {
-            const img = new Image();
-            img.addEventListener('load', () => {
-                setWidth(img.naturalWidth);
-                setHeight(img.naturalHeight);
-                setLoaded(true);
-            });
-            img.addEventListener('error', () => {
-                setWidth(16);
-                setHeight(9);
-                setLoaded(true);
-            });
-            img.src = src;
-        }
-        else {
-            setWidth(16);
-            setHeight(9);
-            setLoaded(true);
-        }
-    }, [src]);
-    return {
-        loaded,
-        width,
-        height,
-    };
-};
-
-const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.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" }))));
-
-// url: imageBlocks.imageMobile.data.url
-// newTab: imageBlocks.imageMobile.data.newtab
-// imageMobile: campaignShow.image
-// imageDestkop: campaignShow.image_desktop
-const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
-    if (!imageMobileLoaded || !imageDestkopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
-        React__default.createElement("div", { className: "le-center-tab-popup" },
-            React__default.createElement("div", { style: { position: 'relative' } },
-                React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    isVideo(imageMobile) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
-                        React__default.createElement("source", { src: imageMobile }))) : (React__default.createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        } })),
-                    isVideo(imageDestkop) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
-                        React__default.createElement("source", { src: imageDestkop }))) : (React__default.createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
-                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
-                        } }))),
-                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
+        React__default.createElement("div", { className: "le-center-tab-popup" },
+            React__default.createElement("div", { style: { position: 'relative' } },
+                React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    isVideo(imageMobile) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
+                        React__default.createElement("source", { src: imageMobile }))) : (React__default.createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } })),
+                    isVideo(imageDestkop) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
+                        React__default.createElement("source", { src: imageDestkop }))) : (React__default.createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
+                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
+                        } }))),
+                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
 };
 
 // title: titleText
@@ -2742,6 +1616,211 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
             React__default.createElement(Button$2, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
 };
 
+const libraries = ['places'];
+const GoogleLocationBlock = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __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, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, 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 = [], userInfo, }) => {
+    const { t } = useTranslations();
+    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const validateObj = useMemo(() => {
+        const InputBlocks = [
+            'TextBlock',
+            'NumberBlock',
+            'EmailBlock',
+            'PhoneBlock',
+            'DateBlock',
+            'CheckboxBlock',
+            'RadioBlock',
+            'DropdownBlock',
+            'PhoneOtpBlock',
+            'WhatsappOtpBlock',
+            'ZaloOtpBlock',
+            'LocationBlock',
+            'TncBlock',
+        ];
+        // ALL are required and can skip if not touched yet
+        const withSharedCheck = (name, cb, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        block) => {
+            return (value) => {
+                var _a;
+                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
+                if (!formRef.current.isTouched(name))
+                    return;
+                if ((typeof value === 'string' && value.replace(' ', '') === '') ||
+                    typeof value === 'undefined' ||
+                    value === '' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return isBLockRequired
+                        ? t('validator.required')
+                        : cb === null || cb === void 0 ? void 0 : cb(value);
+                }
+                return cb === null || cb === void 0 ? void 0 : cb(value);
+            };
+        };
+        return listBlockAdded
+            .filter((b) => InputBlocks.includes(b.name))
+            .reduce((r, b) => {
+            var _a;
+            const isRequired = (_a = b.data.required) !== null && _a !== void 0 ? _a : true;
+            if (b.name === 'NumberBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (value && isNaN(Number(value))) {
+                            return t('validator.number');
+                        }
+                    }, b) });
+            }
+            else if (b.name === 'EmailBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return t('validator.email');
+                        }
+                        if (!value)
+                            return;
+                        validatingEmailRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(b.data.value, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                email: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(b.data.value, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(b.data.value);
+                                }
+                                validatingEmailRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                validatingEmailRef.current = false;
+                            });
+                        }, 200);
+                    }, b) });
+            }
+            else if (b.name === 'PhoneBlock' ||
+                b.name === 'PhoneOtpBlock' ||
+                b.name === 'ZaloOtpBlock' ||
+                b.name === 'WhatsappOtpBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (value &&
+                            window.intlTelInputUtils &&
+                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
+                            return t('validator.phone');
+                        }
+                        if (!value)
+                            return;
+                        validatingPhoneRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(b.data.value, 'Validating...');
+                            if (b.data.singleSubmission) {
+                                checkUsedPhoneOnlyWithCache(campaignId, value)
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(b.data.value, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(b.data.value);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((err) => {
+                                    console.error(err);
+                                    formRef.current.setFieldError(b.data.value, err.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                            else {
+                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                    phone: value,
+                                })
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(b.data.value, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(b.data.value);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((e) => {
+                                    console.error(e);
+                                    formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                        }, 200);
+                    }, b) });
+            }
+            else if (b.name === 'DateBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (value && isNaN(Date.parse(value))) {
+                            return t('validator.date');
+                        }
+                    }, b) });
+            }
+            else if (b.name === 'TncBlock') {
+                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
+                        if (isRequired && !value) {
+                            return t('validator.required');
+                        }
+                    }, b) });
+            }
+            else {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, undefined, b) });
+            }
+        }, {});
+    }, [listBlockAdded.map((b) => b.name).join(',')]);
+    const form = useLeadForm({
+        validateInputOnChange: true,
+        clearInputErrorOnChange: true,
+        validate: validateObj,
+        initialValues,
+    });
+    const formRef = useRef(form);
+    formRef.current = form;
+    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 `
@@ -3060,13 +2139,11 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
+            $focusEl.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'start',
+            });
         }
     }, [shrink]);
     useEffect(() => {
@@ -3200,6 +2277,17 @@ const StyledFormContainer = styled.div `
     flex-direction: column;
   }
 
+  .leadgen-form_inner {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+
+    &:has(.leadgen-header) {
+      display: block;
+    }
+  }
+
   .leadgen-form_body {
     flex: 1;
     min-height: 0;
@@ -3239,16 +2327,22 @@ const StyledFormContainer = styled.div `
  *
  */
 const FormContainer = (_a) => {
-    var { title, titleAlign, description, descriptionAlign, className, style, children, footer } = _a, restProps = __rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "footer"]);
+    var { title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = __rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
+    const HeaderContent = (React__default.createElement("div", { className: "leadgen-form_header" },
+        React__default.createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
+        !!description && (React__default.createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } }))));
     if (!title && !description) {
         return null;
     }
     return (React__default.createElement(StyledFormContainer, Object.assign({ className: clsx(className, 'leadgen-form_container'), style: style }, restProps),
         React__default.createElement("div", { className: "leadgen-form_wrapper" },
-            React__default.createElement("div", { className: "leadgen-form_header" },
-                React__default.createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
-                React__default.createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } })),
-            React__default.createElement("div", { className: "leadgen-form_body" }, children),
+            !!header && (React__default.createElement("div", { className: "leadgen-form_scrollable" },
+                header,
+                HeaderContent,
+                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
+            !header && (React__default.createElement(React__default.Fragment, null,
+                HeaderContent,
+                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
             React__default.createElement("div", { className: "leadgen-form_footer" }, footer))));
 };
 
@@ -3450,8 +2544,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const isDrawer = isLightBoxB && isMobile;
     const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
     const hasForm = isLightBoxA
-        ? listBlockAdded.some((item) => LEADGEN_BLOCK_INPUT.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+        ? listBlockAdded.some((item) => LEADGEN_BLOCK_IN_FORM.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
         : true;
+    const headerInsideFormContainer = isSlider || isLightBoxA || isFullscreen;
     const showHeader = !!imageMobile || !!imageDesktop;
     const onlyHeader = !title && !description;
     const showButtonClose = !isInline;
@@ -3575,7 +2670,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
     const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
         React__default.createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
-            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
                 React__default.createElement("div", { className: "leadgen-form_inner" },
                     React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
     const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
@@ -3586,7 +2681,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const PopupContent = (React__default.createElement("div", { className: clsx('leadgen-content', {
             'leadgen-content_small': limitFieldsLightBoxB,
         }) },
-        PopupHeader,
+        !headerInsideFormContainer && PopupHeader,
         !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
             PopupThankYou,
             !showThankyou && (React__default.createElement(React__default.Fragment, null,
@@ -4493,4 +3588,4 @@ LeadGen.Thankyou = Thankyou;
 LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close;
 
-export { LeadGen, LeadGenSubscriptionBox };
+export { LeadGen };