@hhgtech/hhg-components 1.29.428 → 1.29.429-beta-2

package/build/lead.js

@@ -2,61 +2,60 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-92eea64c.js');
+var tslib_es6 = require('./tslib.es6-b0fcf70a.js');
 var React = require('react');
 var core = require('@mantine/core');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index = require('./index-5fe314b3.js');
+var index = require('./index-fd2f1513.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-071863b3.js');
-var translationsContext = require('./translationsContext-9611eb12.js');
-var utils$1 = require('./utils-ce4f7c36.js');
-var index$2 = require('./index-87cb8dec.js');
-var index$3 = require('./index-fb259136.js');
-var index$5 = require('./index-07c8eeae.js');
-var index$4 = require('./index-55a01c0b.js');
-require('./index.styles-950213c8.js');
+var index$1 = require('./index-69ae58ad.js');
+var translationsContext = require('./translationsContext-8aafd4a3.js');
+var utils$1 = require('./utils-34b07135.js');
+var index$2 = require('./index-656a4492.js');
+var index$3 = require('./index-f72a5eb7.js');
+var index$5 = require('./index-3753c23c.js');
+var index$4 = require('./index-297ee109.js');
+require('./index.styles-11eee103.js');
 var hooks = require('@mantine/hooks');
-require('./index-f82897b4.js');
-var text = require('./text-71e1e351.js');
-require('./index-abe0f3e5.js');
-var utils = require('./utils-13cac781.js');
+require('./index-1ac68c15.js');
+var text = require('./text-e5cb14b7.js');
+require('./index-65dff0fb.js');
+var utils = require('./utils-9d40a658.js');
 var dates = require('@mantine/dates');
-var index$7 = require('./index-2112e545.js');
-var index$b = require('./index-d61d00a6.js');
-require('./index-84a1cb22.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-d30df206.js');
-var index$6 = require('./index-f253cbfe.js');
-var translationsProvider = require('./translationsProvider-a66ac1d8.js');
-var Locale = require('./Locale-ea78006e.js');
+var index$7 = require('./index-86708d23.js');
+var index$b = require('./index-b6d94c63.js');
+require('./index-5af5e002.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-65553675.js');
+var index$6 = require('./index-923ce84a.js');
+var translationsProvider = require('./translationsProvider-1e83343d.js');
+var Locale = require('./Locale-bb109c7a.js');
 var uuid = require('uuid');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$8 = require('./index-0ffe12a7.js');
-var togetherComponentGlobalContext = require('./utils-49fa959a.js');
-var index$9 = require('./index-a30126fc.js');
-var index$a = require('./index-d466ae51.js');
-var index$c = require('./index-97b594ac.js');
+var index$8 = require('./index-2236e64a.js');
+var togetherComponentGlobalContext = require('./utils-ec38b3b6.js');
+var index$9 = require('./index-ea023cf2.js');
+var index$a = require('./index-73058e4d.js');
+var index$c = require('./index-7a256061.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var InputDate = require('./InputDate-05998051.js');
-var carousel = require('@mantine/carousel');
-var utils$2 = require('./utils-b19c0467.js');
-var index$d = require('./index-13e624cc.js');
-var Close = require('./Close-b30d6abc.js');
+var InputDate = require('./InputDate-b37b57d7.js');
+var index$d = require('./index-c3de764f.js');
+var Close = require('./Close-c4e16b3c.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-1af34455.js');
+require('./normalizeLink-3049e9d8.js');
 require('@hhgtech/icons/other');
+require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-2b879de5.js');
+require('./useUniqueId-5b3003ed.js');
 require('./constantsSite.js');
-require('./shared-369cea41.js');
+require('./shared-9d4d91f6.js');
 require('@mantine/notifications');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
@@ -73,12 +72,11 @@ require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-SG.js');
 require('./i18n-values/zh-TW.js');
 require('@emotion/react');
-require('./index-fb553228.js');
+require('./index-9225a0de.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-a819e09a.js');
-require('./constants-4e2120af.js');
+require('./constants-03ec6a24.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -964,7 +962,7 @@ const Description = (_a) => {
 
 const LeadGenContext$1 = React.createContext({});
 
-var useStyles$3 = core.createStyles(() => {
+var useStyles$2 = core.createStyles(() => {
     return {
         control: {},
     };
@@ -1027,7 +1025,7 @@ const TitleBlock$1 = ({ children, align, }) => (React__default["default"].create
 
 const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, styles, classNames, popoverProps, }) => {
     const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { classes, cx } = useStyles$3(undefined, {
+    const { classes, cx } = useStyles$2(undefined, {
         name: 'LeadGen__Field',
         styles,
         classNames,
@@ -1115,7 +1113,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
     })));
 };
 
-var useStyles$2 = core.createStyles((theme) => {
+var useStyles$1 = core.createStyles((theme) => {
     return {
         root: {},
         header: {},
@@ -1145,7 +1143,7 @@ const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps,
     const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, 
     // formRef,
     setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
-    const { classes, cx } = useStyles$2(undefined, {
+    const { classes, cx } = useStyles$1(undefined, {
         name: 'LeadGen__FormComponent',
         styles,
         classNames,
@@ -1239,7 +1237,7 @@ const Form = (props) => {
     return showThankyou || showOtpPhone ? null : React__default["default"].createElement(FormComponent, Object.assign({}, props));
 };
 
-var useStyles$1 = core.createStyles(() => {
+var useStyles = core.createStyles(() => {
     return {
         root: {},
         header: {},
@@ -1264,7 +1262,7 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
     const [displayPhone, setDisplayPhone] = React.useState('');
     const formatPhoneNumberIntlRef = React.useRef();
     const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
-    const { classes, cx } = useStyles$1(undefined, {
+    const { classes, cx } = useStyles(undefined, {
         name: 'LeadGen__OTP',
         styles,
         classNames,
@@ -1433,9 +1431,6 @@ var enPH = {
 	"lead.empty.title": "Oops, seem your information is empty, do you want to submit the information again?",
 	"lead.empty.cancel": "Cancel",
 	"lead.empty.submitAgain": "Submit again",
-	"inlineFreebie.freeSample.title": "Free Sample",
-	"inlineFreebie.luckyDrawGift.title": "Lucky-draw Gift",
-	"inlineFreebie.value": "Value",
 	"common.day": "Day",
 	"common.month": "Month",
 	"common.year": "Year"
@@ -1459,9 +1454,6 @@ var hiIN = {
 	"lead.empty.title": "ऊप्स! लगता है आपकी जानकारी खाली है। क्या आप जानकारी फिर से सबमिट करना चाहते हैं?",
 	"lead.empty.cancel": "रद्द करें",
 	"lead.empty.submitAgain": "फिर से सबमिट करें",
-	"inlineFreebie.freeSample.title": "मुफ्त नमूना",
-	"inlineFreebie.luckyDrawGift.title": "लकी-ड्रा गिफ्ट",
-	"inlineFreebie.value": "मूल्य",
 	"common.day": "साल",
 	"common.month": "महीना",
 	"common.year": ""
@@ -1487,9 +1479,6 @@ var idID = {
 	"lead.empty.title": "Oops, sepertinya informasi Anda kosong. Apakah Anda ingin mengirimkan informasi lagi?",
 	"lead.empty.cancel": "Batal",
 	"lead.empty.submitAgain": "Kirim lagi",
-	"inlineFreebie.freeSample.title": "Sampel Gratis",
-	"inlineFreebie.luckyDrawGift.title": "Hadiah Undian",
-	"inlineFreebie.value": "Nilai",
 	"common.day": "Hari",
 	"common.month": "Bulan",
 	"common.year": "Tahun"
@@ -1515,9 +1504,6 @@ var kmKH = {
 	"lead.empty.title": "អូុបស! ហាក់ដូចជាព័ត៌មានរបស់អ្នកទទេ។ តើអ្នកចង់ដាក់ស្នើព័ត៌មានម្តងទៀតទេ?",
 	"lead.empty.cancel": "លុប​ចោល",
 	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត",
-	"inlineFreebie.freeSample.title": "សំបុត្រស្រង់ពិន័យ",
-	"inlineFreebie.luckyDrawGift.title": "សំបុត្រស្រង់ពិន័យ",
-	"inlineFreebie.value": "តម្លៃ",
 	"common.day": "ឆ្នាំ",
 	"common.month": "ខែ",
 	"common.year": "ថ្ងៃ"
@@ -1543,9 +1529,6 @@ var msMY = {
 	"lead.empty.title": "Oops, nampaknya maklumat anda kosong. Adakah anda ingin menghantar maklumat semula?",
 	"lead.empty.cancel": "Batal",
 	"lead.empty.submitAgain": "Hantar semula",
-	"inlineFreebie.freeSample.title": "Sampel Percuma",
-	"inlineFreebie.luckyDrawGift.title": "Hadiah Undian",
-	"inlineFreebie.value": "Nilai",
 	"common.day": "Hari",
 	"common.month": "Bulan",
 	"common.year": "Tahun"
@@ -1571,9 +1554,6 @@ var myMM = {
 	"lead.empty.title": "အုပ်စ်! သင့်အချက်အလက်သည် ဗလာဖြစ်နေသလိုဖြစ်သည်။ ထပ်မံတင်သွင်းလိုပါသလား?",
 	"lead.empty.cancel": "မလုပ်ဆောင်ပါ",
 	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ",
-	"inlineFreebie.freeSample.title": "အခမဲ့အစားအစာ",
-	"inlineFreebie.luckyDrawGift.title": "အခမဲ့အစားအစာ",
-	"inlineFreebie.value": "တန်ဖိုး",
 	"common.day": "ရက်",
 	"common.month": "လ",
 	"common.year": "နှစ်"
@@ -1599,9 +1579,6 @@ var thTH = {
 	"lead.empty.title": "อุ๊ปส์! ดูเหมือนว่าข้อมูลของคุณว่างเปล่า คุณต้องการส่งข้อมูลอีกครั้งหรือไม่?",
 	"lead.empty.cancel": "ยกเลิก",
 	"lead.empty.submitAgain": "ส่งอีกครั้ง",
-	"inlineFreebie.freeSample.title": "ตัวอย่างฟรี",
-	"inlineFreebie.luckyDrawGift.title": "ของรางวัลที่ถูกรางวัล",
-	"inlineFreebie.value": "ค่า",
 	"common.day": "วัน",
 	"common.month": "เดือน",
 	"common.year": "ปี"
@@ -1638,9 +1615,6 @@ var viVN = {
 	"lead.empty.title": "Oops, có vẻ như thông tin của bạn đang trống. Bạn có muốn gửi lại thông tin không?",
 	"lead.empty.cancel": "Hủy",
 	"lead.empty.submitAgain": "Gửi lại",
-	"inlineFreebie.freeSample.title": "Dùng thử miễn phí",
-	"inlineFreebie.luckyDrawGift.title": "Phần thưởng may mắn",
-	"inlineFreebie.value": "Trị giá",
 	"common.day": "Ngày",
 	"common.month": "Tháng",
 	"common.year": "Năm"
@@ -1666,9 +1640,6 @@ var zhTW = {
 	"lead.empty.title": "哎呀，您的資訊似乎是空的，您想要重新提交資訊嗎？",
 	"lead.empty.cancel": "取消",
 	"lead.empty.submitAgain": "重新提交",
-	"inlineFreebie.freeSample.title": "免費試用",
-	"inlineFreebie.luckyDrawGift.title": "幸運抽獎禮品",
-	"inlineFreebie.value": "價值",
 	"common.day": "日",
 	"common.month": "月",
 	"common.year": "年"
@@ -3326,6 +3297,26 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+function isMac() {
+    return testPlatform(/^Mac/);
+}
+function isIPhone() {
+    return testPlatform(/^iPhone/);
+}
+function isIPad() {
+    return (testPlatform(/^iPad/) ||
+        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+        (isMac() && navigator.maxTouchPoints > 1));
+}
+function isIOS() {
+    return isIPhone() || isIPad();
+}
+function testPlatform(re) {
+    return typeof window !== 'undefined' && window.navigator != null
+        ? re.test(window.navigator.platform)
+        : undefined;
+}
+
 function useScrollTo() {
     const scrollTo = React.useCallback((element, to, duration = 500) => {
         if (!element)
@@ -3349,35 +3340,6 @@ function useScrollTo() {
     return scrollTo;
 }
 
-const useViewportDimensions = () => {
-    const dimensionsRef = React.useRef({ width: 0, height: 0 });
-    const [dimensions, setDimensions] = React.useState(() => ({
-        width: window.screen.availWidth,
-        height: window.screen.availHeight,
-    }));
-    React.useEffect(() => {
-        var _a;
-        function visualViewport(e) {
-            if (dimensionsRef.current.width === e.target.width &&
-                dimensionsRef.current.height === e.target.height) {
-                return;
-            }
-            const newDimensions = {
-                width: e.target.width,
-                height: e.target.height,
-            };
-            dimensionsRef.current = newDimensions;
-            setDimensions(newDimensions);
-        }
-        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', visualViewport);
-        return () => {
-            var _a;
-            (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', visualViewport);
-        };
-    }, []);
-    return React.useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
-};
-
 // Default handling for Safari & Chrome
 function useViewportPushedByKeyboard(threshold = 20) {
     const ref = React.useRef(null);
@@ -3422,25 +3384,102 @@ function useKeyboardOpen(isAndroid = false) {
     return keyOpen;
 }
 
-function isMac() {
-    return testPlatform(/^Mac/);
-}
-function isIPhone() {
-    return testPlatform(/^iPhone/);
-}
-function isIPad() {
-    return (testPlatform(/^iPad/) ||
-        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-        (isMac() && navigator.maxTouchPoints > 1));
-}
-function isIOS() {
-    return isIPhone() || isIPad();
-}
-function testPlatform(re) {
-    return typeof window !== 'undefined' && window.navigator != null
-        ? re.test(window.navigator.platform)
-        : undefined;
-}
+const useFocusFieldOnDevice = (isMobile, isEnable, gapToCheckAvai = 0) => {
+    const isIos = isIOS();
+    const popupContentRef = React.useRef(null);
+    const { isPushed, bottomRef } = useViewportPushedByKeyboard();
+    const [bottomSpacing, setBottomSpacing] = React.useState(0);
+    const [isScrolling, setIsScrolling] = React.useState(false);
+    const keyOpen = useKeyboardOpen();
+    const isPushedRef = React.useRef(isPushed);
+    const keyOpenRef = React.useRef(keyOpen);
+    const bottomSpacingRef = React.useRef(bottomSpacing);
+    const isScrollingRef = React.useRef(false);
+    const gapBottomSpace = React.useRef(40);
+    const initialHeight = React.useRef(0);
+    const scrollTo = useScrollTo();
+    const handlePopupContentScroll = (formRef) => {
+        if (!isScrollingRef.current && !!(formRef === null || formRef === void 0 ? void 0 : formRef.target)) {
+            const focusableElements = formRef.target.querySelectorAll('input, textarea, select, button, [tabindex]:not([tabindex="-1"])');
+            focusableElements.forEach((el) => {
+                if (el === document.activeElement) {
+                    el.blur();
+                }
+            });
+        }
+    };
+    const handleFocus = (e) => {
+        if (!isMobile || !isIos || !isEnable)
+            return;
+        setTimeout(() => {
+            var _a, _b;
+            if (!isPushedRef.current &&
+                keyOpenRef.current &&
+                popupContentRef.current) {
+                const input = e.target;
+                const rect = input.getBoundingClientRect();
+                const inputHeight = rect.height;
+                const inputTop = rect.top;
+                const viewportHeight = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height;
+                const isErrorDevice = viewportHeight === initialHeight.current;
+                const currentTop = inputTop + inputHeight + (isErrorDevice ? 0 : gapBottomSpace.current);
+                const currentScrollY = popupContentRef.current.scrollTop;
+                const viewPort = (isErrorDevice
+                    ? window.innerHeight * 0.4
+                    : (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.height) - gapToCheckAvai;
+                if (currentTop >= viewPort) {
+                    const gap = currentTop - viewPort;
+                    const targetScrollY = currentScrollY + gap;
+                    if (!isNaN(targetScrollY)) {
+                        setIsScrolling(true);
+                        scrollTo(popupContentRef.current, targetScrollY, 400);
+                        setTimeout(() => {
+                            setIsScrolling(false);
+                        }, 500);
+                    }
+                }
+            }
+        }, 300);
+    };
+    React.useEffect(() => {
+        initialHeight.current = window.innerHeight;
+    }, []);
+    React.useEffect(() => {
+        isPushedRef.current = isPushed;
+    }, [isPushed]);
+    React.useEffect(() => {
+        keyOpenRef.current = keyOpen;
+    }, [keyOpen]);
+    React.useEffect(() => {
+        bottomSpacingRef.current = bottomSpacing;
+    }, [bottomSpacing]);
+    React.useEffect(() => {
+        setBottomSpacing(isMobile && isIos && isEnable
+            ? !isPushed && keyOpen
+                ? (() => {
+                    var _a;
+                    const visualHeight = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height;
+                    const isErrorDevice = visualHeight === initialHeight.current;
+                    return isErrorDevice ? window.innerHeight * 0.4 : visualHeight;
+                })()
+                : 0
+            : 0);
+    }, [isPushed, keyOpen, isMobile, isIos, isEnable]);
+    React.useEffect(() => {
+        isScrollingRef.current = isScrolling;
+    }, [isScrolling]);
+    return {
+        popupContentRef,
+        bottomRef,
+        bottomStyle: {
+            height: `${bottomSpacing}px`,
+            width: '100%',
+            transition: 'height .2s ease',
+        },
+        handleFocus,
+        handlePopupContentScroll,
+    };
+};
 
 function chain(...callbacks) {
     return (...args) => {
@@ -3697,6 +3736,35 @@ function isInput(target) {
         (target instanceof HTMLElement && target.isContentEditable));
 }
 
+const useViewportDimensions = () => {
+    const dimensionsRef = React.useRef({ width: 0, height: 0 });
+    const [dimensions, setDimensions] = React.useState(() => ({
+        width: window.screen.availWidth,
+        height: window.screen.availHeight,
+    }));
+    React.useEffect(() => {
+        var _a;
+        function visualViewport(e) {
+            if (dimensionsRef.current.width === e.target.width &&
+                dimensionsRef.current.height === e.target.height) {
+                return;
+            }
+            const newDimensions = {
+                width: e.target.width,
+                height: e.target.height,
+            };
+            dimensionsRef.current = newDimensions;
+            setDimensions(newDimensions);
+        }
+        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', visualViewport);
+        return () => {
+            var _a;
+            (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', visualViewport);
+        };
+    }, []);
+    return React.useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
+};
+
 const StyledLeadGenLightBoxBFooter = styled__default["default"].div `
   padding-top: calc(var(--spacing-y, 20px) * 8 / 20);
   padding-inline: var(--spacing-x, 20px);
@@ -4327,7 +4395,7 @@ const StyledFormContainer = styled__default["default"].div `
  *
  */
 const FormContainer = (_a) => {
-    var { iconComponent, title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = tslib_es6.__rest(_a, ["iconComponent", "title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
+    var { iconComponent, title, titleAlign, description, descriptionAlign, className, style, children, header, footer, isLightBoxA, bottomStyle, popupContentRef, handlePopupContentScroll } = _a, restProps = tslib_es6.__rest(_a, ["iconComponent", "title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer", "isLightBoxA", "bottomStyle", "popupContentRef", "handlePopupContentScroll"]);
     const HeaderContent = (React__default["default"].createElement("div", { className: "leadgen-form_header" },
         iconComponent,
         React__default["default"].createElement(index$2.Text, { as: "h2", size: 'h4', variant: "primary", weight: 'semiBold', className: "leadgen-title", "data-align": titleAlign }, title),
@@ -4337,13 +4405,13 @@ const FormContainer = (_a) => {
     }
     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" },
-            !!header && (React__default["default"].createElement("div", { className: "leadgen-form_scrollable" },
+            header ? (React__default["default"].createElement("div", { className: "leadgen-form_scrollable", ref: popupContentRef, onScroll: handlePopupContentScroll },
                 header,
                 HeaderContent,
-                React__default["default"].createElement("div", { className: "leadgen-form_body" }, children))),
-            !header && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "leadgen-form_body" }, children),
+                isLightBoxA && React__default["default"].createElement("div", { style: bottomStyle }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
                 HeaderContent,
-                React__default["default"].createElement("div", { className: "leadgen-form_body" }, children))),
+                React__default["default"].createElement("div", { className: "leadgen-form_body", ref: popupContentRef, onScroll: handlePopupContentScroll }, children))),
             React__default["default"].createElement("div", { className: "leadgen-form_footer" }, footer))));
 };
 
@@ -4497,215 +4565,6 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
                         } }))))));
 };
 
-const Gift = ({ className, style }) => {
-    return (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default["default"].createElement("path", { d: "M15.8337 9.16675V15.8334C15.8337 17.0612 14.8392 18.0556 13.6114 18.0556H6.38921C5.16144 18.0556 4.16699 17.0612 4.16699 15.8334V9.16675", fill: "#FEC7DC" }),
-        React__default["default"].createElement("path", { d: "M10 5.83337V18.0556", stroke: "#FC488D", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__default["default"].createElement("path", { d: "M4.16699 3.8889C4.16699 2.81557 5.0381 1.94446 6.11144 1.94446C8.9881 1.94446 10.0003 5.83335 10.0003 5.83335H6.11144C5.0381 5.83335 4.16699 4.96224 4.16699 3.8889Z", stroke: "#FC488D", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__default["default"].createElement("path", { d: "M13.8889 5.83335H10C10 5.83335 11.0122 1.94446 13.8889 1.94446C14.9622 1.94446 15.8333 2.81557 15.8333 3.8889C15.8333 4.96224 14.9622 5.83335 13.8889 5.83335Z", stroke: "#FC488D", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__default["default"].createElement("path", { d: "M15.8337 9.16675V15.8334C15.8337 17.0612 14.8392 18.0556 13.6114 18.0556H6.38921C5.16144 18.0556 4.16699 17.0612 4.16699 15.8334V9.16675", stroke: "#FC488D", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__default["default"].createElement("path", { d: "M16.9443 5.83337H3.05545C2.4418 5.83337 1.94434 6.33084 1.94434 6.94449V8.0556C1.94434 8.66924 2.4418 9.16671 3.05545 9.16671H16.9443C17.558 9.16671 18.0554 8.66924 18.0554 8.0556V6.94449C18.0554 6.33084 17.558 5.83337 16.9443 5.83337Z", stroke: "#FC488D", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" })));
-};
-
-const Star = ({ className, style }) => {
-    return (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default["default"].createElement("path", { d: "M7.76093 1.94434L11.8267 4.92811L16.5893 3.27134L15.0077 8.05978L18.0553 12.0772L13.0127 12.0526L10.1339 16.1928L8.59882 11.3896L3.77148 9.93078L7.86504 6.98645L7.76093 1.94434Z", fill: "#91CAFF" }),
-        React__default["default"].createElement("path", { d: "M7.76093 1.94434L11.8267 4.92811L16.5893 3.27134L15.0077 8.05978L18.0553 12.0772L13.0127 12.0526L10.1339 16.1928L8.59882 11.3896L3.77148 9.93078L7.86504 6.98645L7.76093 1.94434Z", stroke: "#2D87F3", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__default["default"].createElement("path", { d: "M2.22168 17.7777L5.55501 14.4443", stroke: "#2D87F3", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__default["default"].createElement("path", { d: "M1.94434 13.611L2.49989 13.0554", stroke: "#2D87F3", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }),
-        React__default["default"].createElement("path", { d: "M6.38867 18.0556L6.94423 17.5", stroke: "#2D87F3", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" })));
-};
-
-const StyledFreebieCarouselTitle = styled__default["default"].div `
-  display: flex;
-  align-items: center;
-  gap: ${core.rem(8)};
-  margin-bottom: ${core.rem(16)};
-`;
-var useStyles = core.createStyles((theme) => ({
-    indicators: {
-        bottom: 0,
-        gap: core.rem(4),
-    },
-    indicator: {
-        width: core.rem(5),
-        height: core.rem(5),
-        borderRadius: '100%',
-        background: theme.colors.neutral[2],
-        opacity: 1,
-        '&[data-active]': {
-            backgroundColor: theme.fn.primaryColor(),
-        },
-    },
-    container: {
-        padding: `0 0 ${core.rem(21)} 0`,
-    },
-    root: {
-        marginBottom: core.rem(16),
-    },
-}));
-
-const StyledFreebiesCard = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  border-radius: ${core.rem(16)};
-  box-shadow: 0px 32px 32px -16px rgba(0, 0, 0, 0.04),
-    0px 6px 6px -3px rgba(0, 0, 0, 0.04), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.04),
-    0px 1px 1px -0.5px rgba(0, 0, 0, 0.04);
-  background-color: ${miscTheme.theme.colors.white};
-
-  .mantine-AspectRatio-root {
-    width: 100%;
-
-    img {
-      border-radius: ${core.rem(16)} ${core.rem(16)} 0 0;
-      margin: 0;
-    }
-  }
-
-  .mantine-Badge-root {
-    height: fit-content;
-    width: fit-content;
-    position: absolute;
-    padding: ${core.rem(4)} ${core.rem(8)};
-    border-radius: ${core.rem(8)};
-    bottom: ${core.rem(12)};
-    left: ${core.rem(12)};
-
-    .mantine-Text-root {
-      line-height: ${core.rem(12)};
-    }
-
-    background-color: #00000080;
-  }
-`;
-const StyledImageWrap = styled__default["default"].div `
-  width: 100%;
-  height: 100%;
-  position: relative;
-`;
-
-const FreebieLuckyGiftItem = ({ isHostedByClient, locale, data: { image, name, desc, prize_value, prize_unit, cta_button, winning_slot, }, }) => {
-    const { t } = index$1.useTranslations();
-    console.log(prize_value, prize_unit, locale);
-    const formattedPrice = prize_value && prize_unit
-        ? utils$2.currencyFormat(prize_value, locale, prize_unit)
-        : '';
-    return (React__default["default"].createElement(StyledFreebiesCard, null,
-        React__default["default"].createElement(StyledImageWrap, null,
-            React__default["default"].createElement(core.AspectRatio, { ratio: 3 / 2 },
-                React__default["default"].createElement(index$c.ImageWrap, { src: image, alt: name || '' })),
-            winning_slot > 0 && (React__default["default"].createElement(core.Badge, null,
-                React__default["default"].createElement(index$2.Text, { size: "c2", color: miscTheme.theme.colors.white },
-                    winning_slot,
-                    " SLOTS")))),
-        React__default["default"].createElement(core.Box, { p: "12px" },
-            React__default["default"].createElement(core.Tooltip, { label: name, position: "top", withArrow: true },
-                React__default["default"].createElement(index$2.Text, { lineClamp: 2, size: "title2", mb: core.rem(4), style: { height: core.rem(48) } }, name)),
-            React__default["default"].createElement(core.Tooltip, { label: desc, position: "top", withArrow: true },
-                React__default["default"].createElement(index$2.Text, { lineClamp: 2, size: "p3", mb: core.rem(16), style: { height: core.rem(40) } }, desc)),
-            React__default["default"].createElement(index$2.Text, { size: "p3", fw: 500 },
-                React__default["default"].createElement(index$2.Text, { as: "span" },
-                    t('inlineFreebie.value'),
-                    " "),
-                React__default["default"].createElement(index$2.Text, { as: "span", color: miscTheme.theme.colors.primaryBase }, formattedPrice)),
-            isHostedByClient && (React__default["default"].createElement(index$4.Button, { className: "inline-freebie-button" },
-                React__default["default"].createElement(index$2.Text, { size: "p2" }, cta_button))))));
-};
-const FreebieFreeSampleItem = ({ data: { image, name, desc, cta_button }, }) => (React__default["default"].createElement(StyledFreebiesCard, null,
-    React__default["default"].createElement(core.AspectRatio, { ratio: 3 / 2 },
-        React__default["default"].createElement(index$c.ImageWrap, { src: image, alt: name || '' })),
-    React__default["default"].createElement(core.Box, { p: "12px" },
-        React__default["default"].createElement(core.Tooltip, { label: name, position: "top", withArrow: true },
-            React__default["default"].createElement(index$2.Text, { lineClamp: 2, size: "title2", mb: core.rem(4), style: { height: core.rem(48) } }, name)),
-        React__default["default"].createElement(core.Tooltip, { label: desc, position: "top", withArrow: true },
-            React__default["default"].createElement(index$2.Text, { lineClamp: 3, size: "p3", style: { height: core.rem(60) } }, desc)),
-        React__default["default"].createElement(index$4.Button, { className: "lucky-gift-button inline-freebie-button" },
-            React__default["default"].createElement(index$2.Text, { size: "p2" }, cta_button)))));
-
-var EHostedBy;
-(function (EHostedBy) {
-    EHostedBy["CLIENT"] = "CLIENT";
-    EHostedBy["HHG"] = "HHG";
-})(EHostedBy || (EHostedBy = {}));
-var EFreebieType;
-(function (EFreebieType) {
-    EFreebieType["SAMPLE"] = "SAMPLE";
-    EFreebieType["LUCKY_DRAW"] = "LUCKY_DRAW";
-})(EFreebieType || (EFreebieType = {}));
-
-const FreebieCarousel = ({ isHostedByClient, data, locale, }) => {
-    const { classes } = useStyles(undefined, {
-        name: 'Carousel',
-    });
-    const { t } = index$1.useTranslations();
-    const freeSample = data.filter((item) => item.type === EFreebieType.SAMPLE);
-    const luckyGift = data.filter((item) => item.type === EFreebieType.LUCKY_DRAW);
-    const isHasLuckyGift = luckyGift.length > 0;
-    const isHasFreeSample = freeSample.length > 0;
-    const isHasLuckyGiftMoreThanOne = luckyGift.length > 1;
-    const isHasFreeSampleMoreThanOne = freeSample.length > 1;
-    const luckyGiftCtaButton = luckyGift[0].cta_button;
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        isHasLuckyGift && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(StyledFreebieCarouselTitle, null,
-                React__default["default"].createElement(Gift, null),
-                React__default["default"].createElement(index$2.Text, { size: "title2", color: miscTheme.theme.colors.pink800 }, t('inlineFreebie.freeSample.title'))),
-            React__default["default"].createElement(carousel.Carousel, { slideSize: isHasFreeSampleMoreThanOne ? core.rem(262) : core.rem(355), slideGap: core.rem(12), align: "start", withControls: false, withIndicators: isHasFreeSampleMoreThanOne, classNames: Object.assign({}, classes) }, freeSample.map((item) => (React__default["default"].createElement(carousel.Carousel.Slide, { key: `${item.type}-${item.product_code}` },
-                React__default["default"].createElement(FreebieFreeSampleItem, { data: item }))))))),
-        isHasFreeSample && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(StyledFreebieCarouselTitle, null,
-                React__default["default"].createElement(Star, null),
-                React__default["default"].createElement(index$2.Text, { size: "title2", color: miscTheme.theme.colors.primaryBase }, t('inlineFreebie.luckyDrawGift.title'))),
-            React__default["default"].createElement(carousel.Carousel, { slideSize: isHasLuckyGiftMoreThanOne ? core.rem(262) : core.rem(355), slideGap: core.rem(12), align: "start", withControls: false, withIndicators: isHasLuckyGiftMoreThanOne, classNames: Object.assign({}, classes) }, luckyGift.map((item) => (React__default["default"].createElement(carousel.Carousel.Slide, { key: `${item.type}-${item.product_code}` },
-                React__default["default"].createElement(FreebieLuckyGiftItem, { isHostedByClient: isHostedByClient, data: item, locale: locale }))))),
-            !isHostedByClient && (React__default["default"].createElement(index$4.Button, { className: "inline-freebie-button" },
-                React__default["default"].createElement(index$2.Text, { size: "p2" }, luckyGiftCtaButton)))))));
-};
-
-const StyledBox = styled__default["default"].div `
-  margin-bottom: ${core.rem(4)};
-`;
-const StyledTitle = styled__default["default"](index$2.Text) `
-  margin-bottom: ${core.rem(16)};
-`;
-const StyledBrandImage = styled__default["default"].img `
-  height: ${core.rem(32)};
-  width: auto;
-`;
-const StyledInlineFreebieContainer = styled__default["default"].div `
-  padding: ${core.rem(16)};
-  background-color: ${miscTheme.theme.colors.neutral50};
-
-  .inline-freebie-button {
-    width: 100%;
-    margin-top: ${core.rem(12)};
-
-    .mantine-Text-root {
-      color: ${miscTheme.theme.colors.white};
-      font-weight: 600;
-    }
-
-    &.lucky-gift-button {
-      background-color: ${miscTheme.theme.colors.pink800};
-
-      &:hover {
-        background-color: ${miscTheme.theme.colors.pink700};
-      }
-    }
-  }
-`;
-
-const InlineFreebie = ({ campaign, locale, }) => {
-    const { hosted_by, brand_image, widget_title, data_freebies } = campaign;
-    const isHostedByClient = hosted_by === 'CLIENT';
-    return (React__default["default"].createElement(StyledInlineFreebieContainer, null,
-        React__default["default"].createElement(StyledBox, null,
-            React__default["default"].createElement(StyledBrandImage, { src: brand_image, alt: widget_title || '', loading: "lazy", style: { height: '32px', width: 'auto' } })),
-        React__default["default"].createElement(StyledTitle, { size: "title1" }, widget_title || ''),
-        React__default["default"].createElement(FreebieCarousel, { isHostedByClient: isHostedByClient, data: data_freebies, locale: locale })));
-};
-
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
 // image: campaignShow.image
@@ -4723,7 +4582,7 @@ const LEADGEN_SHOW_HEADER = [
 ];
 // const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39', 'u0adw7hw8kw7t89']
 const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39'];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, doImpression, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, campaign, }) => {
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, doImpression, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
     var _a, _b;
     const { primaryColor } = React.useContext(LeadGenContext$1);
     const { isMobile } = index$c.useScreenSize();
@@ -4748,7 +4607,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             });
         }
     };
-    const { height } = useViewportDimensions();
     // usePreventScroll()
     const formActiveTime = React.useRef(0);
     const textBlocks = JSON.parse(extraFields.textBlocks);
@@ -4763,8 +4621,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const isLightBox = currentLayout.includes('LightBox');
     const isLightBoxA = currentLayout === LEADGEN_LAYOUT.LightBoxA;
     const isLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB;
-    const isInline = currentLayout.includes('Inline') || currentLayout.includes('Freebie');
-    const isFreebie = currentLayout.includes('Freebie');
+    const isInline = currentLayout.includes('Inline');
     const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
     const isInPage = isInline || isSidebar;
     const isDrawer = isLightBoxB && isMobile;
@@ -4788,19 +4645,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         userInfo,
         format: (_a = (index$7.ISO_FORMAT[locale] || index$7.ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
-    const popupContentRef = React.useRef(null);
-    const isIos = isIOS();
-    const keyOpen = useKeyboardOpen();
-    const { isPushed, bottomRef } = useViewportPushedByKeyboard();
-    const [bottomSpacing, setBottomSpacing] = React.useState(0);
-    const bottomSpacingRef = React.useRef(bottomSpacing);
-    const isPushedRef = React.useRef(isPushed);
-    const keyOpenRef = React.useRef(keyOpen);
-    const [isScrolling, setIsScrolling] = React.useState(false);
-    const isScrollingRef = React.useRef(false);
-    const gapBottomSpace = React.useRef(40);
-    const initialHeight = React.useRef(0);
-    const scrollTo = useScrollTo();
+    const { bottomRef, bottomStyle, handlePopupContentScroll, handleFocus, popupContentRef, } = useFocusFieldOnDevice(isMobile, isLightBoxB || isLightBoxA, isLightBoxA ? 85 : 0);
     const handleDoImpression = React.useCallback((type = 'impression') => doImpression({
         formValues: form.values,
         formActiveTime: formActiveTime.current,
@@ -4814,7 +4659,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return null;
     }
     React.useEffect(() => {
-        initialHeight.current = window.innerHeight;
         (isLightBox || isSlider) && handleDoImpression();
         if (isLightBox || isFullscreen) {
             document.body.classList.add('noscroll');
@@ -4824,18 +4668,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         clearCacheUsedEmailOrPhone();
     }, []);
-    React.useEffect(() => {
-        isPushedRef.current = isPushed;
-    }, [isPushed]);
-    React.useEffect(() => {
-        keyOpenRef.current = keyOpen;
-    }, [keyOpen]);
-    React.useEffect(() => {
-        bottomSpacingRef.current = bottomSpacing;
-    }, [bottomSpacing]);
-    React.useEffect(() => {
-        isScrollingRef.current = isScrolling;
-    }, [isScrolling]);
     React.useEffect(() => {
         formRef.current && setLastFormRef(formRef.current);
     }, [formRef.current]);
@@ -4863,18 +4695,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         return () => clearInterval(intervalId);
     }, [showThankyou]);
-    React.useEffect(() => {
-        setBottomSpacing(isMobile && isIos && isLightBoxB
-            ? !isPushed && keyOpen
-                ? (() => {
-                    var _a;
-                    const visualHeight = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height;
-                    const isErrorDevice = visualHeight === initialHeight.current;
-                    return isErrorDevice ? window.innerHeight * 0.4 : visualHeight;
-                })()
-                : 0
-            : 0);
-    }, [isPushed, keyOpen, isMobile, isIos, isLightBoxB]);
     const listBlockAddedRequired = React.useMemo(() => leadGenFieldRequired(listBlockAdded), listBlockAdded);
     const disabledButtonSubmit = React.useMemo(() => {
         if (listBlockAddedRequired.length) {
@@ -4882,47 +4702,11 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         return false;
     }, [...listBlockAddedRequired.map((k) => form.values[k])]);
-    const handlePopupContentScroll = () => {
-        if (!isScrollingRef.current) {
-            const active = document.activeElement;
-            if (formRef.current && formRef.current.contains(active)) {
-                active.blur();
-            }
-        }
-    };
     const onFocus = (e) => {
         // EL-926 Temporary turn off handling focus form on mobile to fix scrolling bug on lightbox A
         // return false
         e.preventDefault();
-        if (!isMobile || !isIos || !isLightBoxB)
-            return;
-        setTimeout(() => {
-            var _a, _b;
-            if (!isPushedRef.current && keyOpenRef.current) {
-                const input = e.target;
-                const rect = input.getBoundingClientRect();
-                const inputHeight = rect.height;
-                const inputTop = rect.top;
-                const viewportHeight = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height;
-                const isErrorDevice = viewportHeight === initialHeight.current;
-                const currentTop = inputTop + inputHeight + (isErrorDevice ? 0 : gapBottomSpace.current);
-                const currentScrollY = popupContentRef.current.scrollTop;
-                const viewPort = isErrorDevice
-                    ? window.innerHeight * 0.4
-                    : (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.height;
-                if (currentTop >= viewPort) {
-                    const gap = currentTop - viewPort;
-                    const targetScrollY = currentScrollY + gap;
-                    if (!isNaN(targetScrollY)) {
-                        setIsScrolling(true);
-                        scrollTo(popupContentRef.current, targetScrollY, 400);
-                        setTimeout(() => {
-                            setIsScrolling(false);
-                        }, 500);
-                    }
-                }
-            }
-        }, 300);
+        handleFocus(e);
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -5046,14 +4830,10 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const PopupEmpty = showEmpty && (React__default["default"].createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
     const PopupForm = (React__default["default"].createElement(LeadFormProvider, { form: form },
         React__default["default"].createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
-            React__default["default"].createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+            React__default["default"].createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm, isLightBoxA: isLightBoxA, bottomStyle: bottomStyle, popupContentRef: popupContentRef, handlePopupContentScroll: handlePopupContentScroll },
                 React__default["default"].createElement("div", { className: "leadgen-form_inner" },
                     React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit, hasSubmitBtn: Boolean(ButtonSubmit), isSubmitLoading: isSubmitLoading, disabledButtonSubmit: disabledButtonSubmit })))),
-        React__default["default"].createElement("div", { style: {
-                height: `${bottomSpacing}px`,
-                width: '100%',
-                transition: 'height .2s ease',
-            } })));
+        isLightBoxB && React__default["default"].createElement("div", { style: bottomStyle })));
     const PopupOtp = showOtpPhone && (React__default["default"].createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
@@ -5064,7 +4844,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             });
         } }));
     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", { ref: popupContentRef, className: core.clsx('leadgen-content', {
+    const PopupContent = (React__default["default"].createElement("div", { ref: isLightBoxB ? popupContentRef : undefined, className: core.clsx('leadgen-content', {
             'leadgen-content_small': limitFieldsLightBoxB,
         }), onScroll: handlePopupContentScroll },
         !headerInsideFormContainer && PopupHeader,
@@ -5110,7 +4890,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                 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, style: isMobile ? { maxHeight: height } : undefined },
+            }, 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,
@@ -5124,7 +4904,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return React__default["default"].createElement(SideBarLayout, { content: PopupContainer });
     }
     else if (isInline) {
-        return (React__default["default"].createElement(InlineLayout, { action: action, content: isFreebie ? (React__default["default"].createElement(InlineFreebie, { campaign: campaign.freebie[0], locale: locale })) : (PopupContainer), campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: handleDoImpression }));
+        return (React__default["default"].createElement(InlineLayout, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: handleDoImpression }));
     }
     return null;
 };
@@ -5317,11 +5097,10 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, doImpres
     }
     else if (currentLayout.includes('LightBox') ||
         currentLayout.includes('Inline') ||
-        currentLayout.includes('Freebie') ||
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, doImpression: doImpression, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, campaign: campaign, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo, action: action }));
+        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, doImpression: doImpression, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo, action: action }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__default["default"].createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));
@@ -5417,6 +5196,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     var _a, _b;
     const scrollEventHandlerRef = React.useRef();
     const leadStartTimeRef = React.useRef(Date.now());
+    const [, setScrollLocked] = hooks.useScrollLock();
     const { apiUrl } = React.useMemo(() => {
         let apiUrl = apiUrlProp;
         if (apiUrl.includes('localhost')) {
@@ -5432,6 +5212,9 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     const [showEmpty, setShowEmpty] = React.useState(false);
     const [redirectUrl, setRedirectUrl] = React.useState();
     const currentLayout = React.useMemo(() => showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout, [showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout]);
+    const layoutUseOverlay = React.useMemo(() => !!currentLayout &&
+        !currentLayout.includes('Inline') &&
+        !currentLayout.includes('Sidebar'), [currentLayout]);
     React.useEffect(() => {
         if (forceCampaign) {
             setShowCampaign(forceCampaign);
@@ -5451,6 +5234,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         document.body.classList.remove('noscroll');
         setShowCampaign(null);
         setShowThankyou(null);
+        setScrollLocked(false);
         setAction('HIDE');
         onCloseProps === null || onCloseProps === void 0 ? void 0 : onCloseProps();
     };
@@ -5472,36 +5256,41 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                 }
             }
         }
-        yield Promise.all([
-            fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action: 'CLICK',
-                    url: location.href.toLowerCase(),
-                    title_article: document.title,
-                    cookie_id: miscCookieHelper.getCookie('hhg-id') || '',
-                    duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
-                }),
-            }),
-            !showThankyou &&
-                !(params === null || params === void 0 ? void 0 : params.preventTrackingClose) &&
-                trackingCompletionForm({
-                    commonData: {
-                        cookie_id: miscCookieHelper.getCookie('hhg-id') || '',
-                        ga_client_id: miscCookieHelper.getCookie('_ga') || null,
-                        country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN',
-                        status: 'in_progress',
-                        campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
-                        total_fields: listBlockAdded.length,
-                        type: 'close',
+        try {
+            yield Promise.all([
+                fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
                     },
-                    currentLayout,
-                    formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: formatFormData(formRef, formDataObj) }),
+                    body: JSON.stringify({
+                        action: 'CLICK',
+                        url: location.href.toLowerCase(),
+                        title_article: document.title,
+                        cookie_id: miscCookieHelper.getCookie('hhg-id') || '',
+                        duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
+                    }),
                 }),
-        ]);
+                !showThankyou &&
+                    !(params === null || params === void 0 ? void 0 : params.preventTrackingClose) &&
+                    trackingCompletionForm({
+                        commonData: {
+                            cookie_id: miscCookieHelper.getCookie('hhg-id') || '',
+                            ga_client_id: miscCookieHelper.getCookie('_ga') || null,
+                            country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN',
+                            status: 'in_progress',
+                            campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
+                            total_fields: listBlockAdded.length,
+                            type: 'close',
+                        },
+                        currentLayout,
+                        formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: formatFormData(formRef, formDataObj) }),
+                    }),
+            ]);
+        }
+        catch (err) {
+            console.log(err);
+        }
         onCloseBase();
     });
     const onUnmount = (params) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
@@ -5759,6 +5548,9 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
+    React.useEffect(() => {
+        setScrollLocked(layoutUseOverlay);
+    }, [layoutUseOverlay]);
     return (React__default["default"].createElement(LeadGenContext$1.Provider, { value: {
             primaryColor,
             apiUrl,
@@ -5774,10 +5566,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                     React__default["default"].createElement(core.Transition, { mounted: Boolean(((_b = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _b === void 0 ? void 0 : _b.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (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,
-                            !!currentLayout &&
-                                !currentLayout.includes('Inline') &&
-                                !currentLayout.includes('Sidebar') &&
-                                !currentLayout.includes('Freebie') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
+                            layoutUseOverlay && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
                             React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, doImpression: doImpression, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
                     }))))))));
 };