@hhgtech/hhg-components 1.29.371-beta-2 → 1.29.371-beta-3

package/build/esm/lead.js

@@ -1,45 +1,48 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-fa754ad3.js';
-import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, forwardRef, useCallback, useImperativeHandle, memo } from 'react';
-import { createStyles, Box, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Button as Button$2, Portal, Transition, Overlay } from '@mantine/core';
+import { _ as __rest, a as __awaiter } from './tslib.es6-b06892b6.js';
+import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo } from 'react';
+import { createStyles, Box, Button as Button$2, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
-import { u as useTranslations } from './index-9ebfb087.js';
-import { T as TranslationsContext } from './translationsContext-3cfa4370.js';
+import { u as useTranslations } from './index-a8c524a9.js';
+import { T as TranslationsContext } from './translationsContext-1d64cf04.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-d75bba00.js';
-import { T as Text } from './index-ee513777.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-8bb6001d.js';
-import { D as DatePicker } from './index-85bb7fbd.js';
-import { M as MAPPED_LOCALE } from './utils-29c2040a.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f4fc54ed.js';
+import { T as Text } from './index-0978cfdd.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-dc733b8a.js';
+import { D as DatePicker } from './index-e6c329bb.js';
+import { M as MAPPED_LOCALE } from './utils-0cb064a5.js';
 import { DateInput } from '@mantine/dates';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-caa10f60.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-0f233d2a.js';
-import './index-3c328f9c.js';
-import './useMantineLocale-649b965b.js';
-import { B as Button$1 } from './index-88cb038d.js';
-import './index.styles-8613b78f.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-3b4d798b.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-2cbac092.js';
+import './index-8227d187.js';
+import './useMantineLocale-6f10e30e.js';
+import { B as Button$1 } from './index-48aacda8.js';
+import './index.styles-24493eed.js';
 import { useClickOutside } from '@mantine/hooks';
-import './other-ed0364fa.js';
-import './index-855529cf.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-4eb0ee43.js';
-import { B as Button } from './index-2dbeeae9.js';
-import { H as Heading$1 } from './index-d0ff6f79.js';
-import styled from '@emotion/styled';
+import './other-04096300.js';
+import './index-07beb988.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-1043aded.js';
+import { B as Button } from './index-22f4a880.js';
+import { H as Heading$1 } from './index-e3c73f61.js';
+import { t as translationsMap$1 } from './translationsProvider-598fb4c6.js';
+import { L as LOCALE } from './Locale-08f0c7dd.js';
 import { v1 } from 'uuid';
-import { css } from '@emotion/react';
+import { parsePhoneNumber } from 'react-phone-number-input';
+import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { i as isVideo } from './index-998e0727.js';
-import { D as DrawerComponent } from './index-4c8e34b8.js';
-import { u as useScreenSize } from './useScreenSize-17bb6dde.js';
+import { css } from '@emotion/react';
+import { T as TogetherComponentGlobalContext } from './utils-4d4e79bb.js';
+import { i as isVideo } from './index-5a380bf2.js';
+import { D as DrawerComponent } from './index-a88963d3.js';
+import { u as useScreenSize } from './useScreenSize-caf0dd66.js';
 import { createPortal } from 'react-dom';
-import { I as InputDate } from './InputDate-ae2284cb.js';
-import { C as Close } from './Close-a2b7531e.js';
+import { I as InputDate } from './InputDate-7205d5bf.js';
+import { C as Close } from './Close-a61d81c6.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-dca6b17b.js';
 import 'classnames';
-import './useUniqueId-6fb0b391.js';
+import './useUniqueId-879e70af.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -47,6 +50,22 @@ import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
 import '@mantine/notifications';
+import './i18n-values/en-PH.js';
+import './i18n-values/hi-IN.js';
+import './i18n-values/id-ID.js';
+import './i18n-values/km-KH.js';
+import './i18n-values/ms-MY.js';
+import './i18n-values/my-MM.js';
+import './i18n-values/th-TH.js';
+import './i18n-values/tl-PH.js';
+import './i18n-values/vi-VN.js';
+import './i18n-values/vi-VN_MB.js';
+import './i18n-values/zh-TW.js';
+import './index-037ec766.js';
+import 'slugify';
+import 'string-format';
+import './togetherApiPaths.js';
+import './constants-dec93ad8.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -188,6 +207,16 @@ const LEADGEN_BLOCK_INPUT = [
     LEADGEN_BLOCK.CheckboxBlock,
     LEADGEN_BLOCK.TncBlock,
 ];
+const leadGenFieldNamePhone = (listBlockAdded) => {
+    return listBlockAdded
+        .filter(({ name }) => [
+        LEADGEN_BLOCK.PhoneBlock,
+        LEADGEN_BLOCK.PhoneOtpBlock,
+        LEADGEN_BLOCK.WhatsappOtpBlock,
+        LEADGEN_BLOCK.ZaloOtpBlock,
+    ].includes(name))
+        .map(({ data }) => data.value);
+};
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
 const LEAD_LOCALE_DATA = {
     'vi-VN': {
@@ -313,6 +342,7 @@ const formatCampaignDetail = (campaign) => {
 
 class Store {
     constructor() {
+        this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
         this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
         this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
     }
@@ -325,6 +355,8 @@ const LEADGEN_API_METHOD = {
 };
 const LEADGEN_API_PATH = {
     V2_CAMPAIGN: 'api/v2/campaign',
+    V2_SUBSCRIPTION_LEAD: 'api/v2/subscription-box',
+    V2_SUBSCRIPTION_INFO: 'api/campaign/get-title',
 };
 const leadApi = {
     call(_a) {
@@ -429,19 +461,28 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
         },
     });
 };
-const campaignGetByCode = (campaign_code) => {
+const getCampaignByCode = (campaign_code) => {
     return leadApi.call({
         url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
         method: LEADGEN_API_METHOD.GET,
     });
 };
-const campaignPostLead = ({ data }) => {
+const getSubscriptionBoxInfo = ({ category, site, }) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}`,
+        method: LEADGEN_API_METHOD.GET,
+    });
+};
+const postSubscriptionBoxLead = ({ data }) => {
     return leadApi.call({
-        url: 'api/v2/subscription-box',
+        url: LEADGEN_API_PATH.V2_SUBSCRIPTION_LEAD,
         method: LEADGEN_API_METHOD.POST,
         data,
     });
 };
+const postUserInfoFromLeadGen = ({}) => {
+    return;
+};
 const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
     return leadApi.call({
         url: `api/campaign/${code}/impression`,
@@ -459,8 +500,10 @@ const campaignPostImpression = ({ code, action, title_article, ga_client_id, coo
 };
 const Service = {
     campaignGetById,
-    campaignGetByCode,
-    campaignPostLead,
+    getCampaignByCode,
+    getSubscriptionBoxInfo,
+    postSubscriptionBoxLead,
+    postUserInfoFromLeadGen,
     campaignPostImpression,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
@@ -1491,217 +1534,682 @@ const translationsMap = {
     'tl-PH': enPH,
 };
 const getTranslations = (locale) => {
-    const translations = translationsMap[locale];
+    const translations = Object.assign(Object.assign({}, translationsMap$1[locale]), translationsMap[locale]);
     if (translations) {
         return translations;
     }
     return translationsMap['en-PH'];
 };
 
-const LeadGenContext = createContext({});
+const LeadGenContext$1 = createContext({});
 
-const LeadGenSubscriptionBoxContext = createContext({});
-const LeadGenSubscriptionBoxProvider = (props) => {
-    const { campaign_code, apiUrl: apiUrlProps, apiSubotUrl, locale, forceCampaign: forceCampaignProps, children, } = props;
-    const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
-    const leadGenSubscriptionBoxValue = useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [campaign_code, locale, forceCampaign]);
-    const translationContextValue = { locale, values: getTranslations(locale) };
-    useEffect(() => {
-        if (forceCampaignProps) {
-            setForceCampaign(forceCampaignProps);
-            return;
+const LeadGenTranslationProvider = (props) => {
+    const { locale, children } = props;
+    const translationContextValue = useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
+    return (React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children));
+};
+
+// import mockLeadData from './mockLeadData'
+const listCampaignScheduled = [];
+const listCampaignScheduledToActivated = [];
+const listCampaignActiveButExpired = [];
+const listCampaignExcludeSonsored = [];
+const listCampaignDifferentSponsor = [];
+const listCampaignNotDisplayInRangeOfTime = [];
+function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
+}
+const getShuffleArray = (array) => {
+    const newArray = [...array];
+    for (let i = newArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        const temp = newArray[i];
+        newArray[i] = newArray[j];
+        newArray[j] = temp;
+    }
+    return newArray;
+};
+const getTimeByTimezone = (timeZone = 'UTC') => {
+    const date = new Date();
+    return new Date(date.toLocaleString('en-US', { timeZone }));
+};
+const parseDateByCampaignTime = (dateStr) => {
+    // Format like this: 2023-04-04 00:00:00
+    try {
+        const [datePart, timePart] = dateStr.split(' ');
+        const [year, month, day] = datePart.split('-').map(Number);
+        const [hours, minutes, seconds] = timePart.split(':').map(Number);
+        /** JavaScript counts months from 0 to 11 */
+        return new Date(year, month - 1, day, hours, minutes, seconds);
+    }
+    catch (err) {
+        return null;
+    }
+};
+const checkCampaignNowInTimeframe = (c) => {
+    var _a;
+    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
+    const startedAtStr = c.started_at;
+    const endedAtStr = c.ended_at;
+    const startedDate = parseDateByCampaignTime(startedAtStr);
+    const endedDate = parseDateByCampaignTime(endedAtStr);
+    if (!startedDate || !endedDate) {
+        return false;
+    }
+    const timeZone = LEAD_TIMEZONE_DATA[siteId];
+    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
+    if (nowWithTimezoneMs <= endedDate.getTime() &&
+        nowWithTimezoneMs >= startedDate.getTime()) {
+        listCampaignScheduledToActivated.push(c);
+        return true;
+    }
+    return false;
+};
+function checkCampaignActiveButExpireAlready(c) {
+    var _a;
+    /** Do not setup timeframe for this campaign. No need to check */
+    if (c.forever === 1) {
+        return true;
+    }
+    const startedAtStr = c.started_at;
+    const endedAtStr = c.ended_at;
+    const startedDate = parseDateByCampaignTime(startedAtStr);
+    const endedDate = parseDateByCampaignTime(endedAtStr);
+    /** Do not setup timeframe for this campaign. No need to check */
+    if (!startedDate || !endedDate) {
+        return true;
+    }
+    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
+    const timeZone = LEAD_TIMEZONE_DATA[siteId];
+    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
+    /** Check if this expire already, do not show */
+    if (nowWithTimezoneMs > endedDate.getTime()) {
+        listCampaignActiveButExpired.push(c);
+        return false;
+    }
+    return true;
+}
+function shouldNotDisplayIfExcludeAllSponsors(c) {
+    var _a;
+    const excludeSponsored = Number((_a = c.rules.find((i) => i.rule == 'exclude_sponsored')) === null || _a === void 0 ? void 0 : _a.value);
+    const isSponsored = Boolean(document.querySelector('.hhg-disclaimer-text'));
+    if (isSponsored && excludeSponsored) {
+        listCampaignExcludeSonsored.push(c);
+        return true;
+    }
+    return false;
+}
+function shouldDisplayWithCurrentSponsor(c) {
+    var _a, _b;
+    try {
+        // TODO: BE will rename `exclude_sponsored_list` later
+        const stringOrArray = (_a = c.rules.find((i) => i.rule == 'exclude_sponsored_list')) === null || _a === void 0 ? void 0 : _a.value;
+        const whiteListSponsors = stringOrArray instanceof Array ? stringOrArray : JSON.parse(stringOrArray);
+        const dataSponsoredId = Number((_b = document
+            .querySelector('[data-sponsored-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-sponsored-id'));
+        // There is no config for sponsor id and white list, should show as default
+        if (!dataSponsoredId ||
+            dataSponsoredId <= 0 ||
+            whiteListSponsors.length === 0) {
+            return true;
         }
-        if (campaign_code) {
-            Service.campaignGetByCode(campaign_code).then((res) => {
-                const { _data } = res || {};
-                const { campaigns } = _data || {};
-                setForceCampaign(formatCampaignDetail(campaigns));
-            });
+        // Check the dataSponsoredId exists in the white list or not.
+        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
+        if (isExist) {
+            return true;
         }
-    }, [campaign_code]);
-    useEffect(() => {
-        leadStore.apiLeadUrl = apiUrlProps;
-        leadStore.apiSubotUrl = apiSubotUrl;
-        return () => {
-            setForceCampaign(null);
-        };
-    }, []);
-    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
-        return null;
+        listCampaignDifferentSponsor.push({ id: c.id, rules: c.rules });
+        return false;
     }
-    return (React__default.createElement(LeadGenSubscriptionBoxContext.Provider, { value: leadGenSubscriptionBoxValue },
-        React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children)));
-};
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const customParseFormat = require('dayjs/plugin/customParseFormat');
-dayjs.extend(customParseFormat);
-// You can give context variables any name
-const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
-const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
+    catch (err) {
+        // Default is show
+        return true;
+    }
+}
+const filterFnCampaign = (c) => {
+    if (shouldNotDisplayIfExcludeAllSponsors(c)) {
+        return false;
+    }
+    else if (!shouldDisplayWithCurrentSponsor(c)) {
+        return false;
+    }
+    /** Active */
+    if (c.formatted_status === 1) {
+        return checkCampaignActiveButExpireAlready(c);
+    }
+    /** Schedule */
+    if (c.formatted_status === 0) {
+        listCampaignScheduled.push(c);
+        return checkCampaignNowInTimeframe(c);
+    }
+    return false;
+};
+const fillterApprearanceTimeCampaign = (c) => {
     var _a;
-    const { t } = useTranslations();
-    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
-    const LEAD_LOCALE = LEAD_LOCALE_DATA[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
-        LEAD_LOCALE_DATA['vi-VN'];
-    const validateObj = useMemo(() => {
-        const InputBlocks = [
-            'TextBlock',
-            'NumberBlock',
-            'EmailBlock',
-            'PhoneBlock',
-            'DateBlock',
-            'CheckboxBlock',
-            'RadioBlock',
-            'DropdownBlock',
-            'PhoneOtpBlock',
-            'WhatsappOtpBlock',
-            'ZaloOtpBlock',
-            'LocationBlock',
-            'TncBlock',
-        ];
-        // ALL are required and can skip if not touched yet
-        const withSharedCheck = (name, cb, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        block) => {
-            return (value) => {
-                var _a;
-                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
-                if (!formRef.current.isTouched(name))
-                    return;
-                if ((typeof value === 'string' && value.trim() === '') ||
-                    typeof value === 'undefined' ||
-                    (Array.isArray(value) && value.length === 0)) {
-                    return isBLockRequired
-                        ? t('validator.required')
-                        : cb === null || cb === void 0 ? void 0 : cb(value);
-                }
-                return cb === null || cb === void 0 ? void 0 : cb(value);
-            };
+    try {
+        const isTimeInRange = (currentTime, startTime, endTime) => {
+            const startParts = startTime.split(':');
+            const endParts = endTime.split(':');
+            const startDate = new Date();
+            startDate.setHours(Number(startParts[0]), Number(startParts[1]), 0, 0);
+            const endDate = new Date();
+            endDate.setHours(Number(endParts[0]), Number(endParts[1]), 0, 0);
+            return currentTime >= startDate && currentTime <= endDate;
         };
-        return listBlockAdded
-            .filter((b) => InputBlocks.includes(b.name))
-            .reduce((r, b) => {
-            const { name: fieldType, data } = b || {};
-            const { value: fieldName, required } = data || {};
-            const isRequired = required !== null && required !== void 0 ? required : true;
-            if (fieldType === 'NumberBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (value && isNaN(Number(value))) {
-                            return t('validator.number');
-                        }
-                    }, b) });
-            }
-            else if (fieldType === 'EmailBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-                            return t('validator.email');
-                        }
-                        if (!value)
-                            return;
-                        validatingEmailRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(fieldName, 'Validating...');
-                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                email: value,
-                            })
-                                .then((tKey) => {
-                                if (tKey) {
-                                    formRef.current.setFieldError(fieldName, t(tKey));
-                                }
-                                else {
-                                    formRef.current.clearFieldError(fieldName);
-                                }
-                                validatingEmailRef.current = false;
-                            })
-                                .catch((e) => {
-                                console.error(e);
-                                formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
-                                validatingEmailRef.current = false;
-                            });
-                        }, 200);
-                    }, b) });
+        const rulesApprValue = (_a = c.rules.find((i) => i.rule == 'appearance_time')) === null || _a === void 0 ? void 0 : _a.value;
+        const startTime = rulesApprValue.startTime;
+        const endTime = rulesApprValue.endTime || '23:59';
+        if (!startTime) {
+            return true;
+        }
+        if (isTimeInRange(new Date(), startTime, endTime)) {
+            return true;
+        }
+        listCampaignNotDisplayInRangeOfTime.push(c);
+        return false;
+    }
+    catch (err) {
+        return true;
+    }
+};
+let timeoutRef = null;
+let LEAD_SCROLL_EVENT = null;
+function clearPassiveEvent() {
+    if (timeoutRef) {
+        clearTimeout(timeoutRef);
+        timeoutRef = null;
+    }
+    if (LEAD_SCROLL_EVENT) {
+        window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
+        LEAD_SCROLL_EVENT = null;
+    }
+}
+function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
+    // clear previous passive event, check for new condition
+    clearPassiveEvent();
+    const leadCurrentUrl = DEBUG_URL ||
+        ('https://' +
+            location.hostname +
+            location.pathname +
+            location.search).toLowerCase();
+    fetch(leadApi + 'api/campaign/' + leadSiteId, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            url: leadCurrentUrl,
+            ga_client_id: getCookie('_ga') || null,
+        }),
+    })
+        .then((response) => {
+        return response.json();
+        // return mockLeadData || response.json()
+    })
+        .then((data) => {
+        var _a, _b, _c, _d;
+        LeadLog('List campagin: ', data);
+        LEAD_RESET_VAR();
+        if (data._status == 1) {
+            const campaigns = (((_b = (_a = data._data) === null || _a === void 0 ? void 0 : _a.campaigns) === null || _b === void 0 ? void 0 : _b.filter(filterFnCampaign)) || []).filter(fillterApprearanceTimeCampaign);
+            if (!getCookie('hhg-id')) {
+                setCookie('hhg-id', v1(), {
+                    domain: '.' + leadDomain,
+                    path: '/',
+                });
+                LeadLog('😍 Set HHG ID cookie');
             }
-            else if (fieldType === 'PhoneBlock' ||
-                fieldType === 'PhoneOtpBlock' ||
-                fieldType === 'ZaloOtpBlock' ||
-                fieldType === 'WhatsappOtpBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (value &&
-                            window.intlTelInputUtils &&
-                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
-                            return t('validator.phone');
-                        }
-                        if (!value)
-                            return;
-                        validatingPhoneRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(fieldName, 'Validating...');
-                            if (b.data.singleSubmission) {
-                                checkUsedPhoneOnlyWithCache(campaignId, value)
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(fieldName, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(fieldName);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((err) => {
-                                    console.error(err);
-                                    formRef.current.setFieldError(fieldName, err.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                            else {
-                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                    phone: value,
-                                })
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(fieldName, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(fieldName);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((e) => {
-                                    console.error(e);
-                                    formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                        }, 200);
-                    }, b) });
+            // getCookie('hhg-id')
+            // TODO: HP-534 Filter desktop
+            let campaignsDevice = [];
+            if (isMobile()) {
+                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
             }
-            else if (fieldType === 'DateBlock') {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
-                        if (!isRequired && !value) {
-                            return;
-                        }
-                        const errMsg = t('validator.dateInvalid');
-                        const dayInJS = typeof value === 'string'
-                            ? dayjs(value, format, true)
-                            : dayjs(value);
-                        if (!dayInJS.isValid()) {
-                            return errMsg;
-                        }
-                    }, b) });
+            else {
+                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
             }
-            else if (fieldType === 'TncBlock') {
-                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
-                        if (isRequired && !value) {
-                            return t('validator.required');
+            LeadLog(`👓 campaignsDevice`, campaignsDevice);
+            LeadLog('--listCampaignScheduled', listCampaignScheduled);
+            LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
+            LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
+            LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
+            LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
+            LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
+            // Check links
+            let listLinksObj = campaignsDevice
+                .map((i, index) => i.targets
+                .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
+                .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+                .flat(1);
+            // Check list link match current href
+            listLinksObj = listLinksObj.filter((i) => {
+                var _a;
+                const target = new URL(String(i.target).toLowerCase());
+                if (i.option == 'exact_match')
+                    // FOR TEST LOCAL:
+                    // return Boolean(location.pathname === target.pathname)
+                    return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
+                if (i.option == 'start_with') {
+                    // FOR TEST LOCAL:
+                    // if (location.pathname.includes(target.pathname)) {
+                    if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
+                        const listExcluding = i.sub_target
+                            .filter((i) => i.option == 'excluding')
+                            .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+                        return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
+                    }
+                    else {
+                        return false;
+                    }
+                }
+            });
+            // Check tags
+            const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
+            const listTags = listMetaTag.map((i) => i.content);
+            let listCampaignHasTag = [];
+            let listTagsObj = [];
+            if (listTags && listTags.length) {
+                listCampaignHasTag = campaignsDevice
+                    .map((i, index) => i.targets
+                    .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
+                    .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+                    .flat(1);
+                listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
+            }
+            const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
+            const cookieKeys = document.cookie
+                .split('; ')
+                .map((i) => i.split('=')[0]);
+            const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
+            LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
+            const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
+            LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
+            const listCampaignSubmitedClosed = [
+                ...listCampaignCodeSubmited,
+                ...listCampaignCodeClosed,
+            ];
+            const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
+                const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
+                return !hasSubmited;
+            });
+            const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
+            // .sort(
+            //   (a, b) =>
+            //     (listCampaignValid[a.campaignIndex]?.score || 0) -
+            //     (listCampaignValid[b.campaignIndex]?.score || 0),
+            // )
+            LeadLog('--listCampaignValid : ', listCampaignValid);
+            if (listCampaignValid && listCampaignValid.length) {
+                const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
+                LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
+                const { rules } = CAMPAIGN_SHOW;
+                // CHECK RULE TRIGGER POPUP
+                const timeoutRule = Number((_c = rules.find((i) => i.rule == 'time')) === null || _c === void 0 ? void 0 : _c.value);
+                LeadLog(`timeoutRule`, timeoutRule);
+                const scrollRule = Number((_d = rules.find((i) => i.rule == 'scroll')) === null || _d === void 0 ? void 0 : _d.value);
+                LeadLog(`scrollRule`, scrollRule);
+                let impressionAction = 'TIME';
+                if (Number.isInteger(timeoutRule)) {
+                    impressionAction = 'TIME';
+                    LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
+                    timeoutRef = setTimeout(() => {
+                        onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                    }, timeoutRule * 1000);
+                }
+                if (Number.isInteger(scrollRule)) {
+                    impressionAction = 'SCROLL';
+                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
+                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
+                        document.querySelector('body');
+                    const pct = $p.getBoundingClientRect().top;
+                    const pb = $p.offsetHeight;
+                    LeadLog(`👓 Element check scroll: `, $p);
+                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
+                        const wt = window.pageYOffset || document.documentElement.scrollTop;
+                        let percent = 0;
+                        if (wt >= pct) {
+                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
                         }
-                    }, b) });
+                        LeadLog('---Scroll', percent, scrollRule);
+                        // TODO: CHECK FOOTER HEIGHT
+                        if (percent >= scrollRule) {
+                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
+                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                        }
+                    };
+                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
+                        passive: true,
+                    });
+                }
             }
             else {
-                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, undefined, b) });
+                LeadLog('🚧 No lead campaigns on current URL, tags');
             }
-        }, {});
-    }, [listBlockAdded.map((b) => b.name).join(','), format]);
+        }
+    })
+        .catch((err) => {
+        LeadLog(`Lead error: `, err);
+    });
+}
+const LeadLog = (...params) => {
+    if (process.env.NODE_ENV !== 'production' ||
+        (process.env.NEXT_PUBLIC_DEPLOY_ENV &&
+            process.env.NEXT_PUBLIC_DEPLOY_ENV !== 'production') ||
+        (typeof localStorage !== 'undefined' &&
+            localStorage.getItem('hhg_debug') === 'true')) {
+        console.log(...params);
+    }
+};
+
+const LeadGenContext = createContext({
+    submit(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen Submit : ', value);
+        return Promise.reject(value);
+    },
+    submitSubscriptionBox(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen SubmitSubscriptionBox : ', value);
+        return Promise.reject(value);
+    },
+    impression(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen Impression : ', value);
+        return Promise.reject(value);
+    },
+    /** For Subscription Box */
+    subscriptionIcon: '',
+    subscriptionTitle: '',
+});
+const LeadGenContextProvider = (props) => {
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, } = props;
+    const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
+    const [subscriptionInfo, setSubscriptionInfo] = useState({
+        subscriptionIcon: '',
+        subscriptionTitle: '',
+    });
+    const locale = useMemo(() => {
+        return localeProps || LOCALE['PhilippinesEnglish'];
+    }, [localeProps]);
+    const leadGenContextValue = useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [...Object.values(props), forceCampaign]);
+    const { url, campaign_id, campaign_code, cookie_id, ga_client_id, category_id, article_id, article_title, } = useMemo(() => ({
+        url: location.href.toLowerCase() || '',
+        cookie_id: getCookie('hhg-id') || null,
+        ga_client_id: getCookie('_ga'),
+        campaign_id: forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id,
+        campaign_code: campaignCodeProps || (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code),
+        category_id: categoryId,
+        article_id: articleId,
+        article_title: document.title || '',
+    }), [campaignCodeProps, articleId, categoryId, forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id]);
+    const fetchCampaign = useCallback((campaign_code) => {
+        Service.getCampaignByCode(campaign_code).then((res) => {
+            const { _data } = res || {};
+            const { campaigns } = _data || {};
+            LeadLog('** LeadGen Campaign : ', campaigns);
+            setForceCampaign(formatCampaignDetail(campaigns));
+        });
+    }, [campaignCodeProps]);
+    // TODO : Update form for LeadGen
+    const submit = useCallback((data) => {
+        return Service.postSubscriptionBoxLead({ data });
+    }, []);
+    const submitSubscriptionBox = useCallback((value) => {
+        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { campaign_id,
+            site_domain, url: (value === null || value === void 0 ? void 0 : value.url) || url, ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id }), extraValues), { article_id,
+            category_id, article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || article_title });
+        return Service.postSubscriptionBoxLead({ data });
+    }, [
+        extraValues,
+        site_domain,
+        campaign_id,
+        article_id,
+        article_title,
+        category_id,
+        url,
+        ga_client_id,
+    ]);
+    const impression = useCallback((value) => {
+        return Service.campaignPostImpression({
+            url: (value === null || value === void 0 ? void 0 : value.url) || url,
+            action: (value === null || value === void 0 ? void 0 : value.action) || LEADGEN_ACTIONS.SCROLL,
+            code: (value === null || value === void 0 ? void 0 : value.code) || campaign_code,
+            title_article: (value === null || value === void 0 ? void 0 : value.title_article) || article_title,
+            cookie_id: (value === null || value === void 0 ? void 0 : value.cookie_id) || cookie_id,
+            ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id,
+            extra: (value === null || value === void 0 ? void 0 : value.extra) || Object.assign({ cookie_id,
+                article_id, subscription_title: subscriptionInfo.subscriptionTitle }, extraValues),
+            referrer: value === null || value === void 0 ? void 0 : value.referrer,
+        });
+    }, [
+        extraValues,
+        campaign_id,
+        url,
+        campaign_code,
+        article_title,
+        cookie_id,
+        ga_client_id,
+        article_id,
+        subscriptionInfo.subscriptionTitle,
+    ]);
+    useEffect(() => {
+        if (forceCampaignProps) {
+            setForceCampaign(forceCampaignProps);
+            return;
+        }
+        /** For Subscription Box */
+        if (categoryId) {
+            Service.getSubscriptionBoxInfo({
+                category: categoryId,
+                site: site_domain,
+            }).then((res) => {
+                const { _data } = res || {};
+                const { item, campaign_code } = _data || {};
+                const { icon, content } = item;
+                LeadLog('** LeadGen SubscriptionBox campaign_code : ', campaign_code);
+                LeadLog('** LeadGen SubscriptionBox subscription_icon : ', icon);
+                LeadLog('** LeadGen SubscriptionBox subscription_title : ', content);
+                if (icon && content) {
+                    setSubscriptionInfo({
+                        subscriptionIcon: icon,
+                        subscriptionTitle: content,
+                    });
+                }
+                fetchCampaign(campaign_code);
+            });
+            return;
+        }
+        if (campaignCodeProps) {
+            fetchCampaign(campaignCodeProps);
+        }
+    }, [campaignCodeProps, categoryId]);
+    useEffect(() => {
+        leadStore.apiSsoUrl = apiSsoUrl;
+        leadStore.apiLeadUrl = apiLeadUrl;
+        leadStore.apiSubotUrl = apiSubotUrl;
+    }, [apiLeadUrl, apiSubotUrl, apiSsoUrl]);
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
+            submitSubscriptionBox,
+            impression }) },
+        React__default.createElement(LeadGenTranslationProvider, { locale: locale }, children)));
+};
+const useLeadGenContext = () => {
+    const context = useContext(LeadGenContext);
+    return Object.assign(Object.assign({}, context), { apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const customParseFormat = require('dayjs/plugin/customParseFormat');
+dayjs.extend(customParseFormat);
+// You can give context variables any name
+const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
+const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
+    var _a;
+    const { t } = useTranslations();
+    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const LEAD_LOCALE = LEAD_LOCALE_DATA[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
+        LEAD_LOCALE_DATA['vi-VN'];
+    const validateObj = useMemo(() => {
+        const InputBlocks = [
+            'TextBlock',
+            'NumberBlock',
+            'EmailBlock',
+            'PhoneBlock',
+            'DateBlock',
+            'CheckboxBlock',
+            'RadioBlock',
+            'DropdownBlock',
+            'PhoneOtpBlock',
+            'WhatsappOtpBlock',
+            'ZaloOtpBlock',
+            'LocationBlock',
+            'TncBlock',
+        ];
+        // ALL are required and can skip if not touched yet
+        const withSharedCheck = (name, cb, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        block) => {
+            return (value) => {
+                var _a;
+                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
+                if (!formRef.current.isTouched(name))
+                    return;
+                if ((typeof value === 'string' && value.trim() === '') ||
+                    typeof value === 'undefined' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return isBLockRequired
+                        ? t('validator.required')
+                        : cb === null || cb === void 0 ? void 0 : cb(value);
+                }
+                return cb === null || cb === void 0 ? void 0 : cb(value);
+            };
+        };
+        return listBlockAdded
+            .filter((b) => InputBlocks.includes(b.name))
+            .reduce((r, b) => {
+            const { name: fieldType, data } = b || {};
+            const { value: fieldName, required } = data || {};
+            const isRequired = required !== null && required !== void 0 ? required : true;
+            if (fieldType === 'NumberBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value && isNaN(Number(value))) {
+                            return t('validator.number');
+                        }
+                    }, b) });
+            }
+            else if (fieldType === 'EmailBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return t('validator.email');
+                        }
+                        if (!value)
+                            return;
+                        validatingEmailRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(fieldName, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                email: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(fieldName, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(fieldName);
+                                }
+                                validatingEmailRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
+                                validatingEmailRef.current = false;
+                            });
+                        }, 200);
+                    }, b) });
+            }
+            else if (fieldType === 'PhoneBlock' ||
+                fieldType === 'PhoneOtpBlock' ||
+                fieldType === 'ZaloOtpBlock' ||
+                fieldType === 'WhatsappOtpBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value &&
+                            window.intlTelInputUtils &&
+                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
+                            return t('validator.phone');
+                        }
+                        if (!value)
+                            return;
+                        validatingPhoneRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(fieldName, 'Validating...');
+                            if (b.data.singleSubmission) {
+                                checkUsedPhoneOnlyWithCache(campaignId, value)
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(fieldName, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(fieldName);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((err) => {
+                                    console.error(err);
+                                    formRef.current.setFieldError(fieldName, err.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                            else {
+                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                    phone: value,
+                                })
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(fieldName, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(fieldName);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((e) => {
+                                    console.error(e);
+                                    formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                        }, 200);
+                    }, b) });
+            }
+            else if (fieldType === 'DateBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (!isRequired && !value) {
+                            return;
+                        }
+                        const errMsg = t('validator.dateInvalid');
+                        const dayInJS = typeof value === 'string'
+                            ? dayjs(value, format, true)
+                            : dayjs(value);
+                        if (!dayInJS.isValid()) {
+                            return errMsg;
+                        }
+                    }, b) });
+            }
+            else if (fieldType === 'TncBlock') {
+                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
+                        if (isRequired && !value) {
+                            return t('validator.required');
+                        }
+                    }, b) });
+            }
+            else {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, undefined, b) });
+            }
+        }, {});
+    }, [listBlockAdded.map((b) => b.name).join(','), format]);
     const form = useLeadForm({
         validateInputOnChange: true,
         validateInputOnBlur: true,
@@ -1714,26 +2222,188 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
     return { form, validateObj };
 };
 
-const PhoneInput = forwardRef((props, ref) => {
-    const { defaultCountry, id: idProps, name, placeholder, label, labelElement, labelProps, description, descriptionProps, withAsterisk, inputMode, inputContainer, inputWrapperOrder, error, className, classNames, style, styles } = props, restProps = __rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
-    const id = idProps || v1() + name;
-    return (React__default.createElement(Input$1.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
-        React__default.createElement("div", { className: "mantine-Input-wrapper" },
-            React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
-});
-
-const StyledLeadGenFormInner = styled.div `
+const StyledLeadGenThankYou = styled.div `
   display: flex;
-  flex-wrap: wrap;
   gap: 8px;
-  .leadgen-form_input {
-    width: calc(50% - 4px);
-  }
+  flex-direction: column;
+  padding-block: 24px;
 
-  .leadgen-form_input_checkbox {
-    width: 100%;
+  .leadgen-image {
+    width: 120px;
+    height: 120px;
+    margin-inline: auto;
+    object-fit: contain;
+    object-position: center;
+    text-align: center;
   }
-`;
+
+  .leadgen-title {
+    margin-block: 0;
+    color: ${theme.colors.gray900};
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 28px;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-description {
+    margin-block: 0;
+    color: ${theme.colors.gray600};
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: -0.2px;
+    text-align: center;
+  }
+
+  > [data-align] {
+    &[data-align='right'] {
+      text-align: right;
+    }
+    &[data-align='center'] {
+      text-align: center;
+    }
+  }
+`;
+const LeadGenThankYou = ({ image, title, description, showButton = false, button, className, style, }) => {
+    const { src } = image;
+    const { htmlText: titleText, align: titleAlign } = title;
+    const { htmlText: descriptionText, align: descriptionAlign } = description;
+    const { htmlText: buttonText, newtab, url, onClick } = button;
+    return (React__default.createElement(StyledLeadGenThankYou, { className: className, style: style },
+        React__default.createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
+        React__default.createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
+        React__default.createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
+        !!buttonText && showButton && (React__default.createElement(Button$2, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
+};
+
+const StyledLeadGenSubscriptionBoxBody = styled.div `
+  margin-top: 16px;
+  .leadgen-btn {
+    margin-top: 16px;
+  }
+`;
+const StyledLeadGenSubscriptionBoxHeaderImage = styled.div `
+  margin-top: 3px;
+  margin-right: 20px;
+  width: 44px;
+  height: 44px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fix: contain;
+    onject-position: center;
+  }
+
+  :has(img[src='']) {
+    display: none;
+  }
+`;
+const StyledLeadGenSubscriptionBoxHeader = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  .leadgen-title {
+    margin-bottom: 0;
+    flex: 1;
+    min-width: 0;
+    color: ${theme.colors.gray900};
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+    letter-spacing: -0.8px;
+  }
+`;
+const StyledLeadGenSubscriptionBox = styled.div `
+  padding: 16px;
+  border: 1px solid ${theme.colors.neutral100};
+  border-radius: 12px;
+  margin-inline: auto;
+  .leadgen-form_inputs {
+    .leadgen-form_input {
+      width: 100%;
+    }
+  }
+
+  .leadgen-form_input {
+    .mantine-Input-wrapper {
+      max-height: 56px;
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    .leadgen-subscription_box_body {
+      display: flex;
+      > form {
+        flex: 1;
+        min-width: 0;
+
+        .leadgen-form_inputs {
+          .leadgen-form_input {
+            width: calc(50% - 4px);
+          }
+        }
+      }
+
+      .leadgen-btn {
+        margin-top: 0;
+        margin-left: 8px;
+        width: auto;
+        min-height: 56px;
+      }
+    }
+  }
+`;
+const StyledLeadGenSubscriptionBoxA = styled.div `
+  .leadgen-form_input {
+    --phone-select: 45px;
+    .PhoneInput {
+      --phone-select: 45px;
+      .PhoneInputCountry {
+        margin-top: 1px;
+        pointer-events: none;
+        .PhoneInputCountryIconImg,
+        .PhoneInputArrowContainer {
+          display: none;
+        }
+      }
+    }
+  }
+`;
+
+const PhoneInput = forwardRef((props, ref) => {
+    const { defaultCountry, id: idProps, name, placeholder, label, labelElement, labelProps, description, descriptionProps, withAsterisk, inputMode, inputContainer, inputWrapperOrder, error, className, classNames, style, styles } = props, restProps = __rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
+    const id = idProps || v1() + name;
+    return (React__default.createElement(Input$1.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
+        React__default.createElement("div", { className: "mantine-Input-wrapper" },
+            React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
+});
+
+const formatLeadGenFormValue = (values, blocks) => {
+    const newValues = {};
+    for (const block of blocks) {
+        const { data } = block || {};
+        const { value: fieldName } = data || {};
+        if (fieldName in values) {
+            newValues[fieldName] = values[fieldName];
+        }
+    }
+    return newValues;
+};
+
+const StyledLeadGenFormInner = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  .leadgen-form_input {
+    width: calc(50% - 4px);
+  }
+
+  .leadgen-form_input_checkbox {
+    width: 100%;
+  }
+`;
 
 const cssInputNotShrink$1 = css `
   height: 100% !important;
@@ -2123,10 +2793,22 @@ const LeadGenForm = forwardRef((props, ref) => {
     const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
     const formRef = useRef(null);
     const form = formProps || useForm({ initialValues, validate });
-    const middlewareFinish = (values, event) => {
-        onFinish === null || onFinish === void 0 ? void 0 : onFinish(values, event);
-    };
-    const middlewareFinishFailed = (errors, values, events) => {
+    const middlewareFinish = useCallback((values, event) => {
+        /** Set `touched` all values for validation when submiting */
+        form.setTouched(blocks.reduce((touched, { data }) => {
+            touched[data.value] = true;
+            return touched;
+        }, {}));
+        /** Wait for `touched` state and then submit */
+        setTimeout(() => {
+            const { hasErrors } = form.validate();
+            if (hasErrors) {
+                return;
+            }
+            onFinish === null || onFinish === void 0 ? void 0 : onFinish(formatLeadGenFormValue(values, blocks), event);
+        }, 100);
+    }, [form, blocks]);
+    const middlewareFinishFailed = useCallback((errors, values, events) => {
         if (scrollToErrorField && errors) {
             const firstErrorKey = Object.keys(errors)[0];
             const firstErrorElement = document.querySelector(`[name="${firstErrorKey}"]`);
@@ -2142,7 +2824,7 @@ const LeadGenForm = forwardRef((props, ref) => {
             }
         }
         onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errors, values, events);
-    };
+    }, [scrollToErrorField]);
     useEffect(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
             if (!window.intlTelInputUtils) {
@@ -2150,7 +2832,9 @@ const LeadGenForm = forwardRef((props, ref) => {
             }
         }))();
     }, []);
-    useImperativeHandle(ref, () => (Object.assign(Object.assign({}, form), { submit: () => formRef.current.requestSubmit() })), [form, formRef]);
+    useImperativeHandle(ref, () => (Object.assign(Object.assign({}, form), { submit: () => {
+            formRef.current.requestSubmit();
+        } })), [form, formRef]);
     if (!blocks || !blocks.length) {
         return null;
     }
@@ -2218,7 +2902,7 @@ const LeadGenForm = forwardRef((props, ref) => {
                                 return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
-                case 'TncBlock':
+                case LEADGEN_BLOCK.TncBlock:
                     return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         React__default.createElement(Input$1.Wrapper, { error: error },
                             React__default.createElement(Checkbox$1, Object.assign({ value: value, name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, formInputProps)))));
@@ -2231,287 +2915,156 @@ const LeadGenForm = forwardRef((props, ref) => {
 
 const LEADGEN_ORDER_INPUT_WRAPPER = ['label', 'input', 'description', 'error'];
 
-const StyledLeadGenThankYou = styled.div `
-  display: flex;
-  gap: 8px;
-  flex-direction: column;
-  padding-block: 24px;
+const LeadGenSubscriptionBoxA = (props) => {
+    const { loading, image, title, submitText, locale, blocks, form, rules, onFinish, } = props;
+    const formRef = useRef();
+    const imageComp = useMemo(() => {
+        if (!image) {
+            return null;
+        }
+        return (React__default.createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
+            React__default.createElement("img", { src: image, alt: "" })));
+    }, [image]);
+    const titleComp = useMemo(() => {
+        if (typeof title === 'string') {
+            return (React__default.createElement("p", { className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
+        }
+        return React__default.createElement("p", { className: "leadgen-title" }, title);
+    }, [title]);
+    return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
+        React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
+            imageComp,
+            titleComp),
+        React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
+            React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
+            React__default.createElement(Button$2, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => {
+                    formRef.current.submit();
+                }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, submitText))));
+};
 
-  .leadgen-image {
-    width: 120px;
-    height: 120px;
-    margin-inline: auto;
-    object-fit: contain;
-    object-position: center;
-    text-align: center;
-  }
+const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, categoryId, }) => {
+    var _a, _b, _c;
+    const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
+    const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
+    const { submitBlock } = actionBlocks || {};
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, submitSubscriptionBox, impression, onFinish, } = useLeadGenContext();
+    const { t } = useTranslations();
+    const { action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const refContainer = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [showThankyou, setShowThankyou] = useState(false);
+    const validatingEmailRef = useRef(false);
+    const validatingPhoneRef = useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        campaignId: campaign_id,
+        campaign_subot_id,
+        validatingEmailRef,
+        validatingPhoneRef,
+        userInfo,
+    });
+    const subscription_title = useMemo(() => {
+        var _a, _b;
+        return subscriptionTitle ||
+            ((_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) ||
+            t('leadgen.message.title.default');
+    }, [subscriptionTitle, (_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 { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
+    const intersectionObserverCallback = useCallback((entries) => {
+        entries.forEach((entry) => {
+            const { isIntersecting, target } = entry;
+            if (!showThankyou &&
+                isIntersecting &&
+                target === refContainer.current) {
+                impression();
+            }
+        });
+    }, [impression, showThankyou]);
+    const IObserver = new IntersectionObserver(intersectionObserverCallback);
+    const middlewareOnSubmit = useCallback((values) => __awaiter(void 0, void 0, void 0, function* () {
+        const newValues = {
+            subscription_title,
+        };
+        const ssoValues = {
+            sso_user_id: undefined,
+            sso_uuid: undefined,
+            sso_verified_profile: undefined,
+        };
+        const valueKeys = Object.keys(values);
+        for (const key of valueKeys) {
+            const isPhoneField = leadGenFieldNamePhone(listBlockAdded).some((k) => k === key);
+            if (isPhoneField) {
+                const phone = parsePhoneNumber(values[key]);
+                if (phone.isValid()) {
+                    /** Seperate `area_code` and `phone_number` for BE */
+                    newValues['area_code'] = `+${phone.countryCallingCode}`;
+                    newValues['phone_number'] = phone.nationalNumber;
+                    /** Only case login has this update */
+                    if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid)) {
+                        ssoValues['sso_verified_profile'] =
+                            phone.number === (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) ? 1 : 0;
+                        ssoValues['sso_user_id'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
+                        ssoValues['sso_uuid'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid;
+                    }
+                }
+                continue;
+            }
+            newValues[key] = values[key];
+        }
+        setLoading(true);
+        try {
+            const { _data } = (yield submitSubscriptionBox(Object.assign(Object.assign({}, newValues), ssoValues))) || {};
+            const { model } = _data || {};
+            if (model && (model === null || model === void 0 ? void 0 : model.id)) {
+                setShowThankyou(true);
+                onFinish === null || onFinish === void 0 ? void 0 : onFinish(Object.assign(Object.assign({}, newValues), ssoValues), listBlockAdded || []);
+            }
+        }
+        catch (error) {
+            LeadLog('** LeadGen SubscriptionBox error : ', error);
+            pushNotifications({
+                message: t('leadgen.message.error.default'),
+                type: 'danger',
+            });
+        }
+        setLoading(false);
+    }), [
+        subscription_title,
+        listBlockAdded,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.id,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
+    ]);
+    useEffect(() => {
+        if (refContainer.current) {
+            IObserver.observe(refContainer.current);
+        }
+        return () => {
+            IObserver.disconnect();
+        };
+    }, [categoryId]);
+    return (React__default.createElement("div", { ref: refContainer },
+        React__default.createElement(StyledLeadGenSubscriptionBox, null,
+            showThankyou && (React__default.createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiLeadUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
+            !showThankyou && (React__default.createElement(LeadGenSubscriptionBoxA, { loading: loading, image: subscriptionIcon || image, title: subscription_title, submitText: (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value, blocks: listBlockAdded, locale: locale, form: form, rules: validateObj, onFinish: middlewareOnSubmit })))));
+};
+const LeadGenSubscriptionBox$1 = memo(LeadGenSubscriptionBoxWithoutMemo);
 
-  .leadgen-title {
-    margin-block: 0;
-    color: ${theme.colors.gray900};
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 28px;
-    letter-spacing: -0.2px;
-  }
-
-  .leadgen-description {
-    margin-block: 0;
-    color: ${theme.colors.gray600};
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-    letter-spacing: -0.2px;
-    text-align: center;
-  }
-
-  > [data-align] {
-    &[data-align='right'] {
-      text-align: right;
-    }
-    &[data-align='center'] {
-      text-align: center;
-    }
-  }
-`;
-const LeadGenThankYou = ({ image, title, description, showButton = false, button, className, style, }) => {
-    const { src } = image;
-    const { htmlText: titleText, align: titleAlign } = title;
-    const { htmlText: descriptionText, align: descriptionAlign } = description;
-    const { htmlText: buttonText, newtab, url, onClick } = button;
-    return (React__default.createElement(StyledLeadGenThankYou, { className: className, style: style },
-        React__default.createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
-        React__default.createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
-        React__default.createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
-        !!buttonText && showButton && (React__default.createElement(Button$2, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
-};
-
-const StyledLeadGenSubscriptionBoxBody = styled.div `
-  margin-top: 16px;
-  .leadgen-btn {
-    margin-top: 16px;
-  }
-`;
-const StyledLeadGenSubscriptionBoxHeaderImage = styled.div `
-  margin-top: 3px;
-  margin-right: 20px;
-  width: 44px;
-  height: 44px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fix: contain;
-    onject-position: center;
-  }
-
-  :has(img[src='']) {
-    display: none;
-  }
-`;
-const StyledLeadGenSubscriptionBoxHeader = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  .leadgen-title {
-    margin-bottom: 0;
-    flex: 1;
-    min-width: 0;
-    color: ${theme.colors.gray900};
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 1.4;
-    letter-spacing: -0.8px;
-  }
-`;
-const StyledLeadGenSubscriptionBox = styled.div `
-  padding: 16px;
-  border: 1px solid ${theme.colors.neutral100};
-  border-radius: 12px;
-  margin-inline: auto;
-  .leadgen-form_inputs {
-    .leadgen-form_input {
-      width: 100%;
-    }
-  }
-
-  .leadgen-form_input {
-    .mantine-Input-wrapper {
-      max-height: 56px;
-    }
-  }
-
-  @media screen and (min-width: 768px) {
-    .leadgen-subscription_box_body {
-      display: flex;
-      > form {
-        flex: 1;
-        min-width: 0;
-
-        .leadgen-form_inputs {
-          .leadgen-form_input {
-            width: calc(50% - 4px);
-          }
-        }
-      }
-
-      .leadgen-btn {
-        margin-top: 0;
-        margin-left: 8px;
-        width: auto;
-        min-height: 56px;
-      }
-    }
-  }
-`;
-const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, siteId, siteDomain, forceCampaign, campaign_code, article_id, subscription_title: subscriptionTitleProps, }) => {
-    var _a, _b, _c;
-    const refContainer = useRef(null);
-    const validatingEmailRef = useRef(false);
-    const validatingPhoneRef = useRef(false);
-    const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
-    const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
-    const { submitBlock } = actionBlocks || {};
-    const [loading, setLoading] = useState(false);
-    const [showThankyou, setShowThankyou] = useState(false);
-    const formRef = useRef(null);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        campaignId: campaign_id,
-        campaign_subot_id,
-        validatingEmailRef,
-        validatingPhoneRef,
-        userInfo,
-    });
-    const subscription_title = useMemo(() => { var _a, _b; return subscriptionTitleProps || ((_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); }, [subscriptionTitleProps, (_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 { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
-    const { apiUrl } = useMemo(() => {
-        let apiUrl = leadStore.apiLeadUrl;
-        if (apiUrl.includes('localhost')) {
-            apiUrl = 'https://dev.leadgen.hellobacsi.com/';
-        }
-        return {
-            apiUrl,
-        };
-    }, [siteDomain, siteId]);
-    const url = useMemo(() => location.href.toLowerCase() || '', []);
-    const article_title = useMemo(() => document.title || '', []);
-    const cookie_id = useMemo(() => getCookie('hhg-id') || null, []);
-    const ga_client_id = useMemo(() => getCookie('_ga') || null, []);
-    const leadgenImpression = useCallback(() => {
-        Service.campaignPostImpression({
-            url,
-            action: LEADGEN_ACTIONS.SCROLL,
-            code: campaign_code,
-            title_article: article_title,
-            cookie_id,
-            ga_client_id,
-            extra: { cookie_id, article_id, subscription_title },
-        });
-    }, [
-        article_id,
-        article_title,
-        cookie_id,
-        ga_client_id,
-        campaign_code,
-        subscription_title,
-    ]);
-    const intersectionObserverCallback = useCallback((entries) => {
-        entries.forEach((entry) => {
-            const { isIntersecting, target } = entry;
-            if (isIntersecting && target === refContainer.current) {
-                leadgenImpression();
-            }
-        });
-    }, [leadgenImpression]);
-    const IObserver = new IntersectionObserver(intersectionObserverCallback);
-    const middlewareOnSubmit = useCallback((value) => __awaiter(void 0, void 0, void 0, function* () {
-        const newValue = {
-            url,
-            article_title,
-            cookie_id,
-            ga_client_id,
-            article_id,
-            campaign_id,
-            campaign_code,
-            subscription_title: subscription_title,
-        };
-        listBlockAdded.forEach(({ data: { value: k } }) => {
-            newValue[k] = value[k];
-        });
-        setLoading(true);
-        try {
-            const { _data } = (yield Service.campaignPostLead({ data: newValue })) || {};
-            const { model } = _data;
-            if (model && model.id) {
-                setShowThankyou(true);
-            }
-        }
-        catch (error) {
-            console.log('** Error : ', error);
-        }
-        setLoading(false);
-    }), [
-        url,
-        article_id,
-        article_title,
-        cookie_id,
-        ga_client_id,
-        campaign_code,
-        subscription_title,
-        listBlockAdded,
-    ]);
-    useEffect(() => {
-        if (refContainer.current) {
-            IObserver.observe(refContainer.current);
-        }
-        return () => {
-            IObserver.disconnect();
-        };
-    }, [
-        url,
-        article_id,
-        article_title,
-        ga_client_id,
-        campaign_id,
-        campaign_code,
-        subscription_title,
-    ]);
-    return (React__default.createElement("div", { ref: refContainer },
-        React__default.createElement(StyledLeadGenSubscriptionBox, null,
-            showThankyou && (React__default.createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
-            !showThankyou && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(StyledLeadGenSubscriptionBoxHeader, null,
-                    !!image && (React__default.createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
-                        React__default.createElement("img", { src: image, alt: "" }))),
-                    React__default.createElement("p", { className: "leadgen-title" }, subscription_title)),
-                React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
-                    React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: validateObj, blocks: listBlockAdded, locale: locale, onFinish: middlewareOnSubmit }),
-                    React__default.createElement(Button$2, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value)))))));
-};
-const LeadGenSubscriptionBoxWithMemo = memo(LeadGenSubscriptionBoxWithoutMemo);
-
-const Container = () => {
-    const context = useContext(LeadGenSubscriptionBoxContext);
-    const { 
-    // apiUrl: apiUrlProps,
-    // apiSubotUrl,
-    campaign_code, article_id, subscription_title, locale, siteId, siteDomain, userInfo, forceCampaign, } = context;
-    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
-        return null;
-    }
-    return (React__default.createElement(LeadGenSubscriptionBoxWithMemo, { locale: locale, userInfo: userInfo, siteId: siteId, siteDomain: siteDomain, forceCampaign: forceCampaign, campaign_code: campaign_code, article_id: article_id, subscription_title: subscription_title }));
-};
-Container.displayName = 'LeadGenSubscriptionBox';
-const LeadGenSubscriptionBoxContainer = (props) => {
-    const { campaign_code } = props;
-    if (!campaign_code) {
-        return null;
-    }
-    return (React__default.createElement(LeadGenSubscriptionBoxProvider, Object.assign({}, props),
-        React__default.createElement(Container, null)));
-};
-const LeadGenSubscriptionBox = LeadGenSubscriptionBoxContainer;
+const Container = () => {
+    const context = useContext(LeadGenContext);
+    const { campaign_code, locale, siteId, siteDomain, userInfo, forceCampaign } = context;
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code }));
+};
+Container.displayName = 'LeadGenSubscriptionBox';
+const LeadGenSubscriptionBoxContainer = (props) => {
+    const { apiUrl, apiSubotUrl } = props;
+    return (React__default.createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
+        React__default.createElement(Container, null)));
+};
+const LeadGenSubscriptionBox = LeadGenSubscriptionBoxContainer;
 
 const useImageSize = (src) => {
     const [width, setWidth] = useState(16);
@@ -3580,584 +4133,232 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         form.setTouched(fieldStatus);
         if (validatingEmailRef.current || validatingPhoneRef.current) {
             return;
-        }
-        setTimeout(() => {
-            form.onSubmit((v) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (Object.keys(form.errors).length)
-                    return;
-                let newShowOtpPhone = null;
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.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 === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.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 (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
-                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'zalo',
-                        };
-                    }
-                }
-                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);
-    };
-    const onOpenChange = (_open) => {
-        setOpen(_open);
-        if (!_open) {
-            setTimeout(() => {
-                onClose();
-            }, 250);
-        }
-    };
-    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
-    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
-    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
-    const renderAfterImageSizes = imageMobileLoaded &&
-        imageDesktopLoaded &&
-        (isFullscreen ? imageBackgroundLoaded : true);
-    const ButtonSubmit = useMemo(() => {
-        var _a;
-        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$2, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
-    }, [popUpSubmitText, isSubmitLoading, (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide]);
-    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
-    const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
-        var _a, _b, _c;
-        return (React__default.createElement(Button$2, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", onClick: () => {
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
-            } }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
-    })));
-    const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
-        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
-    const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
-    const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
-        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
-            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
-                React__default.createElement("div", { className: "leadgen-form_inner" },
-                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
-    const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
-            setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
-        } }));
-    const PopupThankYou = showThankyou && (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
-    const PopupContent = (React__default.createElement("div", { className: clsx('leadgen-content', {
-            'leadgen-content_small': limitFieldsLightBoxB,
-        }) },
-        !headerInsideFormContainer && PopupHeader,
-        !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
-            PopupThankYou,
-            !showThankyou && (React__default.createElement(React__default.Fragment, null,
-                PopupOtp,
-                PopupEmpty,
-                !(showOtpPhone || showEmpty) && PopupForm))))));
-    const styleOverlay = useMemo(() => {
-        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
-        if (isMobile && imageOverlayMobile) {
-            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
-        }
-        if (!isMobile && imageOverlayDesktop) {
-            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
-        }
-        return styleContent;
-    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
-    const PopupWrapper = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
-        React__default.createElement("div", { className: clsx('leadgen-wrapper', {
-                'leadgen-wrapper_small': limitFieldsLightBoxB,
-            }) },
-            showButtonClose && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
-            PopupContent)));
-    const popupContainerClassName = clsx('leadgen', `leadgen-${currentLayout}`, {
-        'leadgen-lightbox': isLightBox,
-        'leadgen-inline': isInPage,
-        'leadgen-slider': isSlider,
-    });
-    const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
-        PopupWrapper,
-        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
-        isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
-                aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
-            } })) : null,
-        PopupWrapper));
-    if (!renderAfterImageSizes)
-        return null;
-    if (isLightBox || isFullscreen || isSlider) {
-        return PopupContainer;
-    }
-    else if (isSidebar) {
-        return React__default.createElement(SideBarLayout, { content: PopupContainer });
-    }
-    else if (isInline) {
-        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
-    }
-    return null;
-};
-
-const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile, imageDesktop, currentLayout, onOtherSubmit, }) => {
-    const currentPath = location.pathname;
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
-    if (!imageMobileLoaded || !imageDesktopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
-        currentLayout == 'SkinA' ? (React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "le-skin-a-desktop" },
-                React__default.createElement("div", { style: { position: 'relative' } },
-                    React__default.createElement("img", { src: imageDesktop, style: {
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '75%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            width: 'calc(100% - 15px)',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "" },
-                React__default.createElement("div", { style: { position: 'relative', zIndex: 10000 } },
-                    React__default.createElement("img", { src: imageDesktop, style: {
-                            width: '100%',
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '75%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            width: '100%',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
-        React__default.createElement("aside", { className: "le-only-mobile" },
-            React__default.createElement("div", { className: "le-skin-mobile" },
-                React__default.createElement("div", { style: { position: 'relative' } },
-                    isVideo(imageMobile) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true },
-                        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { src: imageMobile, style: {
-                            width: '100%',
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        } })),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '82%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            maxWidth: 'calc(100% - 15px)',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", svgClassName: "le-mobile-btn", onClose: onClose }))))));
-};
-
-// url: imageBlocks.imageMobile.data.url
-// newTab: imageBlocks.imageMobile.data.newtab
-// image: campaignShow.image
-// imageDestkop: campaignShow.image_desktop
-const TabLayout = ({ popupId, url, newTab, image, onClose, onOtherSubmit, }) => {
-    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
-        React__default.createElement("div", { className: "le-tab-popup" },
-            React__default.createElement("div", { style: { position: 'relative' } },
-                React__default.createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    React__default.createElement("img", { className: "js-popup-other-submit", src: image, style: {
-                            aspectRatio: `${imageWidth}/${imageHeight}`,
-                        } })),
-                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
-};
-
-// import mockLeadData from './mockLeadData'
-const listCampaignScheduled = [];
-const listCampaignScheduledToActivated = [];
-const listCampaignActiveButExpired = [];
-const listCampaignExcludeSonsored = [];
-const listCampaignDifferentSponsor = [];
-const listCampaignNotDisplayInRangeOfTime = [];
-function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
-}
-const getShuffleArray = (array) => {
-    const newArray = [...array];
-    for (let i = newArray.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        const temp = newArray[i];
-        newArray[i] = newArray[j];
-        newArray[j] = temp;
-    }
-    return newArray;
-};
-const getTimeByTimezone = (timeZone = 'UTC') => {
-    const date = new Date();
-    return new Date(date.toLocaleString('en-US', { timeZone }));
-};
-const parseDateByCampaignTime = (dateStr) => {
-    // Format like this: 2023-04-04 00:00:00
-    try {
-        const [datePart, timePart] = dateStr.split(' ');
-        const [year, month, day] = datePart.split('-').map(Number);
-        const [hours, minutes, seconds] = timePart.split(':').map(Number);
-        /** JavaScript counts months from 0 to 11 */
-        return new Date(year, month - 1, day, hours, minutes, seconds);
-    }
-    catch (err) {
-        return null;
-    }
-};
-const checkCampaignNowInTimeframe = (c) => {
-    var _a;
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    if (!startedDate || !endedDate) {
-        return false;
-    }
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    if (nowWithTimezoneMs <= endedDate.getTime() &&
-        nowWithTimezoneMs >= startedDate.getTime()) {
-        listCampaignScheduledToActivated.push(c);
-        return true;
-    }
-    return false;
-};
-function checkCampaignActiveButExpireAlready(c) {
-    var _a;
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (c.forever === 1) {
-        return true;
-    }
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (!startedDate || !endedDate) {
-        return true;
-    }
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    /** Check if this expire already, do not show */
-    if (nowWithTimezoneMs > endedDate.getTime()) {
-        listCampaignActiveButExpired.push(c);
-        return false;
-    }
-    return true;
-}
-function shouldNotDisplayIfExcludeAllSponsors(c) {
-    var _a;
-    const excludeSponsored = Number((_a = c.rules.find((i) => i.rule == 'exclude_sponsored')) === null || _a === void 0 ? void 0 : _a.value);
-    const isSponsored = Boolean(document.querySelector('.hhg-disclaimer-text'));
-    if (isSponsored && excludeSponsored) {
-        listCampaignExcludeSonsored.push(c);
-        return true;
-    }
-    return false;
-}
-function shouldDisplayWithCurrentSponsor(c) {
-    var _a, _b;
-    try {
-        // TODO: BE will rename `exclude_sponsored_list` later
-        const stringOrArray = (_a = c.rules.find((i) => i.rule == 'exclude_sponsored_list')) === null || _a === void 0 ? void 0 : _a.value;
-        const whiteListSponsors = stringOrArray instanceof Array ? stringOrArray : JSON.parse(stringOrArray);
-        const dataSponsoredId = Number((_b = document
-            .querySelector('[data-sponsored-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-sponsored-id'));
-        // There is no config for sponsor id and white list, should show as default
-        if (!dataSponsoredId ||
-            dataSponsoredId <= 0 ||
-            whiteListSponsors.length === 0) {
-            return true;
-        }
-        // Check the dataSponsoredId exists in the white list or not.
-        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
-        if (isExist) {
-            return true;
-        }
-        listCampaignDifferentSponsor.push({ id: c.id, rules: c.rules });
-        return false;
-    }
-    catch (err) {
-        // Default is show
-        return true;
-    }
-}
-const filterFnCampaign = (c) => {
-    if (shouldNotDisplayIfExcludeAllSponsors(c)) {
-        return false;
-    }
-    else if (!shouldDisplayWithCurrentSponsor(c)) {
-        return false;
-    }
-    /** Active */
-    if (c.formatted_status === 1) {
-        return checkCampaignActiveButExpireAlready(c);
-    }
-    /** Schedule */
-    if (c.formatted_status === 0) {
-        listCampaignScheduled.push(c);
-        return checkCampaignNowInTimeframe(c);
-    }
-    return false;
-};
-const fillterApprearanceTimeCampaign = (c) => {
-    var _a;
-    try {
-        const isTimeInRange = (currentTime, startTime, endTime) => {
-            const startParts = startTime.split(':');
-            const endParts = endTime.split(':');
-            const startDate = new Date();
-            startDate.setHours(Number(startParts[0]), Number(startParts[1]), 0, 0);
-            const endDate = new Date();
-            endDate.setHours(Number(endParts[0]), Number(endParts[1]), 0, 0);
-            return currentTime >= startDate && currentTime <= endDate;
-        };
-        const rulesApprValue = (_a = c.rules.find((i) => i.rule == 'appearance_time')) === null || _a === void 0 ? void 0 : _a.value;
-        const startTime = rulesApprValue.startTime;
-        const endTime = rulesApprValue.endTime || '23:59';
-        if (!startTime) {
-            return true;
-        }
-        if (isTimeInRange(new Date(), startTime, endTime)) {
-            return true;
-        }
-        listCampaignNotDisplayInRangeOfTime.push(c);
-        return false;
-    }
-    catch (err) {
-        return true;
-    }
-};
-let timeoutRef = null;
-let LEAD_SCROLL_EVENT = null;
-function clearPassiveEvent() {
-    if (timeoutRef) {
-        clearTimeout(timeoutRef);
-        timeoutRef = null;
-    }
-    if (LEAD_SCROLL_EVENT) {
-        window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-        LEAD_SCROLL_EVENT = null;
-    }
-}
-function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
-    // clear previous passive event, check for new condition
-    clearPassiveEvent();
-    const leadCurrentUrl = DEBUG_URL ||
-        ('https://' +
-            location.hostname +
-            location.pathname +
-            location.search).toLowerCase();
-    fetch(leadApi + 'api/campaign/' + leadSiteId, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            url: leadCurrentUrl,
-            ga_client_id: getCookie('_ga') || null,
-        }),
-    })
-        .then((response) => {
-        return response.json();
-        // return mockLeadData || response.json()
-    })
-        .then((data) => {
-        var _a, _b, _c, _d;
-        LeadLog('List campagin: ', data);
-        LEAD_RESET_VAR();
-        if (data._status == 1) {
-            const campaigns = (((_b = (_a = data._data) === null || _a === void 0 ? void 0 : _a.campaigns) === null || _b === void 0 ? void 0 : _b.filter(filterFnCampaign)) || []).filter(fillterApprearanceTimeCampaign);
-            if (!getCookie('hhg-id')) {
-                setCookie('hhg-id', v1(), {
-                    domain: '.' + leadDomain,
-                    path: '/',
-                });
-                LeadLog('😍 Set HHG ID cookie');
-            }
-            // getCookie('hhg-id')
-            // TODO: HP-534 Filter desktop
-            let campaignsDevice = [];
-            if (isMobile()) {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
-            }
-            else {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
-            }
-            LeadLog(`👓 campaignsDevice`, campaignsDevice);
-            LeadLog('--listCampaignScheduled', listCampaignScheduled);
-            LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
-            LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
-            LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
-            LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
-            LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
-            // Check links
-            let listLinksObj = campaignsDevice
-                .map((i, index) => i.targets
-                .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
-                .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                .flat(1);
-            // Check list link match current href
-            listLinksObj = listLinksObj.filter((i) => {
-                var _a;
-                const target = new URL(String(i.target).toLowerCase());
-                if (i.option == 'exact_match')
-                    // FOR TEST LOCAL:
-                    // return Boolean(location.pathname === target.pathname)
-                    return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
-                if (i.option == 'start_with') {
-                    // FOR TEST LOCAL:
-                    // if (location.pathname.includes(target.pathname)) {
-                    if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
-                        const listExcluding = i.sub_target
-                            .filter((i) => i.option == 'excluding')
-                            .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
-                        return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
-                    }
-                    else {
-                        return false;
-                    }
-                }
-            });
-            // Check tags
-            const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
-            const listTags = listMetaTag.map((i) => i.content);
-            let listCampaignHasTag = [];
-            let listTagsObj = [];
-            if (listTags && listTags.length) {
-                listCampaignHasTag = campaignsDevice
-                    .map((i, index) => i.targets
-                    .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
-                    .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                    .flat(1);
-                listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
-            }
-            const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
-            const cookieKeys = document.cookie
-                .split('; ')
-                .map((i) => i.split('=')[0]);
-            const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
-            LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
-            const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
-            LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
-            const listCampaignSubmitedClosed = [
-                ...listCampaignCodeSubmited,
-                ...listCampaignCodeClosed,
-            ];
-            const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
-                const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
-                return !hasSubmited;
-            });
-            const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
-            // .sort(
-            //   (a, b) =>
-            //     (listCampaignValid[a.campaignIndex]?.score || 0) -
-            //     (listCampaignValid[b.campaignIndex]?.score || 0),
-            // )
-            LeadLog('--listCampaignValid : ', listCampaignValid);
-            if (listCampaignValid && listCampaignValid.length) {
-                const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
-                LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
-                const { rules } = CAMPAIGN_SHOW;
-                // CHECK RULE TRIGGER POPUP
-                const timeoutRule = Number((_c = rules.find((i) => i.rule == 'time')) === null || _c === void 0 ? void 0 : _c.value);
-                LeadLog(`timeoutRule`, timeoutRule);
-                const scrollRule = Number((_d = rules.find((i) => i.rule == 'scroll')) === null || _d === void 0 ? void 0 : _d.value);
-                LeadLog(`scrollRule`, scrollRule);
-                let impressionAction = 'TIME';
-                if (Number.isInteger(timeoutRule)) {
-                    impressionAction = 'TIME';
-                    LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
-                    timeoutRef = setTimeout(() => {
-                        onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
-                    }, timeoutRule * 1000);
+        }
+        setTimeout(() => {
+            form.onSubmit((v) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                if (Object.keys(form.errors).length)
+                    return;
+                let newShowOtpPhone = null;
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.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 (Number.isInteger(scrollRule)) {
-                    impressionAction = 'SCROLL';
-                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
-                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
-                        document.querySelector('body');
-                    const pct = $p.getBoundingClientRect().top;
-                    const pb = $p.offsetHeight;
-                    LeadLog(`👓 Element check scroll: `, $p);
-                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
-                        const wt = window.pageYOffset || document.documentElement.scrollTop;
-                        let percent = 0;
-                        if (wt >= pct) {
-                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
-                        }
-                        LeadLog('---Scroll', percent, scrollRule);
-                        // TODO: CHECK FOOTER HEIGHT
-                        if (percent >= scrollRule) {
-                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.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 (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
+                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'zalo',
+                        };
+                    }
+                }
+                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;
                         }
-                    };
-                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
-                        passive: true,
+                        setShowOtpPhone(newShowOtpPhone);
+                    })
+                        .finally(() => {
+                        setIsSubmitLoading(false);
                     });
+                    return;
                 }
-            }
-            else {
-                LeadLog('🚧 No lead campaigns on current URL, tags');
-            }
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+            })(e);
+        }, 100);
+    };
+    const onOpenChange = (_open) => {
+        setOpen(_open);
+        if (!_open) {
+            setTimeout(() => {
+                onClose();
+            }, 250);
         }
-    })
-        .catch((err) => {
-        LeadLog(`Lead error: `, err);
+    };
+    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
+    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
+    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
+    const renderAfterImageSizes = imageMobileLoaded &&
+        imageDesktopLoaded &&
+        (isFullscreen ? imageBackgroundLoaded : true);
+    const ButtonSubmit = useMemo(() => {
+        var _a;
+        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$2, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
+    }, [popUpSubmitText, isSubmitLoading, (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide]);
+    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
+    const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
+        var _a, _b, _c;
+        return (React__default.createElement(Button$2, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", onClick: () => {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
+            } }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
+    })));
+    const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
+        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
+    const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
+    const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
+        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
+            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+                React__default.createElement("div", { className: "leadgen-form_inner" },
+                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
+    const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+            setShowOtpPhone(null);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+        } }));
+    const PopupThankYou = showThankyou && (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
+    const PopupContent = (React__default.createElement("div", { className: clsx('leadgen-content', {
+            'leadgen-content_small': limitFieldsLightBoxB,
+        }) },
+        !headerInsideFormContainer && PopupHeader,
+        !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
+            PopupThankYou,
+            !showThankyou && (React__default.createElement(React__default.Fragment, null,
+                PopupOtp,
+                PopupEmpty,
+                !(showOtpPhone || showEmpty) && PopupForm))))));
+    const styleOverlay = useMemo(() => {
+        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
+        if (isMobile && imageOverlayMobile) {
+            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
+        }
+        if (!isMobile && imageOverlayDesktop) {
+            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
+        }
+        return styleContent;
+    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
+    const PopupWrapper = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        React__default.createElement("div", { className: clsx('leadgen-wrapper', {
+                'leadgen-wrapper_small': limitFieldsLightBoxB,
+            }) },
+            showButtonClose && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
+            PopupContent)));
+    const popupContainerClassName = clsx('leadgen', `leadgen-${currentLayout}`, {
+        'leadgen-lightbox': isLightBox,
+        'leadgen-inline': isInPage,
+        'leadgen-slider': isSlider,
     });
-}
-const LeadLog = (...params) => {
-    if (process.env.NODE_ENV !== 'production' ||
-        (process.env.NEXT_PUBLIC_DEPLOY_ENV &&
-            process.env.NEXT_PUBLIC_DEPLOY_ENV !== 'production') ||
-        (typeof localStorage !== 'undefined' &&
-            localStorage.getItem('hhg_debug') === 'true')) {
-        console.log(...params);
+    const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+        PopupWrapper,
+        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+        isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
+                aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
+            } })) : null,
+        PopupWrapper));
+    if (!renderAfterImageSizes)
+        return null;
+    if (isLightBox || isFullscreen || isSlider) {
+        return PopupContainer;
+    }
+    else if (isSidebar) {
+        return React__default.createElement(SideBarLayout, { content: PopupContainer });
+    }
+    else if (isInline) {
+        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
     }
+    return null;
+};
+
+const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile, imageDesktop, currentLayout, onOtherSubmit, }) => {
+    const currentPath = location.pathname;
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
+    if (!imageMobileLoaded || !imageDesktopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
+        currentLayout == 'SkinA' ? (React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "le-skin-a-desktop" },
+                React__default.createElement("div", { style: { position: 'relative' } },
+                    React__default.createElement("img", { src: imageDesktop, style: {
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '75%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            width: 'calc(100% - 15px)',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "" },
+                React__default.createElement("div", { style: { position: 'relative', zIndex: 10000 } },
+                    React__default.createElement("img", { src: imageDesktop, style: {
+                            width: '100%',
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '75%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            width: '100%',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
+        React__default.createElement("aside", { className: "le-only-mobile" },
+            React__default.createElement("div", { className: "le-skin-mobile" },
+                React__default.createElement("div", { style: { position: 'relative' } },
+                    isVideo(imageMobile) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true },
+                        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { src: imageMobile, style: {
+                            width: '100%',
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } })),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '82%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            maxWidth: 'calc(100% - 15px)',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", svgClassName: "le-mobile-btn", onClose: onClose }))))));
+};
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// image: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const TabLayout = ({ popupId, url, newTab, image, onClose, onOtherSubmit, }) => {
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
+        React__default.createElement("div", { className: "le-tab-popup" },
+            React__default.createElement("div", { style: { position: 'relative' } },
+                React__default.createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    React__default.createElement("img", { className: "js-popup-other-submit", src: image, style: {
+                            aspectRatio: `${imageWidth}/${imageHeight}`,
+                        } })),
+                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
 };
 
 function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
@@ -4173,7 +4374,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
 }
 const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
-    const { apiUrl, siteDomain } = useContext(LeadGenContext);
+    const { apiUrl, siteDomain } = useContext(LeadGenContext$1);
     useEffect(() => {
         const gaCookie = getCookie('_ga') || null;
         fetch(`${apiUrl}api/campaign/${code}/impression`, {
@@ -4568,7 +4769,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default.createElement(LeadGenContext.Provider, { value: { apiUrl, siteDomain, siteId, locale } },
+    return (React__default.createElement(LeadGenContext$1.Provider, { value: { apiUrl, siteDomain, siteId, locale } },
         React__default.createElement(TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
             React__default.createElement(Box, { sx: { position: 'fixed', zIndex: ZINDEX_SSO - 9e6 } },
                 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) => {