@hhgtech/hhg-components 1.29.396-beta-7 → 1.29.397-beta-1

package/build/lead.js

@@ -2,56 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-e137c099.js');
+var tslib_es6 = require('./tslib.es6-ecad3526.js');
 var React = require('react');
 var core = require('@mantine/core');
-var dayjs = require('dayjs');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
-var index = require('./index-a626843d.js');
+var dayjs = require('dayjs');
+var index = require('./index-ec9686cc.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-ff2ec13b.js');
-var translationsContext = require('./translationsContext-bf042531.js');
-var utils$1 = require('./utils-eb06e27e.js');
-var index$2 = require('./index-95db12a6.js');
-var index$3 = require('./index-6a8d1bc8.js');
-var index$5 = require('./index-261136c0.js');
-var index$4 = require('./index-bace5fd6.js');
-require('./index.styles-f7f3fca8.js');
+var index$1 = require('./index-cb970cf4.js');
+var translationsContext = require('./translationsContext-a3e31b9e.js');
+var utils$1 = require('./utils-f619e399.js');
+var index$2 = require('./index-10dc0a81.js');
+var index$3 = require('./index-f86566d5.js');
+var index$5 = require('./index-7578a98b.js');
+var index$4 = require('./index-c91511d7.js');
+require('./index.styles-f9408092.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-bd657418.js');
-var index$9 = require('./index-2945f7cd.js');
-require('./index-a42a50a4.js');
-var index$7 = require('./index-4d4fa9c6.js');
-require('./other-62cd4f2e.js');
-require('./index-82e8f4e8.js');
-var utils = require('./utils-9deda092.js');
+require('./useMantineLocale-8b5328da.js');
+var index$9 = require('./index-0ae1731a.js');
+require('./index-d3461fe7.js');
+var index$7 = require('./index-95b9acb2.js');
+require('./other-8f691b82.js');
+require('./index-15acc379.js');
+var utils = require('./utils-6b741a52.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-710ceca1.js');
-var index$6 = require('./index-b883f5a2.js');
-var translationsProvider = require('./translationsProvider-d0347b34.js');
-var Locale = require('./Locale-55b5fb0f.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-c4096401.js');
+var index$6 = require('./index-e4ecee0e.js');
+var translationsProvider = require('./translationsProvider-219524af.js');
+var Locale = require('./Locale-764d0fe0.js');
 var uuid = require('uuid');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
-var togetherComponentGlobalContext = require('./utils-b9986d55.js');
-var index$8 = require('./index-42770e30.js');
-var useScreenSize = require('./useScreenSize-cef9e7ae.js');
+var togetherComponentGlobalContext = require('./utils-5316edfa.js');
+var index$8 = require('./index-1aa847ab.js');
+var useScreenSize = require('./useScreenSize-1e356362.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var index$a = require('./index-b82e3c07.js');
-var InputDate = require('./InputDate-779bfa2a.js');
-var index$b = require('./index-0f33bda5.js');
-var Close = require('./Close-619ec3fa.js');
+var index$a = require('./index-8c5a772d.js');
+var InputDate = require('./InputDate-5331c552.js');
+var index$b = require('./index-e611fdb0.js');
+var Close = require('./Close-bcd0f86d.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-3b3ba0a5.js');
+require('./normalizeLink-8aa84155.js');
 require('./constantsDomainLocales.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-5dac0bf6.js');
+require('./useUniqueId-42fb6d03.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
@@ -68,11 +68,11 @@ require('./i18n-values/tl-PH.js');
 require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-TW.js');
-require('./index-3b9d2da0.js');
+require('./index-24c4277b.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-4dd172d1.js');
+require('./constants-08c8503c.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -96,8 +96,8 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 const LeadGenComponentContext = React.createContext({});
@@ -192,20 +192,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',
@@ -389,6 +390,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/';
@@ -691,7 +704,7 @@ const clearCacheUsedEmailOrPhone = () => {
 const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = form.createFormContext();
 const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
     const { t } = index$1.useTranslations();
-    const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const initialValues = React.useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     React.useEffect(() => {
         if (!window.intlTelInputUtils) {
             require('intl-tel-input/build/js/utils');
@@ -1007,15 +1020,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TextBlock':
                 return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "text", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'NumberBlock':
                 return (React__default["default"].createElement(index$3.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "number", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'EmailBlock':
                 return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
-                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", 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':
@@ -1030,14 +1043,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name })));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, popoverProps: popoverProps }, form.getInputProps(value))),
                     React__default["default"].createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
@@ -1055,11 +1068,11 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
                     isSendMailChimp && (React__default["default"].createElement(index$3.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
@@ -1070,7 +1083,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
     })));
@@ -1103,7 +1116,9 @@ const Heading = (_a) => {
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
     var _a;
     const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
+    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, 
+    // formRef,
+    setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
     const { classes, cx } = useStyles$1(undefined, {
         name: 'LeadGen__FormComponent',
         styles,
@@ -1164,7 +1179,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);
@@ -1174,7 +1189,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);
     };
@@ -1344,10 +1359,13 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
 };
 const OtpBlock$1 = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
-    const { showOtpPhone, setShowOtpPhone, onSubmit, formRef, leadFormConfig: { form }, } = React.useContext(LeadGenComponentContext);
+    const { showOtpPhone, setShowOtpPhone, onSubmit,
+    // formRef,
+    // leadFormConfig: { form },
+     } = React.useContext(LeadGenComponentContext);
     return showOtpPhone ? (React__default["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;
 };
 
@@ -2150,7 +2168,7 @@ const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormConte
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
     var _a;
     const { t } = index$1.useTranslations();
-    const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const initialValues = React.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 = React.useMemo(() => {
@@ -2385,15 +2403,14 @@ const StyledLeadGenSubscriptionBoxBody = styled__default["default"].div `
   }
 `;
 const StyledLeadGenSubscriptionBoxHeaderImage = styled__default["default"].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;
   }
 
@@ -2410,7 +2427,7 @@ const StyledLeadGenSubscriptionBoxHeader = styled__default["default"].div `
     flex: 1;
     min-width: 0;
     color: ${miscTheme.theme.colors.gray900};
-    font-size: 16px;
+    font-size: 17px;
     font-weight: 400;
     line-height: 1.4;
     letter-spacing: -0.4px;
@@ -2426,6 +2443,12 @@ const StyledLeadGenSubscriptionBoxHeader = styled__default["default"].div `
 const StyledLeadGenSubscriptionBox = styled__default["default"].div `
   padding: 16px;
   border: 1px solid ${miscTheme.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 {
@@ -2459,6 +2482,7 @@ const StyledLeadGenSubscriptionBox = styled__default["default"].div `
         margin-left: 8px;
         width: auto;
         min-height: 56px;
+        font-size: 16px;
       }
     }
   }
@@ -2558,18 +2582,6 @@ const GoogleLocationBlock = (props) => {
         } }, restProps)));
 };
 
-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;
-};
-
 const StyledLeadGenFormInner = styled__default["default"].div `
   display: flex;
   flex-wrap: wrap;
@@ -3100,8 +3112,8 @@ const LeadGenSubscriptionBoxA = (props) => {
     }, [title]);
     return (React__default["default"].createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
         React__default["default"].createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
-            imageComp,
-            titleComp),
+            titleComp,
+            imageComp),
         React__default["default"].createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
             React__default["default"].createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
             React__default["default"].createElement(core.Button, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => {
@@ -4404,20 +4416,20 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: label, "data-control": "text", 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["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: label, "data-control": "number", 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["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, "data-control": "email", 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':
@@ -4431,7 +4443,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
                             React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
+                                id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
@@ -4440,7 +4452,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = tslib_es6.__rest(_c, ["error"]);
                 return (React__default["default"].createElement(core.Input.Wrapper, { key: index, size: "md", withAsterisk: required, label: label, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(InputDate.InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
+                    React__default["default"].createElement(InputDate.InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
@@ -4463,7 +4475,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             gap: 8,
                         }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
@@ -4471,7 +4483,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         // className="lead-modal__form-control leadgen-form_field"
                         label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
@@ -4508,7 +4520,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = tslib_es6.__rest(_d, ["error"]);
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default["default"].createElement(core.Input.Wrapper, { error: error },
-                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
+                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps)))));
         }
         return null;
     })));
@@ -4756,8 +4768,9 @@ const LEADGEN_SHOW_HEADER = [
     LEADGEN_LAYOUT.Sidebar,
     LEADGEN_LAYOUT.Slider,
 ];
-const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39', 'u0adw7hw8kw7t89'];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaignCode, 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 } = React.useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize.useScreenSize();
@@ -4765,17 +4778,25 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [showOtpPhone, setShowOtpPhone] = React.useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
     const [snap, setSnap] = React.useState(0.8);
+    const isTrackedForm = React.useRef(false);
     const formRef = React.useRef();
+    const [lastFormRef, setLastFormRef] = React.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 = React.useRef(0);
     const textBlocks = JSON.parse(extraFields.textBlocks);
     const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
     const actionBlocks = JSON.parse(extraFields.actionBlocks);
@@ -4801,6 +4822,17 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const showHeader = !!imageMobile || !!imageDesktop;
     const onlyHeader = !title && !description;
     const showButtonClose = !isInline;
+    const validatingPhoneRef = React.useRef(false);
+    const validatingEmailRef = React.useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+        userInfo,
+        format: (_a = (index$7.ISO_FORMAT[locale] || index$7.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 ');
@@ -4815,17 +4847,33 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         clearCacheUsedEmailOrPhone();
     }, []);
-    const validatingPhoneRef = React.useRef(false);
-    const validatingEmailRef = React.useRef(false);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        validatingPhoneRef,
-        validatingEmailRef,
-        campaignId,
-        campaign_subot_id,
-        userInfo,
-        format: (_a = (index$7.ISO_FORMAT[locale] || index$7.ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
-    });
+    React.useEffect(() => {
+        formRef.current && setLastFormRef(formRef.current);
+    }, [formRef.current]);
+    React.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]);
+    React.useEffect(() => {
+        let intervalId = null;
+        if (isLightBox && !showThankyou) {
+            intervalId = setInterval(() => {
+                formActiveTime.current += 1;
+                // console.log({ formActiveTime: formActiveTime.current })
+            }, 1000);
+        }
+        return () => clearInterval(intervalId);
+    }, [showThankyou]);
     const listBlockAddedRequired = React.useMemo(() => leadGenFieldRequired(listBlockAdded), listBlockAdded);
     const disabledButtonSubmit = React.useMemo(() => {
         if (listBlockAddedRequired.length) {
@@ -4931,7 +4979,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);
@@ -4941,7 +4994,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);
     };
@@ -4987,7 +5045,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                     React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
     const PopupOtp = showOtpPhone && (React__default["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["default"].createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
     const PopupContent = (React__default["default"].createElement("div", { className: core.clsx('leadgen-content', {
@@ -5135,7 +5198,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 } = React.useContext(LeadGenContext$1);
     React.useEffect(() => {
@@ -5254,7 +5317,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["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, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
+        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__default["default"].createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));
@@ -5262,9 +5325,69 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
     return null;
 };
 
+const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
+const formatFormData = (currentForm, formData) => formData.map((i) => {
+    var _a, _b, _c, _d;
+    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 leadControl = ((_c = currentForm
+        .querySelector(`*[name="${i.name}"][data-lead-control]`)) === null || _c === void 0 ? void 0 : _c.getAttribute('data-lead-control')) ||
+        ((_d = currentForm
+            .querySelector(`*[data-extra][data-name="${i.name}"]`)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-lead-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__default["default"](i.value).format('YYYY-MM-DD')
+            : i.value;
+    return {
+        key: i.name,
+        value,
+        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 = React.useRef();
     const leadStartTimeRef = React.useRef(Date.now());
     const { apiUrl } = React.useMemo(() => {
@@ -5280,6 +5403,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     const [action, setAction] = React.useState('');
     const [showThankyou, setShowThankyou] = React.useState(null);
     const [showEmpty, setShowEmpty] = React.useState(false);
+    const currentLayout = React.useMemo(() => showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout, [showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout]);
     React.useEffect(() => {
         if (forceCampaign) {
             setShowCampaign(forceCampaign);
@@ -5302,14 +5426,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) => tslib_es6.__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) {
                     miscCookieHelper.setCookie(`lead_closed_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupVersion}`, { domain: '.' + siteDomain, path: '/' });
@@ -5319,21 +5444,73 @@ 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: miscCookieHelper.getCookie('hhg-id'),
-                duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
+        const formData = Object.keys(formDataObj)
+            .filter((key) => !!formDataObj[key])
+            .map((key) => ({
+            name: key,
+            value: String(formDataObj[key]),
+        }));
+        let formatedFormData = null;
+        if (!showThankyou) {
+            formatedFormData = formatFormData(formRef, formData);
+        }
+        yield Promise.all([
+            fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    action: 'CLICK',
+                    url: location.href.toLowerCase(),
+                    title_article: document.title,
+                    cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                    duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
+                }),
             }),
-        });
+            !showThankyou &&
+                trackingCompletionForm({
+                    commonData: {
+                        cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                        ga_client_id: miscCookieHelper.getCookie('_ga') || null,
+                        country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN',
+                        status: 'in_progress',
+                        campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
+                        total_fields: listBlockAdded.length,
+                    },
+                    currentLayout,
+                    formParams: Object.assign(Object.assign({}, params), { formValues: formatedFormData }),
+                }),
+        ]);
         onCloseBase();
-    }; //
+    });
+    const onUnmount = (params) => tslib_es6.__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 formData = Object.keys(formDataObj)
+            .filter((key) => !!formDataObj[key])
+            .map((key) => ({
+            name: key,
+            value: String(formDataObj[key]),
+        }));
+        const formatedFormData = formatFormData(formRef, formData);
+        const data = formatTrackingData({
+            commonData: {
+                cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                ga_client_id: miscCookieHelper.getCookie('_ga') || null,
+                country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN',
+                status: 'in_progress',
+                campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
+                total_fields: listBlockAdded.length,
+            },
+            currentLayout,
+            formParams: Object.assign(Object.assign({}, params), { formValues: formatedFormData }),
+        });
+        const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
+        navigator.sendBeacon(`${apiUrl}api/collection/tracking-completion`, blob);
+    });
     React.useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
             return;
@@ -5372,8 +5549,24 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             DEBUG_URL,
         });
     }, []);
-    const onSubmit = (currentForm, formDataObj, categoryLevel, categoryData) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const trackingCompletionForm = React.useCallback((params) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        const { currentLayout, formParams } = params;
+        const { formValues } = formParams;
+        if ([LEADGEN_LAYOUT.InlineA, LEADGEN_LAYOUT.InlineB].includes(currentLayout) &&
+            Object.keys(formValues).length === 0)
+            return;
+        const data = formatTrackingData(params);
+        return fetch(`${apiUrl}api/collection/tracking-completion`, {
+            method: 'POST',
+            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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        const { formRef, listBlockAdded, formValues: formDataObj } = params;
         if (!formDataObj || Object.values(formDataObj).every((v) => !Boolean(v))) {
             setShowEmpty(true);
             return;
@@ -5386,55 +5579,26 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             value: String(formDataObj[key]),
         }));
         console.log('** RYAN index.tsx 218 formData : ', formData);
-        const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
         // Get ga_client_id from cookies
         const gaCookie = miscCookieHelper.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__default["default"](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 formatedFormData = formatFormData(formRef, formData);
+        const commonData = {
             cookie_id: miscCookieHelper.getCookie('hhg-id'),
             ga_client_id: gaCookie,
         };
+        const data = Object.assign({ url: location.href.toLowerCase(), title_article: document.title, meta: [...formatedFormData, ...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!');
             miscCookieHelper.setCookie(`lead_submited_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.targetType}`, { domain: '.' + siteDomain, path: '/' });
@@ -5443,13 +5607,20 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             LeadLog(`⌛ Popup will show again after ${expiresDay} days!`);
             miscCookieHelper.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 ? utils.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();
@@ -5468,15 +5639,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 (
@@ -5533,16 +5704,22 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default["default"].createElement(LeadGenContext$1.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
+    return (React__default["default"].createElement(LeadGenContext$1.Provider, { value: {
+            primaryColor,
+            apiUrl,
+            siteDomain,
+            siteId,
+            locale,
+        } },
         React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
             React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$7.ZINDEX_SSO - 9e6 } },
-                React__default["default"].createElement(core.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["default"].createElement(core.Transition, { mounted: Boolean(((_b = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _b === void 0 ? void 0 : _b.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {
                     var _a;
                     return (React__default["default"].createElement(core.Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        !!showCampaign.extra_fields.currentLayout &&
-                            !showCampaign.extra_fields.currentLayout.includes('Inline') &&
-                            !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                        React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
+                        !!currentLayout &&
+                            !currentLayout.includes('Inline') &&
+                            !currentLayout.includes('Sidebar') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
+                        React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
                 })))))));
 };
 const LeadGen = _LeadGen;