@hhgtech/hhg-components 1.29.347-beta-3 → 1.29.348

package/build/lead.js

@@ -2,47 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-9e5b6c7d.js');
+var tslib_es6 = require('./tslib.es6-ff4775bc.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
-var index = require('./index-5a2c171c.js');
-var translationsContext = require('./translationsContext-48aa1fe2.js');
+var index = require('./index-084b73b9.js');
+var translationsContext = require('./translationsContext-af1c0e22.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var utils$1 = require('./utils-44c0d68f.js');
-var index$1 = require('./index-a6c4e19e.js');
-var index$2 = require('./index-2f08cddf.js');
-var index$4 = require('./index-6bb1ae50.js');
-var utils = require('./utils-5cf1d7b9.js');
+var utils$1 = require('./utils-8c00aefe.js');
+var index$1 = require('./index-6d2178e7.js');
+var index$2 = require('./index-195232a1.js');
+var index$4 = require('./index-296c97f8.js');
+var utils = require('./utils-9aa0f56a.js');
 require('@mantine/dates');
-var index$9 = require('./index-f6ecad9b.js');
-require('./index-71b1b3e8.js');
-require('./index-9c31eefa.js');
-require('./useMantineLocale-53190aad.js');
-var index$5 = require('./index-c4bc8f23.js');
-require('./index.styles-94435fe5.js');
+var index$a = require('./index-a56ce53b.js');
+require('./index-9fc55b21.js');
+var index$8 = require('./index-6b1e18bf.js');
+require('./useMantineLocale-6e69b7e2.js');
+var index$5 = require('./index-986a1544.js');
+require('./index.styles-e1d19c33.js');
 var hooks = require('@mantine/hooks');
-require('./other-466f4bb7.js');
-require('./index-45cd5376.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-74eafeae.js');
-var index$3 = require('./index-ec2f5b77.js');
-var index$6 = require('./index-9b80dd34.js');
+require('./other-9d04f488.js');
+require('./index-2866fda3.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-3f5b85bd.js');
+var index$3 = require('./index-f34c451c.js');
+var index$6 = require('./index-9981b48b.js');
 var uuid = require('uuid');
-var index$7 = require('./index-30222441.js');
-var index$8 = require('./index-8baba9b4.js');
-var useScreenSize = require('./useScreenSize-55de2b02.js');
+var index$7 = require('./index-66861be0.js');
+var index$9 = require('./index-cda6cd91.js');
+var useScreenSize = require('./useScreenSize-1044994e.js');
 var ReactDOM = require('react-dom');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var Close = require('./Close-9b33c5d3.js');
+var Close = require('./Close-55bbde0f.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
-require('./Locale-cfa3a38e.js');
+require('./Locale-a2429f0e.js');
 require('classnames');
-require('./useUniqueId-27539196.js');
+require('./useUniqueId-46163838.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('date-fns/locale');
@@ -164,51 +164,6 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
-const LEADGEN_LAYOUT = {
-    LightBoxA: 'LightBoxA',
-    LightBoxB: 'LightBoxB',
-    SkinA: 'SkinA',
-    SkinB: 'SkinB',
-    Floating: 'Floating',
-    Tab: 'Tab',
-    InlineA: 'InlineA',
-    InlineB: 'InlineB',
-    CenterTab: 'CenterTab',
-    Sidebar: 'Sidebar',
-    Fullscreen: 'Fullscreen',
-    Slider: 'Slider',
-};
-const LEADGEN_BLOCK = {
-    TextBlock: 'TextBlock',
-    NumberBlock: 'NumberBlock',
-    DateBlock: 'DateBlock',
-    EmailBlock: 'EmailBlock',
-    PhoneBlock: 'PhoneBlock',
-    PhoneOtpBlock: 'PhoneOtpBlock',
-    WhatsappOtpBlock: 'WhatsappOtpBlock',
-    ZaloOtpBlock: 'ZaloOtpBlock',
-    LocationBlock: 'LocationBlock',
-    LinkButtonBlock: 'LinkButtonBlock',
-    RadioBlock: 'RadioBlock',
-    DropdownBlock: 'DropdownBlock',
-    CheckboxBlock: 'CheckboxBlock',
-    TncBlock: 'TncBlock',
-};
-const LEADGEN_BLOCK_IN_FORM = [
-    LEADGEN_BLOCK.TextBlock,
-    LEADGEN_BLOCK.NumberBlock,
-    LEADGEN_BLOCK.DateBlock,
-    LEADGEN_BLOCK.EmailBlock,
-    LEADGEN_BLOCK.PhoneBlock,
-    LEADGEN_BLOCK.PhoneOtpBlock,
-    LEADGEN_BLOCK.WhatsappOtpBlock,
-    LEADGEN_BLOCK.ZaloOtpBlock,
-    LEADGEN_BLOCK.LocationBlock,
-    LEADGEN_BLOCK.RadioBlock,
-    LEADGEN_BLOCK.DropdownBlock,
-    LEADGEN_BLOCK.CheckboxBlock,
-    LEADGEN_BLOCK.TncBlock,
-];
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
 const mappingSSOToLead = (userInfoProps) => {
     try {
@@ -1620,26 +1575,6 @@ const SideBarLayout = ({ content }) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null, targets.map((target) => ReactDOM.createPortal(content, utils$1.getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
 };
 
-const EmptyIcon = (props) => {
-    const { className, style } = props;
-    return (React__default["default"].createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default["default"].createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
-        React__default["default"].createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
-        React__default["default"].createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
-};
-
-const EmptyComponent = ({ onClose, onContinue, }) => {
-    const { t } = index.useTranslations();
-    return (React__default["default"].createElement("div", { className: "leadgen-empty" },
-        React__default["default"].createElement("div", { className: "leadgen-empty_body" },
-            React__default["default"].createElement("div", { className: "leadgen-empty_wrapper" },
-                React__default["default"].createElement(EmptyIcon, { className: "leadgen-empty_image" }),
-                React__default["default"].createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
-        React__default["default"].createElement("div", { className: "leadgen-empty_footer" },
-            React__default["default"].createElement(core.Button, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
-            React__default["default"].createElement(core.Button, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
-};
-
 const libraries = ['places'];
 const GoogleLocation = (props) => {
     var _a;
@@ -2293,90 +2228,6 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     })));
 };
 
-const StyledFormContainer = styled__default["default"].div `
-  height: 100%;
-  .leadgen-form_wrapper {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .leadgen-form_body {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba(0, 0, 0, 0.4);
-      border-radius: 6px;
-    }
-  }
-
-  &[data-hidden-form='true'] {
-    .leadgen-form_body {
-      display: none;
-    }
-  }
-
-  [data-align='right'] {
-    text-align: right;
-  }
-
-  [data-align='center'] {
-    text-align: center;
-  }
-`;
-/**
- *
- *  Use this component inside <form></form> tag
- *
- */
-const FormContainer = (_a) => {
-    var { title, titleAlign, description, descriptionAlign, className, style, children, footer } = _a, restProps = tslib_es6.__rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "footer"]);
-    if (!title && !description) {
-        return null;
-    }
-    return (React__default["default"].createElement(StyledFormContainer, Object.assign({ className: core.clsx(className, 'leadgen-form_container'), style: style }, restProps),
-        React__default["default"].createElement("div", { className: "leadgen-form_wrapper" },
-            React__default["default"].createElement("div", { className: "leadgen-form_header" },
-                React__default["default"].createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
-                React__default["default"].createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } })),
-            React__default["default"].createElement("div", { className: "leadgen-form_body" }, children),
-            React__default["default"].createElement("div", { className: "leadgen-form_footer" }, footer))));
-};
-
-const StyleHeaderImage = styled__default["default"].div `
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  padding-top: ${({ paddingTop }) => paddingTop}%;
-  .leadgen-header_image_feature {
-    position: absolute;
-    inset: 0;
-    min-width: 100%;
-    min-height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    object-position: center;
-  }
-`;
-const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
-    if (!src) {
-        return null;
-    }
-    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$7.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
-};
-
 const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
     const { t } = index.useTranslations();
     const phone = otpData.phone;
@@ -2477,48 +2328,47 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
             sendOtp();
         }
     }, []);
-    return (React__default["default"].createElement("form", { onSubmit: (e) => {
-            e.preventDefault();
-            submitOtp();
-        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
-        React__default["default"].createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
-                phone: `<strong>${displayPhone}</strong>`,
-            }), footer: React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(core.Button, { type: "submit", size: "lg", variant: "filled", className: `lead-modal__btn leadgen-btn_action ${LEAD_CLASS}`, disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
-                React__default["default"].createElement(core.Button, { type: "button", size: "lg", variant: "light", className: `lead-modal__btn lead-phone-otp-button leadgen-btn_action ${LEAD_CLASS}`, onClick: () => {
-                        sendOtp();
-                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
-                    timer: resendTimer ? ` (${resendTimer}s)` : '',
-                }))) },
-            React__default["default"].createElement("div", { className: "leadgen-form_inner" },
-                React__default["default"].createElement(index$2.Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
-                    React__default["default"].createElement(index$2.OTP, { ref: inputRef, name: '_' + name + '-otp', value: otp, onChange: (v) => {
-                            setIsDirty(true);
-                            setOtp(v.toString());
-                            if (isDirty && !v)
-                                setErrorMsg('OTP is required');
-                            else
-                                setErrorMsg(undefined);
-                        } }))))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("form", { onSubmit: (e) => {
+                e.preventDefault();
+                submitOtp();
+            }, className: "lead-phone-otp-form" },
+            React__default["default"].createElement(index$6.Heading, { tag: "h3", fontWeight: "bold", style: { marginBottom: 4 } }, t('lead.otp.title')),
+            React__default["default"].createElement(index$1.Text, { size: "p1", color: miscTheme.theme.colors.gray600 }, t('lead.otp.desc', { phone: displayPhone })),
+            React__default["default"].createElement(index$2.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: t('lead.otp.phonePlaceholder'), className: "lead-modal__form-control", label: t('lead.otp.phoneLabel'), "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
+                    setIsDirty(true);
+                    setOtp(v);
+                    if (isDirty && !v)
+                        setErrorMsg('OTP is required');
+                    else
+                        setErrorMsg(undefined);
+                }, error: isDirty ? errorMsg : undefined }),
+            React__default["default"].createElement(index$3.Button, { size: "md", color: "primary", className: `lead-modal__btn ${LEAD_CLASS}`, 
+                // onClick={() => submitOtp()}
+                disabled: !otp, isLoading: isSubmitLoading }, t('lead.otp.verify')),
+            React__default["default"].createElement(index$3.Button, { type: "button", size: "md", color: "transparent", className: `lead-modal__btn lead-phone-otp-button ${LEAD_CLASS}`, onClick: () => {
+                    sendOtp();
+                }, disabled: !!resendTimer }, t('lead.otp.resend', {
+                timer: resendTimer ? ` (${resendTimer}s)` : '',
+            })))));
+};
+
+const EmptyIcon = (props) => {
+    const { className, style } = props;
+    return (React__default["default"].createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
+        React__default["default"].createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
+        React__default["default"].createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
+        React__default["default"].createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
 };
 
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
 // image: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
-const LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE = [
-    LEADGEN_LAYOUT.Fullscreen,
-    LEADGEN_LAYOUT.Slider,
-];
 const LEADGEN_LIMIT_LIGHTBOXB = 6;
-const LEADGEN_SHOW_HEADER = [
-    'LightBoxA',
-    'InlineA',
-    LEADGEN_LAYOUT.Sidebar,
-    LEADGEN_LAYOUT.Slider,
-];
 const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
-    var _a;
+    var _a, _b, _c;
+    const { t } = index.useTranslations();
     const { isMobile } = useScreenSize.useScreenSize();
     const [open, setOpen] = React.useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = React.useState(null);
@@ -2533,36 +2383,42 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
         }
     };
-    const textBlocks = JSON.parse(extraFields.textBlocks);
     const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
     const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const textBlocks = JSON.parse(extraFields.textBlocks);
     const popUpSubmitText = actionBlocks.submitBlock.data.value;
     const currentPath = location.pathname;
-    const { align: descriptionAlign, value: description } = textBlocks.subtitleBlock.data || {};
-    const { align: titleAlign } = textBlocks.titleBlock.data || {};
-    const isSlider = currentLayout === LEADGEN_LAYOUT.Slider;
-    const isSidebar = currentLayout === LEADGEN_LAYOUT.Sidebar;
+    const isInPage = currentLayout.includes('Inline') || currentLayout === 'Sidebar';
+    const isSlider = currentLayout === 'Slider';
+    const isDrawer = currentLayout.includes('LightBoxB') && isMobile;
     const isLightBox = currentLayout.includes('LightBox');
-    const isLightBoxA = currentLayout === LEADGEN_LAYOUT.LightBoxA;
-    const isLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB;
-    const isInline = currentLayout.includes('Inline');
-    const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
-    const isInPage = isInline || isSidebar;
-    const isDrawer = isLightBoxB && isMobile;
-    const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
-    const hasForm = isLightBoxA
-        ? listBlockAdded.some((item) => LEADGEN_BLOCK_IN_FORM.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+    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;
-    const showHeader = !!imageMobile || !!imageDesktop;
-    const onlyHeader = !title && !description;
-    const showButtonClose = !isInline;
     if (window.innerWidth < 769 &&
-        LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
+        ['Fullscreen', 'Slider'].includes(currentLayout)) {
         console.log('😎 Not show fullscreen, slider on mobile ');
         return null;
     }
     React.useEffect(() => {
-        if (isLightBox || isFullscreen) {
+        if (currentLayout.includes('LightBox') || currentLayout == 'Fullscreen') {
             document.body.classList.add('noscroll');
         }
         if (!window.intlTelInputUtils) {
@@ -2596,9 +2452,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                 if (Object.keys(form.errors).length)
                     return;
                 let newShowOtpPhone = null;
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
+                if (listBlockAdded.findIndex((x) => x.name === 'PhoneOtpBlock') > -1) {
                     // not submit yet, open otp
-                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === 'PhoneOtpBlock')) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
                     if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
                         newShowOtpPhone = {
                             phone: v[fieldName],
@@ -2606,9 +2462,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                         };
                     }
                 }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
+                if (listBlockAdded.findIndex((x) => x.name === 'WhatsappOtpBlock') > -1) {
                     // not submit yet, open otp
-                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock)) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === 'WhatsappOtpBlock')) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
                     if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
                         newShowOtpPhone = {
                             phone: v[fieldName],
@@ -2616,9 +2472,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                         };
                     }
                 }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
+                if (listBlockAdded.findIndex((x) => x.name === 'ZaloOtpBlock') > -1) {
                     // not submit yet, open otp
-                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
+                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === 'ZaloOtpBlock')) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
                     if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
                         newShowOtpPhone = {
                             phone: v[fieldName],
@@ -2656,82 +2512,124 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
     };
     const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
-    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
-    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
     const renderAfterImageSizes = imageMobileLoaded &&
         imageDesktopLoaded &&
-        (isFullscreen ? imageBackgroundLoaded : true);
-    const ButtonSubmit = !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default["default"].createElement(core.Button, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
-    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
+        (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["default"].createElement(core.Button, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: core.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["default"].createElement(React__default["default"].Fragment, null, LinkButtonBlock.map((item, index) => {
         var _a, _b, _c;
-        return (React__default["default"].createElement(core.Button, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", onClick: () => {
+        return (React__default["default"].createElement(core.Button, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: core.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 = showHeader && (React__default["default"].createElement("header", { className: core.clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
-        React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
-    const PopupEmpty = showEmpty && (React__default["default"].createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
+    const PopupHeader = (React__default["default"].createElement("header", { className: core.clsx('lead-modal__header', {
+            'leadgen-header': isLightBox,
+            'leadgen-header_hidden': !isShowHeader,
+        }) }, showOtpPhone ? (React__default["default"].createElement("img", { src: index$8.CommonGAssets.getAssetPath('lead-otp-thumb.png'), draggable: "false", alt: "", style: {
+            width: '100%',
+            minHeight: '150px',
+            backgroundColor: '#f2f2f2',
+        }, loading: "lazy" })) : (React__default["default"].createElement(React__default["default"].Fragment, null, ['LightBoxA', 'InlineA', 'Sidebar', 'Slider'].includes(currentLayout) ? (imageMobile ? (index$7.isVideo(imageMobile) ? (React__default["default"].createElement("video", { className: "lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
+        React__default["default"].createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default["default"].createElement("img", { draggable: "false", className: "lead-modal__image lead-modal-image-cover", src: imageMobile, style: {
+            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+        }, alt: "" }))) : null) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        imageDesktop ? (index$7.isVideo(imageDesktop) ? (React__default["default"].createElement("video", { className: "le-only-desktop lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
+            React__default["default"].createElement("source", { src: imageDesktop, type: "video/mp4" }))) : (React__default["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 ? (index$7.isVideo(imageMobile) ? (React__default["default"].createElement("video", { className: "le-only-mobile lead-modal__image lead-modal-image-cover", muted: true, autoPlay: true, loop: true },
+            React__default["default"].createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default["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["default"].createElement("div", { className: "leadgen-empty" },
+        React__default["default"].createElement("div", { className: "leadgen-empty_body" },
+            React__default["default"].createElement("div", { className: "leadgen-empty_wrapper" },
+                React__default["default"].createElement(EmptyIcon, { className: "leadgen-empty_image" }),
+                React__default["default"].createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
+        React__default["default"].createElement("div", { className: "leadgen-empty_footer" },
+            React__default["default"].createElement(core.Button, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
+            React__default["default"].createElement(core.Button, { onClick: () => setShowEmpty(false), size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
+    const PopupFormTitle = (React__default["default"].createElement("h2", { title: title, className: core.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["default"].createElement("p", { title: textBlocks.subtitleBlock.data.value, className: core.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["default"].createElement(LeadFormProvider, { form: form },
-        React__default["default"].createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
-            React__default["default"].createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+        React__default["default"].createElement("form", { ref: formRef, className: core.clsx(`lead-modal__form ${popupId}`, {
+                'leadgen-form': isLightBox,
+            }), onSubmit: middlewareOnSubmit },
+            React__default["default"].createElement("div", { className: core.clsx('lead-modal__form-header', {
+                    'leadgen-form_header': isLightBox,
+                }) },
+                PopupFormTitle,
+                PopupFormDescription),
+            React__default["default"].createElement("div", { className: core.clsx('lead-modal__form-control-wrapper', {
+                    'leadgen-form_body': isLightBox,
+                }), "data-hidden": !isFormSubmit },
                 React__default["default"].createElement("div", { className: "leadgen-form_inner" },
-                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
-    const PopupOtp = showOtpPhone && (React__default["default"].createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
-            setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
-        } }));
+                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))),
+            React__default["default"].createElement("div", { className: "leadgen-form_footer" }, isFormSubmit ? ButtonSubmit : ButtonLink))));
     const PopupThankYou = showThankyou && (React__default["default"].createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
-    const PopupContent = (React__default["default"].createElement("div", { className: core.clsx('leadgen-content', {
-            'leadgen-content_small': limitFieldsLightBoxB,
-        }) },
+    const popupContentClassName = core.clsx('lead-modal__content', `le-newbuilder-${currentLayout}`, 'leadPopupContent', { 'leadgen-content': isLightBox });
+    const PopupContent = (React__default["default"].createElement("div", { className: popupContentClassName },
         PopupHeader,
-        !onlyHeader && (React__default["default"].createElement("div", { className: "leadgen-inner" },
+        React__default["default"].createElement("div", { className: "leadgen-inner" },
             PopupThankYou,
             !showThankyou && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                PopupOtp,
-                PopupEmpty,
-                !(showOtpPhone || showEmpty) && PopupForm))))));
+                showOtpPhone && (React__default["default"].createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+                        setShowOtpPhone(null);
+                        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+                    } })),
+                showEmpty && PopupEmpty,
+                React__default["default"].createElement("div", { "data-hidden": !!showOtpPhone || !!showEmpty, className: core.clsx('lead-modal__body le-newbuilder-overlay', {
+                        'leadgen-body': isLightBox,
+                    }) }, PopupForm))))));
+    const PopupWrapper = (React__default["default"].createElement("div", { className: core.clsx(`lead-modal__wrapper le-newbuilder-wrap-${currentLayout}`, {
+            'leadgen-wrapper': isLightBox,
+            'leadgen-wrapper_small': isSmallLightBoxB,
+        }) },
+        !currentLayout.includes('Inline') && (React__default["default"].createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: core.clsx('close-button-top-right', {
+                'leadgen-close_btn': isLightBox,
+            }) })),
+        PopupContent));
     const styleOverlay = React.useMemo(() => {
-        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
+        let styleContent = `.le-newbuilder-overlay {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
         if (isMobile && imageOverlayMobile) {
-            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
+            styleContent += `.le-newbuilder-overlay {background-image: url(${imageOverlayMobile});}`;
         }
         if (!isMobile && imageOverlayDesktop) {
-            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
+            styleContent += `@media screen and (min-width:768px) {.le-newbuilder-overlay {background-image: url(${imageOverlayDesktop});}}`;
         }
         return styleContent;
     }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
-    const PopupWrapper = (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
-        React__default["default"].createElement("div", { className: core.clsx('leadgen-wrapper', {
-                'leadgen-wrapper_small': limitFieldsLightBoxB,
-            }) },
-            showButtonClose && (React__default["default"].createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
-            PopupContent)));
-    const popupContainerClassName = core.clsx('leadgen', `leadgen-${currentLayout}`, {
-        'leadgen-lightbox': isLightBox,
-        'leadgen-inline': isInPage,
-        'leadgen-slider': isSlider,
+    const popupContainerClassName = core.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["default"].createElement(index$8.DrawerComponent, { open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$9.DrawerComponent, { open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+        React__default["default"].createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
         PopupWrapper,
-        React__default["default"].createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
-        isFullscreen ? (React__default["default"].createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
-                aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
-            } })) : null,
-        PopupWrapper));
+        React__default["default"].createElement("div", { className: "", style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+            currentLayout == 'Fullscreen' ? (React__default["default"].createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
+                    aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
+                } })) : null,
+            PopupWrapper)));
     if (!renderAfterImageSizes)
         return null;
-    if (isLightBox || isFullscreen || isSlider) {
+    if (currentLayout.includes('LightBox') ||
+        currentLayout == 'Fullscreen' ||
+        currentLayout == 'Slider') {
         return PopupContainer;
     }
-    else if (isSidebar) {
+    else if (currentLayout == 'Sidebar') {
         return React__default["default"].createElement(SideBarLayout, { content: PopupContainer });
     }
-    else if (isInline) {
+    else if (currentLayout.includes('Inline')) {
         return (React__default["default"].createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
     }
     return null;
@@ -3576,7 +3474,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
     }, [showCampaign]);
     return (React__default["default"].createElement(LeadGenContext.Provider, { value: { apiUrl, siteDomain, siteId, locale } },
         React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
-            React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$9.ZINDEX_SSO - 9e6 } },
+            React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$a.ZINDEX_SSO - 9e6 } },
                 React__default["default"].createElement(core.Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease" }, (styles) => {
                     var _a;
                     return (React__default["default"].createElement(core.Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default["default"].createElement(React__default["default"].Fragment, null,