@bikdotai/bik-component-library 0.0.407-beta.4 → 0.0.407-beta.6

package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js

@@ -1,12 +1,12 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";const s=a.div`
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import o from"styled-components";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getPreviewWidth as s}from"../utils/getPreviewDimension.js";const l=o.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${e=>e.channel===r.WHATSAPP?"236px":"300px"};
+	width: ${e=>s(e.channel)}px;
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,m=a.div`
+`,m=o.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,n=i.forwardRef(((i,a)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=l();return e("div",{children:t(s,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:h===r.WHATSAPP?236:300,height:443}}),e(m,Object.assign({ref:a},{children:e(o,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));n.displayName="MobilePreview";export{n as default};
+`,n=i.forwardRef(((i,o)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=r();return e("div",{children:t(l,Object.assign({channel:h},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s(h),height:443}}),e(m,Object.assign({ref:o},{children:e(a,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));n.displayName="MobilePreview";export{n as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js

@@ -4,4 +4,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/
 	background: ${e=>e.focused&&e.channel===m.EMAIL?x.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,O={value:"custom_link",label:"Custom URL"},y={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"},k=o=>{let{onFocus:k,variable:V,index:A,showVariableModal:E,variableList:S,setShowDiscountCheckBox:w,componentType:P,CTAoptions:C}=o;var D,B;const[L,H]=i(!1),[N,M]=i(""),[W,$]=i([]),[I,R]=i(),[U,z]=i(!1),[Y,Z]=i(!1),{device:G,channel:q,isError:F,originalVariableList:J,template:K,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie}=j();function ne(e,t){var l,a,i;const n=e;M(""),console.log("vj: single option",n),R(n),q===m.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(se(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ue||ue(null!==(a=V.index)&&void 0!==a?a:0,n.value,!0)):(null==ue||ue(null!==(i=V.index)&&void 0!==i?i:0,V.variableName,!0,"custom_text"),se("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?se(n.value,"url"===n.bikPlaceholderType?"link":"string"):(M(""),se("",n.value))}function oe(e,t){var l;M(t);const a="custom_link"===(null==I?void 0:I.value)&&t?t.includes("https")?t:`https://${t}`:t;se(a,"static_expiry"===e?"string":e),q===m.WHATSAPP&&(null==ue||ue(null!==(l=V.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function se(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(q!==m.WHATSAPP){const a=_(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),n=q===m.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:V.variableName);const s=J.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(q===m.WHATSAPP){const l=J;let s=l.body,u=l.header,d=l.buttons;"BODY"===P?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===P?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===P&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==te||te((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ue(e,t,l,a){var i,n,o,s;const u=Object.assign({},K),d=null===(i=null==u?void 0:u.components)||void 0===i?void 0:i.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===P){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));u.components=d,l&&("BODY"===P&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))}):"HEADER"===P&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))}):"BUTTONS"===P&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((l,i)=>i===e?"custom_link"===a?"((customPlaceholderName))":t:l))}))),null==X||X(Object.assign({},u))}return console.log("vj: variable",V),n((()=>{L&&(null==k||k())}),[L]),n((()=>{!function(){var e,t,l,a,i;const n="mobile"===G?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);q===m.EMAIL&&(null==ee||ee(s))}()}),[Q]),n((()=>{var e;const t=[];let l=[];if(q!==m.MESSAGE||ae){"link"===(null==V?void 0:V.type)?(t.push({label:"",options:[O,y,T]}),R(O)):"date_time"===(null==V?void 0:V.type)?(t.push({label:"",options:[O,y,T]}),R(T)):(t.push({label:"",options:[O,y,T]}),R(y));const e=null!=le?le:[];$([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}else{const e=null!=le?le:[];$([{label:"",options:[y,O]},...e]),l=[{label:"",options:[y,O]},...e]}if((q===m.WHATSAPP||q===m.EMAIL||q===m.MESSAGE)&&V.updatedValue)if(p.test(V.updatedValue)&&q===m.WHATSAPP||V.updatedValue.startsWith("{{")&&q!==m.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===m.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(E){let t=e.updatedValue;if(ie===v.CHATBOT&&"BUTTONS"===P){const l=null==C?void 0:C.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(V,l,q);e.value&&R(e)}else"date_time"===V.type?(R(T),M(V.updatedValue)):(null===(e=V.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(R(O),M(V.updatedValue.split("https://")[1])):(R(y),M(V.updatedValue))}),[]),n((()=>{G&&I&&N&&setTimeout((()=>{se("custom_link"===(null==I?void 0:I.value)&&N?N.includes("https")?N:`https://${N}`:N,I.value)}),100)}),[G]),n((()=>{!Y&&I&&V.updatedValue&&setTimeout((()=>{se("custom_link"===(null==I?void 0:I.value)&&V.updatedValue?V.updatedValue.includes("https")?V.updatedValue:`https://${V.updatedValue}`:V.updatedValue,I.value),Z(!0)}),100)}),[I]),e(f,Object.assign({channel:q,focused:L,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:F&&!I?x.content.negative:x.content.primary}},{children:[null===(D=V.variableName)||void 0===D?void 0:D.replace("{{","").replace("}}","")," ","link"===(null==V?void 0:V.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:E?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==I?void 0:I.label)?"space-between":"flex-end"}},{children:[t(g,{children:c(null!==(B=null==I?void 0:I.label)&&void 0!==B?B:"",20,!0)}),t(l,{onClick:()=>{z(!U)},width:24,height:24,color:x.content.primary})]})):t(d,{options:W,isSearchable:!1,onSelect:ne,defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),("custom_text"===(null==I?void 0:I.value)||"custom_link"===(null==I?void 0:I.value))&&t(r,{labelText:"custom_text"===(null==I?void 0:I.value)?"Custom text value":"custom_link"===(null==I?void 0:I.value)?"Custom URL value":"",id:`variable-value-${null==I?void 0:I.value}-${A}`,value:N,errorMessage:F?N&&0!==N.trim().length?"custom_link"!==I.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${N.trim()}`)&&0!==N.trim().length?"custom_link"!==I.value&&N.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==I?void 0:I.value)?void 0:30,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"link"===V.type||"custom_link"===I.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{oe(I.value,e)}}),"static_expiry"===(null==I?void 0:I.value)&&t(u,{placement:"auto",time:a(N?new Date(N):new Date,"hh:mm a"),date:N?new Date(N):new Date,minDate:new Date,error:"",setError:function(e){},onChange:e=>{console.log("vj: change date",e),oe("static_expiry",e.toISOString())}}),U&&t(s,{zIndex:2e3,data:null!=S?S:[],showVariable:U,setShowVariable:z,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"static_expiry"}):ne({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{f as Container,k as default};
+`,O={value:"custom_link",label:"Custom URL"},y={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"},V=o=>{let{onFocus:V,variable:k,index:A,showVariableModal:E,variableList:S,setShowDiscountCheckBox:w,componentType:P,CTAoptions:C}=o;var D,B;const[L,H]=i(!1),[N,M]=i(""),[W,$]=i([]),[I,R]=i(),[U,z]=i(!1),[Y,Z]=i(!1),{device:G,channel:q,isError:F,originalVariableList:J,template:K,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie}=j();function ne(e,t){var l,a,i;const n=e;M(""),console.log("vj: single option",n),R(n),q===m.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(se(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ue||ue(null!==(a=k.index)&&void 0!==a?a:0,n.value,!0)):(null==ue||ue(null!==(i=k.index)&&void 0!==i?i:0,N,!0,n.value),se("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?se(n.value,"url"===n.bikPlaceholderType?"link":"string"):(M(""),se("",n.value))}function oe(e,t){var l;M(t);const a="custom_link"===(null==I?void 0:I.value)&&t?t.includes("https")?t:`https://${t}`:t;se(a,"static_expiry"===e?"string":e),q===m.WHATSAPP&&(null==ue||ue(null!==(l=k.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function se(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(q!==m.WHATSAPP){const a=_(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),n=q===m.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:k.variableName);const s=J.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(q===m.WHATSAPP){const l=J;let s=l.body,u=l.header,d=l.buttons;"BODY"===P?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===P?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===P&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==te||te((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ue(e,t,l,a){var i,n,o,s;const u=Object.assign({},K);console.log("vj: update",{index:e,newValue:t,type:a});const d=null===(i=null==u?void 0:u.components)||void 0===i?void 0:i.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===P){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));console.log("vj: update components",d),u.components=d,l&&("BODY"===P&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))}):"HEADER"===P&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))}):"BUTTONS"===P&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((l,i)=>i===e?"custom_link"===a?"((customPlaceholderName))":t:l))}))),null==X||X(Object.assign({},u))}return n((()=>{L&&(null==V||V())}),[L]),n((()=>{!function(){var e,t,l,a,i;const n="mobile"===G?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);q===m.EMAIL&&(null==ee||ee(s))}()}),[Q]),n((()=>{var e;const t=[];let l=[];if(q!==m.MESSAGE||ae){"link"===(null==k?void 0:k.type)?(t.push({label:"",options:[O,y]}),R(O)):"date_time"===(null==k?void 0:k.type)?(t.push({label:"",options:[O,y]}),R(T)):(t.push({label:"",options:[O,y,T]}),R(y));const e=null!=le?le:[];$([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}else{const e=null!=le?le:[];$([{label:"",options:[y,O]},...e]),l=[{label:"",options:[y,O]},...e]}if((q===m.WHATSAPP||q===m.EMAIL||q===m.MESSAGE)&&k.updatedValue)if(p.test(k.updatedValue)&&q===m.WHATSAPP||k.updatedValue.startsWith("{{")&&q!==m.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===m.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(E){let t=e.updatedValue;if(ie===v.CHATBOT&&"BUTTONS"===P){const l=null==C?void 0:C.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(k,l,q);e.value&&R(e)}else"date_time"===k.type?(R(T),M(k.updatedValue)):(null===(e=k.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(R(O),M(k.updatedValue.split("https://")[1])):(R(y),M(k.updatedValue))}),[]),n((()=>{G&&I&&N&&setTimeout((()=>{se("custom_link"===(null==I?void 0:I.value)&&N?N.includes("https")?N:`https://${N}`:N,I.value)}),100)}),[G]),n((()=>{!Y&&I&&k.updatedValue&&setTimeout((()=>{se("custom_link"===(null==I?void 0:I.value)&&k.updatedValue?k.updatedValue.includes("https")?k.updatedValue:`https://${k.updatedValue}`:k.updatedValue,I.value),Z(!0)}),100)}),[I]),e(f,Object.assign({channel:q,focused:L,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:F&&!I?x.content.negative:x.content.primary}},{children:[null===(D=k.variableName)||void 0===D?void 0:D.replace("{{","").replace("}}","")," ","link"===(null==k?void 0:k.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:E?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==I?void 0:I.label)?"space-between":"flex-end"}},{children:[t(g,{children:c(null!==(B=null==I?void 0:I.label)&&void 0!==B?B:"",20,!0)}),t(l,{onClick:()=>{z(!U)},width:24,height:24,color:x.content.primary})]})):t(d,{options:W,isSearchable:!1,onSelect:ne,defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),("custom_text"===(null==I?void 0:I.value)||"custom_link"===(null==I?void 0:I.value))&&t(r,{labelText:"custom_text"===(null==I?void 0:I.value)?"Custom text value":"custom_link"===(null==I?void 0:I.value)?"Custom URL value":"",id:`variable-value-${null==I?void 0:I.value}-${A}`,value:N,errorMessage:F?N&&0!==N.trim().length?"custom_link"!==I.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${N.trim()}`)&&0!==N.trim().length?"custom_link"!==I.value&&N.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==I?void 0:I.value)?2e3:30,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"link"===k.type||"custom_link"===I.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{oe(I.value,e)}}),"static_expiry"===(null==I?void 0:I.value)&&t(u,{placement:"auto",time:a(N?new Date(N):new Date,"hh:mm a"),date:N?new Date(N):new Date,minDate:new Date,error:"",setError:function(e){},onChange:e=>{console.log("vj: change date",e),oe("static_expiry",e.toISOString())}}),U&&t(s,{zIndex:2e3,data:null!=S?S:[],showVariable:U,setShowVariable:z,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"static_expiry"}):ne({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{f as Container,V as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i,Fragment as a}from"react/jsx-runtime";import{useCallback as t,useMemo as l}from"react";import{Input as r}from"../../input/Input.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as n}from"../context/templateModalContext.js";import s from"./VariableConnector.js";const p=p=>{let{descriptionComponent:m,type:b,showVariableModal:c,variableList:v}=p;var y,x,u,h,f,E;const{originalVariableList:V,disableEditVariable:g}=n(),j=t((()=>v?[...v,{description:"",displayName:"Custom variables",orderId:1,variables:{"Static Expiry":{description:void 0,displayName:"Static Expiry",actualValue:"{{static.expiry}}",variableType:"any",isAvailable:!0}}}].sort(((e,i)=>e.orderId-i.orderId)):v),[v]),T=l((()=>j()),[j]);return"BODY"===m.type?e("div",{children:null===(y=null==V?void 0:V.body)||void 0===y?void 0:y.map(((a,t)=>g||!a.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(o,Object.assign({style:{color:d.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",t+1]})),e(r,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t):e(s,{index:t,variable:a,showVariableModal:c,variableList:v,componentType:m.type},`${t}-${a.index}`)))}):"HEADER"===m.type?e("div",{children:null===(x=null==V?void 0:V.header)||void 0===x?void 0:x.map(((a,t)=>a.isEditableVariable?e(s,{index:t,variable:a,showVariableModal:c,variableList:v,componentType:m.type},`${t}-${a.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(o,Object.assign({style:{color:d.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",t+1]})),e(r,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t)))}):"limited_time_offer"===m.type?e("div",{children:e(s,{index:0,variable:{variableName:null!==(h=null===(u=null==m?void 0:m.limited_time_offer)||void 0===u?void 0:u.text)&&void 0!==h?h:"Expires after",updatedValue:null!==(E=null===(f=m.example)||void 0===f?void 0:f.limited_time_offer)&&void 0!==E?E:"",type:"date_time",isEditableVariable:!0,index:0},showVariableModal:c,variableList:T,componentType:m.type},`${m.type}`)}):e(a,{})};export{p as default};
+import{jsx as e,jsxs as i,Fragment as a}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import{useAdditionalVariables as d}from"../custom-hooks/useAdditionalVariables.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:m,showVariableModal:b,variableList:c}=s;var v,y,x,h,u,f;const{originalVariableList:V,disableEditVariable:E}=o(),g=d({variableList:c,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});return"BODY"===p.type?e("div",{children:null===(v=null==V?void 0:V.body)||void 0===v?void 0:v.map(((a,o)=>E||!a.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o):e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`)))}):"HEADER"===p.type?e("div",{children:null===(y=null==V?void 0:V.header)||void 0===y?void 0:y.map(((a,o)=>a.isEditableVariable?e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o)))}):"limited_time_offer"===p.type?e("div",{children:e(n,{index:0,variable:{variableName:null!==(h=null===(x=null==p?void 0:p.limited_time_offer)||void 0===x?void 0:x.text)&&void 0!==h?h:"Expires after",updatedValue:null!==(f=null===(u=p.example)||void 0===u?void 0:u.limited_time_offer)&&void 0!==f?f:"",type:"date_time",isEditableVariable:!0,index:0},showVariableModal:b,variableList:g,componentType:p.type},`${p.type}`)}):e(a,{})};export{s as default};

package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useCallback as a,useMemo as o,useEffect as i}from"react";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as r}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as d}from"../../template-preview/models/TemplateMeta.js";import{POD as p,BUTTON_TYPE as m}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as b}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{validateIsUrl as v}from"../utils/validateIsUrl.js";import f,{Container as j}from"./VariableConnector.js";const y=y=>{let{variableListIndex:g,button:h,updateSelectedURLTemplateBtn:x,updateSelectedQRBTemplateBtn:O,originalVariableList:L,CTAoptions:T,QRBoptions:V,variableList:R}=y;var U,w,I,C;const[B,N]=l(""),[H,E]=l(),S=a((()=>R?[...R,{description:"",displayName:"Custom variables",orderId:1,variables:{"Custom url":{description:void 0,displayName:"Custom url",actualValue:"{{custom.url}}",variableType:"any",isAvailable:!0}}}].sort(((e,t)=>e.orderId-t.orderId)):R),[R]),k=o((()=>S()),[S]),{setOriginalVariableList:A,isError:M,disableEditVariable:P,pod:_}=u();function Q(e){N(e);const t=[Object.assign(Object.assign({},L.buttons[0]),{type:m.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==A||A((e=>Object.assign(Object.assign({},e),{body:[...L.body],buttons:[...t]}))),null==x||x(`https://${e}`,"custom")}return i((()=>{var e;if(h.buttonVariable&&r.test(h.buttonVariable))E(d),N((null===(e=h.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===h.type?T:V;e="URL"===h.type?t.findIndex((e=>e.placeHolder===h.buttonVariable)):t.findIndex((e=>e.label===h.flowName)),e>-1&&E(t[e])}}),[]),_!==p.CHATBOT?e(j,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:c.content.primary}},{children:[h.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(s,{disabled:P,options:"URL"===h.type?T:V,isSearchable:!1,onSelect:function(e,t){const l=e;E(l);const a=("URL"===h.type?T:V).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===h.type?(e=[Object.assign(Object.assign({},L.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==x||x({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=L.buttons.map(((e,t)=>t===h.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==O||O({flowName:l.label,flowId:l.value},"placeholder",h.index)),null==A||A((t=>Object.assign(Object.assign({},t),{body:[...L.body],buttons:[...e]})))}else Q("")},defaultOptions:H?[Object.assign(Object.assign({},H),{selected:!0})]:[]})})),"custom_link"===(null==H?void 0:H.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(n,{state:P?"disabled":"none",errorMessage:M?B?v(B)?"":"Enter valid URL":"Required field":"",value:B,prefixText:"custom_link"===(null==H?void 0:H.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:Q})}))]}):t(f,{index:g,variable:{variableName:null!==(U=h.text)&&void 0!==U?U:"",updatedValue:"((customPlaceholderName))"===h.buttonVariable?`${null===(w=h.example)||void 0===w?void 0:w[0]}`:null!==(I=h.buttonVariable)&&void 0!==I?I:"",type:"link",isEditableVariable:!0,index:null!==(C=h.index)&&void 0!==C?C:0},showVariableModal:!0,componentType:"BUTTONS",variableList:k,CTAoptions:T})};export{y as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import{Dropdown as o}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as s}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as n}from"../../template-preview/models/TemplateMeta.js";import{POD as r,BUTTON_TYPE as p}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as u}from"../utils/validateIsUrl.js";import v,{Container as f}from"./VariableConnector.js";const j=j=>{let{variableListIndex:g,button:y,updateSelectedURLTemplateBtn:h,updateSelectedQRBTemplateBtn:x,originalVariableList:O,CTAoptions:L,QRBoptions:V,variableList:R}=j;var T,U,w,B;const[C,N]=l(""),[I,H]=l(),k=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{setOriginalVariableList:E,isError:S,disableEditVariable:A,pod:M}=b();function P(e){N(e);const t=[Object.assign(Object.assign({},O.buttons[0]),{type:p.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==E||E((e=>Object.assign(Object.assign({},e),{body:[...O.body],buttons:[...t]}))),null==h||h(`https://${e}`,"custom")}return a((()=>{var e;if(y.buttonVariable&&s.test(y.buttonVariable))H(n),N((null===(e=y.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===y.type?L:V;e="URL"===y.type?t.findIndex((e=>e.placeHolder===y.buttonVariable)):t.findIndex((e=>e.label===y.flowName)),e>-1&&H(t[e])}}),[]),M!==r.CHATBOT?e(f,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:m.content.primary}},{children:[y.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(o,{disabled:A,options:"URL"===y.type?L:V,isSearchable:!1,onSelect:function(e,t){const l=e;H(l);const a=("URL"===y.type?L:V).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===y.type?(e=[Object.assign(Object.assign({},O.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==h||h({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=O.buttons.map(((e,t)=>t===y.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==x||x({flowName:l.label,flowId:l.value},"placeholder",y.index)),null==E||E((t=>Object.assign(Object.assign({},t),{body:[...O.body],buttons:[...e]})))}else P("")},defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),"custom_link"===(null==I?void 0:I.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:A?"disabled":"none",errorMessage:S?C?u(C)?"":"Enter valid URL":"Required field":"",value:C,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:P})}))]}):t(v,{index:g,variable:{variableName:null!==(T=y.text)&&void 0!==T?T:"",updatedValue:"((customPlaceholderName))"===y.buttonVariable?`${null===(U=y.example)||void 0===U?void 0:U[0]}`:null!==(w=y.buttonVariable)&&void 0!==w?w:"",type:"link",isEditableVariable:!0,index:null!==(B=y.index)&&void 0!==B?B:0},showVariableModal:!0,componentType:"BUTTONS",variableList:k,CTAoptions:L})};export{j as default};

package/dist/esm/components/template-context-mapper/utils/getPreviewDimension.d.ts

@@ -0,0 +1,2 @@
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+export declare const getPreviewWidth: (channel: CHANNEL_TYPE) => 236 | 300 | 360;

package/dist/esm/components/template-context-mapper/utils/getPreviewDimension.js

@@ -0,0 +1 @@
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";const r=r=>{switch(r){case e.WHATSAPP:return 236;case e.SMS:return 300;case e.EMAIL:return 360;default:return 300}};export{r as getPreviewWidth};

package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js

@@ -1,19 +1,19 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/copy-code-icon.svg.js";import r from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/lto_icon.svg.js";import n from"../../../assets/icons/phone.svg.js";import l from"../../../assets/icons/RedirectToNew.svg.js";import a from"styled-components";import{Tooltip as p}from"../../tooltips/Tooltip.js";import{BodySecondary as d,BodyTiny as m,Caption as c}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as x,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{ChatBtn as y}from"./ChatBtn.js";import{Container as j,FooterWrapper as b,TimeStamp as T}from"./ChatUI.style.js";import{MediaCard as v}from"./MediaCard.js";const u=a.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/copy-code-icon.svg.js";import r from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import m from"styled-components";import{Tooltip as a}from"../../tooltips/Tooltip.js";import{Caption as p,BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{VariableEditorHelper as h}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as c,ACTIONS_TYPES as f}from"../models/TemplateMeta.js";import{ChatBtn as x}from"./ChatBtn.js";import{Container as y,FooterWrapper as T,TimeStamp as g}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as b}from"./MediaCard.js";const v=m.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,w=a.div`
+`,w=m.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${h.content.primary};
+	color: ${d.content.primary};
 	word-wrap: break-word;
-`,O=a(w)`
+`,u=m(w)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,C=new f,E=a=>{const{bodyText:f,footerText:E,headerMediaType:I,headerText:L,headerAssetLink:_,headerAssetName:N,quickReplybtn:R,ctaBtn:M,actionTypes:A,extras:P,showHeader:k,imagePreviewStyles:H,size:S,bodyVariableList:U,headerVariableList:z,buttons:B,limitedTimeOfferComponent:D}=a,V=C.format(f,U),Y=C.format(L,z),K={COPY_CODE:i,PHONE_NUMBER:n,URL:l,QUICK_REPLY:()=>t(o,{})};return console.log("vj: lto",{limitedTimeOfferComponent:D}),e(j,{children:[t(u,{children:t(r,{color:"white",height:8,width:8})}),I===x.TEXT?t(O,{dangerouslySetInnerHTML:{__html:Y}}):I!==x.NONE?t(v,{headerAssetLink:_,headerAssetName:N,mediaType:I,imagePreviewStyles:I===x.IMAGE?H:{}}):t(o,{}),D?e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[t("div",Object.assign({style:{width:"48px",height:"48px",display:"flex",alignItems:"center",background:"#D8F0E7",borderRadius:"24px",justifyContent:"center",margin:"5px"}},{children:t(s,{width:24,height:24,style:{display:"flex"}})})),e("div",Object.assign({style:{marginTop:"5px",marginRight:"3px",gap:"2px",display:"flex",flexDirection:"column"}},{children:[t(d,Object.assign({numberOfLines:2,color:h.content.primary},{children:D.text})),e(m,Object.assign({color:h.content.secondary},{children:["Offer Ends on ",D.dateTime]})),e(m,Object.assign({color:h.content.placeholder},{children:["Code ",D.code]}))]}))]})):t(o,{}),!!f&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:V}})}),e(b,{children:[t(p,Object.assign({body:null!=E?E:"",placement:"top"},{children:t(T,Object.assign({style:{flex:1}},{children:E}))})),t(T,{children:"16:48"})]}),B&&B.length>0?B.map(((e,o)=>t(y,{text:e.text,Icon:K[e.type],size:S},o))):A===g.QUICK_REPLY?t("div",{children:null==R?void 0:R.map(((e,o)=>t(y,{text:e.text},o)))}):A===g.CTA_BTN?t("div",{children:null==M?void 0:M.map(((e,o)=>t(y,{textTypography:k?c:d,extraContent:P?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?n:l,size:S},o)))}):t(o,{})]})};export{E as ChatUIV2};
+`,C=new h,L=m=>{const{bodyText:d,footerText:h,headerMediaType:L,headerText:O,headerAssetLink:E,headerAssetName:I,quickReplybtn:N,ctaBtn:_,actionTypes:M,extras:R,showHeader:A,imagePreviewStyles:P,size:H,bodyVariableList:S,headerVariableList:U,buttons:k,limitedTimeOfferComponent:z}=m,B=C.format(d,S),V=C.format(O,U),Y={COPY_CODE:i,PHONE_NUMBER:s,URL:n,QUICK_REPLY:()=>t(o,{})};return console.log("vj: lto",{limitedTimeOfferComponent:z}),e(y,{children:[t(v,{children:t(r,{color:"white",height:8,width:8})}),L===c.TEXT?t(u,{dangerouslySetInnerHTML:{__html:V}}):L!==c.NONE?t(b,{headerAssetLink:E,headerAssetName:I,mediaType:L,imagePreviewStyles:L===c.IMAGE?P:{}}):t(o,{}),z?t(j,{text:z.text,dateTime:z.dateTime,code:z.code}):t(o,{}),!!d&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:B}})}),e(T,{children:[t(a,Object.assign({body:null!=h?h:"",placement:"top"},{children:t(g,Object.assign({style:{flex:1}},{children:h}))})),t(g,{children:"16:48"})]}),k&&k.length>0?k.map(((e,o)=>t(x,{text:e.text,Icon:Y[e.type],size:H},o))):M===f.QUICK_REPLY?t("div",{children:null==N?void 0:N.map(((e,o)=>t(x,{text:e.text},o)))}):M===f.CTA_BTN?t("div",{children:null==_?void 0:_.map(((e,o)=>t(x,{textTypography:A?p:l,extraContent:R?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:H},o)))}):t(o,{})]})};export{L as ChatUIV2};

package/dist/esm/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.d.ts

@@ -0,0 +1,5 @@
+import { CreateTemplateType } from '../../models/WhatsAppTemplate';
+export declare const LimitedTimeOffer: (props: CreateTemplateType['limitedTimeOfferComponent']) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledLimitedOfferTime: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -0,0 +1,18 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"../../../../assets/icons/lto_icon.svg.js";import i from"styled-components";import{BodySecondary as n,BodyTiny as o}from"../../../TypographyStyle.js";import{COLORS as c}from"../../../../constants/Theme.js";const s=i=>{const{text:s,dateTime:a,code:m}=i;return e(d,{children:[t(l,{children:t(r,{width:24,height:24,style:{display:"flex"}})}),e(p,{children:[t(n,Object.assign({numberOfLines:2,color:c.content.primary},{children:s})),e(o,Object.assign({color:c.content.secondary},{children:["Offer Ends on ",a]})),e(o,Object.assign({color:c.content.placeholder},{children:["Code ",m]}))]})]})},d=i.div`
+	display: flex;
+	flex-direction: row;
+`,l=i.div`
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: '#D8F0E7';
+	margin: 5px;
+`,p=i.div`
+	display: flex;
+	flex-direction: column;
+	margin-top: 5px;
+	margin-right: 3px;
+`;export{s as LimitedTimeOffer,d as StyledLimitedOfferTime,l as StyledLtoIcon,p as StyledLtoText};

package/dist/esm/components/template-preview/WhatsApp/MediaCard.js

@@ -1 +1 @@
-import{jsx as e,Fragment as s,jsxs as r}from"react/jsx-runtime";import t from"../../../assets/icons/filePdf.svg.js";import i from"../../../assets/icons/image.svg.js";import o from"../../../assets/icons/videoRecorder.svg.js";import{BodySecondary as m}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{HEADER_TYPES as n}from"../models/TemplateMeta.js";import{MediaContainer as d}from"./ChatUI.style.js";import{ShimmerImage as c}from"../../shimmer-image/ShimmerImage.js";const h=s=>{let{headerAssetName:c,mediaType:h}=s;const l=h===n.IMAGE?i:h===n.VIDEO?o:t;return r(d,{children:[e(l,{height:40,width:40,color:a.icon.placeholder}),!!c&&e(m,Object.assign({style:{color:a.content.secondary,marginTop:8}},{children:c}))]})},l=r=>{let{headerAssetLink:t,headerAssetName:i,mediaType:o,imagePreviewStyles:m}=r;if(!t||o===n.DOCUMENT)return e(h,Object.assign({},{headerAssetLink:t,headerAssetName:i,mediaType:o}));return e(d,{children:o===n.IMAGE?e(c,{imageUrl:t,alt:t,width:148,height:156,borderRadius:8}):o===n.VIDEO?e("video",Object.assign({src:t,style:{width:"100%",minHeight:"156px",borderRadius:8},controls:!0},{children:e("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):e(s,{})})};export{l as MediaCard,h as NoMediaCard};
+import{jsx as e,Fragment as s,jsxs as r}from"react/jsx-runtime";import t from"../../../assets/icons/filePdf.svg.js";import i from"../../../assets/icons/image.svg.js";import o from"../../../assets/icons/videoRecorder.svg.js";import{BodySecondary as m}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{HEADER_TYPES as n}from"../models/TemplateMeta.js";import{MediaContainer as d}from"./ChatUI.style.js";import{ShimmerImage as c}from"../../shimmer-image/ShimmerImage.js";const h=s=>{let{headerAssetName:c,mediaType:h}=s;const l=h===n.IMAGE?i:h===n.VIDEO?o:t;return r(d,{children:[e(l,{height:40,width:40,color:a.icon.placeholder}),!!c&&e(m,Object.assign({style:{color:a.content.secondary,marginTop:8}},{children:c}))]})},l=r=>{let{headerAssetLink:t,headerAssetName:i,mediaType:o,imagePreviewStyles:m}=r;if(!t||o===n.DOCUMENT)return e(h,Object.assign({},{headerAssetLink:t,headerAssetName:i,mediaType:o}));return e(d,{children:o===n.IMAGE?e(c,{imageUrl:t,alt:t,width:"100%",height:156,borderRadius:8}):o===n.VIDEO?e("video",Object.assign({src:t,style:{width:"100%",minHeight:"156px",borderRadius:8},controls:!0},{children:e("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):e(s,{})})};export{l as MediaCard,h as NoMediaCard};

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as n}from"../../../constants/Theme.js";import{specialCharPattern as i,placeHolderNamePattern as o,editableVarPattern as l,globalVariablePattern as a}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as d,NAME_LEN_LIMIT as r,NAME_LEN_ERROR as v,NO_SPECIAL_CHAR as s,HEADER_TEXT_LEN_LIMIT as u,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as m,HEADER_ASSET_LINK_ERROR as c,BODY_TEXT_LEN_LIMIT as h,BODY_LEN_ERROR as b,QUICK_REPLY_BTN_TEXT_LIMIT as T,QUICK_REPLY_LEN_ERROR as y,BUTTON_EMOJI_ERROR as f,VALID_PHONE_NUMBER as B,QUICK_REPLY_NAME_LEN_LIMIT as x,CREATE_TEMPLATE_DOM_IDS as k,QUICK_REPLY_NAME_ERROR as C}from"../constants/TemplateConstants.js";import{HEADER_TYPES as g,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as E}from"../utils/TemplateHelperUtils.js";class _{parseDataFromHeaderComponent(e,t){var n,i,o,l,a,d,r,v,s,u;const p={headerType:g.NONE,headerVariables:[]},m=null===(n=e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(m){p.headerType=m.format,p.headerText=m.text,p.headerAssetLink=null===(o=null===(i=m.example)||void 0===i?void 0:i.header_handle)||void 0===o?void 0:o[0];const n=null===(a=null===(l=m.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(n&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),i=/\(\(/.test(c),o={idx:0,variableVal:t?n:h,editable:i,editableDefaultValues:i?void 0:n,variableName:e};p.headerVariables=[o],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(p.headerText=null===(u=p.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return p}validateState(e){var t,n,o,l,a,_,L,O,w,R,D,V,A,I,U,j,q,F,P,M,Y;const $=/\p{Extended_Pictographic}/u;let K="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},S=new E;let H=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>r?(Q.meta.name=v,K="invalid"):i.test(e.meta.name.trim())&&(Q.meta.name=s,K="invalid"):(Q.meta.name=d,K="invalid"),Q.meta.name&&!H&&(G(k.name),H=!0),e.headerType===g.TEXT){const t=null!==(o=null===(n=e.headerText)||void 0===n?void 0:n.trim())&&void 0!==o?o:"";if(t)if(t.length>u)Q.header=p,K="invalid";else{const e=S.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=m,K="invalid")}else Q.header=d,K="invalid"}else e.headerType===g.DOCUMENT||e.headerType===g.IMAGE||(e.headerType,g.VIDEO);if(e.headerType!==g.DOCUMENT&&e.headerType!==g.IMAGE&&e.headerType!==g.VIDEO||e.headerAssetLink||(Q.header=c,K="invalid"),Q.header&&!H&&(G(k.header),H=!0),e.bodyText?e.bodyTextRaw&&(null===(l=e.bodyTextRaw)||void 0===l?void 0:l.trim().length)>h&&(Q.body=b,K="invalid"):(Q.body=d,K="invalid"),Q.body&&!H&&(G(k.body),H=!0),e.footerText&&e.footerText.length>u&&(Q.footer=p,K="invalid"),(null==Q?void 0:Q.footer)&&!H&&(G(k.footer),H=!0),e.actionsType===N.CTA_BTN){if(null===(_=null===(a=e.ctaBtn)||void 0===a?void 0:a.phoneNumber)||void 0===_?void 0:_.isChecked){const t=null===(L=e.ctaBtn.phoneNumber.btnText)||void 0===L?void 0:L.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=d,K="invalid"):Q.ctaBtn&&t&&t.length>T?(Q.ctaBtn.phoneNumber.btnText=y,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.phoneNumber.btnText=f,K="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=d,K="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=B,K="invalid")}if(null===(w=null===(O=e.ctaBtn)||void 0===O?void 0:O.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(R=e.ctaBtn.websiteLinkBtn.btnText)||void 0===R?void 0:R.trim(),n=null===(D=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===D?void 0:D.trim(),i=null===(V=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===V?void 0:V.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=d,K="invalid"):Q.ctaBtn&&t&&t.length>T?(Q.ctaBtn.websiteLink.btnText=y,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.websiteLink.btnText=f,K="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=d,K="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>x)t[i]=y,K="invalid";else if($.test(o))t[i]=f,K="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=C,K="invalid")}else t[i]=d,K="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(A=Q.quickReply)||void 0===A?void 0:A.reduce(((e,t)=>e||!!t),!1);((null===(U=null===(I=null==Q?void 0:Q.ctaBtn)||void 0===I?void 0:I.websiteLink)||void 0===U?void 0:U.link)||(null===(q=null===(j=Q.ctaBtn)||void 0===j?void 0:j.websiteLink)||void 0===q?void 0:q.btnText)||(null===(P=null===(F=Q.ctaBtn)||void 0===F?void 0:F.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===(M=Q.ctaBtn)||void 0===M?void 0:M.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!H&&(G(k.actionButtons),H=!0)}return{status:K,errors:Q}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let u="";const p=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return p&&(null===(d=null===(a=p.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,n)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[n];const r=d,v=d&&/\(\(/.test(d),u=null==d?void 0:d.match(o);(null==u?void 0:u[2])&&(d=null==u?void 0:u[2]),s.push({idx:n,variableVal:i?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(r=p.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=p.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==s?void 0:s[i]){const o=s[i].variableName;return t?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${n.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:u}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,o,a,d,r;const v={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(v.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o.map((e=>e)))&&void 0!==a?a:[];return v.quickReply=e,v}t===N.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var n,i,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==o?o:void 0;let r=!1;d&&l.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}}))),v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>{var t;return"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:null===(t=e.example)||void 0===t?void 0:t[0]}):e}))}return v}parseLimitedTimeOfferComponent(e,n){let i;return e.components.forEach((e=>{var o,l,d,r,v;if("limited_time_offer"===e.type){i={text:"",dateTime:"",code:""},i.text=null!==(l=null===(o=e.limited_time_offer)||void 0===o?void 0:o.text)&&void 0!==l?l:"";const n=null!==(d=i.dateTime)&&void 0!==d?d:"";n&&a.test(n)?i.dateTime=n:i.dateTime=t(new Date(null!==(v=null===(r=e.example)||void 0===r?void 0:r.limited_time_offer)&&void 0!==v?v:new Date),"MMM dd")}console.log("vj: allbuttons",n),n.forEach((e=>{var t;"COPY_CODE"===e.type&&(i.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),i}parseUITemplateFromDBFormat(t){var n;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:i,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:u,bodyVariable:p}=yield this.parseBodyComponent(e,o,l),{actionsType:m,quickReply:c,ctaBtn:h,allButtons:b}=yield this.parseButtonComponent(e),T=this.parseLimitedTimeOfferComponent(e,b),y={quickReply:c,ctaBtn:h,allButtons:b,meta:{name:i?`${e.label} Copy`:e.label,category:null===(n=e.category)||void 0===n?void 0:n.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:m,footerText:this.parseFooterComponent(e),bodyVariables:p,bodyText:u,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:T},{errors:f}=this.validateState(y);return y.error=f,y}))}}export{_ as TemplateCreatorHelper};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as n}from"../../../constants/Theme.js";import{specialCharPattern as i,placeHolderNamePattern as o,editableVarPattern as l}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as v,HEADER_TEXT_LEN_LIMIT as s,HEADER_LEN_ERROR as u,ONE_VAR_ALLOWED as p,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as f,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as k}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var n,i,o,l,a,d,r,v,s,u;const p={headerType:C.NONE,headerVariables:[]},m=null===(n=e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(m){p.headerType=m.format,p.headerText=m.text,p.headerAssetLink=null===(o=null===(i=m.example)||void 0===i?void 0:i.header_handle)||void 0===o?void 0:o[0];const n=null===(a=null===(l=m.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(n&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),i=/\(\(/.test(c),o={idx:0,variableVal:t?n:h,editable:i,editableDefaultValues:i?void 0:n,variableName:e};p.headerVariables=[o],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(p.headerText=null===(u=p.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return p}validateState(e){var t,n,o,l,E,_,L,w,O,D,R,V,A,I,U,M,j,q,F,P,Y;const $=/\p{Extended_Pictographic}/u;let K="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},S=new N;let H=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>d?(Q.meta.name=r,K="invalid"):i.test(e.meta.name.trim())&&(Q.meta.name=v,K="invalid"):(Q.meta.name=a,K="invalid"),Q.meta.name&&!H&&(G(x.name),H=!0),e.headerType===C.TEXT){const t=null!==(o=null===(n=e.headerText)||void 0===n?void 0:n.trim())&&void 0!==o?o:"";if(t)if(t.length>s)Q.header=u,K="invalid";else{const e=S.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=p,K="invalid")}else Q.header=a,K="invalid"}else e.headerType===C.DOCUMENT||e.headerType===C.IMAGE||(e.headerType,C.VIDEO);if(e.headerType!==C.DOCUMENT&&e.headerType!==C.IMAGE&&e.headerType!==C.VIDEO||e.headerAssetLink||(Q.header=m,K="invalid"),Q.header&&!H&&(G(x.header),H=!0),e.bodyText?e.bodyTextRaw&&(null===(l=e.bodyTextRaw)||void 0===l?void 0:l.trim().length)>c&&(Q.body=h,K="invalid"):(Q.body=a,K="invalid"),Q.body&&!H&&(G(x.body),H=!0),e.footerText&&e.footerText.length>s&&(Q.footer=u,K="invalid"),(null==Q?void 0:Q.footer)&&!H&&(G(x.footer),H=!0),e.actionsType===g.CTA_BTN){if(null===(_=null===(E=e.ctaBtn)||void 0===E?void 0:E.phoneNumber)||void 0===_?void 0:_.isChecked){const t=null===(L=e.ctaBtn.phoneNumber.btnText)||void 0===L?void 0:L.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=a,K="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.phoneNumber.btnText=T,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.phoneNumber.btnText=y,K="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=a,K="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=f,K="invalid")}if(null===(O=null===(w=e.ctaBtn)||void 0===w?void 0:w.websiteLinkBtn)||void 0===O?void 0:O.isChecked){const t=null===(D=e.ctaBtn.websiteLinkBtn.btnText)||void 0===D?void 0:D.trim(),n=null===(R=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===R?void 0:R.trim(),i=null===(V=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===V?void 0:V.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=a,K="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.websiteLink.btnText=T,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.websiteLink.btnText=y,K="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=a,K="invalid")}}else if(e.actionsType===g.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=T,K="invalid";else if($.test(o))t[i]=y,K="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=k,K="invalid")}else t[i]=a,K="invalid"})),Q.quickReply=t}if(e.actionsType===g.CTA_BTN||e.actionsType===g.QUICK_REPLY){const e=null===(A=Q.quickReply)||void 0===A?void 0:A.reduce(((e,t)=>e||!!t),!1);((null===(U=null===(I=null==Q?void 0:Q.ctaBtn)||void 0===I?void 0:I.websiteLink)||void 0===U?void 0:U.link)||(null===(j=null===(M=Q.ctaBtn)||void 0===M?void 0:M.websiteLink)||void 0===j?void 0:j.btnText)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.phoneNumber)||void 0===F?void 0:F.link)||(null===(Y=null===(P=Q.ctaBtn)||void 0===P?void 0:P.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!H&&(G(x.actionButtons),H=!0)}return{status:K,errors:Q}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let u="";const p=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return p&&(null===(d=null===(a=p.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,n)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[n];const r=d,v=d&&/\(\(/.test(d),u=null==d?void 0:d.match(o);(null==u?void 0:u[2])&&(d=null==u?void 0:u[2]),s.push({idx:n,variableVal:i?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(r=p.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=p.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==s?void 0:s[i]){const o=s[i].variableName;return t?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${n.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:u}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,o,a,d,r;const v={actionsType:g.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i[0].type)?g.QUICK_REPLY:g.CTA_BTN;if(v.actionsType=t,t===g.QUICK_REPLY){const e=null!==(a=null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o.map((e=>e)))&&void 0!==a?a:[];return v.quickReply=e,v}t===g.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var n,i,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==o?o:void 0;let r=!1;d&&l.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}}))),v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>{var t;return"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:null===(t=e.example)||void 0===t?void 0:t[0]}):e}))}return v}parseLimitedTimeOfferComponent(e,n){let i;return e.components.forEach((e=>{var o,l,a;if("limited_time_offer"===e.type){i={text:"",dateTime:t(new Date,"MMM dd"),code:""},i.text=null!==(l=null===(o=e.limited_time_offer)||void 0===o?void 0:o.text)&&void 0!==l?l:"";const n=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;n&&n.startsWith("{{")&&n.endsWith("}}")?(console.log("vj: inside",n),i.dateTime=n):i.dateTime=t(n?new Date(n):new Date,"MMM dd")}n.forEach((e=>{var t;"COPY_CODE"===e.type&&(i.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),i}parseUITemplateFromDBFormat(t){var n;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:i,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:u,bodyVariable:p}=yield this.parseBodyComponent(e,o,l),{actionsType:m,quickReply:c,ctaBtn:h,allButtons:b}=yield this.parseButtonComponent(e),T=this.parseLimitedTimeOfferComponent(e,b),y={quickReply:c,ctaBtn:h,allButtons:b,meta:{name:i?`${e.label} Copy`:e.label,category:null===(n=e.category)||void 0===n?void 0:n.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:m,footerText:this.parseFooterComponent(e),bodyVariables:p,bodyText:u,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:T},{errors:f}=this.validateState(y);return y.error=f,y}))}}export{E as TemplateCreatorHelper};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.407-beta.4",
+	"version": "0.0.407-beta.6",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",