@hhgtech/hhg-components 1.29.426 → 1.29.428-beta-1

package/build/esm/lead.js

@@ -1,57 +1,57 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-ca7ad81a.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-7b2139eb.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
 import { createStyles, Box, useMantineTheme, Button as Button$1, Autocomplete, Input as Input$1, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, Flex, clsx, TextInput, NumberInput as NumberInput$1, rem, Portal, Transition, Overlay } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
 import dayjs from 'dayjs';
-import { B as BEARER_TOKEN_COOKIE } from './index-cdb792e1.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-49281ab1.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-4d014b3b.js';
-import { T as TranslationsContext } from './translationsContext-5c3203aa.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-6bddb1bf.js';
-import { T as Text } from './index-60042364.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-caa5e1d0.js';
-import { D as DatePicker } from './index-ddcc418c.js';
-import { B as Button } from './index-0c17e028.js';
-import './index.styles-90350fcf.js';
-import { useIntersection } from '@mantine/hooks';
-import './index-74e79996.js';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-594e9ab1.js';
-import './index-2e5cbf2e.js';
-import { M as MAPPED_LOCALE } from './utils-c53fcf83.js';
+import { u as useTranslations } from './index-afe6085f.js';
+import { T as TranslationsContext } from './translationsContext-e45c090d.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-1e0330c1.js';
+import { T as Text } from './index-8e31f657.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-89cf8199.js';
+import { D as DatePicker } from './index-e545a30c.js';
+import { B as Button } from './index-c86117e4.js';
+import './index.styles-a80ccc56.js';
+import { useIntersection, useScrollLock } from '@mantine/hooks';
+import './index-07809b8a.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './text-fe36a7f8.js';
+import './index-d55c2070.js';
+import { M as MAPPED_LOCALE } from './utils-cfb9b5cd.js';
 import { DateInput } from '@mantine/dates';
-import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-20c22407.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-bf0c286c.js';
-import './index-d21e5ac4.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-144e699e.js';
-import { H as Heading$1 } from './index-d9b10070.js';
-import { t as translationsMap$1 } from './translationsProvider-9a10fdda.js';
-import { L as LOCALE } from './Locale-1adbd058.js';
+import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-8a1c0f96.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-6524dc07.js';
+import './index-99d47c00.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-8ba5c917.js';
+import { H as Heading$1 } from './index-0c235141.js';
+import { t as translationsMap$1 } from './translationsProvider-e510e7ff.js';
+import { L as LOCALE } from './Locale-5be8188a.js';
 import { v1 } from 'uuid';
 import { domainLocales } from './constantsDomainLocales.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { u as useTextStyles, C as ChoiceField, T as TextField, E as ErrorIcon } from './index-2db6f2db.js';
-import { T as TogetherComponentGlobalContext } from './utils-ef2933c6.js';
-import { M as MantineProvider } from './index-3d9af6c1.js';
-import { i as isVideo } from './index-9ddf68e2.js';
-import { u as useScreenSize } from './index-6e6adf66.js';
+import { u as useTextStyles, C as ChoiceField, T as TextField, E as ErrorIcon } from './index-96e84d05.js';
+import { T as TogetherComponentGlobalContext } from './utils-8d13ecca.js';
+import { M as MantineProvider } from './index-3831fb94.js';
+import { i as isVideo } from './index-453d72c1.js';
+import { u as useScreenSize } from './index-419ca2b8.js';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { ChevronDown } from '@hhgtech/icons/arrow';
 import { MapPin } from '@hhgtech/icons/core';
-import { I as InputDate } from './InputDate-5a457f47.js';
-import { D as DrawerComponent } from './index-304b4db7.js';
-import { C as Close } from './Close-494bdd15.js';
+import { I as InputDate } from './InputDate-036d702a.js';
+import { D as DrawerComponent } from './index-c5df37f6.js';
+import { C as Close } from './Close-1b4b3f6e.js';
 import './constantsIsProduction.js';
-import './normalizeLink-351b5950.js';
+import './normalizeLink-dbd854ae.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-91e55ec9.js';
+import './useUniqueId-582a9b8b.js';
 import './constantsSite.js';
-import './shared-9f63c003.js';
+import './shared-08588d98.js';
 import '@mantine/notifications';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
@@ -68,11 +68,11 @@ import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-SG.js';
 import './i18n-values/zh-TW.js';
 import '@emotion/react';
-import './index-5a149ebd.js';
+import './index-7ef4b69d.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-3ba45268.js';
+import './constants-7dd2be5f.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -3268,6 +3268,26 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__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 = useCallback((element, to, duration = 500) => {
         if (!element)
@@ -3291,35 +3311,6 @@ function useScrollTo() {
     return scrollTo;
 }
 
-const useViewportDimensions = () => {
-    const dimensionsRef = useRef({ width: 0, height: 0 });
-    const [dimensions, setDimensions] = useState(() => ({
-        width: window.screen.availWidth,
-        height: window.screen.availHeight,
-    }));
-    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 useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
-};
-
 // Default handling for Safari & Chrome
 function useViewportPushedByKeyboard(threshold = 20) {
     const ref = useRef(null);
@@ -3364,25 +3355,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 = useRef(null);
+    const { isPushed, bottomRef } = useViewportPushedByKeyboard();
+    const [bottomSpacing, setBottomSpacing] = useState(0);
+    const [isScrolling, setIsScrolling] = useState(false);
+    const keyOpen = useKeyboardOpen();
+    const isPushedRef = useRef(isPushed);
+    const keyOpenRef = useRef(keyOpen);
+    const bottomSpacingRef = useRef(bottomSpacing);
+    const isScrollingRef = useRef(false);
+    const gapBottomSpace = useRef(40);
+    const initialHeight = 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);
+    };
+    useEffect(() => {
+        initialHeight.current = window.innerHeight;
+    }, []);
+    useEffect(() => {
+        isPushedRef.current = isPushed;
+    }, [isPushed]);
+    useEffect(() => {
+        keyOpenRef.current = keyOpen;
+    }, [keyOpen]);
+    useEffect(() => {
+        bottomSpacingRef.current = bottomSpacing;
+    }, [bottomSpacing]);
+    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]);
+    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) => {
@@ -3639,6 +3707,35 @@ function isInput(target) {
         (target instanceof HTMLElement && target.isContentEditable));
 }
 
+const useViewportDimensions = () => {
+    const dimensionsRef = useRef({ width: 0, height: 0 });
+    const [dimensions, setDimensions] = useState(() => ({
+        width: window.screen.availWidth,
+        height: window.screen.availHeight,
+    }));
+    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 useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
+};
+
 const StyledLeadGenLightBoxBFooter = styled.div `
   padding-top: calc(var(--spacing-y, 20px) * 8 / 20);
   padding-inline: var(--spacing-x, 20px);
@@ -4269,7 +4366,7 @@ const StyledFormContainer = styled.div `
  *
  */
 const FormContainer = (_a) => {
-    var { iconComponent, title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = __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 = __rest(_a, ["iconComponent", "title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer", "isLightBoxA", "bottomStyle", "popupContentRef", "handlePopupContentScroll"]);
     const HeaderContent = (React__default.createElement("div", { className: "leadgen-form_header" },
         iconComponent,
         React__default.createElement(Text, { as: "h2", size: 'h4', variant: "primary", weight: 'semiBold', className: "leadgen-title", "data-align": titleAlign }, title),
@@ -4279,13 +4376,13 @@ const FormContainer = (_a) => {
     }
     return (React__default.createElement(StyledFormContainer, Object.assign({ className: clsx(className, 'leadgen-form_container'), style: style }, restProps),
         React__default.createElement("div", { className: "leadgen-form_wrapper" },
-            !!header && (React__default.createElement("div", { className: "leadgen-form_scrollable" },
+            header ? (React__default.createElement("div", { className: "leadgen-form_scrollable", ref: popupContentRef, onScroll: handlePopupContentScroll },
                 header,
                 HeaderContent,
-                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
-            !header && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "leadgen-form_body" }, children),
+                isLightBoxA && React__default.createElement("div", { style: bottomStyle }))) : (React__default.createElement(React__default.Fragment, null,
                 HeaderContent,
-                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
+                React__default.createElement("div", { className: "leadgen-form_body", ref: popupContentRef, onScroll: handlePopupContentScroll }, children))),
             React__default.createElement("div", { className: "leadgen-form_footer" }, footer))));
 };
 
@@ -4481,7 +4578,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             });
         }
     };
-    const { height } = useViewportDimensions();
     // usePreventScroll()
     const formActiveTime = useRef(0);
     const textBlocks = JSON.parse(extraFields.textBlocks);
@@ -4520,19 +4616,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         userInfo,
         format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
-    const popupContentRef = useRef(null);
-    const isIos = isIOS();
-    const keyOpen = useKeyboardOpen();
-    const { isPushed, bottomRef } = useViewportPushedByKeyboard();
-    const [bottomSpacing, setBottomSpacing] = useState(0);
-    const bottomSpacingRef = useRef(bottomSpacing);
-    const isPushedRef = useRef(isPushed);
-    const keyOpenRef = useRef(keyOpen);
-    const [isScrolling, setIsScrolling] = useState(false);
-    const isScrollingRef = useRef(false);
-    const gapBottomSpace = useRef(40);
-    const initialHeight = useRef(0);
-    const scrollTo = useScrollTo();
+    const { bottomRef, bottomStyle, handlePopupContentScroll, handleFocus, popupContentRef, } = useFocusFieldOnDevice(isMobile, isLightBoxB || isLightBoxA, isLightBoxA ? 85 : 0);
     const handleDoImpression = useCallback((type = 'impression') => doImpression({
         formValues: form.values,
         formActiveTime: formActiveTime.current,
@@ -4546,7 +4630,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return null;
     }
     useEffect(() => {
-        initialHeight.current = window.innerHeight;
         (isLightBox || isSlider) && handleDoImpression();
         if (isLightBox || isFullscreen) {
             document.body.classList.add('noscroll');
@@ -4556,18 +4639,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         clearCacheUsedEmailOrPhone();
     }, []);
-    useEffect(() => {
-        isPushedRef.current = isPushed;
-    }, [isPushed]);
-    useEffect(() => {
-        keyOpenRef.current = keyOpen;
-    }, [keyOpen]);
-    useEffect(() => {
-        bottomSpacingRef.current = bottomSpacing;
-    }, [bottomSpacing]);
-    useEffect(() => {
-        isScrollingRef.current = isScrolling;
-    }, [isScrolling]);
     useEffect(() => {
         formRef.current && setLastFormRef(formRef.current);
     }, [formRef.current]);
@@ -4595,18 +4666,6 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         return () => clearInterval(intervalId);
     }, [showThankyou]);
-    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 = useMemo(() => leadGenFieldRequired(listBlockAdded), listBlockAdded);
     const disabledButtonSubmit = useMemo(() => {
         if (listBlockAddedRequired.length) {
@@ -4614,47 +4673,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();
@@ -4778,14 +4801,10 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
     const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
         React__default.createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
-            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+            React__default.createElement(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.createElement("div", { className: "leadgen-form_inner" },
                     React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit, hasSubmitBtn: Boolean(ButtonSubmit), isSubmitLoading: isSubmitLoading, disabledButtonSubmit: disabledButtonSubmit })))),
-        React__default.createElement("div", { style: {
-                height: `${bottomSpacing}px`,
-                width: '100%',
-                transition: 'height .2s ease',
-            } })));
+        isLightBoxB && React__default.createElement("div", { style: bottomStyle })));
     const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
@@ -4796,7 +4815,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             });
         } }));
     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 PopupContent = (React__default.createElement("div", { ref: popupContentRef, className: clsx('leadgen-content', {
+    const PopupContent = (React__default.createElement("div", { ref: isLightBoxB ? popupContentRef : undefined, className: clsx('leadgen-content', {
             'leadgen-content_small': limitFieldsLightBoxB,
         }), onScroll: handlePopupContentScroll },
         !headerInsideFormContainer && PopupHeader,
@@ -4842,7 +4861,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                 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, style: isMobile ? { maxHeight: height } : undefined },
+            }, 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,
@@ -5148,6 +5167,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     var _a, _b;
     const scrollEventHandlerRef = useRef();
     const leadStartTimeRef = useRef(Date.now());
+    const [, setScrollLocked] = useScrollLock();
     const { apiUrl } = useMemo(() => {
         let apiUrl = apiUrlProp;
         if (apiUrl.includes('localhost')) {
@@ -5163,6 +5183,9 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     const [showEmpty, setShowEmpty] = useState(false);
     const [redirectUrl, setRedirectUrl] = useState();
     const currentLayout = 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 = useMemo(() => !!currentLayout &&
+        !currentLayout.includes('Inline') &&
+        !currentLayout.includes('Sidebar'), [currentLayout]);
     useEffect(() => {
         if (forceCampaign) {
             setShowCampaign(forceCampaign);
@@ -5182,6 +5205,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();
     };
@@ -5203,36 +5227,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: 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: getCookie('hhg-id') || '',
-                        ga_client_id: getCookie('_ga') || null,
-                        country_code: locale ? 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: 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: getCookie('hhg-id') || '',
+                            ga_client_id: getCookie('_ga') || null,
+                            country_code: locale ? 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) => __awaiter(void 0, void 0, void 0, function* () {
@@ -5490,6 +5519,9 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
+    useEffect(() => {
+        setScrollLocked(layoutUseOverlay);
+    }, [layoutUseOverlay]);
     return (React__default.createElement(LeadGenContext$1.Provider, { value: {
             primaryColor,
             apiUrl,
@@ -5505,9 +5537,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                     React__default.createElement(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.createElement(Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default.createElement(React__default.Fragment, null,
-                            !!currentLayout &&
-                                !currentLayout.includes('Inline') &&
-                                !currentLayout.includes('Sidebar') && (React__default.createElement(Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
+                            layoutUseOverlay && (React__default.createElement(Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
                             React__default.createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, doImpression: doImpression, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
                     }))))))));
 };

package/build/esm/{logoIcon-d9d4bc06.js → logoIcon-f8041ffb.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-d21e5ac4.js';
-import { I as ImageWrap } from './index-6e6adf66.js';
+import { C as CommonGAssets } from './index-99d47c00.js';
+import { I as ImageWrap } from './index-419ca2b8.js';
 
 const _LogoIcon = ({ type, width, height }) => {
     const data = useMemo(() => {