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

package/build/esm/lead.js

@@ -1,44 +1,44 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-80566a58.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-d7ddaae6.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback } from 'react';
-import { createStyles, Box, Autocomplete, clsx, Input as Input$1, TextInput, NumberInput as NumberInput$1, Button as Button$2, Portal, Transition, Overlay } from '@mantine/core';
+import { 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 } from '@mantine/form';
-import { u as useTranslations } from './index-70112e6a.js';
-import { T as TranslationsContext } from './translationsContext-688cebc1.js';
+import { u as useTranslations } from './index-170fc055.js';
+import { T as TranslationsContext } from './translationsContext-935efc32.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-4b0d3309.js';
-import { T as Text } from './index-0d846d6d.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-39fb2e6e.js';
-import { D as DatePicker } from './index-02f17efb.js';
-import { M as MAPPED_LOCALE } from './utils-a193e058.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-9ce94c8f.js';
+import { T as Text } from './index-0c762c28.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-ba416c4d.js';
+import { D as DatePicker } from './index-749b82c0.js';
+import { M as MAPPED_LOCALE } from './utils-65d0a8bc.js';
 import '@mantine/dates';
-import { Z as ZINDEX_SSO } from './index-8b37b0aa.js';
-import './index-86459e18.js';
-import { C as CommonGAssets } from './index-c142944e.js';
-import './useMantineLocale-6bc0d375.js';
-import { B as Button$1 } from './index-e7be37a8.js';
-import './index.styles-5cd41ce1.js';
+import { Z as ZINDEX_SSO } from './index-bfffbe28.js';
+import './index-29f67057.js';
+import './index-ac395e87.js';
+import './useMantineLocale-5b017463.js';
+import { B as Button$1 } from './index-3ba65bfa.js';
+import './index.styles-00123847.js';
 import { useClickOutside } from '@mantine/hooks';
-import './other-80f26543.js';
-import './index-087094d5.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-d2b9e6ef.js';
-import { B as Button } from './index-213948c6.js';
-import { H as Heading$1 } from './index-7c15738d.js';
+import './other-9cc887b0.js';
+import './index-e5fc397f.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-c478b79c.js';
+import { B as Button } from './index-6e415158.js';
+import { H as Heading$1 } from './index-cb872c96.js';
 import { v1 } from 'uuid';
-import { i as isVideo } from './index-9c8e7347.js';
-import { D as DrawerComponent } from './index-5673aad9.js';
-import { u as useScreenSize } from './useScreenSize-957a193d.js';
+import { i as isVideo } from './index-1e103e76.js';
+import { D as DrawerComponent } from './index-8a468ad4.js';
+import { u as useScreenSize } from './useScreenSize-3cfcf964.js';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Close } from './Close-1124df47.js';
+import { C as Close } from './Close-07a0fa59.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-9c329d60.js';
+import './Locale-71ac6373.js';
 import 'classnames';
-import './useUniqueId-fde4b561.js';
+import './useUniqueId-089ab4e8.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -165,20 +165,20 @@ const LEADGEN_BLOCK = {
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
 };
-const LEADGEN_IS_FORM = [
-    'TextBlock',
-    'NumberBlock',
-    'DateBlock',
-    'EmailBlock',
-    'PhoneBlock',
-    'PhoneOtpBlock',
-    'WhatsappOtpBlock',
-    'ZaloOtpBlock',
-    'LocationBlock',
-    'RadioBlock',
-    'DropdownBlock',
-    'CheckboxBlock',
-    '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) => {
@@ -1443,14 +1443,6 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
-const EmptyIcon = (props) => {
-    const { className, style } = props;
-    return (React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
-        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
-        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
-};
-
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
     if (!imageLoaded)
@@ -1599,6 +1591,26 @@ const SideBarLayout = ({ content }) => {
     return (React__default.createElement(React__default.Fragment, null, targets.map((target) => createPortal(content, getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
 };
 
+const EmptyIcon = (props) => {
+    const { className, style } = props;
+    return (React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
+        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
+        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
+        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
+};
+
+const EmptyComponent = ({ onClose, onContinue, }) => {
+    const { t } = useTranslations();
+    return (React__default.createElement("div", { className: "leadgen-empty" },
+        React__default.createElement("div", { className: "leadgen-empty_body" },
+            React__default.createElement("div", { className: "leadgen-empty_wrapper" },
+                React__default.createElement(EmptyIcon, { className: "leadgen-empty_image" }),
+                React__default.createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
+        React__default.createElement("div", { className: "leadgen-empty_footer" },
+            React__default.createElement(Button$2, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
+            React__default.createElement(Button$2, { onClick: 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;
@@ -2252,15 +2264,88 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     })));
 };
 
-const HeaderImage = ({ src, className, style }) => {
-    if (!src) {
+const StyledFormContainer = styled.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 = __rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "footer"]);
+    if (!title && !description) {
         return null;
     }
-    if (isVideo(src)) {
-        return (React__default.createElement("video", { className: className, muted: true, autoPlay: true, loop: true, style: style },
-            React__default.createElement("source", { src: src, type: "video/mp4" })));
+    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),
+            React__default.createElement("div", { className: "leadgen-form_footer" }, footer))));
+};
+
+const StyleHeaderImage = styled.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.createElement("img", { src: src, draggable: "false", alt: "", className: className, style: style }));
+    return (React__default.createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: clsx(className, 'leadgen-header_image'), style: style }, isVideo(src) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default.createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
 };
 
 const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
@@ -2363,35 +2448,39 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
             sendOtp();
         }
     }, []);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("form", { onSubmit: (e) => {
-                e.preventDefault();
-                submitOtp();
-            }, className: "lead-phone-otp-form" },
-            React__default.createElement(Heading$1, { tag: "h3", fontWeight: "bold", style: { marginBottom: 4 } }, t('lead.otp.title')),
-            React__default.createElement(Text, { size: "p1", color: theme.colors.gray600 }, t('lead.otp.desc', { phone: displayPhone })),
-            React__default.createElement(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.createElement(Button, { size: "md", color: "primary", className: `lead-modal__btn ${LEAD_CLASS}`, 
-                // onClick={() => submitOtp()}
-                disabled: !otp, isLoading: isSubmitLoading }, t('lead.otp.verify')),
-            React__default.createElement(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)` : '',
-            })))));
+    return (React__default.createElement("form", { onSubmit: (e) => {
+            e.preventDefault();
+            submitOtp();
+        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
+        React__default.createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
+                phone: `<strong>${displayPhone}</strong>`,
+            }), footer: React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Button$2, { 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.createElement(Button$2, { 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.createElement("div", { className: "leadgen-form_inner" },
+                React__default.createElement(Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
+                    React__default.createElement(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);
+                        } }))))));
 };
 
 // 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',
@@ -2400,8 +2489,7 @@ const LEADGEN_SHOW_HEADER = [
     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, _b, _c;
-    const { t } = useTranslations();
+    var _a;
     const { isMobile } = useScreenSize();
     const [open, setOpen] = useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = useState(null);
@@ -2416,29 +2504,36 @@ 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 isInPage = currentLayout.includes('Inline') || currentLayout === LEADGEN_LAYOUT.Sidebar;
+    const { align: descriptionAlign, value: description } = textBlocks.subtitleBlock.data || {};
+    const { align: titleAlign } = textBlocks.titleBlock.data || {};
     const isSlider = currentLayout === LEADGEN_LAYOUT.Slider;
-    const isDrawer = currentLayout.includes(LEADGEN_LAYOUT.LightBoxB) && isMobile;
+    const isSidebar = currentLayout === LEADGEN_LAYOUT.Sidebar;
     const isLightBox = currentLayout.includes('LightBox');
-    const isSmallLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB &&
-        listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
-    const isShowHeader = showOtpPhone || !!imageMobile || !!imageDesktop;
-    const isFormSubmit = currentLayout === LEADGEN_LAYOUT.LightBoxA
-        ? listBlockAdded.some((item) => LEADGEN_IS_FORM.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+    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)))
         : true;
+    const showHeader = !!imageMobile || !!imageDesktop;
+    const onlyHeader = !title && !description;
+    const showButtonClose = !isInline;
     if (window.innerWidth < 769 &&
-        [LEADGEN_LAYOUT.Fullscreen, LEADGEN_LAYOUT.Slider].includes(currentLayout)) {
+        LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
         console.log('😎 Not show fullscreen, slider on mobile ');
         return null;
     }
     useEffect(() => {
-        if (currentLayout.includes('LightBox') ||
-            currentLayout == LEADGEN_LAYOUT.Fullscreen) {
+        if (isLightBox || isFullscreen) {
             document.body.classList.add('noscroll');
         }
         if (!window.intlTelInputUtils) {
@@ -2536,110 +2631,78 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
     const renderAfterImageSizes = imageMobileLoaded &&
         imageDesktopLoaded &&
-        (currentLayout == LEADGEN_LAYOUT.Fullscreen ? imageBackgroundLoaded : true);
-    const ButtonSubmit = !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$2, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: clsx(`lead-modal__btn ${LEAD_CLASS}`, 'leadgen-btn leadgen-btn_action'), loading: isSubmitLoading }, popUpSubmitText));
-    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == 'LinkButtonBlock');
+        (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.createElement(Button$2, { 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);
     const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
         var _a, _b, _c;
-        return (React__default.createElement(Button$2, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: clsx(`lead-modal__btn ${LEAD_CLASS}`, 'leadgen-btn leadgen-btn_action'), onClick: () => {
+        return (React__default.createElement(Button$2, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", onClick: () => {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
             } }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
     })));
-    const PopupHeader = (React__default.createElement("header", { className: clsx('lead-modal__header', {
-            'leadgen-header': isLightBox,
-            'leadgen-header_hidden': !isShowHeader,
-        }) }, showOtpPhone ? (React__default.createElement("img", { src: CommonGAssets.getAssetPath('lead-otp-thumb.png'), draggable: "false", alt: "", className: clsx('lead-modal__image lead-modal-image-cover', {
-            'le-only-desktop': !isMobile,
-            'le-only-mobile': isMobile,
-        }), loading: "lazy" })) : (React__default.createElement(React__default.Fragment, null, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image lead-modal-image-cover" })) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image lead-modal-image-cover" }),
-        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image lead-modal-image-cover" })))))));
-    const PopupEmpty = showEmpty && (React__default.createElement("div", { className: "leadgen-empty" },
-        React__default.createElement("div", { className: "leadgen-empty_body" },
-            React__default.createElement("div", { className: "leadgen-empty_wrapper" },
-                React__default.createElement(EmptyIcon, { className: "leadgen-empty_image" }),
-                React__default.createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
-        React__default.createElement("div", { className: "leadgen-empty_footer" },
-            React__default.createElement(Button$2, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
-            React__default.createElement(Button$2, { onClick: () => setShowEmpty(false), size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
-    const PopupFormTitle = (React__default.createElement("h2", { title: title, className: clsx(LEAD_CLASS, `lead-modal__title`, `le-text-align-${(_b = textBlocks.titleBlock.data) === null || _b === void 0 ? void 0 : _b.align}`, { 'leadgen-title': isLightBox }) }, title));
-    const PopupFormDescription = (React__default.createElement("p", { title: textBlocks.subtitleBlock.data.value, className: clsx(LEAD_CLASS, `lead-modal__description`, `le-text-align-${(_c = textBlocks.subtitleBlock.data) === null || _c === void 0 ? void 0 : _c.align}`, { 'leadgen-description': isLightBox }) }, textBlocks.subtitleBlock.data.value));
+    const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
+        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
+    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: clsx(`lead-modal__form ${popupId}`, {
-                'leadgen-form': isLightBox,
-            }), onSubmit: middlewareOnSubmit },
-            React__default.createElement("div", { className: clsx('lead-modal__form-header', {
-                    'leadgen-form_header': isLightBox,
-                }) },
-                PopupFormTitle,
-                PopupFormDescription),
-            React__default.createElement("div", { className: clsx('lead-modal__form-control-wrapper', {
-                    'leadgen-form_body': isLightBox,
-                }), "data-hidden": !isFormSubmit },
+        React__default.createElement("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("div", { className: "leadgen-form_inner" },
-                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))),
-            React__default.createElement("div", { className: "leadgen-form_footer" }, isFormSubmit ? ButtonSubmit : ButtonLink))));
+                    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: () => {
+            setShowOtpPhone(null);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+        } }));
     const PopupThankYou = showThankyou && (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
-    const popupContentClassName = clsx('lead-modal__content', `le-newbuilder-${currentLayout}`, 'leadPopupContent', { 'leadgen-content': isLightBox });
-    const PopupContent = (React__default.createElement("div", { className: popupContentClassName },
+    const PopupContent = (React__default.createElement("div", { className: clsx('leadgen-content', {
+            'leadgen-content_small': limitFieldsLightBoxB,
+        }) },
         PopupHeader,
-        React__default.createElement("div", { className: "leadgen-inner" },
+        !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
             PopupThankYou,
             !showThankyou && (React__default.createElement(React__default.Fragment, null,
-                showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
-                        setShowOtpPhone(null);
-                        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
-                    } })),
-                showEmpty && PopupEmpty,
-                React__default.createElement("div", { "data-hidden": !!showOtpPhone || !!showEmpty, className: clsx('lead-modal__body le-newbuilder-overlay', {
-                        'leadgen-body': isLightBox,
-                    }) }, PopupForm))))));
-    const PopupWrapper = (React__default.createElement("div", { className: clsx(`lead-modal__wrapper le-newbuilder-wrap-${currentLayout}`, {
-            'leadgen-wrapper': isLightBox,
-            'leadgen-wrapper_small': isSmallLightBoxB,
-            'leadgen-wrapper_otp': showOtpPhone,
-        }) },
-        !currentLayout.includes('Inline') && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: clsx('close-button-top-right', {
-                'leadgen-close_btn': isLightBox,
-            }) })),
-        PopupContent));
+                PopupOtp,
+                PopupEmpty,
+                !(showOtpPhone || showEmpty) && PopupForm))))));
     const styleOverlay = useMemo(() => {
-        let styleContent = `.le-newbuilder-overlay {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
+        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
         if (isMobile && imageOverlayMobile) {
-            styleContent += `.le-newbuilder-overlay {background-image: url(${imageOverlayMobile});}`;
+            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
         }
         if (!isMobile && imageOverlayDesktop) {
-            styleContent += `@media screen and (min-width:768px) {.le-newbuilder-overlay {background-image: url(${imageOverlayDesktop});}}`;
+            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
         }
         return styleContent;
     }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
-    const popupContainerClassName = clsx('lead-modal lead-modal-wrapper modal--animate-scale', `leadgen-${currentLayout}`, {
-        'le-buider-inline': !!isInPage,
-        'le-buider-slider': !!isSlider,
-        leadgen: isLightBox,
+    const PopupWrapper = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        React__default.createElement("div", { className: clsx('leadgen-wrapper', {
+                'leadgen-wrapper_small': limitFieldsLightBoxB,
+            }) },
+            showButtonClose && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
+            PopupContent)));
+    const popupContainerClassName = clsx('leadgen', `leadgen-${currentLayout}`, {
+        'leadgen-lightbox': isLightBox,
+        'leadgen-inline': isInPage,
+        'leadgen-slider': isSlider,
     });
     const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
-        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
         PopupWrapper,
-        React__default.createElement("div", { className: "", style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
-        React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
-            currentLayout == LEADGEN_LAYOUT.Fullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
-                    aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
-                } })) : null,
-            PopupWrapper)));
+        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+        isFullscreen ? (React__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 (currentLayout.includes('LightBox') ||
-        currentLayout == LEADGEN_LAYOUT.Fullscreen ||
-        currentLayout == LEADGEN_LAYOUT.Slider) {
+    if (isLightBox || isFullscreen || isSlider) {
         return PopupContainer;
     }
-    else if (currentLayout == LEADGEN_LAYOUT.Sidebar) {
+    else if (isSidebar) {
         return React__default.createElement(SideBarLayout, { content: PopupContainer });
     }
-    else if (currentLayout.includes('Inline')) {
+    else if (isInline) {
         return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
     }
     return null;

package/build/esm/{logoIcon-20ab8f8c.js → logoIcon-41c813e7.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-c142944e.js';
-import { I as ImageWrap } from './useScreenSize-957a193d.js';
+import { C as CommonGAssets } from './index-ac395e87.js';
+import { I as ImageWrap } from './useScreenSize-3cfcf964.js';
 
 const _LogoIcon = ({ type, width, height }) => {
     const data = useMemo(() => {

package/build/esm/mantine.js

@@ -1,43 +1,43 @@
-import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-39fb2e6e.js';
-export { k as Accordion, A as Anchor, b as AspectRatio, a as Avatar, B as Breadcrumbs, l as Carousel, c as CentralCarousel, d as Checkbox, e as ChipButton, I as Input, O as OTP, P as Phone, n as Popover, R as Radio, S as Select, m as emotionCache, g as getMantineThemeOverride, t as themeColors } from './index-39fb2e6e.js';
-export { D as DatePicker } from './index-02f17efb.js';
-export { T as Text } from './index-0d846d6d.js';
-import { B as Button } from './index-e7be37a8.js';
-export { B as Button } from './index-e7be37a8.js';
-export { I as Indicator } from './index-3ed931d1.js';
+import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-ba416c4d.js';
+export { k as Accordion, A as Anchor, b as AspectRatio, a as Avatar, B as Breadcrumbs, l as Carousel, c as CentralCarousel, d as Checkbox, e as ChipButton, I as Input, O as OTP, P as Phone, n as Popover, R as Radio, S as Select, m as emotionCache, g as getMantineThemeOverride, t as themeColors } from './index-ba416c4d.js';
+export { D as DatePicker } from './index-749b82c0.js';
+export { T as Text } from './index-0c762c28.js';
+import { B as Button } from './index-3ba65bfa.js';
+export { B as Button } from './index-3ba65bfa.js';
+export { I as Indicator } from './index-361413e4.js';
 import React__default, { useState, useEffect } from 'react';
-export { M as Modal } from './index-9b454cd5.js';
-import { _ as __rest } from './tslib.es6-80566a58.js';
+export { M as Modal } from './index-78f86b65.js';
+import { _ as __rest } from './tslib.es6-d7ddaae6.js';
 import { MantineProvider as MantineProvider$1, Badge as Badge$1, LoadingOverlay as LoadingOverlay$1, clsx, Title, Text, Button as Button$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';
-export { S as Spoiler } from './index-4fa01d7e.js';
+export { S as Spoiler } from './index-d3b1f03e.js';
 import { useDebouncedValue } from '@mantine/hooks';
-export { S as Switch } from './index-aeef20fe.js';
-import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-6bc0d375.js';
-export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-6bc0d375.js';
-export { O as OTHER_THEME_CONFIG } from './other-80f26543.js';
-export { T as Tabs } from './index-087094d5.js';
+export { S as Switch } from './index-3fa31e65.js';
+import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-5b017463.js';
+export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-5b017463.js';
+export { O as OTHER_THEME_CONFIG } from './other-9cc887b0.js';
+export { T as Tabs } from './index-e5fc397f.js';
 import '@hhgtech/icons/other';
-import './index-c142944e.js';
+import './index-ac395e87.js';
 import './constantsDomainLocales.js';
-import './Locale-9c329d60.js';
+import './Locale-71ac6373.js';
 import './constantsIsProduction.js';
-import './useScreenSize-957a193d.js';
+import './useScreenSize-3cfcf964.js';
 import '@emotion/styled';
-import './utils-4b0d3309.js';
+import './utils-9ce94c8f.js';
 import '@mantine/carousel';
-import './index-86459e18.js';
-import './index-8b37b0aa.js';
+import './index-29f67057.js';
+import './index-bfffbe28.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'classnames';
-import './useUniqueId-fde4b561.js';
+import './useUniqueId-089ab4e8.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-5cd41ce1.js';
-import './index-70112e6a.js';
-import './translationsContext-688cebc1.js';
+import './index.styles-00123847.js';
+import './index-170fc055.js';
+import './translationsContext-935efc32.js';
 import '@mantine/notifications';
 import 'dayjs';