@hhgtech/hhg-components 1.28.78 → 1.28.80

package/build/lead.js

@@ -2,47 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-6fa07404.js');
+var tslib_es6 = require('./tslib.es6-05775979.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
-var uuid = require('uuid');
-var index$1 = require('./index-fc485132.js');
-var index$5 = require('./index-38ecdf2c.js');
+var form = require('@mantine/form');
+var useTranslations = require('./useTranslations-ee85619b.js');
+var index = require('./index-a84eedaa.js');
 var core = require('@mantine/core');
-var index$4 = require('./index-8e864883.js');
-require('./index.styles-63c23f64.js');
-var index = require('./index-3daa918b.js');
-require('./constants-40575d3d.js');
-require('./Subot-89c2bfe5.js');
-require('./utils-6ccbb5ca.js');
-var utils$1 = require('./utils-64e577eb.js');
-var index$2 = require('./index-104d3cf5.js');
-var theme = require('./theme-ca8bb2dd.js');
-var translationsContext = require('./translationsContext-eb3b16d8.js');
+require('./index.styles-2705c1b1.js');
+var index$1 = require('./index-c194972d.js');
+var index$2 = require('./index-a2785ada.js');
+var index$5 = require('./index-a79982f7.js');
+require('./constants-3479888e.js');
+require('./Subot-a11a4e5b.js');
+require('./utils-d583cd84.js');
+var utils$1 = require('./utils-f7881466.js');
+var index$3 = require('./index-72a41d2b.js');
+var theme = require('./theme-3069f85a.js');
+var translationsContext = require('./translationsContext-09f33cc8.js');
 require('string-format');
 require('@mantine/hooks');
-require('./index-7e38d239.js');
-require('./utils-c2445e75.js');
-require('./index.styled-221f7a2a.js');
-require('./index-2d45199a.js');
-var utils = require('./utils-9ba965d4.js');
+require('./index-958f67bb.js');
+require('./utils-da97b7ae.js');
+require('./index.styled-2ad9b370.js');
+require('./index-5f30931a.js');
+var utils = require('./utils-8aee541d.js');
 require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-c19fd7c5.js');
-var form = require('@mantine/form');
-var useTranslations = require('./useTranslations-a4c6b8f5.js');
-var index$3 = require('./index-1a6b3538.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-c73d655f.js');
+var index$4 = require('./index-a3d460fa.js');
+var uuid = require('uuid');
 var ReactDOM = require('react-dom');
-var cookieHelper = require('./cookieHelper-b3cb244a.js');
+var cookieHelper = require('./cookieHelper-115e3b7b.js');
 var dayjs = require('dayjs');
-require('./isProduction-2fea4aa7.js');
+var Close = require('./Close-b7a203d1.js');
 require('styled-components');
-require('./animation-8d4719c5.js');
+require('./animation-1621b827.js');
 require('react-keyed-flatten-children');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-3396b916.js');
+require('./useUniqueId-3b22c3ca.js');
 require('@hhgtech/icons/core');
+require('./isProduction-253f0a63.js');
 require('date-fns/locale');
 require('slugify');
 
@@ -70,6 +71,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 
+const LeadGenComponentContext = React.createContext({});
+
 const CAMPAIGN_TARGET_TYPE = { LINKS: 1, TAGS: 2 };
 let LEAD_API = 'https://dev.leadgen.hellobacsi.com/';
 const LEAD_DEVICE_TYPE = {
@@ -134,25 +137,787 @@ const LEAD_LOCALE_DATA = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
-function LEAD_RESET_VAR() {
-    // LEAD_CURRENT_URL = location.href.toLowerCase();
-    LEAD_CURRENT_URL =
-        'https://' + location.hostname + location.pathname + location.search;
-}
-const LEAD_TIMEZONE_DATA = {
-    1: 'Asia/Ho_Chi_Minh',
-    10: 'Asia/Ho_Chi_Minh',
-    11: 'Asia/Ho_Chi_Minh',
-    12: 'Asia/Ho_Chi_Minh',
-    2: 'Asia/Jakarta',
-    3: 'Asia/Bangkok',
-    4: 'Asia/Phnom_Penh',
-    5: 'Asia/Kuala_Lumpur',
-    6: 'Asia/Taipei',
-    7: 'Asia/Yangon',
-    8: 'Asia/Kolkata',
-    9: 'Asia/Manila', // Philippines / Filipinos Site
+const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
+function LEAD_RESET_VAR() {
+    // LEAD_CURRENT_URL = location.href.toLowerCase();
+    LEAD_CURRENT_URL =
+        'https://' + location.hostname + location.pathname + location.search;
+}
+const LEAD_TIMEZONE_DATA = {
+    1: 'Asia/Ho_Chi_Minh',
+    10: 'Asia/Ho_Chi_Minh',
+    11: 'Asia/Ho_Chi_Minh',
+    12: 'Asia/Ho_Chi_Minh',
+    2: 'Asia/Jakarta',
+    3: 'Asia/Bangkok',
+    4: 'Asia/Phnom_Penh',
+    5: 'Asia/Kuala_Lumpur',
+    6: 'Asia/Taipei',
+    7: 'Asia/Yangon',
+    8: 'Asia/Kolkata',
+    9: 'Asia/Manila', // Philippines / Filipinos Site
+};
+
+class Store {
+    constructor() {
+        this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
+        this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
+    }
+}
+const leadStore = new Store();
+
+const leadApi = {
+    call(_a) {
+        var { url, data = undefined } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
+        config.body = JSON.stringify(data);
+        config.headers = {
+            'Content-Type': 'application/json',
+        };
+        return fetch(`${leadStore.apiLeadUrl}${url}`, config)
+            .then((res) => res.json())
+            .catch(() => ({}));
+    },
+};
+const subotApi = {
+    call(_a) {
+        var { url, data } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
+        config.body = JSON.stringify(data);
+        config.headers = {
+            'Content-Type': 'application/json',
+        };
+        return fetch(`${leadStore.apiSubotUrl}${url}`, config)
+            .then((res) => res.json())
+            .catch(() => ({}));
+    },
+};
+const campaignGetById = (id) => {
+    return leadApi.call({
+        url: `api/internal/campaign/${id}`,
+        method: 'get',
+    });
+};
+const validateEmailOrPhoneOnLeadGen = ({ campaign_id, email, phone, }) => {
+    let phoneToSend = phone;
+    // Remove the '0' part. Logic from Back to check between Subot and Lead with different format
+    if (phoneToSend && phoneToSend.startsWith('0')) {
+        phoneToSend = phoneToSend.substring(1);
+    }
+    return leadApi.call({
+        url: 'api/subot-campaign/check',
+        method: 'post',
+        data: {
+            campaign_id,
+            email,
+            phone: phoneToSend,
+        },
+    });
+};
+const validateEmailOrPhoneOnSubot = ({ bot_id, email, phone, }) => {
+    let phoneToSend = phone;
+    // Remove the '0' part. Logic from Back to check between Subot and Lead with different format
+    if (phoneToSend && phoneToSend.startsWith('0')) {
+        phoneToSend = phoneToSend.substring(1);
+    }
+    return subotApi.call({
+        url: 'frontend/api/subot-campaign/check',
+        method: 'post',
+        data: {
+            bot_id,
+            email,
+            phone: phoneToSend,
+        },
+    });
+};
+const sendSMSOtpLead = ({ phone, type, }) => {
+    return leadApi.call({
+        url: type === 'phone' ? 'api/sms/otp' : 'api/sms/whatsapp_otp',
+        method: 'post',
+        data: {
+            // The type Whatsapp do not remove the '+'
+            phone_number: type === 'phone' ? phone.replace('+', '') : phone,
+        },
+    });
+};
+const verifyOtpLead = ({ phone, otp, type, }) => {
+    return leadApi.call({
+        url: type === 'phone' ? 'api/sms/verify' : 'api/sms/whatsapp_verify',
+        method: 'post',
+        data: {
+            // The type Whatsapp do not remove the '+'
+            otp_code: otp,
+            phone_number: type === 'phone' ? phone.replace('+', '') : phone,
+        },
+    });
+};
+const Service = {
+    campaignGetById,
+    validateEmailOrPhoneOnSubot,
+    validateEmailOrPhoneOnLeadGen,
+    sendSMSOtpLead,
+    verifyOtpLead,
+};
+
+const checkUsedEmailOrPhone = (campaignId, campaign_subot_id, data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const key = 'email' in data ? 'email' : 'phone';
+    const value = 'email' in data ? data.email : data.phone;
+    const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
+    /** Check on Leadgen Tool */
+    const resLeadGen = yield Service.validateEmailOrPhoneOnLeadGen({
+        campaign_id: [campaignId],
+        [key]: value, // Can be email or phone
+    });
+    if (resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_001' ||
+        resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_002') {
+        return errorMsg;
+    }
+    /** Check on Subot */
+    if (campaign_subot_id.length) {
+        const resSubot = yield Service.validateEmailOrPhoneOnSubot({
+            bot_id: campaign_subot_id,
+            [key]: value, // Can be email or phone
+        });
+        if (resSubot._errorCode === 'CheckSuBotLeadTool_ERR_001') {
+            return errorMsg;
+        }
+    }
+});
+const validatedCache = {
+    email: {},
+    phone: {},
+};
+const checkUsedEmailOrPhoneWithCache = (campaignId, campaign_subot_id, data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    const key = 'email' in data ? 'email' : 'phone';
+    const value = 'email' in data ? data.email : data.phone;
+    const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
+    if (validatedCache[key][value]) {
+        if (validatedCache[key][value].value) {
+            return errorMsg;
+        }
+        else if (!validatedCache[key][value].value &&
+            validatedCache[key][value].expire > Date.now()) {
+            return '';
+        }
+    }
+    const res = yield checkUsedEmailOrPhone(campaignId, campaign_subot_id, data);
+    if (res) {
+        validatedCache[key][value] = {
+            value: true,
+        };
+    }
+    else {
+        validatedCache[key][value] = {
+            value: false,
+            expire: Date.now() + 1000 * 60,
+        };
+    }
+    return res;
+});
+const clearCacheUsedEmailOrPhone = () => {
+    validatedCache.email = {};
+    validatedCache.phone = {};
+};
+
+// 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 = [], }) => {
+    const { t } = useTranslations.useTranslations();
+    const validateObj = React.useMemo(() => {
+        const InputBlocks = [
+            'TextBlock',
+            'NumberBlock',
+            'EmailBlock',
+            'PhoneBlock',
+            'DateBlock',
+            'CheckboxBlock',
+            'RadioBlock',
+            'DropdownBlock',
+            'PhoneOtpBlock',
+            'WhatsappOtpBlock',
+            'LocationBlock',
+            'TncBlock',
+        ];
+        // ALL are required and can skip if not touched yet
+        const withSharedCheck = (name, cb) => {
+            return (value) => {
+                if (!formRef.current.isTouched(name))
+                    return;
+                if (typeof value === 'undefined' ||
+                    value === '' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return t('validator.required');
+                }
+                return cb === null || cb === void 0 ? void 0 : cb(value);
+            };
+        };
+        return listBlockAdded
+            .filter((b) => InputBlocks.includes(b.name))
+            .reduce((r, b) => {
+            if (b.name === 'NumberBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (isNaN(Number(value))) {
+                            return t('validator.number');
+                        }
+                    }) });
+            }
+            else if (b.name === 'EmailBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return t('validator.email');
+                        }
+                        validatingEmailRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(b.data.value, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                email: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(b.data.value, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(b.data.value);
+                                }
+                                validatingEmailRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                validatingEmailRef.current = false;
+                            });
+                        }, 200);
+                    }) });
+            }
+            else if (b.name === 'PhoneBlock' ||
+                b.name === 'PhoneOtpBlock' ||
+                b.name === 'WhatsappOtpBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (window.intlTelInputUtils &&
+                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
+                            return t('validator.phone');
+                        }
+                        validatingPhoneRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(b.data.value, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                phone: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(b.data.value, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(b.data.value);
+                                }
+                                validatingPhoneRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                validatingPhoneRef.current = false;
+                            });
+                        }, 200);
+                    }) });
+            }
+            else if (b.name === 'DateBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (isNaN(Date.parse(value))) {
+                            return t('validator.date');
+                        }
+                    }) });
+            }
+            else if (b.name === 'TncBlock') {
+                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id) });
+            }
+            else {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value) });
+            }
+        }, {});
+    }, [listBlockAdded.map((b) => b.name).join(',')]);
+    const form = useLeadForm$1({
+        validateInputOnChange: true,
+        clearInputErrorOnChange: true,
+        validate: validateObj,
+    });
+    const formRef = React.useRef(form);
+    formRef.current = form;
+    return { form, validateObj };
+};
+
+const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, locale, children, }) => {
+    var _a, _b;
+    const extraFields = campaign.extra_fields;
+    const campaignId = campaign.id;
+    const campaign_subot_id = campaign.bot_id || [];
+    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
+    const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const textBlocks = JSON.parse(extraFields.textBlocks);
+    const heading = ((_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value) || '';
+    const description = textBlocks.subtitleBlock.data.value;
+    const validatingPhoneRef = React.useRef(false);
+    const validatingEmailRef = React.useRef(false);
+    const leadFormConfig = useLeadFormConfig$1({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+    });
+    const [showOtpPhone, setShowOtpPhone] = React.useState(null);
+    const formRef = React.useRef();
+    const onClose = () => {
+        if (showOtpPhone) {
+            setShowOtpPhone(null);
+        }
+        else {
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+        }
+    };
+    React.useEffect(() => {
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
+        }
+        clearCacheUsedEmailOrPhone();
+    }, []);
+    return campaign ? (React__default["default"].createElement(LeadGenComponentContext.Provider, { value: {
+            campaignId,
+            campaign_subot_id,
+            heading,
+            description,
+            listBlockAdded,
+            textBlocks,
+            actionBlocks,
+            leadFormConfig,
+            validatingEmailRef,
+            validatingPhoneRef,
+            formRef,
+            locale,
+            onClose,
+            onOtherSubmit,
+            showOtpPhone,
+            setShowOtpPhone,
+            onSubmit,
+            showThankyou,
+        } }, children)) : null;
+};
+
+const Description = (_a) => {
+    var rest = tslib_es6.__rest(_a, []);
+    const { description } = React.useContext(LeadGenComponentContext);
+    return description ? (React__default["default"].createElement(index.Text, Object.assign({ size: "p3" }, rest), description)) : null;
+};
+
+var useStyles$2 = core.createStyles(() => {
+    return {
+        control: {},
+    };
+});
+
+const libraries$1 = ['places'];
+const LocationBlock$1 = ({ name, placeholder, locale, }) => {
+    var _a;
+    const form = useLeadFormContext$1();
+    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;
+        }
+        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);
+            });
+        }
+        else {
+            setReady(true);
+        }
+    }, []);
+    if (!ready)
+        return (React__default["default"].createElement("div", { style: {
+                height: 73,
+            } }));
+    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$1.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: true, 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)))));
+};
+
+const SubtitleBlock$1 = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const TitleBlock$1 = ({ children, align, }) => (React__default["default"].createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, styles, classNames, }) => {
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'LeadGen__Field',
+        styles,
+        classNames,
+    });
+    const form = useLeadFormContext$1();
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
+        const { name = '', data = {} } = b || {};
+        const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
+        switch (name) {
+            case 'TitleBlock':
+                return (React__default["default"].createElement(TitleBlock$1, { key: index, align: align }, value));
+            case 'SubtitleBlock':
+                return (React__default["default"].createElement(SubtitleBlock$1, { key: index, align: align }, value));
+            case 'TextBlock':
+                return (React__default["default"].createElement(index$1.Input, Object.assign({ key: index, withAsterisk: true, 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$1.NumberInput, Object.assign({ key: index, withAsterisk: true, 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$1.Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, 
+                    // type="email"
+                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
+            case 'PhoneOtpBlock':
+            case 'WhatsappOtpBlock':
+            case 'PhoneBlock': {
+                const id = popupId + '-' + value + '-' + index;
+                return (React__default["default"].createElement(index$1.Input.Wrapper, Object.assign({ size: "md", withAsterisk: true, key: index, label: placeholder, 
+                    // error={errorField.phone}
+                    className: cx('leadgen-control', classes.control), labelProps: {
+                        htmlFor: id,
+                    } }, form.getInputProps(value)),
+                    React__default["default"].createElement(index$1.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" })));
+            }
+            case 'LocationBlock': {
+                return (React__default["default"].createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale }));
+            }
+            case 'DateBlock':
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(index$3.DatePicker, Object.assign({ withAsterisk: true, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date" }, 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$2.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))));
+            case 'CheckboxBlock':
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    isSendMailChimp && (React__default["default"].createElement("div", { style: {
+                            display: 'none',
+                        }, "data-name": value + '-mailchimp' })),
+                    React__default["default"].createElement(index$1.Checkbox.Group, Object.assign({ withAsterisk: true, 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$1.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$1.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
+                    React__default["default"].createElement(index$1.Radio.Group, Object.assign({ withAsterisk: true, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$1.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$1.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: true, 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$1.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 ? React__default["default"].createElement(React__default["default"].Fragment, null) : undefined }))));
+        }
+        return null;
+    })));
+};
+
+var useStyles$1 = core.createStyles(() => {
+    return {
+        root: {},
+        header: {},
+        heading: {},
+        description: {},
+        term: {},
+        controlList: {},
+        control: {},
+        submitBtn: {},
+    };
+});
+
+const Heading = (_a) => {
+    var rest = tslib_es6.__rest(_a, []);
+    const { heading } = React.useContext(LeadGenComponentContext);
+    return heading ? (React__default["default"].createElement(index.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
+};
+
+const FormComponent = ({ styles, className, classNames }) => {
+    var _a;
+    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'LeadGen__FormComponent',
+        styles,
+        classNames,
+    });
+    const [checkedTerm, setCheckedTerm] = React.useState(true);
+    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
+    const popUpTermURL = actionBlocks.submitBlock.data.url;
+    const popUpTermAgreeText = actionBlocks.submitBlock.data.text;
+    const popUpTermText = actionBlocks.submitBlock.data.text2;
+    const popUpSubmitText = actionBlocks.submitBlock.data.value;
+    const middlewareOnSubmit = (e) => {
+        e.preventDefault();
+        // mark all as touched to allow validation
+        form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
+            acc[cur] = true;
+            return acc;
+        }, {}));
+        if (validatingEmailRef.current || validatingPhoneRef.current) {
+            return;
+        }
+        setTimeout(() => {
+            form.onSubmit((v) => {
+                var _a, _b, _c, _d, _e, _f;
+                if (Object.keys(form.errors).length)
+                    return;
+                let newShowOtpPhone = null;
+                if (listBlockAdded.findIndex((x) => x.name === 'PhoneOtpBlock') > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === 'PhoneOtpBlock')) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
+                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'phone',
+                        };
+                    }
+                }
+                if (listBlockAdded.findIndex((x) => x.name === 'WhatsappOtpBlock') > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === 'WhatsappOtpBlock')) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
+                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'whatsapp',
+                        };
+                    }
+                }
+                if (newShowOtpPhone) {
+                    setIsSubmitLoading(true);
+                    Service.sendSMSOtpLead(newShowOtpPhone)
+                        .then((res) => {
+                        var _a;
+                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+                        if (respMessage === 'This phone number was verified') {
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            return;
+                        }
+                        setShowOtpPhone(newShowOtpPhone);
+                    })
+                        .finally(() => {
+                        setIsSubmitLoading(false);
+                    });
+                    return;
+                }
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+            })(e);
+        }, 100);
+    };
+    return (React__default["default"].createElement(LeadFormProvider$1, { form: form },
+        React__default["default"].createElement(core.Box, { component: "form", ref: formRef, className: cx(className, classes.root), onSubmit: middlewareOnSubmit, styles: styles },
+            React__default["default"].createElement("div", { className: classes.header },
+                React__default["default"].createElement(Heading, { className: classes.heading }),
+                React__default["default"].createElement(Description, { className: classes.description })),
+            React__default["default"].createElement("div", { className: classes.controlList },
+                React__default["default"].createElement(Fields, { classNames: {
+                        control: classes.control,
+                    }, listBlockAdded: listBlockAdded, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit })),
+            ((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) ? null : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: classes.term },
+                    React__default["default"].createElement("div", { className: "lead-modal__checkbox" },
+                        React__default["default"].createElement("input", { id: "lead-term-checkbox", className: `lead-modal__checkbox__input ${LEAD_CLASS}`, type: "checkbox", "aria-label": "Checkbox label", checked: checkedTerm, onChange: (e) => setCheckedTerm(e.currentTarget.checked) }),
+                        React__default["default"].createElement("div", { className: "lead-modal__checkbox__control", "aria-hidden": "true" })),
+                    React__default["default"].createElement("label", { htmlFor: "checkbox", className: "lead-modal__checkbox__label" },
+                        popUpTermAgreeText,
+                        ' ',
+                        React__default["default"].createElement("span", { style: { fontWeight: 'bold' } },
+                            React__default["default"].createElement("a", { target: "blank", href: popUpTermURL || 'https://hellobacsi.com/chinh-sach', rel: "noopener noreferrer", style: { textDecoration: 'none' } }, popUpTermText)))),
+                React__default["default"].createElement(index$1.Button, { size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, disabled: !checkedTerm, loading: isSubmitLoading }, popUpSubmitText))))));
+};
+const Form = (props) => {
+    const { showOtpPhone, showThankyou } = React.useContext(LeadGenComponentContext);
+    return showThankyou || showOtpPhone ? null : React__default["default"].createElement(FormComponent, Object.assign({}, props));
+};
+
+var useStyles = core.createStyles(() => {
+    return {
+        root: {},
+        heading: {},
+        description: {},
+        control: {},
+        submitBtn: {},
+        resendOtp: {},
+    };
+});
+
+const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, styles, classNames, }) => {
+    const { t } = useTranslations.useTranslations();
+    const phone = otpData.phone;
+    const otpType = otpData.type;
+    const [otp, setOtp] = React.useState('');
+    const [isDirty, setIsDirty] = React.useState(false);
+    const [resendTimer, setResendTimer] = React.useState(autoSendWhenOpen ? 0 : 60);
+    const inputRef = React.useRef(null);
+    const [errorMsg, setErrorMsg] = React.useState();
+    const [displayPhone, setDisplayPhone] = React.useState('');
+    const formatPhoneNumberIntlRef = React.useRef();
+    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
+    const { classes, cx } = useStyles(undefined, {
+        name: 'LeadGen__OTP',
+        styles,
+        classNames,
+    });
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (!formatPhoneNumberIntlRef.current) {
+                const res = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-phone-number-input')); });
+                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
+            }
+            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
+        }))();
+    }, [phone]);
+    const sendOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!phone) {
+            return;
+        }
+        const res = yield Service.sendSMSOtpLead({
+            phone,
+            type: otpType,
+        });
+        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+        if (respMessage === 'Send sms successfully' ||
+            respMessage === 'Send WhatsApp successfully') {
+            setResendTimer(60);
+            setTimeout(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.scrollIntoView({ block: 'center' });
+                }
+            }, 100);
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'Something went wrong!');
+            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
+            // setStatusVerifyOTP('idle')
+            // pushNotifications({
+            //   title: respMessage || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+    });
+    const submitOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (!phone || !otp) {
+            return;
+        }
+        setIsSubmitLoading(true);
+        const res = yield Service.verifyOtpLead({
+            phone,
+            otp,
+            type: otpType,
+        });
+        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
+        if (respMessage === 'Verify successfully' ||
+            respMessage === 'Verify WhatsApp OTP sucess') {
+            onSuccess();
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'something Wrong');
+            // setIsShowError(true)
+            // setStatusVerifyOTP('sent')
+            // pushNotifications({
+            //   title: res?._messages[0] || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+        setIsSubmitLoading(false);
+    });
+    React.useEffect(() => {
+        setTimeout(() => {
+            if (resendTimer > 0) {
+                setResendTimer((r) => r - 1);
+            }
+        }, 1000);
+    }, [resendTimer]);
+    React.useEffect(() => {
+        if (autoSendWhenOpen && !resendTimer) {
+            sendOtp();
+        }
+    }, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(core.Box, { component: "form", onSubmit: (e) => {
+                e.preventDefault();
+                submitOtp();
+            }, className: cx(classes.root, className) },
+            React__default["default"].createElement(index$4.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
+            React__default["default"].createElement(index.Text, { size: "p1", className: classes.description }, t('lead.otp.desc', { phone: displayPhone })),
+            React__default["default"].createElement(index$1.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: "Enter OTP", className: classes.control, label: "Phone OTP", "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
+                    setIsDirty(true);
+                    setOtp(v);
+                    if (isDirty && !v)
+                        setErrorMsg('OTP is required');
+                    else
+                        setErrorMsg(undefined);
+                }, error: isDirty ? errorMsg : undefined }),
+            React__default["default"].createElement(index$1.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$1.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
+                    sendOtp();
+                }, disabled: !!resendTimer }, t('lead.otp.resend', {
+                timer: resendTimer ? ` (${resendTimer}s)` : '',
+            })))));
+};
+const OtpBlock$1 = ({}) => {
+    const { showOtpPhone, setShowOtpPhone, onSubmit, formRef, leadFormConfig: { form }, } = React.useContext(LeadGenComponentContext);
+    return showOtpPhone ? (React__default["default"].createElement(OtpBlockComponent, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+            setShowOtpPhone(null);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+        } })) : null;
+};
+
+const Thankyou = ({ children, }) => {
+    const { showThankyou } = React.useContext(LeadGenComponentContext);
+    return showThankyou ? typeof children(showThankyou) : null;
 };
 
 var enPH = {
@@ -455,165 +1220,6 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
-class Store {
-    constructor() {
-        this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
-        this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
-    }
-}
-const leadStore = new Store();
-
-const leadApi = {
-    call(_a) {
-        var { url, data = undefined } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
-        config.body = JSON.stringify(data);
-        config.headers = {
-            'Content-Type': 'application/json',
-        };
-        return fetch(`${leadStore.apiLeadUrl}${url}`, config)
-            .then((res) => res.json())
-            .catch(() => ({}));
-    },
-};
-const subotApi = {
-    call(_a) {
-        var { url, data } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
-        config.body = JSON.stringify(data);
-        config.headers = {
-            'Content-Type': 'application/json',
-        };
-        return fetch(`${leadStore.apiSubotUrl}${url}`, config)
-            .then((res) => res.json())
-            .catch(() => ({}));
-    },
-};
-const campaignGetById = (id) => {
-    return leadApi.call({
-        url: `api/internal/campaign/${id}`,
-        method: 'get',
-    });
-};
-const validateEmailOrPhoneOnLeadGen = ({ campaign_id, email, phone, }) => {
-    let phoneToSend = phone;
-    // Remove the '0' part. Logic from Back to check between Subot and Lead with different format
-    if (phoneToSend && phoneToSend.startsWith('0')) {
-        phoneToSend = phoneToSend.substring(1);
-    }
-    return leadApi.call({
-        url: 'api/subot-campaign/check',
-        method: 'post',
-        data: {
-            campaign_id,
-            email,
-            phone: phoneToSend,
-        },
-    });
-};
-const validateEmailOrPhoneOnSubot = ({ bot_id, email, phone, }) => {
-    let phoneToSend = phone;
-    // Remove the '0' part. Logic from Back to check between Subot and Lead with different format
-    if (phoneToSend && phoneToSend.startsWith('0')) {
-        phoneToSend = phoneToSend.substring(1);
-    }
-    return subotApi.call({
-        url: 'frontend/api/subot-campaign/check',
-        method: 'post',
-        data: {
-            bot_id,
-            email,
-            phone: phoneToSend,
-        },
-    });
-};
-const sendSMSOtpLead = ({ phone, type, }) => {
-    return leadApi.call({
-        url: type === 'phone' ? 'api/sms/otp' : 'api/sms/whatsapp_otp',
-        method: 'post',
-        data: {
-            // The type Whatsapp do not remove the '+'
-            phone_number: type === 'phone' ? phone.replace('+', '') : phone,
-        },
-    });
-};
-const verifyOtpLead = ({ phone, otp, type, }) => {
-    return leadApi.call({
-        url: type === 'phone' ? 'api/sms/verify' : 'api/sms/whatsapp_verify',
-        method: 'post',
-        data: {
-            // The type Whatsapp do not remove the '+'
-            otp_code: otp,
-            phone_number: type === 'phone' ? phone.replace('+', '') : phone,
-        },
-    });
-};
-const Service = {
-    campaignGetById,
-    validateEmailOrPhoneOnSubot,
-    validateEmailOrPhoneOnLeadGen,
-    sendSMSOtpLead,
-    verifyOtpLead,
-};
-
-const checkUsedEmailOrPhone = (campaignId, campaign_subot_id, data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    const key = 'email' in data ? 'email' : 'phone';
-    const value = 'email' in data ? data.email : data.phone;
-    const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
-    /** Check on Leadgen Tool */
-    const resLeadGen = yield Service.validateEmailOrPhoneOnLeadGen({
-        campaign_id: [campaignId],
-        [key]: value, // Can be email or phone
-    });
-    if (resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_001' ||
-        resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_002') {
-        return errorMsg;
-    }
-    /** Check on Subot */
-    if (campaign_subot_id.length) {
-        const resSubot = yield Service.validateEmailOrPhoneOnSubot({
-            bot_id: campaign_subot_id,
-            [key]: value, // Can be email or phone
-        });
-        if (resSubot._errorCode === 'CheckSuBotLeadTool_ERR_001') {
-            return errorMsg;
-        }
-    }
-});
-const validatedCache = {
-    email: {},
-    phone: {},
-};
-const checkUsedEmailOrPhoneWithCache = (campaignId, campaign_subot_id, data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-    const key = 'email' in data ? 'email' : 'phone';
-    const value = 'email' in data ? data.email : data.phone;
-    const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
-    if (validatedCache[key][value]) {
-        if (validatedCache[key][value].value) {
-            return errorMsg;
-        }
-        else if (!validatedCache[key][value].value &&
-            validatedCache[key][value].expire > Date.now()) {
-            return '';
-        }
-    }
-    const res = yield checkUsedEmailOrPhone(campaignId, campaign_subot_id, data);
-    if (res) {
-        validatedCache[key][value] = {
-            value: true,
-        };
-    }
-    else {
-        validatedCache[key][value] = {
-            value: false,
-            expire: Date.now() + 1000 * 60,
-        };
-    }
-    return res;
-});
-const clearCacheUsedEmailOrPhone = () => {
-    validatedCache.email = {};
-    validatedCache.phone = {};
-};
-
 // You can give context variables any name
 const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
@@ -785,7 +1391,7 @@ const LocationBlock = ({ name, placeholder, locale, }) => {
     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) })),
         React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
-        React__default["default"].createElement(index.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: true, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
+        React__default["default"].createElement(index$1.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: true, 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)))));
@@ -797,52 +1403,52 @@ const TitleBlock = ({ children, align, }) => (React__default["default"].createEl
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const form = useLeadFormContext();
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index$3) => {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         const { name = '', data = {} } = b || {};
         const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
         switch (name) {
             case 'TitleBlock':
-                return (React__default["default"].createElement(TitleBlock, { key: index$3, align: align }, value));
+                return (React__default["default"].createElement(TitleBlock, { key: index, align: align }, value));
             case 'SubtitleBlock':
-                return (React__default["default"].createElement(SubtitleBlock, { key: index$3, align: align }, value));
+                return (React__default["default"].createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default["default"].createElement(index.Input, Object.assign({ key: index$3, withAsterisk: true, spellCheck: false, type: "text", placeholder: placeholder, className: "lead-modal__form-control", 
+                return (React__default["default"].createElement(index$1.Input, Object.assign({ key: index, withAsterisk: true, 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))));
             case 'NumberBlock':
-                return (React__default["default"].createElement(index.NumberInput, Object.assign({ key: index$3, withAsterisk: true, spellCheck: false, type: "number", placeholder: placeholder, className: "lead-modal__form-control", 
+                return (React__default["default"].createElement(index$1.NumberInput, Object.assign({ key: index, withAsterisk: true, 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))));
             case 'EmailBlock':
-                return (React__default["default"].createElement(index.Input, Object.assign({ key: index$3, withAsterisk: true, spellCheck: false, 
+                return (React__default["default"].createElement(index$1.Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, 
                     // type="email"
                     placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'PhoneBlock': {
-                const id = popupId + '-' + value + '-' + index$3;
-                return (React__default["default"].createElement(index.Input.Wrapper, Object.assign({ size: "md", withAsterisk: true, key: index$3, label: placeholder, 
+                const id = popupId + '-' + value + '-' + index;
+                return (React__default["default"].createElement(index$1.Input.Wrapper, Object.assign({ size: "md", withAsterisk: true, key: index, label: placeholder, 
                     // error={errorField.phone}
                     className: "lead-modal__form-control", labelProps: {
                         htmlFor: id,
                     } }, form.getInputProps(value)),
-                    React__default["default"].createElement(index.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
+                    React__default["default"].createElement(index$1.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" })));
             }
             case 'LocationBlock': {
-                return (React__default["default"].createElement(LocationBlock, { key: index$3, name: value, placeholder: placeholder, locale: locale }));
+                return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale }));
             }
             case 'DateBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$2.DatePicker, Object.assign({ withAsterisk: true, key: index$3, type: "default", name: value, placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "date" }, form.getInputProps(value))),
+                    React__default["default"].createElement(index$3.DatePicker, Object.assign({ withAsterisk: true, 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" })));
             case 'LinkButtonBlock':
-                return (React__default["default"].createElement("div", { key: index$3 },
+                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$1.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$2.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))));
@@ -851,26 +1457,26 @@ 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.Checkbox.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-control", key: index$3, label: placeholder, size: "md", sx: {
+                    React__default["default"].createElement(index$1.Checkbox.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-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.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$1.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.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index.Radio.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-control", key: index$3, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    isSendMailChimp && (React__default["default"].createElement(index$1.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
+                    React__default["default"].createElement(index$1.Radio.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-control", key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$1.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.Select, Object.assign({ key: index$3, className: "lead-modal__form-control", label: placeholder, withAsterisk: true, name: value, data: listQuestion.map((l) => ({
+                    React__default["default"].createElement(index$1.Select, Object.assign({ key: index, className: "lead-modal__form-control", label: placeholder, withAsterisk: true, 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.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 ? React__default["default"].createElement(React__default["default"].Fragment, null) : undefined }))));
+                    React__default["default"].createElement(index$1.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 ? React__default["default"].createElement(React__default["default"].Fragment, null) : undefined }))));
         }
         return null;
     })));
@@ -979,9 +1585,9 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
                 e.preventDefault();
                 submitOtp();
             }, className: "lead-phone-otp-form" },
-            React__default["default"].createElement(index$3.Heading, { tag: "h3", fontWeight: "bold", style: { marginBottom: 4 } }, t('lead.otp.title')),
-            React__default["default"].createElement(index$4.Text, { size: "p1", color: theme.theme.colors.gray600 }, t('lead.otp.desc', { phone: displayPhone })),
-            React__default["default"].createElement(index.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: "Enter OTP", className: "lead-modal__form-control", label: "Phone OTP", "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
+            React__default["default"].createElement(index$4.Heading, { tag: "h3", fontWeight: "bold", style: { marginBottom: 4 } }, t('lead.otp.title')),
+            React__default["default"].createElement(index.Text, { size: "p1", color: theme.theme.colors.gray600 }, t('lead.otp.desc', { phone: displayPhone })),
+            React__default["default"].createElement(index$1.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: "Enter OTP", className: "lead-modal__form-control", label: "Phone OTP", "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
                     setIsDirty(true);
                     setOtp(v);
                     if (isDirty && !v)
@@ -989,10 +1595,10 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
                     else
                         setErrorMsg(undefined);
                 }, error: isDirty ? errorMsg : undefined }),
-            React__default["default"].createElement(index$1.Button, { size: "md", color: "primary", className: `lead-modal__btn ${LEAD_CLASS}`, 
+            React__default["default"].createElement(index$2.Button, { size: "md", color: "primary", className: `lead-modal__btn ${LEAD_CLASS}`, 
                 // onClick={() => submitOtp()}
                 disabled: !otp, isLoading: isSubmitLoading }, t('lead.otp.verify')),
-            React__default["default"].createElement(index$1.Button, { type: "button", size: "md", color: "transparent", className: `lead-modal__btn lead-phone-otp-button ${LEAD_CLASS}`, onClick: () => {
+            React__default["default"].createElement(index$2.Button, { type: "button", size: "md", color: "transparent", className: `lead-modal__btn lead-phone-otp-button ${LEAD_CLASS}`, onClick: () => {
                     sendOtp();
                 }, disabled: !!resendTimer }, t('lead.otp.resend', {
                 timer: resendTimer ? ` (${resendTimer}s)` : '',
@@ -1321,7 +1927,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                                             React__default["default"].createElement("span", { style: { fontWeight: 'bold' } },
                                                 React__default["default"].createElement("a", { target: "blank", href: popUpTermURL ||
                                                         'https://hellobacsi.com/chinh-sach', rel: "noopener noreferrer", style: { textDecoration: 'none' } }, popUpTermText)))),
-                                    React__default["default"].createElement(index$1.Button, { size: "md", id: "lead-submit", type: "submit", className: `lead-modal__btn ${LEAD_CLASS}`, disabled: !checkedTerm, isLoading: isSubmitLoading }, popUpSubmitText))))))))),
+                                    React__default["default"].createElement(index$2.Button, { size: "md", id: "lead-submit", type: "submit", className: `lead-modal__btn ${LEAD_CLASS}`, disabled: !checkedTerm, isLoading: isSubmitLoading }, popUpSubmitText))))))))),
                 !currentLayout.includes('Inline') && (React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
     if (!renderAfterImageSizes)
         return null;
@@ -1895,7 +2501,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
 };
 
 // mount css
-const LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl, DEBUG_URL, forceCampaign, }) => {
+const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl, DEBUG_URL, forceCampaign, children, }) => {
     var _a;
     const scrollEventHandlerRef = React.useRef();
     const leadStartTimeRef = React.useRef(Date.now());
@@ -2152,17 +2758,23 @@ const LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
         React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: {
                 locale,
                 values: getTranslations(locale),
-            } },
-            React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
-                React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: 9999999999 } },
-                    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,
-                            !!showCampaign.extra_fields.currentLayout &&
-                                !showCampaign.extra_fields.currentLayout.includes('Inline') &&
-                                !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.5, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                            React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale })))));
-                    }))))));
-};
+            } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
+            React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: 9999999999 } },
+                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,
+                        !!showCampaign.extra_fields.currentLayout &&
+                            !showCampaign.extra_fields.currentLayout.includes('Inline') &&
+                            !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.5, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
+                        React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale })))));
+                })))))));
+};
+const LeadGen = _LeadGen;
+LeadGen.Heading = Heading;
+LeadGen.Description = Description;
+LeadGen.Form = Form;
+LeadGen.Thankyou = Thankyou;
+LeadGen.OtpForm = OtpBlock$1;
+LeadGen.Close = Close.Close;
 
 exports.LeadGen = LeadGen;