@hhgtech/hhg-components 1.29.396 → 1.29.397-beta-2

package/build/esm/lead.js

@@ -1,52 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-920542f4.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-1ede97d6.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
-import { createStyles, Box, Button as Button$1, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
-import dayjs from 'dayjs';
+import { createStyles, Box, Button as Button$1, Input as Input$1, Autocomplete, clsx, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
-import { B as BEARER_TOKEN_COOKIE } from './index-d34c5e3d.js';
+import dayjs from 'dayjs';
+import { B as BEARER_TOKEN_COOKIE } from './index-49189fec.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-a9f213a6.js';
-import { T as TranslationsContext } from './translationsContext-8059f988.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-2369b642.js';
-import { T as Text } from './index-ba156e99.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-f7ac6a0a.js';
-import { D as DatePicker } from './index-f5c1e2c9.js';
-import { B as Button } from './index-3851a867.js';
-import './index.styles-d2bdab8c.js';
+import { u as useTranslations } from './index-674ddb28.js';
+import { T as TranslationsContext } from './translationsContext-2d991fbb.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-2a5bbdbd.js';
+import { T as Text } from './index-dc2dc9a4.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-1f97417f.js';
+import { D as DatePicker } from './index-bc1d75a3.js';
+import { B as Button } from './index-ae0b4237.js';
+import './index.styles-a0ab78ac.js';
 import { useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-a938a312.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-ed2b3f2f.js';
-import './index-16a5ad99.js';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-3076c7d5.js';
-import './other-9f3029ec.js';
-import './index-3b1aa0b8.js';
-import { M as MAPPED_LOCALE } from './utils-b033a48d.js';
+import './useMantineLocale-743b796e.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-d69b0732.js';
+import './index-dd182a34.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-40937087.js';
+import './other-98acd3e1.js';
+import './index-2d9d4031.js';
+import { M as MAPPED_LOCALE } from './utils-314e4bcc.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-b70b7ce0.js';
-import { H as Heading$1 } from './index-d39d14e2.js';
-import { t as translationsMap$1 } from './translationsProvider-81221859.js';
-import { L as LOCALE } from './Locale-ce7c9574.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-b1423f5f.js';
+import { H as Heading$1 } from './index-068fded1.js';
+import { t as translationsMap$1 } from './translationsProvider-3f9be49a.js';
+import { L as LOCALE } from './Locale-36f525a4.js';
 import { v1 } from 'uuid';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { css } from '@emotion/react';
-import { T as TogetherComponentGlobalContext } from './utils-58628779.js';
-import { i as isVideo } from './index-2e9997c5.js';
-import { u as useScreenSize } from './useScreenSize-fb33da04.js';
+import { T as TogetherComponentGlobalContext } from './utils-98978433.js';
+import { i as isVideo } from './index-00ea7e85.js';
+import { u as useScreenSize } from './useScreenSize-1c0d4539.js';
+import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-bf6ed587.js';
-import { I as InputDate } from './InputDate-95582cb9.js';
-import { D as DrawerComponent } from './index-b951a466.js';
-import { C as Close } from './Close-c214dfa7.js';
+import { B as Button$2 } from './index-63f75702.js';
+import { I as InputDate } from './InputDate-97a34326.js';
+import { D as DrawerComponent } from './index-41283831.js';
+import { C as Close } from './Close-e5b1fae1.js';
 import './constantsIsProduction.js';
-import './normalizeLink-2e955111.js';
+import './normalizeLink-d7e0adc5.js';
 import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-c8370483.js';
+import './useUniqueId-2e6f52ac.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -63,11 +64,11 @@ import './i18n-values/tl-PH.js';
 import './i18n-values/vi-VN.js';
 import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-TW.js';
-import './index-6f28b547.js';
+import './index-bec699b5.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-ca7208a4.js';
+import './constants-7dde25d9.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -162,20 +163,21 @@ const LEADGEN_ACTIONS = {
     SCROLL: 'SCROLL',
     TIME: 'TIME',
 };
-const LEADGEN_LAYOUT = {
-    LightBoxA: 'LightBoxA',
-    LightBoxB: 'LightBoxB',
-    SkinA: 'SkinA',
-    SkinB: 'SkinB',
-    Floating: 'Floating',
-    Tab: 'Tab',
-    InlineA: 'InlineA',
-    InlineB: 'InlineB',
-    CenterTab: 'CenterTab',
-    Sidebar: 'Sidebar',
-    Fullscreen: 'Fullscreen',
-    Slider: 'Slider',
-};
+var LEADGEN_LAYOUT;
+(function (LEADGEN_LAYOUT) {
+    LEADGEN_LAYOUT["LightBoxA"] = "LightBoxA";
+    LEADGEN_LAYOUT["LightBoxB"] = "LightBoxB";
+    LEADGEN_LAYOUT["SkinA"] = "SkinA";
+    LEADGEN_LAYOUT["SkinB"] = "SkinB";
+    LEADGEN_LAYOUT["Floating"] = "Floating";
+    LEADGEN_LAYOUT["Tab"] = "Tab";
+    LEADGEN_LAYOUT["InlineA"] = "InlineA";
+    LEADGEN_LAYOUT["InlineB"] = "InlineB";
+    LEADGEN_LAYOUT["CenterTab"] = "CenterTab";
+    LEADGEN_LAYOUT["Sidebar"] = "Sidebar";
+    LEADGEN_LAYOUT["Fullscreen"] = "Fullscreen";
+    LEADGEN_LAYOUT["Slider"] = "Slider";
+})(LEADGEN_LAYOUT || (LEADGEN_LAYOUT = {}));
 const LEADGEN_BLOCK = {
     TextBlock: 'TextBlock',
     NumberBlock: 'NumberBlock',
@@ -359,6 +361,18 @@ const formatCampaignDetail = (campaign) => {
     }
 };
 
+const formatLeadGenFormValue = (values = {}, blocks) => {
+    const newValues = {};
+    for (const block of blocks) {
+        const { data } = block || {};
+        const { value: fieldName } = data || {};
+        if (fieldName in values) {
+            newValues[fieldName] = values[fieldName];
+        }
+    }
+    return newValues;
+};
+
 class Store {
     constructor() {
         this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
@@ -512,9 +526,9 @@ const getCampaignByCode = (campaign_code) => {
         method: METHOD.GET,
     });
 };
-const getSubscriptionBoxInfo = ({ category, site, }) => {
+const getSubscriptionBoxInfo = ({ category, site, slug, }) => {
     return leadApi.call({
-        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}`,
+        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}&slug=${slug}`,
         method: METHOD.GET,
     });
 };
@@ -661,7 +675,7 @@ const clearCacheUsedEmailOrPhone = () => {
 const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = createFormContext();
 const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
     const { t } = useTranslations();
-    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const initialValues = useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     useEffect(() => {
         if (!window.intlTelInputUtils) {
             require('intl-tel-input/build/js/utils');
@@ -977,15 +991,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TextBlock':
                 return (React__default.createElement(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", name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "text", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'NumberBlock':
                 return (React__default.createElement(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", name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "number", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'EmailBlock':
                 return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
-                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
+                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -1000,14 +1014,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name })));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default.createElement(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.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -1025,14 +1039,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
             case 'RadioBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default.createElement(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.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    React__default.createElement(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.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
             case 'DropdownBlock':
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
+                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name }),
                     React__default.createElement(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,
@@ -1040,7 +1054,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__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 }))));
         }
         return null;
     })));
@@ -1073,7 +1087,9 @@ const Heading = (_a) => {
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
     var _a;
     const { primaryColor } = useContext(LeadGenContext$1);
-    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = useContext(LeadGenComponentContext);
+    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, 
+    // formRef,
+    setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = useContext(LeadGenComponentContext);
     const { classes, cx } = useStyles$1(undefined, {
         name: 'LeadGen__FormComponent',
         styles,
@@ -1134,7 +1150,7 @@ const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps,
                         var _a;
                         const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
                         if (respMessage === 'This phone number was verified') {
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
                             return;
                         }
                         setShowOtpPhone(newShowOtpPhone);
@@ -1144,7 +1160,7 @@ const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps,
                     });
                     return;
                 }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
             })(e);
         }, 100);
     };
@@ -1314,10 +1330,13 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
 };
 const OtpBlock$1 = (_a) => {
     var rest = __rest(_a, []);
-    const { showOtpPhone, setShowOtpPhone, onSubmit, formRef, leadFormConfig: { form }, } = useContext(LeadGenComponentContext);
+    const { showOtpPhone, setShowOtpPhone, onSubmit,
+    // formRef,
+    // leadFormConfig: { form },
+     } = useContext(LeadGenComponentContext);
     return showOtpPhone ? (React__default.createElement(OtpBlockComponent, Object.assign({ otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
         } }, rest))) : null;
 };
 
@@ -2066,6 +2085,7 @@ const LeadGenContextProvider = (props) => {
             Service.getSubscriptionBoxInfo({
                 category: categoryId,
                 site: site_domain,
+                slug: location === null || location === void 0 ? void 0 : location.pathname,
             }).then((res) => {
                 const { _data } = res || {};
                 const { item, campaign_code } = _data || {};
@@ -2119,7 +2139,7 @@ const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
     var _a;
     const { t } = useTranslations();
-    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const initialValues = useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     const LEAD_LOCALE = LEAD_LOCALE_DATA[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
         LEAD_LOCALE_DATA['vi-VN'];
     const validateObj = useMemo(() => {
@@ -2281,7 +2301,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         }, {});
     }, [listBlockAdded.map((b) => b.name).join(','), format]);
     const form = useLeadForm({
-        validateInputOnChange: true,
+        validateInputOnChange: false,
         validateInputOnBlur: true,
         clearInputErrorOnChange: true,
         validate: validateObj,
@@ -2354,15 +2374,14 @@ const StyledLeadGenSubscriptionBoxBody = styled.div `
   }
 `;
 const StyledLeadGenSubscriptionBoxHeaderImage = styled.div `
-  margin-top: 3px;
-  margin-right: 20px;
-  width: 44px;
-  height: 44px;
+  margin-left: 24px;
+  width: 68px;
+  height: 68px;
 
   img {
     width: 100%;
     height: 100%;
-    object-fix: contain;
+    object-fit: contain;
     onject-position: center;
   }
 
@@ -2379,22 +2398,21 @@ const StyledLeadGenSubscriptionBoxHeader = styled.div `
     flex: 1;
     min-width: 0;
     color: ${theme.colors.gray900};
-    font-size: 16px;
+    font-size: 17px;
     font-weight: 400;
     line-height: 1.4;
     letter-spacing: -0.4px;
   }
-
-  ${MediaQueries.mbUp} {
-    .leadgen-title {
-      font-size: 18px;
-      letter-spacing: -0.8px;
-    }
-  }
 `;
 const StyledLeadGenSubscriptionBox = styled.div `
   padding: 16px;
   border: 1px solid ${theme.colors.neutral100};
+  background: linear-gradient(
+    180.71deg,
+    #7bc2ff -18.54%,
+    #e3f2ff 17.12%,
+    #ffffff 99.25%
+  );
   border-radius: 12px;
   margin-inline: auto;
   .leadgen-form_inputs {
@@ -2428,6 +2446,7 @@ const StyledLeadGenSubscriptionBox = styled.div `
         margin-left: 8px;
         width: auto;
         min-height: 56px;
+        font-size: 16px;
       }
     }
   }
@@ -2467,16 +2486,64 @@ const PhoneInput = forwardRef((props, ref) => {
             React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
 });
 
-const formatLeadGenFormValue = (values, blocks) => {
-    const newValues = {};
-    for (const block of blocks) {
-        const { data } = block || {};
-        const { value: fieldName } = data || {};
-        if (fieldName in values) {
-            newValues[fieldName] = values[fieldName];
+const NoData = ({ className, style }) => {
+    return (React__default.createElement("svg", { width: "64", height: "55", viewBox: "0 0 64 55", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
+        React__default.createElement("path", { d: "M32.6226 54.0001C46.2852 54.0001 57.3652 43.0033 57.3652 29.4239C57.3652 15.8446 46.2852 4.84778 32.6226 4.84778C18.9599 4.84778 7.87988 15.8446 7.87988 29.4239C7.87988 43.0033 18.9599 54.0001 32.6226 54.0001Z", fill: "#E6EAF5" }),
+        React__default.createElement("path", { d: "M51.5751 26.2165V41.2537C51.5751 44.3778 49.0342 46.9187 45.8684 46.9187H19.4596C16.3355 46.9187 13.7946 44.4195 13.7529 41.2954C13.7529 41.2537 13.7529 41.2537 13.7529 41.2121V26.2165C13.7529 26.1748 13.7529 26.1748 13.7529 26.1332C13.7529 26.0498 13.7529 25.9665 13.7946 25.8832C13.8362 25.7583 13.8779 25.675 13.9195 25.55L21.0008 12.0123C21.2507 11.4708 21.7922 11.1792 22.3754 11.1792H42.911C43.4941 11.1792 43.994 11.4708 44.2856 12.0123L51.3668 25.55C51.4085 25.6333 51.4501 25.7583 51.4918 25.8832C51.5751 25.9665 51.5751 26.0915 51.5751 26.2165Z", fill: "#D5DDEA" }),
+        React__default.createElement("path", { d: "M51.5751 26.2164V42.7949C51.5751 45.0859 49.7423 46.9187 47.4096 46.9187H17.9184C15.6274 46.9187 13.7529 45.0859 13.7529 42.7949V26.1331C13.7529 26.0498 13.7529 25.9665 13.7946 25.8832H23.2918C24.708 25.8832 25.8743 27.0078 25.8743 28.4658C25.8743 29.1739 26.1659 29.8404 26.6241 30.2986C27.124 30.7984 27.7071 31.0483 28.4569 31.0483H36.9127C38.329 31.0483 39.4953 29.9237 39.4953 28.4658C39.4953 27.7576 39.7869 27.0912 40.2451 26.633C40.7449 26.1331 41.3281 25.8832 42.0362 25.8832H51.4918C51.5751 25.9665 51.5751 26.0915 51.5751 26.2164Z", fill: "url(#paint0_linear_2578_27197)" }),
+        React__default.createElement("path", { d: "M56.7342 17.6773C57.6774 17.6773 58.442 16.9126 58.442 15.9694C58.442 15.0262 57.6774 14.2616 56.7342 14.2616C55.791 14.2616 55.0264 15.0262 55.0264 15.9694C55.0264 16.9126 55.791 17.6773 56.7342 17.6773Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M55.0257 12.1373C55.6698 12.1373 56.192 11.6152 56.192 10.971C56.192 10.3269 55.6698 9.80469 55.0257 9.80469C54.3816 9.80469 53.8594 10.3269 53.8594 10.971C53.8594 11.6152 54.3816 12.1373 55.0257 12.1373Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M7.79034 15.9694C8.43449 15.9694 8.95667 15.4472 8.95667 14.803C8.95667 14.1589 8.43449 13.6367 7.79034 13.6367C7.1462 13.6367 6.62402 14.1589 6.62402 14.803C6.62402 15.4472 7.1462 15.9694 7.79034 15.9694Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M5.16603 41.6286C6.36229 41.6286 7.33205 40.6588 7.33205 39.4625C7.33205 38.2663 6.36229 37.2965 5.16603 37.2965C3.96976 37.2965 3 38.2663 3 39.4625C3 40.6588 3.96976 41.6286 5.16603 41.6286Z", fill: "#EAEEF9" }),
+        React__default.createElement("path", { d: "M43.0864 6.16785C43.6301 12.1024 43.9019 13.4615 42.6711 18.8361C42.2708 20.0309 41.8705 21.3396 41.0128 22.25C39.812 23.6725 37.6392 24.2984 35.8666 23.8432C34.0368 23.388 32.5501 21.7948 32.2071 19.8602C31.9212 18.6654 32.3214 17.2429 33.3507 16.5032C34.4371 15.8204 35.981 15.9911 36.8958 16.8446C37.9251 17.6981 38.3254 19.0068 38.2682 20.2585C38.211 21.5103 37.7536 22.7621 37.1246 23.8432C35.7027 26.5014 35.1173 26.4916 32.2071 30.8575", stroke: "#ABB5CC", strokeMiterlimit: "10", strokeDasharray: "4 4" }),
+        React__default.createElement("path", { d: "M46.2749 3.95757C46.0575 4.75059 45.1881 5.03896 44.3187 4.53431C43.3769 4.10176 42.7249 3.74129 42.8698 3.02037C43.0871 2.29945 43.9565 2.22735 44.9708 2.15526C46.2024 2.01108 46.4198 3.16455 46.2749 3.95757Z", fill: "#DAE2EB" }),
+        React__default.createElement("path", { d: "M39.2479 4.67842C39.6102 5.32726 40.6245 5.75981 41.3489 5.11098C42.1459 4.39005 42.7979 3.88541 42.4357 3.16448C42.0734 2.51565 41.4938 2.73193 40.2622 2.87611C39.2479 3.09239 38.8132 3.9575 39.2479 4.67842Z", fill: "#DAE2EB" }),
+        React__default.createElement("path", { d: "M42.4358 2.01104C42.9429 1.93895 43.4501 2.22732 43.595 2.65987C43.6674 2.80406 43.7399 3.02034 43.7399 3.16452C43.8848 4.17381 43.5225 5.03892 42.9429 5.11102C42.2909 5.2552 41.6389 4.53428 41.5664 3.59707C41.5664 3.3087 41.5664 3.16452 41.5664 2.94824C41.6389 2.4436 41.9286 2.08313 42.4358 2.01104C42.5082 2.01104 42.4358 2.01104 42.4358 2.01104Z", fill: "#989FB0" }),
+        React__default.createElement("path", { d: "M27.9127 37.0298C28.4405 37.0298 28.8684 36.6019 28.8684 36.0741C28.8684 35.5463 28.4405 35.1184 27.9127 35.1184C27.3849 35.1184 26.957 35.5463 26.957 36.0741C26.957 36.6019 27.3849 37.0298 27.9127 37.0298Z", fill: "#989FB0" }),
+        React__default.createElement("path", { d: "M37.4186 37.0298C37.9464 37.0298 38.3742 36.6019 38.3742 36.0741C38.3742 35.5463 37.9464 35.1184 37.4186 35.1184C36.8908 35.1184 36.4629 35.5463 36.4629 36.0741C36.4629 36.6019 36.8908 37.0298 37.4186 37.0298Z", fill: "#989FB0" }),
+        React__default.createElement("path", { d: "M34.2147 43.3063H31.2186C30.7536 43.3063 30.3662 42.9188 30.3662 42.4539C30.3662 41.989 30.7536 41.6016 31.2186 41.6016H34.1889C34.6538 41.6016 35.0413 41.989 35.0413 42.4539C35.0671 42.9188 34.6797 43.3063 34.2147 43.3063Z", fill: "#989FB0" }),
+        React__default.createElement("defs", null,
+            React__default.createElement("linearGradient", { id: "paint0_linear_2578_27197", x1: "32.6517", y1: "25.3966", x2: "32.6517", y2: "47.1455", gradientUnits: "userSpaceOnUse" },
+                React__default.createElement("stop", { stopColor: "#FDFEFF" }),
+                React__default.createElement("stop", { offset: "0.9964", stopColor: "#ECF0F5" })))));
+};
+
+const libraries = ['places'];
+const GoogleLocationBlock = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = useState(null);
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = useCallback((item) => {
+        /** For sure get value */
+        setValue(item.value);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
         }
-    }
-    return newValues;
+    }, []);
+    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
+            return (React__default.createElement(React__default.Fragment, null,
+                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
 };
 
 const StyledLeadGenFormInner = styled.div `
@@ -2815,17 +2882,22 @@ const TextField$1 = (props) => {
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
     const [shrink, setShrink] = useState(shrinkProps);
+    const focusInput = (target) => {
+        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus({ preventScroll: true });
+        }
+    };
     const onClick = useCallback((e) => {
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
         if (shrink) {
+            e.preventDefault();
+            focusInput(e.currentTarget);
             return;
         }
-        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus();
-        }
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        focusInput(e.currentTarget);
     }, [shrink]);
     useEffect(() => {
         setShrink(shrinkProps);
@@ -2838,44 +2910,6 @@ const ChoiceField$1 = (props) => {
     return (React__default.createElement(StyledChoiceFieldContainer$1, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
 };
 
-const libraries = ['places'];
-const GoogleLocationBlock = (props) => {
-    var _a;
-    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
-    const [LoadScript, setLoadScript] = useState(null);
-    const [value, setValue] = useState(defaultValue || valueProps);
-    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const onChangeAutocomplete = useCallback((s) => {
-        setValue(s);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
-    }, []);
-    const onClickItem = useCallback((item) => {
-        /** For sure get value */
-        setValue(item.value);
-        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
-    }, [onChangeProps, predictions]);
-    useEffect(() => {
-        setValue(valueProps);
-    }, [valueProps]);
-    useEffect(() => {
-        var _a, _b, _c;
-        // only load extra google script when not yet loaded
-        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
-            import('@react-google-maps/api').then((m) => {
-                setLoadScript(() => m.LoadScript);
-            });
-        }
-    }, []);
-    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
-            return { value: pred.description, label: pred.description };
-        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
-            return (React__default.createElement(React__default.Fragment, null,
-                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
-                children));
-        } }, restProps)));
-};
-
 const LeadGenForm = forwardRef((props, ref) => {
     const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
     const formRef = useRef(null);
@@ -2929,52 +2963,73 @@ const LeadGenForm = forwardRef((props, ref) => {
     return (React__default.createElement("form", { ref: formRef, onSubmit: form.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
         React__default.createElement(StyledLeadGenFormInner, { className: "leadgen-form_inputs" }, blocks.map((block, idx) => {
             const { id, name: blockName, data } = block;
-            const { placeholder, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
+            const { placeholder: label, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
             const formInputProps = form.getInputProps(name);
             const { value, error } = formInputProps;
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.NumberBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.EmailBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.PhoneOtpBlock:
                 case LEADGEN_BLOCK.WhatsappOtpBlock:
                 case LEADGEN_BLOCK.ZaloOtpBlock:
                 case LEADGEN_BLOCK.PhoneBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "tel" }, formInputProps))));
+                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "tel" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
+                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DropdownBlock:
                     return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
+                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", searchable: true, data: listQuestion.map((l) => ({
                                 value: l.value,
                                 label: l.placeholder,
-                            })) }, formInputProps))));
+                            })), nothingFound: React__default.createElement(NoData, null), styles: {
+                                item: {
+                                    paddingBlock: 12,
+                                    paddingInline: 10,
+                                    fontSize: 16,
+                                    lineHeight: 1.5,
+                                },
+                                nothingFound: {
+                                    fontSize: 54,
+                                    paddingBlock: 30,
+                                },
+                                itemsWrapper: {
+                                    padding: 6,
+                                },
+                                dropdown: {
+                                    '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
+                                        '--radix-scroll-area-thumb-width': '6px',
+                                        width: 'var(--radix-scroll-area-thumb-width)',
+                                        paddingInline: 0,
+                                    },
+                                },
+                            }, maxDropdownHeight: 192 }, formInputProps))));
                 case LEADGEN_BLOCK.CheckboxBlock: {
                     const formInputCheckboxProps = form.getInputProps(name, {
                         type: 'checkbox',
                     });
                     return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
+                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 flexWrap: 'wrap',
@@ -2986,7 +3041,7 @@ const LeadGenForm = forwardRef((props, ref) => {
                 case LEADGEN_BLOCK.RadioBlock: {
                     return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
@@ -3021,8 +3076,8 @@ const LeadGenSubscriptionBoxA = (props) => {
     }, [title]);
     return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
         React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
-            imageComp,
-            titleComp),
+            titleComp,
+            imageComp),
         React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
             React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
             React__default.createElement(Button$1, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => {
@@ -3605,6 +3660,182 @@ const useViewportDimensions = () => {
     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);
+  padding-bottom: var(--spacing-y, 20px);
+`;
+const StyledLeadGenLightBoxBBody = styled.div `
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-inline: var(--spacing-y, 20px);
+  padding-block: calc(var(--spacing-x, 20px) * 8 / 20);
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+`;
+const StyledLeadGenLightBoxBHeader = styled.div `
+  display: flex;
+  padding-top: var(--spacing-y, 20px);
+  padding-inline: var(--spacing-x, 20px);
+  padding-bottom: calc(var(--spacing-y, 20px) * 8 / 20);
+`;
+const StyledLeadGenLightBoxBWrapper = styled.div `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const StyledLeadGenLightBoxB = styled.div `
+  --spacing-x: 20px;
+  --spacing-y: 20px;
+  --close-width: 24px;
+  --close-height: 24px;
+
+  // For old version, Wrap every thing in children
+  &[data-type='LightBoxB_typeA'] {
+    height: 100%;
+    width: 100%;
+    .leadgen-wrapper,
+    .leadgen-inner,
+    .leadgen-form {
+      height: 100%;
+    }
+    .leadgen-content {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .leadgen-header {
+      display: none;
+    }
+    .leadgen-title {
+      padding-right: calc(var(--close-width, 24px) * 50 / 24);
+    }
+    .leadgen-description {
+      display: none;
+    }
+    .leadgen-body {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .leadgen-close_btn {
+      top: var(--spacing-y, 20px);
+      right: var(--spacing-x, 20px);
+      width: var(--close-width, 24px) !important;
+      height: var(--close-height, 24px);
+      box-shadow: none;
+      font-size: 24px;
+    }
+
+    .leadgen-empty_footer {
+      .leadgen-btn {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    .leadgen-form_body {
+      overflow: auto;
+      animation: scrolling forwards;
+      animation-timeline: scroll(self);
+    }
+    @keyframes scrolling {
+      0%,
+      to {
+        border-bottom: 1px solid ${theme.colors.neutral100};
+      }
+    }
+  }
+`;
+const StyledMotionContainer = styled(motion.div) `
+  position: fixed;
+  inset: 0;
+  z-index: ${ZINDEX_SSO + 1};
+  background-color: #fff;
+`;
+
+const PREFIX_CLS = 'LightBoxB_typeA';
+const DURATION = 1000 * 0.5;
+const DRAWER_STYLE = {
+    visible: {
+        opacity: 1,
+        translateY: '0px',
+        transitionProperty: 'translate',
+        transitionDuration: '0.25s',
+    },
+    hidden: {
+        opacity: 0,
+        translateY: '100%',
+        transitionProperty: 'translate',
+        transitionDuration: '0.25s',
+    },
+};
+const LeadGenLightBoxBTypeA = (props) => {
+    const { visible, onVisible, icon, title, buttonText, blocks, children } = props, restProps = __rest(props, ["visible", "onVisible", "icon", "title", "buttonText", "blocks", "children"]);
+    const formRef = useRef();
+    const [open, setOpen] = useState(visible);
+    const { height } = useViewportDimensions();
+    usePreventScroll();
+    const onOpenChange = useCallback((open) => {
+        if (!open) {
+            // Wait for duration of animation
+            setTimeout(() => {
+                onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
+            }, DURATION);
+            return;
+        }
+        onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
+    }, [onVisible]);
+    const iconComp = useMemo(() => {
+        if (!icon) {
+            return null;
+        }
+        return React__default.createElement(React__default.Fragment, null);
+    }, [icon]);
+    const titleComp = useMemo(() => {
+        if (!title) {
+            return null;
+        }
+        return title;
+    }, [title]);
+    const childrenComp = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        return (React__default.createElement(StyledLeadGenLightBoxBWrapper, { className: `${PREFIX_CLS}_wrapper lightboxB_wrapper` },
+            React__default.createElement(StyledLeadGenLightBoxBHeader, { className: `${PREFIX_CLS}_header lightboxB_header` },
+                React__default.createElement("div", { className: "lightBoxB_header_icon" }, iconComp),
+                React__default.createElement("div", { className: "lightBoxB_header_title" }, titleComp),
+                React__default.createElement("div", { className: "lightBoxB_header_close", onClick: () => onOpenChange(false) },
+                    React__default.createElement(CloseButton, null))),
+            React__default.createElement(StyledLeadGenLightBoxBBody, { className: `${PREFIX_CLS}_body lightboxB_body` },
+                React__default.createElement(LeadGenForm, Object.assign({ ref: formRef, blocks: blocks }, restProps))),
+            React__default.createElement(StyledLeadGenLightBoxBFooter, { className: `${PREFIX_CLS}_footer lightboxB_footer` },
+                React__default.createElement(Button, { onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); } }, buttonText))));
+    }, [children, onOpenChange]);
+    useEffect(() => {
+        setOpen(visible);
+    }, [visible]);
+    return (React__default.createElement(StyledMotionContainer, { animate: open ? 'visible' : 'hidden', variants: DRAWER_STYLE },
+        React__default.createElement(StyledLeadGenLightBoxB, { "data-type": "LightBoxB_typeA", style: height ? { maxHeight: height } : undefined }, childrenComp)));
+};
+
+const LeadGenLightBoxB = (props) => {
+    return React__default.createElement(LeadGenLightBoxBTypeA, Object.assign({}, props));
+};
+
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { primaryColor } = useContext(LeadGenContext$1);
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
@@ -3974,6 +4205,7 @@ const StyledTextFieldContainer = styled.div `
       outline: none !important;
       border: none;
       box-shadow: none;
+      font-size: var(--input, 15px);
       padding: 0 var(--phone-input-space-x, 8px);
       opacity: 0;
       color: ${theme.colors.gray800} !important;
@@ -4093,17 +4325,22 @@ const TextField = (props) => {
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
     const [shrink, setShrink] = useState(shrinkProps);
+    const focusInput = (target) => {
+        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus({ preventScroll: true });
+        }
+    };
     const onClick = useCallback((e) => {
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
         if (shrink) {
+            e.preventDefault();
+            focusInput(e.currentTarget);
             return;
         }
-        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus();
-        }
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        focusInput(e.currentTarget);
     }, [shrink]);
     useEffect(() => {
         setShrink(shrinkProps);
@@ -4130,7 +4367,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     return (React__default.createElement(React__default.Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
         const { name = '', data = {}, id } = b || {};
-        const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
+        const { placeholder: label, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
         const required = (_a = data.required) !== null && _a !== void 0 ? _a : true;
         const formValue = (formValues === null || formValues === void 0 ? void 0 : formValues[value]) || null;
         switch (name) {
@@ -4140,23 +4377,23 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
+                    React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "text", "data-lead-control": 'TextBlock', inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
             case 'NumberBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
+                    React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "number", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
-                        placeholder: placeholder, 
+                        placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "email", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4166,20 +4403,20 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
+                    React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: label, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
                         React__default.createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
+                            React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
+                                id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                    React__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)))));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = __rest(_c, ["error"]);
-                return (React__default.createElement(Input$1.Wrapper, { key: index, size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
+                return (React__default.createElement(Input$1.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.createElement(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))));
             }
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -4195,38 +4432,59 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "data-name": value + '-mailchimp' })),
                     React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, size: "md", sx: {
+                        label: label, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
                             gap: 8,
                         }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
             case 'RadioBlock':
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default.createElement(Input$1, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                        label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
             case 'DropdownBlock':
-                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field", key: index },
-                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
+                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name }),
                     React__default.createElement(Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, placeholder: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                        label: label, placeholder: " ", searchable: true, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
-                        })) }, form.getInputProps(value)))));
+                        })), nothingFound: React__default.createElement(NoData, null), styles: {
+                            item: {
+                                paddingBlock: 12,
+                                paddingInline: 10,
+                                fontSize: 16,
+                                lineHeight: 1.5,
+                            },
+                            nothingFound: {
+                                fontSize: 54,
+                                paddingBlock: 30,
+                            },
+                            itemsWrapper: {
+                                padding: 6,
+                            },
+                            dropdown: {
+                                '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
+                                    '--radix-scroll-area-thumb-width': '6px',
+                                    width: 'var(--radix-scroll-area-thumb-width)',
+                                    paddingInline: 0,
+                                },
+                            },
+                        }, maxDropdownHeight: 192 }, form.getInputProps(value)))));
             case 'TncBlock':
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = __rest(_d, ["error"]);
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default.createElement(Input$1.Wrapper, { error: error },
-                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
+                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps)))));
         }
         return null;
     })));
@@ -4474,7 +4732,9 @@ const LEADGEN_SHOW_HEADER = [
     LEADGEN_LAYOUT.Sidebar,
     LEADGEN_LAYOUT.Slider,
 ];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
+// 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, }) => {
     var _a, _b;
     const { primaryColor } = useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize();
@@ -4482,17 +4742,25 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [showOtpPhone, setShowOtpPhone] = useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
     const [snap, setSnap] = useState(0.8);
+    const isTrackedForm = useRef(false);
     const formRef = useRef();
+    const [lastFormRef, setLastFormRef] = useState();
     const onClose = () => {
         if (showOtpPhone) {
             setShowOtpPhone(null);
         }
         else {
-            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp({
+                formValues: form.values,
+                formActiveTime: formActiveTime.current,
+                formRef: formRef.current,
+                listBlockAdded,
+            });
         }
     };
     const { height } = useViewportDimensions();
     usePreventScroll();
+    const formActiveTime = useRef(0);
     const textBlocks = JSON.parse(extraFields.textBlocks);
     const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
     const actionBlocks = JSON.parse(extraFields.actionBlocks);
@@ -4509,6 +4777,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
     const isInPage = isInline || isSidebar;
     const isDrawer = isLightBoxB && isMobile;
+    const isNewUI = useMemo(() => CAMPAGE_CODE_LIST_APPLY_NEW_UI.includes(campaignCode), [campaignCode]);
     const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
     const hasForm = isLightBoxA
         ? listBlockAdded.some((item) => LEADGEN_BLOCK_INPUT.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
@@ -4517,6 +4786,17 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const showHeader = !!imageMobile || !!imageDesktop;
     const onlyHeader = !title && !description;
     const showButtonClose = !isInline;
+    const validatingPhoneRef = useRef(false);
+    const validatingEmailRef = useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+        userInfo,
+        format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
+    });
     if (window.innerWidth < 769 &&
         LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
         console.log('😎 Not show fullscreen, slider on mobile ');
@@ -4531,17 +4811,33 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         clearCacheUsedEmailOrPhone();
     }, []);
-    const validatingPhoneRef = useRef(false);
-    const validatingEmailRef = useRef(false);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        validatingPhoneRef,
-        validatingEmailRef,
-        campaignId,
-        campaign_subot_id,
-        userInfo,
-        format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
-    });
+    useEffect(() => {
+        formRef.current && setLastFormRef(formRef.current);
+    }, [formRef.current]);
+    useEffect(() => {
+        const handleBeforeUnload = () => {
+            !isTrackedForm.current &&
+                !showThankyou &&
+                (onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount({
+                    formValues: form.values,
+                    formActiveTime: formActiveTime.current,
+                    formRef: lastFormRef,
+                    listBlockAdded,
+                }));
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, [lastFormRef, form.values, showThankyou]);
+    useEffect(() => {
+        let intervalId = null;
+        if (isLightBox && !showThankyou) {
+            intervalId = setInterval(() => {
+                formActiveTime.current += 1;
+                // console.log({ formActiveTime: formActiveTime.current })
+            }, 1000);
+        }
+        return () => clearInterval(intervalId);
+    }, [showThankyou]);
     const listBlockAddedRequired = useMemo(() => leadGenFieldRequired(listBlockAdded), listBlockAdded);
     const disabledButtonSubmit = useMemo(() => {
         if (listBlockAddedRequired.length) {
@@ -4551,10 +4847,46 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     }, [...listBlockAddedRequired.map((k) => form.values[k])]);
     const onFocus = (e) => {
         e.preventDefault();
-        setTimeout(() => {
-            const target = e.target;
-            target.scrollIntoView({ block: 'center', behavior: 'auto' });
-        }, 300); // Wait a bit to let keyboard open
+        function scrollIntoView() {
+            const $Input = e.target;
+            const $TextField = $Input.closest('.leadgen-form_field');
+            const scrollIntoView = {
+                block: 'center',
+                behavior: 'auto',
+            };
+            if ($TextField.classList.contains('DropdownBlock')) {
+                scrollIntoView.block = 'start';
+                const tfOffsetTop = ($TextField === null || $TextField === void 0 ? void 0 : $TextField.offsetTop) || 0;
+                const tfHeight = $TextField.clientHeight;
+                const $ScrollableElement = getParentScroll($TextField);
+                if ($ScrollableElement) {
+                    // https://hhgdev.atlassian.net/browse/EL-682
+                    const scrollHeight = $ScrollableElement.scrollHeight;
+                    if (scrollHeight - (tfOffsetTop + tfHeight) < 192) {
+                        scrollIntoView.block = 'end';
+                    }
+                }
+            }
+            if (isMobile) {
+                window.scrollTo(0, 0);
+            }
+            $TextField.scrollIntoView(scrollIntoView);
+        }
+        let time = 0;
+        function requestFrame(timestamp) {
+            if (time === 0) {
+                time = timestamp;
+            }
+            if (timestamp - time <= 250) {
+                requestAnimationFrame(requestFrame);
+            }
+            else {
+                scrollIntoView();
+            }
+        }
+        if (isMobile) {
+            requestAnimationFrame(requestFrame);
+        }
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -4611,7 +4943,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                         var _a;
                         const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
                         if (respMessage === 'This phone number was verified') {
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+                                formValues: v,
+                                formActiveTime: formActiveTime.current,
+                                formRef: formRef.current,
+                                listBlockAdded,
+                            });
                             return;
                         }
                         setShowOtpPhone(newShowOtpPhone);
@@ -4621,7 +4958,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                     });
                     return;
                 }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+                    formValues: v,
+                    formActiveTime: formActiveTime.current,
+                    formRef: formRef.current,
+                    listBlockAdded,
+                });
             })(e);
         }, 100);
     };
@@ -4667,7 +5009,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                     React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
     const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+                formValues: form.values,
+                formActiveTime: formActiveTime.current,
+                formRef: formRef.current,
+                listBlockAdded,
+            });
         } }));
     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", { className: clsx('leadgen-content', {
@@ -4702,18 +5049,13 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (
-    // <LeadGenLightBoxB
-    //   form={form}
-    //   loading={isSubmitLoading}
-    //   visible={open}
-    //   onVisible={() => onOpenChange(false)}
-    // >
-    //   {PopupWrapper}
-    // </LeadGenLightBoxB>
-    React__default.createElement(DrawerComponent, { fadeFromIndex: 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.createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
         PopupWrapper,
-        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName, style: isMobile ? { maxHeight: height } : undefined },
+        React__default.createElement("div", { style: {
+                position: 'absolute',
+                inset: 0,
+                zIndex: snap === 1 ? -1 : 1,
+            }, onClick: () => setSnap(1) })))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName, style: isMobile ? { maxHeight: height } : undefined },
         isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,
@@ -4820,7 +5162,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = useContext(LeadGenContext$1);
     useEffect(() => {
@@ -4939,7 +5281,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default.createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
+        return (React__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 }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__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 }));
@@ -4947,9 +5289,74 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
     return null;
 };
 
+const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
+const formatFormData = (currentForm, formData) => {
+    return Object.keys(formData)
+        .filter((key) => !!formData[key])
+        .map((name) => {
+        var _a, _b, _c, _d;
+        const value = String(formData[name]);
+        const control = ((_a = currentForm
+            .querySelector(`*[name="${name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
+            ((_b = currentForm
+                .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-control')) ||
+            'text';
+        const leadControl = ((_c = currentForm
+            .querySelector(`*[name="${name}"][data-lead-control]`)) === null || _c === void 0 ? void 0 : _c.getAttribute('data-lead-control')) ||
+            ((_d = currentForm
+                .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-lead-control')) ||
+            'text';
+        const formatedValue = control === 'tel'
+            ? window.intlTelInputUtils
+                .formatNumber(String(value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
+                .replace(/\s+/g, '')
+            : control === 'date'
+                ? dayjs(value).format('YYYY-MM-DD')
+                : value;
+        return {
+            key: name,
+            value: formatedValue,
+            control,
+            leadControl,
+            // is_sent_mailchimp: currentForm.querySelector(
+            //   `div[data-name="${i.name}-mailchimp"]`,
+            // )
+            //   ? 'true'
+            //   : 'false',
+        };
+    });
+};
+
+const formatTrackingData = (params) => {
+    const { formParams = {}, currentLayout, commonData } = params;
+    const { formValues, formActiveTime, listBlockAdded } = formParams;
+    const listFieldHasValue = [];
+    const data = Object.assign(Object.assign({ template_type: currentLayout, time_on_form: [LEADGEN_LAYOUT.LightBoxA, LEADGEN_LAYOUT.LightBoxB].includes(currentLayout)
+            ? formActiveTime
+            : 0 }, commonData), { data_input: formValues.map((control) => {
+            listFieldHasValue.push(control.leadControl);
+            return {
+                field_name: control.key,
+                component_type: control.leadControl,
+                value: control.value,
+            };
+        }), data_not_input: listBlockAdded
+            .map((item) => {
+            const leadControlName = item.name;
+            if (!listFieldHasValue.includes(leadControlName)) {
+                return {
+                    field_name: item.data.value,
+                    component_type: leadControlName,
+                };
+            }
+        })
+            .filter(Boolean) });
+    return data;
+};
+
 // mount css
 const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, }) => {
-    var _a;
+    var _a, _b;
     const scrollEventHandlerRef = useRef();
     const leadStartTimeRef = useRef(Date.now());
     const { apiUrl } = useMemo(() => {
@@ -4965,6 +5372,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     const [action, setAction] = useState('');
     const [showThankyou, setShowThankyou] = useState(null);
     const [showEmpty, setShowEmpty] = useState(false);
+    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]);
     useEffect(() => {
         if (forceCampaign) {
             setShowCampaign(forceCampaign);
@@ -4987,14 +5395,15 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         setAction('HIDE');
         onCloseProps === null || onCloseProps === void 0 ? void 0 : onCloseProps();
     };
-    const onClose = () => {
-        var _a, _b;
+    const onClose = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d;
+        const { formRef, listBlockAdded, formValues: formDataObj } = params;
         if (!showCampaign)
             return;
         LeadLog(`👋👋👋 CLOSE POPUP ${showCampaign.code} 👋👋👋`);
         if (!excludeExitRulesHandler) {
-            const showAfterExit = Number((_a = showCampaign.rules.find((rule) => rule.rule == 'show_again_after_exit')) === null || _a === void 0 ? void 0 : _a.value);
-            const expiresDay = Number((_b = showCampaign.rules.find((rule) => rule.rule == 'days_to_show_again')) === null || _b === void 0 ? void 0 : _b.value);
+            const showAfterExit = Number((_c = showCampaign.rules.find((rule) => rule.rule == 'show_again_after_exit')) === null || _c === void 0 ? void 0 : _c.value);
+            const expiresDay = Number((_d = showCampaign.rules.find((rule) => rule.rule == 'days_to_show_again')) === null || _d === void 0 ? void 0 : _d.value);
             if (showAfterExit == 0) {
                 if (!expiresDay) {
                     setCookie(`lead_closed_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupVersion}`, { domain: '.' + siteDomain, path: '/' });
@@ -5004,21 +5413,56 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                 }
             }
         }
-        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),
+        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 &&
+                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,
+                    },
+                    currentLayout,
+                    formParams: Object.assign(Object.assign({}, params), { formValues: formatFormData(formRef, formDataObj) }),
+                }),
+        ]);
         onCloseBase();
-    }; //
+    });
+    const onUnmount = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        const { formRef, listBlockAdded, formValues: formDataObj } = params;
+        if ([LEADGEN_LAYOUT.InlineA, LEADGEN_LAYOUT.InlineB].includes(currentLayout) &&
+            Object.keys(formDataObj).length === 0)
+            return;
+        const data = formatTrackingData({
+            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,
+            },
+            currentLayout,
+            formParams: Object.assign(Object.assign({}, params), { formValues: formatFormData(formRef, formDataObj) }),
+        });
+        const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
+        navigator.sendBeacon(`${apiUrl}api/collection/tracking-completion`, blob);
+    });
     useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
             return;
@@ -5057,69 +5501,55 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             DEBUG_URL,
         });
     }, []);
-    const onSubmit = (currentForm, formDataObj, categoryLevel, categoryData) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const trackingCompletionForm = useCallback((params) => __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',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+    }), [(_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.currentLayout]);
+    const onSubmit = (params, categoryLevel, categoryData) => __awaiter(void 0, void 0, void 0, function* () {
+        var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        const { formRef, listBlockAdded, formValues: formDataObj } = params;
         if (!formDataObj || Object.values(formDataObj).every((v) => !Boolean(v))) {
             setShowEmpty(true);
             return;
         }
         LeadLog('submitHandler', categoryLevel, categoryData);
-        const formData = Object.keys(formDataObj)
-            .filter((key) => !!formDataObj[key])
-            .map((key) => ({
-            name: key,
-            value: String(formDataObj[key]),
+        const formatedFormData = formatFormData(formRef, formDataObj);
+        const formData = formatedFormData.map(({ key, value, control }) => ({
+            key,
+            value,
+            control,
         }));
         console.log('** RYAN index.tsx 218 formData : ', formData);
-        const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
         // Get ga_client_id from cookies
         const gaCookie = getCookie('_ga') || null;
         if (!window.intlTelInputUtils) {
             yield require('intl-tel-input/build/js/utils');
         }
-        const data = {
-            url: location.href.toLowerCase(),
-            title_article: document.title,
-            meta: [
-                ...formData.map((i) => {
-                    var _a, _b;
-                    const control = ((_a = currentForm
-                        .querySelector(`*[name="${i.name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
-                        ((_b = currentForm
-                            .querySelector(`*[data-extra][data-name="${i.name}"]`)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-control')) ||
-                        'text';
-                    const value = control === 'tel'
-                        ? window.intlTelInputUtils
-                            .formatNumber(String(i.value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
-                            .replace(/\s+/g, '')
-                        : control === 'date'
-                            ? dayjs(i.value).format('YYYY-MM-DD')
-                            : i.value;
-                    return {
-                        key: i.name,
-                        value,
-                        control,
-                        // is_sent_mailchimp: currentForm.querySelector(
-                        //   `div[data-name="${i.name}-mailchimp"]`,
-                        // )
-                        //   ? 'true'
-                        //   : 'false',
-                    };
-                }),
-                ...extraPayloadValues,
-            ],
+        const commonData = {
             cookie_id: getCookie('hhg-id'),
             ga_client_id: gaCookie,
         };
+        const data = Object.assign({ url: location.href.toLowerCase(), title_article: document.title, meta: [...formData, ...extraPayloadValues] }, commonData);
         // categoryLevel
         if (categoryLevel) {
             if (categoryData[categoryLevel].value_en) {
                 data['category'] = categoryData[categoryLevel].value_en;
             }
         }
-        const expiresDay = Number(((_c = (_b = showCampaign.rules) === null || _b === void 0 ? void 0 : _b.find((r) => r.rule === 'days_to_show_again')) === null || _c === void 0 ? void 0 : _c.value) ||
+        const expiresDay = Number(((_f = (_e = showCampaign.rules) === null || _e === void 0 ? void 0 : _e.find((r) => r.rule === 'days_to_show_again')) === null || _f === void 0 ? void 0 : _f.value) ||
             7);
-        const showAgain = Number(((_e = (_d = showCampaign.rules) === null || _d === void 0 ? void 0 : _d.find((r) => r.rule === 'show_again_after_submit')) === null || _e === void 0 ? void 0 : _e.value) || 0);
+        const showAgain = Number(((_h = (_g = showCampaign.rules) === null || _g === void 0 ? void 0 : _g.find((r) => r.rule === 'show_again_after_submit')) === null || _h === void 0 ? void 0 : _h.value) || 0);
         if (showAgain == 0) {
             LeadLog('⛔ Popup never show again!');
             setCookie(`lead_submited_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.targetType}`, { domain: '.' + siteDomain, path: '/' });
@@ -5128,13 +5558,20 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             LeadLog(`⌛ Popup will show again after ${expiresDay} days!`);
             setCookie(`lead_submited_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.targetType}`, { domain: '.' + siteDomain, days: expiresDay, path: '/' });
         }
-        fetch(`${apiUrl}api/campaign/${showCampaign.code}/lead`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data),
-        });
+        yield Promise.all([
+            fetch(`${apiUrl}api/campaign/${showCampaign.code}/lead`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            }),
+            trackingCompletionForm({
+                commonData: Object.assign(Object.assign({}, commonData), { country_code: locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN', status: 'complete', campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id, total_fields: listBlockAdded.length }),
+                currentLayout,
+                formParams: Object.assign(Object.assign({}, params), { formValues: formatedFormData }),
+            }),
+        ]);
         onSubmitProps === null || onSubmitProps === void 0 ? void 0 : onSubmitProps(formDataObj);
         if ((showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupShowThankYou) == 'notshow') {
             onClose();
@@ -5153,15 +5590,15 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             const titleBlock = listBlockThankyou.find((i) => i.name == 'TitleBlock');
             const subtitleBlock = listBlockThankyou.find((i) => i.name == 'SubtitleBlock');
             const linkButtonBlock = listBlockThankyou.find((i) => i.name == 'LinkButtonBlock');
-            thankTitle = ((_f = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _f === void 0 ? void 0 : _f.value) || '';
-            titleAlign = ((_g = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _g === void 0 ? void 0 : _g.align) || '';
-            thankDesc = ((_h = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _h === void 0 ? void 0 : _h.value) || '';
-            descAlign = ((_j = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _j === void 0 ? void 0 : _j.align) || '';
-            linkText = ((_k = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _k === void 0 ? void 0 : _k.value) || '';
-            linkNewTab = ((_l = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _l === void 0 ? void 0 : _l.newtab) || false;
-            linkUrl = ((_m = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _m === void 0 ? void 0 : _m.url) || '';
+            thankTitle = ((_j = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _j === void 0 ? void 0 : _j.value) || '';
+            titleAlign = ((_k = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _k === void 0 ? void 0 : _k.align) || '';
+            thankDesc = ((_l = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _l === void 0 ? void 0 : _l.value) || '';
+            descAlign = ((_m = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _m === void 0 ? void 0 : _m.align) || '';
+            linkText = ((_o = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _o === void 0 ? void 0 : _o.value) || '';
+            linkNewTab = ((_p = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _p === void 0 ? void 0 : _p.newtab) || false;
+            linkUrl = ((_q = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _q === void 0 ? void 0 : _q.url) || '';
             // ALWAYS SHOW THANK YOU ON COMPOUND COMP
-            // const curLayout = showCampaign.extra_fields.currentLayout
+            // const curLayout = currentLayout
             // TODO: newbuilder thank you
             // List layout not show thanks you
             // if (
@@ -5200,7 +5637,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         }
         // Submit Inisder Obj
         formData.map((data) => {
-            const name = data.name;
+            const name = data.key;
             const value = data.value;
             if (name == 'tel') {
                 window.insider_object.user.phone_number = value;
@@ -5218,16 +5655,22 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default.createElement(LeadGenContext$1.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
+    return (React__default.createElement(LeadGenContext$1.Provider, { value: {
+            primaryColor,
+            apiUrl,
+            siteDomain,
+            siteId,
+            locale,
+        } },
         React__default.createElement(TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
             React__default.createElement(Box, { sx: { position: 'fixed', zIndex: ZINDEX_SSO - 9e6 } },
-                React__default.createElement(Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {
+                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,
-                        !!showCampaign.extra_fields.currentLayout &&
-                            !showCampaign.extra_fields.currentLayout.includes('Inline') &&
-                            !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (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, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
+                        !!currentLayout &&
+                            !currentLayout.includes('Inline') &&
+                            !currentLayout.includes('Sidebar') && (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, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
                 })))))));
 };
 const LeadGen = _LeadGen;