@hhgtech/hhg-components 1.29.409 → 1.29.410

package/build/lead.js

@@ -2,56 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-b7e9e65e.js');
+var tslib_es6 = require('./tslib.es6-005d140e.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-8698489a.js');
+var index = require('./index-64fd0fb3.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-bd784a95.js');
-var translationsContext = require('./translationsContext-dd8a22b4.js');
-var utils$1 = require('./utils-ec4da018.js');
-var index$2 = require('./index-213a9d1a.js');
-var index$3 = require('./index-88d0e6db.js');
-var index$5 = require('./index-ce081f8c.js');
-var index$4 = require('./index-82684087.js');
-require('./index.styles-531266da.js');
+var index$1 = require('./index-56491c3f.js');
+var translationsContext = require('./translationsContext-41e0a315.js');
+var utils$1 = require('./utils-dd6d237d.js');
+var index$2 = require('./index-3daff161.js');
+var index$3 = require('./index-2cec834f.js');
+var index$5 = require('./index-07bc4d6e.js');
+var index$4 = require('./index-dc7e1cd4.js');
+require('./index.styles-ce05c58d.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-444816ce.js');
-var index$9 = require('./index-cafcda2a.js');
-require('./index-69ae1641.js');
-var index$7 = require('./index-e6811a66.js');
-require('./other-c168dfaf.js');
-require('./index-e2ec2c94.js');
-var utils = require('./utils-e4e4d192.js');
+require('./useMantineLocale-df00655b.js');
+var index$9 = require('./index-e5f16815.js');
+require('./index-e9081baa.js');
+var index$7 = require('./index-e148b13e.js');
+require('./other-5a2f90ff.js');
+require('./index-682f2de7.js');
+var utils = require('./utils-a8d8cbfe.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-9f762629.js');
-var index$6 = require('./index-c8aea60d.js');
-var translationsProvider = require('./translationsProvider-1d59bf5a.js');
-var Locale = require('./Locale-ef5a2ef7.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-2f9c0a8b.js');
+var index$6 = require('./index-1ab40e10.js');
+var translationsProvider = require('./translationsProvider-ec28ac86.js');
+var Locale = require('./Locale-54283620.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 react = require('@emotion/react');
-var togetherComponentGlobalContext = require('./utils-4d3bf035.js');
-var index$8 = require('./index-22655c5a.js');
-var useScreenSize = require('./useScreenSize-46632319.js');
+var togetherComponentGlobalContext = require('./utils-49128753.js');
+var index$8 = require('./index-5efdba9a.js');
+var useScreenSize = require('./useScreenSize-e81bca5e.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var index$a = require('./index-a870d7e7.js');
-var InputDate = require('./InputDate-d86c9a58.js');
-var index$b = require('./index-2a03f152.js');
-var Close = require('./Close-85c460fb.js');
+var InputDate = require('./InputDate-b470654c.js');
+var index$a = require('./index-e2521662.js');
+var Close = require('./Close-e056eadd.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-380b57d1.js');
+require('./normalizeLink-c0d4e317.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-0c0d2cf9.js');
+require('./useUniqueId-f7ae3f63.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
@@ -69,11 +68,11 @@ require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-SG.js');
 require('./i18n-values/zh-TW.js');
-require('./index-1dbc433e.js');
+require('./index-069afe44.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-a8b2d7be.js');
+require('./constants-680455fd.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -1024,15 +1023,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TextBlock':
                 return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "text", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'NumberBlock':
                 return (React__default["default"].createElement(index$3.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'EmailBlock':
                 return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
-                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -1047,14 +1046,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name })));
+                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required })));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, "data-is-required": required, popoverProps: popoverProps }, form.getInputProps(value))),
                     React__default["default"].createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
@@ -1072,14 +1071,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
                     isSendMailChimp && (React__default["default"].createElement(index$3.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
+                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name }),
+                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                     React__default["default"].createElement(index$3.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
@@ -1087,7 +1086,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
     })));
@@ -2290,8 +2289,11 @@ const useLeadGenContext = () => {
 };
 
 const ImpressionTrackingWrapper = ({ children, stayDuration = 3, onImpression, dependency = '', }) => {
+    var _a;
+    const boxRef = React.useRef(null);
+    const [percent, setPercent] = React.useState(100);
     const { ref, entry } = hooks.useIntersection({
-        threshold: 1,
+        threshold: percent / 100,
     });
     const [tracked, setTracked] = React.useState(false);
     React.useEffect(() => {
@@ -2312,14 +2314,20 @@ const ImpressionTrackingWrapper = ({ children, stayDuration = 3, onImpression, d
     }, [entry === null || entry === void 0 ? void 0 : entry.isIntersecting, tracked]);
     React.useEffect(() => {
         if (tracked) {
-            onImpression();
             console.log('Impression call API');
+            onImpression();
         }
     }, [tracked]);
     React.useEffect(() => {
         setTracked(false);
     }, [dependency]);
-    return (React__default["default"].createElement(core.Box, { "data-impression": true, ref: ref }, children));
+    React.useEffect(() => {
+        if (boxRef.current.clientHeight > window.innerHeight * 0.8) {
+            setPercent(50);
+        }
+    }, [(_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight]);
+    return (React__default["default"].createElement(core.Box, { "data-impression": true, ref: ref },
+        React__default["default"].createElement("div", { ref: boxRef }, children)));
 };
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -3484,9 +3492,14 @@ const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__
 // newTab: imageBlocks.imageMobile.data.newtab
 // imageMobile: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
-const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
+const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, doImpression, }) => {
     const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
     const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            yield doImpression();
+        }))();
+    }, []);
     React.useEffect(() => {
         if (popupId && imageMobileLoaded && imageDestkopLoaded) {
             document.body.classList.add('noscroll');
@@ -3500,7 +3513,12 @@ const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onCl
     return (React__default["default"].createElement("div", { id: popupId, className: "leadgen lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
         React__default["default"].createElement("div", { className: "le-center-tab-popup" },
             React__default["default"].createElement("div", { style: { position: 'relative' } },
-                React__default["default"].createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                React__default["default"].createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                        e.preventDefault();
+                        onOtherSubmit();
+                        yield doImpression({ type: 'redirects' });
+                        window.open(url, newTab ? 'blank' : '_parent');
+                    }) },
                     index$8.isVideo(imageMobile) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
                         React__default["default"].createElement("source", { src: imageMobile }))) : (React__default["default"].createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
                             aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
@@ -3563,6 +3581,29 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+function useScrollTo() {
+    const scrollTo = React.useCallback((element, to, duration = 500) => {
+        if (!element)
+            return;
+        const start = element.scrollTop;
+        const change = to - start;
+        const startTime = performance.now();
+        const easeInOutQuad = (t) => {
+            return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+        };
+        const animateScroll = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            element.scrollTop = start + change * easeInOutQuad(progress);
+            if (progress < 1) {
+                requestAnimationFrame(animateScroll);
+            }
+        };
+        requestAnimationFrame(animateScroll);
+    }, []);
+    return scrollTo;
+}
+
 const useViewportDimensions = () => {
     const dimensionsRef = React.useRef({ width: 0, height: 0 });
     const [dimensions, setDimensions] = React.useState(() => ({
@@ -3592,6 +3633,50 @@ const useViewportDimensions = () => {
     return React.useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
 };
 
+// Default handling for Safari & Chrome
+function useViewportPushedByKeyboard(threshold = 20) {
+    const ref = React.useRef(null);
+    const [isPushed, setIsPushed] = React.useState(false);
+    React.useEffect(() => {
+        const check = () => {
+            if (!ref.current)
+                return;
+            const rect = ref.current.getBoundingClientRect();
+            const diff = window.innerHeight - rect.bottom;
+            setIsPushed(diff > threshold);
+        };
+        window.addEventListener('resize', check);
+        const id = setInterval(check, 300); // fallback để cập nhật khi resize không đủ
+        return () => {
+            window.removeEventListener('resize', check);
+            clearInterval(id);
+        };
+    }, [threshold]);
+    return { isPushed, bottomRef: ref };
+}
+function useKeyboardOpen(isAndroid = false) {
+    const [keyOpen, setKeyOpen] = React.useState(false);
+    React.useEffect(() => {
+        var _a;
+        const initialHeight = window.innerHeight;
+        const onResize = () => {
+            var _a, _b;
+            const diff = initialHeight - ((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight);
+            if (diff > 150) {
+                console.log('🟡 Keyboard likely opened');
+                setKeyOpen(true);
+            }
+            else {
+                console.log('⚪️ Keyboard likely closed');
+                setKeyOpen(false);
+            }
+        };
+        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', onResize);
+        return () => { var _a; return (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', onResize); };
+    }, [isAndroid]);
+    return keyOpen;
+}
+
 function isMac() {
     return testPlatform(/^Mac/);
 }
@@ -4067,8 +4152,7 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
                     React__default["default"].createElement(index$4.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
 };
 
-const InlineLayout = ({ action, content, inlinePosition, campaignCode, }) => {
-    const { apiUrl } = React.useContext(LeadGenContext$1);
+const InlineLayout = ({ content, inlinePosition, doImpression, }) => {
     const target = React.useMemo(() => {
         if (!inlinePosition)
             return null;
@@ -4175,22 +4259,7 @@ const InlineLayout = ({ action, content, inlinePosition, campaignCode, }) => {
     }, [inlinePosition]);
     if (!inlinePosition || !target)
         return null;
-    return ReactDOM.createPortal(React__default["default"].createElement(ImpressionTrackingWrapper, { onImpression: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-            const gaCookie = miscCookieHelper.getCookie('_ga') || null;
-            fetch(`${apiUrl}api/campaign/${campaignCode}/impression`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action,
-                    url: location.href.toLowerCase(),
-                    title_article: document.title,
-                    cookie_id: miscCookieHelper.getCookie('hhg-id'),
-                    ga_client_id: gaCookie,
-                }),
-            });
-        }) }, content), target);
+    return ReactDOM.createPortal(React__default["default"].createElement(ImpressionTrackingWrapper, { onImpression: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () { return yield doImpression(); }) }, content), target);
 };
 
 const SideBarLayout = ({ content }) => {
@@ -4603,20 +4672,20 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: label, "data-control": "text", "data-lead-control": 'TextBlock', inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
+                        label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
             case 'NumberBlock':
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: label, "data-control": "number", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, "data-control": "email", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4630,21 +4699,21 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
                             React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name }, formPhoneInputWrapper))))));
+                                id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", "data-lead-control": name, locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                    React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = tslib_es6.__rest(_c, ["error"]);
                 return (React__default["default"].createElement(core.Input.Wrapper, { key: index, size: "md", withAsterisk: required, label: label, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(InputDate.InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
+                    React__default["default"].createElement(InputDate.InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, "data-is-required": required, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$a.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$4.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
@@ -4662,7 +4731,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             gap: 8,
                         }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
@@ -4670,10 +4739,10 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         // className="lead-modal__form-control leadgen-form_field"
                         label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
-                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name }),
+                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                     React__default["default"].createElement(index$3.Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
@@ -4707,7 +4776,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = tslib_es6.__rest(_d, ["error"]);
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default["default"].createElement(core.Input.Wrapper, { error: error },
-                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps)))));
+                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps)))));
         }
         return null;
     })));
@@ -4957,7 +5026,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, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
+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 } = useScreenSize.useScreenSize();
@@ -4968,7 +5037,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const isTrackedForm = React.useRef(false);
     const formRef = React.useRef();
     const [lastFormRef, setLastFormRef] = React.useState();
-    const onClose = () => {
+    const onClose = (preventTrackingClose = false) => {
         if (showOtpPhone) {
             setShowOtpPhone(null);
         }
@@ -4978,6 +5047,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                 formActiveTime: formActiveTime.current,
                 formRef: formRef.current,
                 listBlockAdded,
+                preventTrackingClose,
             });
         }
     };
@@ -5020,12 +5090,34 @@ 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 handleDoImpression = React.useCallback((type = 'impression') => doImpression({
+        formValues: form.values,
+        formActiveTime: formActiveTime.current,
+        formRef: formRef.current,
+        listBlockAdded,
+        type,
+    }), [form]);
     if (window.innerWidth < 769 &&
         LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
         console.log('😎 Not show fullscreen, slider on mobile ');
         return null;
     }
     React.useEffect(() => {
+        initialHeight.current = window.innerHeight;
+        (isLightBox || isSlider) && handleDoImpression();
         if (isLightBox || isFullscreen) {
             document.body.classList.add('noscroll');
         }
@@ -5034,6 +5126,18 @@ 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]);
@@ -5061,6 +5165,18 @@ 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) {
@@ -5068,9 +5184,47 @@ 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;
+        // 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);
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -5174,13 +5328,19 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         disabledButtonSubmit,
         (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide,
     ]);
+    const [btnLinkLoading, setbtnLinkLoading] = React.useState(false);
     const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
     const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default["default"].createElement(React__default["default"].Fragment, null, LinkButtonBlock.map((item, index) => {
         var _a, _b, _c;
-        return (React__default["default"].createElement(core.Button, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, onClick: () => {
-                onClose === null || onClose === void 0 ? void 0 : onClose();
+        return (React__default["default"].createElement(core.Button, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, loading: btnLinkLoading, onClick: (e) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                var _d, _e;
+                e.preventDefault();
+                onClose === null || onClose === void 0 ? void 0 : onClose(true);
+                setbtnLinkLoading(true);
+                yield handleDoImpression('redirects');
                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
-            } }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
+                window.open((_d = item === null || item === void 0 ? void 0 : item.data) === null || _d === void 0 ? void 0 : _d.url, ((_e = item === null || item === void 0 ? void 0 : item.data) === null || _e === void 0 ? void 0 : _e.newtab) ? '_blank' : undefined);
+            }) }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
     })));
     const PopupHeader = showHeader && (React__default["default"].createElement("header", { className: core.clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
@@ -5190,7 +5350,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         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("div", { className: "leadgen-form_inner" },
-                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
+                    React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit })))),
+        React__default["default"].createElement("div", { style: {
+                height: `${bottomSpacing}px`,
+                width: '100%',
+                transition: 'height .2s ease',
+            } })));
     const PopupOtp = showOtpPhone && (React__default["default"].createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
@@ -5201,16 +5366,24 @@ 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", { className: core.clsx('leadgen-content', {
+    const PopupContent = (React__default["default"].createElement("div", { ref: popupContentRef, className: core.clsx('leadgen-content', {
             'leadgen-content_small': limitFieldsLightBoxB,
-        }) },
+        }), onScroll: handlePopupContentScroll },
         !headerInsideFormContainer && PopupHeader,
         !onlyHeader && (React__default["default"].createElement("div", { className: "leadgen-inner" },
             PopupThankYou,
             !showThankyou && (React__default["default"].createElement(React__default["default"].Fragment, null,
                 PopupOtp,
                 PopupEmpty,
-                !(showOtpPhone || showEmpty) && PopupForm))))));
+                !(showOtpPhone || showEmpty) && PopupForm)))),
+        React__default["default"].createElement("div", { ref: bottomRef, style: {
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                height: 1,
+                width: '100%',
+                pointerEvents: 'none',
+            } })));
     const styleOverlay = React.useMemo(() => {
         let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
         if (isMobile && imageOverlayMobile) {
@@ -5233,7 +5406,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (isNewUI ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement(index$b.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+    const PopupContainer = isDrawer ? (isNewUI ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement(index$a.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
         PopupWrapper,
         React__default["default"].createElement("div", { style: {
                 position: 'absolute',
@@ -5253,7 +5426,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: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition }));
+        return (React__default["default"].createElement(InlineLayout, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: handleDoImpression }));
     }
     return null;
 };
@@ -5346,26 +5519,9 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, doImpression, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = React.useContext(LeadGenContext$1);
-    React.useEffect(() => {
-        const gaCookie = miscCookieHelper.getCookie('_ga') || null;
-        !currentLayout.includes('Inline') &&
-            fetch(`${apiUrl}api/campaign/${code}/impression`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action,
-                    url: location.href.toLowerCase(),
-                    title_article: document.title,
-                    cookie_id: miscCookieHelper.getCookie('hhg-id'),
-                    ga_client_id: gaCookie,
-                }),
-            });
-    }, []);
     const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
     const { currentLayout } = extra_fields;
     const imageBlocks = extra_fields.imageBlocks
@@ -5453,7 +5609,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
     if (currentLayout === 'CenterTab') {
-        return (React__default["default"].createElement(CenterTabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, imageMobile: image, imageDestkop: image_desktop, onClose: onClose, onOtherSubmit: onOtherSubmit }));
+        return (React__default["default"].createElement(CenterTabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, imageMobile: image, imageDestkop: image_desktop, onClose: onClose, onOtherSubmit: onOtherSubmit, doImpression: doImpression }));
     }
     else if (currentLayout === 'Tab') {
         return (React__default["default"].createElement(TabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, image: image, onClose: onClose, onOtherSubmit: onOtherSubmit }));
@@ -5466,7 +5622,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, 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 }));
+        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 }));
@@ -5475,11 +5631,11 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
 };
 
 const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
-const formatFormData = (currentForm, formData) => {
+const formatFormData = (currentForm, formData = []) => {
     return Object.keys(formData)
         .filter((key) => !!formData[key])
         .map((name) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const value = String(formData[name]);
         const control = ((_a = currentForm
             .querySelector(`*[name="${name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
@@ -5491,6 +5647,11 @@ const formatFormData = (currentForm, formData) => {
             ((_d = currentForm
                 .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-lead-control')) ||
             'text';
+        const isRequired = Boolean(((_e = currentForm
+            .querySelector(`*[name="${name}"][data-is-required]`)) === null || _e === void 0 ? void 0 : _e.getAttribute('data-is-required')) ||
+            ((_f = currentForm
+                .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _f === void 0 ? void 0 : _f.getAttribute('data-is-required')) ||
+            'text');
         const formatedValue = control === 'tel'
             ? window.intlTelInputUtils
                 .formatNumber(String(value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
@@ -5503,6 +5664,7 @@ const formatFormData = (currentForm, formData) => {
             value: formatedValue,
             control,
             leadControl,
+            isRequired,
             // is_sent_mailchimp: currentForm.querySelector(
             //   `div[data-name="${i.name}-mailchimp"]`,
             // )
@@ -5527,12 +5689,13 @@ const formatTrackingData = (params) => {
                 return compareVal == control.key;
             });
             if (findIndex > -1) {
-                const curLeadControl = listBlockAdded[findIndex].name;
-                listFieldHasValue.push(listBlockAdded[findIndex].data.value);
+                const curInfo = listBlockAdded[findIndex];
+                listFieldHasValue.push(curInfo.data.value);
                 return {
                     field_name: control.key,
-                    component_type: curLeadControl,
+                    component_type: curInfo.name,
                     value: control.value,
+                    is_required: curInfo.data.required,
                 };
             }
         })
@@ -5542,6 +5705,7 @@ const formatTrackingData = (params) => {
                 return {
                     field_name: item.data.value,
                     component_type: item.name,
+                    is_required: item.data.required,
                 };
             }
         })
@@ -5592,7 +5756,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     };
     const onClose = (params) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _c, _d;
-        const { formRef, listBlockAdded: listBlockAddedProp = [], formValues: formDataObj, } = params || {};
+        const { formRef, listBlockAdded = [], formValues: formDataObj, } = params || {};
         if (!showCampaign)
             return;
         LeadLog(`👋👋👋 CLOSE POPUP ${showCampaign.code} 👋👋👋`);
@@ -5608,7 +5772,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                 }
             }
         }
-        const listBlockAdded = listBlockAddedProp.filter((i) => i.name !== 'LinkButtonBlock');
         yield Promise.all([
             fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
                 method: 'POST',
@@ -5619,20 +5782,21 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                     action: 'CLICK',
                     url: location.href.toLowerCase(),
                     title_article: document.title,
-                    cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                    cookie_id: miscCookieHelper.getCookie('hhg-id') || '',
                     duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
                 }),
             }),
             !showThankyou &&
-                listBlockAdded.length > 0 &&
+                !params.preventTrackingClose &&
                 trackingCompletionForm({
                     commonData: {
-                        cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                        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) }),
@@ -5641,21 +5805,16 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         onCloseBase();
     });
     const onUnmount = (params) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        const { formRef, listBlockAdded: listBlockAddedProp = [], formValues: formDataObj, } = params || {};
-        const listBlockAdded = listBlockAddedProp.filter((i) => i.name !== 'LinkButtonBlock');
-        if (listBlockAdded.length === 0)
-            return;
-        if ([LEADGEN_LAYOUT.InlineA, LEADGEN_LAYOUT.InlineB].includes(currentLayout) &&
-            Object.keys(formDataObj).length === 0)
-            return;
+        const { formRef, listBlockAdded, formValues: formDataObj } = params || {};
         const data = formatTrackingData({
             commonData: {
-                cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                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) }),
@@ -5663,6 +5822,29 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
         navigator.sendBeacon(`${apiUrl}api/collection/tracking-completion`, blob);
     });
+    const doImpression = (params) => {
+        const { listBlockAdded = [] } = params || {};
+        const data = formatTrackingData({
+            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: (params === null || params === void 0 ? void 0 : params.type) || 'impression',
+            },
+            currentLayout,
+            formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: [] }),
+        });
+        return fetch(`${apiUrl}api/collection/tracking-completion`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+    };
     React.useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
             return;
@@ -5702,11 +5884,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         });
     }, []);
     const trackingCompletionForm = React.useCallback((params) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        const { currentLayout, formParams } = params || {};
-        const { formValues } = formParams;
-        if ([LEADGEN_LAYOUT.InlineA, LEADGEN_LAYOUT.InlineB].includes(currentLayout) &&
-            Object.keys(formValues).length === 0)
-            return;
         const data = formatTrackingData(params);
         return fetch(`${apiUrl}api/collection/tracking-completion`, {
             method: 'POST',
@@ -5718,8 +5895,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     }), [(_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.currentLayout]);
     const onSubmit = (params, categoryLevel, categoryData) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        const { formRef, listBlockAdded: listBlockAddedProp = [], formValues: formDataObj, } = params || {};
-        const listBlockAdded = listBlockAddedProp.filter((i) => i.name !== 'LinkButtonBlock');
+        const { formRef, listBlockAdded = [], formValues: formDataObj, } = params || {};
         if (!formDataObj || Object.values(formDataObj).every((v) => !Boolean(v))) {
             setShowEmpty(true);
             return;
@@ -5738,7 +5914,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             yield require('intl-tel-input/build/js/utils');
         }
         const commonData = {
-            cookie_id: miscCookieHelper.getCookie('hhg-id'),
+            cookie_id: miscCookieHelper.getCookie('hhg-id') || '',
             ga_client_id: gaCookie,
         };
         const data = Object.assign({ url: location.href.toLowerCase(), title_article: document.title, meta: [...formData, ...extraPayloadValues] }, commonData);
@@ -5769,7 +5945,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             }),
             listBlockAdded.length > 0 &&
                 trackingCompletionForm({
-                    commonData: Object.assign(Object.assign({}, commonData), { country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN', status: 'complete', campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id, total_fields: listBlockAdded.length }),
+                    commonData: Object.assign(Object.assign({}, commonData), { country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN', status: 'complete', campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id, total_fields: listBlockAdded.length, type: 'submit_form' }),
                     currentLayout,
                     formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: formatedFormData }),
                 }),
@@ -5872,7 +6048,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                         !!currentLayout &&
                             !currentLayout.includes('Inline') &&
                             !currentLayout.includes('Sidebar') && (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, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
+                        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 })))));
                 })))))));
 };
 const LeadGen = _LeadGen;