npm - @bikdotai/bik-component-library - Versions diffs - 0.0.814 → 0.0.815 - Mend

@bikdotai/bik-component-library 0.0.814 → 0.0.815

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (733) hide show

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js CHANGED Viewed

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("react/jsx-runtime"),Be=require("../../../assets/icons/edit.svg.js"),ke=require("../../../assets/icons/info.svg.js"),re=require("date-fns"),j=require("lodash/cloneDeep"),L=require("react"),Z=require("styled-components"),Ve=require("../../alerts/Alert.js"),Ye=require("../../alerts/AlertHelper.js"),De=require("../../custom-date-time/CustomDateTime.js"),Ue=require("../../dropdown/Dropdown.js"),Ie=require("../../input/Input.js"),Re=require("../../product-picker-v2/collectionScreen.js"),qe=require("../../template-preview/constants/regexPatterns.js"),We=require("../../template-preview/helpers/templateMiscHelper.js"),m=require("../../template-preview/models/Channels.js"),je=require("../../template-preview/models/WebpushTemplate.js"),N=require("../../template-preview/models/WhatsAppTemplate.js"),ne=require("../../TypographyStyle.js"),Me=require("../../../utils/StringUtils.js"),k=require("../../../constants/Theme.js"),we=require("../context/templateModalContext.js"),$e=require("../custom-hooks/useAdditionalVariables.js"),Fe=require("../utils/getVariableNameEmail.js"),ze=require("./QueryParamsComponent.js"),ue=Z.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("react/jsx-runtime"),ke=require("../../../assets/icons/edit.svg.js"),Ve=require("../../../assets/icons/info.svg.js"),ne=require("date-fns"),Ye=require("lodash/cloneDeep"),N=require("react"),De=require("styled-components"),Ue=require("../../alerts/Alert.js"),Ie=require("../../alerts/AlertHelper.js"),Re=require("../../custom-date-time/CustomDateTime.js"),qe=require("../../dropdown/Dropdown.js"),je=require("../../input/Input.js"),We=require("../../product-picker-v2/collectionScreen.js"),Me=require("../../template-preview/constants/regexPatterns.js"),we=require("../../template-preview/helpers/templateMiscHelper.js"),m=require("../../template-preview/models/Channels.js"),$e=require("../../template-preview/models/WebpushTemplate.js"),P=require("../../template-preview/models/WhatsAppTemplate.js"),re=require("../../TypographyStyle.js"),Fe=require("../../../utils/StringUtils.js"),V=require("../../../constants/Theme.js"),ze=require("../context/templateModalContext.js"),Ze=require("../custom-hooks/useAdditionalVariables.js"),Ge=require("../utils/getVariableNameEmail.js"),Ke=require("./QueryParamsComponent.js"),ue=g=>g&&typeof g=="object"&&"default"in g?g:{default:g},W=ue(Ye),Z=ue(De),pe=Z.default.div`
 	/* surface/$color-background-warning-light */
-	background: ${D=>D.focused&&D.channel===m.CHANNEL_TYPE.EMAIL?k.COLORS.background.warning.light:"transparent"};
+	background: ${g=>g.focused&&g.channel===m.CHANNEL_TYPE.EMAIL?V.COLORS.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,Ze=Z.div`
+`,Qe=Z.default.div`
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -12,10 +12,10 @@
 	height: 100%;
 	z-index: 1000;
 	cursor: not-allowed;
-`,oe=Z.div`
+`,oe=Z.default.div`
 	height: 100%;
 	width: 48%;
 	background: rgba(0, 0, 0, 0.1);
-`,A={value:"custom_link",label:"Custom URL"},S={value:"custom_text",label:"Custom text"},z={value:"static_expiry",label:"Static Expiry"},Ge=D=>{const{onFocus:pe,variable:o,index:h,showVariableModal:G,setShowDiscountCheckBox:ce,componentType:c,CTAoptions:de,buttonType:M}=D,[w,K]=L.useState(!1),[_,v]=L.useState(""),[me,Q]=L.useState([]),[p,P]=L.useState(),[fe,be]=L.useState(!1),Te=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,{variableList:X,setVariableList:Ee,setVariableCallback:xe,setShowVariablePicker:_e,device:U,channel:f,isError:J,originalVariableList:H,template:g,templateSelectionTriggered:Ce,setTemplate:I,setDisplayContent:ye,setOriginalVariableList:V,globalNormalizedPlaceholders:ee,enabledCustomText:he,pod:B,selectedCarouselIndex:x,isProductCarouselType:$,isWhatsappCarousel:ge,disableEditVariable:R,disableEditExpiry:te,templateErrorIndexes:ae,maxCharLimit:le,disableDatePicker:Le,showDiscountCodeExpiryInfo:Ne,cardIndex:F=1}=we.useTemplateModalContext();L.useEffect(()=>{w&&pe?.()},[w]),L.useEffect(()=>{Ae()},[Ce]),L.useEffect(()=>{Pe()},[x]);function Pe(){const e=[];let a=[];if(f===m.CHANNEL_TYPE.MESSAGE&&!he){const r=ee??[];Q([{label:"",options:[S,A]},...r]),a=[{label:"",options:[S,A]},...r]}else{o?.type==="link"?(e.push({label:"",options:[A,S]}),P(A)):o?.type==="date_time"?(e.push({label:"",options:[A,S]}),P(z)):(e.push({label:"",options:[A,S,z]}),P(S));const r=ee??[];Q([...e,...r.map(d=>({...d,label:Me.default.toCapitilize(d.label?.replace(/([A-Z])/g," $1")?.toLowerCase())}))]),a=[...e,...r]}if((f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.EMAIL||f===m.CHANNEL_TYPE.MESSAGE||f===m.CHANNEL_TYPE.WEBPUSH||f===m.CHANNEL_TYPE.RCS)&&o.updatedValue)if(qe.placeHolderNamePattern.test(o.updatedValue)&&(f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS)||o.updatedValue.startsWith("{{")&&f!==m.CHANNEL_TYPE.WHATSAPP&&f!==m.CHANNEL_TYPE.RCS){const r=Oe(o,a,f);r.value&&P(r)}else o.type==="date_time"?(P(z),v(o.updatedValue),q(o.index??0,o.updatedValue)):o.updatedValue?.startsWith("https")?(P(A),v(o.updatedValue.split("https://")[1])):(P(S),v(o.updatedValue))}function Oe(e,a,r){let d={label:"",value:""};const i=r===(m.CHANNEL_TYPE.WHATSAPP||m.CHANNEL_TYPE.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(G){let T=e.updatedValue;if(B===N.POD.CHATBOT&&c==="BUTTONS"){const l=de?.filter(n=>n.placeHolder===e.updatedValue);l&&l.length>0&&(T=l[0].label)}d={label:T?T.replace("{{","").replace("}}","").trim().replace("."," "):"",value:e.updatedValue??""}}else a.map(T=>{T.options.map(l=>{l.value?.replace("{{","").replace("}}","").trim()===i.trim()&&(d=l)})});return d}function Y(e,a){const r=e;v(""),P(r),f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS?r.value!=="custom_text"&&r.value!=="custom_link"&&r.value!=="static_expiry"?(O(r.value??"","string"),q?.(o.index??0,r.value,!0)):(q?.(o.index??0,"",!0,r.value),O("",r.bikPlaceholderType==="url"?"link":"string")):r.value!=="custom_text"&&r.value!=="custom_link"?(O(r.value,r.bikPlaceholderType==="url"?"link":"string"),f==m.CHANNEL_TYPE.WEBPUSH&&se?.(o.index??0,r.value)):(v(""),O("",r.value))}function ie(e,a){v(a);const r=p?.value==="custom_link"&&a?a.includes("https")?a:`https://${a}`:a;O(r,e==="static_expiry"?"string":e),(f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS)&&q?.(o.index??0,r,e==="custom_link"||B===N.POD.CHATBOT&&e==="custom_text",e),f===m.CHANNEL_TYPE.WEBPUSH&&se?.(o.index??0,r)}function O(e,a,r){const d=a==="custom_link"?"link":a==="custom_text"?"string":a;if(f!==m.CHANNEL_TYPE.WHATSAPP&&f!==m.CHANNEL_TYPE.WEBPUSH&&f!==m.CHANNEL_TYPE.RCS){const i=Fe.getVariableNameForEmailByIndex(h+1),T=document?.getElementById(U==="mobile"?"template_html_mobile":"template_html_desktop"),l=f===m.CHANNEL_TYPE.EMAIL?T?.contentWindow?.document.getElementById(i):document.getElementById(i);l&&((a==="custom_text"||a==="custom_link")&&!e?l.textContent=o.variableName:l.textContent=e);const n=H.map((u,t)=>t===h?{...u,type:d,updatedValue:e}:u);V?.(n)}if(f===m.CHANNEL_TYPE.WEBPUSH){const i=H,T=n=>n?.map((u,t)=>t===h?{...u,type:d,updatedValue:e}:u),l={BODY:c==="BODY"?T(i.body):i.body,TITLE:c===je.WEB_PUSH_COMPONENT_TYPE.TITLE.toUpperCase()?T(i.title):i.title};V?.(n=>({...n,title:l.TITLE,body:l.BODY,buttons:i.buttons}))}if(f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS){if(x!=null&&x>-1&&$){const t={...H}.cards.map((s,C)=>c==="BODY"?{...s,body:s.body?.map((b,y)=>h===y?{...b,type:d,updatedValue:e}:b)}:c==="TITLE"?{...s,title:s.title?.map((b,y)=>h===y?{...b,type:d,updatedValue:e}:b)}:c==="BUTTONS"?{...s,buttons:s.buttons?.map((b,y)=>y===h?{...b,buttonVariable:a==="custom_link"?"((customPlaceholderName))":e,example:b.type==="COPY_CODE"?e:[e]}:b)}:s);V?.(s=>({...s,cards:t}));return}const i=x!=null&&x>-1?H.cards[x]:H;let T=i.body,l=i.title,n=i.header,u=i.buttons;if(c==="BODY"?T=i.body?.map((t,s)=>s===h?{...t,type:d,updatedValue:e}:t):c==="TITLE"?l=i?.title?.map((t,s)=>s===h?{...t,type:d,updatedValue:e}:t):c==="HEADER"?n=i.header?.map((t,s)=>s===h?{...t,type:d,updatedValue:e}:t):c==="BUTTONS"&&(u=i.buttons?.map((t,s)=>s===h?{...t,buttonVariable:a==="custom_link"?"((customPlaceholderName))":e,example:t.type==="COPY_CODE"?e:[e],queryParams:r??[]}:t)),x!=null&&x>-1){const t=j(H.cards);t[x]={header:n,body:T,buttons:u,title:l},V?.(s=>({...s,cards:t}))}else V?.(t=>({...t,header:n,body:T,buttons:u,title:l}))}}L.useEffect(()=>{U&&p&&_&&setTimeout(()=>{const e=p?.value==="custom_link"&&_?_.includes("https")?_:`https://${_}`:_;O(e,p.value)},100)},[U]),L.useEffect(()=>{!fe&&p&&o.updatedValue&&setTimeout(()=>{const e=p?.value==="custom_link"&&o.updatedValue?o.updatedValue.includes("https")?o.updatedValue:`https://${o.updatedValue}`:o.updatedValue;O(e,p.value),be(!0)},100)},[p]);function Ae(){const e=U==="mobile"?"template_html_mobile":"template_html_desktop",a=document.getElementById(e),r=(a?.contentWindow?.document?.body?.innerHTML??"")+a?.contentWindow?.document.head.innerHTML;f===m.CHANNEL_TYPE.EMAIL&&ye?.(r)}function q(e,a,r,d){if(x!=null&&x>-1&&$){const l={...g}.components.map(u=>We.isCarouselComponent(u.type)?{...u,cards:u.cards?.map(t=>({...t,components:t.components.map(s=>{if(s.type==="BODY"&&c==="BODY")if(s.example?.body_text?.[0]){const C=[...s.example?.body_text?.[0]??[]];C[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const b={...s.example,body_text:[C]};return{...s,example:b}}else return s;if(s.type==="TITLE"&&c==="TITLE")if(s.example?.title_text?.[0]){const C=[...s.example?.title_text?.[0]??[]];C[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const b={...s.example,title_text:[C]};return{...s,example:b}}else return s;else if(s.type==="BUTTONS"&&c==="BUTTONS"){const C=s.buttons?.map((b,y)=>y===e?{...b,example:[a]}:b);return C?{...s,buttons:C}:s}else return s})}))}:u),n=j(g);if(r){const u={...g}.mapping.cards?.map((t,s)=>{if(c==="BODY")return{...t,body:t.body?.map((C,b)=>e===b?d==="custom_text"?`((editableVariable${b+10}))`:a:C)};if(c==="TITLE")return{...t,title:t?.title?.map((C,b)=>e===b?d==="custom_text"?`((editableVariable${b+10}))`:a:C)};if(c==="BUTTONS"&&t?.buttons){let C=-1,b=-1;return g.components[F].cards?.[s].components.forEach(y=>{y.type==="BUTTONS"&&y.buttons?.forEach((W,He)=>{W.type==="URL"&&(C++,He===e&&W.type=="URL"&&(b=C))})}),{...t,buttons:t.buttons?.map((y,W)=>W===b?d==="custom_link"?"((customPlaceholderName))":a:y)}}else return t});n.mapping.cards=u}n.components=l,I?.(n);return}const i=x!=null&&x>-1?{components:{...g}.components[F].cards?.[x].components,mapping:{...g}.mapping.cards?.[x]}:{...g},T=i?.components?.map(l=>{const n={...l};if(l.type==="BODY"&&c==="BODY"&&(Array.isArray(l.example?.body_text)||l.example?.body_text?.[0])){const u=[...n.example?.body_text?.[0]??[]];u[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const t={...n.example,body_text:[u]};return{...n,example:t}}if(l.type==="TITLE"&&c==="TITLE"){if(Array.isArray(l.example?.title_text)||l.example?.title_text?.[0]){const u=[...n.example?.title_text?.[0]??[]];u[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const t={...n.example,title_text:[u]};return{...n,example:t}}}else if(l.type==="HEADER"&&c==="HEADER"){if(l.example?.header_text){const u=[...n.example?.header_text??[]];u[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const t={...n.example,header_text:u};return{...n,example:t}}}else if(l.type==="BUTTONS"&&c==="BUTTONS"){const u=l.buttons?.map((t,s)=>s===e?{...t,example:t.type==="COPY_CODE"?a:[a]}:t);return u?{...n,buttons:u}:n}else if(l.type==="limited_time_offer"&&c==="limited_time_offer")return{...n,example:{...n.example,limited_time_offer:a}};return l});if(i.components=T,r){if(c==="BODY"&&i?.mapping?.body)i.mapping={...i.mapping,body:i.mapping?.body?.map((l,n)=>e===n?d==="custom_text"?`((editableVariable${n+10}))`:a:l)};else if(c==="TITLE"&&i?.mapping?.title)i.mapping={...i.mapping,title:i.mapping?.title?.map((l,n)=>e===n?d==="custom_text"?`((editableVariable${n+10}))`:a:l)};else if(c==="HEADER"&&i?.mapping?.header)i.mapping={...i.mapping,header:i.mapping.header.map((l,n)=>e===n?d==="custom_text"?`((editableVariable${n+20}))`:a:l)};else if(c==="BUTTONS"&&i?.mapping?.buttons){let l=-1,n=-1;T.forEach(u=>{u.type==="BUTTONS"&&u.buttons?.forEach((t,s)=>{t.type==="URL"&&(l++,s===e&&t.type=="URL"&&(n=l))})}),i.mapping={...i.mapping,buttons:i.mapping.buttons.map((u,t)=>t===n?d==="custom_link"?"((customPlaceholderName))":a:u)}}}if(x!=null&&x>-1&&g){const l=j(g);l.components[F].cards[x].components=i.components,l.mapping.cards[x]=i.mapping,I?.(l)}else I?.({...i})}const Se=e=>{ce?.(!1),e.actualValue==="{{custom.url}}"?Y({label:e.displayName,selected:!0,value:"custom_link"}):e.actualValue=="{{custom.text}}"?Y({label:e.displayName,selected:!0,value:"custom_text"}):e.actualValue=="{{static.expiry}}"?Y({label:e.displayName,selected:!0,value:"static_expiry"}):Y({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})},ve=()=>{let e=Array.isArray(X)?[...X]:[];const a=(r,d,i)=>{const T=$e.updateVariables({variableList:e,categoryDisplayName:r,variableDisplayName:d,variableValue:i});Array.isArray(T)&&(e=T)};B===N.POD.CHATBOT&&M!==N.BUTTON_TYPE.URL&&c!=="limited_time_offer"&&a("Custom Variables","Custom Text","{{custom.text}}"),M===N.BUTTON_TYPE.URL&&B===N.POD.CHATBOT?a("Custom Variables","Custom URL","{{custom.url}}"):c==="limited_time_offer"?a("Static Variables","Static Expiry","{{static.expiry}}"):M===N.BUTTON_TYPE.COPY_CODE&&a("Custom Variables","Custom Text","{{custom.text}}"),Ee(e)};function se(e,a){const r=j(g),d=c.toLocaleLowerCase();r.webpushBroadcastConfig?.[d]&&(r.webpushBroadcastConfig[d][e]=a),I?.({...r})}return E.jsxs(ue,{channel:f,focused:w,onMouseEnter:()=>K(!0),onMouseLeave:()=>K(!1),children:[E.jsx("div",{style:{marginBottom:8},children:E.jsxs(ne.BodySecondary,{style:{color:J&&!p?k.COLORS.content.negative:k.COLORS.content.primary},children:[o.variableName?.replace("{{","").replace("}}","")," ",o?.type==="link"?"link":"variable"]})}),E.jsx("div",{style:{marginBottom:12},children:G?E.jsxs("div",{style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:p?.label?"space-between":"flex-end",backgroundColor:o?.type==="date_time"&&te?k.COLORS.background.base:void 0},children:[E.jsx(ne.BodyPrimary,{numberOfLines:1,children:B===N.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(p?.value??"")?p?.label:p?.value:Re.truncate(p?.label??"",20)}),R||o?.type==="date_time"&&te?E.jsx(E.Fragment,{}):E.jsx(Be.default,{onClick:()=>{ve(),xe(()=>Se),_e(!0)},width:24,height:24,color:k.COLORS.content.primary})]}):E.jsx(Ue.Dropdown,{disabled:R,options:me,isSearchable:!1,onSelect:Y,defaultOptions:p?[{...p,selected:!0}]:[]})}),(p?.value==="custom_text"||p?.value==="custom_link")&&E.jsx(Ie.Input,{state:R?"disabled":"none",labelText:p?.value==="custom_text"?"Custom text value":p?.value==="custom_link"?"Custom URL value":"",id:`variable-value-${p?.value}-${h}`,value:_,errorMessage:J&&ae?.buttons?.includes(o?.index??-1)?!_||_.trim().length===0?"Required field":p.value==="custom_link"&&(!Te.test(`https://${_.trim()}`)||_.trim().length===0)?"Enter valid URL":p.value!=="custom_link"&&_.length>30?"Length cannot be more than 30":c==="BUTTONS"&&p.value!=="custom_link"?"Enter valid alpha numeric code":"":"",maxCharLimit:le||(p?.value==="custom_link"?2e3:c==="BUTTONS"?15:30),noKeyDownChange:!0,prefixText:p?.value==="custom_link"?"https://":"",placeholder:o.type==="link"||p.value==="custom_link"?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ie(p.value,e)}}),p?.value==="static_expiry"&&E.jsxs("div",{style:{position:"relative"},children:[(R||Le)&&E.jsxs(Ze,{onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"},children:[E.jsx(oe,{}),E.jsx(oe,{})]}),E.jsx(De.CustomDateTime,{placement:"auto",time:_?re.format(new Date(_),"hh:mm a"):re.format(new Date,"hh:mm a"),date:_?new Date(_):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ie("static_expiry",e.toISOString())}})]}),p?.value==="static_expiry"&&Ne&&E.jsx("div",{style:{marginTop:8},children:E.jsx(Ve.Alert,{containerStyle:{padding:"4px 8px"},icon:()=>E.jsx(ke.default,{width:16,height:16,color:k.COLORS.content.secondary}),type:Ye.ALERT_TYPES.NEUTRAL,text:`Please use the same expiration code that you applied when creating
-the code on Shopify`})}),o.type==="link"&&p?.value!=="custom_link"&&!$&&!ge&&B===N.POD.CHATBOT&&E.jsx(ze.QueryParamsComponent,{isError:ae?.buttons?.includes(o?.index??-1)??!1,params:o.queryParams??[],onChange:e=>{O(o.updatedValue,"link",e)},variableValue:o.updatedValue})]})};exports.Container=ue;exports.default=Ge;
+`,S={value:"custom_link",label:"Custom URL"},v={value:"custom_text",label:"Custom text"},z={value:"static_expiry",label:"Static Expiry"},Xe=g=>{const{onFocus:ce,variable:o,index:h,showVariableModal:G,setShowDiscountCheckBox:de,componentType:c,CTAoptions:me,buttonType:M}=g,[w,K]=N.useState(!1),[_,H]=N.useState(""),[fe,Q]=N.useState([]),[p,O]=N.useState(),[be,Te]=N.useState(!1),Ee=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,{variableList:X,setVariableList:xe,setVariableCallback:_e,setShowVariablePicker:Ce,device:U,channel:f,isError:J,originalVariableList:B,template:L,templateSelectionTriggered:ye,setTemplate:I,setDisplayContent:he,setOriginalVariableList:Y,globalNormalizedPlaceholders:ee,enabledCustomText:ge,pod:k,selectedCarouselIndex:x,isProductCarouselType:$,isWhatsappCarousel:Le,disableEditVariable:R,disableEditExpiry:te,templateErrorIndexes:ae,maxCharLimit:le,disableDatePicker:Ne,showDiscountCodeExpiryInfo:Pe,cardIndex:F=1}=ze.useTemplateModalContext();N.useEffect(()=>{w&&ce?.()},[w]),N.useEffect(()=>{Se()},[ye]),N.useEffect(()=>{Oe()},[x]);function Oe(){const e=[];let a=[];if(f===m.CHANNEL_TYPE.MESSAGE&&!ge){const n=ee??[];Q([{label:"",options:[v,S]},...n]),a=[{label:"",options:[v,S]},...n]}else{o?.type==="link"?(e.push({label:"",options:[S,v]}),O(S)):o?.type==="date_time"?(e.push({label:"",options:[S,v]}),O(z)):(e.push({label:"",options:[S,v,z]}),O(v));const n=ee??[];Q([...e,...n.map(d=>({...d,label:Fe.default.toCapitilize(d.label?.replace(/([A-Z])/g," $1")?.toLowerCase())}))]),a=[...e,...n]}if((f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.EMAIL||f===m.CHANNEL_TYPE.MESSAGE||f===m.CHANNEL_TYPE.WEBPUSH||f===m.CHANNEL_TYPE.RCS)&&o.updatedValue)if(Me.placeHolderNamePattern.test(o.updatedValue)&&(f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS)||o.updatedValue.startsWith("{{")&&f!==m.CHANNEL_TYPE.WHATSAPP&&f!==m.CHANNEL_TYPE.RCS){const n=Ae(o,a,f);n.value&&O(n)}else o.type==="date_time"?(O(z),H(o.updatedValue),q(o.index??0,o.updatedValue)):o.updatedValue?.startsWith("https")?(O(S),H(o.updatedValue.split("https://")[1])):(O(v),H(o.updatedValue))}function Ae(e,a,n){let d={label:"",value:""};const i=n===(m.CHANNEL_TYPE.WHATSAPP||m.CHANNEL_TYPE.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(G){let T=e.updatedValue;if(k===P.POD.CHATBOT&&c==="BUTTONS"){const l=me?.filter(r=>r.placeHolder===e.updatedValue);l&&l.length>0&&(T=l[0].label)}d={label:T?T.replace("{{","").replace("}}","").trim().replace("."," "):"",value:e.updatedValue??""}}else a.map(T=>{T.options.map(l=>{l.value?.replace("{{","").replace("}}","").trim()===i.trim()&&(d=l)})});return d}function D(e,a){const n=e;H(""),O(n),f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS?n.value!=="custom_text"&&n.value!=="custom_link"&&n.value!=="static_expiry"?(A(n.value??"","string"),q?.(o.index??0,n.value,!0)):(q?.(o.index??0,"",!0,n.value),A("",n.bikPlaceholderType==="url"?"link":"string")):n.value!=="custom_text"&&n.value!=="custom_link"?(A(n.value,n.bikPlaceholderType==="url"?"link":"string"),f==m.CHANNEL_TYPE.WEBPUSH&&se?.(o.index??0,n.value)):(H(""),A("",n.value))}function ie(e,a){H(a);const n=p?.value==="custom_link"&&a?a.includes("https")?a:`https://${a}`:a;A(n,e==="static_expiry"?"string":e),(f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS)&&q?.(o.index??0,n,e==="custom_link"||k===P.POD.CHATBOT&&e==="custom_text",e),f===m.CHANNEL_TYPE.WEBPUSH&&se?.(o.index??0,n)}function A(e,a,n){const d=a==="custom_link"?"link":a==="custom_text"?"string":a;if(f!==m.CHANNEL_TYPE.WHATSAPP&&f!==m.CHANNEL_TYPE.WEBPUSH&&f!==m.CHANNEL_TYPE.RCS){const i=Ge.getVariableNameForEmailByIndex(h+1),T=document?.getElementById(U==="mobile"?"template_html_mobile":"template_html_desktop"),l=f===m.CHANNEL_TYPE.EMAIL?T?.contentWindow?.document.getElementById(i):document.getElementById(i);l&&((a==="custom_text"||a==="custom_link")&&!e?l.textContent=o.variableName:l.textContent=e);const r=B.map((u,t)=>t===h?{...u,type:d,updatedValue:e}:u);Y?.(r)}if(f===m.CHANNEL_TYPE.WEBPUSH){const i=B,T=r=>r?.map((u,t)=>t===h?{...u,type:d,updatedValue:e}:u),l={BODY:c==="BODY"?T(i.body):i.body,TITLE:c===$e.WEB_PUSH_COMPONENT_TYPE.TITLE.toUpperCase()?T(i.title):i.title};Y?.(r=>({...r,title:l.TITLE,body:l.BODY,buttons:i.buttons}))}if(f===m.CHANNEL_TYPE.WHATSAPP||f===m.CHANNEL_TYPE.RCS){if(x!=null&&x>-1&&$){const t={...B}.cards.map((s,C)=>c==="BODY"?{...s,body:s.body?.map((b,y)=>h===y?{...b,type:d,updatedValue:e}:b)}:c==="TITLE"?{...s,title:s.title?.map((b,y)=>h===y?{...b,type:d,updatedValue:e}:b)}:c==="BUTTONS"?{...s,buttons:s.buttons?.map((b,y)=>y===h?{...b,buttonVariable:a==="custom_link"?"((customPlaceholderName))":e,example:b.type==="COPY_CODE"?e:[e]}:b)}:s);Y?.(s=>({...s,cards:t}));return}const i=x!=null&&x>-1?B.cards[x]:B;let T=i.body,l=i.title,r=i.header,u=i.buttons;if(c==="BODY"?T=i.body?.map((t,s)=>s===h?{...t,type:d,updatedValue:e}:t):c==="TITLE"?l=i?.title?.map((t,s)=>s===h?{...t,type:d,updatedValue:e}:t):c==="HEADER"?r=i.header?.map((t,s)=>s===h?{...t,type:d,updatedValue:e}:t):c==="BUTTONS"&&(u=i.buttons?.map((t,s)=>s===h?{...t,buttonVariable:a==="custom_link"?"((customPlaceholderName))":e,example:t.type==="COPY_CODE"?e:[e],queryParams:n??[]}:t)),x!=null&&x>-1){const t=W.default(B.cards);t[x]={header:r,body:T,buttons:u,title:l},Y?.(s=>({...s,cards:t}))}else Y?.(t=>({...t,header:r,body:T,buttons:u,title:l}))}}N.useEffect(()=>{U&&p&&_&&setTimeout(()=>{const e=p?.value==="custom_link"&&_?_.includes("https")?_:`https://${_}`:_;A(e,p.value)},100)},[U]),N.useEffect(()=>{!be&&p&&o.updatedValue&&setTimeout(()=>{const e=p?.value==="custom_link"&&o.updatedValue?o.updatedValue.includes("https")?o.updatedValue:`https://${o.updatedValue}`:o.updatedValue;A(e,p.value),Te(!0)},100)},[p]);function Se(){const e=U==="mobile"?"template_html_mobile":"template_html_desktop",a=document.getElementById(e),n=(a?.contentWindow?.document?.body?.innerHTML??"")+a?.contentWindow?.document.head.innerHTML;f===m.CHANNEL_TYPE.EMAIL&&he?.(n)}function q(e,a,n,d){if(x!=null&&x>-1&&$){const l={...L}.components.map(u=>we.isCarouselComponent(u.type)?{...u,cards:u.cards?.map(t=>({...t,components:t.components.map(s=>{if(s.type==="BODY"&&c==="BODY")if(s.example?.body_text?.[0]){const C=[...s.example?.body_text?.[0]??[]];C[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const b={...s.example,body_text:[C]};return{...s,example:b}}else return s;if(s.type==="TITLE"&&c==="TITLE")if(s.example?.title_text?.[0]){const C=[...s.example?.title_text?.[0]??[]];C[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const b={...s.example,title_text:[C]};return{...s,example:b}}else return s;else if(s.type==="BUTTONS"&&c==="BUTTONS"){const C=s.buttons?.map((b,y)=>y===e?{...b,example:[a]}:b);return C?{...s,buttons:C}:s}else return s})}))}:u),r=W.default(L);if(n){const u={...L}.mapping.cards?.map((t,s)=>{if(c==="BODY")return{...t,body:t.body?.map((C,b)=>e===b?d==="custom_text"?`((editableVariable${b+10}))`:a:C)};if(c==="TITLE")return{...t,title:t?.title?.map((C,b)=>e===b?d==="custom_text"?`((editableVariable${b+10}))`:a:C)};if(c==="BUTTONS"&&t?.buttons){let C=-1,b=-1;return L.components[F].cards?.[s].components.forEach(y=>{y.type==="BUTTONS"&&y.buttons?.forEach((j,Be)=>{j.type==="URL"&&(C++,Be===e&&j.type=="URL"&&(b=C))})}),{...t,buttons:t.buttons?.map((y,j)=>j===b?d==="custom_link"?"((customPlaceholderName))":a:y)}}else return t});r.mapping.cards=u}r.components=l,I?.(r);return}const i=x!=null&&x>-1?{components:{...L}.components[F].cards?.[x].components,mapping:{...L}.mapping.cards?.[x]}:{...L},T=i?.components?.map(l=>{const r={...l};if(l.type==="BODY"&&c==="BODY"&&(Array.isArray(l.example?.body_text)||l.example?.body_text?.[0])){const u=[...r.example?.body_text?.[0]??[]];u[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const t={...r.example,body_text:[u]};return{...r,example:t}}if(l.type==="TITLE"&&c==="TITLE"){if(Array.isArray(l.example?.title_text)||l.example?.title_text?.[0]){const u=[...r.example?.title_text?.[0]??[]];u[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const t={...r.example,title_text:[u]};return{...r,example:t}}}else if(l.type==="HEADER"&&c==="HEADER"){if(l.example?.header_text){const u=[...r.example?.header_text??[]];u[e]=a.replace("{{","").replace("}}","").replace("((","").replace("))","");const t={...r.example,header_text:u};return{...r,example:t}}}else if(l.type==="BUTTONS"&&c==="BUTTONS"){const u=l.buttons?.map((t,s)=>s===e?{...t,example:t.type==="COPY_CODE"?a:[a]}:t);return u?{...r,buttons:u}:r}else if(l.type==="limited_time_offer"&&c==="limited_time_offer")return{...r,example:{...r.example,limited_time_offer:a}};return l});if(i.components=T,n){if(c==="BODY"&&i?.mapping?.body)i.mapping={...i.mapping,body:i.mapping?.body?.map((l,r)=>e===r?d==="custom_text"?`((editableVariable${r+10}))`:a:l)};else if(c==="TITLE"&&i?.mapping?.title)i.mapping={...i.mapping,title:i.mapping?.title?.map((l,r)=>e===r?d==="custom_text"?`((editableVariable${r+10}))`:a:l)};else if(c==="HEADER"&&i?.mapping?.header)i.mapping={...i.mapping,header:i.mapping.header.map((l,r)=>e===r?d==="custom_text"?`((editableVariable${r+20}))`:a:l)};else if(c==="BUTTONS"&&i?.mapping?.buttons){let l=-1,r=-1;T.forEach(u=>{u.type==="BUTTONS"&&u.buttons?.forEach((t,s)=>{t.type==="URL"&&(l++,s===e&&t.type=="URL"&&(r=l))})}),i.mapping={...i.mapping,buttons:i.mapping.buttons.map((u,t)=>t===r?d==="custom_link"?"((customPlaceholderName))":a:u)}}}if(x!=null&&x>-1&&L){const l=W.default(L);l.components[F].cards[x].components=i.components,l.mapping.cards[x]=i.mapping,I?.(l)}else I?.({...i})}const ve=e=>{de?.(!1),e.actualValue==="{{custom.url}}"?D({label:e.displayName,selected:!0,value:"custom_link"}):e.actualValue=="{{custom.text}}"?D({label:e.displayName,selected:!0,value:"custom_text"}):e.actualValue=="{{static.expiry}}"?D({label:e.displayName,selected:!0,value:"static_expiry"}):D({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})},He=()=>{let e=Array.isArray(X)?[...X]:[];const a=(n,d,i)=>{const T=Ze.updateVariables({variableList:e,categoryDisplayName:n,variableDisplayName:d,variableValue:i});Array.isArray(T)&&(e=T)};k===P.POD.CHATBOT&&M!==P.BUTTON_TYPE.URL&&c!=="limited_time_offer"&&a("Custom Variables","Custom Text","{{custom.text}}"),M===P.BUTTON_TYPE.URL&&k===P.POD.CHATBOT?a("Custom Variables","Custom URL","{{custom.url}}"):c==="limited_time_offer"?a("Static Variables","Static Expiry","{{static.expiry}}"):M===P.BUTTON_TYPE.COPY_CODE&&a("Custom Variables","Custom Text","{{custom.text}}"),xe(e)};function se(e,a){const n=W.default(L),d=c.toLocaleLowerCase();n.webpushBroadcastConfig?.[d]&&(n.webpushBroadcastConfig[d][e]=a),I?.({...n})}return E.jsxs(pe,{channel:f,focused:w,onMouseEnter:()=>K(!0),onMouseLeave:()=>K(!1),children:[E.jsx("div",{style:{marginBottom:8},children:E.jsxs(re.BodySecondary,{style:{color:J&&!p?V.COLORS.content.negative:V.COLORS.content.primary},children:[o.variableName?.replace("{{","").replace("}}","")," ",o?.type==="link"?"link":"variable"]})}),E.jsx("div",{style:{marginBottom:12},children:G?E.jsxs("div",{style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:p?.label?"space-between":"flex-end",backgroundColor:o?.type==="date_time"&&te?V.COLORS.background.base:void 0},children:[E.jsx(re.BodyPrimary,{numberOfLines:1,children:k===P.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(p?.value??"")?p?.label:p?.value:We.truncate(p?.label??"",20)}),R||o?.type==="date_time"&&te?E.jsx(E.Fragment,{}):E.jsx(ke.default,{onClick:()=>{He(),_e(()=>ve),Ce(!0)},width:24,height:24,color:V.COLORS.content.primary})]}):E.jsx(qe.Dropdown,{disabled:R,options:fe,isSearchable:!1,onSelect:D,defaultOptions:p?[{...p,selected:!0}]:[]})}),(p?.value==="custom_text"||p?.value==="custom_link")&&E.jsx(je.Input,{state:R?"disabled":"none",labelText:p?.value==="custom_text"?"Custom text value":p?.value==="custom_link"?"Custom URL value":"",id:`variable-value-${p?.value}-${h}`,value:_,errorMessage:J&&ae?.buttons?.includes(o?.index??-1)?!_||_.trim().length===0?"Required field":p.value==="custom_link"&&(!Ee.test(`https://${_.trim()}`)||_.trim().length===0)?"Enter valid URL":p.value!=="custom_link"&&_.length>30?"Length cannot be more than 30":c==="BUTTONS"&&p.value!=="custom_link"?"Enter valid alpha numeric code":"":"",maxCharLimit:le||(p?.value==="custom_link"?2e3:c==="BUTTONS"?15:30),noKeyDownChange:!0,prefixText:p?.value==="custom_link"?"https://":"",placeholder:o.type==="link"||p.value==="custom_link"?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ie(p.value,e)}}),p?.value==="static_expiry"&&E.jsxs("div",{style:{position:"relative"},children:[(R||Ne)&&E.jsxs(Qe,{onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"},children:[E.jsx(oe,{}),E.jsx(oe,{})]}),E.jsx(Re.CustomDateTime,{placement:"auto",time:_?ne.format(new Date(_),"hh:mm a"):ne.format(new Date,"hh:mm a"),date:_?new Date(_):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ie("static_expiry",e.toISOString())}})]}),p?.value==="static_expiry"&&Pe&&E.jsx("div",{style:{marginTop:8},children:E.jsx(Ue.Alert,{containerStyle:{padding:"4px 8px"},icon:()=>E.jsx(Ve.default,{width:16,height:16,color:V.COLORS.content.secondary}),type:Ie.ALERT_TYPES.NEUTRAL,text:`Please use the same expiration code that you applied when creating
+the code on Shopify`})}),o.type==="link"&&p?.value!=="custom_link"&&!$&&!Le&&k===P.POD.CHATBOT&&E.jsx(Ke.QueryParamsComponent,{isError:ae?.buttons?.includes(o?.index??-1)??!1,params:o.queryParams??[],onChange:e=>{A(o.updatedValue,"link",e)},variableValue:o.updatedValue})]})};exports.Container=pe;exports.default=Xe;
 //# sourceMappingURL=VariableConnector.js.map

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableConnector.js","sources":["../../../../../src/components/template-context-mapper/modalElements/VariableConnector.tsx"],"sourcesContent":["/** CONSTANTS /\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { format } from 'date-fns';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Alert } from '@src/components/alerts/Alert';\nimport { ALERT_TYPES } from '@src/components/alerts/AlertHelper';\nimport { CustomDateTime } from '@src/components/custom-date-time/CustomDateTime';\nimport { Dropdown } from '@src/components/dropdown/Dropdown';\nimport type {\n\tDropdownOption,\n\tSingleOption,\n} from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input/Input';\nimport { truncate } from '@src/components/product-picker-v2/collectionScreen';\nimport { placeHolderNamePattern } from '@src/components/template-preview/constants/regexPatterns';\nimport { isCarouselComponent } from '@src/components/template-preview/helpers/templateMiscHelper';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tButtonPlaceHolderOptions,\n\tCUSTOM_VARIABLE,\n\ttype globalNormalizedPlaceholdersType,\n\ttype QueryParamtype,\n} from '@src/components/template-preview/models/TemplateMeta';\nimport {\n\tWEB_PUSH_COMPONENT_TYPE,\n\ttype WebpushTemplateType,\n\ttype WebpushTemplateVariables,\n} from '@src/components/template-preview/models/WebpushTemplate';\nimport type {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateVariables,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport {\n\tBUTTON_TYPE,\n\tPOD,\n\ttype WhatsAppTemplate,\n\ttype WhatsAppTemplateVariables,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { updateVariables } from '../custom-hooks/useAdditionalVariables';\nimport { getVariableNameForEmailByIndex } from '../utils/getVariableNameEmail';\nimport { ComponentType } from './modal';\nimport { QueryParamsComponent } from './QueryParamsComponent';\n\nexport const Container = styled.div<{\n\tfocused?: boolean;\n\tchannel?: CHANNEL_TYPE;\n}>`\n\t/ surface/$color-background-warning-light /\n\n\tbackground: ${(props) =>\n\t\tprops.focused && props.channel === CHANNEL_TYPE.EMAIL\n\t\t\t? COLORS.background.warning.light\n\t\t\t: 'transparent'};\n\tborder-radius: 4px;\n\tpadding: 8px 10px;\n`;\n\nconst Overlay = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 1000;\n\tcursor: not-allowed;\n`;\nconst OverlayContent = styled.div`\n\theight: 100%;\n\twidth: 48%;\n\tbackground: rgba(0, 0, 0, 0.1);\n`;\n\ntype DropdownType = {\n\tlabel: string;\n\tvalue?: string;\n\toptions: SingleOption[];\n};\n\nconst CUSTOM_LINK: SingleOption = {\n\tvalue: 'custom_link',\n\tlabel: 'Custom URL',\n};\nconst CUSTOM_TEXT: SingleOption = {\n\tvalue: 'custom_text',\n\tlabel: 'Custom text',\n};\nconst STATIC_EXPIRY: SingleOption = {\n\tvalue: 'static_expiry',\n\tlabel: 'Static Expiry',\n};\n\n/* COMPONENT BELOW /\n\nexport interface VariableConnectorProps {\n\tonFocus?: () => void;\n\tvariable: CUSTOM_VARIABLE;\n\tindex: number;\n\tshowVariableModal?: boolean;\n\tsetShowDiscountCheckBox?: any;\n\tbuttonType?: BUTTON_TYPE;\n\tcomponentType?: ComponentType['type'] \| WEB_PUSH_COMPONENT_TYPE;\n\tCTAoptions?: ButtonPlaceHolderOptions[];\n}\n\nconst VariableConnector: React.FC<VariableConnectorProps> = (props) => {\n\tconst {\n\t\tonFocus,\n\t\tvariable,\n\t\tindex,\n\t\tshowVariableModal,\n\t\tsetShowDiscountCheckBox,\n\t\tcomponentType,\n\t\tCTAoptions,\n\t\tbuttonType,\n\t} = props;\n\n\tconst [focused, setFocusState] = useState(false);\n\tconst [enteredVariableValue, setEnteredVariableValue] = useState('');\n\tconst [options, setOptions] = useState<\n\t\tDropdownType[] \| globalNormalizedPlaceholdersType[]\n\t>([]);\n\tconst [selectedOption, setSelectedOption] = useState<SingleOption>();\n\tconst [renderFirstTime, setRenderFirstTime] = useState<boolean>(false);\n\tconst urlRegex =\n\t\t/^https?:\\/\\/(?:www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b(?:[-a-zA-Z0-9()@:%_\\+.~#?&\\/=])$/;\n\n\tconst {\n\t\tvariableList,\n\t\tsetVariableList,\n\t\tsetVariableCallback,\n\t\tsetShowVariablePicker,\n\t\tdevice,\n\t\tchannel,\n\t\tisError,\n\t\toriginalVariableList,\n\t\ttemplate,\n\t\ttemplateSelectionTriggered,\n\t\tsetTemplate,\n\t\tsetDisplayContent,\n\t\tsetOriginalVariableList,\n\t\tglobalNormalizedPlaceholders,\n\t\tenabledCustomText,\n\t\tpod,\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\tisWhatsappCarousel,\n\t\tdisableEditVariable,\n\t\tdisableEditExpiry,\n\t\ttemplateErrorIndexes,\n\t\tmaxCharLimit,\n\t\tdisableDatePicker,\n\t\tshowDiscountCodeExpiryInfo,\n\t\tcardIndex = 1,\n\t} = useTemplateModalContext();\n\n\tuseEffect(() => {\n\t\tif (focused) {\n\t\t\tonFocus?.();\n\t\t}\n\t}, [focused]);\n\n\tuseEffect(() => {\n\t\tupdateNewVariables();\n\t}, [templateSelectionTriggered]);\n\n\tuseEffect(() => {\n\t\trenderVariableConnector();\n\t}, [selectedCarouselIndex]);\n\n\tfunction renderVariableConnector() {\n\t\tconst defaultOptions: DropdownType[] = [];\n\t\tlet allOptions: DropdownType[] \| globalNormalizedPlaceholdersType[] = [];\n\t\tif (channel === CHANNEL_TYPE.MESSAGE && !enabledCustomText) {\n\t\t\tconst globalOptions = globalNormalizedPlaceholders ?? [];\n\t\t\tsetOptions([\n\t\t\t\t{\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_TEXT, CUSTOM_LINK],\n\t\t\t\t},\n\t\t\t\t...globalOptions,\n\t\t\t]);\n\n\t\t\tallOptions = [\n\t\t\t\t{\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_TEXT, CUSTOM_LINK],\n\t\t\t\t},\n\t\t\t\t...globalOptions,\n\t\t\t];\n\t\t} else {\n\t\t\tif (variable?.type === 'link') {\n\t\t\t\tdefaultOptions.push({\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_LINK, CUSTOM_TEXT],\n\t\t\t\t});\n\t\t\t\tsetSelectedOption(CUSTOM_LINK);\n\t\t\t} else if (variable?.type === 'date_time') {\n\t\t\t\tdefaultOptions.push({\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_LINK, CUSTOM_TEXT],\n\t\t\t\t});\n\t\t\t\tsetSelectedOption(STATIC_EXPIRY);\n\t\t\t} else {\n\t\t\t\tdefaultOptions.push({\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_LINK, CUSTOM_TEXT, STATIC_EXPIRY],\n\t\t\t\t});\n\t\t\t\tsetSelectedOption(CUSTOM_TEXT);\n\t\t\t}\n\t\t\tconst globalOptions = globalNormalizedPlaceholders ?? [];\n\n\t\t\tsetOptions([\n\t\t\t\t...defaultOptions,\n\t\t\t\t...globalOptions.map((globalOption) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...globalOption,\n\t\t\t\t\t\tlabel: StringUtils.toCapitilize(\n\t\t\t\t\t\t\tglobalOption.label?.replace(/([A-Z])/g, ' $1')?.toLowerCase(),\n\t\t\t\t\t\t),\n\t\t\t\t\t} as DropdownType;\n\t\t\t\t}),\n\t\t\t]);\n\t\t\tallOptions = [...defaultOptions, ...globalOptions];\n\t\t}\n\n\t\tif (\n\t\t\tchannel === CHANNEL_TYPE.WHATSAPP \|\|\n\t\t\tchannel === CHANNEL_TYPE.EMAIL \|\|\n\t\t\tchannel === CHANNEL_TYPE.MESSAGE \|\|\n\t\t\tchannel === CHANNEL_TYPE.WEBPUSH \|\|\n\t\t\tchannel === CHANNEL_TYPE.RCS\n\t\t) {\n\t\t\tif (variable.updatedValue) {\n\t\t\t\tif (\n\t\t\t\t\t(placeHolderNamePattern.test(variable.updatedValue) &&\n\t\t\t\t\t\t(channel === CHANNEL_TYPE.WHATSAPP \|\|\n\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS)) \|\|\n\t\t\t\t\t(variable.updatedValue.startsWith('{{') &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE.RCS)\n\t\t\t\t) {\n\t\t\t\t\tconst preSelectedOption = checkVariableOptions(\n\t\t\t\t\t\tvariable,\n\t\t\t\t\t\tallOptions,\n\t\t\t\t\t\tchannel,\n\t\t\t\t\t);\n\t\t\t\t\tif (preSelectedOption.value) {\n\t\t\t\t\t\tsetSelectedOption(preSelectedOption);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (variable.type === 'date_time') {\n\t\t\t\t\t\tsetSelectedOption(STATIC_EXPIRY);\n\t\t\t\t\t\tsetEnteredVariableValue(variable.updatedValue);\n\t\t\t\t\t\tupdateEditableVarForSelectedComponentBody(\n\t\t\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\t\t\tvariable.updatedValue,\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if (variable.updatedValue?.startsWith('https')) {\n\t\t\t\t\t\tsetSelectedOption(CUSTOM_LINK);\n\t\t\t\t\t\tsetEnteredVariableValue(variable.updatedValue.split('https://')[1]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetSelectedOption(CUSTOM_TEXT);\n\t\t\t\t\t\tsetEnteredVariableValue(variable.updatedValue);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction checkVariableOptions(\n\t\tvariable: CUSTOM_VARIABLE,\n\t\tallOptions: DropdownType[] \| globalNormalizedPlaceholdersType[],\n\t\tchannel: CHANNEL_TYPE,\n\t): SingleOption {\n\t\tlet preSelectedOption: SingleOption = { label: '', value: '' };\n\t\tconst variableUpdatedValue =\n\t\t\tchannel === (CHANNEL_TYPE.WHATSAPP \|\| CHANNEL_TYPE.RCS)\n\t\t\t\t? variable.updatedValue.replace('[[', '').replace(']]', '')\n\t\t\t\t: variable.updatedValue.replace('{{', '').replace('}}', '');\n\n\t\tif (showVariableModal) {\n\t\t\tlet variableLabel = variable.updatedValue;\n\n\t\t\t// For Backward Compatibility - Previously dropdown was used and this code is used to have a consistent display name when you select variable and already stored values.\n\t\t\tif (pod === POD.CHATBOT && componentType === 'BUTTONS') {\n\t\t\t\tconst isVariableInCtaOptions = CTAoptions?.filter(\n\t\t\t\t\t(opt) => opt.placeHolder === variable.updatedValue,\n\t\t\t\t);\n\n\t\t\t\tif (isVariableInCtaOptions && isVariableInCtaOptions.length > 0) {\n\t\t\t\t\tvariableLabel = isVariableInCtaOptions[0].label;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreSelectedOption = {\n\t\t\t\tlabel: variableLabel\n\t\t\t\t\t? variableLabel\n\t\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t\t.trim()\n\t\t\t\t\t\t\t.replace('.', ' ')\n\t\t\t\t\t: '',\n\t\t\t\tvalue: variable.updatedValue ?? '',\n\t\t\t};\n\t\t} else {\n\t\t\tallOptions.map((optionCategory) => {\n\t\t\t\toptionCategory.options.map((op) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\top.value?.replace('{{', '').replace('}}', '').trim() ===\n\t\t\t\t\t\tvariableUpdatedValue.trim()\n\t\t\t\t\t) {\n\t\t\t\t\t\tpreSelectedOption = op;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t\treturn preSelectedOption;\n\t}\n\n\tfunction handleOptionSelect(\n\t\toption:\n\t\t\t\| (SingleOption & { bikPlaceholderType?: 'url' \| 'string' })\n\t\t\t\| SingleOption[],\n\t\tselectedIndex?: number,\n\t) {\n\t\tconst singleOption = option as SingleOption & {\n\t\t\tbikPlaceholderType?: 'url' \| 'string';\n\t\t};\n\t\tsetEnteredVariableValue('');\n\t\tsetSelectedOption(singleOption);\n\n\t\tif (channel === CHANNEL_TYPE.WHATSAPP \|\| channel === CHANNEL_TYPE.RCS) {\n\t\t\tif (\n\t\t\t\tsingleOption.value !== 'custom_text' &&\n\t\t\t\tsingleOption.value !== 'custom_link' &&\n\t\t\t\tsingleOption.value !== 'static_expiry'\n\t\t\t) {\n\t\t\t\tupdateVariableList(singleOption.value ?? '', 'string');\n\t\t\t\tupdateEditableVarForSelectedComponentBody?.(\n\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\tsingleOption.value,\n\t\t\t\t\ttrue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tupdateEditableVarForSelectedComponentBody?.(\n\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\t'',\n\t\t\t\t\ttrue,\n\t\t\t\t\tsingleOption.value,\n\t\t\t\t);\n\t\t\t\tupdateVariableList(\n\t\t\t\t\t'',\n\t\t\t\t\tsingleOption.bikPlaceholderType === 'url' ? 'link' : 'string',\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\tif (\n\t\t\t\tsingleOption.value !== 'custom_text' &&\n\t\t\t\tsingleOption.value !== 'custom_link'\n\t\t\t) {\n\t\t\t\tupdateVariableList(\n\t\t\t\t\tsingleOption.value!,\n\t\t\t\t\tsingleOption.bikPlaceholderType === 'url' ? 'link' : 'string',\n\t\t\t\t);\n\t\t\t\tif (channel == CHANNEL_TYPE.WEBPUSH) {\n\t\t\t\t\tupdateWebpushBroadcastConfig?.(\n\t\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\t\tsingleOption.value,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetEnteredVariableValue('');\n\t\t\t\tupdateVariableList('', singleOption.value);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleCustomInputUpdate(\n\t\ttype: 'custom_text' \| 'custom_link' \| 'static_expiry',\n\t\tvalue: string,\n\t) {\n\t\tsetEnteredVariableValue(value);\n\t\tconst inputValue =\n\t\t\tselectedOption?.value === 'custom_link' && value\n\t\t\t\t? value.includes('https')\n\t\t\t\t\t? value\n\t\t\t\t\t: `https://${value}`\n\t\t\t\t: value;\n\n\t\tconst variableType = type === 'static_expiry' ? 'string' : type;\n\t\tupdateVariableList(inputValue, variableType);\n\t\tif (channel === CHANNEL_TYPE.WHATSAPP \|\| channel === CHANNEL_TYPE.RCS) {\n\t\t\tupdateEditableVarForSelectedComponentBody?.(\n\t\t\t\tvariable.index ?? 0,\n\t\t\t\tinputValue,\n\t\t\t\ttype === 'custom_link' \|\|\n\t\t\t\t\t(pod === POD.CHATBOT && type === 'custom_text'),\n\t\t\t\ttype,\n\t\t\t);\n\t\t}\n\t\tif (channel === CHANNEL_TYPE.WEBPUSH) {\n\t\t\tupdateWebpushBroadcastConfig?.(variable.index ?? 0, inputValue);\n\t\t}\n\t}\n\n\tfunction updateVariableList(\n\t\tupdateValue: string,\n\t\ttype: 'link' \| 'string' \| 'custom_text' \| 'custom_link' \| 'date_time',\n\t\tqueryParams?: QueryParamtype[],\n\t) {\n\t\tconst normalizedType =\n\t\t\ttype === 'custom_link'\n\t\t\t\t? 'link'\n\t\t\t\t: type === 'custom_text'\n\t\t\t\t? 'string'\n\t\t\t\t: type;\n\t\tif (\n\t\t\tchannel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\tchannel !== CHANNEL_TYPE.WEBPUSH &&\n\t\t\tchannel !== CHANNEL_TYPE.RCS\n\t\t) {\n\t\t\tconst variableId = getVariableNameForEmailByIndex(index + 1);\n\t\t\tconst iframe = document?.getElementById(\n\t\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop',\n\t\t\t) as HTMLIFrameElement;\n\n\t\t\tconst element =\n\t\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t\t? iframe?.contentWindow?.document.getElementById(variableId)\n\t\t\t\t\t: document.getElementById(variableId);\n\t\t\tif (element) {\n\t\t\t\tif ((type === 'custom_text' \|\| type === 'custom_link') && !updateValue)\n\t\t\t\t\telement.textContent = variable.variableName;\n\t\t\t\telse element.textContent = updateValue;\n\t\t\t}\n\n\t\t\tconst updatedVariables = (originalVariableList as CUSTOM_VARIABLE[]).map(\n\t\t\t\t(currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? { ...currVar, type: normalizedType, updatedValue: updateValue }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t},\n\t\t\t);\n\t\t\tsetOriginalVariableList?.(updatedVariables);\n\t\t}\n\t\tif (channel === CHANNEL_TYPE.WEBPUSH) {\n\t\t\tconst variableList = originalVariableList as WebpushTemplateVariables;\n\t\t\tconst updateVariableListLocal = (list: any[]) =>\n\t\t\t\tlist?.map((currVar, ind) =>\n\t\t\t\t\tind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar,\n\t\t\t\t);\n\t\t\tconst updatedLists = {\n\t\t\t\tBODY:\n\t\t\t\t\tcomponentType === 'BODY'\n\t\t\t\t\t\t? updateVariableListLocal(variableList.body)\n\t\t\t\t\t\t: variableList.body,\n\t\t\t\tTITLE:\n\t\t\t\t\tcomponentType === WEB_PUSH_COMPONENT_TYPE.TITLE.toUpperCase()\n\t\t\t\t\t\t? updateVariableListLocal(variableList.title)\n\t\t\t\t\t\t: variableList.title,\n\t\t\t};\n\t\t\tsetOriginalVariableList?.((prevState) => ({\n\t\t\t\t...prevState,\n\t\t\t\ttitle: updatedLists.TITLE,\n\t\t\t\tbody: updatedLists.BODY,\n\t\t\t\tbuttons: variableList.buttons,\n\t\t\t}));\n\t\t}\n\n\t\tif (channel === CHANNEL_TYPE.WHATSAPP \|\| channel === CHANNEL_TYPE.RCS) {\n\t\t\tif (\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex > -1 &&\n\t\t\t\tisProductCarouselType\n\t\t\t) {\n\t\t\t\tconst cardBodyVariableList = {\n\t\t\t\t\t...(originalVariableList as WhatsAppCarouselTemplateVariables),\n\t\t\t\t}.cards.map((card, i) => {\n\t\t\t\t\tif (componentType === 'BODY') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\tbody: card.body?.map((body, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t...body,\n\t\t\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn body;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'TITLE') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\ttitle: card['title']?.map((title, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t...title,\n\t\t\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn title;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'BUTTONS') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\tbuttons: card.buttons?.map((currVar, ind) => {\n\t\t\t\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\t\t\t\tbuttonVariable:\n\t\t\t\t\t\t\t\t\t\t\t\ttype === 'custom_link'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '((customPlaceholderName))'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: updateValue,\n\t\t\t\t\t\t\t\t\t\t\texample:\n\t\t\t\t\t\t\t\t\t\t\t\tcurrVar.type === 'COPY_CODE'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? updateValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t: [updateValue],\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t: currVar;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn card;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tsetOriginalVariableList?.((prevState) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\tcards: cardBodyVariableList as any,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst variableList =\n\t\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t\t ]\n\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables);\n\n\t\t\tlet bodyVariableList = variableList.body;\n\t\t\tlet titleVariableList = variableList.title;\n\t\t\tlet headerVariableList = variableList.header;\n\t\t\tlet buttonVariableList = variableList.buttons;\n\n\t\t\tif (componentType === 'BODY') {\n\t\t\t\tbodyVariableList = variableList.body?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t} else if (componentType === 'TITLE') {\n\t\t\t\ttitleVariableList = variableList?.['title']?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t} else if (componentType === 'HEADER') {\n\t\t\t\theaderVariableList = variableList.header?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t} else if (componentType === 'BUTTONS') {\n\t\t\t\tbuttonVariableList = variableList.buttons?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\tbuttonVariable:\n\t\t\t\t\t\t\t\t\ttype === 'custom_link'\n\t\t\t\t\t\t\t\t\t\t? '((customPlaceholderName))'\n\t\t\t\t\t\t\t\t\t\t: updateValue,\n\t\t\t\t\t\t\t\texample:\n\t\t\t\t\t\t\t\t\tcurrVar.type === 'COPY_CODE' ? updateValue : [updateValue],\n\t\t\t\t\t\t\t\tqueryParams: queryParams ?? [],\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\t\tconst cardsCopy = cloneDeep(\n\t\t\t\t\t(originalVariableList as WhatsAppCarouselTemplateVariables).cards,\n\t\t\t\t);\n\t\t\t\tcardsCopy[selectedCarouselIndex] = {\n\t\t\t\t\theader: headerVariableList,\n\t\t\t\t\tbody: bodyVariableList,\n\t\t\t\t\tbuttons: buttonVariableList,\n\t\t\t\t\ttitle: titleVariableList,\n\t\t\t\t};\n\t\t\t\tsetOriginalVariableList?.((prevState) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\tcards: cardsCopy,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tsetOriginalVariableList?.((prevState) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\theader: headerVariableList,\n\t\t\t\t\t\tbody: bodyVariableList,\n\t\t\t\t\t\tbuttons: buttonVariableList,\n\t\t\t\t\t\ttitle: titleVariableList,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (device && selectedOption && enteredVariableValue) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst inputValue =\n\t\t\t\t\tselectedOption?.value === 'custom_link' && enteredVariableValue\n\t\t\t\t\t\t? enteredVariableValue.includes('https')\n\t\t\t\t\t\t\t? enteredVariableValue\n\t\t\t\t\t\t\t: `https://${enteredVariableValue}`\n\t\t\t\t\t\t: enteredVariableValue;\n\t\t\t\tupdateVariableList(\n\t\t\t\t\tinputValue,\n\t\t\t\t\tselectedOption.value as 'custom_text' \| 'custom_link',\n\t\t\t\t);\n\t\t\t}, 100);\n\t\t}\n\t}, [device]);\n\n\tuseEffect(() => {\n\t\tif (!renderFirstTime && selectedOption && variable.updatedValue) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst inputValue =\n\t\t\t\t\tselectedOption?.value === 'custom_link' && variable.updatedValue\n\t\t\t\t\t\t? variable.updatedValue.includes('https')\n\t\t\t\t\t\t\t? variable.updatedValue\n\t\t\t\t\t\t\t: `https://${variable.updatedValue}`\n\t\t\t\t\t\t: variable.updatedValue;\n\t\t\t\tupdateVariableList(\n\t\t\t\t\tinputValue,\n\t\t\t\t\tselectedOption.value as 'custom_text' \| 'custom_link',\n\t\t\t\t);\n\t\t\t\tsetRenderFirstTime(true);\n\t\t\t}, 100);\n\t\t}\n\t}, [selectedOption]);\n\n\tfunction updateNewVariables() {\n\t\tconst iframeId =\n\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop';\n\t\tconst iframe = document.getElementById(iframeId) as HTMLIFrameElement;\n\n\t\tconst updatedHtmlContent =\n\t\t\t(iframe?.contentWindow?.document?.body?.innerHTML ?? '') +\n\t\t\tiframe?.contentWindow?.document.head.innerHTML;\n\t\tif (channel === CHANNEL_TYPE.EMAIL) {\n\t\t\tsetDisplayContent?.(updatedHtmlContent);\n\t\t}\n\t}\n\n\tfunction updateEditableVarForSelectedComponentBody(\n\t\tindex: number,\n\t\tnewValue: string,\n\t\tupdateMapping?: boolean,\n\t\ttype?: 'custom_text' \| 'custom_link' \| 'static_expiry',\n\t) {\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\tisProductCarouselType\n\t\t) {\n\t\t\tconst newComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.components.map((component) => {\n\t\t\t\tif (isCarouselComponent(component.type)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...component,\n\t\t\t\t\t\tcards: component.cards?.map((cardComponent) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...cardComponent,\n\t\t\t\t\t\t\t\tcomponents: cardComponent.components.map((card) => {\n\t\t\t\t\t\t\t\t\tif (card.type === 'BODY' && componentType === 'BODY') {\n\t\t\t\t\t\t\t\t\t\tif (card.example?.body_text?.[0]) {\n\t\t\t\t\t\t\t\t\t\t\tconst bodyVals = [\n\t\t\t\t\t\t\t\t\t\t\t\t...(card.example?.body_text?.[0] ?? []),\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\t\t\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t\t\t\t\t\t\t...card.example,\n\t\t\t\t\t\t\t\t\t\t\t\tbody_text: [bodyVals],\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif (card.type === 'TITLE' && componentType === 'TITLE') {\n\t\t\t\t\t\t\t\t\t\tif (card.example?.['title_text']?.[0]) {\n\t\t\t\t\t\t\t\t\t\t\tconst bodyVals = [\n\t\t\t\t\t\t\t\t\t\t\t\t...(card.example?.['title_text']?.[0] ?? []),\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\t\t\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t\t\t\t\t\t\t...card.example,\n\t\t\t\t\t\t\t\t\t\t\t\ttitle_text: [bodyVals],\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tcard.type === 'BUTTONS' &&\n\t\t\t\t\t\t\t\t\t\tcomponentType === 'BUTTONS'\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tconst updateComponentButtons = card.buttons?.map(\n\t\t\t\t\t\t\t\t\t\t\t(button, i) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...button,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\texample: [newValue],\n\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn button;\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\tif (updateComponentButtons) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\t\tbuttons: updateComponentButtons,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}),\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn component;\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\tif (updateMapping) {\n\t\t\t\tconst mappingComponent = {\n\t\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t\t}.mapping.cards?.map((component, indexComp) => {\n\t\t\t\t\tif (componentType === 'BODY') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...component,\n\t\t\t\t\t\t\tbody: component.body?.map((body, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn body;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'TITLE') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...component,\n\t\t\t\t\t\t\ttitle: component?.['title']?.map((body, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn body;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'BUTTONS' && component?.buttons) {\n\t\t\t\t\t\tlet urlMappingCounter = -1;\n\t\t\t\t\t\tlet urlMappingIndex = -1;\n\n\t\t\t\t\t\t(template as WhatsAppCarouselTemplate).components[\n\t\t\t\t\t\t\tcardIndex\n\t\t\t\t\t\t].cards?.[indexComp].components.forEach((comp) => {\n\t\t\t\t\t\t\tif (comp.type === 'BUTTONS') {\n\t\t\t\t\t\t\t\tcomp.buttons?.forEach((button, i) => {\n\t\t\t\t\t\t\t\t\tif (button.type === 'URL') {\n\t\t\t\t\t\t\t\t\t\turlMappingCounter++;\n\n\t\t\t\t\t\t\t\t\t\tif (i === index && button.type == 'URL') {\n\t\t\t\t\t\t\t\t\t\t\turlMappingIndex = urlMappingCounter;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...component,\n\t\t\t\t\t\t\tbuttons: component.buttons?.map((button, i) => {\n\t\t\t\t\t\t\t\tif (i === urlMappingIndex) {\n\t\t\t\t\t\t\t\t\treturn type === 'custom_link'\n\t\t\t\t\t\t\t\t\t\t? `((customPlaceholderName))`\n\t\t\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn button;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn component;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\ttemplateCopy.mapping.cards = mappingComponent as any;\n\t\t\t}\n\t\t\ttemplateCopy.components = newComponent as any;\n\t\t\tsetTemplate?.(templateCopy);\n\t\t\treturn;\n\t\t}\n\t\tconst currentTemplate =\n\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? {\n\t\t\t\t\t\tcomponents: ({ ...template } as WhatsAppCarouselTemplate)\n\t\t\t\t\t\t\t.components[cardIndex].cards?.[selectedCarouselIndex]\n\t\t\t\t\t\t\t.components as any,\n\t\t\t\t\t\tmapping: ({ ...template } as WhatsAppCarouselTemplate).mapping\n\t\t\t\t\t\t\t.cards?.[selectedCarouselIndex],\n\t\t\t\t }\n\t\t\t\t: ({ ...template } as WhatsAppTemplate);\n\n\t\tconst updateComponents = currentTemplate?.components?.map((component) => {\n\t\t\tconst updateComponent = { ...component };\n\n\t\t\tif (component.type === 'BODY' && componentType === 'BODY') {\n\t\t\t\tif (\n\t\t\t\t\tArray.isArray(component.example?.body_text) \|\|\n\t\t\t\t\tcomponent.example?.body_text?.[0]\n\t\t\t\t) {\n\t\t\t\t\tconst bodyVals = [...(updateComponent.example?.body_text?.[0] ?? [])];\n\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\tbody_text: [bodyVals],\n\t\t\t\t\t};\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (component.type === 'TITLE' && componentType === 'TITLE') {\n\t\t\t\tif (\n\t\t\t\t\tArray.isArray(component.example?.title_text) \|\|\n\t\t\t\t\tcomponent.example?.title_text?.[0]\n\t\t\t\t) {\n\t\t\t\t\tconst bodyVals = [\n\t\t\t\t\t\t...(updateComponent.example?.title_text?.[0] ?? []),\n\t\t\t\t\t];\n\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\ttitle_text: [bodyVals],\n\t\t\t\t\t};\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} else if (component.type === 'HEADER' && componentType === 'HEADER') {\n\t\t\t\tif (component.example?.header_text) {\n\t\t\t\t\tconst headerVals = [...(updateComponent.example?.header_text ?? [])];\n\t\t\t\t\theaderVals[index] = newValue\n\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\theader_text: headerVals,\n\t\t\t\t\t};\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} else if (component.type === 'BUTTONS' && componentType === 'BUTTONS') {\n\t\t\t\tconst updateComponentButtons = component.buttons?.map((button, i) => {\n\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...button,\n\t\t\t\t\t\t\texample: button.type === 'COPY_CODE' ? newValue : [newValue],\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn button;\n\t\t\t\t});\n\n\t\t\t\tif (updateComponentButtons) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\tbuttons: updateComponentButtons,\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn updateComponent;\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tcomponent.type === 'limited_time_offer' &&\n\t\t\t\tcomponentType === 'limited_time_offer'\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\t...updateComponent,\n\t\t\t\t\texample: {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\tlimited_time_offer: newValue,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn component;\n\t\t});\n\n\t\tcurrentTemplate.components = updateComponents;\n\n\t\tif (updateMapping) {\n\t\t\tif (componentType === 'BODY' && currentTemplate?.mapping?.body) {\n\t\t\t\tcurrentTemplate.mapping = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\tbody: currentTemplate.mapping?.body?.map((body, i) => {\n\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn body;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t} else if (\n\t\t\t\tcomponentType === 'TITLE' &&\n\t\t\t\tcurrentTemplate?.mapping?.['title']\n\t\t\t) {\n\t\t\t\t(currentTemplate.mapping as {}) = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\ttitle: currentTemplate.mapping?.['title']?.map((body, i) => {\n\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn body;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t} else if (\n\t\t\t\tcomponentType === 'HEADER' &&\n\t\t\t\tcurrentTemplate?.mapping?.header\n\t\t\t) {\n\t\t\t\tcurrentTemplate.mapping = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\theader: currentTemplate.mapping.header.map((header, i) => {\n\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t? `((editableVariable${i + 20}))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn header;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t} else if (\n\t\t\t\tcomponentType === 'BUTTONS' &&\n\t\t\t\tcurrentTemplate?.mapping?.buttons\n\t\t\t) {\n\t\t\t\t// Mapping Object only has URL buttons.\n\t\t\t\t// Component object has all buttons\n\t\t\t\t// When updating component, this updaets corresponding mapping index too.\n\n\t\t\t\tlet urlMappingCounter = -1;\n\t\t\t\tlet urlMappingIndex = -1;\n\n\t\t\t\tupdateComponents.forEach((component) => {\n\t\t\t\t\tif (component.type === 'BUTTONS') {\n\t\t\t\t\t\tcomponent.buttons?.forEach((button, i) => {\n\t\t\t\t\t\t\tif (button.type === 'URL') {\n\t\t\t\t\t\t\t\turlMappingCounter++;\n\n\t\t\t\t\t\t\t\tif (i === index && button.type == 'URL') {\n\t\t\t\t\t\t\t\t\turlMappingIndex = urlMappingCounter;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tcurrentTemplate.mapping = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\tbuttons: currentTemplate.mapping.buttons.map((button, i) => {\n\t\t\t\t\t\tif (i === urlMappingIndex) {\n\t\t\t\t\t\t\treturn type === 'custom_link'\n\t\t\t\t\t\t\t\t? `((customPlaceholderName))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn button;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\ttemplate\n\t\t) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = currentTemplate.components;\n\t\t\ttemplateCopy.mapping.cards![selectedCarouselIndex] =\n\t\t\t\tcurrentTemplate.mapping!;\n\t\t\tsetTemplate?.(templateCopy);\n\t\t} else {\n\t\t\tsetTemplate?.({ ...currentTemplate } as WhatsAppTemplate);\n\t\t}\n\t}\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetShowDiscountCheckBox?.(false);\n\t\tif (variable.actualValue === '{{custom.url}}') {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName,\n\t\t\t\tselected: true,\n\t\t\t\tvalue: 'custom_link',\n\t\t\t});\n\t\t} else if (variable.actualValue == '{{custom.text}}') {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName,\n\t\t\t\tselected: true,\n\t\t\t\tvalue: 'custom_text',\n\t\t\t});\n\t\t} else if (variable.actualValue == '{{static.expiry}}') {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName,\n\t\t\t\tselected: true,\n\t\t\t\tvalue: 'static_expiry',\n\t\t\t});\n\t\t} else {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.trim()\n\t\t\t\t\t.replace('.', ' '),\n\t\t\t\tselected: true,\n\t\t\t\tvalue: variable.actualValue,\n\t\t\t\tbikPlaceholderType: 'string',\n\t\t\t});\n\t\t}\n\t};\n\n\tconst handleCustomVariableAddition = () => {\n\t\tlet updatedVariableListWithCustomVariables: VariableListInterfaceV2[] =\n\t\t\tArray.isArray(variableList) ? [...variableList] : [];\n\n\t\t// Function to add custom variables if they do not already exist\n\t\t// This is to ensure that custom variables are added only once\n\t\t// and not duplicated in the variable list.\n\t\tconst addIfNotExists = (\n\t\t\tcategoryDisplayName: string,\n\t\t\tvariableDisplayName: string,\n\t\t\tvariableValue: string,\n\t\t) => {\n\t\t\tconst updated = updateVariables({\n\t\t\t\tvariableList: updatedVariableListWithCustomVariables,\n\t\t\t\tcategoryDisplayName,\n\t\t\t\tvariableDisplayName,\n\t\t\t\tvariableValue,\n\t\t\t});\n\t\t\tif (Array.isArray(updated)) {\n\t\t\t\tupdatedVariableListWithCustomVariables = updated;\n\t\t\t}\n\t\t};\n\n\t\tif (\n\t\t\tpod === POD.CHATBOT &&\n\t\t\tbuttonType !== BUTTON_TYPE.URL &&\n\t\t\tcomponentType !== 'limited_time_offer'\n\t\t) {\n\t\t\taddIfNotExists('Custom Variables', 'Custom Text', '{{custom.text}}');\n\t\t}\n\n\t\tif (buttonType === BUTTON_TYPE.URL && pod === POD.CHATBOT) {\n\t\t\taddIfNotExists('Custom Variables', 'Custom URL', '{{custom.url}}');\n\t\t} else if (componentType === 'limited_time_offer') {\n\t\t\taddIfNotExists('Static Variables', 'Static Expiry', '{{static.expiry}}');\n\t\t} else if (buttonType === BUTTON_TYPE.COPY_CODE) {\n\t\t\taddIfNotExists('Custom Variables', 'Custom Text', '{{custom.text}}');\n\t\t}\n\n\t\tsetVariableList(updatedVariableListWithCustomVariables);\n\t};\n\n\tfunction updateWebpushBroadcastConfig(index: number, newValue: string) {\n\t\tconst currentTemplate = cloneDeep(template) as WebpushTemplateType;\n\t\tconst configType = componentType!.toLocaleLowerCase();\n\t\tif (currentTemplate.webpushBroadcastConfig?.[configType]) {\n\t\t\tcurrentTemplate.webpushBroadcastConfig[configType]![index] = newValue;\n\t\t}\n\t\tsetTemplate?.({ ...currentTemplate } as WebpushTemplateType);\n\t}\n\n\treturn (\n\t\t<Container\n\t\t\tchannel={channel}\n\t\t\tfocused={focused}\n\t\t\tonMouseEnter={() => setFocusState(true)}\n\t\t\tonMouseLeave={() => setFocusState(false)}\n\t\t>\n\t\t\t<div style={{ marginBottom: 8 }}>\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tisError && !selectedOption\n\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{variable.variableName?.replace('{{', '').replace('}}', '')}{' '}\n\t\t\t\t\t{variable?.type === 'link' ? 'link' : 'variable'}\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\t\t\t<div style={{ marginBottom: 12 }}>\n\t\t\t\t{showVariableModal ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tborder: '#E0E0E0 1px solid',\n\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\tpadding: 10,\n\t\t\t\t\t\t\tjustifyContent: selectedOption?.label\n\t\t\t\t\t\t\t\t? 'space-between'\n\t\t\t\t\t\t\t\t: 'flex-end',\n\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\tvariable?.type === 'date_time' && disableEditExpiry\n\t\t\t\t\t\t\t\t\t? COLORS.background.base\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyPrimary numberOfLines={1}>\n\t\t\t\t\t\t\t{pod === POD.CHATBOT\n\t\t\t\t\t\t\t\t? ['static_expiry', 'custom_text', 'custom_link'].includes(\n\t\t\t\t\t\t\t\t\t\tselectedOption?.value ?? '',\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t\t\t: selectedOption?.value\n\t\t\t\t\t\t\t\t: truncate(selectedOption?.label ?? '', 20, true)}\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t{disableEditVariable \|\|\n\t\t\t\t\t\t(variable?.type === 'date_time' && disableEditExpiry) ? (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\thandleCustomVariableAddition();\n\t\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tdisabled={disableEditVariable}\n\t\t\t\t\t\toptions={options}\n\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\tonSelect={\n\t\t\t\t\t\t\thandleOptionSelect as (\n\t\t\t\t\t\t\t\toption: DropdownOption \| DropdownOption[],\n\t\t\t\t\t\t\t) => void\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdefaultOptions={\n\t\t\t\t\t\t\tselectedOption\n\t\t\t\t\t\t\t\t? [{ ...selectedOption, selected: true } as DropdownOption]\n\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{(selectedOption?.value === 'custom_text' \|\|\n\t\t\t\tselectedOption?.value === 'custom_link') && (\n\t\t\t\t<Input\n\t\t\t\t\tstate={disableEditVariable ? 'disabled' : 'none'}\n\t\t\t\t\tlabelText={\n\t\t\t\t\t\tselectedOption?.value === 'custom_text'\n\t\t\t\t\t\t\t? 'Custom text value'\n\t\t\t\t\t\t\t: selectedOption?.value === 'custom_link'\n\t\t\t\t\t\t\t? 'Custom URL value'\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tid={`variable-value-${selectedOption?.value}-${index}`}\n\t\t\t\t\tvalue={enteredVariableValue}\n\t\t\t\t\terrorMessage={\n\t\t\t\t\t\tisError &&\n\t\t\t\t\t\ttemplateErrorIndexes?.buttons?.includes(variable?.index ?? -1)\n\t\t\t\t\t\t\t? !enteredVariableValue \|\|\n\t\t\t\t\t\t\t enteredVariableValue.trim().length === 0\n\t\t\t\t\t\t\t\t? 'Required field'\n\t\t\t\t\t\t\t\t: selectedOption.value === 'custom_link' &&\n\t\t\t\t\t\t\t\t (!urlRegex.test(`https://${enteredVariableValue.trim()}`) \|\|\n\t\t\t\t\t\t\t\t\t\tenteredVariableValue.trim().length === 0)\n\t\t\t\t\t\t\t\t? 'Enter valid URL'\n\t\t\t\t\t\t\t\t: selectedOption.value !== 'custom_link' &&\n\t\t\t\t\t\t\t\t enteredVariableValue.length > 30\n\t\t\t\t\t\t\t\t? 'Length cannot be more than 30'\n\t\t\t\t\t\t\t\t: componentType === 'BUTTONS' &&\n\t\t\t\t\t\t\t\t selectedOption.value !== 'custom_link'\n\t\t\t\t\t\t\t\t? 'Enter valid alpha numeric code'\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tmaxCharLimit={\n\t\t\t\t\t\tmaxCharLimit\n\t\t\t\t\t\t\t? maxCharLimit\n\t\t\t\t\t\t\t: selectedOption?.value === 'custom_link'\n\t\t\t\t\t\t\t? 2000\n\t\t\t\t\t\t\t: componentType === 'BUTTONS'\n\t\t\t\t\t\t\t? 15\n\t\t\t\t\t\t\t: 30\n\t\t\t\t\t}\n\t\t\t\t\tnoKeyDownChange={true}\n\t\t\t\t\tprefixText={selectedOption?.value === 'custom_link' ? 'https://' : ''}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tvariable.type === 'link' \|\| selectedOption.value === 'custom_link'\n\t\t\t\t\t\t\t? 'Enter custom URL here'\n\t\t\t\t\t\t\t: 'Enter custom text here'\n\t\t\t\t\t}\n\t\t\t\t\tonChangeText={(enteredVariableName) => {\n\t\t\t\t\t\thandleCustomInputUpdate(\n\t\t\t\t\t\t\tselectedOption.value as 'custom_text' \| 'custom_link',\n\t\t\t\t\t\t\tenteredVariableName,\n\t\t\t\t\t\t);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{/* When static expiry is selected, Custom date time can be chosen.\n\t\t\tPoints to be noted.\n\t\t\t1. If there is no date Time chosen, current date and time is displayed.\n\t\t\t2. Custom date time is converted to ISO string and parsed from ISO string if there was a previous value */}\n\t\t\t{selectedOption?.value === 'static_expiry' && (\n\t\t\t\t<div style={{ position: 'relative' }}>\n\t\t\t\t\t{(disableEditVariable \|\| disableDatePicker) && (\n\t\t\t\t\t\t<Overlay\n\t\t\t\t\t\t\tonClick={(e) => e.preventDefault()}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<OverlayContent />\n\t\t\t\t\t\t\t<OverlayContent />\n\t\t\t\t\t\t</Overlay>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<CustomDateTime\n\t\t\t\t\t\tplacement={'auto'}\n\t\t\t\t\t\ttime={\n\t\t\t\t\t\t\tenteredVariableValue\n\t\t\t\t\t\t\t\t? format(new Date(enteredVariableValue), 'hh:mm a')\n\t\t\t\t\t\t\t\t: format(new Date(), 'hh:mm a')\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdate={\n\t\t\t\t\t\t\tenteredVariableValue ? new Date(enteredVariableValue) : new Date()\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminDate={new Date()}\n\t\t\t\t\t\terror={''}\n\t\t\t\t\t\tsetError={() => {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={(date: Date): void => {\n\t\t\t\t\t\t\thandleCustomInputUpdate('static_expiry', date.toISOString());\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{selectedOption?.value === 'static_expiry' &&\n\t\t\t\tshowDiscountCodeExpiryInfo && (\n\t\t\t\t\t<div style={{ marginTop: 8 }}>\n\t\t\t\t\t\t<Alert\n\t\t\t\t\t\t\tcontainerStyle={{ padding: '4px 8px' }}\n\t\t\t\t\t\t\ticon={() => (\n\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\ttype={ALERT_TYPES.NEUTRAL}\n\t\t\t\t\t\t\ttext=\"Please use the same expiration code that you applied when creating\nthe code on Shopify\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t{variable.type === 'link' &&\n\t\t\t\tselectedOption?.value !== 'custom_link' &&\n\t\t\t\t!isProductCarouselType &&\n\t\t\t\t!isWhatsappCarousel &&\n\t\t\t\tpod === POD.CHATBOT && (\n\t\t\t\t\t<QueryParamsComponent\n\t\t\t\t\t\tisError={\n\t\t\t\t\t\t\ttemplateErrorIndexes?.buttons?.includes(variable?.index ?? -1) ??\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t}\n\t\t\t\t\t\tparams={variable.queryParams ?? []}\n\t\t\t\t\t\tonChange={(params) => {\n\t\t\t\t\t\t\tupdateVariableList(variable.updatedValue, 'link', params);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvariableValue={variable.updatedValue}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default VariableConnector;\n"],"names":["Container","styled","props","CHANNEL_TYPE","COLORS","Overlay","OverlayContent","CUSTOM_LINK","CUSTOM_TEXT","STATIC_EXPIRY","VariableConnector","onFocus","variable","index","showVariableModal","setShowDiscountCheckBox","componentType","CTAoptions","buttonType","focused","setFocusState","useState","enteredVariableValue","setEnteredVariableValue","options","setOptions","selectedOption","setSelectedOption","renderFirstTime","setRenderFirstTime","urlRegex","variableList","setVariableList","setVariableCallback","setShowVariablePicker","device","channel","isError","originalVariableList","template","templateSelectionTriggered","setTemplate","setDisplayContent","setOriginalVariableList","globalNormalizedPlaceholders","enabledCustomText","pod","selectedCarouselIndex","isProductCarouselType","isWhatsappCarousel","disableEditVariable","disableEditExpiry","templateErrorIndexes","maxCharLimit","disableDatePicker","showDiscountCodeExpiryInfo","cardIndex","useTemplateModalContext","useEffect","updateNewVariables","renderVariableConnector","defaultOptions","allOptions","globalOptions","globalOption","StringUtils","placeHolderNamePattern","preSelectedOption","checkVariableOptions","updateEditableVarForSelectedComponentBody","variableUpdatedValue","variableLabel","POD","isVariableInCtaOptions","opt","optionCategory","op","handleOptionSelect","option","selectedIndex","singleOption","updateVariableList","updateWebpushBroadcastConfig","handleCustomInputUpdate","type","value","inputValue","updateValue","queryParams","normalizedType","variableId","getVariableNameForEmailByIndex","iframe","element","updatedVariables","currVar","ind","updateVariableListLocal","list","updatedLists","WEB_PUSH_COMPONENT_TYPE","prevState","cardBodyVariableList","card","i","body","title","bodyVariableList","titleVariableList","headerVariableList","buttonVariableList","cardsCopy","cloneDeep","iframeId","updatedHtmlContent","newValue","updateMapping","newComponent","component","isCarouselComponent","cardComponent","bodyVals","componentExample","updateComponentButtons","button","templateCopy","mappingComponent","indexComp","urlMappingCounter","urlMappingIndex","comp","currentTemplate","updateComponents","updateComponent","headerVals","header","handleVariableCallback","handleCustomVariableAddition","updatedVariableListWithCustomVariables","addIfNotExists","categoryDisplayName","variableDisplayName","variableValue","updated","updateVariables","BUTTON_TYPE","configType","jsxs","jsx","BodySecondary","BodyPrimary","truncate","EditIcon","Dropdown","Input","enteredVariableName","CustomDateTime","format","date","Alert","InfoIcon","ALERT_TYPES","QueryParamsComponent","params"],"mappings":"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"}
1	+ {"version":3,"file":"VariableConnector.js","sources":["../../../../../src/components/template-context-mapper/modalElements/VariableConnector.tsx"],"sourcesContent":["/** CONSTANTS /\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { format } from 'date-fns';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Alert } from '@src/components/alerts/Alert';\nimport { ALERT_TYPES } from '@src/components/alerts/AlertHelper';\nimport { CustomDateTime } from '@src/components/custom-date-time/CustomDateTime';\nimport { Dropdown } from '@src/components/dropdown/Dropdown';\nimport type {\n\tDropdownOption,\n\tSingleOption,\n} from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input/Input';\nimport { truncate } from '@src/components/product-picker-v2/collectionScreen';\nimport { placeHolderNamePattern } from '@src/components/template-preview/constants/regexPatterns';\nimport { isCarouselComponent } from '@src/components/template-preview/helpers/templateMiscHelper';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tButtonPlaceHolderOptions,\n\tCUSTOM_VARIABLE,\n\ttype globalNormalizedPlaceholdersType,\n\ttype QueryParamtype,\n} from '@src/components/template-preview/models/TemplateMeta';\nimport {\n\tWEB_PUSH_COMPONENT_TYPE,\n\ttype WebpushTemplateType,\n\ttype WebpushTemplateVariables,\n} from '@src/components/template-preview/models/WebpushTemplate';\nimport type {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateVariables,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport {\n\tBUTTON_TYPE,\n\tPOD,\n\ttype WhatsAppTemplate,\n\ttype WhatsAppTemplateVariables,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { updateVariables } from '../custom-hooks/useAdditionalVariables';\nimport { getVariableNameForEmailByIndex } from '../utils/getVariableNameEmail';\nimport { ComponentType } from './modal';\nimport { QueryParamsComponent } from './QueryParamsComponent';\n\nexport const Container = styled.div<{\n\tfocused?: boolean;\n\tchannel?: CHANNEL_TYPE;\n}>`\n\t/ surface/$color-background-warning-light /\n\n\tbackground: ${(props) =>\n\t\tprops.focused && props.channel === CHANNEL_TYPE.EMAIL\n\t\t\t? COLORS.background.warning.light\n\t\t\t: 'transparent'};\n\tborder-radius: 4px;\n\tpadding: 8px 10px;\n`;\n\nconst Overlay = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 1000;\n\tcursor: not-allowed;\n`;\nconst OverlayContent = styled.div`\n\theight: 100%;\n\twidth: 48%;\n\tbackground: rgba(0, 0, 0, 0.1);\n`;\n\ntype DropdownType = {\n\tlabel: string;\n\tvalue?: string;\n\toptions: SingleOption[];\n};\n\nconst CUSTOM_LINK: SingleOption = {\n\tvalue: 'custom_link',\n\tlabel: 'Custom URL',\n};\nconst CUSTOM_TEXT: SingleOption = {\n\tvalue: 'custom_text',\n\tlabel: 'Custom text',\n};\nconst STATIC_EXPIRY: SingleOption = {\n\tvalue: 'static_expiry',\n\tlabel: 'Static Expiry',\n};\n\n/* COMPONENT BELOW /\n\nexport interface VariableConnectorProps {\n\tonFocus?: () => void;\n\tvariable: CUSTOM_VARIABLE;\n\tindex: number;\n\tshowVariableModal?: boolean;\n\tsetShowDiscountCheckBox?: any;\n\tbuttonType?: BUTTON_TYPE;\n\tcomponentType?: ComponentType['type'] \| WEB_PUSH_COMPONENT_TYPE;\n\tCTAoptions?: ButtonPlaceHolderOptions[];\n}\n\nconst VariableConnector: React.FC<VariableConnectorProps> = (props) => {\n\tconst {\n\t\tonFocus,\n\t\tvariable,\n\t\tindex,\n\t\tshowVariableModal,\n\t\tsetShowDiscountCheckBox,\n\t\tcomponentType,\n\t\tCTAoptions,\n\t\tbuttonType,\n\t} = props;\n\n\tconst [focused, setFocusState] = useState(false);\n\tconst [enteredVariableValue, setEnteredVariableValue] = useState('');\n\tconst [options, setOptions] = useState<\n\t\tDropdownType[] \| globalNormalizedPlaceholdersType[]\n\t>([]);\n\tconst [selectedOption, setSelectedOption] = useState<SingleOption>();\n\tconst [renderFirstTime, setRenderFirstTime] = useState<boolean>(false);\n\tconst urlRegex =\n\t\t/^https?:\\/\\/(?:www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b(?:[-a-zA-Z0-9()@:%_\\+.~#?&\\/=])$/;\n\n\tconst {\n\t\tvariableList,\n\t\tsetVariableList,\n\t\tsetVariableCallback,\n\t\tsetShowVariablePicker,\n\t\tdevice,\n\t\tchannel,\n\t\tisError,\n\t\toriginalVariableList,\n\t\ttemplate,\n\t\ttemplateSelectionTriggered,\n\t\tsetTemplate,\n\t\tsetDisplayContent,\n\t\tsetOriginalVariableList,\n\t\tglobalNormalizedPlaceholders,\n\t\tenabledCustomText,\n\t\tpod,\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\tisWhatsappCarousel,\n\t\tdisableEditVariable,\n\t\tdisableEditExpiry,\n\t\ttemplateErrorIndexes,\n\t\tmaxCharLimit,\n\t\tdisableDatePicker,\n\t\tshowDiscountCodeExpiryInfo,\n\t\tcardIndex = 1,\n\t} = useTemplateModalContext();\n\n\tuseEffect(() => {\n\t\tif (focused) {\n\t\t\tonFocus?.();\n\t\t}\n\t}, [focused]);\n\n\tuseEffect(() => {\n\t\tupdateNewVariables();\n\t}, [templateSelectionTriggered]);\n\n\tuseEffect(() => {\n\t\trenderVariableConnector();\n\t}, [selectedCarouselIndex]);\n\n\tfunction renderVariableConnector() {\n\t\tconst defaultOptions: DropdownType[] = [];\n\t\tlet allOptions: DropdownType[] \| globalNormalizedPlaceholdersType[] = [];\n\t\tif (channel === CHANNEL_TYPE.MESSAGE && !enabledCustomText) {\n\t\t\tconst globalOptions = globalNormalizedPlaceholders ?? [];\n\t\t\tsetOptions([\n\t\t\t\t{\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_TEXT, CUSTOM_LINK],\n\t\t\t\t},\n\t\t\t\t...globalOptions,\n\t\t\t]);\n\n\t\t\tallOptions = [\n\t\t\t\t{\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_TEXT, CUSTOM_LINK],\n\t\t\t\t},\n\t\t\t\t...globalOptions,\n\t\t\t];\n\t\t} else {\n\t\t\tif (variable?.type === 'link') {\n\t\t\t\tdefaultOptions.push({\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_LINK, CUSTOM_TEXT],\n\t\t\t\t});\n\t\t\t\tsetSelectedOption(CUSTOM_LINK);\n\t\t\t} else if (variable?.type === 'date_time') {\n\t\t\t\tdefaultOptions.push({\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_LINK, CUSTOM_TEXT],\n\t\t\t\t});\n\t\t\t\tsetSelectedOption(STATIC_EXPIRY);\n\t\t\t} else {\n\t\t\t\tdefaultOptions.push({\n\t\t\t\t\tlabel: '',\n\t\t\t\t\toptions: [CUSTOM_LINK, CUSTOM_TEXT, STATIC_EXPIRY],\n\t\t\t\t});\n\t\t\t\tsetSelectedOption(CUSTOM_TEXT);\n\t\t\t}\n\t\t\tconst globalOptions = globalNormalizedPlaceholders ?? [];\n\n\t\t\tsetOptions([\n\t\t\t\t...defaultOptions,\n\t\t\t\t...globalOptions.map((globalOption) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...globalOption,\n\t\t\t\t\t\tlabel: StringUtils.toCapitilize(\n\t\t\t\t\t\t\tglobalOption.label?.replace(/([A-Z])/g, ' $1')?.toLowerCase(),\n\t\t\t\t\t\t),\n\t\t\t\t\t} as DropdownType;\n\t\t\t\t}),\n\t\t\t]);\n\t\t\tallOptions = [...defaultOptions, ...globalOptions];\n\t\t}\n\n\t\tif (\n\t\t\tchannel === CHANNEL_TYPE.WHATSAPP \|\|\n\t\t\tchannel === CHANNEL_TYPE.EMAIL \|\|\n\t\t\tchannel === CHANNEL_TYPE.MESSAGE \|\|\n\t\t\tchannel === CHANNEL_TYPE.WEBPUSH \|\|\n\t\t\tchannel === CHANNEL_TYPE.RCS\n\t\t) {\n\t\t\tif (variable.updatedValue) {\n\t\t\t\tif (\n\t\t\t\t\t(placeHolderNamePattern.test(variable.updatedValue) &&\n\t\t\t\t\t\t(channel === CHANNEL_TYPE.WHATSAPP \|\|\n\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS)) \|\|\n\t\t\t\t\t(variable.updatedValue.startsWith('{{') &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE.RCS)\n\t\t\t\t) {\n\t\t\t\t\tconst preSelectedOption = checkVariableOptions(\n\t\t\t\t\t\tvariable,\n\t\t\t\t\t\tallOptions,\n\t\t\t\t\t\tchannel,\n\t\t\t\t\t);\n\t\t\t\t\tif (preSelectedOption.value) {\n\t\t\t\t\t\tsetSelectedOption(preSelectedOption);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (variable.type === 'date_time') {\n\t\t\t\t\t\tsetSelectedOption(STATIC_EXPIRY);\n\t\t\t\t\t\tsetEnteredVariableValue(variable.updatedValue);\n\t\t\t\t\t\tupdateEditableVarForSelectedComponentBody(\n\t\t\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\t\t\tvariable.updatedValue,\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if (variable.updatedValue?.startsWith('https')) {\n\t\t\t\t\t\tsetSelectedOption(CUSTOM_LINK);\n\t\t\t\t\t\tsetEnteredVariableValue(variable.updatedValue.split('https://')[1]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetSelectedOption(CUSTOM_TEXT);\n\t\t\t\t\t\tsetEnteredVariableValue(variable.updatedValue);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction checkVariableOptions(\n\t\tvariable: CUSTOM_VARIABLE,\n\t\tallOptions: DropdownType[] \| globalNormalizedPlaceholdersType[],\n\t\tchannel: CHANNEL_TYPE,\n\t): SingleOption {\n\t\tlet preSelectedOption: SingleOption = { label: '', value: '' };\n\t\tconst variableUpdatedValue =\n\t\t\tchannel === (CHANNEL_TYPE.WHATSAPP \|\| CHANNEL_TYPE.RCS)\n\t\t\t\t? variable.updatedValue.replace('[[', '').replace(']]', '')\n\t\t\t\t: variable.updatedValue.replace('{{', '').replace('}}', '');\n\n\t\tif (showVariableModal) {\n\t\t\tlet variableLabel = variable.updatedValue;\n\n\t\t\t// For Backward Compatibility - Previously dropdown was used and this code is used to have a consistent display name when you select variable and already stored values.\n\t\t\tif (pod === POD.CHATBOT && componentType === 'BUTTONS') {\n\t\t\t\tconst isVariableInCtaOptions = CTAoptions?.filter(\n\t\t\t\t\t(opt) => opt.placeHolder === variable.updatedValue,\n\t\t\t\t);\n\n\t\t\t\tif (isVariableInCtaOptions && isVariableInCtaOptions.length > 0) {\n\t\t\t\t\tvariableLabel = isVariableInCtaOptions[0].label;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreSelectedOption = {\n\t\t\t\tlabel: variableLabel\n\t\t\t\t\t? variableLabel\n\t\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t\t.trim()\n\t\t\t\t\t\t\t.replace('.', ' ')\n\t\t\t\t\t: '',\n\t\t\t\tvalue: variable.updatedValue ?? '',\n\t\t\t};\n\t\t} else {\n\t\t\tallOptions.map((optionCategory) => {\n\t\t\t\toptionCategory.options.map((op) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\top.value?.replace('{{', '').replace('}}', '').trim() ===\n\t\t\t\t\t\tvariableUpdatedValue.trim()\n\t\t\t\t\t) {\n\t\t\t\t\t\tpreSelectedOption = op;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t\treturn preSelectedOption;\n\t}\n\n\tfunction handleOptionSelect(\n\t\toption:\n\t\t\t\| (SingleOption & { bikPlaceholderType?: 'url' \| 'string' })\n\t\t\t\| SingleOption[],\n\t\tselectedIndex?: number,\n\t) {\n\t\tconst singleOption = option as SingleOption & {\n\t\t\tbikPlaceholderType?: 'url' \| 'string';\n\t\t};\n\t\tsetEnteredVariableValue('');\n\t\tsetSelectedOption(singleOption);\n\n\t\tif (channel === CHANNEL_TYPE.WHATSAPP \|\| channel === CHANNEL_TYPE.RCS) {\n\t\t\tif (\n\t\t\t\tsingleOption.value !== 'custom_text' &&\n\t\t\t\tsingleOption.value !== 'custom_link' &&\n\t\t\t\tsingleOption.value !== 'static_expiry'\n\t\t\t) {\n\t\t\t\tupdateVariableList(singleOption.value ?? '', 'string');\n\t\t\t\tupdateEditableVarForSelectedComponentBody?.(\n\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\tsingleOption.value,\n\t\t\t\t\ttrue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tupdateEditableVarForSelectedComponentBody?.(\n\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\t'',\n\t\t\t\t\ttrue,\n\t\t\t\t\tsingleOption.value,\n\t\t\t\t);\n\t\t\t\tupdateVariableList(\n\t\t\t\t\t'',\n\t\t\t\t\tsingleOption.bikPlaceholderType === 'url' ? 'link' : 'string',\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\tif (\n\t\t\t\tsingleOption.value !== 'custom_text' &&\n\t\t\t\tsingleOption.value !== 'custom_link'\n\t\t\t) {\n\t\t\t\tupdateVariableList(\n\t\t\t\t\tsingleOption.value!,\n\t\t\t\t\tsingleOption.bikPlaceholderType === 'url' ? 'link' : 'string',\n\t\t\t\t);\n\t\t\t\tif (channel == CHANNEL_TYPE.WEBPUSH) {\n\t\t\t\t\tupdateWebpushBroadcastConfig?.(\n\t\t\t\t\t\tvariable.index ?? 0,\n\t\t\t\t\t\tsingleOption.value,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetEnteredVariableValue('');\n\t\t\t\tupdateVariableList('', singleOption.value);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleCustomInputUpdate(\n\t\ttype: 'custom_text' \| 'custom_link' \| 'static_expiry',\n\t\tvalue: string,\n\t) {\n\t\tsetEnteredVariableValue(value);\n\t\tconst inputValue =\n\t\t\tselectedOption?.value === 'custom_link' && value\n\t\t\t\t? value.includes('https')\n\t\t\t\t\t? value\n\t\t\t\t\t: `https://${value}`\n\t\t\t\t: value;\n\n\t\tconst variableType = type === 'static_expiry' ? 'string' : type;\n\t\tupdateVariableList(inputValue, variableType);\n\t\tif (channel === CHANNEL_TYPE.WHATSAPP \|\| channel === CHANNEL_TYPE.RCS) {\n\t\t\tupdateEditableVarForSelectedComponentBody?.(\n\t\t\t\tvariable.index ?? 0,\n\t\t\t\tinputValue,\n\t\t\t\ttype === 'custom_link' \|\|\n\t\t\t\t\t(pod === POD.CHATBOT && type === 'custom_text'),\n\t\t\t\ttype,\n\t\t\t);\n\t\t}\n\t\tif (channel === CHANNEL_TYPE.WEBPUSH) {\n\t\t\tupdateWebpushBroadcastConfig?.(variable.index ?? 0, inputValue);\n\t\t}\n\t}\n\n\tfunction updateVariableList(\n\t\tupdateValue: string,\n\t\ttype: 'link' \| 'string' \| 'custom_text' \| 'custom_link' \| 'date_time',\n\t\tqueryParams?: QueryParamtype[],\n\t) {\n\t\tconst normalizedType =\n\t\t\ttype === 'custom_link'\n\t\t\t\t? 'link'\n\t\t\t\t: type === 'custom_text'\n\t\t\t\t? 'string'\n\t\t\t\t: type;\n\t\tif (\n\t\t\tchannel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\tchannel !== CHANNEL_TYPE.WEBPUSH &&\n\t\t\tchannel !== CHANNEL_TYPE.RCS\n\t\t) {\n\t\t\tconst variableId = getVariableNameForEmailByIndex(index + 1);\n\t\t\tconst iframe = document?.getElementById(\n\t\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop',\n\t\t\t) as HTMLIFrameElement;\n\n\t\t\tconst element =\n\t\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t\t? iframe?.contentWindow?.document.getElementById(variableId)\n\t\t\t\t\t: document.getElementById(variableId);\n\t\t\tif (element) {\n\t\t\t\tif ((type === 'custom_text' \|\| type === 'custom_link') && !updateValue)\n\t\t\t\t\telement.textContent = variable.variableName;\n\t\t\t\telse element.textContent = updateValue;\n\t\t\t}\n\n\t\t\tconst updatedVariables = (originalVariableList as CUSTOM_VARIABLE[]).map(\n\t\t\t\t(currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? { ...currVar, type: normalizedType, updatedValue: updateValue }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t},\n\t\t\t);\n\t\t\tsetOriginalVariableList?.(updatedVariables);\n\t\t}\n\t\tif (channel === CHANNEL_TYPE.WEBPUSH) {\n\t\t\tconst variableList = originalVariableList as WebpushTemplateVariables;\n\t\t\tconst updateVariableListLocal = (list: any[]) =>\n\t\t\t\tlist?.map((currVar, ind) =>\n\t\t\t\t\tind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar,\n\t\t\t\t);\n\t\t\tconst updatedLists = {\n\t\t\t\tBODY:\n\t\t\t\t\tcomponentType === 'BODY'\n\t\t\t\t\t\t? updateVariableListLocal(variableList.body)\n\t\t\t\t\t\t: variableList.body,\n\t\t\t\tTITLE:\n\t\t\t\t\tcomponentType === WEB_PUSH_COMPONENT_TYPE.TITLE.toUpperCase()\n\t\t\t\t\t\t? updateVariableListLocal(variableList.title)\n\t\t\t\t\t\t: variableList.title,\n\t\t\t};\n\t\t\tsetOriginalVariableList?.((prevState) => ({\n\t\t\t\t...prevState,\n\t\t\t\ttitle: updatedLists.TITLE,\n\t\t\t\tbody: updatedLists.BODY,\n\t\t\t\tbuttons: variableList.buttons,\n\t\t\t}));\n\t\t}\n\n\t\tif (channel === CHANNEL_TYPE.WHATSAPP \|\| channel === CHANNEL_TYPE.RCS) {\n\t\t\tif (\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex > -1 &&\n\t\t\t\tisProductCarouselType\n\t\t\t) {\n\t\t\t\tconst cardBodyVariableList = {\n\t\t\t\t\t...(originalVariableList as WhatsAppCarouselTemplateVariables),\n\t\t\t\t}.cards.map((card, i) => {\n\t\t\t\t\tif (componentType === 'BODY') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\tbody: card.body?.map((body, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t...body,\n\t\t\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn body;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'TITLE') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\ttitle: card['title']?.map((title, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t...title,\n\t\t\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn title;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'BUTTONS') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\tbuttons: card.buttons?.map((currVar, ind) => {\n\t\t\t\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\t\t\t\tbuttonVariable:\n\t\t\t\t\t\t\t\t\t\t\t\ttype === 'custom_link'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '((customPlaceholderName))'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: updateValue,\n\t\t\t\t\t\t\t\t\t\t\texample:\n\t\t\t\t\t\t\t\t\t\t\t\tcurrVar.type === 'COPY_CODE'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? updateValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t: [updateValue],\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t: currVar;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn card;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tsetOriginalVariableList?.((prevState) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\tcards: cardBodyVariableList as any,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst variableList =\n\t\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t\t ]\n\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables);\n\n\t\t\tlet bodyVariableList = variableList.body;\n\t\t\tlet titleVariableList = variableList.title;\n\t\t\tlet headerVariableList = variableList.header;\n\t\t\tlet buttonVariableList = variableList.buttons;\n\n\t\t\tif (componentType === 'BODY') {\n\t\t\t\tbodyVariableList = variableList.body?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t} else if (componentType === 'TITLE') {\n\t\t\t\ttitleVariableList = variableList?.['title']?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t} else if (componentType === 'HEADER') {\n\t\t\t\theaderVariableList = variableList.header?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\ttype: normalizedType,\n\t\t\t\t\t\t\t\tupdatedValue: updateValue,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t} else if (componentType === 'BUTTONS') {\n\t\t\t\tbuttonVariableList = variableList.buttons?.map((currVar, ind) => {\n\t\t\t\t\treturn ind === index\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...currVar,\n\t\t\t\t\t\t\t\tbuttonVariable:\n\t\t\t\t\t\t\t\t\ttype === 'custom_link'\n\t\t\t\t\t\t\t\t\t\t? '((customPlaceholderName))'\n\t\t\t\t\t\t\t\t\t\t: updateValue,\n\t\t\t\t\t\t\t\texample:\n\t\t\t\t\t\t\t\t\tcurrVar.type === 'COPY_CODE' ? updateValue : [updateValue],\n\t\t\t\t\t\t\t\tqueryParams: queryParams ?? [],\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: currVar;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\t\tconst cardsCopy = cloneDeep(\n\t\t\t\t\t(originalVariableList as WhatsAppCarouselTemplateVariables).cards,\n\t\t\t\t);\n\t\t\t\tcardsCopy[selectedCarouselIndex] = {\n\t\t\t\t\theader: headerVariableList,\n\t\t\t\t\tbody: bodyVariableList,\n\t\t\t\t\tbuttons: buttonVariableList,\n\t\t\t\t\ttitle: titleVariableList,\n\t\t\t\t};\n\t\t\t\tsetOriginalVariableList?.((prevState) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\tcards: cardsCopy,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tsetOriginalVariableList?.((prevState) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\theader: headerVariableList,\n\t\t\t\t\t\tbody: bodyVariableList,\n\t\t\t\t\t\tbuttons: buttonVariableList,\n\t\t\t\t\t\ttitle: titleVariableList,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (device && selectedOption && enteredVariableValue) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst inputValue =\n\t\t\t\t\tselectedOption?.value === 'custom_link' && enteredVariableValue\n\t\t\t\t\t\t? enteredVariableValue.includes('https')\n\t\t\t\t\t\t\t? enteredVariableValue\n\t\t\t\t\t\t\t: `https://${enteredVariableValue}`\n\t\t\t\t\t\t: enteredVariableValue;\n\t\t\t\tupdateVariableList(\n\t\t\t\t\tinputValue,\n\t\t\t\t\tselectedOption.value as 'custom_text' \| 'custom_link',\n\t\t\t\t);\n\t\t\t}, 100);\n\t\t}\n\t}, [device]);\n\n\tuseEffect(() => {\n\t\tif (!renderFirstTime && selectedOption && variable.updatedValue) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tconst inputValue =\n\t\t\t\t\tselectedOption?.value === 'custom_link' && variable.updatedValue\n\t\t\t\t\t\t? variable.updatedValue.includes('https')\n\t\t\t\t\t\t\t? variable.updatedValue\n\t\t\t\t\t\t\t: `https://${variable.updatedValue}`\n\t\t\t\t\t\t: variable.updatedValue;\n\t\t\t\tupdateVariableList(\n\t\t\t\t\tinputValue,\n\t\t\t\t\tselectedOption.value as 'custom_text' \| 'custom_link',\n\t\t\t\t);\n\t\t\t\tsetRenderFirstTime(true);\n\t\t\t}, 100);\n\t\t}\n\t}, [selectedOption]);\n\n\tfunction updateNewVariables() {\n\t\tconst iframeId =\n\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop';\n\t\tconst iframe = document.getElementById(iframeId) as HTMLIFrameElement;\n\n\t\tconst updatedHtmlContent =\n\t\t\t(iframe?.contentWindow?.document?.body?.innerHTML ?? '') +\n\t\t\tiframe?.contentWindow?.document.head.innerHTML;\n\t\tif (channel === CHANNEL_TYPE.EMAIL) {\n\t\t\tsetDisplayContent?.(updatedHtmlContent);\n\t\t}\n\t}\n\n\tfunction updateEditableVarForSelectedComponentBody(\n\t\tindex: number,\n\t\tnewValue: string,\n\t\tupdateMapping?: boolean,\n\t\ttype?: 'custom_text' \| 'custom_link' \| 'static_expiry',\n\t) {\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\tisProductCarouselType\n\t\t) {\n\t\t\tconst newComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.components.map((component) => {\n\t\t\t\tif (isCarouselComponent(component.type)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...component,\n\t\t\t\t\t\tcards: component.cards?.map((cardComponent) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...cardComponent,\n\t\t\t\t\t\t\t\tcomponents: cardComponent.components.map((card) => {\n\t\t\t\t\t\t\t\t\tif (card.type === 'BODY' && componentType === 'BODY') {\n\t\t\t\t\t\t\t\t\t\tif (card.example?.body_text?.[0]) {\n\t\t\t\t\t\t\t\t\t\t\tconst bodyVals = [\n\t\t\t\t\t\t\t\t\t\t\t\t...(card.example?.body_text?.[0] ?? []),\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\t\t\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t\t\t\t\t\t\t...card.example,\n\t\t\t\t\t\t\t\t\t\t\t\tbody_text: [bodyVals],\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tif (card.type === 'TITLE' && componentType === 'TITLE') {\n\t\t\t\t\t\t\t\t\t\tif (card.example?.['title_text']?.[0]) {\n\t\t\t\t\t\t\t\t\t\t\tconst bodyVals = [\n\t\t\t\t\t\t\t\t\t\t\t\t...(card.example?.['title_text']?.[0] ?? []),\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\t\t\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t\t\t\t\t\t\t...card.example,\n\t\t\t\t\t\t\t\t\t\t\t\ttitle_text: [bodyVals],\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tcard.type === 'BUTTONS' &&\n\t\t\t\t\t\t\t\t\t\tcomponentType === 'BUTTONS'\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tconst updateComponentButtons = card.buttons?.map(\n\t\t\t\t\t\t\t\t\t\t\t(button, i) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...button,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\texample: [newValue],\n\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn button;\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\tif (updateComponentButtons) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\t\tbuttons: updateComponentButtons,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}),\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn component;\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\tif (updateMapping) {\n\t\t\t\tconst mappingComponent = {\n\t\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t\t}.mapping.cards?.map((component, indexComp) => {\n\t\t\t\t\tif (componentType === 'BODY') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...component,\n\t\t\t\t\t\t\tbody: component.body?.map((body, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn body;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'TITLE') {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...component,\n\t\t\t\t\t\t\ttitle: component?.['title']?.map((body, i) => {\n\t\t\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn body;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else if (componentType === 'BUTTONS' && component?.buttons) {\n\t\t\t\t\t\tlet urlMappingCounter = -1;\n\t\t\t\t\t\tlet urlMappingIndex = -1;\n\n\t\t\t\t\t\t(template as WhatsAppCarouselTemplate).components[\n\t\t\t\t\t\t\tcardIndex\n\t\t\t\t\t\t].cards?.[indexComp].components.forEach((comp) => {\n\t\t\t\t\t\t\tif (comp.type === 'BUTTONS') {\n\t\t\t\t\t\t\t\tcomp.buttons?.forEach((button, i) => {\n\t\t\t\t\t\t\t\t\tif (button.type === 'URL') {\n\t\t\t\t\t\t\t\t\t\turlMappingCounter++;\n\n\t\t\t\t\t\t\t\t\t\tif (i === index && button.type == 'URL') {\n\t\t\t\t\t\t\t\t\t\t\turlMappingIndex = urlMappingCounter;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...component,\n\t\t\t\t\t\t\tbuttons: component.buttons?.map((button, i) => {\n\t\t\t\t\t\t\t\tif (i === urlMappingIndex) {\n\t\t\t\t\t\t\t\t\treturn type === 'custom_link'\n\t\t\t\t\t\t\t\t\t\t? `((customPlaceholderName))`\n\t\t\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn button;\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn component;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\ttemplateCopy.mapping.cards = mappingComponent as any;\n\t\t\t}\n\t\t\ttemplateCopy.components = newComponent as any;\n\t\t\tsetTemplate?.(templateCopy);\n\t\t\treturn;\n\t\t}\n\t\tconst currentTemplate =\n\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? {\n\t\t\t\t\t\tcomponents: ({ ...template } as WhatsAppCarouselTemplate)\n\t\t\t\t\t\t\t.components[cardIndex].cards?.[selectedCarouselIndex]\n\t\t\t\t\t\t\t.components as any,\n\t\t\t\t\t\tmapping: ({ ...template } as WhatsAppCarouselTemplate).mapping\n\t\t\t\t\t\t\t.cards?.[selectedCarouselIndex],\n\t\t\t\t }\n\t\t\t\t: ({ ...template } as WhatsAppTemplate);\n\n\t\tconst updateComponents = currentTemplate?.components?.map((component) => {\n\t\t\tconst updateComponent = { ...component };\n\n\t\t\tif (component.type === 'BODY' && componentType === 'BODY') {\n\t\t\t\tif (\n\t\t\t\t\tArray.isArray(component.example?.body_text) \|\|\n\t\t\t\t\tcomponent.example?.body_text?.[0]\n\t\t\t\t) {\n\t\t\t\t\tconst bodyVals = [...(updateComponent.example?.body_text?.[0] ?? [])];\n\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\tbody_text: [bodyVals],\n\t\t\t\t\t};\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (component.type === 'TITLE' && componentType === 'TITLE') {\n\t\t\t\tif (\n\t\t\t\t\tArray.isArray(component.example?.title_text) \|\|\n\t\t\t\t\tcomponent.example?.title_text?.[0]\n\t\t\t\t) {\n\t\t\t\t\tconst bodyVals = [\n\t\t\t\t\t\t...(updateComponent.example?.title_text?.[0] ?? []),\n\t\t\t\t\t];\n\t\t\t\t\tbodyVals[index] = newValue\n\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\ttitle_text: [bodyVals],\n\t\t\t\t\t};\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} else if (component.type === 'HEADER' && componentType === 'HEADER') {\n\t\t\t\tif (component.example?.header_text) {\n\t\t\t\t\tconst headerVals = [...(updateComponent.example?.header_text ?? [])];\n\t\t\t\t\theaderVals[index] = newValue\n\t\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t\t.replace('((', '')\n\t\t\t\t\t\t.replace('))', '');\n\t\t\t\t\tconst componentExample = {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\theader_text: headerVals,\n\t\t\t\t\t};\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\texample: componentExample,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} else if (component.type === 'BUTTONS' && componentType === 'BUTTONS') {\n\t\t\t\tconst updateComponentButtons = component.buttons?.map((button, i) => {\n\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...button,\n\t\t\t\t\t\t\texample: button.type === 'COPY_CODE' ? newValue : [newValue],\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\treturn button;\n\t\t\t\t});\n\n\t\t\t\tif (updateComponentButtons) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...updateComponent,\n\t\t\t\t\t\tbuttons: updateComponentButtons,\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn updateComponent;\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tcomponent.type === 'limited_time_offer' &&\n\t\t\t\tcomponentType === 'limited_time_offer'\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\t...updateComponent,\n\t\t\t\t\texample: {\n\t\t\t\t\t\t...updateComponent.example,\n\t\t\t\t\t\tlimited_time_offer: newValue,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn component;\n\t\t});\n\n\t\tcurrentTemplate.components = updateComponents;\n\n\t\tif (updateMapping) {\n\t\t\tif (componentType === 'BODY' && currentTemplate?.mapping?.body) {\n\t\t\t\tcurrentTemplate.mapping = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\tbody: currentTemplate.mapping?.body?.map((body, i) => {\n\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn body;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t} else if (\n\t\t\t\tcomponentType === 'TITLE' &&\n\t\t\t\tcurrentTemplate?.mapping?.['title']\n\t\t\t) {\n\t\t\t\t(currentTemplate.mapping as {}) = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\ttitle: currentTemplate.mapping?.['title']?.map((body, i) => {\n\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t? `((editableVariable${i + 10}))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn body;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t} else if (\n\t\t\t\tcomponentType === 'HEADER' &&\n\t\t\t\tcurrentTemplate?.mapping?.header\n\t\t\t) {\n\t\t\t\tcurrentTemplate.mapping = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\theader: currentTemplate.mapping.header.map((header, i) => {\n\t\t\t\t\t\tif (index === i) {\n\t\t\t\t\t\t\treturn type === 'custom_text'\n\t\t\t\t\t\t\t\t? `((editableVariable${i + 20}))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn header;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t} else if (\n\t\t\t\tcomponentType === 'BUTTONS' &&\n\t\t\t\tcurrentTemplate?.mapping?.buttons\n\t\t\t) {\n\t\t\t\t// Mapping Object only has URL buttons.\n\t\t\t\t// Component object has all buttons\n\t\t\t\t// When updating component, this updaets corresponding mapping index too.\n\n\t\t\t\tlet urlMappingCounter = -1;\n\t\t\t\tlet urlMappingIndex = -1;\n\n\t\t\t\tupdateComponents.forEach((component) => {\n\t\t\t\t\tif (component.type === 'BUTTONS') {\n\t\t\t\t\t\tcomponent.buttons?.forEach((button, i) => {\n\t\t\t\t\t\t\tif (button.type === 'URL') {\n\t\t\t\t\t\t\t\turlMappingCounter++;\n\n\t\t\t\t\t\t\t\tif (i === index && button.type == 'URL') {\n\t\t\t\t\t\t\t\t\turlMappingIndex = urlMappingCounter;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tcurrentTemplate.mapping = {\n\t\t\t\t\t...currentTemplate.mapping,\n\t\t\t\t\tbuttons: currentTemplate.mapping.buttons.map((button, i) => {\n\t\t\t\t\t\tif (i === urlMappingIndex) {\n\t\t\t\t\t\t\treturn type === 'custom_link'\n\t\t\t\t\t\t\t\t? `((customPlaceholderName))`\n\t\t\t\t\t\t\t\t: newValue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn button;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\ttemplate\n\t\t) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = currentTemplate.components;\n\t\t\ttemplateCopy.mapping.cards![selectedCarouselIndex] =\n\t\t\t\tcurrentTemplate.mapping!;\n\t\t\tsetTemplate?.(templateCopy);\n\t\t} else {\n\t\t\tsetTemplate?.({ ...currentTemplate } as WhatsAppTemplate);\n\t\t}\n\t}\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetShowDiscountCheckBox?.(false);\n\t\tif (variable.actualValue === '{{custom.url}}') {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName,\n\t\t\t\tselected: true,\n\t\t\t\tvalue: 'custom_link',\n\t\t\t});\n\t\t} else if (variable.actualValue == '{{custom.text}}') {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName,\n\t\t\t\tselected: true,\n\t\t\t\tvalue: 'custom_text',\n\t\t\t});\n\t\t} else if (variable.actualValue == '{{static.expiry}}') {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName,\n\t\t\t\tselected: true,\n\t\t\t\tvalue: 'static_expiry',\n\t\t\t});\n\t\t} else {\n\t\t\thandleOptionSelect({\n\t\t\t\tlabel: variable.displayName\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.trim()\n\t\t\t\t\t.replace('.', ' '),\n\t\t\t\tselected: true,\n\t\t\t\tvalue: variable.actualValue,\n\t\t\t\tbikPlaceholderType: 'string',\n\t\t\t});\n\t\t}\n\t};\n\n\tconst handleCustomVariableAddition = () => {\n\t\tlet updatedVariableListWithCustomVariables: VariableListInterfaceV2[] =\n\t\t\tArray.isArray(variableList) ? [...variableList] : [];\n\n\t\t// Function to add custom variables if they do not already exist\n\t\t// This is to ensure that custom variables are added only once\n\t\t// and not duplicated in the variable list.\n\t\tconst addIfNotExists = (\n\t\t\tcategoryDisplayName: string,\n\t\t\tvariableDisplayName: string,\n\t\t\tvariableValue: string,\n\t\t) => {\n\t\t\tconst updated = updateVariables({\n\t\t\t\tvariableList: updatedVariableListWithCustomVariables,\n\t\t\t\tcategoryDisplayName,\n\t\t\t\tvariableDisplayName,\n\t\t\t\tvariableValue,\n\t\t\t});\n\t\t\tif (Array.isArray(updated)) {\n\t\t\t\tupdatedVariableListWithCustomVariables = updated;\n\t\t\t}\n\t\t};\n\n\t\tif (\n\t\t\tpod === POD.CHATBOT &&\n\t\t\tbuttonType !== BUTTON_TYPE.URL &&\n\t\t\tcomponentType !== 'limited_time_offer'\n\t\t) {\n\t\t\taddIfNotExists('Custom Variables', 'Custom Text', '{{custom.text}}');\n\t\t}\n\n\t\tif (buttonType === BUTTON_TYPE.URL && pod === POD.CHATBOT) {\n\t\t\taddIfNotExists('Custom Variables', 'Custom URL', '{{custom.url}}');\n\t\t} else if (componentType === 'limited_time_offer') {\n\t\t\taddIfNotExists('Static Variables', 'Static Expiry', '{{static.expiry}}');\n\t\t} else if (buttonType === BUTTON_TYPE.COPY_CODE) {\n\t\t\taddIfNotExists('Custom Variables', 'Custom Text', '{{custom.text}}');\n\t\t}\n\n\t\tsetVariableList(updatedVariableListWithCustomVariables);\n\t};\n\n\tfunction updateWebpushBroadcastConfig(index: number, newValue: string) {\n\t\tconst currentTemplate = cloneDeep(template) as WebpushTemplateType;\n\t\tconst configType = componentType!.toLocaleLowerCase();\n\t\tif (currentTemplate.webpushBroadcastConfig?.[configType]) {\n\t\t\tcurrentTemplate.webpushBroadcastConfig[configType]![index] = newValue;\n\t\t}\n\t\tsetTemplate?.({ ...currentTemplate } as WebpushTemplateType);\n\t}\n\n\treturn (\n\t\t<Container\n\t\t\tchannel={channel}\n\t\t\tfocused={focused}\n\t\t\tonMouseEnter={() => setFocusState(true)}\n\t\t\tonMouseLeave={() => setFocusState(false)}\n\t\t>\n\t\t\t<div style={{ marginBottom: 8 }}>\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tisError && !selectedOption\n\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{variable.variableName?.replace('{{', '').replace('}}', '')}{' '}\n\t\t\t\t\t{variable?.type === 'link' ? 'link' : 'variable'}\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\t\t\t<div style={{ marginBottom: 12 }}>\n\t\t\t\t{showVariableModal ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tborder: '#E0E0E0 1px solid',\n\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\tpadding: 10,\n\t\t\t\t\t\t\tjustifyContent: selectedOption?.label\n\t\t\t\t\t\t\t\t? 'space-between'\n\t\t\t\t\t\t\t\t: 'flex-end',\n\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\tvariable?.type === 'date_time' && disableEditExpiry\n\t\t\t\t\t\t\t\t\t? COLORS.background.base\n\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyPrimary numberOfLines={1}>\n\t\t\t\t\t\t\t{pod === POD.CHATBOT\n\t\t\t\t\t\t\t\t? ['static_expiry', 'custom_text', 'custom_link'].includes(\n\t\t\t\t\t\t\t\t\t\tselectedOption?.value ?? '',\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t\t\t: selectedOption?.value\n\t\t\t\t\t\t\t\t: truncate(selectedOption?.label ?? '', 20, true)}\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t{disableEditVariable \|\|\n\t\t\t\t\t\t(variable?.type === 'date_time' && disableEditExpiry) ? (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\thandleCustomVariableAddition();\n\t\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tdisabled={disableEditVariable}\n\t\t\t\t\t\toptions={options}\n\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\tonSelect={\n\t\t\t\t\t\t\thandleOptionSelect as (\n\t\t\t\t\t\t\t\toption: DropdownOption \| DropdownOption[],\n\t\t\t\t\t\t\t) => void\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdefaultOptions={\n\t\t\t\t\t\t\tselectedOption\n\t\t\t\t\t\t\t\t? [{ ...selectedOption, selected: true } as DropdownOption]\n\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{(selectedOption?.value === 'custom_text' \|\|\n\t\t\t\tselectedOption?.value === 'custom_link') && (\n\t\t\t\t<Input\n\t\t\t\t\tstate={disableEditVariable ? 'disabled' : 'none'}\n\t\t\t\t\tlabelText={\n\t\t\t\t\t\tselectedOption?.value === 'custom_text'\n\t\t\t\t\t\t\t? 'Custom text value'\n\t\t\t\t\t\t\t: selectedOption?.value === 'custom_link'\n\t\t\t\t\t\t\t? 'Custom URL value'\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tid={`variable-value-${selectedOption?.value}-${index}`}\n\t\t\t\t\tvalue={enteredVariableValue}\n\t\t\t\t\terrorMessage={\n\t\t\t\t\t\tisError &&\n\t\t\t\t\t\ttemplateErrorIndexes?.buttons?.includes(variable?.index ?? -1)\n\t\t\t\t\t\t\t? !enteredVariableValue \|\|\n\t\t\t\t\t\t\t enteredVariableValue.trim().length === 0\n\t\t\t\t\t\t\t\t? 'Required field'\n\t\t\t\t\t\t\t\t: selectedOption.value === 'custom_link' &&\n\t\t\t\t\t\t\t\t (!urlRegex.test(`https://${enteredVariableValue.trim()}`) \|\|\n\t\t\t\t\t\t\t\t\t\tenteredVariableValue.trim().length === 0)\n\t\t\t\t\t\t\t\t? 'Enter valid URL'\n\t\t\t\t\t\t\t\t: selectedOption.value !== 'custom_link' &&\n\t\t\t\t\t\t\t\t enteredVariableValue.length > 30\n\t\t\t\t\t\t\t\t? 'Length cannot be more than 30'\n\t\t\t\t\t\t\t\t: componentType === 'BUTTONS' &&\n\t\t\t\t\t\t\t\t selectedOption.value !== 'custom_link'\n\t\t\t\t\t\t\t\t? 'Enter valid alpha numeric code'\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tmaxCharLimit={\n\t\t\t\t\t\tmaxCharLimit\n\t\t\t\t\t\t\t? maxCharLimit\n\t\t\t\t\t\t\t: selectedOption?.value === 'custom_link'\n\t\t\t\t\t\t\t? 2000\n\t\t\t\t\t\t\t: componentType === 'BUTTONS'\n\t\t\t\t\t\t\t? 15\n\t\t\t\t\t\t\t: 30\n\t\t\t\t\t}\n\t\t\t\t\tnoKeyDownChange={true}\n\t\t\t\t\tprefixText={selectedOption?.value === 'custom_link' ? 'https://' : ''}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tvariable.type === 'link' \|\| selectedOption.value === 'custom_link'\n\t\t\t\t\t\t\t? 'Enter custom URL here'\n\t\t\t\t\t\t\t: 'Enter custom text here'\n\t\t\t\t\t}\n\t\t\t\t\tonChangeText={(enteredVariableName) => {\n\t\t\t\t\t\thandleCustomInputUpdate(\n\t\t\t\t\t\t\tselectedOption.value as 'custom_text' \| 'custom_link',\n\t\t\t\t\t\t\tenteredVariableName,\n\t\t\t\t\t\t);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{/* When static expiry is selected, Custom date time can be chosen.\n\t\t\tPoints to be noted.\n\t\t\t1. If there is no date Time chosen, current date and time is displayed.\n\t\t\t2. Custom date time is converted to ISO string and parsed from ISO string if there was a previous value */}\n\t\t\t{selectedOption?.value === 'static_expiry' && (\n\t\t\t\t<div style={{ position: 'relative' }}>\n\t\t\t\t\t{(disableEditVariable \|\| disableDatePicker) && (\n\t\t\t\t\t\t<Overlay\n\t\t\t\t\t\t\tonClick={(e) => e.preventDefault()}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<OverlayContent />\n\t\t\t\t\t\t\t<OverlayContent />\n\t\t\t\t\t\t</Overlay>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<CustomDateTime\n\t\t\t\t\t\tplacement={'auto'}\n\t\t\t\t\t\ttime={\n\t\t\t\t\t\t\tenteredVariableValue\n\t\t\t\t\t\t\t\t? format(new Date(enteredVariableValue), 'hh:mm a')\n\t\t\t\t\t\t\t\t: format(new Date(), 'hh:mm a')\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdate={\n\t\t\t\t\t\t\tenteredVariableValue ? new Date(enteredVariableValue) : new Date()\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminDate={new Date()}\n\t\t\t\t\t\terror={''}\n\t\t\t\t\t\tsetError={() => {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={(date: Date): void => {\n\t\t\t\t\t\t\thandleCustomInputUpdate('static_expiry', date.toISOString());\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{selectedOption?.value === 'static_expiry' &&\n\t\t\t\tshowDiscountCodeExpiryInfo && (\n\t\t\t\t\t<div style={{ marginTop: 8 }}>\n\t\t\t\t\t\t<Alert\n\t\t\t\t\t\t\tcontainerStyle={{ padding: '4px 8px' }}\n\t\t\t\t\t\t\ticon={() => (\n\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\ttype={ALERT_TYPES.NEUTRAL}\n\t\t\t\t\t\t\ttext=\"Please use the same expiration code that you applied when creating\nthe code on Shopify\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t{variable.type === 'link' &&\n\t\t\t\tselectedOption?.value !== 'custom_link' &&\n\t\t\t\t!isProductCarouselType &&\n\t\t\t\t!isWhatsappCarousel &&\n\t\t\t\tpod === POD.CHATBOT && (\n\t\t\t\t\t<QueryParamsComponent\n\t\t\t\t\t\tisError={\n\t\t\t\t\t\t\ttemplateErrorIndexes?.buttons?.includes(variable?.index ?? -1) ??\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t}\n\t\t\t\t\t\tparams={variable.queryParams ?? []}\n\t\t\t\t\t\tonChange={(params) => {\n\t\t\t\t\t\t\tupdateVariableList(variable.updatedValue, 'link', params);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvariableValue={variable.updatedValue}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default VariableConnector;\n"],"names":["Container","styled","props","CHANNEL_TYPE","COLORS","Overlay","OverlayContent","CUSTOM_LINK","CUSTOM_TEXT","STATIC_EXPIRY","VariableConnector","onFocus","variable","index","showVariableModal","setShowDiscountCheckBox","componentType","CTAoptions","buttonType","focused","setFocusState","useState","enteredVariableValue","setEnteredVariableValue","options","setOptions","selectedOption","setSelectedOption","renderFirstTime","setRenderFirstTime","urlRegex","variableList","setVariableList","setVariableCallback","setShowVariablePicker","device","channel","isError","originalVariableList","template","templateSelectionTriggered","setTemplate","setDisplayContent","setOriginalVariableList","globalNormalizedPlaceholders","enabledCustomText","pod","selectedCarouselIndex","isProductCarouselType","isWhatsappCarousel","disableEditVariable","disableEditExpiry","templateErrorIndexes","maxCharLimit","disableDatePicker","showDiscountCodeExpiryInfo","cardIndex","useTemplateModalContext","useEffect","updateNewVariables","renderVariableConnector","defaultOptions","allOptions","globalOptions","globalOption","StringUtils","placeHolderNamePattern","preSelectedOption","checkVariableOptions","updateEditableVarForSelectedComponentBody","variableUpdatedValue","variableLabel","POD","isVariableInCtaOptions","opt","optionCategory","op","handleOptionSelect","option","selectedIndex","singleOption","updateVariableList","updateWebpushBroadcastConfig","handleCustomInputUpdate","type","value","inputValue","updateValue","queryParams","normalizedType","variableId","getVariableNameForEmailByIndex","iframe","element","updatedVariables","currVar","ind","updateVariableListLocal","list","updatedLists","WEB_PUSH_COMPONENT_TYPE","prevState","cardBodyVariableList","card","i","body","title","bodyVariableList","titleVariableList","headerVariableList","buttonVariableList","cardsCopy","cloneDeep","iframeId","updatedHtmlContent","newValue","updateMapping","newComponent","component","isCarouselComponent","cardComponent","bodyVals","componentExample","updateComponentButtons","button","templateCopy","mappingComponent","indexComp","urlMappingCounter","urlMappingIndex","comp","currentTemplate","updateComponents","updateComponent","headerVals","header","handleVariableCallback","handleCustomVariableAddition","updatedVariableListWithCustomVariables","addIfNotExists","categoryDisplayName","variableDisplayName","variableValue","updated","updateVariables","BUTTON_TYPE","configType","jsxs","jsx","BodySecondary","BodyPrimary","truncate","EditIcon","Dropdown","Input","enteredVariableName","CustomDateTime","format","date","Alert","InfoIcon","ALERT_TYPES","QueryParamsComponent","params"],"mappings":"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"}

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),B=require("../../../assets/icons/info.svg.js"),t=require("react"),y=require("styled-components"),O=require("../../checkBox/CheckBox.js"),p=require("../../input/Input.js"),L=require("../../tooltips/Tooltip.js"),s=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),E=require("../../../assets/icons/plus.svg.js"),A=require("../context/templateModalContext.js"),I=require("./VariableConnector.js"),g=y.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),B=require("../../../assets/icons/info.svg.js"),r=require("react"),O=require("styled-components"),L=require("../../checkBox/CheckBox.js"),y=require("../../input/Input.js"),E=require("../../tooltips/Tooltip.js"),s=require("../../TypographyStyle.js"),c=require("../../../constants/Theme.js"),A=require("../../../assets/icons/plus.svg.js"),I=require("../context/templateModalContext.js"),_=require("./VariableConnector.js"),M=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},b=M(O),g=b.default.div`
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,M=({onFocus:m,showVariableModal:j,discountCode:i,setDiscountCode:a})=>{const{originalVariableList:c,disableEditVariable:v,setVariableCallback:V,setShowVariablePicker:S}=A.useTemplateModalContext(),[k,d]=t.useState(!1),[w,u]=t.useState(!1),[f,C]=t.useState(""),[n,h]=t.useState(!1),x=t.useRef(),T=t.useRef();t.useEffect(()=>{a&&a(i+f)},[f]);const q=()=>c.some(r=>r.updatedValue.replace("{{","").replace("}}","")==="checkout.checkoutUrl");t.useEffect(()=>{q()?(d(!0),i&&h(!0)):(d(!1),h?.(!1),a?.(""))},[c]);const R=r=>{C(r.actualValue)};return e.jsxs(g,{children:[e.jsxs("div",{style:{padding:8},children:[e.jsxs("div",{style:{display:"flex",gap:8,alignItems:"center",marginBottom:4},children:[e.jsx(s.TitleRegular,{style:{color:o.COLORS.content.primary},children:"Edit variables and links"}),e.jsx(L.Tooltip,{body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them",children:e.jsx("div",{style:{display:"flex"},children:e.jsx(B.default,{width:20,height:20,color:o.COLORS.content.placeholder})})})]}),e.jsx(s.BodySecondary,{style:{color:o.COLORS.content.secondary},children:"You can view variables and links on the left underlined in purple colour."})]}),c?.map((r,l)=>!r.isEditableVariable||v?e.jsxs("div",{style:{margin:"16px 8px"},children:[e.jsxs(s.BodySecondary,{style:{color:o.COLORS.content.primary},children:["Locked variable ",l+1]}),e.jsx(p.Input,{state:"disabled",placeholder:r.variableName,onChangeText:()=>{}})]},l):e.jsx("div",{style:{marginTop:16},children:e.jsx(I.default,{index:l,variable:r,onFocus:()=>m?.(l),showVariableModal:j,setShowDiscountCheckBox:d})},l)),(k||i)&&e.jsxs("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[e.jsx(O.CheckBox,{isChecked:n,onValueChange:()=>{n&&a&&a(""),h(!n)}}),e.jsx(s.TitleSmall,{style:{marginLeft:8},children:"Add discount code"})]}),n&&e.jsxs("div",{ref:x,style:{margin:10},children:[e.jsx(p.Input,{placeholder:"Enter your discount code",onChangeText:r=>{a&&a(r)},value:i,onFocus:()=>{u(!0)},onBlur:r=>{r.relatedTarget?.id==="addVar"?(x.current&&x.current.focus(),u(!0)):u(!1)},noErrorHint:!0,validate:r=>[!0,""]}),w&&e.jsx(b,{ref:T,id:"addVar",onClick:r=>{r.stopPropagation(),V(()=>R),S(!0)},children:e.jsxs("div",{className:"add",children:[e.jsx(E.default,{width:20,height:20,color:"white"}),e.jsx("div",{className:"variable",children:"Add variable"})]})})]})]})},b=y.button`
+`,N=({onFocus:a,showVariableModal:j,discountCode:n,setDiscountCode:l})=>{const{originalVariableList:d,disableEditVariable:v,setVariableCallback:V,setShowVariablePicker:S}=I.useTemplateModalContext(),[k,u]=r.useState(!1),[w,h]=r.useState(!1),[p,C]=r.useState(""),[o,f]=r.useState(!1),x=r.useRef(),T=r.useRef();r.useEffect(()=>{l&&l(n+p)},[p]);const q=()=>d.some(t=>t.updatedValue.replace("{{","").replace("}}","")==="checkout.checkoutUrl");r.useEffect(()=>{q()?(u(!0),n&&f(!0)):(u(!1),f?.(!1),l?.(""))},[d]);const R=t=>{C(t.actualValue)};return e.jsxs(g,{children:[e.jsxs("div",{style:{padding:8},children:[e.jsxs("div",{style:{display:"flex",gap:8,alignItems:"center",marginBottom:4},children:[e.jsx(s.TitleRegular,{style:{color:c.COLORS.content.primary},children:"Edit variables and links"}),e.jsx(E.Tooltip,{body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them",children:e.jsx("div",{style:{display:"flex"},children:e.jsx(B.default,{width:20,height:20,color:c.COLORS.content.placeholder})})})]}),e.jsx(s.BodySecondary,{style:{color:c.COLORS.content.secondary},children:"You can view variables and links on the left underlined in purple colour."})]}),d?.map((t,i)=>!t.isEditableVariable||v?e.jsxs("div",{style:{margin:"16px 8px"},children:[e.jsxs(s.BodySecondary,{style:{color:c.COLORS.content.primary},children:["Locked variable ",i+1]}),e.jsx(y.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]},i):e.jsx("div",{style:{marginTop:16},children:e.jsx(_.default,{index:i,variable:t,onFocus:()=>a?.(i),showVariableModal:j,setShowDiscountCheckBox:u})},i)),(k||n)&&e.jsxs("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[e.jsx(L.CheckBox,{isChecked:o,onValueChange:()=>{o&&l&&l(""),f(!o)}}),e.jsx(s.TitleSmall,{style:{marginLeft:8},children:"Add discount code"})]}),o&&e.jsxs("div",{ref:x,style:{margin:10},children:[e.jsx(y.Input,{placeholder:"Enter your discount code",onChangeText:t=>{l&&l(t)},value:n,onFocus:()=>{h(!0)},onBlur:t=>{t.relatedTarget?.id==="addVar"?(x.current&&x.current.focus(),h(!0)):h(!1)},noErrorHint:!0,validate:t=>[!0,""]}),w&&e.jsx(m,{ref:T,id:"addVar",onClick:t=>{t.stopPropagation(),V(()=>R),S(!0)},children:e.jsxs("div",{className:"add",children:[e.jsx(A.default,{width:20,height:20,color:"white"}),e.jsx("div",{className:"variable",children:"Add variable"})]})})]})]})},m=b.default.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,5 +25,5 @@
 		align-items: center;
 		gap: 5px;
 	}
-`;exports.AddVariableStyled=b;exports.Container=g;exports.default=M;
+`;exports.AddVariableStyled=m;exports.Container=g;exports.default=N;
 //# sourceMappingURL=VariableConnectorsPanel.js.map

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableConnectorsPanel.js","sources":["../../../../../src/components/template-context-mapper/modalElements/VariableConnectorsPanel.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { CUSTOM_VARIABLE } from '@src/components/template-preview/models/TemplateMeta';\nimport { Tooltip } from '@src/components/tooltips/Tooltip';\nimport {\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport PlusIcon from '../../../assets/icons/plus.svg';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport VariableConnector from './VariableConnector';\n\nexport const Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport interface VariableConnectorsProps {\n\tonFocus?: (variableIndex: number) => void;\n\tshowVariableModal?: boolean;\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}\n\nconst VariableConnectors = ({\n\tonFocus,\n\tshowVariableModal,\n\tdiscountCode,\n\tsetDiscountCode,\n}: VariableConnectorsProps) => {\n\tconst {\n\t\toriginalVariableList,\n\t\tdisableEditVariable,\n\t\tsetVariableCallback,\n\t\tsetShowVariablePicker,\n\t} = useTemplateModalContext();\n\tconst [showDiscountCheckBox, setShowDiscountCheckBox] =\n\t\tuseState<boolean>(false);\n\tconst [showAddVariable, setShowAddVariable] = useState<boolean>(false);\n\tconst [variableValue, setVariableValue] = useState<string>('');\n\tconst [isChecked, setIsChecked] = useState<boolean>(false);\n\n\tconst superRef = useRef<any>();\n\tconst varRef = useRef<any>();\n\n\tuseEffect(() => {\n\t\tif (setDiscountCode) {\n\t\t\tsetDiscountCode(discountCode + variableValue);\n\t\t}\n\t}, [variableValue]);\n\n\tconst shouldShowDiscountBox = () => {\n\t\treturn (originalVariableList as CUSTOM_VARIABLE[]).some((variable) => {\n\t\t\treturn (\n\t\t\t\tvariable.updatedValue.replace('{{', '').replace('}}', '') ===\n\t\t\t\t'checkout.checkoutUrl'\n\t\t\t);\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (shouldShowDiscountBox()) {\n\t\t\tsetShowDiscountCheckBox(true);\n\t\t\tif (discountCode) {\n\t\t\t\tsetIsChecked(true);\n\t\t\t}\n\t\t} else {\n\t\t\tsetShowDiscountCheckBox(false);\n\t\t\tsetIsChecked?.(false);\n\t\t\tsetDiscountCode?.('');\n\t\t}\n\t}, [originalVariableList]);\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetVariableValue(variable.actualValue);\n\t};\n\n\treturn (\n\t\t<Container>\n\t\t\t<div style={{ padding: 8 }}>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tmarginBottom: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleRegular style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\tEdit variables and links\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={\n\t\t\t\t\t\t\t'Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</div>\n\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\tYou can view variables and links on the left underlined in purple\n\t\t\t\t\tcolour.\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\n\t\t\t{(originalVariableList as CUSTOM_VARIABLE[])?.map((variable, i) => {\n\t\t\t\tif (!variable.isEditableVariable \|\| disableEditVariable) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div style={{ margin: `16px 8px` }} key={i}>\n\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\tLocked variable {i + 1}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tstate={'disabled'}\n\t\t\t\t\t\t\t\t// disableMarginBottom\n\t\t\t\t\t\t\t\tplaceholder={variable.variableName}\n\t\t\t\t\t\t\t\tonChangeText={() => {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}} // containerStyle={styles.inputStyle}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div style={{ marginTop: 16 }} key={i}>\n\t\t\t\t\t\t<VariableConnector\n\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\tvariable={variable}\n\t\t\t\t\t\t\tonFocus={() => onFocus?.(i)}\n\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\tsetShowDiscountCheckBox={setShowDiscountCheckBox}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t\t{(showDiscountCheckBox \|\| discountCode) && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>Add discount code</TitleSmall>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{isChecked && (\n\t\t\t\t<div ref={superRef} style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tplaceholder={'Enter your discount code'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={discountCode}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\tif (e.relatedTarget?.id === 'addVar') {\n\t\t\t\t\t\t\t\tif (superRef.current) {\n\t\t\t\t\t\t\t\t\t(superRef.current as any).focus();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetShowAddVariable(false);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showAddVariable && (\n\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\tref={varRef}\n\t\t\t\t\t\t\tid={'addVar'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t<PlusIcon width={20} height={20} color=\"white\" />\n\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default VariableConnectors;\n\nexport const AddVariableStyled = styled.button`\n\tpadding: 2px 8px;\n\tcursor: pointer;\n\tcolor: white;\n\tbackground-color: black;\n\twidth: fit-content;\n\tfloat: right;\n\tmargin-top: 0px;\n\tfont-family: Inter;\n\tfont-style: normal;\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tline-height: 20px;\n\talign-self: flex-end;\n\tborder-radius: 4px;\n\tborder: 1px solid #ccc;\n\tmargin-right: 1px;\n\n\t.add {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t}\n`;\n"],"names":["Container","styled","VariableConnectors","onFocus","showVariableModal","discountCode","setDiscountCode","originalVariableList","disableEditVariable","setVariableCallback","setShowVariablePicker","useTemplateModalContext","showDiscountCheckBox","setShowDiscountCheckBox","useState","showAddVariable","setShowAddVariable","variableValue","setVariableValue","isChecked","setIsChecked","superRef","useRef","varRef","useEffect","shouldShowDiscountBox","variable","handleVariableCallback","jsxs","jsx","TitleRegular","COLORS","Tooltip","InfoIcon","BodySecondary","i","Input","VariableConnector","CheckBox","TitleSmall","value","e","_","AddVariableStyled","PlusIcon"],"mappings":"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"}
1	+ {"version":3,"file":"VariableConnectorsPanel.js","sources":["../../../../../src/components/template-context-mapper/modalElements/VariableConnectorsPanel.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { CUSTOM_VARIABLE } from '@src/components/template-preview/models/TemplateMeta';\nimport { Tooltip } from '@src/components/tooltips/Tooltip';\nimport {\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport PlusIcon from '../../../assets/icons/plus.svg';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport VariableConnector from './VariableConnector';\n\nexport const Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport interface VariableConnectorsProps {\n\tonFocus?: (variableIndex: number) => void;\n\tshowVariableModal?: boolean;\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}\n\nconst VariableConnectors = ({\n\tonFocus,\n\tshowVariableModal,\n\tdiscountCode,\n\tsetDiscountCode,\n}: VariableConnectorsProps) => {\n\tconst {\n\t\toriginalVariableList,\n\t\tdisableEditVariable,\n\t\tsetVariableCallback,\n\t\tsetShowVariablePicker,\n\t} = useTemplateModalContext();\n\tconst [showDiscountCheckBox, setShowDiscountCheckBox] =\n\t\tuseState<boolean>(false);\n\tconst [showAddVariable, setShowAddVariable] = useState<boolean>(false);\n\tconst [variableValue, setVariableValue] = useState<string>('');\n\tconst [isChecked, setIsChecked] = useState<boolean>(false);\n\n\tconst superRef = useRef<any>();\n\tconst varRef = useRef<any>();\n\n\tuseEffect(() => {\n\t\tif (setDiscountCode) {\n\t\t\tsetDiscountCode(discountCode + variableValue);\n\t\t}\n\t}, [variableValue]);\n\n\tconst shouldShowDiscountBox = () => {\n\t\treturn (originalVariableList as CUSTOM_VARIABLE[]).some((variable) => {\n\t\t\treturn (\n\t\t\t\tvariable.updatedValue.replace('{{', '').replace('}}', '') ===\n\t\t\t\t'checkout.checkoutUrl'\n\t\t\t);\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (shouldShowDiscountBox()) {\n\t\t\tsetShowDiscountCheckBox(true);\n\t\t\tif (discountCode) {\n\t\t\t\tsetIsChecked(true);\n\t\t\t}\n\t\t} else {\n\t\t\tsetShowDiscountCheckBox(false);\n\t\t\tsetIsChecked?.(false);\n\t\t\tsetDiscountCode?.('');\n\t\t}\n\t}, [originalVariableList]);\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetVariableValue(variable.actualValue);\n\t};\n\n\treturn (\n\t\t<Container>\n\t\t\t<div style={{ padding: 8 }}>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tmarginBottom: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleRegular style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\tEdit variables and links\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={\n\t\t\t\t\t\t\t'Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</div>\n\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\tYou can view variables and links on the left underlined in purple\n\t\t\t\t\tcolour.\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\n\t\t\t{(originalVariableList as CUSTOM_VARIABLE[])?.map((variable, i) => {\n\t\t\t\tif (!variable.isEditableVariable \|\| disableEditVariable) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div style={{ margin: `16px 8px` }} key={i}>\n\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\tLocked variable {i + 1}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tstate={'disabled'}\n\t\t\t\t\t\t\t\t// disableMarginBottom\n\t\t\t\t\t\t\t\tplaceholder={variable.variableName}\n\t\t\t\t\t\t\t\tonChangeText={() => {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}} // containerStyle={styles.inputStyle}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div style={{ marginTop: 16 }} key={i}>\n\t\t\t\t\t\t<VariableConnector\n\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\tvariable={variable}\n\t\t\t\t\t\t\tonFocus={() => onFocus?.(i)}\n\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\tsetShowDiscountCheckBox={setShowDiscountCheckBox}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t\t{(showDiscountCheckBox \|\| discountCode) && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>Add discount code</TitleSmall>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{isChecked && (\n\t\t\t\t<div ref={superRef} style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tplaceholder={'Enter your discount code'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={discountCode}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\tif (e.relatedTarget?.id === 'addVar') {\n\t\t\t\t\t\t\t\tif (superRef.current) {\n\t\t\t\t\t\t\t\t\t(superRef.current as any).focus();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetShowAddVariable(false);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showAddVariable && (\n\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\tref={varRef}\n\t\t\t\t\t\t\tid={'addVar'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t<PlusIcon width={20} height={20} color=\"white\" />\n\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default VariableConnectors;\n\nexport const AddVariableStyled = styled.button`\n\tpadding: 2px 8px;\n\tcursor: pointer;\n\tcolor: white;\n\tbackground-color: black;\n\twidth: fit-content;\n\tfloat: right;\n\tmargin-top: 0px;\n\tfont-family: Inter;\n\tfont-style: normal;\n\tfont-weight: 600;\n\tfont-size: 14px;\n\tline-height: 20px;\n\talign-self: flex-end;\n\tborder-radius: 4px;\n\tborder: 1px solid #ccc;\n\tmargin-right: 1px;\n\n\t.add {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 5px;\n\t}\n`;\n"],"names":["Container","styled","VariableConnectors","onFocus","showVariableModal","discountCode","setDiscountCode","originalVariableList","disableEditVariable","setVariableCallback","setShowVariablePicker","useTemplateModalContext","showDiscountCheckBox","setShowDiscountCheckBox","useState","showAddVariable","setShowAddVariable","variableValue","setVariableValue","isChecked","setIsChecked","superRef","useRef","varRef","useEffect","shouldShowDiscountBox","variable","handleVariableCallback","jsxs","jsx","TitleRegular","COLORS","Tooltip","InfoIcon","BodySecondary","Input","VariableConnector","CheckBox","TitleSmall","value","e","_","AddVariableStyled","PlusIcon"],"mappings":"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"}

package/dist/cjs/components/template-context-mapper/modalElements/VariableEditorHeader.js CHANGED Viewed

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("../../../assets/icons/info.svg.js"),r=require("styled-components"),a=require("../../tooltips/Tooltip.js"),o=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),c=r(o.BodySecondary)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),s=require("styled-components"),c=require("../../tooltips/Tooltip.js"),r=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=u(s),p=l.default(r.BodySecondary)`
 	line-height: 1.5 !important;
-`,h=r.div`
+`,h=l.default.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`,p=({headerText:l,subText:n,toolTipInfo:i,containerStyle:d})=>e.jsxs(h,{style:{...d},children:[e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx(o.TitleRegular,{style:{color:t.COLORS.content.primary},children:l}),i&&e.jsx(a.Tooltip,{body:i,children:e.jsx("div",{children:e.jsx(s.default,{width:20,height:20,color:t.COLORS.content.placeholder})})})]}),e.jsx(c,{style:{color:t.COLORS.content.secondary,marginBottom:0,lineHeight:20,display:"block"},children:n})]});exports.default=p;
+`,y=({headerText:e,subText:n,toolTipInfo:o,containerStyle:d})=>t.jsxs(h,{style:{...d},children:[t.jsxs("div",{style:{display:"flex",gap:8},children:[t.jsx(r.TitleRegular,{style:{color:i.COLORS.content.primary},children:e}),o&&t.jsx(c.Tooltip,{body:o,children:t.jsx("div",{children:t.jsx(a.default,{width:20,height:20,color:i.COLORS.content.placeholder})})})]}),t.jsx(p,{style:{color:i.COLORS.content.secondary,marginBottom:0,lineHeight:20,display:"block"},children:n})]});exports.default=y;
 //# sourceMappingURL=VariableEditorHeader.js.map

package/dist/cjs/components/template-context-mapper/modalElements/VariableEditorHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableEditorHeader.js","sources":["../../../../../src/components/template-context-mapper/modalElements/VariableEditorHeader.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport { type CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport { Tooltip } from '@src/components/tooltips/Tooltip';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nconst SubTitle = styled(BodySecondary)`\n\tline-height: 1.5 !important;\n`;\n\nconst VariableEditorHeaderContainer = styled.div`\n\tpadding-top: 24px;\n\tpadding-left: 10px;\n\tpadding-right: 10px;\n\tmargin-bottom: 8px;\n\tline-height: normal;\n`;\n\nexport interface VariableEditorHeaderProps {\n\theaderText: string;\n\tsubText: string;\n\ttoolTipInfo?: string;\n\tcontainerStyle?: CSSProperties;\n}\nconst VariableEditorHeader = ({\n\theaderText,\n\tsubText,\n\ttoolTipInfo,\n\tcontainerStyle,\n}: VariableEditorHeaderProps) => {\n\treturn (\n\t\t<VariableEditorHeaderContainer\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: 8,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<TitleRegular style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t{headerText}\n\t\t\t\t</TitleRegular>\n\t\t\t\t{toolTipInfo && (\n\t\t\t\t\t<Tooltip body={toolTipInfo}>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<SubTitle\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\tmarginBottom: 0,\n\t\t\t\t\tlineHeight: 20,\n\t\t\t\t\tdisplay: 'block',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{subText}\n\t\t\t</SubTitle>\n\t\t</VariableEditorHeaderContainer>\n\t);\n};\n\nexport default VariableEditorHeader;\n"],"names":["SubTitle","styled","BodySecondary","VariableEditorHeaderContainer","VariableEditorHeader","headerText","subText","toolTipInfo","containerStyle","jsxs","jsx","TitleRegular","COLORS","Tooltip","InfoIcon"],"mappings":"~~qVAOMA~~,EAAWC,~~EAAOC~~,eAAa;AAAA;AAAA,EAI/BC,EAAgCF,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcvCG,EAAuB,CAAC,CAC7B,WAAAC,EACA,QAAAC,EACA,YAAAC,EACA,eAAAC,CACD,IAEEC,EAAAA,KAACN,EAAA,CACA,MAAO,CACN,GAAGK,CAAA,EAGJ,SAAA,CAAAC,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,IAAK,CAAA,EAGN,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,CAAa,MAAO,CAAE,MAAOC,SAAO,QAAQ,OAAA,EAC3C,SAAAP,CAAA,CACF,EACCE,GACAG,EAAAA,IAACG,UAAA,CAAQ,KAAMN,EACd,eAAC,MAAA,CACA,SAAAG,EAAAA,IAACI,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAExB,CAAA,CACD,CAAA,CAAA,CAAA,EAGFF,EAAAA,IAACV,EAAA,CACA,MAAO,CACN,MAAOY,EAAAA,OAAO,QAAQ,UACtB,aAAc,EACd,WAAY,GACZ,QAAS,OAAA,EAGT,SAAAN,CAAA,CAAA,CACF,CAAA,CAAA"}
1	+ {"version":3,"file":"VariableEditorHeader.js","sources":["../../../../../src/components/template-context-mapper/modalElements/VariableEditorHeader.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport { type CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport { Tooltip } from '@src/components/tooltips/Tooltip';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nconst SubTitle = styled(BodySecondary)`\n\tline-height: 1.5 !important;\n`;\n\nconst VariableEditorHeaderContainer = styled.div`\n\tpadding-top: 24px;\n\tpadding-left: 10px;\n\tpadding-right: 10px;\n\tmargin-bottom: 8px;\n\tline-height: normal;\n`;\n\nexport interface VariableEditorHeaderProps {\n\theaderText: string;\n\tsubText: string;\n\ttoolTipInfo?: string;\n\tcontainerStyle?: CSSProperties;\n}\nconst VariableEditorHeader = ({\n\theaderText,\n\tsubText,\n\ttoolTipInfo,\n\tcontainerStyle,\n}: VariableEditorHeaderProps) => {\n\treturn (\n\t\t<VariableEditorHeaderContainer\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: 8,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<TitleRegular style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t{headerText}\n\t\t\t\t</TitleRegular>\n\t\t\t\t{toolTipInfo && (\n\t\t\t\t\t<Tooltip body={toolTipInfo}>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<SubTitle\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\tmarginBottom: 0,\n\t\t\t\t\tlineHeight: 20,\n\t\t\t\t\tdisplay: 'block',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{subText}\n\t\t\t</SubTitle>\n\t\t</VariableEditorHeaderContainer>\n\t);\n};\n\nexport default VariableEditorHeader;\n"],"names":["SubTitle","styled","BodySecondary","VariableEditorHeaderContainer","VariableEditorHeader","headerText","subText","toolTipInfo","containerStyle","jsxs","jsx","TitleRegular","COLORS","Tooltip","InfoIcon"],"mappings":"oZAOMA,EAAWC,EAAAA,QAAOC,eAAa;AAAA;AAAA,EAI/BC,EAAgCF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcvCG,EAAuB,CAAC,CAC7B,WAAAC,EACA,QAAAC,EACA,YAAAC,EACA,eAAAC,CACD,IAEEC,EAAAA,KAACN,EAAA,CACA,MAAO,CACN,GAAGK,CAAA,EAGJ,SAAA,CAAAC,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,IAAK,CAAA,EAGN,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,CAAa,MAAO,CAAE,MAAOC,SAAO,QAAQ,OAAA,EAC3C,SAAAP,CAAA,CACF,EACCE,GACAG,EAAAA,IAACG,UAAA,CAAQ,KAAMN,EACd,eAAC,MAAA,CACA,SAAAG,EAAAA,IAACI,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAExB,CAAA,CACD,CAAA,CAAA,CAAA,EAGFF,EAAAA,IAACV,EAAA,CACA,MAAO,CACN,MAAOY,EAAAA,OAAO,QAAQ,UACtB,aAAc,EACd,WAAY,GACZ,QAAS,OAAA,EAGT,SAAAN,CAAA,CAAA,CACF,CAAA,CAAA"}