@hhgtech/hhg-components 1.29.332-beta-19 → 1.29.332-beta-21

package/build/lead.js

@@ -2,46 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-054f84d8.js');
+var tslib_es6 = require('./tslib.es6-666e0372.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-4a2fde9a.js');
-var index$1 = require('./index-8195a6a7.js');
-var index$2 = require('./index-ffa3e725.js');
-var index$4 = require('./index-18dcf643.js');
-var utils = require('./utils-37ccd05e.js');
+var index = require('./index-fe16a421.js');
+var index$1 = require('./index-8d68673b.js');
+var index$2 = require('./index-4a281a92.js');
+var index$4 = require('./index-e3cba183.js');
+var utils = require('./utils-b90924f8.js');
 require('@mantine/dates');
-var index$8 = require('./index-771d4647.js');
-require('./index-307c232b.js');
-var index$9 = require('./index-f15465ce.js');
-require('./useMantineLocale-532a1a5a.js');
-var index$5 = require('./index-50bcb970.js');
-require('./index.styles-2785a8c2.js');
-var translationsContext = require('./translationsContext-123bd5af.js');
-require('@mantine/hooks');
-var utils$1 = require('./utils-79336cac.js');
-require('./other-de461b44.js');
-require('./index-e22b949d.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-06c61a53.js');
-var index$3 = require('./index-cbab5371.js');
-var index$6 = require('./index-3aa764b6.js');
+var index$a = require('./index-923ae1f3.js');
+require('./index-762385f3.js');
+var index$8 = require('./index-1b323fd6.js');
+require('./useMantineLocale-9ed27810.js');
+var index$5 = require('./index-b63670d8.js');
+require('./index.styles-6b7e9148.js');
+var translationsContext = require('./translationsContext-0c95922e.js');
+var hooks = require('@mantine/hooks');
+var utils$1 = require('./utils-7167926b.js');
+require('./other-ef0975f8.js');
+require('./index-4930db6b.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-6bc516a3.js');
+var index$3 = require('./index-f9beeef4.js');
+var index$6 = require('./index-f074ce7d.js');
 var uuid = require('uuid');
-var index$7 = require('./index-48676e11.js');
-var vaul = require('vaul');
-var styled = require('@emotion/styled');
-var useScreenSize = require('./useScreenSize-53222770.js');
+var index$7 = require('./index-17ef98a9.js');
+var index$9 = require('./index-f1ca6c91.js');
+var useScreenSize = require('./useScreenSize-4dbff5ea.js');
 var ReactDOM = require('react-dom');
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var Close = require('./Close-f0a69572.js');
+var Close = require('./Close-9dc967d7.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
-require('./Locale-d21160f2.js');
+require('./Locale-682b5651.js');
 require('classnames');
-require('./useUniqueId-1241561f.js');
+require('./useUniqueId-4a778cd6.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('date-fns/locale');
@@ -49,6 +50,7 @@ require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
 require('@mantine/notifications');
+require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -616,7 +618,7 @@ var useStyles$2 = core.createStyles(() => {
 });
 
 const libraries$1 = ['places'];
-const LocationBlock$1 = ({ name, placeholder, locale, required = true, }) => {
+const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
     var _a;
     const form = useLeadFormContext$1();
     const [searchValue, setSearchValue] = React.useState('');
@@ -716,7 +718,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                         id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
             }
             case 'LocationBlock': {
-                return (React__default["default"].createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+                return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -1357,94 +1359,6 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
-const StyledDrawerComponentContent = styled__default["default"](vaul.Drawer.Content) `
-  position: fixed;
-  z-index: ${index$8.ZINDEX_SSO + 2};
-  inset: 0;
-  background-color: #fff;
-  outline: none !important;
-
-  &::-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;
-  }
-
-  &[data-vaul-drawer-direction='bottom'] {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-  }
-
-  &[data-vaul-drawer-direction='top'] {
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
-
-  &[data-vaul-drawer-direction='left'] {
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
-
-  &[data-vaul-drawer-direction='right'] {
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
-`;
-const StyledDrawerComponentOverlay = styled__default["default"](vaul.Drawer.Overlay) `
-  position: fixed;
-  inset: 0;
-  z-index: ${index$8.ZINDEX_SSO + 2};
-  width: 100%;
-  max-height: 100%;
-`;
-
-const DrawerComponent = (props) => {
-    const { open: openProps, onOpenChange: onOpenChangeProps, snapPoints, children, overlayClassName, className } = props, restProps = tslib_es6.__rest(props, ["open", "onOpenChange", "snapPoints", "children", "overlayClassName", "className"]);
-    const [open, setOpen] = React.useState(openProps);
-    const [snap, setSnap] = React.useState(snapPoints ? snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints[0] : null);
-    const onOpenChange = React.useCallback((_open) => {
-        setOpen(_open);
-        onOpenChangeProps === null || onOpenChangeProps === void 0 ? void 0 : onOpenChangeProps(_open);
-    }, [onOpenChangeProps]);
-    const isFullSnapPoint = React.useMemo(() => {
-        if (snapPoints && snapPoints.length) {
-            return Boolean(snap === snapPoints[snapPoints.length - 1]);
-        }
-        return open;
-    }, [snap, snapPoints]);
-    const mergedProps = React.useMemo(() => {
-        const _mergedProps = { open, onOpenChange };
-        if (snapPoints && (snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.length)) {
-            _mergedProps.snapPoints = snapPoints;
-            _mergedProps.activeSnapPoint = snap;
-            _mergedProps.setActiveSnapPoint = setSnap;
-        }
-        return _mergedProps;
-    }, [open, onOpenChange, snap, setSnap, snapPoints]);
-    React.useEffect(() => {
-        setOpen(openProps);
-    }, [openProps]);
-    return (React__default["default"].createElement(vaul.Drawer.Root, Object.assign({}, restProps, mergedProps),
-        React__default["default"].createElement(vaul.Drawer.Portal, null,
-            React__default["default"].createElement(StyledDrawerComponentOverlay, { className: core.clsx(overlayClassName, 'drawer__overlay', {
-                    drawer__overlay_full: isFullSnapPoint,
-                }) }),
-            React__default["default"].createElement(StyledDrawerComponentContent, { className: core.clsx(className, 'drawer__content', {
-                    drawer__content_full: isFullSnapPoint,
-                }) },
-                React__default["default"].createElement(vaul.Drawer.Handle, { className: "drawer__handle" }),
-                React__default["default"].createElement(vaul.Drawer.Title, { style: { display: 'none' } }),
-                children))));
-};
-
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
     if (!imageLoaded)
@@ -1593,6 +1507,52 @@ const SideBarLayout = ({ content }) => {
     return (React__default["default"].createElement(React__default["default"].Fragment, null, targets.map((target) => ReactDOM.createPortal(content, utils$1.getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
 };
 
+const libraries = ['places'];
+const GoogleLocation = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = tslib_es6.__rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = React.useState(null);
+    const [opened, setOpened] = React.useState(false);
+    const [value, setValue] = React.useState(defaultValue || valueProps);
+    const [search, setSearch] = React.useState(null);
+    const { predictions } = usePlacesAutocomplete.usePlacesAutocomplete(search, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = React.useCallback((s) => {
+        setSearch(s);
+        setValue(null);
+    }, [opened]);
+    const onClickItem = React.useCallback((item) => {
+        setOpened(false);
+        setSearch(null);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        setValue(item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    React.useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    React.useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default["default"].createElement(core.Autocomplete, Object.assign({ defaultValue: defaultValue, value: search || value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onDropdownClose: () => {
+            if (!value) {
+                setValue(search);
+                onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(search);
+            }
+        }, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, 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));
+        } }, restProps)));
+};
+
 // You can give context variables any name
 const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
@@ -1758,108 +1718,365 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
     return { form, validateObj };
 };
 
-const libraries = ['places'];
-const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
-    var _a;
-    const form = useLeadFormContext();
-    const [searchValue, setSearchValue] = React.useState('');
-    const [address, setAddress] = React.useState('');
-    const { predictions } = usePlacesAutocomplete.usePlacesAutocomplete(searchValue, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const [LoadScript, setLoadScript] = React.useState(null);
-    const [ready, setReady] = React.useState(false);
-    const randRef = React.useRef(Math.random().toString(36).substring(7));
-    const options = React.useMemo(() => {
-        const _opts = predictions.map((p) => {
-            return {
-                value: p.description,
-                label: p.description,
-            };
-        });
-        const isExist = _opts.find((o) => o.value === address);
-        if (!address || isExist) {
-            return _opts;
+const SubtitleBlock = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const cssInputNotShrink = react.css `
+  height: 100% !important;
+  min-height: calc(var(--container-height, 56px) * 22 / 56);
+  color: ${miscTheme.theme.colors.gray800};
+  font-size: var(--input, 16px);
+  line-height: calc(var(--container-height, 56px) * 22 / 56);
+  border: none !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+
+  ::placeholder {
+    color: ${miscTheme.theme.colors.gray400};
+  }
+`;
+const cssInputShrink = react.css `
+  height: auto !important;
+  cursor: text;
+  opacity: 1;
+  transition: 0.1s ease-in-out all;
+`;
+const cssLabelNotShrink = react.css `
+  position: absolute;
+  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);
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: 0.125s ease-in all;
+`;
+const cssLabelShrink = 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;
+  transition: 0.125s ease-out all;
+`;
+const cssWrapperInputNotShrink = react.css `
+  min-height: var(--container-height, 56px);
+  display: flex;
+  align-items: flex-end;
+  border: 1px solid ${miscTheme.theme.colors.gray200};
+  border-radius: 8px;
+  background-color: #fff;
+  padding-inline: var(--space-x, 16px);
+  padding-block: var(--space-y-not-shrink, 16px);
+  cursor: pointer;
+  pointer-events: none;
+
+  &:has(input[data-invalid]) {
+    border-color: ${miscTheme.theme.colors.red400};
+  }
+
+  &:has(.mantine-Input-rightSection) {
+    padding-right: var(--container-height, 56px);
+  }
+
+  .mantine-Input-icon {
+    display: none;
+  }
+
+  .mantine-NumberInput-control {
+    border-color: ${miscTheme.theme.colors.gray200};
+  }
+`;
+const cssWrapperInputShrink = react.css `
+  height: auto;
+  min-height: var(--container-height, 56px);
+  padding-block: var(--space-y-shrink, 7px);
+  cursor: text;
+  pointer-events: auto;
+`;
+const StyledTextFieldContainer = styled__default["default"].div `
+  --space-x: 16px;
+  --space-y-not-shrink: 16px;
+  --space-y-shrink: 7px;
+  --container-height: 56px;
+  --label-not-shrink: 16px;
+  --label-shrink: 12px;
+  --input: 16px;
+
+  position: relative;
+  min-width: 100px;
+  max-width: 100%;
+  display: inline-block;
+
+  .textField_wrapper {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .mantine-InputWrapper-label {
+    ${cssLabelNotShrink}
+  }
+
+  .mantine-Input-wrapper {
+    ${cssWrapperInputNotShrink}
+
+    + .mantine-Popover-dropdown[data-position="bottom-start"] {
+      left: 0 !important;
+    }
+  }
+
+  .mantine-Input-input {
+    ${cssInputNotShrink}
+  }
+
+  &.textField_shrink,
+  &:focus-within {
+    .mantine-InputWrapper-label {
+      ${cssLabelShrink}
+    }
+
+    .mantine-Input-wrapper {
+      ${cssWrapperInputShrink}
+      &.mantine-Select-wrapper {
+        .mantine-Select-rightSection {
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .mantine-Input-input {
+      ${cssInputShrink}
+    }
+
+    &:has(.PhoneInput) {
+      .mantine-InputWrapper-label {
+        left: var(--space-x, 16px);
+      }
+      .PhoneInput {
+        .PhoneInputInput {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .PhoneInput {
+    --phone-select: 75px;
+    --phone-input-space-x: 8px;
+    width: 100%;
+    opacity: 1;
+    border: none;
+    .PhoneInputCountry {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: var(--phone-select, 75px);
+    }
+    .PhoneInputInput {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.5;
+      outline: none !important;
+      border: none;
+      box-shadow: none;
+      padding: 0 var(--phone-input-space-x, 8px);
+      opacity: 0;
+      color: ${miscTheme.theme.colors.gray800} !important;
+      :focus {
+        color: ${miscTheme.theme.colors.gray800} !important;
+      }
+    }
+  }
+
+  &:has(.PhoneInput) {
+    .mantine-InputWrapper-label {
+      left: calc(
+        var(--space-x, 16px) + var(--phone-select, 75px) +
+          var(--phone-input-space-x, 8px)
+      );
+    }
+  }
+`;
+const StyledChoiceFieldContainer = styled__default["default"].div `
+  &.leadgen-form_checkbox,
+  &.leadgen-form_radio {
+    width: 100%;
+  }
+
+  &.leadgen-form_dropdown {
+    width: calc(50% - 12px);
+  }
+
+  .mantine-InputWrapper-root {
+    display: block;
+  }
+
+  .mantine-InputWrapper-label {
+    margin-bottom: 0.5rem;
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .mantine-Radio-root,
+  .mantine-Checkbox-root {
+    gap: 8px;
+    min-width: calc(50% - 4px);
+
+    input[type='radio'],
+    input[type='checkbox'] {
+      border-color: ${miscTheme.theme.colors.gray600};
+      width: 18px;
+      height: 18px;
+    }
+    input[type='checkbox'] {
+      border-radius: 4px;
+    }
+
+    &[data-checked='true'] {
+      input[type='radio'],
+      input[type='checkbox'] {
+        background-color: white;
+        border-color: ${miscTheme.theme.colors.primary600};
+      }
+    }
+  }
+
+  .mantine-Radio-inner,
+  .mantine-Checkbox-inner {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mantine-Radio-body,
+  .mantine-Checkbox-body {
+    display: flex;
+    align-items: center;
+  }
+
+  .mantine-Radio-label,
+  .mantine-Checkbox-label {
+    padding-left: 8px;
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 14px;
+    line-height: 1.4;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-choiceContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+`;
+
+const TextField = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = tslib_es6.__rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+    const containerRef = hooks.useClickOutside(() => {
+        if (shrinkProps) {
+            return;
         }
-        return [{ value: address, label: address }].concat(_opts);
-    }, [predictions, address]);
-    React.useEffect(() => {
-        var _a, _b, _c;
-        // only load extra google script when not yet loaded
-        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService)) {
-            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
-                setLoadScript(() => m.LoadScript);
-                setTimeout(() => {
-                    setReady(true);
-                }, 200);
-            });
+        setShrink(false);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
+    });
+    const [shrink, setShrink] = React.useState(shrinkProps);
+    const onClick = React.useCallback((e) => {
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        if (shrink) {
+            return;
         }
-        else {
-            setReady(true);
+        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus();
         }
-    }, []);
-    if (!ready)
-        return (React__default["default"].createElement("div", { style: {
-                height: 73,
-                width: '100%',
-            } }));
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { style: { display: 'none', width: '100%' }, "data-extra": true, "data-name": name, "data-control": 'text' }, 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%' } }))),
-        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) => {
-                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)))));
+    }, [shrink]);
+    React.useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default["default"].createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
+        React__default["default"].createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+};
+const ChoiceField = (props) => {
+    const { children, className } = props, restProps = tslib_es6.__rest(props, ["children", "className"]);
+    return (React__default["default"].createElement(StyledChoiceFieldContainer, Object.assign({ className: core.clsx(className, 'choiceField') }, restProps), children));
 };
 
-const SubtitleBlock = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
-
 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 form = useLeadFormContext();
+    const formValues = form.values;
     return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
         const { name = '', data = {} } = b || {};
         const { placeholder, 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) {
             case 'TitleBlock':
                 return (React__default["default"].createElement(TitleBlock, { key: index, align: align }, value));
             case 'SubtitleBlock':
                 return (React__default["default"].createElement(SubtitleBlock, { 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: "lead-modal__form-control", 
-                    // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default["default"].createElement(core.TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
+                        // className="lead-modal__form-control"
+                        // onChangeRaw={(e) => inputOnChange('text', e)}
+                        label: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, 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: "lead-modal__form-control", 
-                    // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default["default"].createElement(core.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
+                        // className="lead-modal__form-control"
+                        // onChange={(e) => inputOnChange('number', e)}
+                        label: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
-                return (React__default["default"].createElement(index$2.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
-                    // type="email"
-                    placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default["default"].createElement(core.TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                        // type="email"
+                        placeholder: placeholder, 
+                        // className="lead-modal__form-control"
+                        label: placeholder, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             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, 
-                    // error={errorField.phone}
-                    className: "lead-modal__form-control", labelProps: {
-                        htmlFor: id,
-                    } }, form.getInputProps(value)),
-                    React__default["default"].createElement(index$2.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
-                            form.setFieldValue(value, v);
-                        }, 
-                        // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default["default"].createElement(core.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
+                        // error={errorField.phone}
+                        // className="lead-modal__form-control"
+                        labelProps: {
+                            htmlFor: id,
+                        }, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)),
+                        React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
+                            React__default["default"].createElement(index$2.Phone, { className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
+                                    form.setFieldValue(value, v);
+                                }, 
+                                // onBlur={(e) => inputOnBlur('tel', e)}
+                                id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })))));
             }
             case 'LocationBlock': {
-                return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default["default"].createElement(GoogleLocation, Object.assign({ withAsterisk: required, key: index, name: value, placeholder: placeholder, label: placeholder, "data-control": "date", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             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: "lead-modal__form-control", label: placeholder, "data-control": "date" }, form.getInputProps(value))),
-                    React__default["default"].createElement("input", { type: "hidden", name: value, "data-control": "date" })));
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
+                    React__default["default"].createElement(index$4.DatePicker, Object.assign({ clearable: true, withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, label: placeholder, "data-control": "date", inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
@@ -1868,29 +2085,40 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
             case 'CheckboxBlock':
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox" },
                     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: "lead-modal__form-control", key: index, label: placeholder, size: "md", sx: {
+                    React__default["default"].createElement(index$2.Checkbox.Group, Object.assign({ withAsterisk: required, 
+                        // className="lead-modal__form-control"
+                        key: index, label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
+                            flexWrap: 'wrap',
                             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" }))))));
             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: "lead-modal__form-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" }))))));
+                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio" },
+                    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, 
+                        // className="lead-modal__form-control"
+                        key: index, 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" }))))));
             case 'DropdownBlock':
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control" },
                     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: "lead-modal__form-control", label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                    React__default["default"].createElement(index$2.Select, Object.assign({ key: index, 
+                        // className="lead-modal__form-control"
+                        label: placeholder, placeholder: 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,
+                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox" },
                     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 }))));
         }
         return null;
@@ -2076,6 +2304,8 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
         // mark all as touched to allow validation
+        console.log('** RYAN index.tsx 130 form.values : ', form.values);
+        // return
         form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
             acc[cur] = true;
             return acc;
@@ -2167,7 +2397,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const PopupContent = (React__default["default"].createElement("div", { className: popupContentClassName }, showThankyou ? (React__default["default"].createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("header", { className: core.clsx('lead-modal__header', {
                 'leadgen-header': isLightBox,
-            }) }, showOtpPhone ? (React__default["default"].createElement("img", { src: index$9.CommonGAssets.getAssetPath('lead-otp-thumb.png'), draggable: "false", alt: "", style: {
+            }) }, showOtpPhone ? (React__default["default"].createElement("img", { src: index$8.CommonGAssets.getAssetPath('lead-otp-thumb.png'), draggable: "false", alt: "", style: {
                 width: '100%',
                 minHeight: '150px',
                 backgroundColor: '#f2f2f2',
@@ -2214,7 +2444,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
             }) })),
         PopupContent));
     const styleOverlay = React.useMemo(() => {
-        let styleContent = `.le-newbuilder-overlay {background-repeat: no-repeat;background-size: cover;}`;
+        let styleContent = `.le-newbuilder-overlay {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
         if (isMobile && imageOverlayMobile) {
             styleContent += `.le-newbuilder-overlay {background-image: url(${imageOverlayMobile});}`;
         }
@@ -2229,7 +2459,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         leadgen: isLightBox,
         [`leadgen-${currentLayout}`]: isLightBox,
     });
-    const PopupContainer = isDrawer ? (React__default["default"].createElement(DrawerComponent, { open: open, snapPoints: [0.8, 1], onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" }, PopupWrapper)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$9.DrawerComponent, { open: open, snapPoints: [0.8, 1], onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" }, PopupWrapper)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
         React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
             currentLayout == 'Fullscreen' ? (React__default["default"].createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
@@ -3092,7 +3322,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
                 locale,
                 values: getTranslations(locale),
             } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
-            React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$8.ZINDEX_SSO - 9e6 } },
+            React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$a.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,