@hhgtech/hhg-components 1.28.67 → 1.28.69

package/build/esm/lead.js

@@ -1 +1,2140 @@
-import{_ as e,a as t}from"./tslib.es6-266309d1.js";import a,{createContext as l,useState as n,useEffect as o,useMemo as i,useRef as r,useContext as s}from"react";import d from"lodash/debounce";import{v1 as c}from"uuid";import{B as m}from"./index-3452fed2.js";import{C as u}from"./index-2e99f941.js";import{Portal as p,Box as h,Transition as g,Overlay as v}from"@mantine/core";import{T as b}from"./index-d27a0e25.js";import"./index.styles-94af560f.js";import{S as f,d as y,c as k,R as _,P as E,N as w}from"./index-5408f5a4.js";import"./constants-f7c80032.js";import"./Subot-4642c5bf.js";import"./utils-3d2e3f0f.js";import{b as C,a as N}from"./utils-5b4e60da.js";import{D as T}from"./index-93e5b4f3.js";import{t as S}from"./theme-3db3c9a8.js";import{T as x}from"./translationsContext-6d2efd65.js";import"string-format";import"@mantine/hooks";import"./index-9e5956c2.js";import"./utils-970ce0c0.js";import"./index.styled-14b65c9e.js";import"./index-8c77d7e0.js";import{M as O}from"./utils-b87ec473.js";import"@mantine/dates";import{u as P,G as B}from"./usePlacesAutocomplete-0733ec49.js";import{createFormContext as j}from"@mantine/form";import{u as L}from"./useTranslations-df1b3bb8.js";import{H as $}from"./index-24557f2b.js";import{createPortal as I}from"react-dom";import{g as A,s as D}from"./cookieHelper-4f089e3c.js";import U from"dayjs";import"./isProduction-00695d80.js";import"styled-components";import"./animation-0340efb3.js";import"react-keyed-flatten-children";import"@hhgtech/icons/other";import"@mantine/carousel";import"classnames";import"./useUniqueId-03fbaecd.js";import"@hhgtech/icons/core";import"date-fns/locale";import"slugify";const H=1,R=2;let M="https://dev.leadgen.hellobacsi.com/";const F=1,W=2;let V="";M.includes("localhost")&&(M="https://dev.leadgen.hellobacsi.com/"),location.hostname.includes("marrybaby.vn")&&(V="pink");let q="https://"+location.hostname+location.pathname+location.search;q=q.toLowerCase(),sessionStorage.getItem("insider_object")&&(window.insider_object=JSON.parse(sessionStorage.getItem("insider_object")));const J={"vi-VN":{popupLang:"vi",countryCode:"vn",countryCodeNumber:84},"id-ID":{popupLang:"id",countryCode:"id",countryCodeNumber:62},"th-TH":{popupLang:"th",countryCode:"th",countryCodeNumber:66},"ms-MY":{popupLang:"ms",countryCode:"my",countryCodeNumber:60},"zh-TW":{popupLang:"zh",countryCode:"tw",countryCodeNumber:886},"km-KH":{popupLang:"km",countryCode:"kh",countryCodeNumber:855},"my-MM":{popupLang:"my",countryCode:"mm",countryCodeNumber:95},"hi-IN":{popupLang:"hi",countryCode:"in",countryCodeNumber:91}},Y=J[document.documentElement.lang]||J["vi-VN"];const z={1:"Asia/Ho_Chi_Minh",10:"Asia/Ho_Chi_Minh",11:"Asia/Ho_Chi_Minh",12:"Asia/Ho_Chi_Minh",2:"Asia/Jakarta",3:"Asia/Bangkok",4:"Asia/Phnom_Penh",5:"Asia/Kuala_Lumpur",6:"Asia/Taipei",7:"Asia/Yangon",8:"Asia/Kolkata",9:"Asia/Manila"};var G={"validator.required":"This field is required.","validator.remote":"Please fix this field.","validator.email":"Please enter a valid email address.","validator.phone":"Please input correct phone number.","validator.url":"Please enter a valid URL.","validator.date":"Please enter a valid date.","validator.dateISO":"Please enter a valid date (ISO).","validator.number":"Please enter a valid number.","validator.digits":"Please enter only digits.","validator.creditcard":"Please enter a valid credit card number.","validator.equalTo":"Please enter the same value again.","validator.accept":"Please enter a value with a valid extension.","validator.maxlength":"jQuery.validator.format('Please enter no more than {0} characters.","validator.minlength":"jQuery.validator.format('Please enter at least {0} characters.","validator.rangelength":"jQuery.validator.format('Please enter a value between {0} and {1} characters long.","validator.range":"jQuery.validator.format('Please enter a value between {0} and {1}.","validator.max":"jQuery.validator.format('Please enter a value less than or equal to {0}.","validator.min":"jQuery.validator.format('Please enter a value greater than or equal to {0}.","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"};const K={"en-PH":G,"vi-VN":{"validator.required":"Vui lòng điền mục này","validator.email":"Vui lòng điền email có thật.","validator.number":"Vui lòng điền số có thật","validator.digits":"Vui lòng chỉ điền số","validator.maxlength":"Vui lòng điền dưới {0} số","validator.minlength":"Vui lòng điền hơn {0} số","validator.remote":"Hãy sửa cho đúng.","validator.url":"Hãy nhập URL.","validator.date":"Hãy nhập ngày.","validator.dateISO":"Hãy nhập ngày (ISO).","validator.creditcard":"Hãy nhập số thẻ tín dụng.","validator.equalTo":"Hãy nhập thêm lần nữa.","validator.extension":"Phần mở rộng không đúng.","validator.rangelength":"Hãy nhập từ {0} đến {1} kí tự.","validator.range":"Hãy nhập từ {0} đến {1}.","validator.max":"Hãy nhập từ {0} trở xuống.","validator.min":"Hãy nhập từ {0} trở lên.","validator.phone":"Nhập đúng định dạng số điện thoại","validator.emailUsed":"Email này đã được sử dụng cho chiến dịch.","validator.phoneUsed":"Số điện thoại này đã được sử dụng cho chiến dịch.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"hi-IN":{"validator.required":"इस क्षेत्र की आवश्यकता है।","validator.email":"कृपया एक मान्य ईमेल पता दर्ज करें","validator.number":"कृपया एक वैध संख्या दर्ज करें","validator.digits":"कृपया केवल अंक दर्ज करें","validator.maxlength":"कृपया {0} अक्षर से अधिक दर्ज न करें","validator.minlength":"कृपया कम से कम {0} अक्षर दर्ज करें","validator.phone":"कृपया एक वैध संख्या दर्ज करें","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"id-ID":{"validator.required":"Kolom ini wajib diisi","validator.email":"Tolong daftarkan email yang valid","validator.number":"Tolong daftarkan nomor telepon yang valid","validator.digits":"Tolong masukkan angka saja","validator.maxlength":"Jangan memasukkan lebih dari {0} karakter","validator.minlength":"Tolong ketik sedikitnya {0} karakter","validator.phone":"Tolong daftarkan nomor telepon yang valid","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"ms-MY":{"validator.required":"Bahagian ini wajib diisi.","validator.email":"Sila masukkan alamat emel yang sah.","validator.number":"Sila masukkan no telefon yang sah.","validator.digits":"Sila masukkan nombor digit sahaja.","validator.maxlength":"Sila masukkan tidak lebih dari {0} aksara","validator.minlength":"Sila masukkan sekurang-kurangnya {0} aksara","validator.phone":"Sila masukkan no telefon yang sah.","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"my-MM":{"validator.required":"ဒီနေရာမှာ ဖြည့်ဖို့ လိုအပ်ပါတယ်","validator.email":"မှန်ကန်သော အီးမေးလ်လိပ်စာထည့်သွင်းပါ","validator.number":"မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ","validator.digits":"နံပါတ်များသာဖြည့်ပါ","validator.maxlength":"ကျေးဇူးပြု၍ {0} ထပ်မပိုသော ဂဏန်းများသာဖြည့်ပါ","validator.minlength":"ကျေးဇူးပြု၍ အနည်းဆုံး {0} ဂဏန်းဖြည့်ပါ","validator.phone":"မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"km-KH":{"validator.required":"ព័ត៌មាន​ចាំបាច់​ដែល​ត្រូវ​បំពេញ","validator.email":"សូម​វាយ​អាសយដ្ឋាន​អ៊ីម៉ែល​ឲ្យ​បាន​ត្រឹមត្រូវ","validator.number":"សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ","validator.digits":"វាយ​បញ្ចូល​បាន​តែ​លេខ​ប៉ុណ្ណោះ","validator.maxlength":"សូម​វាយ​បញ្ចូលកុំ​ឲ្យ​លើស {0} តួអក្សរ","validator.minlength":"សូម​វាយ​បញ្ចូល​តិច​បំផុត {0} តួអក្ស","validator.phone":"សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"zh-TW":{"validator.required":"此為必填欄位","validator.email":"請填入有效的 email 地址","validator.number":"請填入有效的電話號碼","validator.digits":"此欄位僅能輸入數字","validator.maxlength":"請輸入少於 {0} 位數","validator.minlength":"請輸入至少 {0} 位數","validator.phone":"請填入有效的電話號碼","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"th-TH":{"validator.required":"ต้องระบุข้อมูลในช่องนี้","validator.email":"กรุณาใส่อีเมล์ที่ถูกต้อง","validator.number":"กรุณาใส่ตัวเลขที่ถูกต้อง","validator.digits":"กรุณาส่เฉพาะตัวเลข","validator.maxlength":"กรุณาใส่ตัวเลขมากกว่า {0} หลัก","validator.minlength":"กรุณาใส่ตัวเลขอย่างน้อย {0} หลัก","validator.phone":"กรุณาใส่ตัวเลขที่ถูกต้อง","validator.emailUsed":"Email already in use for this campaign.","validator.phoneUsed":"Your phone number already in use for this campaign.","lead.otp.title":"Enter OTP","lead.otp.desc":"We have sent an OTP to your mobile number {phone}","lead.otp.verify":"Verify","lead.otp.resend":"Resend OTP{timer}"},"tl-PH":G},Q=e=>{const t=K[e];return t||K["en-PH"]},X=l({}),Z=e=>{const[t,a]=n(16),[l,i]=n(9),[r,s]=n(!1);return o((()=>{if(s(!1),e){const t=new Image;t.addEventListener("load",(()=>{a(t.naturalWidth),i(t.naturalHeight),s(!0)})),t.addEventListener("error",(()=>{a(16),i(9),s(!0)})),t.src=e}else a(16),i(9),s(!0)}),[e]),{loaded:r,width:t,height:l}},ee=({onClose:e,containerClassName:t,svgClassName:l})=>a.createElement("button",{onClick:e,className:`le-newbuilder-close-button js-modal__close ${t||""}`},a.createElement("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",className:l},a.createElement("circle",{cx:"16",cy:"16",r:"16",fill:"white"}),a.createElement("path",{d:"M16 17.05L10.925 22.125C10.7917 22.2584 10.621 22.329 10.413 22.337C10.2044 22.3457 10.025 22.275 9.87502 22.125C9.72502 21.975 9.65002 21.8 9.65002 21.6C9.65002 21.4 9.72502 21.225 9.87502 21.075L14.95 16L9.87502 10.925C9.74169 10.7917 9.67102 10.6207 9.66302 10.412C9.65436 10.204 9.72502 10.025 9.87502 9.87502C10.025 9.72502 10.2 9.65002 10.4 9.65002C10.6 9.65002 10.775 9.72502 10.925 9.87502L16 14.95L21.075 9.87502C21.2084 9.74169 21.3794 9.67069 21.588 9.66202C21.796 9.65402 21.975 9.72502 22.125 9.87502C22.275 10.025 22.35 10.2 22.35 10.4C22.35 10.6 22.275 10.775 22.125 10.925L17.05 16L22.125 21.075C22.2584 21.2084 22.329 21.379 22.337 21.587C22.3457 21.7957 22.275 21.975 22.125 22.125C21.975 22.275 21.8 22.35 21.6 22.35C21.4 22.35 21.225 22.275 21.075 22.125L16 17.05Z",fill:"#595959"}))),te=({popupId:e,url:t,newTab:l,imageDestkop:n,imageMobile:o,onClose:i,onOtherSubmit:r})=>{const{width:s,height:d,loaded:c}=Z(o),{width:m,height:u,loaded:p}=Z(n);return c&&p?a.createElement("div",{id:e,className:"lead-modal-wrapper","data-popup-url":location.pathname,"data-popup-type":"center_tab"},a.createElement("div",{className:"le-center-tab-popup"},a.createElement("div",{style:{position:"relative"}},a.createElement("a",{className:"js-popup-other-submit",href:t,target:l?"blank":"_parent",onClick:r},a.createElement("img",{className:"le-only-mobile",src:o,style:{aspectRatio:`${s}/${d}`}}),a.createElement("img",{className:"le-only-desktop",src:n,style:{aspectRatio:`${m}/${u}`}})),a.createElement(ee,{onClose:i,containerClassName:"close-button-top-right"})))):null},ae=({popupId:e,url:t,title:l,urlText:n,titleAlign:o,subtitle:i,subtitleAlign:r,newTab:s,imageDesktop:d,imageMobile:c,onClose:m,onOtherSubmit:u})=>{const{width:p,height:h,loaded:g}=Z(c),{width:v,height:b,loaded:f}=Z(d);return g&&f?a.createElement("div",{id:e,className:"lead-modal-wrapper lead-floating-wrapper","data-popup-url":location.pathname,"data-popup-type":"floating"},a.createElement("aside",{className:"le-only-desktop"},a.createElement("div",{className:"le-floating-desktop"},a.createElement("div",{className:"le-floating-desktop-wrap",style:{position:"relative",background:"#fff"}},d?a.createElement("div",null,a.createElement("img",{style:{maxWidth:120,borderTopLeftRadius:5,borderBottomLeftRadius:5,aspectRatio:`${v}/${b}`},src:d})):null,a.createElement("div",{style:{padding:20}},a.createElement("div",{className:`le-floating-desktop-title le-text-align-${o}`},l),a.createElement("div",{className:`le-floating-desktop-desc le-text-align-${r}`},i)),a.createElement("a",{target:s?"blank":"_parent",style:{marginLeft:35,textDecoration:"none"},href:t},a.createElement("button",{className:"le-joinbow-floating-btn js-popup-other-submit",onClick:u},n)),a.createElement(ee,{onClose:m,containerClassName:"close-button-top-right"})))),a.createElement("aside",{className:"le-only-mobile"},a.createElement("div",{className:"le-floating-mobile"},a.createElement("div",{className:"le-floating-mobile-wrap",style:{position:"relative",background:"#fff"}},a.createElement("aside",{style:{display:"flex",justifyContent:"space-between"}},a.createElement("div",null,a.createElement("div",{className:`le-floating-mobile-title le-text-align-${o}`},l),a.createElement("div",{className:`le-floating-mobile-desc le-text-align-${r}`},i)),c?a.createElement("div",null,a.createElement("img",{style:{marginLeft:15,marginTop:4,maxWidth:100,aspectRatio:`${p}/${h}`},src:c})):null),a.createElement("div",{style:{textAlign:"center",marginTop:10}},a.createElement("a",{target:s?"blank":"_parent",href:t,style:{textDecoration:"none"}},a.createElement("button",{className:"le-joinbow-floating-btn js-popup-other-submit",onClick:u},n))),a.createElement(ee,{onClose:m,containerClassName:"close-button-top-right"}))))):null};const le=new class{constructor(){this.apiLeadUrl="https://dev.leadgen.hellobacsi.com/",this.apiSubotUrl="https://staging-service-subot.hellohealthgroup.com/"}},ne={call(t){var{url:a,data:l}=t,n=e(t,["url","data"]);return n.body=JSON.stringify(l),n.headers={"Content-Type":"application/json"},fetch(`${le.apiLeadUrl}${a}`,n).then((e=>e.json())).catch((()=>({})))}},oe={call(t){var{url:a,data:l}=t,n=e(t,["url","data"]);return n.body=JSON.stringify(l),n.headers={"Content-Type":"application/json"},fetch(`${le.apiSubotUrl}${a}`,n).then((e=>e.json())).catch((()=>({})))}},ie=({bot_id:e,email:t,phone:a})=>{let l=a;return l&&l.startsWith("0")&&(l=l.substring(1)),oe.call({url:"frontend/api/subot-campaign/check",method:"post",data:{bot_id:e,email:t,phone:l}})},re=({campaign_id:e,email:t,phone:a})=>{let l=a;return l&&l.startsWith("0")&&(l=l.substring(1)),ne.call({url:"api/subot-campaign/check",method:"post",data:{campaign_id:e,email:t,phone:l}})},se=({phone:e,type:t})=>ne.call({url:"phone"===t?"api/sms/otp":"api/sms/whatsapp_otp",method:"post",data:{phone_number:"phone"===t?e.replace("+",""):e}}),de=({phone:e,otp:t,type:a})=>ne.call({url:"phone"===a?"api/sms/verify":"api/sms/whatsapp_verify",method:"post",data:{otp_code:t,phone_number:"phone"===a?e.replace("+",""):e}}),ce={email:{},phone:{}},me=(e,a,l)=>t(void 0,void 0,void 0,(function*(){const n="email"in l?"email":"phone",o="email"in l?l.email:l.phone,i="email"in l?"validator.emailUsed":"validator.phoneUsed";if(ce[n][o]){if(ce[n][o].value)return i;if(!ce[n][o].value&&ce[n][o].expire>Date.now())return""}const r=yield((e,a,l)=>t(void 0,void 0,void 0,(function*(){const t="email"in l?"email":"phone",n="email"in l?l.email:l.phone,o="email"in l?"validator.emailUsed":"validator.phoneUsed",i=yield re({campaign_id:[e],[t]:n});return"SubmitLeadWithBotId_ERR_001"===i._errorCode||"SubmitLeadWithBotId_ERR_002"===i._errorCode||a.length&&"CheckSuBotLeadTool_ERR_001"===(yield ie({bot_id:a,[t]:n}))._errorCode?o:void 0})))(e,a,l);return ce[n][o]=r?{value:!0}:{value:!1,expire:Date.now()+6e4},r})),[ue,pe,he]=j(),ge=["places"],ve=({name:e,placeholder:t,locale:l})=>{var s;const d=pe(),[c,m]=n(""),[u,p]=n(""),{predictions:h}=P(c,"","tl-PH"===l?"en":null===(s=null==l?void 0:l.split("-"))||void 0===s?void 0:s[0]),[g,v]=n(null),[b,y]=n(!1),k=r(Math.random().toString(36).substring(7)),_=i((()=>{const e=h.map((e=>({value:e.description,label:e.description}))),t=e.find((e=>e.value===u));return!u||t?e:[{value:u,label:u}].concat(e)}),[h,u]);return o((()=>{var e,t,a;(null===(a=null===(t=null===(e=null===window||void 0===window?void 0:window.google)||void 0===e?void 0:e.maps)||void 0===t?void 0:t.places)||void 0===a?void 0:a.AutocompleteService)?y(!0):import("@react-google-maps/api").then((e=>{v((()=>e.LoadScript)),setTimeout((()=>{y(!0)}),200)}))}),[]),b?a.createElement(a.Fragment,null,g&&a.createElement(g,{googleMapsApiKey:B,libraries:ge,loadingElement:a.createElement(a.Fragment,null)}),a.createElement("div",{style:{display:"none"},"data-extra":!0,"data-name":e,"data-control":"text"}),a.createElement(f,Object.assign({className:"lead-modal__form-control",label:t,placeholder:t,withAsterisk:!0,name:e,data:_,searchValue:c,onSearchChange:e=>{m(e)},filter:()=>!0,clearable:!0,searchable:!0,onChange:e=>p(e||""),icon:a.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},a.createElement("path",{d:"M9.99999 9.79167C10.4028 9.79167 10.7467 9.64944 11.0317 9.365C11.3161 9.08 11.4583 8.73611 11.4583 8.33333C11.4583 7.93056 11.3161 7.58667 11.0317 7.30167C10.7467 7.01722 10.4028 6.875 9.99999 6.875C9.59721 6.875 9.25332 7.01722 8.96832 7.30167C8.68388 7.58667 8.54166 7.93056 8.54166 8.33333C8.54166 8.73611 8.68388 9.08 8.96832 9.365C9.25332 9.64944 9.59721 9.79167 9.99999 9.79167ZM9.99999 17.875C9.90277 17.875 9.80555 17.8611 9.70832 17.8333C9.6111 17.8056 9.52082 17.7569 9.43749 17.6875C7.46527 15.8958 5.98971 14.2361 5.01082 12.7083C4.03138 11.1806 3.54166 9.77778 3.54166 8.5C3.54166 6.48611 4.1911 4.87833 5.48999 3.67667C6.78832 2.47556 8.29166 1.875 9.99999 1.875C11.7083 1.875 13.2119 2.47556 14.5108 3.67667C15.8092 4.87833 16.4583 6.48611 16.4583 8.5C16.4583 9.77778 15.9689 11.1806 14.99 12.7083C14.0105 14.2361 12.5347 15.8958 10.5625 17.6875C10.4792 17.7569 10.3889 17.8056 10.2917 17.8333C10.1944 17.8611 10.0972 17.875 9.99999 17.875Z",fill:"#8C8C8C"})),autoComplete:"no-auto-complete-"+k.current,rightSection:a.createElement(a.Fragment,null)},d.getInputProps(e)))):a.createElement("div",{style:{height:73}})},be=({children:e,align:t})=>a.createElement("p",{className:`lead-modal__description ${"le-text-align-"+(t||"")} ${V}`},e),fe=({children:e,align:t})=>a.createElement("h2",{className:`lead-modal__title ${"le-text-align-"+(t||"")} ${V}`},e),ye=({listBlockAdded:e,popupId:t,locale:l,onClose:n,onOtherSubmit:o})=>{const i=pe();return a.createElement(a.Fragment,null,e.map(((e,r)=>{const{name:s="",data:d={}}=e||{},{placeholder:c,value:u,align:p,listQuestion:h,isSendMailChimp:g=!1,newtab:v,url:b}=d;switch(s){case"TitleBlock":return a.createElement(fe,{key:r,align:p},u);case"SubtitleBlock":return a.createElement(be,{key:r,align:p},u);case"TextBlock":return a.createElement(k,Object.assign({key:r,withAsterisk:!0,spellCheck:!1,type:"text",placeholder:c,className:"lead-modal__form-control",label:c,"data-control":"text",name:u},i.getInputProps(u)));case"NumberBlock":return a.createElement(w,Object.assign({key:r,withAsterisk:!0,spellCheck:!1,type:"number",placeholder:c,className:"lead-modal__form-control",label:c,"data-control":"number",name:u},i.getInputProps(u)));case"EmailBlock":return a.createElement(k,Object.assign({key:r,withAsterisk:!0,spellCheck:!1,placeholder:c,className:"lead-modal__form-control",label:c,"data-control":"email",name:u},i.getInputProps(u)));case"PhoneOtpBlock":case"WhatsappOtpBlock":case"PhoneBlock":{const e=t+"-"+u+"-"+r;return a.createElement(k.Wrapper,Object.assign({size:"md",withAsterisk:!0,key:r,label:c,className:"lead-modal__form-control",labelProps:{htmlFor:e}},i.getInputProps(u)),a.createElement(E,{name:u,spellCheck:!1,type:"tel",placeholder:c,onChange:e=>{i.setFieldValue(u,e)},id:e,defaultCountry:l&&O[l]||"VN","data-control":"tel"}))}case"LocationBlock":return a.createElement(ve,{key:r,name:u,placeholder:c,locale:l});case"DateBlock":return a.createElement(a.Fragment,null,a.createElement(T,Object.assign({withAsterisk:!0,key:r,type:"default",name:u,placeholder:c,className:"lead-modal__form-control",label:c,"data-control":"date"},i.getInputProps(u))),a.createElement("input",{type:"hidden",name:u,"data-control":"date"}));case"LinkButtonBlock":return a.createElement("div",{key:r},a.createElement("a",{target:v?"blank":"parrent",href:b,style:{textDecoration:"none"}},a.createElement(m,{type:"button",size:"md",className:`lead-modal__btn ${V}`,onClick:()=>{null==n||n(),null==o||o()}},u)));case"CheckboxBlock":return a.createElement(a.Fragment,null,g&&a.createElement("div",{style:{display:"none"},"data-name":u+"-mailchimp"}),a.createElement(y.Group,Object.assign({withAsterisk:!0,className:"lead-modal__form-control",key:r,label:c,size:"md",sx:{display:"flex",flexDirection:"column",gap:8}},i.getInputProps(u)),h.map(((e,t)=>a.createElement(y,{name:u,key:t,value:e.value,label:e.placeholder,"data-control":"checkbox"})))));case"RadioBlock":return a.createElement(a.Fragment,null,g&&a.createElement(k,{type:"hidden",name:u+"-mailchimp",value:g}),a.createElement(_.Group,Object.assign({withAsterisk:!0,className:"lead-modal__form-control",key:r,label:c,size:"md"},i.getInputProps(u)),h.map(((e,t)=>a.createElement(_,{name:u,key:t,value:e.value,label:e.placeholder,"data-control":"radio"})))));case"DropdownBlock":return a.createElement(a.Fragment,null,a.createElement("div",{style:{display:"none"},"data-extra":!0,"data-name":u,"data-control":"dropdown"}),a.createElement(f,Object.assign({key:r,className:"lead-modal__form-control",label:c,withAsterisk:!0,name:u,data:h.map((e=>({value:e.value,label:e.placeholder})))},i.getInputProps(u))));case"TncBlock":const s=i.getInputProps("TNC-"+e.id);return a.createElement(a.Fragment,null,a.createElement(y,Object.assign({name:"TNC-"+e.id,key:e.id,label:a.createElement("p",{className:"lead-modal__tnc-link",dangerouslySetInnerHTML:{__html:d.valueHTML}}),className:"tnc-block","data-control":"checkbox"},s,{error:s.error?a.createElement(a.Fragment,null):void 0})))}return null})))},ke=({otpData:e,onSuccess:l,autoSendWhenOpen:i})=>{const{t:s}=L(),d=e.phone,c=e.type,[u,p]=n(""),[h,g]=n(!1),[v,f]=n(i?0:60),y=r(null),[_,E]=n(),[w,C]=n(""),N=r(),[T,x]=n(!1);o((()=>{t(void 0,void 0,void 0,(function*(){var e;if(!N.current){const e=yield import("react-phone-number-input");N.current=e.formatPhoneNumberIntl}C((null===(e=N.current)||void 0===e?void 0:e.call(N,d))||d)}))}),[d]);const O=()=>t(void 0,void 0,void 0,(function*(){var e;if(!d)return;const t=yield se({phone:d,type:c}),a=null===(e=null==t?void 0:t._messages)||void 0===e?void 0:e[0];"Send sms successfully"===a||"Send WhatsApp successfully"===a?(f(60),setTimeout((()=>{y.current&&(y.current.focus(),y.current.scrollIntoView({block:"center"}))}),100)):"This phone number was verified"===a?l():E(a||"Something went wrong!")}));return o((()=>{setTimeout((()=>{v>0&&f((e=>e-1))}),1e3)}),[v]),o((()=>{i&&!v&&O()}),[]),a.createElement(a.Fragment,null,a.createElement("form",{onSubmit:e=>{e.preventDefault(),t(void 0,void 0,void 0,(function*(){if(!d||!u)return;x(!0);const e=yield de({phone:d,otp:u,type:c}),t=null==e?void 0:e._messages[0];"Verify successfully"===t||"Verify WhatsApp OTP sucess"===t||"This phone number was verified"===t?l():E(t||"something Wrong"),x(!1)}))},className:"lead-phone-otp-form"},a.createElement($,{tag:"h3",fontWeight:"bold",style:{marginBottom:4}},s("lead.otp.title")),a.createElement(b,{size:"p1",color:S.colors.gray600},s("lead.otp.desc",{phone:w})),a.createElement(k,{ref:y,name:"_"+name+"-otp",spellCheck:!1,type:"number",placeholder:"Enter OTP",className:"lead-modal__form-control",label:"Phone OTP","data-control":"otp",withAsterisk:!0,pattern:"[0-9]*",value:u,maxLength:6,onChange:e=>{g(!0),p(e),E(h&&!e?"OTP is required":void 0)},error:h?_:void 0}),a.createElement(m,{size:"md",color:"primary",className:`lead-modal__btn ${V}`,disabled:!u,isLoading:T},s("lead.otp.verify")),a.createElement(m,{type:"button",size:"md",color:"transparent",className:`lead-modal__btn lead-phone-otp-button ${V}`,onClick:()=>{O()},disabled:!!v},s("lead.otp.resend",{timer:v?` (${v}s)`:""}))))},_e=({title:e,titleAlign:t,subtitle:l,subtitleAlign:n,link:o,linkNewTab:i,linkText:r,image:s})=>{const{width:d,height:c,loaded:m}=Z(s);return m?a.createElement("div",{className:"lead-modal__thank-you"},a.createElement("div",{style:{width:"100%"}},a.createElement("img",{src:s,style:{maxHeight:162,objectFit:"cover",aspectRatio:`${d}/${c}`},loading:"lazy"}),e&&a.createElement("h1",{className:`le-thankyou-title le-text-align-${t}`},e),l&&a.createElement("p",{className:`le-thankyou-subtitle le-text-align-${n}`},l),r&&a.createElement("div",null,a.createElement("a",{href:o,target:i?"_blank":"parrent",rel:"noreferrer"},a.createElement("button",{className:`lead-modal__btn ${V}`},r))))):null},Ee=({content:e,inlinePosition:t})=>{const a=i((()=>{if(!t)return null;const e=document.querySelectorAll(`[data-url="${location.pathname}"] .body-content`),a=Array.from(e).reduce(((e,t)=>[...e,...Array.from(t.children)]),[]);if(null==a?void 0:a.length){const e=a.filter((e=>"P"===e.nodeName)),l=a.filter((e=>"H2"===e.nodeName));let n=null;switch(t){case"1th":n=e[0];break;case"2th":n=e[1];break;case"3th":n=e[2];break;case"4th":n=e[3];break;case"5th":n=e[4];break;case"6th":n=e[5];break;case"7th":n=e[6];break;case"8th":n=e[7];break;case"9th":n=e[8];break;case"10th":n=e[9];break;case"11th":n=e[10];break;case"12th":n=e[11];break;case"lastP":n=e[e.length-1];break;case"1thH2":n=l[0];break;case"2thH2":n=l[1];break;case"3thH2":n=l[2];break;case"4thH2":n=l[3];break;case"5thH2":n=l[4];break;case"6thH2":n=l[5];break;case"7thH2":n=l[6];break;case"8thH2":n=l[7];break;case"9thH2":n=l[8];break;case"10thH2":n=l[9];break;case"lastH2":n=l[l.length-1]}if(n){if(n.parentElement.querySelector(".inline-lead-wrapper"))return n.parentElement.querySelector(".inline-lead-wrapper");{const e=document.createElement("div");return e.classList.add("inline-lead-wrapper"),n.nextElementSibling?n.parentElement.insertBefore(e,n.nextElementSibling):n.parentElement.appendChild(e),e}}}}),[t]);return t&&a?I(e,a):null},we=({content:e})=>{const t=i((()=>{const e=Array.from(document.querySelectorAll(".hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar"));return e.forEach((e=>{if(e.querySelector(".sidebar-lead-modal-wrapper"))return;const t=document.createElement("div");t.classList.add("sidebar-lead-modal-wrapper"),e.prepend(t)})),e.map((e=>e.querySelector(".sidebar-lead-modal-wrapper")))}),[]);return a.createElement(a.Fragment,null,t.map((t=>I(e,C(t,"sidebar-lead-modal-wrapper")))))},Ce=({popupId:e,extraFields:t,onClose:l,onOtherSubmit:s,imageMobile:d,imageDesktop:c,imageOverlayMobile:p,imageOverlayDesktop:h,imageBackground:g,currentLayout:v,title:b,onSubmit:f,showThankyou:y,campaignId:k,campaign_subot_id:_,locale:E})=>{var w,C,N;const T=JSON.parse(t.listBlockAdded),S=JSON.parse(t.actionBlocks),x=JSON.parse(t.textBlocks),O=S.submitBlock.data.url,P=S.submitBlock.data.text,B=S.submitBlock.data.text2,j=S.submitBlock.data.value,$=location.pathname,I=v.includes("Inline")||"Sidebar"===v,A="Slider"===v,[D,U]=n(!0),[H,R]=n(null),[M,F]=n(!1),W=r(),q=()=>{H?R(null):null==l||l()};if(window.innerWidth<769&&["Fullscreen","Slider"].includes(v))return console.log("😎 Not show fullscreen, slider on mobile "),null;o((()=>{(v.includes("LightBox")||"Fullscreen"==v)&&document.body.classList.add("noscroll"),window.intlTelInputUtils||require("intl-tel-input/build/js/utils"),ce.email={},ce.phone={}}),[]);const J=r(!1),z=r(!1),{form:G,validateObj:K}=(({listBlockAdded:e=[],validatingPhoneRef:t,validatingEmailRef:a,campaignId:l,campaign_subot_id:n=[]})=>{const{t:o}=L(),s=i((()=>{const i=["TextBlock","NumberBlock","EmailBlock","PhoneBlock","DateBlock","CheckboxBlock","RadioBlock","DropdownBlock","PhoneOtpBlock","WhatsappOtpBlock","LocationBlock","TncBlock"],r=(e,t)=>a=>{if(c.current.isTouched(e))return void 0===a||""===a||Array.isArray(a)&&0===a.length?o("validator.required"):null==t?void 0:t(a)};return e.filter((e=>i.includes(e.name))).reduce(((e,i)=>"NumberBlock"===i.name?Object.assign(Object.assign({},e),{[i.data.value]:r(i.data.value,(e=>{if(isNaN(Number(e)))return o("validator.number")}))}):"EmailBlock"===i.name?Object.assign(Object.assign({},e),{[i.data.value]:r(i.data.value,(e=>{if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e))return o("validator.email");a.current=!0,setTimeout((()=>{c.current.setFieldError(i.data.value,"Validating..."),me(l,n,{email:e}).then((e=>{e?c.current.setFieldError(i.data.value,o(e)):c.current.clearFieldError(i.data.value),a.current=!1})).catch((e=>{console.error(e),c.current.setFieldError(i.data.value,e.message||"Something went wrong"),a.current=!1}))}),200)}))}):"PhoneBlock"===i.name||"PhoneOtpBlock"===i.name||"WhatsappOtpBlock"===i.name?Object.assign(Object.assign({},e),{[i.data.value]:r(i.data.value,(e=>{if(window.intlTelInputUtils&&!window.intlTelInputUtils.isValidNumber(String(e),Y.countryCode))return o("validator.phone");t.current=!0,setTimeout((()=>{c.current.setFieldError(i.data.value,"Validating..."),me(l,n,{phone:e}).then((e=>{e?c.current.setFieldError(i.data.value,o(e)):c.current.clearFieldError(i.data.value),t.current=!1})).catch((e=>{console.error(e),c.current.setFieldError(i.data.value,e.message||"Something went wrong"),t.current=!1}))}),200)}))}):"DateBlock"===i.name?Object.assign(Object.assign({},e),{[i.data.value]:r(i.data.value,(e=>{if(isNaN(Date.parse(e)))return o("validator.date")}))}):"TncBlock"===i.name?Object.assign(Object.assign({},e),{["TNC-"+i.id]:r("TNC-"+i.id)}):Object.assign(Object.assign({},e),{[i.data.value]:r(i.data.value)})),{})}),[e.map((e=>e.name)).join(",")]),d=he({validateInputOnChange:!0,clearInputErrorOnChange:!0,validate:s}),c=r(d);return c.current=d,{form:d,validateObj:s}})({listBlockAdded:T,validatingPhoneRef:J,validatingEmailRef:z,campaignId:k,campaign_subot_id:_}),{width:Q,height:X,loaded:te}=Z(g),{width:ae,height:le,loaded:ne}=Z(d),{width:oe,height:ie,loaded:re}=Z(c),de=ne&&re&&("Fullscreen"!=v||te),pe=a.createElement(a.Fragment,null,a.createElement("style",{dangerouslySetInnerHTML:{__html:`\n          .le-newbuilder-overlay {\n            background-repeat: no-repeat;\n            background-size: cover;\n          }\n          ${p?`\n              .le-newbuilder-overlay {\n                background: url(${p}) ;\n              }`:""}\n          ${h?`\n              @media screen and (min-width:768px) {\n                .le-newbuilder-overlay {\n                  background: url(${h}) ;\n                }\n              }`:""}`}}),a.createElement("div",{id:e,"data-popup-url":$,"data-popup-type":"lightbox-inline",className:`lead-modal lead-modal-wrapper modal--animate-scale ${I?"le-buider-inline":""} ${A?"le-buider-slider":""}`},"Fullscreen"==v?a.createElement("img",{className:"le-only-desktop le-fullscreen-img",draggable:!1,src:g||"",style:{aspectRatio:`${Q}/${X}`}}):null,a.createElement("div",{className:`lead-modal__wrapper le-newbuilder-wrap-${v}`},a.createElement("div",{className:`lead-modal__content le-newbuilder-${v}`},y?a.createElement(_e,{title:y.title,titleAlign:y.titleAlign,subtitle:y.subtitle,subtitleAlign:y.subtitleAlign,link:y.link,linkNewTab:y.linkNewTab,linkText:y.linkText,image:y.image}):a.createElement(a.Fragment,null,a.createElement("header",{className:"lead-modal__header"},H?a.createElement("img",{src:u.getAssetPath("lead-otp-thumb.png"),draggable:"false",alt:"",style:{width:"100%",minHeight:"150px",backgroundColor:"#f2f2f2"},loading:"lazy"}):a.createElement(a.Fragment,null,["LightBoxA","InlineA","Sidebar","Slider"].includes(v)?d?a.createElement("img",{draggable:"false",className:"lead-modal__image lead-modal-image-cover",src:d,style:{aspectRatio:`${ae}/${le}`},alt:""}):null:a.createElement(a.Fragment,null,c?a.createElement("img",{draggable:"false",className:"le-only-desktop lead-modal__image lead-modal-image-cover",style:{objectFit:"cover",aspectRatio:`${oe}/${ie}`},src:c,alt:""}):null,d?a.createElement("img",{draggable:"false",className:"le-only-mobile lead-modal__image lead-modal-image-cover",src:d,alt:"",style:{aspectRatio:`${ae}/${le}`}}):null))),H&&a.createElement(ke,{otpData:H,autoSendWhenOpen:!1,onSuccess:()=>{R(null),null==f||f(W.current,G.values)}}),a.createElement("div",{"data-hidden":!!H,className:"lead-modal__body le-newbuilder-overlay"},a.createElement(ue,{form:G},a.createElement("form",{ref:W,className:`lead-modal__form ${e}`,onSubmit:e=>{e.preventDefault(),G.setTouched(Object.keys(K).reduce(((e,t)=>(e[t]=!0,e)),{})),z.current||J.current||setTimeout((()=>{G.onSubmit((e=>{var t,a,l,n,o,i;if(Object.keys(G.errors).length)return;let r=null;if(T.findIndex((e=>"PhoneOtpBlock"===e.name))>-1){const n=null===(a=null===(t=T.find((e=>"PhoneOtpBlock"===e.name)))||void 0===t?void 0:t.data)||void 0===a?void 0:a.value;(null===(l=e[n])||void 0===l?void 0:l.startsWith("+"))&&(r={phone:e[n],type:"phone"})}if(T.findIndex((e=>"WhatsappOtpBlock"===e.name))>-1){const t=null===(o=null===(n=T.find((e=>"WhatsappOtpBlock"===e.name)))||void 0===n?void 0:n.data)||void 0===o?void 0:o.value;(null===(i=e[t])||void 0===i?void 0:i.startsWith("+"))&&(r={phone:e[t],type:"whatsapp"})}if(r)return F(!0),void se(r).then((t=>{var a;"This phone number was verified"!==(null===(a=null==t?void 0:t._messages)||void 0===a?void 0:a[0])?R(r):null==f||f(W.current,e)})).finally((()=>{F(!1)}));null==f||f(W.current,e)}))(e)}),100)}},a.createElement("div",{style:{marginBottom:20}},a.createElement("h2",{className:`lead-modal__title ${"le-text-align-"+(null===(w=x.titleBlock.data)||void 0===w?void 0:w.align)} ${V}`},b),a.createElement("p",{className:`lead-modal__description ${"le-text-align-"+(null===(C=x.titleBlock.data)||void 0===C?void 0:C.align)} ${V}`},x.subtitleBlock.data.value)),a.createElement("div",{className:"lead-modal__form-control-wrapper"},a.createElement(ye,{listBlockAdded:T,popupId:e,locale:E,onClose:q,onOtherSubmit:s})),(null===(N=null==S?void 0:S.submitBlock)||void 0===N?void 0:N.isHide)?null:a.createElement(a.Fragment,null,a.createElement("div",{className:`lead-modal__checkbox-wrapper ${V}`},a.createElement("div",{className:"lead-modal__checkbox"},a.createElement("input",{id:"lead-term-checkbox",className:`lead-modal__checkbox__input ${V}`,type:"checkbox","aria-label":"Checkbox label",checked:D,onChange:e=>U(e.currentTarget.checked)}),a.createElement("div",{className:"lead-modal__checkbox__control","aria-hidden":"true"})),a.createElement("label",{htmlFor:"checkbox",className:"lead-modal__checkbox__label"},P," ",a.createElement("span",{style:{fontWeight:"bold"}},a.createElement("a",{target:"blank",href:O||"https://hellobacsi.com/chinh-sach",rel:"noopener noreferrer",style:{textDecoration:"none"}},B)))),a.createElement(m,{size:"md",id:"lead-submit",type:"submit",className:`lead-modal__btn ${V}`,disabled:!D,isLoading:M},j))))))),!v.includes("Inline")&&a.createElement(ee,{onClose:q,containerClassName:"close-button-top-right"}))));return de?v.includes("LightBox")||"Fullscreen"==v||"Slider"==v?pe:"Sidebar"==v?a.createElement(we,{content:pe}):v.includes("Inline")?a.createElement(Ee,{content:pe,inlinePosition:t.popupInlinePosition}):null:null},Ne=({popupId:e,link:t,linkText:l,linkNewTab:n,onClose:o,imageMobile:i,imageDesktop:r,currentLayout:s,onOtherSubmit:d})=>{const c=location.pathname,{width:m,height:u,loaded:p}=Z(i),{width:h,height:g,loaded:v}=Z(r);return p&&v?a.createElement("div",{id:e,className:"lead-modal-wrapper","data-popup-url":c,"data-popup-type":"skin_ab"},"SkinA"==s?a.createElement("aside",{className:"le-only-desktop"},a.createElement("div",{className:"le-skin-a-desktop"},a.createElement("div",{style:{position:"relative"}},a.createElement("img",{src:r,style:{aspectRatio:`${h}/${g}`}}),a.createElement("a",{style:{position:"absolute",top:"75%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center",width:"calc(100% - 15px)"},href:t,target:n?"blank":"_parent"},a.createElement("button",{onClick:d,className:"le-joinbow-btn js-popup-other-submit"},l)),a.createElement(ee,{onClose:o,containerClassName:"close-button-top-right"})))):"SkinB"==s?a.createElement("aside",{className:"le-only-desktop"},a.createElement("div",{className:""},a.createElement("div",{style:{position:"relative",zIndex:1e4}},a.createElement("img",{src:r,style:{width:"100%",aspectRatio:`${h}/${g}`}}),a.createElement("a",{style:{position:"absolute",top:"75%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center",width:"100%"},href:t,target:n?"blank":"_parent"},a.createElement("button",{onClick:d,className:"le-joinbow-btn-mobile js-popup-other-submit"},l)),a.createElement(ee,{containerClassName:"close-button-top-right",onClose:o})))):null,a.createElement("aside",{className:"le-only-mobile"},a.createElement("div",{className:"le-skin-mobile"},a.createElement("div",{style:{position:"relative"}},a.createElement("img",{src:i,style:{width:"100%",aspectRatio:`${m}/${u}`}}),a.createElement("a",{style:{position:"absolute",top:"82%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center",maxWidth:"calc(100% - 15px)"},href:t,target:n?"blank":"_parent"},a.createElement("button",{onClick:d,className:"le-joinbow-btn-mobile js-popup-other-submit"},l)),a.createElement(ee,{containerClassName:"close-button-top-right",svgClassName:"le-mobile-btn",onClose:o}))))):null},Te=({popupId:e,url:t,newTab:l,image:n,onClose:o,onOtherSubmit:i})=>{const{width:r,height:s,loaded:d}=Z(n);return d?a.createElement("div",{id:e,className:"lead-modal-wrapper","data-popup-url":location.pathname,"data-popup-type":"tab"},a.createElement("div",{className:"le-tab-popup"},a.createElement("div",{style:{position:"relative"}},a.createElement("a",{href:t,target:l?"blank":"_parent",onClick:i},a.createElement("img",{className:"js-popup-other-submit",src:n,style:{aspectRatio:`${r}/${s}`}})),a.createElement(ee,{onClose:o,containerClassName:"close-button-top-right"})))):null},Se=[],xe=[],Oe=[],Pe=[],Be=[],je=[];const Le=(e="UTC")=>{const t=new Date;return new Date(t.toLocaleString("en-US",{timeZone:e}))},$e=e=>{try{const[t,a]=e.split(" "),[l,n,o]=t.split("-").map(Number),[i,r,s]=a.split(":").map(Number);return new Date(l,n-1,o,i,r,s)}catch(e){return null}};const Ie=e=>!function(e){var t;const a=Number(null===(t=e.rules.find((e=>"exclude_sponsored"==e.rule)))||void 0===t?void 0:t.value);return!(!Boolean(document.querySelector(".hhg-disclaimer-text"))||!a||(Pe.push(e),0))}(e)&&(!!function(e){var t,a;try{const l=null===(t=e.rules.find((e=>"exclude_sponsored_list"==e.rule)))||void 0===t?void 0:t.value,n=l instanceof Array?l:JSON.parse(l),o=Number(null===(a=document.querySelector("[data-sponsored-id]"))||void 0===a?void 0:a.getAttribute("data-sponsored-id"));return!o||o<=0||0===n.length||(!!n.find((e=>e.id==o))||(Be.push({id:e.id,rules:e.rules}),!1))}catch(e){return!0}}(e)&&(1===e.formatted_status?function(e){var t;if(1===e.forever)return!0;const a=e.started_at,l=e.ended_at,n=$e(a),o=$e(l);if(!n||!o)return!0;const i=(null===(t=e.site)||void 0===t?void 0:t.id)||1;return!(Le(z[i]).getTime()>o.getTime()&&(Oe.push(e),1))}(e):0===e.formatted_status&&(Se.push(e),(e=>{var t;const a=(null===(t=e.site)||void 0===t?void 0:t.id)||1,l=e.started_at,n=e.ended_at,o=$e(l),i=$e(n);if(!o||!i)return!1;const r=Le(z[a]).getTime();return r<=i.getTime()&&r>=o.getTime()&&(xe.push(e),!0)})(e)))),Ae=e=>{var t;try{const a=(e,t,a)=>{const l=t.split(":"),n=a.split(":"),o=new Date;o.setHours(Number(l[0]),Number(l[1]),0,0);const i=new Date;return i.setHours(Number(n[0]),Number(n[1]),0,0),e>=o&&e<=i},l=null===(t=e.rules.find((e=>"appearance_time"==e.rule)))||void 0===t?void 0:t.value,n=l.startTime,o=l.endTime||"23:59";return!n||(!!a(new Date,n,o)||(je.push(e),!1))}catch(e){return!0}};let De=null;function Ue({leadApi:e,leadSiteId:t,leadDomain:a,onShowPopup:l,DEBUG_URL:n}){const o=n||("https://"+location.hostname+location.pathname+location.search).toLowerCase();fetch(e+"api/campaign/"+t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({url:o,ga_client_id:A("_ga")||null})}).then((e=>e.json())).then((e=>{var t,n,i,r;if(He("List campagin: ",e),q="https://"+location.hostname+location.pathname+location.search,1==e._status){const s=((null===(n=null===(t=e._data)||void 0===t?void 0:t.campaigns)||void 0===n?void 0:n.filter(Ie))||[]).filter(Ae);A("hhg-id")||(D("hhg-id",c(),{domain:"."+a,path:"/"}),He("😍 Set HHG ID cookie"));let d=[];d=/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)?s.filter((e=>e.device_types.some((e=>e.id==F)))):s.filter((e=>e.device_types.some((e=>e.id==W)))),He("👓 campaignsDevice",d),He("--listCampaignScheduled",Se),He("--listCampaignScheduledToActivated",xe),He("--listCampaignActiveButExpired",Oe),He("--listCampaignExcludeSonsored",Pe),He("--listCampaignDifferentSponsor",Be),He("--listCampaignNotDisplayInRangeOfTime",je);let m=d.map(((e,t)=>e.targets.filter((e=>e.type==H)).map((e=>Object.assign(Object.assign({},e),{campaignIndex:t}))))).flat(1);m=m.filter((e=>{var t;const a=new URL(String(e.target).toLowerCase());if("exact_match"==e.option)return Boolean(o===(null===(t=a.href)||void 0===t?void 0:t.toLowerCase()));if("start_with"==e.option){if(o.includes(String(e.target).toLowerCase())){const t=e.sub_target.filter((e=>"excluding"==e.option)).map((e=>{var t;return null===(t=e.value)||void 0===t?void 0:t.toLowerCase()}));return!t.includes(o.split("?")[0])}return!1}}));const u=Array.from(document.getElementsByTagName("META")).filter((e=>"article:tag"==e.getAttribute("property"))).map((e=>e.content));let p=[],h=[];u&&u.length&&(p=d.map(((e,t)=>e.targets.filter((e=>e.type==R)).map((e=>Object.assign(Object.assign({},e),{campaignIndex:t}))))).flat(1),h=p.filter((e=>u.includes(e.target))));const g=[...m,...h],v=document.cookie.split("; ").map((e=>e.split("=")[0])),b=v.filter((e=>e.includes("lead_submited")));He("--listCampaignCodeSubmited",b);const f=v.filter((e=>e.includes("lead_closed")));He("--listCampaignCodeClosed",f);const y=[...b,...f],k=(e=>{const t=[...e];for(let e=t.length-1;e>0;e--){const a=Math.floor(Math.random()*(e+1)),l=t[e];t[e]=t[a],t[a]=l}return t})(g.filter((e=>!y.some((t=>t.includes(d[e.campaignIndex].code))))));if(He("--listCampaignValid : ",k),k&&k.length){const e=d[k[0].campaignIndex];He("CAMPAIGN_SHOW",e);const{rules:t}=e,a=Number(null===(i=t.find((e=>"time"==e.rule)))||void 0===i?void 0:i.value);He("timeoutRule",a);const n=Number(null===(r=t.find((e=>"scroll"==e.rule)))||void 0===r?void 0:r.value);He("scrollRule",n);let o="TIME";if(Number.isInteger(a)&&(o="TIME",He("✨ SHOW AWESOME POPUP AFTER: ",a," seconds"),De&&clearTimeout(De),De=setTimeout((()=>{null==l||l(e,o)}),1e3*a)),Number.isInteger(n)){o="SCROLL",He("✨ SHOW AWESOME AFTER: SCROLL",n," %");const t=document.querySelector(`[data-url="${location.pathname}"]`)||document.querySelector("body"),a=t.getBoundingClientRect().top,i=t.offsetHeight;He("👓 Element check scroll: ",t);const r=function(){const t=window.pageYOffset||document.documentElement.scrollTop;let s=0;t>=a&&(s=Math.round((t-a)/(i-innerHeight)*100)),He("---Scroll",s,n),s>=n&&(window.removeEventListener("scroll",r),null==l||l(e,o))};window.addEventListener("scroll",r,{passive:!0})}}else He("🚧 No lead campaigns on current URL, tags")}})).catch((e=>{He("Lead error: ",e)}))}const He=(...e)=>{("production"!==process.env.NODE_ENV||process.env.NEXT_PUBLIC_DEPLOY_ENV&&"production"!==process.env.NEXT_PUBLIC_DEPLOY_ENV||"undefined"!=typeof localStorage&&"true"===localStorage.getItem("hhg_debug"))&&console.log(...e)};const Re=({campaign:e,action:t,onSubmit:l,onClose:n,showThankyou:i,locale:d})=>{var m,u;const{apiUrl:p,siteDomain:h}=s(X);o((()=>{const e=A("_ga")||null;fetch(`${p}api/campaign/${f}/impression`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({action:t,url:location.href.toLowerCase(),title_article:document.title,cookie_id:A("hhg-id"),ga_client_id:e})})}),[]);const{extra_fields:g,image:v,image_desktop:b,code:f,image_background:y,image_overlay_mobile:k,image_overlay_desktop:_}=e||{},{currentLayout:E}=g,w=g.imageBlocks?JSON.parse(g.imageBlocks):{},C=JSON.parse(g.actionBlocks),N=JSON.parse(g.textBlocks);let T=(null===(u=null===(m=null==N?void 0:N.titleBlock)||void 0===m?void 0:m.data)||void 0===u?void 0:u.value)||"";const S={1:{},2:{},3:{}},x=r("lead-modal-"+c()),O=function(e="Xin chao {{category_2}} extra"){if(e.includes("{{category_")){const t=11,a=e.search("{{category_");return+e.charAt(t+a)}return null}(T);if(O){He("⚡️ Has categoryLevel",O);const e=Array.from(document.getElementsByTagName("META")),t=e.find((e=>e.name===`content_category_${O}`)),a=e.find((e=>e.name===`content_category_en_${O}`));if(!t||!a)return He("⚡️ No META TAG for categoryLevel, not show popup",O),null;S[O]={value:t.content,value_en:a.content},T=T.replace(`{{category_${O}}}`,t.content),He("⚡️ Set categoryData ",O)}else He("⚡️ No categoryLevel",O);const P=()=>{var t,a,l,o;if(He("👌 Other submit click"),document.body.classList.remove("noscroll"),E.includes("Skin")){const e=document.querySelector("#masthead");e&&(e.style.top="0px !important;")}const i=Number(null!==(a=null===(t=e.rules.find((e=>"days_to_show_again"==e.rule)))||void 0===t?void 0:t.value)&&void 0!==a?a:7),r=Number(null!==(o=null===(l=e.rules.find((e=>"show_again_after_submit"==e.rule)))||void 0===l?void 0:l.value)&&void 0!==o?o:0);0===r&&(He("⛔ Popup never show again!"),D(`lead_submited_${f}`,`target_${g.popupVersion}`,{domain:"."+h,path:"/"})),1==r&&(He(`⌛ Popup will show again after ${i} days!`),D(`lead_submited_${f}`,`target_${g.popupVersion}`,{domain:"."+h,days:i,path:"/"}));const s=A("_ga")||null,d={url:location.href.toLowerCase(),title_article:document.title,meta:[],cookie_id:A("hhg-id"),ga_client_id:s};O&&(d.category=S[O].value_en),fetch(`${p}api/campaign/${f}/lead`,{method:"POST",body:JSON.stringify(d),headers:{"Content-Type":"application/json","X-Requested-With":"XMLHttpRequest"}}).then((e=>e.json())).then((e=>{"error"===e.status&&He(e)})).catch((e=>{He("Error:",e)})),null==n||n()};return"CenterTab"===E?a.createElement(te,{popupId:x.current,url:w.imageMobile.data.url,newTab:w.imageMobile.data.newtab,imageMobile:v,imageDestkop:b,onClose:n,onOtherSubmit:P}):"Tab"===E?a.createElement(Te,{popupId:x.current,url:w.imageMobile.data.url,newTab:w.imageMobile.data.newtab,image:v,onClose:n,onOtherSubmit:P}):"Floating"===E?a.createElement(ae,{popupId:x.current,title:T,titleAlign:N.titleBlock.data.align,subtitle:N.subtitleBlock.data.value,subtitleAlign:N.subtitleBlock.data.align,url:C.linkButtonBlock.data.url,urlText:C.linkButtonBlock.data.value,newTab:C.linkButtonBlock.data.newtab,imageMobile:v,imageDesktop:b,onClose:n,onOtherSubmit:P}):E.includes("LightBox")||E.includes("Inline")||"Fullscreen"==E||"Sidebar"==E||"Slider"==E?a.createElement(Ce,{popupId:x.current,extraFields:g,onClose:n,onOtherSubmit:P,imageMobile:v,imageDesktop:b,imageBackground:y,currentLayout:E,title:T,onSubmit:(e,t)=>l(e,t,O,S),key:E,imageOverlayDesktop:_,imageOverlayMobile:k,showThankyou:i,campaignId:e.id,campaign_subot_id:e.bot_id||[],locale:d}):E.includes("Skin")?a.createElement(Ne,{popupId:x.current,link:C.linkButtonBlock.data.url,linkNewTab:!!C.linkButtonBlock.data.newtab,linkText:C.linkButtonBlock.data.value,onClose:n,onOtherSubmit:P,imageMobile:v,imageDesktop:b,currentLayout:E}):null},Me=({apiUrl:e,siteDomain:l,siteId:s,locale:c,apiSubotUrl:m,DEBUG_URL:u,forceCampaign:b})=>{var f;const y=r(),k=r(Date.now()),{apiUrl:_}=i((()=>{let t=e;return t.includes("localhost")&&(t="https://dev.leadgen.hellobacsi.com/"),{apiUrl:t}}),[e,l,s]),[E,w]=n(b),[C,T]=n(""),[S,O]=n(null);o((()=>{b&&(w(b),T("SHOW"))}),[null==b?void 0:b.code]),o((()=>{le.apiLeadUrl=_,le.apiSubotUrl=m}),[_,m]);const P=(e,t)=>{w(e),T(t)},B=()=>{var e,t;if(!E)return;He(`👋👋👋 CLOSE POPUP ${E.code} 👋👋👋`);const a=Number(null===(e=E.rules.find((e=>"show_again_after_exit"==e.rule)))||void 0===e?void 0:e.value),n=Number(null===(t=E.rules.find((e=>"days_to_show_again"==e.rule)))||void 0===t?void 0:t.value);0==a&&D(`lead_closed_${E.code}`,`target_${null==E?void 0:E.extra_fields.popupVersion}`,n?{domain:"."+l,days:n,path:"/"}:{domain:"."+l,path:"/"}),document.body.classList.remove("noscroll"),fetch(`${_}api/campaign/${E.code}/popup_exit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({action:"CLICK",url:location.href.toLowerCase(),title_article:document.title,cookie_id:A("hhg-id"),duration:Math.ceil((Date.now()-k.current)/1e3)})}),w(null),O(null)};o((()=>{if(!(null==b?void 0:b.code)){if(window.next){const e=d((e=>{He("--🌻 routeChangeComplete",e,Date.now());const t=location.pathname;B(),document.querySelectorAll(`[data-popup-url="${t}"]`).length?He("🔥 This URL page has show popup!"):(He("--Process checkShowPopup"),Ue({leadApi:_,leadDomain:l,leadSiteId:s,onShowPopup:P,DEBUG_URL:u})),y.current&&window.removeEventListener("scroll",y.current)}),500);window.next.router.events.on("routeChangeComplete",e)}Ue({leadApi:_,leadDomain:l,leadSiteId:s,onShowPopup:P,DEBUG_URL:u})}}),[]);const j=(e,a,n,o)=>t(void 0,void 0,void 0,(function*(){var t,i,r,s,d,c,m,u,p,h,g;if(!a)return;He("submitHandler",n,o);const v=Object.keys(a).map((e=>({name:e,value:String(a[e])}))),b=A("_ga")||null;window.intlTelInputUtils||(yield require("intl-tel-input/build/js/utils"));const f={url:location.href.toLowerCase(),title_article:document.title,meta:v.map((t=>{var a,l;const n=(null===(a=e.querySelector(`*[name="${t.name}"][data-control]`))||void 0===a?void 0:a.getAttribute("data-control"))||(null===(l=e.querySelector(`*[data-extra][data-name="${t.name}"]`))||void 0===l?void 0:l.getAttribute("data-control"))||"text",o="tel"===n?window.intlTelInputUtils.formatNumber(String(t.value),null==Y?void 0:Y.countryCodeNumber,2).replace(/\s+/g,""):"date"===n?U(t.value).format("YYYY-MM-DD"):t.value;return{key:t.name,value:o,control:n}})),cookie_id:A("hhg-id"),ga_client_id:b};n&&o[n].value_en&&(f.category=o[n].value_en);const y=Number((null===(i=null===(t=E.rules)||void 0===t?void 0:t.find((e=>"days_to_show_again"===e.rule)))||void 0===i?void 0:i.value)||7),k=Number((null===(s=null===(r=E.rules)||void 0===r?void 0:r.find((e=>"show_again_after_submit"===e.rule)))||void 0===s?void 0:s.value)||0);if(0==k&&(He("⛔ Popup never show again!"),D(`lead_submited_${E.code}`,`target_${null==E?void 0:E.extra_fields.targetType}`,{domain:"."+l,path:"/"})),1==k&&(He(`⌛ Popup will show again after ${y} days!`),D(`lead_submited_${E.code}`,`target_${null==E?void 0:E.extra_fields.targetType}`,{domain:"."+l,days:y,path:"/"})),fetch(`${_}api/campaign/${E.code}/lead`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(f)}),"notshow"==(null==E?void 0:E.extra_fields.popupShowThankYou))return B(),void document.body.classList.remove("noscroll");let w=!0;const C=E.thank_you_image||`${_}admin/img/thanksyou.png`;let N,T,S=(null==E?void 0:E.extra_fields.popupThankyouTitle)||"Thank you.",x=(null==E?void 0:E.extra_fields.popupThankyouDesc)||"We appreciate your time!",P="",j="",L="";if("2.1"==(null==E?void 0:E.extra_fields.popupVersion)){const e=E.extra_fields,t=JSON.parse(e.listBlockThankyou),a=t.find((e=>"TitleBlock"==e.name)),l=t.find((e=>"SubtitleBlock"==e.name)),n=t.find((e=>"LinkButtonBlock"==e.name));S=(null===(d=null==a?void 0:a.data)||void 0===d?void 0:d.value)||"",P=(null===(c=null==a?void 0:a.data)||void 0===c?void 0:c.align)||"",x=(null===(m=null==l?void 0:l.data)||void 0===m?void 0:m.value)||"",j=(null===(u=null==l?void 0:l.data)||void 0===u?void 0:u.align)||"",N=(null===(p=null==n?void 0:n.data)||void 0===p?void 0:p.value)||"",T=(null===(h=null==n?void 0:n.data)||void 0===h?void 0:h.newtab)||!1,L=(null===(g=null==n?void 0:n.data)||void 0===g?void 0:g.url)||"";const o=E.extra_fields.currentLayout;["SkinA","SkinB","Floating","Tab","CenterTab"].includes(o)&&(w=!1)}O(w?{title:S,titleAlign:P,subtitle:x,subtitleAlign:j,link:L,linkNewTab:T,linkText:N,image:C}:null),sessionStorage.getItem("insider_object")?window.insider_object=JSON.parse(sessionStorage.getItem("insider_object")):window.insider_object={user:{email:"",phone_number:"",gdpr_optin:!0,sms_optin:!0,email_optin:!0}},v.map((e=>{const t=e.name,a=e.value;"tel"==t?window.insider_object.user.phone_number=a:"email"==t&&(window.insider_object.user.email=a)})),sessionStorage.setItem("insider_object",JSON.stringify(window.insider_object))}));return o((()=>{E&&(k.current=Date.now())}),[E]),a.createElement(X.Provider,{value:{apiUrl:_,siteDomain:l,siteId:s,locale:c}},a.createElement(x.Provider,{value:{locale:c,values:Q(c)}},a.createElement(p,{target:N()},a.createElement(h,{sx:{position:"fixed",zIndex:9999999999}},a.createElement(g,{mounted:Boolean("2.1"===(null===(f=null==E?void 0:E.extra_fields)||void 0===f?void 0:f.popupVersion)),transition:"fade",duration:600,timingFunction:"ease"},(e=>{var t;return a.createElement(h,{style:e},"2.1"===(null===(t=null==E?void 0:E.extra_fields)||void 0===t?void 0:t.popupVersion)&&a.createElement(a.Fragment,null,!!E.extra_fields.currentLayout&&!E.extra_fields.currentLayout.includes("Inline")&&!E.extra_fields.currentLayout.includes("Sidebar")&&a.createElement(v,{color:"#000",opacity:.5,center:!0,zIndex:400,pos:"fixed",onClick:()=>B()}),a.createElement(Re,{campaign:E,action:C,onSubmit:j,onClose:B,showThankyou:S,locale:c})))}))))))};export{Me as LeadGen};
+import { _ as __rest, a as __awaiter } from './tslib.es6-1b1533a9.js';
+import React__default, { createContext, useState, useEffect, useMemo, useRef, useContext } from 'react';
+import debounce from 'lodash/debounce';
+import { v1 } from 'uuid';
+import { B as Button } from './index-6ea6484e.js';
+import { C as CommonGAssets } from './index-8858383e.js';
+import { Portal, Box, Transition, Overlay } from '@mantine/core';
+import { T as Text } from './index-3474401a.js';
+import './index.styles-5add27c5.js';
+import { S as Select, d as Checkbox, c as Input, R as Radio, P as Phone, N as NumberInput } from './index-32e53dac.js';
+import './constants-b77ffe3d.js';
+import './Subot-3289bd8e.js';
+import './utils-6d7b88da.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-2c484c05.js';
+import { D as DatePicker } from './index-9ea7e838.js';
+import { t as theme } from './theme-e74db08c.js';
+import { T as TranslationsContext } from './translationsContext-ad3e25de.js';
+import 'string-format';
+import '@mantine/hooks';
+import './index-e612be9c.js';
+import './utils-70718e9c.js';
+import './index.styled-9c9db9cc.js';
+import './index-12fa4985.js';
+import { M as MAPPED_LOCALE } from './utils-3a2a47d9.js';
+import '@mantine/dates';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-63e04e8e.js';
+import { createFormContext } from '@mantine/form';
+import { u as useTranslations } from './useTranslations-4f1db486.js';
+import { H as Heading } from './index-34899aa3.js';
+import { createPortal } from 'react-dom';
+import { g as getCookie, s as setCookie } from './cookieHelper-d314282c.js';
+import dayjs from 'dayjs';
+import './isProduction-0ea904dd.js';
+import 'styled-components';
+import './animation-3d5edc39.js';
+import 'react-keyed-flatten-children';
+import '@hhgtech/icons/other';
+import '@mantine/carousel';
+import 'classnames';
+import './useUniqueId-3638402f.js';
+import '@hhgtech/icons/core';
+import 'date-fns/locale';
+import 'slugify';
+
+const CAMPAIGN_TARGET_TYPE = { LINKS: 1, TAGS: 2 };
+let LEAD_API = 'https://dev.leadgen.hellobacsi.com/';
+const LEAD_DEVICE_TYPE = {
+    MOBILE: 1,
+    DESKTOP: 2,
+};
+let LEAD_CLASS = '';
+if (LEAD_API.includes('localhost')) {
+    LEAD_API = 'https://dev.leadgen.hellobacsi.com/';
+}
+if (location.hostname.includes('marrybaby.vn')) {
+    LEAD_CLASS = 'pink';
+}
+// var LEAD_CURRENT_URL = location.href.toLowerCase();
+let LEAD_CURRENT_URL = 'https://' + location.hostname + location.pathname + location.search;
+LEAD_CURRENT_URL = LEAD_CURRENT_URL.toLowerCase();
+// TODO: set inital object if exists
+if (sessionStorage.getItem('insider_object')) {
+    window.insider_object = JSON.parse(sessionStorage.getItem('insider_object'));
+}
+const docLang = document.documentElement.lang;
+// TODO: country code
+const LEAD_LOCALE_DATA = {
+    'vi-VN': {
+        popupLang: 'vi',
+        countryCode: 'vn',
+        countryCodeNumber: 84,
+    },
+    'id-ID': {
+        popupLang: 'id',
+        countryCode: 'id',
+        countryCodeNumber: 62,
+    },
+    'th-TH': {
+        popupLang: 'th',
+        countryCode: 'th',
+        countryCodeNumber: 66,
+    },
+    'ms-MY': {
+        popupLang: 'ms',
+        countryCode: 'my',
+        countryCodeNumber: 60,
+    },
+    'zh-TW': {
+        popupLang: 'zh',
+        countryCode: 'tw',
+        countryCodeNumber: 886,
+    },
+    'km-KH': {
+        popupLang: 'km',
+        countryCode: 'kh',
+        countryCodeNumber: 855,
+    },
+    'my-MM': {
+        popupLang: 'my',
+        countryCode: 'mm',
+        countryCodeNumber: 95,
+    },
+    'hi-IN': {
+        popupLang: 'hi',
+        countryCode: 'in',
+        countryCodeNumber: 91,
+    },
+};
+const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
+function LEAD_RESET_VAR() {
+    // LEAD_CURRENT_URL = location.href.toLowerCase();
+    LEAD_CURRENT_URL =
+        'https://' + location.hostname + location.pathname + location.search;
+}
+const LEAD_TIMEZONE_DATA = {
+    1: 'Asia/Ho_Chi_Minh',
+    10: 'Asia/Ho_Chi_Minh',
+    11: 'Asia/Ho_Chi_Minh',
+    12: 'Asia/Ho_Chi_Minh',
+    2: 'Asia/Jakarta',
+    3: 'Asia/Bangkok',
+    4: 'Asia/Phnom_Penh',
+    5: 'Asia/Kuala_Lumpur',
+    6: 'Asia/Taipei',
+    7: 'Asia/Yangon',
+    8: 'Asia/Kolkata',
+    9: 'Asia/Manila', // Philippines / Filipinos Site
+};
+
+var enPH = {
+	"validator.required": "This field is required.",
+	"validator.remote": "Please fix this field.",
+	"validator.email": "Please enter a valid email address.",
+	"validator.phone": "Please input correct phone number.",
+	"validator.url": "Please enter a valid URL.",
+	"validator.date": "Please enter a valid date.",
+	"validator.dateISO": "Please enter a valid date (ISO).",
+	"validator.number": "Please enter a valid number.",
+	"validator.digits": "Please enter only digits.",
+	"validator.creditcard": "Please enter a valid credit card number.",
+	"validator.equalTo": "Please enter the same value again.",
+	"validator.accept": "Please enter a value with a valid extension.",
+	"validator.maxlength": "jQuery.validator.format('Please enter no more than {0} characters.",
+	"validator.minlength": "jQuery.validator.format('Please enter at least {0} characters.",
+	"validator.rangelength": "jQuery.validator.format('Please enter a value between {0} and {1} characters long.",
+	"validator.range": "jQuery.validator.format('Please enter a value between {0} and {1}.",
+	"validator.max": "jQuery.validator.format('Please enter a value less than or equal to {0}.",
+	"validator.min": "jQuery.validator.format('Please enter a value greater than or equal to {0}.",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var hiIN = {
+	"validator.required": "इस क्षेत्र की आवश्यकता है।",
+	"validator.email": "कृपया एक मान्य ईमेल पता दर्ज करें",
+	"validator.number": "कृपया एक वैध संख्या दर्ज करें",
+	"validator.digits": "कृपया केवल अंक दर्ज करें",
+	"validator.maxlength": "कृपया {0} अक्षर से अधिक दर्ज न करें",
+	"validator.minlength": "कृपया कम से कम {0} अक्षर दर्ज करें",
+	"validator.phone": "कृपया एक वैध संख्या दर्ज करें",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var idID = {
+	"validator.required": "Kolom ini wajib diisi",
+	"validator.email": "Tolong daftarkan email yang valid",
+	"validator.number": "Tolong daftarkan nomor telepon yang valid",
+	"validator.digits": "Tolong masukkan angka saja",
+	"validator.maxlength": "Jangan memasukkan lebih dari {0} karakter",
+	"validator.minlength": "Tolong ketik sedikitnya {0} karakter",
+	"validator.phone": "Tolong daftarkan nomor telepon yang valid",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var kmKH = {
+	"validator.required": "ព័ត៌មាន​ចាំបាច់​ដែល​ត្រូវ​បំពេញ",
+	"validator.email": "សូម​វាយ​អាសយដ្ឋាន​អ៊ីម៉ែល​ឲ្យ​បាន​ត្រឹមត្រូវ",
+	"validator.number": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
+	"validator.digits": "វាយ​បញ្ចូល​បាន​តែ​លេខ​ប៉ុណ្ណោះ",
+	"validator.maxlength": "សូម​វាយ​បញ្ចូលកុំ​ឲ្យ​លើស {0} តួអក្សរ",
+	"validator.minlength": "សូម​វាយ​បញ្ចូល​តិច​បំផុត {0} តួអក្ស",
+	"validator.phone": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var msMY = {
+	"validator.required": "Bahagian ini wajib diisi.",
+	"validator.email": "Sila masukkan alamat emel yang sah.",
+	"validator.number": "Sila masukkan no telefon yang sah.",
+	"validator.digits": "Sila masukkan nombor digit sahaja.",
+	"validator.maxlength": "Sila masukkan tidak lebih dari {0} aksara",
+	"validator.minlength": "Sila masukkan sekurang-kurangnya {0} aksara",
+	"validator.phone": "Sila masukkan no telefon yang sah.",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var myMM = {
+	"validator.required": "ဒီနေရာမှာ ဖြည့်ဖို့ လိုအပ်ပါတယ်",
+	"validator.email": "မှန်ကန်သော အီးမေးလ်လိပ်စာထည့်သွင်းပါ",
+	"validator.number": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
+	"validator.digits": "နံပါတ်များသာဖြည့်ပါ",
+	"validator.maxlength": "ကျေးဇူးပြု၍ {0} ထပ်မပိုသော ဂဏန်းများသာဖြည့်ပါ",
+	"validator.minlength": "ကျေးဇူးပြု၍ အနည်းဆုံး {0} ဂဏန်းဖြည့်ပါ",
+	"validator.phone": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var thTH = {
+	"validator.required": "ต้องระบุข้อมูลในช่องนี้",
+	"validator.email": "กรุณาใส่อีเมล์ที่ถูกต้อง",
+	"validator.number": "กรุณาใส่ตัวเลขที่ถูกต้อง",
+	"validator.digits": "กรุณาส่เฉพาะตัวเลข",
+	"validator.maxlength": "กรุณาใส่ตัวเลขมากกว่า {0} หลัก",
+	"validator.minlength": "กรุณาใส่ตัวเลขอย่างน้อย {0} หลัก",
+	"validator.phone": "กรุณาใส่ตัวเลขที่ถูกต้อง",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var viVN = {
+	"validator.required": "Vui lòng điền mục này",
+	"validator.email": "Vui lòng điền email có thật.",
+	"validator.number": "Vui lòng điền số có thật",
+	"validator.digits": "Vui lòng chỉ điền số",
+	"validator.maxlength": "Vui lòng điền dưới {0} số",
+	"validator.minlength": "Vui lòng điền hơn {0} số",
+	"validator.remote": "Hãy sửa cho đúng.",
+	"validator.url": "Hãy nhập URL.",
+	"validator.date": "Hãy nhập ngày.",
+	"validator.dateISO": "Hãy nhập ngày (ISO).",
+	"validator.creditcard": "Hãy nhập số thẻ tín dụng.",
+	"validator.equalTo": "Hãy nhập thêm lần nữa.",
+	"validator.extension": "Phần mở rộng không đúng.",
+	"validator.rangelength": "Hãy nhập từ {0} đến {1} kí tự.",
+	"validator.range": "Hãy nhập từ {0} đến {1}.",
+	"validator.max": "Hãy nhập từ {0} trở xuống.",
+	"validator.min": "Hãy nhập từ {0} trở lên.",
+	"validator.phone": "Nhập đúng định dạng số điện thoại",
+	"validator.emailUsed": "Email này đã được sử dụng cho chiến dịch.",
+	"validator.phoneUsed": "Số điện thoại này đã được sử dụng cho chiến dịch.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+var zhTW = {
+	"validator.required": "此為必填欄位",
+	"validator.email": "請填入有效的 email 地址",
+	"validator.number": "請填入有效的電話號碼",
+	"validator.digits": "此欄位僅能輸入數字",
+	"validator.maxlength": "請輸入少於 {0} 位數",
+	"validator.minlength": "請輸入至少 {0} 位數",
+	"validator.phone": "請填入有效的電話號碼",
+	"validator.emailUsed": "Email already in use for this campaign.",
+	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"lead.otp.title": "Enter OTP",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}"
+};
+
+const translationsMap = {
+    'en-PH': enPH,
+    'vi-VN': viVN,
+    'hi-IN': hiIN,
+    'id-ID': idID,
+    'ms-MY': msMY,
+    'my-MM': myMM,
+    'km-KH': kmKH,
+    'zh-TW': zhTW,
+    'th-TH': thTH,
+    'tl-PH': enPH,
+};
+const getTranslations = (locale) => {
+    const translations = translationsMap[locale];
+    if (translations) {
+        return translations;
+    }
+    return translationsMap['en-PH'];
+};
+
+const LeadGenContext = createContext({});
+
+const useImageSize = (src) => {
+    const [width, setWidth] = useState(16);
+    const [height, setHeight] = useState(9);
+    const [loaded, setLoaded] = useState(false);
+    // load src image to get its width and height
+    useEffect(() => {
+        setLoaded(false);
+        if (src) {
+            const img = new Image();
+            img.addEventListener('load', () => {
+                setWidth(img.naturalWidth);
+                setHeight(img.naturalHeight);
+                setLoaded(true);
+            });
+            img.addEventListener('error', () => {
+                setWidth(16);
+                setHeight(9);
+                setLoaded(true);
+            });
+            img.src = src;
+        }
+        else {
+            setWidth(16);
+            setHeight(9);
+            setLoaded(true);
+        }
+    }, [src]);
+    return {
+        loaded,
+        width,
+        height,
+    };
+};
+
+const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
+    React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", className: svgClassName },
+        React__default.createElement("circle", { cx: "16", cy: "16", r: "16", fill: "white" }),
+        React__default.createElement("path", { d: "M16 17.05L10.925 22.125C10.7917 22.2584 10.621 22.329 10.413 22.337C10.2044 22.3457 10.025 22.275 9.87502 22.125C9.72502 21.975 9.65002 21.8 9.65002 21.6C9.65002 21.4 9.72502 21.225 9.87502 21.075L14.95 16L9.87502 10.925C9.74169 10.7917 9.67102 10.6207 9.66302 10.412C9.65436 10.204 9.72502 10.025 9.87502 9.87502C10.025 9.72502 10.2 9.65002 10.4 9.65002C10.6 9.65002 10.775 9.72502 10.925 9.87502L16 14.95L21.075 9.87502C21.2084 9.74169 21.3794 9.67069 21.588 9.66202C21.796 9.65402 21.975 9.72502 22.125 9.87502C22.275 10.025 22.35 10.2 22.35 10.4C22.35 10.6 22.275 10.775 22.125 10.925L17.05 16L22.125 21.075C22.2584 21.2084 22.329 21.379 22.337 21.587C22.3457 21.7957 22.275 21.975 22.125 22.125C21.975 22.275 21.8 22.35 21.6 22.35C21.4 22.35 21.225 22.275 21.075 22.125L16 17.05Z", fill: "#595959" }))));
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// imageMobile: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
+    if (!imageMobileLoaded || !imageDestkopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
+        React__default.createElement("div", { className: "le-center-tab-popup" },
+            React__default.createElement("div", { style: { position: 'relative' } },
+                React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    React__default.createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } }),
+                    React__default.createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
+                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
+                        } })),
+                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
+};
+
+// title: titleText
+// titleAlign: textBlocks.titleBlock.data.align
+// subtitle: textBlocks.subtitleBlock.data.value
+// subtitleAlign: textBlocks.subtitleBlock.data.align
+// url: actionBlocks.linkButtonBlock.data.url
+// urlText: actionBlocks.linkButtonBlock.data.value
+// newTab: actionBlocks.linkButtonBlock.data.newtab
+// imageMobile: campaignShow.image
+// imageDesktop: campaignShow.image_desktop
+const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, subtitleAlign, newTab, imageDesktop, imageMobile, onClose, onOtherSubmit, }) => {
+    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 lead-floating-wrapper", "data-popup-url": location.pathname, "data-popup-type": "floating" },
+        React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "le-floating-desktop" },
+                React__default.createElement("div", { className: "le-floating-desktop-wrap", style: { position: 'relative', background: '#fff' } },
+                    imageDesktop ? (React__default.createElement("div", null,
+                        React__default.createElement("img", { style: {
+                                maxWidth: 120,
+                                borderTopLeftRadius: 5,
+                                borderBottomLeftRadius: 5,
+                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                            }, src: imageDesktop }))) : null,
+                    React__default.createElement("div", { style: { padding: 20 } },
+                        React__default.createElement("div", { className: `le-floating-desktop-title le-text-align-${titleAlign}` }, title),
+                        React__default.createElement("div", { className: `le-floating-desktop-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                    React__default.createElement("a", { target: newTab ? 'blank' : '_parent', style: { marginLeft: 35, textDecoration: 'none' }, href: url },
+                        React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText)),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))),
+        React__default.createElement("aside", { className: "le-only-mobile" },
+            React__default.createElement("div", { className: "le-floating-mobile" },
+                React__default.createElement("div", { className: "le-floating-mobile-wrap", style: { position: 'relative', background: '#fff' } },
+                    React__default.createElement("aside", { style: { display: 'flex', justifyContent: 'space-between' } },
+                        React__default.createElement("div", null,
+                            React__default.createElement("div", { className: `le-floating-mobile-title le-text-align-${titleAlign}` }, title),
+                            React__default.createElement("div", { className: `le-floating-mobile-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                        imageMobile ? (React__default.createElement("div", null,
+                            React__default.createElement("img", { style: {
+                                    marginLeft: 15,
+                                    marginTop: 4,
+                                    maxWidth: 100,
+                                    aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                                }, src: imageMobile }))) : null),
+                    React__default.createElement("div", { style: { textAlign: 'center', marginTop: 10 } },
+                        React__default.createElement("a", { target: newTab ? 'blank' : '_parent', href: url, style: { textDecoration: 'none' } },
+                            React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText))),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+};
+
+class Store {
+    constructor() {
+        this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
+        this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
+    }
+}
+const leadStore = new Store();
+
+const leadApi = {
+    call(_a) {
+        var { url, data = undefined } = _a, config = __rest(_a, ["url", "data"]);
+        config.body = JSON.stringify(data);
+        config.headers = {
+            'Content-Type': 'application/json',
+        };
+        return fetch(`${leadStore.apiLeadUrl}${url}`, config)
+            .then((res) => res.json())
+            .catch(() => ({}));
+    },
+};
+const subotApi = {
+    call(_a) {
+        var { url, data } = _a, config = __rest(_a, ["url", "data"]);
+        config.body = JSON.stringify(data);
+        config.headers = {
+            'Content-Type': 'application/json',
+        };
+        return fetch(`${leadStore.apiSubotUrl}${url}`, config)
+            .then((res) => res.json())
+            .catch(() => ({}));
+    },
+};
+const campaignGetById = (id) => {
+    return leadApi.call({
+        url: `api/internal/campaign/${id}`,
+        method: 'get',
+    });
+};
+const validateEmailOrPhoneOnLeadGen = ({ campaign_id, email, phone, }) => {
+    let phoneToSend = phone;
+    // Remove the '0' part. Logic from Back to check between Subot and Lead with different format
+    if (phoneToSend && phoneToSend.startsWith('0')) {
+        phoneToSend = phoneToSend.substring(1);
+    }
+    return leadApi.call({
+        url: 'api/subot-campaign/check',
+        method: 'post',
+        data: {
+            campaign_id,
+            email,
+            phone: phoneToSend,
+        },
+    });
+};
+const validateEmailOrPhoneOnSubot = ({ bot_id, email, phone, }) => {
+    let phoneToSend = phone;
+    // Remove the '0' part. Logic from Back to check between Subot and Lead with different format
+    if (phoneToSend && phoneToSend.startsWith('0')) {
+        phoneToSend = phoneToSend.substring(1);
+    }
+    return subotApi.call({
+        url: 'frontend/api/subot-campaign/check',
+        method: 'post',
+        data: {
+            bot_id,
+            email,
+            phone: phoneToSend,
+        },
+    });
+};
+const sendSMSOtpLead = ({ phone, type, }) => {
+    return leadApi.call({
+        url: type === 'phone' ? 'api/sms/otp' : 'api/sms/whatsapp_otp',
+        method: 'post',
+        data: {
+            // The type Whatsapp do not remove the '+'
+            phone_number: type === 'phone' ? phone.replace('+', '') : phone,
+        },
+    });
+};
+const verifyOtpLead = ({ phone, otp, type, }) => {
+    return leadApi.call({
+        url: type === 'phone' ? 'api/sms/verify' : 'api/sms/whatsapp_verify',
+        method: 'post',
+        data: {
+            // The type Whatsapp do not remove the '+'
+            otp_code: otp,
+            phone_number: type === 'phone' ? phone.replace('+', '') : phone,
+        },
+    });
+};
+const Service = {
+    campaignGetById,
+    validateEmailOrPhoneOnSubot,
+    validateEmailOrPhoneOnLeadGen,
+    sendSMSOtpLead,
+    verifyOtpLead,
+};
+
+const checkUsedEmailOrPhone = (campaignId, campaign_subot_id, data) => __awaiter(void 0, void 0, void 0, function* () {
+    const key = 'email' in data ? 'email' : 'phone';
+    const value = 'email' in data ? data.email : data.phone;
+    const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
+    /** Check on Leadgen Tool */
+    const resLeadGen = yield Service.validateEmailOrPhoneOnLeadGen({
+        campaign_id: [campaignId],
+        [key]: value, // Can be email or phone
+    });
+    if (resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_001' ||
+        resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_002') {
+        return errorMsg;
+    }
+    /** Check on Subot */
+    if (campaign_subot_id.length) {
+        const resSubot = yield Service.validateEmailOrPhoneOnSubot({
+            bot_id: campaign_subot_id,
+            [key]: value, // Can be email or phone
+        });
+        if (resSubot._errorCode === 'CheckSuBotLeadTool_ERR_001') {
+            return errorMsg;
+        }
+    }
+});
+const validatedCache = {
+    email: {},
+    phone: {},
+};
+const checkUsedEmailOrPhoneWithCache = (campaignId, campaign_subot_id, data) => __awaiter(void 0, void 0, void 0, function* () {
+    const key = 'email' in data ? 'email' : 'phone';
+    const value = 'email' in data ? data.email : data.phone;
+    const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
+    if (validatedCache[key][value]) {
+        if (validatedCache[key][value].value) {
+            return errorMsg;
+        }
+        else if (!validatedCache[key][value].value &&
+            validatedCache[key][value].expire > Date.now()) {
+            return '';
+        }
+    }
+    const res = yield checkUsedEmailOrPhone(campaignId, campaign_subot_id, data);
+    if (res) {
+        validatedCache[key][value] = {
+            value: true,
+        };
+    }
+    else {
+        validatedCache[key][value] = {
+            value: false,
+            expire: Date.now() + 1000 * 60,
+        };
+    }
+    return res;
+});
+const clearCacheUsedEmailOrPhone = () => {
+    validatedCache.email = {};
+    validatedCache.phone = {};
+};
+
+// You can give context variables any name
+const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
+const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
+    const { t } = useTranslations();
+    const validateObj = useMemo(() => {
+        const InputBlocks = [
+            'TextBlock',
+            'NumberBlock',
+            'EmailBlock',
+            'PhoneBlock',
+            'DateBlock',
+            'CheckboxBlock',
+            'RadioBlock',
+            'DropdownBlock',
+            'PhoneOtpBlock',
+            'WhatsappOtpBlock',
+            'LocationBlock',
+            'TncBlock',
+        ];
+        // ALL are required and can skip if not touched yet
+        const withSharedCheck = (name, cb) => {
+            return (value) => {
+                if (!formRef.current.isTouched(name))
+                    return;
+                if (typeof value === 'undefined' ||
+                    value === '' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return t('validator.required');
+                }
+                return cb === null || cb === void 0 ? void 0 : cb(value);
+            };
+        };
+        return listBlockAdded
+            .filter((b) => InputBlocks.includes(b.name))
+            .reduce((r, b) => {
+            if (b.name === 'NumberBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (isNaN(Number(value))) {
+                            return t('validator.number');
+                        }
+                    }) });
+            }
+            else if (b.name === 'EmailBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return t('validator.email');
+                        }
+                        validatingEmailRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(b.data.value, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                email: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(b.data.value, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(b.data.value);
+                                }
+                                validatingEmailRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                validatingEmailRef.current = false;
+                            });
+                        }, 200);
+                    }) });
+            }
+            else if (b.name === 'PhoneBlock' ||
+                b.name === 'PhoneOtpBlock' ||
+                b.name === 'WhatsappOtpBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (window.intlTelInputUtils &&
+                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
+                            return t('validator.phone');
+                        }
+                        validatingPhoneRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(b.data.value, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                phone: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(b.data.value, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(b.data.value);
+                                }
+                                validatingPhoneRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
+                                validatingPhoneRef.current = false;
+                            });
+                        }, 200);
+                    }) });
+            }
+            else if (b.name === 'DateBlock') {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
+                        if (isNaN(Date.parse(value))) {
+                            return t('validator.date');
+                        }
+                    }) });
+            }
+            else if (b.name === 'TncBlock') {
+                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id) });
+            }
+            else {
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value) });
+            }
+        }, {});
+    }, [listBlockAdded.map((b) => b.name).join(',')]);
+    const form = useLeadForm({
+        validateInputOnChange: true,
+        clearInputErrorOnChange: true,
+        validate: validateObj,
+    });
+    const formRef = useRef(form);
+    formRef.current = form;
+    return { form, validateObj };
+};
+
+const libraries = ['places'];
+const LocationBlock = ({ name, placeholder, locale, }) => {
+    var _a;
+    const form = useLeadFormContext();
+    const [searchValue, setSearchValue] = useState('');
+    const [address, setAddress] = useState('');
+    const { predictions } = usePlacesAutocomplete(searchValue, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const [LoadScript, setLoadScript] = useState(null);
+    const [ready, setReady] = useState(false);
+    const randRef = useRef(Math.random().toString(36).substring(7));
+    const options = useMemo(() => {
+        const _opts = predictions.map((p) => {
+            return {
+                value: p.description,
+                label: p.description,
+            };
+        });
+        const isExist = _opts.find((o) => o.value === address);
+        if (!address || isExist) {
+            return _opts;
+        }
+        return [{ value: address, label: address }].concat(_opts);
+    }, [predictions, address]);
+    useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService)) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+                setTimeout(() => {
+                    setReady(true);
+                }, 200);
+            });
+        }
+        else {
+            setReady(true);
+        }
+    }, []);
+    if (!ready)
+        return (React__default.createElement("div", { style: {
+                height: 73,
+            } }));
+    return (React__default.createElement(React__default.Fragment, null,
+        LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null) })),
+        React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
+        React__default.createElement(Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: true, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
+                setSearchValue(query);
+            }, filter: () => true, clearable: true, searchable: true, onChange: (val) => setAddress(val || ''), icon: React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+                React__default.createElement("path", { d: "M9.99999 9.79167C10.4028 9.79167 10.7467 9.64944 11.0317 9.365C11.3161 9.08 11.4583 8.73611 11.4583 8.33333C11.4583 7.93056 11.3161 7.58667 11.0317 7.30167C10.7467 7.01722 10.4028 6.875 9.99999 6.875C9.59721 6.875 9.25332 7.01722 8.96832 7.30167C8.68388 7.58667 8.54166 7.93056 8.54166 8.33333C8.54166 8.73611 8.68388 9.08 8.96832 9.365C9.25332 9.64944 9.59721 9.79167 9.99999 9.79167ZM9.99999 17.875C9.90277 17.875 9.80555 17.8611 9.70832 17.8333C9.6111 17.8056 9.52082 17.7569 9.43749 17.6875C7.46527 15.8958 5.98971 14.2361 5.01082 12.7083C4.03138 11.1806 3.54166 9.77778 3.54166 8.5C3.54166 6.48611 4.1911 4.87833 5.48999 3.67667C6.78832 2.47556 8.29166 1.875 9.99999 1.875C11.7083 1.875 13.2119 2.47556 14.5108 3.67667C15.8092 4.87833 16.4583 6.48611 16.4583 8.5C16.4583 9.77778 15.9689 11.1806 14.99 12.7083C14.0105 14.2361 12.5347 15.8958 10.5625 17.6875C10.4792 17.7569 10.3889 17.8056 10.2917 17.8333C10.1944 17.8611 10.0972 17.875 9.99999 17.875Z", fill: "#8C8C8C" })), autoComplete: 'no-auto-complete-' + randRef.current, rightSection: React__default.createElement(React__default.Fragment, null) }, form.getInputProps(name)))));
+};
+
+const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const TitleBlock = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+
+const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
+    const form = useLeadFormContext();
+    return (React__default.createElement(React__default.Fragment, null, listBlockAdded.map((b, index) => {
+        const { name = '', data = {} } = b || {};
+        const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
+        switch (name) {
+            case 'TitleBlock':
+                return (React__default.createElement(TitleBlock, { key: index, align: align }, value));
+            case 'SubtitleBlock':
+                return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
+            case 'TextBlock':
+                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, type: "text", placeholder: placeholder, className: "lead-modal__form-control", 
+                    // onChangeRaw={(e) => inputOnChange('text', e)}
+                    label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
+            case 'NumberBlock':
+                return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: true, spellCheck: false, type: "number", placeholder: placeholder, className: "lead-modal__form-control", 
+                    // onChange={(e) => inputOnChange('number', e)}
+                    label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
+            case 'EmailBlock':
+                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, 
+                    // type="email"
+                    placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
+            case 'PhoneOtpBlock':
+            case 'WhatsappOtpBlock':
+            case 'PhoneBlock': {
+                const id = popupId + '-' + value + '-' + index;
+                return (React__default.createElement(Input.Wrapper, Object.assign({ size: "md", withAsterisk: true, key: index, label: placeholder, 
+                    // error={errorField.phone}
+                    className: "lead-modal__form-control", labelProps: {
+                        htmlFor: id,
+                    } }, form.getInputProps(value)),
+                    React__default.createElement(Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
+                            form.setFieldValue(value, v);
+                        }, 
+                        // onBlur={(e) => inputOnBlur('tel', e)}
+                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+            }
+            case 'LocationBlock': {
+                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale }));
+            }
+            case 'DateBlock':
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: true, key: index, type: "default", name: value, placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "date" }, form.getInputProps(value))),
+                    React__default.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
+            case 'LinkButtonBlock':
+                return (React__default.createElement("div", { key: index },
+                    React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
+                        React__default.createElement(Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
+                            } }, value))));
+            case 'CheckboxBlock':
+                return (React__default.createElement(React__default.Fragment, null,
+                    isSendMailChimp && (React__default.createElement("div", { style: {
+                            display: 'none',
+                        }, "data-name": value + '-mailchimp' })),
+                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-control", key: index, label: placeholder, size: "md", sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 8,
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+            case 'RadioBlock':
+                return (React__default.createElement(React__default.Fragment, null,
+                    isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
+                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-control", key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+            case 'DropdownBlock':
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
+                    React__default.createElement(Select, Object.assign({ key: index, className: "lead-modal__form-control", label: placeholder, withAsterisk: true, name: value, data: listQuestion.map((l) => ({
+                            value: l.value,
+                            label: l.placeholder,
+                        })) }, form.getInputProps(value)))));
+            case 'TncBlock':
+                const tncInputProps = form.getInputProps('TNC-' + b.id);
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? React__default.createElement(React__default.Fragment, null) : undefined }))));
+        }
+        return null;
+    })));
+};
+
+const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
+    const { t } = useTranslations();
+    const phone = otpData.phone;
+    const otpType = otpData.type;
+    const [otp, setOtp] = useState('');
+    const [isDirty, setIsDirty] = useState(false);
+    const [resendTimer, setResendTimer] = useState(autoSendWhenOpen ? 0 : 60);
+    const inputRef = useRef(null);
+    const [errorMsg, setErrorMsg] = useState();
+    const [displayPhone, setDisplayPhone] = useState('');
+    const formatPhoneNumberIntlRef = useRef();
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (!formatPhoneNumberIntlRef.current) {
+                const res = yield import('react-phone-number-input');
+                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
+            }
+            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
+        }))();
+    }, [phone]);
+    const sendOtp = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!phone) {
+            return;
+        }
+        const res = yield Service.sendSMSOtpLead({
+            phone,
+            type: otpType,
+        });
+        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+        if (respMessage === 'Send sms successfully' ||
+            respMessage === 'Send WhatsApp successfully') {
+            setResendTimer(60);
+            setTimeout(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.scrollIntoView({ block: 'center' });
+                }
+            }, 100);
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'Something went wrong!');
+            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
+            // setStatusVerifyOTP('idle')
+            // pushNotifications({
+            //   title: respMessage || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+    });
+    const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!phone || !otp) {
+            return;
+        }
+        setIsSubmitLoading(true);
+        const res = yield Service.verifyOtpLead({
+            phone,
+            otp,
+            type: otpType,
+        });
+        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
+        if (respMessage === 'Verify successfully' ||
+            respMessage === 'Verify WhatsApp OTP sucess') {
+            onSuccess();
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'something Wrong');
+            // setIsShowError(true)
+            // setStatusVerifyOTP('sent')
+            // pushNotifications({
+            //   title: res?._messages[0] || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+        setIsSubmitLoading(false);
+    });
+    useEffect(() => {
+        setTimeout(() => {
+            if (resendTimer > 0) {
+                setResendTimer((r) => r - 1);
+            }
+        }, 1000);
+    }, [resendTimer]);
+    useEffect(() => {
+        if (autoSendWhenOpen && !resendTimer) {
+            sendOtp();
+        }
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("form", { onSubmit: (e) => {
+                e.preventDefault();
+                submitOtp();
+            }, className: "lead-phone-otp-form" },
+            React__default.createElement(Heading, { tag: "h3", fontWeight: "bold", style: { marginBottom: 4 } }, t('lead.otp.title')),
+            React__default.createElement(Text, { size: "p1", color: theme.colors.gray600 }, t('lead.otp.desc', { phone: displayPhone })),
+            React__default.createElement(Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: "Enter OTP", className: "lead-modal__form-control", label: "Phone OTP", "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
+                    setIsDirty(true);
+                    setOtp(v);
+                    if (isDirty && !v)
+                        setErrorMsg('OTP is required');
+                    else
+                        setErrorMsg(undefined);
+                }, error: isDirty ? errorMsg : undefined }),
+            React__default.createElement(Button, { size: "md", color: "primary", className: `lead-modal__btn ${LEAD_CLASS}`, 
+                // onClick={() => submitOtp()}
+                disabled: !otp, isLoading: isSubmitLoading }, t('lead.otp.verify')),
+            React__default.createElement(Button, { type: "button", size: "md", color: "transparent", className: `lead-modal__btn lead-phone-otp-button ${LEAD_CLASS}`, onClick: () => {
+                    sendOtp();
+                }, disabled: !!resendTimer }, t('lead.otp.resend', {
+                timer: resendTimer ? ` (${resendTimer}s)` : '',
+            })))));
+};
+
+const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default.createElement("div", { className: "lead-modal__thank-you" },
+        React__default.createElement("div", { style: { width: '100%' } },
+            React__default.createElement("img", { src: image, style: {
+                    maxHeight: 162,
+                    objectFit: 'cover',
+                    aspectRatio: `${imageWidth}/${imageHeight}`,
+                }, loading: "lazy" }),
+            title && (React__default.createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
+            subtitle && (React__default.createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle)),
+            linkText && (React__default.createElement("div", null,
+                React__default.createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
+                    React__default.createElement("button", { className: `lead-modal__btn ${LEAD_CLASS}` }, linkText)))))));
+};
+
+const InlineLayout = ({ content, inlinePosition, }) => {
+    const target = useMemo(() => {
+        if (!inlinePosition)
+            return null;
+        const parents = document.querySelectorAll(`[data-url="${location.pathname}"] .body-content`);
+        const allChildren = Array.from(parents).reduce((r, p) => {
+            return [...r, ...Array.from(p.children)];
+        }, []);
+        if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
+            // find the third p tag in the body content, some other tags might mix in between
+            const allPTags = allChildren.filter((c) => c.nodeName === 'P');
+            const allH2Tags = allChildren.filter((c) => c.nodeName === 'H2');
+            let target = null;
+            switch (inlinePosition) {
+                case '1th':
+                    target = allPTags[0];
+                    break;
+                case '2th':
+                    target = allPTags[1];
+                    break;
+                case '3th':
+                    target = allPTags[2];
+                    break;
+                case '4th':
+                    target = allPTags[3];
+                    break;
+                case '5th':
+                    target = allPTags[4];
+                    break;
+                case '6th':
+                    target = allPTags[5];
+                    break;
+                case '7th':
+                    target = allPTags[6];
+                    break;
+                case '8th':
+                    target = allPTags[7];
+                    break;
+                case '9th':
+                    target = allPTags[8];
+                    break;
+                case '10th':
+                    target = allPTags[9];
+                    break;
+                case '11th':
+                    target = allPTags[10];
+                    break;
+                case '12th':
+                    target = allPTags[11];
+                    break;
+                case 'lastP':
+                    target = allPTags[allPTags.length - 1];
+                    break;
+                case '1thH2':
+                    target = allH2Tags[0];
+                    break;
+                case '2thH2':
+                    target = allH2Tags[1];
+                    break;
+                case '3thH2':
+                    target = allH2Tags[2];
+                    break;
+                case '4thH2':
+                    target = allH2Tags[3];
+                    break;
+                case '5thH2':
+                    target = allH2Tags[4];
+                    break;
+                case '6thH2':
+                    target = allH2Tags[5];
+                    break;
+                case '7thH2':
+                    target = allH2Tags[6];
+                    break;
+                case '8thH2':
+                    target = allH2Tags[7];
+                    break;
+                case '9thH2':
+                    target = allH2Tags[8];
+                    break;
+                case '10thH2':
+                    target = allH2Tags[9];
+                    break;
+                case 'lastH2':
+                    target = allH2Tags[allH2Tags.length - 1];
+                    break;
+            }
+            if (target) {
+                if (!target.parentElement.querySelector('.inline-lead-wrapper')) {
+                    const wrapper = document.createElement('div');
+                    wrapper.classList.add('inline-lead-wrapper');
+                    if (target.nextElementSibling) {
+                        target.parentElement.insertBefore(wrapper, target.nextElementSibling);
+                    }
+                    else {
+                        target.parentElement.appendChild(wrapper);
+                    }
+                    return wrapper;
+                }
+                else {
+                    return target.parentElement.querySelector('.inline-lead-wrapper');
+                }
+            }
+        }
+    }, [inlinePosition]);
+    if (!inlinePosition || !target)
+        return null;
+    return createPortal(content, target);
+};
+
+const SideBarLayout = ({ content }) => {
+    const targets = useMemo(() => {
+        const targetDoms = Array.from(document.querySelectorAll('.hc2-sidebar-with-ads,.page-main-col .right-col.f-right,.hhg-lead-sidebar'));
+        targetDoms.forEach((dom) => {
+            if (dom.querySelector('.sidebar-lead-modal-wrapper'))
+                return;
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('sidebar-lead-modal-wrapper');
+            dom.prepend(wrapper);
+        });
+        return targetDoms.map((d) => d.querySelector('.sidebar-lead-modal-wrapper'));
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null, targets.map((target) => createPortal(content, getWrapperDomWithSelector(target, 'sidebar-lead-modal-wrapper')))));
+};
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// image: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, }) => {
+    var _a, _b, _c;
+    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
+    const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const textBlocks = JSON.parse(extraFields.textBlocks);
+    const popUpTermURL = actionBlocks.submitBlock.data.url;
+    const popUpTermAgreeText = actionBlocks.submitBlock.data.text;
+    const popUpTermText = actionBlocks.submitBlock.data.text2;
+    const popUpSubmitText = actionBlocks.submitBlock.data.value;
+    const currentPath = location.pathname;
+    const isInPage = currentLayout.includes('Inline') || currentLayout === 'Sidebar';
+    const isSlider = currentLayout === 'Slider';
+    const [checkedTerm, setCheckedTerm] = useState(true);
+    const [showOtpPhone, setShowOtpPhone] = useState(null);
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const formRef = useRef();
+    const onClose = () => {
+        if (showOtpPhone) {
+            setShowOtpPhone(null);
+        }
+        else {
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+        }
+    };
+    if (window.innerWidth < 769 &&
+        ['Fullscreen', 'Slider'].includes(currentLayout)) {
+        console.log('😎 Not show fullscreen, slider on mobile ');
+        return null;
+    }
+    useEffect(() => {
+        if (currentLayout.includes('LightBox') || currentLayout == 'Fullscreen') {
+            document.body.classList.add('noscroll');
+        }
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
+        }
+        clearCacheUsedEmailOrPhone();
+    }, []);
+    const validatingPhoneRef = useRef(false);
+    const validatingEmailRef = useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+    });
+    const middlewareOnSubmit = (e) => {
+        e.preventDefault();
+        // mark all as touched to allow validation
+        form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
+            acc[cur] = true;
+            return acc;
+        }, {}));
+        if (validatingEmailRef.current || validatingPhoneRef.current) {
+            return;
+        }
+        setTimeout(() => {
+            form.onSubmit((v) => {
+                var _a, _b, _c, _d, _e, _f;
+                if (Object.keys(form.errors).length)
+                    return;
+                let newShowOtpPhone = null;
+                if (listBlockAdded.findIndex((x) => x.name === 'PhoneOtpBlock') > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === 'PhoneOtpBlock')) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
+                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'phone',
+                        };
+                    }
+                }
+                if (listBlockAdded.findIndex((x) => x.name === 'WhatsappOtpBlock') > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === 'WhatsappOtpBlock')) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
+                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'whatsapp',
+                        };
+                    }
+                }
+                if (newShowOtpPhone) {
+                    setIsSubmitLoading(true);
+                    Service.sendSMSOtpLead(newShowOtpPhone)
+                        .then((res) => {
+                        var _a;
+                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+                        if (respMessage === 'This phone number was verified') {
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            return;
+                        }
+                        setShowOtpPhone(newShowOtpPhone);
+                    })
+                        .finally(() => {
+                        setIsSubmitLoading(false);
+                    });
+                    return;
+                }
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+            })(e);
+        }, 100);
+    };
+    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
+    const renderAfterImageSizes = imageMobileLoaded &&
+        imageDesktopLoaded &&
+        (currentLayout == 'Fullscreen' ? imageBackgroundLoaded : true);
+    const PopupContent = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("style", { dangerouslySetInnerHTML: {
+                __html: `
+          .le-newbuilder-overlay {
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+          ${imageOverlayMobile
+                    ? `
+              .le-newbuilder-overlay {
+                background: url(${imageOverlayMobile}) ;
+              }`
+                    : ``}
+          ${imageOverlayDesktop
+                    ? `
+              @media screen and (min-width:768px) {
+                .le-newbuilder-overlay {
+                  background: url(${imageOverlayDesktop}) ;
+                }
+              }`
+                    : ``}`,
+            } }),
+        React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: `lead-modal lead-modal-wrapper modal--animate-scale ${isInPage ? 'le-buider-inline' : ''} ${isSlider ? 'le-buider-slider' : ''}` },
+            currentLayout == 'Fullscreen' ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
+                    aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
+                } })) : null,
+            React__default.createElement("div", { className: `lead-modal__wrapper le-newbuilder-wrap-${currentLayout}` },
+                React__default.createElement("div", { className: `lead-modal__content le-newbuilder-${currentLayout}` }, 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 })) : (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("header", { className: "lead-modal__header" }, showOtpPhone ? (React__default.createElement("img", { src: CommonGAssets.getAssetPath('lead-otp-thumb.png'), draggable: "false", alt: "", style: {
+                            width: '100%',
+                            minHeight: '150px',
+                            backgroundColor: '#f2f2f2',
+                        }, loading: "lazy" })) : (React__default.createElement(React__default.Fragment, null, ['LightBoxA', 'InlineA', 'Sidebar', 'Slider'].includes(currentLayout) ? (imageMobile ? (React__default.createElement("img", { draggable: "false", className: "lead-modal__image lead-modal-image-cover", src: imageMobile, style: {
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        }, alt: "" })) : null) : (React__default.createElement(React__default.Fragment, null,
+                        imageDesktop ? (React__default.createElement("img", { draggable: "false", className: "le-only-desktop lead-modal__image lead-modal-image-cover", style: {
+                                objectFit: 'cover',
+                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                            }, src: imageDesktop, alt: "" })) : null,
+                        imageMobile ? (React__default.createElement("img", { draggable: "false", className: "le-only-mobile lead-modal__image lead-modal-image-cover", src: imageMobile, alt: "", style: {
+                                aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                            } })) : null))))),
+                    showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+                            setShowOtpPhone(null);
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+                        } })),
+                    React__default.createElement("div", { "data-hidden": !!showOtpPhone, className: "lead-modal__body le-newbuilder-overlay" },
+                        React__default.createElement(LeadFormProvider, { form: form },
+                            React__default.createElement("form", { ref: formRef, className: `lead-modal__form ${popupId}`, onSubmit: middlewareOnSubmit },
+                                React__default.createElement("div", { style: { marginBottom: 20 } },
+                                    React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + ((_a = textBlocks.titleBlock.data) === null || _a === void 0 ? void 0 : _a.align)} ${LEAD_CLASS}` }, title),
+                                    React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + ((_b = textBlocks.titleBlock.data) === null || _b === void 0 ? void 0 : _b.align)} ${LEAD_CLASS}` }, textBlocks.subtitleBlock.data.value)),
+                                React__default.createElement("div", { className: "lead-modal__form-control-wrapper" },
+                                    React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit })),
+                                ((_c = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _c === void 0 ? void 0 : _c.isHide) ? null : (React__default.createElement(React__default.Fragment, null,
+                                    React__default.createElement("div", { className: `lead-modal__checkbox-wrapper ${LEAD_CLASS}` },
+                                        React__default.createElement("div", { className: "lead-modal__checkbox" },
+                                            React__default.createElement("input", { id: "lead-term-checkbox", className: `lead-modal__checkbox__input ${LEAD_CLASS}`, type: "checkbox", "aria-label": "Checkbox label", checked: checkedTerm, onChange: (e) => setCheckedTerm(e.currentTarget.checked) }),
+                                            React__default.createElement("div", { className: "lead-modal__checkbox__control", "aria-hidden": "true" })),
+                                        React__default.createElement("label", { htmlFor: "checkbox", className: "lead-modal__checkbox__label" },
+                                            popUpTermAgreeText,
+                                            ' ',
+                                            React__default.createElement("span", { style: { fontWeight: 'bold' } },
+                                                React__default.createElement("a", { target: "blank", href: popUpTermURL ||
+                                                        'https://hellobacsi.com/chinh-sach', rel: "noopener noreferrer", style: { textDecoration: 'none' } }, popUpTermText)))),
+                                    React__default.createElement(Button, { size: "md", id: "lead-submit", type: "submit", className: `lead-modal__btn ${LEAD_CLASS}`, disabled: !checkedTerm, isLoading: isSubmitLoading }, popUpSubmitText))))))))),
+                !currentLayout.includes('Inline') && (React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+    if (!renderAfterImageSizes)
+        return null;
+    if (currentLayout.includes('LightBox') ||
+        currentLayout == 'Fullscreen' ||
+        currentLayout == 'Slider') {
+        return PopupContent;
+    }
+    else if (currentLayout == 'Sidebar') {
+        return React__default.createElement(SideBarLayout, { content: PopupContent });
+    }
+    else if (currentLayout.includes('Inline')) {
+        return (React__default.createElement(InlineLayout, { content: PopupContent, 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' } },
+                    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;
+function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
+    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');
+                    if (timeoutRef)
+                        clearTimeout(timeoutRef);
+                    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);
+                    const 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);
+                        }
+                    };
+                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
+                        passive: true,
+                    });
+                }
+            }
+            else {
+                LeadLog('🚧 No lead campaigns on current URL, tags');
+            }
+        }
+    })
+        .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);
+    }
+};
+
+function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
+    if (t.includes('{{category_')) {
+        const cl = '{{category_'.length;
+        const sc = t.search('{{category_');
+        const sf = t.charAt(cl + sc);
+        return +sf;
+    }
+    else {
+        return null;
+    }
+}
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, }) => {
+    var _a, _b;
+    const { apiUrl, siteDomain } = useContext(LeadGenContext);
+    useEffect(() => {
+        const gaCookie = getCookie('_ga') || null;
+        fetch(`${apiUrl}api/campaign/${code}/impression`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                action,
+                url: location.href.toLowerCase(),
+                title_article: document.title,
+                cookie_id: getCookie('hhg-id'),
+                ga_client_id: gaCookie,
+            }),
+        });
+    }, []);
+    const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
+    const { currentLayout } = extra_fields;
+    const imageBlocks = extra_fields.imageBlocks
+        ? JSON.parse(extra_fields.imageBlocks)
+        : {};
+    const actionBlocks = JSON.parse(extra_fields.actionBlocks);
+    const textBlocks = JSON.parse(extra_fields.textBlocks);
+    let titleText = ((_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 categoryData = {
+        1: {},
+        2: {},
+        3: {},
+    };
+    const popupIdRef = useRef('lead-modal-' + v1());
+    const categoryLevel = getCategoryLevel(titleText);
+    if (categoryLevel) {
+        LeadLog('⚡️ Has categoryLevel', categoryLevel);
+        const listMeta = Array.from(document.getElementsByTagName('META'));
+        const valueMeta = listMeta.find((i) => i.name === `content_category_${categoryLevel}`);
+        const valueMetaEn = listMeta.find((i) => i.name === `content_category_en_${categoryLevel}`);
+        if (valueMeta && valueMetaEn) {
+            categoryData[categoryLevel] = {
+                value: valueMeta.content,
+                value_en: valueMetaEn.content,
+            };
+            titleText = titleText.replace(`{{category_${categoryLevel}}}`, valueMeta.content);
+            LeadLog('⚡️ Set categoryData ', categoryLevel);
+        }
+        else {
+            LeadLog('⚡️ No META TAG for categoryLevel, not show popup', categoryLevel);
+            return null;
+        }
+    }
+    else {
+        LeadLog('⚡️ No categoryLevel', categoryLevel);
+    }
+    const onOtherSubmit = () => {
+        var _a, _b, _c, _d;
+        LeadLog('👌 Other submit click');
+        document.body.classList.remove('noscroll');
+        if (currentLayout.includes('Skin')) {
+            const $head = document.querySelector('#masthead');
+            if ($head) {
+                $head.style.top = 0 + 'px !important;';
+            }
+        }
+        const expiresDay = Number((_b = (_a = campaign.rules.find((r) => r.rule == 'days_to_show_again')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 7);
+        const showAgain = Number((_d = (_c = campaign.rules.find((r) => r.rule == 'show_again_after_submit')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 0);
+        if (showAgain === 0) {
+            LeadLog('⛔ Popup never show again!');
+            setCookie(`lead_submited_${code}`, `target_${extra_fields.popupVersion}`, { domain: '.' + siteDomain, path: '/' });
+        }
+        if (showAgain == 1) {
+            LeadLog(`⌛ Popup will show again after ${expiresDay} days!`);
+            setCookie(`lead_submited_${code}`, `target_${extra_fields.popupVersion}`, { domain: '.' + siteDomain, days: expiresDay, path: '/' });
+        }
+        const gaCookie = getCookie('_ga') || null;
+        const data = {
+            url: location.href.toLowerCase(),
+            title_article: document.title,
+            meta: [],
+            cookie_id: getCookie('hhg-id'),
+            ga_client_id: gaCookie,
+        };
+        if (categoryLevel) {
+            data['category'] = categoryData[categoryLevel].value_en;
+        }
+        fetch(`${apiUrl}api/campaign/${code}/lead`, {
+            method: 'POST',
+            body: JSON.stringify(data),
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => {
+            if (data.status === 'error') {
+                LeadLog(data);
+            }
+        })
+            .catch((error) => {
+            LeadLog('Error:', error);
+        });
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    if (currentLayout === 'CenterTab') {
+        return (React__default.createElement(CenterTabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, imageMobile: image, imageDestkop: image_desktop, onClose: onClose, onOtherSubmit: onOtherSubmit }));
+    }
+    else if (currentLayout === 'Tab') {
+        return (React__default.createElement(TabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, image: image, onClose: onClose, onOtherSubmit: onOtherSubmit }));
+    }
+    else if (currentLayout === 'Floating') {
+        return (React__default.createElement(FloatingLayout, { popupId: popupIdRef.current, title: titleText, titleAlign: textBlocks.titleBlock.data.align, subtitle: textBlocks.subtitleBlock.data.value, subtitleAlign: textBlocks.subtitleBlock.data.align, url: actionBlocks.linkButtonBlock.data.url, urlText: actionBlocks.linkButtonBlock.data.value, newTab: actionBlocks.linkButtonBlock.data.newtab, imageMobile: image, imageDesktop: image_desktop, onClose: onClose, onOtherSubmit: onOtherSubmit }));
+    }
+    else if (currentLayout.includes('LightBox') ||
+        currentLayout.includes('Inline') ||
+        currentLayout == 'Fullscreen' ||
+        currentLayout == 'Sidebar' ||
+        currentLayout == 'Slider') {
+        return (React__default.createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaign_subot_id: campaign.bot_id || [], locale: locale }));
+    }
+    else if (currentLayout.includes('Skin')) {
+        return (React__default.createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));
+    }
+    return null;
+};
+
+// mount css
+const LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl, DEBUG_URL, forceCampaign, }) => {
+    var _a;
+    const scrollEventHandlerRef = useRef();
+    const leadStartTimeRef = useRef(Date.now());
+    const { apiUrl } = useMemo(() => {
+        let apiUrl = apiUrlProp;
+        if (apiUrl.includes('localhost')) {
+            apiUrl = 'https://dev.leadgen.hellobacsi.com/';
+        }
+        return {
+            apiUrl,
+        };
+    }, [apiUrlProp, siteDomain, siteId]);
+    const [showCampaign, setShowCampaign] = useState(forceCampaign);
+    const [action, setAction] = useState('');
+    const [showThankyou, setShowThankyou] = useState(null);
+    useEffect(() => {
+        if (forceCampaign) {
+            setShowCampaign(forceCampaign);
+            setAction('SHOW');
+        }
+    }, [forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code]);
+    useEffect(() => {
+        leadStore.apiLeadUrl = apiUrl;
+        leadStore.apiSubotUrl = apiSubotUrl;
+    }, [apiUrl, apiSubotUrl]);
+    const onShowPopup = (campaign, action) => {
+        // TODO: run campaign
+        setShowCampaign(campaign);
+        setAction(action);
+    };
+    const onClose = () => {
+        var _a, _b;
+        if (!showCampaign)
+            return;
+        LeadLog(`👋👋👋 CLOSE POPUP ${showCampaign.code} 👋👋👋`);
+        const showAfterExit = Number((_a = showCampaign.rules.find((rule) => rule.rule == 'show_again_after_exit')) === null || _a === void 0 ? void 0 : _a.value);
+        const expiresDay = Number((_b = showCampaign.rules.find((rule) => rule.rule == 'days_to_show_again')) === null || _b === void 0 ? void 0 : _b.value);
+        if (showAfterExit == 0) {
+            if (!expiresDay) {
+                setCookie(`lead_closed_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupVersion}`, { domain: '.' + siteDomain, path: '/' });
+            }
+            else {
+                setCookie(`lead_closed_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupVersion}`, { domain: '.' + siteDomain, days: expiresDay, path: '/' });
+            }
+        }
+        document.body.classList.remove('noscroll');
+        fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                action: 'CLICK',
+                url: location.href.toLowerCase(),
+                title_article: document.title,
+                cookie_id: getCookie('hhg-id'),
+                duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
+            }),
+        });
+        setShowCampaign(null);
+        setShowThankyou(null);
+    }; //
+    useEffect(() => {
+        if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
+            return;
+        // window.next only on nextjs page
+        if (window.next) {
+            const debounced = debounce((e) => {
+                LeadLog('--🌻 routeChangeComplete', e, Date.now());
+                const currentPath = location.pathname;
+                // Remove floating, inline when url change
+                onClose();
+                if (document.querySelectorAll(`[data-popup-url="${currentPath}"]`).length) {
+                    LeadLog('🔥 This URL page has show popup!');
+                }
+                else {
+                    LeadLog('--Process checkShowPopup');
+                    checkShowPopup({
+                        leadApi: apiUrl,
+                        leadDomain: siteDomain,
+                        leadSiteId: siteId,
+                        onShowPopup,
+                        DEBUG_URL,
+                    });
+                }
+                if (scrollEventHandlerRef.current) {
+                    window.removeEventListener('scroll', scrollEventHandlerRef.current);
+                }
+            }, 500);
+            window.next.router.events.on('routeChangeComplete', debounced);
+        }
+        checkShowPopup({
+            leadApi: apiUrl,
+            leadDomain: siteDomain,
+            leadSiteId: siteId,
+            onShowPopup,
+            DEBUG_URL,
+        });
+    }, []);
+    const onSubmit = (currentForm, formDataObj, categoryLevel, categoryData) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (!formDataObj)
+            return;
+        LeadLog('submitHandler', categoryLevel, categoryData);
+        const formData = Object.keys(formDataObj).map((key) => ({
+            name: key,
+            value: String(formDataObj[key]),
+        }));
+        const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
+        // Get ga_client_id from cookies
+        const gaCookie = getCookie('_ga') || null;
+        if (!window.intlTelInputUtils) {
+            yield require('intl-tel-input/build/js/utils');
+        }
+        const data = {
+            url: location.href.toLowerCase(),
+            title_article: document.title,
+            meta: formData.map((i) => {
+                var _a, _b;
+                const control = ((_a = currentForm
+                    .querySelector(`*[name="${i.name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
+                    ((_b = currentForm
+                        .querySelector(`*[data-extra][data-name="${i.name}"]`)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-control')) ||
+                    'text';
+                const value = control === 'tel'
+                    ? window.intlTelInputUtils
+                        .formatNumber(String(i.value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
+                        .replace(/\s+/g, '')
+                    : control === 'date'
+                        ? dayjs(i.value).format('YYYY-MM-DD')
+                        : i.value;
+                return {
+                    key: i.name,
+                    value,
+                    control,
+                    // is_sent_mailchimp: currentForm.querySelector(
+                    //   `div[data-name="${i.name}-mailchimp"]`,
+                    // )
+                    //   ? 'true'
+                    //   : 'false',
+                };
+            }),
+            cookie_id: getCookie('hhg-id'),
+            ga_client_id: gaCookie,
+        };
+        // categoryLevel
+        if (categoryLevel) {
+            if (categoryData[categoryLevel].value_en) {
+                data['category'] = categoryData[categoryLevel].value_en;
+            }
+        }
+        const expiresDay = Number(((_c = (_b = showCampaign.rules) === null || _b === void 0 ? void 0 : _b.find((r) => r.rule === 'days_to_show_again')) === null || _c === void 0 ? void 0 : _c.value) ||
+            7);
+        const showAgain = Number(((_e = (_d = showCampaign.rules) === null || _d === void 0 ? void 0 : _d.find((r) => r.rule === 'show_again_after_submit')) === null || _e === void 0 ? void 0 : _e.value) || 0);
+        if (showAgain == 0) {
+            LeadLog('⛔ Popup never show again!');
+            setCookie(`lead_submited_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.targetType}`, { domain: '.' + siteDomain, path: '/' });
+        }
+        if (showAgain == 1) {
+            LeadLog(`⌛ Popup will show again after ${expiresDay} days!`);
+            setCookie(`lead_submited_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.targetType}`, { domain: '.' + siteDomain, days: expiresDay, path: '/' });
+        }
+        fetch(`${apiUrl}api/campaign/${showCampaign.code}/lead`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+        if ((showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupShowThankYou) == 'notshow') {
+            onClose();
+            document.body.classList.remove('noscroll');
+            return;
+        }
+        let isShowThanksYou = true;
+        const thanksImg = showCampaign.thank_you_image || `${apiUrl}admin/img/thanksyou.png`;
+        let thankTitle = (showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupThankyouTitle) || 'Thank you.';
+        let thankDesc = (showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupThankyouDesc) || 'We appreciate your time!';
+        let titleAlign = '';
+        let descAlign = '';
+        let linkText, linkNewTab, linkUrl = '';
+        if ((showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupVersion) == '2.1') {
+            const extra = showCampaign.extra_fields;
+            const listBlockThankyou = JSON.parse(extra.listBlockThankyou);
+            const titleBlock = listBlockThankyou.find((i) => i.name == 'TitleBlock');
+            const subtitleBlock = listBlockThankyou.find((i) => i.name == 'SubtitleBlock');
+            const linkButtonBlock = listBlockThankyou.find((i) => i.name == 'LinkButtonBlock');
+            thankTitle = ((_f = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _f === void 0 ? void 0 : _f.value) || '';
+            titleAlign = ((_g = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _g === void 0 ? void 0 : _g.align) || '';
+            thankDesc = ((_h = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _h === void 0 ? void 0 : _h.value) || '';
+            descAlign = ((_j = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _j === void 0 ? void 0 : _j.align) || '';
+            linkText = ((_k = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _k === void 0 ? void 0 : _k.value) || '';
+            linkNewTab = ((_l = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _l === void 0 ? void 0 : _l.newtab) || false;
+            linkUrl = ((_m = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _m === void 0 ? void 0 : _m.url) || '';
+            const curLayout = showCampaign.extra_fields.currentLayout;
+            // TODO: newbuilder thank you
+            // List layout not show thanks you
+            if (['SkinA', 'SkinB', 'Floating', 'Tab', 'CenterTab'].includes(curLayout)) {
+                isShowThanksYou = false;
+            }
+        }
+        if (isShowThanksYou) {
+            setShowThankyou({
+                title: thankTitle,
+                titleAlign,
+                subtitle: thankDesc,
+                subtitleAlign: descAlign,
+                link: linkUrl,
+                linkNewTab,
+                linkText,
+                image: thanksImg,
+            });
+        }
+        else {
+            setShowThankyou(null);
+        }
+        // Other
+        // Init Insider Obj
+        if (sessionStorage.getItem('insider_object')) {
+            window.insider_object = JSON.parse(sessionStorage.getItem('insider_object'));
+        }
+        else {
+            window.insider_object = {
+                user: {
+                    email: '',
+                    phone_number: '',
+                    gdpr_optin: true,
+                    sms_optin: true,
+                    email_optin: true,
+                },
+            };
+        }
+        // Submit Inisder Obj
+        formData.map((data) => {
+            const name = data.name;
+            const value = data.value;
+            if (name == 'tel') {
+                window.insider_object.user.phone_number = value;
+            }
+            else if (name == 'email') {
+                window.insider_object.user.email = value;
+            }
+        });
+        sessionStorage.setItem('insider_object', JSON.stringify(window.insider_object));
+        // End Init Insider Obj
+        // End Submit handler
+    });
+    useEffect(() => {
+        if (showCampaign) {
+            leadStartTimeRef.current = Date.now();
+        }
+    }, [showCampaign]);
+    return (React__default.createElement(LeadGenContext.Provider, { value: { apiUrl, siteDomain, siteId, locale } },
+        React__default.createElement(TranslationsContext.Provider, { value: {
+                locale,
+                values: getTranslations(locale),
+            } },
+            React__default.createElement(Portal, { target: getPopupWrapperDom() },
+                React__default.createElement(Box, { sx: { position: 'fixed', zIndex: 9999999999 } },
+                    React__default.createElement(Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease" }, (styles) => {
+                        var _a;
+                        return (React__default.createElement(Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default.createElement(React__default.Fragment, null,
+                            !!showCampaign.extra_fields.currentLayout &&
+                                !showCampaign.extra_fields.currentLayout.includes('Inline') &&
+                                !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default.createElement(Overlay, { color: "#000", opacity: 0.5, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
+                            React__default.createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale })))));
+                    }))))));
+};
+
+export { LeadGen };