@hhgtech/hhg-components 1.28.79 → 1.28.80

package/build/esm/lead.js

@@ -1,47 +1,50 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-0f26fe74.js';
-import React__default, { createContext, useState, useEffect, useMemo, useRef, useContext } from 'react';
+import { _ as __rest, a as __awaiter } from './tslib.es6-2581561d.js';
+import React__default, { createContext, useMemo, useRef, useState, useEffect, useContext } from 'react';
 import debounce from 'lodash/debounce';
-import { v1 } from 'uuid';
-import { B as Button } from './index-6c13160b.js';
-import { C as CommonGAssets } from './index-3abc2ca4.js';
-import { Portal, Box, Transition, Overlay } from '@mantine/core';
-import { T as Text } from './index-219dd023.js';
-import './index.styles-ea8ece6c.js';
-import { S as Select, d as Checkbox, c as Input, R as Radio, P as Phone, N as NumberInput } from './index-b8ea5a23.js';
-import './constants-328aaf66.js';
-import './Subot-8b616873.js';
-import './utils-ed2b6b73.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-59d61ca1.js';
-import { D as DatePicker } from './index-95da4552.js';
-import { t as theme } from './theme-a3e5a214.js';
-import { T as TranslationsContext } from './translationsContext-b0ae072f.js';
+import { createFormContext } from '@mantine/form';
+import { u as useTranslations } from './useTranslations-a559a7a5.js';
+import { T as Text } from './index-39528b9b.js';
+import { createStyles, Box, Portal, Transition, Overlay } from '@mantine/core';
+import './index.styles-cf0b32a3.js';
+import { S as Select, d as Checkbox, c as Input, R as Radio, P as Phone, N as NumberInput, B as Button$1 } from './index-14587dbf.js';
+import { B as Button } from './index-78b15ede.js';
+import { C as CommonGAssets } from './index-97d0e5e4.js';
+import './constants-d53f9101.js';
+import './Subot-7661c139.js';
+import './utils-a88682f9.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-ad80dd9a.js';
+import { D as DatePicker } from './index-76a63956.js';
+import { t as theme } from './theme-b8e10c2e.js';
+import { T as TranslationsContext } from './translationsContext-a710bd79.js';
 import 'string-format';
 import '@mantine/hooks';
-import './index-9de0216f.js';
-import './utils-dad13492.js';
-import './index.styled-007a7d61.js';
-import './index-bd70c317.js';
-import { M as MAPPED_LOCALE } from './utils-b5c85238.js';
+import './index-e329bfff.js';
+import './utils-8cfab824.js';
+import './index.styled-938c9e2d.js';
+import './index-11c2da20.js';
+import { M as MAPPED_LOCALE } from './utils-93eb13e7.js';
 import '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-17fceeb6.js';
-import { createFormContext } from '@mantine/form';
-import { u as useTranslations } from './useTranslations-23fdfbc6.js';
-import { H as Heading } from './index-611c21bf.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-e14d1036.js';
+import { H as Heading$1 } from './index-f98bf91e.js';
+import { v1 } from 'uuid';
 import { createPortal } from 'react-dom';
-import { g as getCookie, s as setCookie } from './cookieHelper-144d1108.js';
+import { g as getCookie, s as setCookie } from './cookieHelper-fb2f4bf7.js';
 import dayjs from 'dayjs';
-import './isProduction-1651fbe3.js';
+import { C as Close } from './Close-4ca83dfd.js';
 import 'styled-components';
-import './animation-fa81f721.js';
+import './animation-9a852d86.js';
 import 'react-keyed-flatten-children';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-b04da7b3.js';
+import './useUniqueId-4d87b935.js';
 import '@hhgtech/icons/core';
+import './isProduction-a14c0289.js';
 import 'date-fns/locale';
 import 'slugify';
 
+const LeadGenComponentContext = createContext({});
+
 const CAMPAIGN_TARGET_TYPE = { LINKS: 1, TAGS: 2 };
 let LEAD_API = 'https://dev.leadgen.hellobacsi.com/';
 const LEAD_DEVICE_TYPE = {
@@ -106,25 +109,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 = __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 = __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) => __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) => __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] = createFormContext();
+const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
+    const { t } = useTranslations();
+    const validateObj = 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 = 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 = useRef(false);
+    const validatingEmailRef = useRef(false);
+    const leadFormConfig = useLeadFormConfig$1({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+    });
+    const [showOtpPhone, setShowOtpPhone] = useState(null);
+    const formRef = useRef();
+    const onClose = () => {
+        if (showOtpPhone) {
+            setShowOtpPhone(null);
+        }
+        else {
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+        }
+    };
+    useEffect(() => {
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
+        }
+        clearCacheUsedEmailOrPhone();
+    }, []);
+    return campaign ? (React__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 = __rest(_a, []);
+    const { description } = useContext(LeadGenComponentContext);
+    return description ? (React__default.createElement(Text, Object.assign({ size: "p3" }, rest), description)) : null;
+};
+
+var useStyles$2 = createStyles(() => {
+    return {
+        control: {},
+    };
+});
+
+const libraries$1 = ['places'];
+const LocationBlock$1 = ({ name, placeholder, locale, }) => {
+    var _a;
+    const form = useLeadFormContext$1();
+    const [searchValue, setSearchValue] = useState('');
+    const [address, setAddress] = useState('');
+    const { predictions } = 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] = useState(null);
+    const [ready, setReady] = useState(false);
+    const randRef = useRef(Math.random().toString(36).substring(7));
+    const options = 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]);
+    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)) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+                setTimeout(() => {
+                    setReady(true);
+                }, 200);
+            });
+        }
+        else {
+            setReady(true);
+        }
+    }, []);
+    if (!ready)
+        return (React__default.createElement("div", { style: {
+                height: 73,
+            } }));
+    return (React__default.createElement(React__default.Fragment, null,
+        LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries$1, loadingElement: React__default.createElement(React__default.Fragment, null) })),
+        React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
+        React__default.createElement(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.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+                React__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.createElement(React__default.Fragment, null) }, form.getInputProps(name)))));
+};
+
+const SubtitleBlock$1 = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const TitleBlock$1 = ({ children, align, }) => (React__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.createElement(React__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.createElement(TitleBlock$1, { key: index, align: align }, value));
+            case 'SubtitleBlock':
+                return (React__default.createElement(SubtitleBlock$1, { key: index, align: align }, value));
+            case 'TextBlock':
+                return (React__default.createElement(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.createElement(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.createElement(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.createElement(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.createElement(Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
+                            form.setFieldValue(value, v);
+                        }, 
+                        // onBlur={(e) => inputOnBlur('tel', e)}
+                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+            }
+            case 'LocationBlock': {
+                return (React__default.createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale }));
+            }
+            case 'DateBlock':
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(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.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
+            case 'LinkButtonBlock':
+                return (React__default.createElement("div", { key: index },
+                    React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
+                        React__default.createElement(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.createElement(React__default.Fragment, null,
+                    isSendMailChimp && (React__default.createElement("div", { style: {
+                            display: 'none',
+                        }, "data-name": value + '-mailchimp' })),
+                    React__default.createElement(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.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+            case 'RadioBlock':
+                return (React__default.createElement(React__default.Fragment, null,
+                    isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
+                    React__default.createElement(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.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+            case 'DropdownBlock':
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
+                    React__default.createElement(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.createElement(React__default.Fragment, null,
+                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? React__default.createElement(React__default.Fragment, null) : undefined }))));
+        }
+        return null;
+    })));
+};
+
+var useStyles$1 = createStyles(() => {
+    return {
+        root: {},
+        header: {},
+        heading: {},
+        description: {},
+        term: {},
+        controlList: {},
+        control: {},
+        submitBtn: {},
+    };
+});
+
+const Heading = (_a) => {
+    var rest = __rest(_a, []);
+    const { heading } = useContext(LeadGenComponentContext);
+    return heading ? (React__default.createElement(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, } = useContext(LeadGenComponentContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'LeadGen__FormComponent',
+        styles,
+        classNames,
+    });
+    const [checkedTerm, setCheckedTerm] = useState(true);
+    const [isSubmitLoading, setIsSubmitLoading] = 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.createElement(LeadFormProvider$1, { form: form },
+        React__default.createElement(Box, { component: "form", ref: formRef, className: cx(className, classes.root), onSubmit: middlewareOnSubmit, styles: styles },
+            React__default.createElement("div", { className: classes.header },
+                React__default.createElement(Heading, { className: classes.heading }),
+                React__default.createElement(Description, { className: classes.description })),
+            React__default.createElement("div", { className: classes.controlList },
+                React__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.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: classes.term },
+                    React__default.createElement("div", { className: "lead-modal__checkbox" },
+                        React__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.createElement("div", { className: "lead-modal__checkbox__control", "aria-hidden": "true" })),
+                    React__default.createElement("label", { htmlFor: "checkbox", className: "lead-modal__checkbox__label" },
+                        popUpTermAgreeText,
+                        ' ',
+                        React__default.createElement("span", { style: { fontWeight: 'bold' } },
+                            React__default.createElement("a", { target: "blank", href: popUpTermURL || 'https://hellobacsi.com/chinh-sach', rel: "noopener noreferrer", style: { textDecoration: 'none' } }, popUpTermText)))),
+                React__default.createElement(Button$1, { size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, disabled: !checkedTerm, loading: isSubmitLoading }, popUpSubmitText))))));
+};
+const Form = (props) => {
+    const { showOtpPhone, showThankyou } = useContext(LeadGenComponentContext);
+    return showThankyou || showOtpPhone ? null : React__default.createElement(FormComponent, Object.assign({}, props));
+};
+
+var useStyles = createStyles(() => {
+    return {
+        root: {},
+        heading: {},
+        description: {},
+        control: {},
+        submitBtn: {},
+        resendOtp: {},
+    };
+});
+
+const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, styles, classNames, }) => {
+    const { t } = useTranslations();
+    const phone = otpData.phone;
+    const otpType = otpData.type;
+    const [otp, setOtp] = useState('');
+    const [isDirty, setIsDirty] = useState(false);
+    const [resendTimer, setResendTimer] = useState(autoSendWhenOpen ? 0 : 60);
+    const inputRef = useRef(null);
+    const [errorMsg, setErrorMsg] = useState();
+    const [displayPhone, setDisplayPhone] = useState('');
+    const formatPhoneNumberIntlRef = useRef();
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const { classes, cx } = useStyles(undefined, {
+        name: 'LeadGen__OTP',
+        styles,
+        classNames,
+    });
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (!formatPhoneNumberIntlRef.current) {
+                const res = yield import('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 = () => __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 = () => __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);
+    });
+    useEffect(() => {
+        setTimeout(() => {
+            if (resendTimer > 0) {
+                setResendTimer((r) => r - 1);
+            }
+        }, 1000);
+    }, [resendTimer]);
+    useEffect(() => {
+        if (autoSendWhenOpen && !resendTimer) {
+            sendOtp();
+        }
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Box, { component: "form", onSubmit: (e) => {
+                e.preventDefault();
+                submitOtp();
+            }, className: cx(classes.root, className) },
+            React__default.createElement(Heading$1, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
+            React__default.createElement(Text, { size: "p1", className: classes.description }, t('lead.otp.desc', { phone: displayPhone })),
+            React__default.createElement(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.createElement(Button$1, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
+                // onClick={() => submitOtp()}
+                disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
+            React__default.createElement(Button$1, { 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 }, } = useContext(LeadGenComponentContext);
+    return showOtpPhone ? (React__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 } = useContext(LeadGenComponentContext);
+    return showThankyou ? typeof children(showThankyou) : null;
 };
 
 var enPH = {
@@ -427,165 +1192,6 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__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 = __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 = __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) => __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) => __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] = createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
@@ -951,7 +1557,7 @@ const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
                 e.preventDefault();
                 submitOtp();
             }, className: "lead-phone-otp-form" },
-            React__default.createElement(Heading, { tag: "h3", fontWeight: "bold", style: { marginBottom: 4 } }, t('lead.otp.title')),
+            React__default.createElement(Heading$1, { tag: "h3", fontWeight: "bold", style: { marginBottom: 4 } }, t('lead.otp.title')),
             React__default.createElement(Text, { size: "p1", color: theme.colors.gray600 }, t('lead.otp.desc', { phone: displayPhone })),
             React__default.createElement(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);
@@ -1867,7 +2473,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 = useRef();
     const leadStartTimeRef = useRef(Date.now());
@@ -2124,17 +2730,23 @@ const LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
         React__default.createElement(TranslationsContext.Provider, { value: {
                 locale,
                 values: getTranslations(locale),
-            } },
-            React__default.createElement(Portal, { target: getPopupWrapperDom() },
-                React__default.createElement(Box, { sx: { position: 'fixed', zIndex: 9999999999 } },
-                    React__default.createElement(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.createElement(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.createElement(React__default.Fragment, null,
-                            !!showCampaign.extra_fields.currentLayout &&
-                                !showCampaign.extra_fields.currentLayout.includes('Inline') &&
-                                !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default.createElement(Overlay, { color: "#000", opacity: 0.5, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                            React__default.createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale })))));
-                    }))))));
-};
+            } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
+            React__default.createElement(Box, { sx: { position: 'fixed', zIndex: 9999999999 } },
+                React__default.createElement(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.createElement(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.createElement(React__default.Fragment, null,
+                        !!showCampaign.extra_fields.currentLayout &&
+                            !showCampaign.extra_fields.currentLayout.includes('Inline') &&
+                            !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default.createElement(Overlay, { color: "#000", opacity: 0.5, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
+                        React__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;
 
 export { LeadGen };