@hhgtech/hhg-components 1.29.376 → 1.29.377

package/build/lead.js

@@ -2,56 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-bf6cd143.js');
+var tslib_es6 = require('./tslib.es6-382c2098.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-544198ba.js');
-var translationsContext = require('./translationsContext-1c8d4e80.js');
+var index = require('./index-4ef95ce5.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var utils$1 = require('./utils-a1630390.js');
-var index$1 = require('./index-523bb86c.js');
-var index$2 = require('./index-83c6c088.js');
-var index$4 = require('./index-08d8cbd8.js');
-var index$3 = require('./index-306eaa41.js');
-require('./index.styles-8cd2027d.js');
+var index$1 = require('./index-a8a6811d.js');
+var translationsContext = require('./translationsContext-77e8b51d.js');
+var utils$1 = require('./utils-9897c832.js');
+var index$2 = require('./index-ab10bfbd.js');
+var index$3 = require('./index-7a1a19b8.js');
+var index$5 = require('./index-8de9dafd.js');
+var index$4 = require('./index-ec2a6804.js');
+require('./index.styles-93482132.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-92ab7ddd.js');
-var index$8 = require('./index-a4d95f34.js');
-require('./index-636eee98.js');
-var index$6 = require('./index-86b0a16d.js');
-require('./other-b45074a7.js');
-require('./index-eba3649a.js');
-var utils = require('./utils-e51926c3.js');
+require('./useMantineLocale-0b4923f9.js');
+var index$9 = require('./index-5c14e44a.js');
+require('./index-5fca2b2a.js');
+var index$7 = require('./index-6e35bd36.js');
+require('./other-29109363.js');
+require('./index-1361ac56.js');
+var utils = require('./utils-97911642.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-30a15310.js');
-var index$5 = require('./index-527a29f2.js');
-var translationsProvider = require('./translationsProvider-fa58c6d6.js');
-var Locale = require('./Locale-b6064525.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-f35d3309.js');
+var index$6 = require('./index-8beefd49.js');
+var translationsProvider = require('./translationsProvider-a1e60bb3.js');
+var Locale = require('./Locale-089cc651.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-0f143f39.js');
-var index$7 = require('./index-6f240e1d.js');
-var index$a = require('./index-c346711f.js');
-var useScreenSize = require('./useScreenSize-a6ae2cf1.js');
+var togetherComponentGlobalContext = require('./utils-bdab5a61.js');
+var index$8 = require('./index-5e298267.js');
+var index$b = require('./index-d099a41c.js');
+var useScreenSize = require('./useScreenSize-16e2a8b6.js');
 var ReactDOM = require('react-dom');
-var index$9 = require('./index-8d2d5de5.js');
-var InputDate = require('./InputDate-38feaf23.js');
-var Close = require('./Close-4f8a2bc3.js');
+var index$a = require('./index-07d16b52.js');
+var InputDate = require('./InputDate-8a4169c9.js');
+var Close = require('./Close-4b1449df.js');
+require('./constantsIsProduction.js');
+require('./normalizeLink-0f9f28ec.js');
+require('./constantsDomainLocales.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-94f3b0a8.js');
+require('./useUniqueId-d133d30b.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
-require('./constantsDomainLocales.js');
-require('./constantsIsProduction.js');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
 require('./i18n-values/en-PH.js');
@@ -65,11 +67,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-48cebf10.js');
+require('./index-7ecdf2e7.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-8a5132a5.js');
+require('./constants-c2db0662.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -378,7 +380,7 @@ class Store {
 }
 const leadStore = new Store();
 
-const LEADGEN_API_METHOD = {
+const METHOD = {
     GET: 'get',
     POST: 'POST',
 };
@@ -387,6 +389,23 @@ const LEADGEN_API_PATH = {
     V2_SUBSCRIPTION_LEAD: 'api/v2/subscription-box',
     V2_SUBSCRIPTION_INFO: 'api/campaign/get-title',
 };
+const SSO_API_PATH = {
+    USER_UPDATE: 'api/user/update',
+};
+const ssoApi = {
+    call(_a) {
+        var { url, data } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
+        const token = miscCookieHelper.getCookie(index.BEARER_TOKEN_COOKIE);
+        config.body = JSON.stringify(data);
+        config.headers = {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        };
+        return fetch(`${leadStore.apiSsoUrl}${url}`, config)
+            .then((res) => res.json())
+            .catch(() => ({}));
+    },
+};
 const leadApi = {
     call(_a) {
         var { url, data = undefined } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
@@ -493,29 +512,33 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
 const getCampaignByCode = (campaign_code) => {
     return leadApi.call({
         url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
-        method: LEADGEN_API_METHOD.GET,
+        method: METHOD.GET,
     });
 };
 const getSubscriptionBoxInfo = ({ category, site, }) => {
     return leadApi.call({
         url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}`,
-        method: LEADGEN_API_METHOD.GET,
+        method: METHOD.GET,
     });
 };
 const postSubscriptionBoxLead = ({ data }) => {
     return leadApi.call({
         url: LEADGEN_API_PATH.V2_SUBSCRIPTION_LEAD,
-        method: LEADGEN_API_METHOD.POST,
+        method: METHOD.POST,
         data,
     });
 };
-const postUserInfoFromLeadGen = ({}) => {
-    return;
+const postUserInfoFromLeadGen = ({ name }) => {
+    return ssoApi.call({
+        url: SSO_API_PATH.USER_UPDATE,
+        method: METHOD.POST,
+        data: { name },
+    });
 };
 const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
     return leadApi.call({
         url: `api/campaign/${code}/impression`,
-        method: LEADGEN_API_METHOD.POST,
+        method: METHOD.POST,
         data: {
             action,
             title_article,
@@ -640,7 +663,7 @@ const clearCacheUsedEmailOrPhone = () => {
 // You can give context variables any name
 const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = form.createFormContext();
 const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     React.useEffect(() => {
         if (!window.intlTelInputUtils) {
@@ -870,7 +893,7 @@ const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, sh
 const Description = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
     const { description } = React.useContext(LeadGenComponentContext);
-    return description ? (React__default["default"].createElement(index$1.Text, Object.assign({ size: "p3" }, rest), description)) : null;
+    return description ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "p3" }, rest), description)) : null;
 };
 
 const LeadGenContext$1 = React.createContext({});
@@ -926,7 +949,7 @@ const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries$1, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null) })),
         React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
-        React__default["default"].createElement(index$2.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: required, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
+        React__default["default"].createElement(index$3.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: required, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
                 setSearchValue(query);
             }, filter: () => true, clearable: true, searchable: true, onChange: (val) => setAddress(val || ''), icon: React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
                 React__default["default"].createElement("path", { d: "M10 9.792q.605 0 1.032-.427.426-.428.426-1.032 0-.603-.426-1.031A1.4 1.4 0 0 0 10 6.875q-.604 0-1.032.427a1.4 1.4 0 0 0-.426 1.031q0 .604.426 1.032.428.426 1.032.427m0 8.083q-.145 0-.292-.042a.7.7 0 0 1-.27-.145Q6.478 15 5.01 12.708 3.54 10.418 3.54 8.5q0-3.021 1.949-4.823T10 1.875t4.51 1.802q1.95 1.802 1.949 4.823 0 1.917-1.468 4.208-1.47 2.292-4.427 4.98a.7.7 0 0 1-.271.145 1 1 0 0 1-.292.042", fill: "#8C8C8C" })), autoComplete: 'no-auto-complete-' + randRef.current, rightSection: React__default["default"].createElement(React__default["default"].Fragment, null) }, form.getInputProps(name)))));
@@ -955,15 +978,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'SubtitleBlock':
                 return (React__default["default"].createElement(SubtitleBlock$1, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default["default"].createElement(index$2.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                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))));
             case 'NumberBlock':
-                return (React__default["default"].createElement(index$2.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                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))));
             case 'EmailBlock':
-                return (React__default["default"].createElement(index$2.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                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))));
             case 'PhoneOtpBlock':
@@ -971,12 +994,12 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'ZaloOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                return (React__default["default"].createElement(index$2.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
+                return (React__default["default"].createElement(index$3.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
                     // error={errorField.phone}
                     className: cx('leadgen-control', classes.control), labelProps: {
                         htmlFor: id,
                     } }, form.getInputProps(value)),
-                    React__default["default"].createElement(index$2.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
+                    React__default["default"].createElement(index$3.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
@@ -987,12 +1010,12 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             }
             case 'DateBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$4.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", 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 },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$3.Button, { type: "button", size: "md", color: primaryColor, className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: primaryColor, className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
@@ -1001,26 +1024,26 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                     isSendMailChimp && (React__default["default"].createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default["default"].createElement(index$2.Checkbox.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
+                    React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.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" }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    isSendMailChimp && (React__default["default"].createElement(index$2.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index$2.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$2.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    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" }))))));
             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' }),
-                    React__default["default"].createElement(index$2.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                    React__default["default"].createElement(index$3.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$2.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" }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
     })));
@@ -1047,7 +1070,7 @@ var useStyles$1 = core.createStyles((theme) => {
 const Heading = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
     const { heading } = React.useContext(LeadGenComponentContext);
-    return heading ? (React__default["default"].createElement(index$1.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
+    return heading ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
 };
 
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
@@ -1141,7 +1164,7 @@ const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps,
                         control: classes.control,
                     }, listBlockAdded: listBlockAdded, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit, popoverProps: popoverProps })),
             ((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) ? null : (React__default["default"].createElement("div", { className: classes.submitBtnWrapper },
-                React__default["default"].createElement(index$3.Button, Object.assign({ size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, loading: isSubmitLoading, color: primaryColor }, submitProps), popUpSubmitText))))));
+                React__default["default"].createElement(index$4.Button, Object.assign({ size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, loading: isSubmitLoading, color: primaryColor }, submitProps), popUpSubmitText))))));
 };
 const Form = (props) => {
     const { showOtpPhone, showThankyou } = React.useContext(LeadGenComponentContext);
@@ -1162,7 +1185,7 @@ var useStyles = core.createStyles(() => {
 });
 
 const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, styles, classNames, }) => {
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     const phone = otpData.phone;
     const otpType = otpData.type;
     const [otp, setOtp] = React.useState('');
@@ -1272,9 +1295,9 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
                 submitOtp();
             }, className: cx(classes.root, className) },
             React__default["default"].createElement("div", { className: classes.header },
-                React__default["default"].createElement(index$5.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
-                React__default["default"].createElement(index$1.Text, { size: "p3", className: classes.description }, t('lead.otp.desc', { phone: displayPhone }))),
-            React__default["default"].createElement(index$2.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: t('lead.otp.phonePlaceholder'), className: classes.control, label: t('lead.otp.phoneLabel'), "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
+                React__default["default"].createElement(index$6.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
+                React__default["default"].createElement(index$2.Text, { size: "p3", className: classes.description }, t('lead.otp.desc', { phone: displayPhone }))),
+            React__default["default"].createElement(index$3.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: t('lead.otp.phonePlaceholder'), className: classes.control, label: t('lead.otp.phoneLabel'), "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
                     setIsDirty(true);
                     setOtp(v);
                     if (isDirty && !v)
@@ -1283,10 +1306,10 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
                         setErrorMsg(undefined);
                 }, error: isDirty ? errorMsg : undefined }),
             React__default["default"].createElement("div", { className: classes.actions },
-                React__default["default"].createElement(index$3.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
+                React__default["default"].createElement(index$4.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
                     // onClick={() => submitOtp()}
                     disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
-                React__default["default"].createElement(index$3.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
+                React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
                         sendOtp();
                     }, disabled: !!resendTimer }, t('lead.otp.resend', {
                     timer: resendTimer ? ` (${resendTimer}s)` : '',
@@ -2075,11 +2098,15 @@ const useLeadGenContext = () => {
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const customParseFormat = require('dayjs/plugin/customParseFormat');
 dayjs__default["default"].extend(customParseFormat);
+/** https://hhgdev.atlassian.net/browse/EL-565 */
+const LEADGEN_MAP_VALIDATE = {
+    name: 'leadgen.message.error.name_required',
+};
 // You can give context variables any name
 const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
     var _a;
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     const initialValues = React.useMemo(() => mappingSSOToLead(userInfo), [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'];
@@ -2106,13 +2133,16 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
             return (value) => {
                 var _a;
                 const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
+                const { data } = block || {};
+                const { value: fieldName } = data;
                 if (!formRef.current.isTouched(name))
                     return;
                 if ((typeof value === 'string' && value.trim() === '') ||
                     typeof value === 'undefined' ||
                     (Array.isArray(value) && value.length === 0)) {
                     return isBLockRequired
-                        ? t('validator.required')
+                        ? t((LEADGEN_MAP_VALIDATE === null || LEADGEN_MAP_VALIDATE === void 0 ? void 0 : LEADGEN_MAP_VALIDATE[fieldName]) ||
+                            'validator.required')
                         : cb === null || cb === void 0 ? void 0 : cb(value);
                 }
                 return cb === null || cb === void 0 ? void 0 : cb(value);
@@ -2169,7 +2199,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
                         if (value &&
                             window.intlTelInputUtils &&
                             !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
-                            return t('validator.phone');
+                            return t('leadgen.message.error.phone_invalid');
                         }
                         if (!value)
                             return;
@@ -2363,7 +2393,7 @@ const StyledLeadGenSubscriptionBox = styled__default["default"].div `
     }
   }
 
-  @media screen and (min-width: 768px) {
+  ${utils$1.MediaQueries.mbUp} {
     .leadgen-subscription_box_body {
       display: flex;
       > form {
@@ -2385,6 +2415,16 @@ const StyledLeadGenSubscriptionBox = styled__default["default"].div `
       }
     }
   }
+
+  ${utils$1.MediaQueries.smbDown} {
+    &[data-type='subscription_box_A'] {
+      border-inline: 0;
+      border-radius: 0;
+      margin-inline: -16px;
+      box-shadow: 0px 0px 1px 0px #0000000a, 0px 0px 2px 0px #0000000f,
+        0px 4px 8px 0px #0000000a;
+    }
+  }
 `;
 const StyledLeadGenSubscriptionBoxA = styled__default["default"].div `
   .leadgen-form_input {
@@ -2408,7 +2448,7 @@ const PhoneInput = React.forwardRef((props, ref) => {
     const id = idProps || uuid.v1() + name;
     return (React__default["default"].createElement(core.Input.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
-            React__default["default"].createElement(index$2.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" })))));
+            React__default["default"].createElement(index$3.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) => {
@@ -2813,7 +2853,7 @@ const GoogleLocationBlock = (props) => {
     }, []);
     return (React__default["default"].createElement(core.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: index$6.ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
+        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: index$7.ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
             return (React__default["default"].createElement(React__default["default"].Fragment, null,
                 LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null), style: { width: '100%' } })),
                 children));
@@ -2979,7 +3019,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
     const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
     const { submitBlock } = actionBlocks || {};
     const { apiLeadUrl, subscriptionIcon, subscriptionTitle, submitSubscriptionBox, impression, onFinish, } = useLeadGenContext();
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     const { action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
     const refContainer = React.useRef(null);
     const [loading, setLoading] = React.useState(false);
@@ -3032,10 +3072,13 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
                     newValues['phone_number'] = phone.nationalNumber;
                     /** Only case login has this update */
                     if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid)) {
+                        const userInfoPhone = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code) + (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone);
                         ssoValues['sso_verified_profile'] =
-                            phone.number === (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) ? 1 : 0;
+                            phone.number === userInfoPhone ? 1 : 0;
                         ssoValues['sso_user_id'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
                         ssoValues['sso_uuid'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid;
+                        LeadLog('** LeadGen SB userInfoPhone : ', userInfoPhone);
+                        LeadLog('** LeadGen SB userInfoPhoneInput : ', phone.number);
                     }
                 }
                 continue;
@@ -3044,11 +3087,29 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
         }
         setLoading(true);
         try {
-            const { _data } = (yield submitSubscriptionBox(Object.assign(Object.assign({}, newValues), ssoValues))) || {};
+            const reqValues = Object.assign(Object.assign({}, newValues), ssoValues);
+            const { _data } = (yield submitSubscriptionBox(reqValues)) || {};
             const { model } = _data || {};
             if (model && (model === null || model === void 0 ? void 0 : model.id)) {
                 setShowThankyou(true);
-                onFinish === null || onFinish === void 0 ? void 0 : onFinish(Object.assign(Object.assign({}, newValues), ssoValues), listBlockAdded || []);
+                const metaValues = {
+                    blocks: listBlockAdded || [],
+                    isUpdateSso: false,
+                };
+                /**
+                 *  https://hhgdev.atlassian.net/browse/EL-468
+                 * 	This feature is just using in Subscription Box
+                 */
+                if (newValues === null || newValues === void 0 ? void 0 : newValues.name) {
+                    const { _data: ssoData, code: ssoErrorCode } = yield Service.postUserInfoFromLeadGen({ name: newValues === null || newValues === void 0 ? void 0 : newValues.name });
+                    if (ssoErrorCode && !ssoData) {
+                        return;
+                    }
+                    metaValues.isUpdateSso = true;
+                    onFinish === null || onFinish === void 0 ? void 0 : onFinish(reqValues, metaValues);
+                    return;
+                }
+                onFinish === null || onFinish === void 0 ? void 0 : onFinish(reqValues, metaValues);
             }
         }
         catch (error) {
@@ -3075,7 +3136,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
         };
     }, [categoryId]);
     return (React__default["default"].createElement("div", { ref: refContainer },
-        React__default["default"].createElement(StyledLeadGenSubscriptionBox, null,
+        React__default["default"].createElement(StyledLeadGenSubscriptionBox, { "data-type": "subscription_box_A" },
             showThankyou && (React__default["default"].createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiLeadUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
             !showThankyou && (React__default["default"].createElement(LeadGenSubscriptionBoxA, { loading: loading, image: subscriptionIcon || image, title: subscription_title, submitText: (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value, blocks: listBlockAdded, locale: locale, form: form, rules: validateObj, onFinish: middlewareOnSubmit })))));
 };
@@ -3148,11 +3209,11 @@ const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onCl
         React__default["default"].createElement("div", { className: "le-center-tab-popup" },
             React__default["default"].createElement("div", { style: { position: 'relative' } },
                 React__default["default"].createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    index$7.isVideo(imageMobile) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
+                    index$8.isVideo(imageMobile) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
                         React__default["default"].createElement("source", { src: imageMobile }))) : (React__default["default"].createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
                             aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
                         } })),
-                    index$7.isVideo(imageDestkop) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
+                    index$8.isVideo(imageDestkop) ? (React__default["default"].createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
                         React__default["default"].createElement("source", { src: imageDestkop }))) : (React__default["default"].createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
                             aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
                         } }))),
@@ -3231,7 +3292,7 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
             }))),
             linkText && (React__default["default"].createElement("div", null,
                 React__default["default"].createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
-                    React__default["default"].createElement(index$3.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
+                    React__default["default"].createElement(index$4.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
 };
 
 const InlineLayout = ({ content, inlinePosition, }) => {
@@ -3368,7 +3429,7 @@ const EmptyIcon = (props) => {
 };
 
 const EmptyComponent = ({ onClose, onContinue, }) => {
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     return (React__default["default"].createElement("div", { className: "leadgen-empty" },
         React__default["default"].createElement("div", { className: "leadgen-empty_body" },
             React__default["default"].createElement("div", { className: "leadgen-empty_wrapper" },
@@ -3728,13 +3789,13 @@ const ChoiceField = (props) => {
 const TitleBlock = ({ children, align, }) => (React__default["default"].createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     const form = useLeadFormContext();
     const formValues = form.values;
     const labelTuples = React.useMemo(() => {
-        return ((index$6.ISO_FORMAT === null || index$6.ISO_FORMAT === void 0 ? void 0 : index$6.ISO_FORMAT[locale]) || index$6.ISO_FORMAT['vi-VN']).dateFormat
+        return ((index$7.ISO_FORMAT === null || index$7.ISO_FORMAT === void 0 ? void 0 : index$7.ISO_FORMAT[locale]) || index$7.ISO_FORMAT['vi-VN']).dateFormat
             .split('/')
-            .map((key) => { var _a; return t((_a = index$8.COMMON_DATE_TRANSLATE_KEY === null || index$8.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$8.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
+            .map((key) => { var _a; return t((_a = index$9.COMMON_DATE_TRANSLATE_KEY === null || index$9.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$9.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
     }, [locale]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
@@ -3777,7 +3838,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     }) },
                     React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
                         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default["default"].createElement(index$2.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
+                            React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
                                 id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
             }
@@ -3793,7 +3854,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$9.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$a.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
@@ -3802,7 +3863,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default["default"].createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default["default"].createElement(index$2.Checkbox.Group, Object.assign({ withAsterisk: required, 
+                    React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
                         label: placeholder, size: "md", sx: {
                             display: 'flex',
@@ -3811,19 +3872,19 @@ 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$2.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" }))))));
             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 })),
-                    React__default["default"].createElement(index$2.Radio.Group, Object.assign({ withAsterisk: required, 
+                    React__default["default"].createElement(index$3.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) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.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" }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field", key: index },
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default["default"].createElement(index$2.Select
+                    React__default["default"].createElement(index$3.Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
@@ -3835,7 +3896,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$2.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" }, tncInputProps)))));
         }
         return null;
     })));
@@ -3938,12 +3999,12 @@ const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
     if (!src) {
         return null;
     }
-    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$7.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
+    return (React__default["default"].createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: core.clsx(className, 'leadgen-header_image'), style: style }, index$8.isVideo(src) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default["default"].createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
 };
 
 const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
     const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { t } = index.useTranslations();
+    const { t } = index$1.useTranslations();
     const phone = otpData.phone;
     const otpType = otpData.type;
     const [otp, setOtp] = React.useState('');
@@ -4056,8 +4117,8 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
                     timer: resendTimer ? ` (${resendTimer}s)` : '',
                 }))) },
             React__default["default"].createElement("div", { className: "leadgen-form_inner" },
-                React__default["default"].createElement(index$2.Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
-                    React__default["default"].createElement(index$2.OTP, { ref: inputRef, name: '_' + name + '-otp', value: otp, onChange: (v) => {
+                React__default["default"].createElement(index$3.Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
+                    React__default["default"].createElement(index$3.OTP, { ref: inputRef, name: '_' + name + '-otp', value: otp, onChange: (v) => {
                             setIsDirty(true);
                             setOtp(v.toString());
                             if (isDirty && !v)
@@ -4146,7 +4207,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         campaignId,
         campaign_subot_id,
         userInfo,
-        format: (_a = (index$6.ISO_FORMAT[locale] || index$6.ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
+        format: (_a = (index$7.ISO_FORMAT[locale] || index$7.ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -4289,7 +4350,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$a.DrawerComponent, { fadeFromIndex: index$6.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$b.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
         PopupWrapper,
         React__default["default"].createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
         isFullscreen ? (React__default["default"].createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
@@ -4352,7 +4413,7 @@ const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile,
         React__default["default"].createElement("aside", { className: "le-only-mobile" },
             React__default["default"].createElement("div", { className: "le-skin-mobile" },
                 React__default["default"].createElement("div", { style: { position: 'relative' } },
-                    index$7.isVideo(imageMobile) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true },
+                    index$8.isVideo(imageMobile) ? (React__default["default"].createElement("video", { muted: true, autoPlay: true, loop: true },
                         React__default["default"].createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default["default"].createElement("img", { src: imageMobile, style: {
                             width: '100%',
                             aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
@@ -4797,7 +4858,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     }, [showCampaign]);
     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$6.ZINDEX_SSO - 9e6 } },
+            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" }, (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,