@hhgtech/hhg-components 1.29.385 → 1.29.386-beta-2

package/build/lead.js

@@ -2,55 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-bf41d482.js');
+var tslib_es6 = require('./tslib.es6-a55f85ea.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-04576d76.js');
+var index = require('./index-d8c6b6b4.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-774e314c.js');
-var translationsContext = require('./translationsContext-052179e6.js');
-var utils$1 = require('./utils-f7e488f9.js');
-var index$2 = require('./index-7f246e6c.js');
-var index$3 = require('./index-f414885e.js');
-var index$5 = require('./index-a267934e.js');
-var index$4 = require('./index-f26dc6fb.js');
-require('./index.styles-ff1bf8b3.js');
+var index$1 = require('./index-f6528071.js');
+var translationsContext = require('./translationsContext-98dfab14.js');
+var utils$1 = require('./utils-2710f99e.js');
+var index$2 = require('./index-84b0ec37.js');
+var index$3 = require('./index-5a943d2c.js');
+var index$5 = require('./index-94450e54.js');
+var index$4 = require('./index-adeb098c.js');
+require('./index.styles-36f7f621.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-5a19d187.js');
-var index$9 = require('./index-854e59e3.js');
-require('./index-9c70447c.js');
-var index$7 = require('./index-a2193179.js');
-require('./other-542dc058.js');
-require('./index-fc49c62d.js');
-var utils = require('./utils-463fe488.js');
+require('./useMantineLocale-59bf5cf3.js');
+var index$a = require('./index-bdd5879b.js');
+require('./index-d9191e3d.js');
+var index$7 = require('./index-f9a7a794.js');
+require('./other-740d4e47.js');
+require('./index-e34f5b20.js');
+var utils = require('./utils-6f3eea54.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-8312d521.js');
-var index$6 = require('./index-ba273d2c.js');
-var translationsProvider = require('./translationsProvider-aa21b093.js');
-var Locale = require('./Locale-e920092f.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-6b3db87f.js');
+var index$6 = require('./index-9acae069.js');
+var translationsProvider = require('./translationsProvider-6dca7297.js');
+var Locale = require('./Locale-93ce474c.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-d6404715.js');
-var index$8 = require('./index-13ddea96.js');
-var useScreenSize = require('./useScreenSize-f1a2ec2a.js');
+var togetherComponentGlobalContext = require('./utils-b4ab5297.js');
+var index$8 = require('./index-c5eba44b.js');
+var useScreenSize = require('./useScreenSize-931e7f9f.js');
+var index$9 = require('./index-918f4473.js');
 var ReactDOM = require('react-dom');
-var index$a = require('./index-cee787e5.js');
-var InputDate = require('./InputDate-9543c9be.js');
-var index$b = require('./index-58bbbc56.js');
-var Close = require('./Close-bd8bfbcd.js');
+var index$b = require('./index-8cf138ba.js');
+var InputDate = require('./InputDate-289697b0.js');
+var Close = require('./Close-3e4a41b7.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-575dbb7a.js');
+require('./normalizeLink-70d1680a.js');
 require('./constantsDomainLocales.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-8e579530.js');
+require('./useUniqueId-79f4f6c8.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
@@ -67,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-eb0109eb.js');
+require('./index-cf483238.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-9578f6eb.js');
+require('./constants-bd1ccfd6.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -2140,9 +2140,9 @@ const useLeadGenContext = () => {
 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',
-};
+// 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, }) => {
@@ -2174,16 +2174,13 @@ 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((LEADGEN_MAP_VALIDATE === null || LEADGEN_MAP_VALIDATE === void 0 ? void 0 : LEADGEN_MAP_VALIDATE[fieldName]) ||
-                            'validator.required')
+                        ? t('validator.required')
                         : cb === null || cb === void 0 ? void 0 : cb(value);
                 }
                 return cb === null || cb === void 0 ? void 0 : cb(value);
@@ -2240,7 +2237,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
                         if (value &&
                             window.intlTelInputUtils &&
                             !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
-                            return t('leadgen.message.error.phone_invalid');
+                            return t('validator.phone');
                         }
                         if (!value)
                             return;
@@ -2313,7 +2310,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         }, {});
     }, [listBlockAdded.map((b) => b.name).join(','), format]);
     const form = useLeadForm({
-        validateInputOnChange: true,
+        validateInputOnChange: false,
         validateInputOnBlur: true,
         clearInputErrorOnChange: true,
         validate: validateObj,
@@ -2522,14 +2519,24 @@ const StyledLeadGenFormInner = styled__default["default"].div `
   .leadgen-form_input_checkbox {
     width: 100%;
   }
+
+  .mantine-InputWrapper-error {
+    margin-top: 4px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    color: #f44d2c;
+    font-size: 12px;
+    line-height: 1.5;
+  }
 `;
 
 const cssInputNotShrink$1 = react.css `
   height: 100% !important;
-  min-height: calc(var(--container-height, 56px) * 22 / 56);
+  min-height: calc(var(--container-height, 56px) * 24 / 56);
   color: ${miscTheme.theme.colors.gray800};
-  font-size: var(--input, 16px);
-  line-height: calc(var(--container-height, 56px) * 22 / 56);
+  font-size: var(--input, 15px);
+  line-height: calc(var(--container-height, 56px) * 24 / 56);
+  letter-spacing: -0.3px;
   border: none !important;
   border-radius: 0 !important;
   outline: none !important;
@@ -2553,7 +2560,7 @@ const cssLabelNotShrink$1 = react.css `
   top: calc(var(--container-height) / 2);
   left: var(--space-x, 16px);
   color: ${miscTheme.theme.colors.gray400};
-  font-size: var(--label-not-shrink, 16px);
+  font-size: var(--label-not-shrink, 15px);
   font-weight: 400;
   line-height: calc(var(--container-height, 56px) * 18 / 56);
   margin: 0;
@@ -2564,7 +2571,6 @@ const cssLabelNotShrink$1 = react.css `
 `;
 const cssLabelShrink$1 = react.css `
   color: ${miscTheme.theme.colors.gray600};
-  font-weight: 600;
   font-size: var(--label-shrink, 12px);
   top: calc(var(--container-height) * 7 / 56);
   transform: none;
@@ -2608,12 +2614,12 @@ const cssInputWrapperError$1 = react.css `
 `;
 const StyledTextFieldContainer$1 = styled__default["default"].div `
   --space-x: 16px;
-  --space-y-not-shrink: 16px;
+  --space-y-not-shrink: 15px;
   --space-y-shrink: 7px;
   --container-height: 56px;
   --label-not-shrink: 16px;
   --label-shrink: 12px;
-  --input: 16px;
+  --input: 15px;
 
   position: relative;
   min-width: 100px;
@@ -2638,10 +2644,6 @@ const StyledTextFieldContainer$1 = styled__default["default"].div `
         border-color: ${miscTheme.theme.colors.red400};
       }
     }
-
-    .mantine-InputWrapper-error {
-      font-size: 12px !important;
-    }
   }
 
   .mantine-InputWrapper-label {
@@ -2696,6 +2698,14 @@ const StyledTextFieldContainer$1 = styled__default["default"].div `
     }
   }
 
+  &:focus-within {
+    .mantine-Input-wrapper {
+      transition: 0.25s linear border;
+      border-color: ${miscTheme.theme.colors.primary600};
+      box-shadow: 0 0 4px ${miscTheme.theme.colors.primary200};
+    }
+  }
+
   .PhoneInput {
     --phone-select: 75px;
     --phone-input-space-x: 8px;
@@ -2745,9 +2755,6 @@ const StyledChoiceFieldContainer$1 = styled__default["default"].div `
 
   .mantine-InputWrapper-root {
     display: block;
-    .mantine-InputWrapper-error {
-      font-size: 12px !important;
-    }
   }
 
   .mantine-InputWrapper-label {
@@ -2777,9 +2784,6 @@ const StyledChoiceFieldContainer$1 = styled__default["default"].div `
       input[type='radio'],
       input[type='checkbox'] {
         border-color: ${miscTheme.theme.colors.primary600};
-        + svg {
-          color: ${miscTheme.theme.colors.primary600};
-        }
       }
 
       input[type='radio'] {
@@ -2954,42 +2958,42 @@ const LeadGenForm = React.forwardRef((props, ref) => {
     return (React__default["default"].createElement("form", { ref: formRef, onSubmit: form$1.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
         React__default["default"].createElement(StyledLeadGenFormInner, { className: "leadgen-form_inputs" }, blocks.map((block, idx) => {
             const { id, name: blockName, data } = block;
-            const { placeholder, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
+            const { placeholder: label, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
             const formInputProps = form$1.getInputProps(name);
             const { value, error } = formInputProps;
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                        React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.NumberBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.NumberInput, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                        React__default["default"].createElement(core.NumberInput, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.EmailBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                        React__default["default"].createElement(core.TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.PhoneOtpBlock:
                 case LEADGEN_BLOCK.WhatsappOtpBlock:
                 case LEADGEN_BLOCK.ZaloOtpBlock:
                 case LEADGEN_BLOCK.PhoneBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
+                        React__default["default"].createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                        React__default["default"].createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default["default"].createElement(dates.DateInput, Object.assign({ locale: (utils.MAPPED_LOCALE === null || utils.MAPPED_LOCALE === void 0 ? void 0 : utils.MAPPED_LOCALE[locale]) || utils.MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
+                        React__default["default"].createElement(dates.DateInput, Object.assign({ locale: (utils.MAPPED_LOCALE === null || utils.MAPPED_LOCALE === void 0 ? void 0 : utils.MAPPED_LOCALE[locale]) || utils.MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DropdownBlock:
                     return (React__default["default"].createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                        React__default["default"].createElement(core.Select, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
+                        React__default["default"].createElement(core.Select, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", data: listQuestion.map((l) => ({
                                 value: l.value,
                                 label: l.placeholder,
                             })) }, formInputProps))));
@@ -2999,7 +3003,7 @@ const LeadGenForm = React.forwardRef((props, ref) => {
                     });
                     return (React__default["default"].createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default["default"].createElement(core.Checkbox.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
+                        React__default["default"].createElement(core.Checkbox.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 flexWrap: 'wrap',
@@ -3011,7 +3015,7 @@ const LeadGenForm = React.forwardRef((props, ref) => {
                 case LEADGEN_BLOCK.RadioBlock: {
                     return (React__default["default"].createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default["default"].createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
-                        React__default["default"].createElement(core.Radio.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                        React__default["default"].createElement(core.Radio.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default["default"].createElement(core.Radio, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
@@ -3318,6 +3322,155 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+const StyledLeadGenLightBoxBFooter = styled__default["default"].div `
+  padding-top: calc(var(--spacing-y, 20px) * 8 / 20);
+  padding-inline: var(--spacing-x, 20px);
+  padding-bottom: var(--spacing-y, 20px);
+`;
+const StyledLeadGenLightBoxBBody = styled__default["default"].div `
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-inline: var(--spacing-y, 20px);
+  padding-block: calc(var(--spacing-x, 20px) * 8 / 20);
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+`;
+const StyledLeadGenLightBoxBHeader = styled__default["default"].div `
+  display: flex;
+  padding-top: var(--spacing-y, 20px);
+  padding-inline: var(--spacing-x, 20px);
+  padding-bottom: calc(var(--spacing-y, 20px) * 8 / 20);
+`;
+const StyledLeadGenLightBoxBWrapper = styled__default["default"].div `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const StyledLeadGenLightBoxB = styled__default["default"].div `
+  --spacing-x: 20px;
+  --spacing-y: 20px;
+  --close-width: 24px;
+  --close-height: 24px;
+
+  // For old version, Wrap every thing in children
+  &[data-type='LightBoxB_typeA'] {
+    position: fixed;
+    inset: 0;
+    z-index: ${index$7.ZINDEX_SSO + 1};
+    background-color: #fff;
+
+    .leadgen-wrapper,
+    .leadgen-inner,
+    .leadgen-form {
+      height: 100%;
+    }
+    .leadgen-content {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .leadgen-header {
+      display: none;
+    }
+    .leadgen-title {
+      padding-right: calc(var(--close-width, 24px) * 50 / 24);
+    }
+    .leadgen-description {
+      display: none;
+    }
+    .leadgen-body {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .leadgen-close_btn {
+      top: var(--spacing-y, 20px);
+      right: var(--spacing-x, 20px);
+      width: var(--close-width, 24px) !important;
+      height: var(--close-height, 24px);
+      box-shadow: none;
+      font-size: 24px;
+    }
+
+    .leadgen-empty_footer {
+      .leadgen-btn {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    .leadgen-form_body {
+      overflow: auto;
+      animation: scrolling forwards;
+      animation-timeline: scroll(self);
+    }
+    @keyframes scrolling {
+      0%,
+      to {
+        border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
+      }
+    }
+  }
+`;
+
+const PREFIX_CLS = 'LightBoxB_typeA';
+const LeadGenLightBoxBTypeA = (props) => {
+    const { visible, onVisible, icon, title, buttonText, blocks, children } = props, restProps = tslib_es6.__rest(props, ["visible", "onVisible", "icon", "title", "buttonText", "blocks", "children"]);
+    const formRef = React.useRef();
+    const [open, setOpen] = React.useState(visible);
+    const onOpenChange = React.useCallback((open) => {
+        onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
+    }, [onVisible]);
+    const iconComp = React.useMemo(() => {
+        if (!icon) {
+            return null;
+        }
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }, [icon]);
+    const titleComp = React.useMemo(() => {
+        if (!title) {
+            return null;
+        }
+        return title;
+    }, [title]);
+    const childrenComp = React.useMemo(() => {
+        if (children) {
+            return children;
+        }
+        return (React__default["default"].createElement(StyledLeadGenLightBoxBWrapper, { className: `${PREFIX_CLS}_wrapper lightboxB_wrapper` },
+            React__default["default"].createElement(StyledLeadGenLightBoxBHeader, { className: `${PREFIX_CLS}_header lightboxB_header` },
+                React__default["default"].createElement("div", { className: "lightBoxB_header_icon" }, iconComp),
+                React__default["default"].createElement("div", { className: "lightBoxB_header_title" }, titleComp),
+                React__default["default"].createElement("div", { className: "lightBoxB_header_close", onClick: () => onOpenChange(false) },
+                    React__default["default"].createElement(CloseButton, null))),
+            React__default["default"].createElement(StyledLeadGenLightBoxBBody, { className: `${PREFIX_CLS}_body lightboxB_body` },
+                React__default["default"].createElement(LeadGenForm, Object.assign({ ref: formRef, blocks: blocks }, restProps))),
+            React__default["default"].createElement(StyledLeadGenLightBoxBFooter, { className: `${PREFIX_CLS}_footer lightboxB_footer` },
+                React__default["default"].createElement(index$4.Button, { onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); } }, buttonText))));
+    }, [children, onOpenChange]);
+    React.useEffect(() => {
+        setOpen(visible);
+    }, [visible]);
+    return (React__default["default"].createElement(index$9.DrawerComponent, { open: open, onOpenChange: onOpenChange },
+        React__default["default"].createElement(StyledLeadGenLightBoxB, { "data-type": "LightBoxB_typeA" }, childrenComp)));
+};
+
+const LeadGenLightBoxB = (props) => {
+    return React__default["default"].createElement(LeadGenLightBoxBTypeA, Object.assign({}, props));
+};
+
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { primaryColor } = React.useContext(LeadGenContext$1);
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
@@ -3491,10 +3644,11 @@ const SubtitleBlock = ({ children, align, }) => (React__default["default"].creat
 
 const cssInputNotShrink = react.css `
   height: 100% !important;
-  min-height: calc(var(--container-height, 56px) * 22 / 56);
+  min-height: calc(var(--container-height, 56px) * 24 / 56);
   color: ${miscTheme.theme.colors.gray800};
-  font-size: var(--input, 16px);
-  line-height: calc(var(--container-height, 56px) * 22 / 56);
+  font-size: var(--input, 15px);
+  line-height: calc(var(--container-height, 56px) * 24 / 56);
+  letter-spacing: -0.3px;
   border: none !important;
   border-radius: 0 !important;
   outline: none !important;
@@ -3518,9 +3672,10 @@ const cssLabelNotShrink = react.css `
   top: calc(var(--container-height) / 2);
   left: var(--space-x, 16px);
   color: ${miscTheme.theme.colors.gray400};
-  font-size: var(--label-not-shrink, 16px);
-  font-weight: 400;
-  line-height: calc(var(--container-height, 56px) * 18 / 56);
+  font-size: var(--label-not-shrink, 15px);
+  font-weight: 500;
+  line-height: calc(var(--container-height, 56px) * 24 / 56);
+  letter-spacing: -0.3px;
   margin: 0;
   z-index: 1;
   cursor: pointer;
@@ -3528,9 +3683,10 @@ const cssLabelNotShrink = react.css `
   transition: 0.125s ease-in all;
 `;
 const cssLabelShrink = react.css `
-  color: ${miscTheme.theme.colors.gray600};
-  font-weight: 600;
+  color: ${miscTheme.theme.colors.gray400};
   font-size: var(--label-shrink, 12px);
+  line-height: calc(var(--container-height, 56px) * 18 / 56);
+  letter-spacing: -0.2px;
   top: calc(var(--container-height) * 7 / 56);
   transform: none;
   transition: 0.125s ease-out all;
@@ -3573,12 +3729,12 @@ const cssInputWrapperError = react.css `
 `;
 const StyledTextFieldContainer = styled__default["default"].div `
   --space-x: 16px;
-  --space-y-not-shrink: 16px;
+  --space-y-not-shrink: 15px;
   --space-y-shrink: 7px;
   --container-height: 56px;
   --label-not-shrink: 16px;
   --label-shrink: 12px;
-  --input: 16px;
+  --input: 15px;
 
   position: relative;
   min-width: 100px;
@@ -3835,12 +3991,12 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     const labelTuples = React.useMemo(() => {
         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$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); });
+            .map((key) => { var _a; return t((_a = index$a.COMMON_DATE_TRANSLATE_KEY === null || index$a.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$a.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;
         const { name = '', data = {}, id } = b || {};
-        const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
+        const { placeholder: label, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
         const required = (_a = data.required) !== null && _a !== void 0 ? _a : true;
         const formValue = (formValues === null || formValues === void 0 ? void 0 : formValues[value]) || null;
         switch (name) {
@@ -3850,23 +4006,23 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default["default"].createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
                 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: "text", placeholder: placeholder, 
+                    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: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(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: placeholder, 
+                    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: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "number", 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: placeholder, 
+                        placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -3876,25 +4032,25 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    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(core.Input.Wrapper, { size: "md", withAsterisk: required, label: label, "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$3.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: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
                                 id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                    React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = tslib_es6.__rest(_c, ["error"]);
-                return (React__default["default"].createElement(core.Input.Wrapper, { key: index, size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
+                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))));
             }
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$a.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$b.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))));
@@ -3905,7 +4061,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "data-name": value + '-mailchimp' })),
                     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: {
+                        label: label, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
@@ -3918,7 +4074,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     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) => {
+                        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" }))))));
             case 'DropdownBlock':
@@ -3928,7 +4084,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: placeholder, placeholder: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                        label: label, placeholder: " ", withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
@@ -4191,7 +4347,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [open, setOpen] = React.useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = React.useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
-    const [snap, setSnap] = React.useState(0.8);
+    // const [snap, setSnap] = useState<string | number | null>(0.8)
     const formRef = React.useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -4259,10 +4415,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     }, [...listBlockAddedRequired.map((k) => form.values[k])]);
     const onFocus = (e) => {
         e.preventDefault();
-        setTimeout(() => {
-            const target = e.target;
-            target.scrollIntoView({ block: 'center', behavior: 'auto' });
-        }, 300); // Wait a bit to let keyboard open
+        if (isMobile) {
+            setTimeout(() => {
+                const target = e.target;
+                target.scrollIntoView({ block: 'center', behavior: 'auto' });
+            }, 300); // Wait a bit to let keyboard open
+        }
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -4410,18 +4568,24 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (
-    // <LeadGenLightBoxB
-    //   form={form}
-    //   loading={isSubmitLoading}
-    //   visible={open}
-    //   onVisible={() => onOpenChange(false)}
+    const PopupContainer = isDrawer ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (
+    // <DrawerComponent
+    //   fadeFromIndex={ZINDEX_SSO - 9e6}
+    //   open={open}
+    //   snapPoints={[0.8, 1]}
+    //   activeSnapPoint={snap}
+    //   setActiveSnapPoint={setSnap}
+    //   onOpenChange={onOpenChange}
+    //   overlayClassName={popupContainerClassName}
+    //   className="leadgen-drawer"
     // >
     //   {PopupWrapper}
-    // </LeadGenLightBoxB>
-    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 },
+    //   <div
+    //     style={{ position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }}
+    //     onClick={() => setSnap(1)}
+    //   />
+    // </DrawerComponent>
+    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: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,