@bikdotai/bik-component-library 0.0.736-beta.5 → 0.0.736-beta.7

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

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as t}from"../../variable-picker-v3/model.js";import{cloneDeep as i}from"lodash";import{useRef as l,useState as a,useEffect as s}from"react";import d from"styled-components";import{Input as r}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as c}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as v}from"../../template-preview/models/TemplateMeta.js";import{POD as m}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as g,UNSUBSCRIBE_URL_VARIABLE as h}from"../utils/constants.js";import{getAllDataFromTemplateComponent as f}from"../utils/getDataFromTemplateComponent.js";import{isVariable as j}from"../utils/validateIsUrl.js";import{validateInputName as C,validateInputNameChatbot as T}from"../utils/validateName.js";import{BackTrackComponent as O}from"./BackTrackComponent.js";import{DiscountCodeComponent as x}from"./DiscountCodeComponent.js";import y from"./EditMediaModal.js";import V from"./EditMediaV2.js";import{EditTemplateMediaContainer as E}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as B}from"./useEditWhtasappTemplateMedia.js";import M from"./VariableConnector.js";import{Container as k}from"./VariableConnectorsPanel.js";import I from"./VariableConnectorWhatsApp.js";import w from"./VariableEditorHeader.js";import L from"./WhatsAppTemplateCardButtonV2.js";const R=d=>{let{template:R,onTemplateChange:P,whatsappSpecificPickerMeta:H,showVariableModal:N,variableListForImage:D,setDiscountCode:A,fileName:_,setFileName:F}=d;var q,Q,S,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,ve,me,be,ge,he,fe,je,Ce,Te,Oe,xe,ye,Ve,Ee;const Be=R.isCarouselType,{originalVariableList:Me,pod:ke,extras:Ie,selectedCarouselIndex:we,isProductCarouselType:Le,disableCopyCode:Re,isError:Ue,cardIndex:Pe}=b(),{descriptionComponents:He,urlBtns:Ne,qrbBtns:De,imageComponent:Ae,bodyVariables:_e,headerVariables:Fe,titleVariables:qe}=f(R),Qe=l(null),[Se,Ye]=a(!1),[Ke,We]=a(-1===we?{descriptionComponents:He,urlBtns:Ne,qrbBtns:De,imageComponent:Ae,bodyVariables:_e,headerVariables:Fe,titleVariables:qe}:{}),{uploadMediaLink:$e,uploadMediaFiles:Ge,validateMimeType:Xe}=H,ze=B({uploadMediaLink:$e,uploadMediaFiles:Ge,updateTemplateImageUrl:function(e,o){var n,t,l,a,s,d,r,p;let u;u=null!=we&&we>-1?{components:null===(t=null===(n=R.components[Pe])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we].components,mapping:null===(a=null===(l=null==R?void 0:R.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[we]}:Object.assign({},R);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:o,example:{header_handle:[e]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=u.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[we]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==P||P(Object.assign({},e)),Ze(!0)}else null==P||P(Object.assign({},u))},validateMimeType:Xe,mediaComponent:Be?Ke.imageComponent:Ae,fileRef:Qe}),[Je,Ze]=a(!1),[eo,oo]=a(_),[no,to]=a();function io(e,o,n){var t,l,a,s,d,r,p,u,v,m;const b=null!=we&&we>-1?{components:null===(t=Object.assign({},R).components[Pe].cards)||void 0===t?void 0:t[we].components,mapping:null===(l=Object.assign({},R).mapping.cards)||void 0===l?void 0:l[we]}:Object.assign({},R),g=i(b),h="custom"===o&&"string"==typeof e,f=h?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=we&&we>-1&&Le){const o=Object.assign({},R).components.map((e=>{var o;return c(e.type)?Object.assign(Object.assign({},e),{cards:null===(o=e.cards)||void 0===o?void 0:o.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var o,t,i;if("BUTTONS"===e.type){const l=null===(o=e.buttons)||void 0===o?void 0:o.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),t=null===(s=null===(a=Object.assign({},R).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map(((o,t)=>t===n?h?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":o))})})),l=i(R);return l.components=o,l.mapping.cards=t,void(null==P||P(Object.assign({},l)))}const j=null==g?void 0:g.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const t=null===(d=null==g?void 0:g.components[j].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=g.components)||void 0===r?void 0:r[j])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},g.components[j]),{buttons:s}),c=null===(v=g.mapping)||void 0===v?void 0:v.buttons;c&&c.length>0&&(c[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},g.mapping),{buttons:c});g.mapping=m;const b=[...g.components];b[j]=d,g.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?Ye(!0):(Ye(!1),null==A||A(""))}if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=g.components,e.mapping.cards[we]=g.mapping,null==P||P(Object.assign({},e))}else null==P||P(g)}function lo(e,o,n){var t,l,a,s,d,r,p;const u=null!=we&&we>-1?{components:null===(t=Object.assign({},R).components[Pe].cards)||void 0===t?void 0:t[we].components,mapping:null===(l=Object.assign({},R).mapping.cards)||void 0===l?void 0:l[we]}:Object.assign({},R);if(null!=we&&we>-1&&Le){const o=Object.assign({},R).components.map((o=>{var t;return c(o.type)?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const a=null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==o?void 0:o.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),t=i(R);return t.components=o,void(null==P||P(Object.assign({},t)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const o=null===(s=null===(a=null==u?void 0:u.components[v])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(o){let t=o[n];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[v])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[v]),{buttons:i}),a=[...u.components];a[v]=l,u.components=a}}if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=u.components,null==P||P(Object.assign({},e))}else null==P||P(u)}s((()=>{var e,o;if(null===(e=R.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Ye(!0);else{Ye(!1);const e=null===(o=null==Ie?void 0:Ie.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}}),[R]),s((()=>{var e,o,n,t;if(null!=we&&we>-1){const i={components:null===(o=null===(e=R.components[Pe])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[we].components,mapping:null===(t=null===(n=null==R?void 0:R.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=f(i);We({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u})}else if(null!=we&&-1===we){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a}=f(R);We({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a})}}),[we]),s((()=>{var e,o,n,t;if(null!=we&&we>-1&&Je){const i={components:null===(o=null===(e=R.components[Pe])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[we].components,mapping:null===(t=null===(n=null==R?void 0:R.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=f(i);We({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}),Ze(!1)}}),[Je]);s((()=>{Ue&&ke===m.CHATBOT&&(()=>{if(!_)return void to("PDF name is Required");const e=T(_);null==F||F(null!=_?_:""),to(e?"Please enter a valid PDF name":void 0)})()}),[Ue]);const ao=Be?Ke.imageComponent:Ae;return ze.openEditMedia?e(k,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(y,{mediaComponentFormat:null!==(q=ao.format)&&void 0!==q?q:v.IMAGE,uploadMedia:ze.uploadMedia,variableListForImage:D||[],useEditWhatsappTemplateMediaResponse:ze,setOpenEditMedia:ze.setOpenEditMedia,openEditMedia:ze.openEditMedia,editIconRef:ze.editIconRef,fileRef:Qe})}):o(k,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Le?"420px":"auto"},children:[!!Ke.imageComponent&&!Le&&!u(null==R?void 0:R.channel)&&o(E,{children:[e(V,{imageName:null!==(S=null===(Q=null==ao?void 0:ao.example)||void 0===Q?void 0:Q.header_handle)&&void 0!==S?S:[],handleImageChange:ze.handleImageChange,mediaType:null==ao?void 0:ao.format,error:ze.error,isLoading:ze.loading,setOpenEditMedia:ze.setOpenEditMedia,selectedVariable:j(null!==(W=null===(K=null===(Y=null==ao?void 0:ao.example)||void 0===Y?void 0:Y.header_handle)||void 0===K?void 0:K[0])&&void 0!==W?W:"")?null===(G=null===($=null==ao?void 0:ao.example)||void 0===$?void 0:$.header_handle)||void 0===G?void 0:G[0]:(null===(z=null===(X=null==R?void 0:R.mapping)||void 0===X?void 0:X.header)||void 0===z?void 0:z[0])?null===(Z=null===(J=null==R?void 0:R.mapping)||void 0===J?void 0:J.header)||void 0===Z?void 0:Z[0]:ze.selectedVariable}),(null==Ae?void 0:Ae.format)==v.DOCUMENT?e(U,{children:ke===m.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:no||void 0,onChange:e=>{var o;to(""),null==F||F(null!==(o=null==e?void 0:e.actualValue)&&void 0!==o?o:"")},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=_?_:"",variableType:"string"},variablesList:D,showAddButton:!0}):e(r,{labelText:"PDF Name",placeholder:"Enter the name",value:eo,errorMessage:no||void 0,onBlur:()=>{if(!eo)return null==F||F(""),void to("PDF name is Required");const e=C(eo);null==F||F(eo),to(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{to(""),oo(e)}})}):e(n,{})]}),(null===(ee=Ke.bodyVariables)||void 0===ee?void 0:ee.length)>0&&e(w,{containerStyle:{paddingTop:Ke.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(oe=Ke.descriptionComponents)||void 0===oe?void 0:oe.map(((o,n)=>e(I,{originalVariableList:null!=we&&we>-1?Me.cards[we]:Me,type:o.type,descriptionComponent:o.component,showVariableModal:N},n))),(null===(ie=null===(te=null!=we&&we>-1?null===(ne=Me.cards[we])||void 0===ne?void 0:ne.buttons:null==Me?void 0:Me.buttons)||void 0===te?void 0:te.filter((e=>"URL"===e.type)))||void 0===ie?void 0:ie.length)>0&&e(w,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(se=null===(ae=null!=we&&we>-1?null===(le=Me.cards[we])||void 0===le?void 0:le.buttons:null==Me?void 0:Me.buttons)||void 0===ae?void 0:ae.filter((e=>ke===m.CHATBOT||"URL"===e.type)))||void 0===se?void 0:se.map(((o,n)=>{const t=o.buttonVariable===g,i=o.buttonVariable===h;if("URL"===o.type)return e(L,{variableListIndex:n,disableEdit:t||i,CTAoptions:null==H?void 0:H.CTAoptions,button:o,currentVariableList:null!=we&&we>-1?Object.assign({},Me.cards[we]):Object.assign({},Me),updateSelectedURLTemplateBtn:io},`${n}_${we}`)})),ke===m.CHATBOT&&(null===(re=null===(de=De[0])||void 0===de?void 0:de.component)||void 0===re?void 0:re.buttons)&&(null===(ce=null===(ue=null===(pe=De[0])||void 0===pe?void 0:pe.component)||void 0===ue?void 0:ue.buttons)||void 0===ce?void 0:ce.length)>0&&e(O,{backTrackMessage:null===(ve=null==Ie?void 0:Ie.backTrackExtra)||void 0===ve?void 0:ve[0],setBackTrackMessage:null===(me=null==Ie?void 0:Ie.backTrackExtra)||void 0===me?void 0:me[1]}),!u(null==R?void 0:R.channel)&&(null===(he=null===(ge=null!=we&&we>-1?null===(be=Me.cards[we])||void 0===be?void 0:be.buttons:null==Me?void 0:Me.buttons)||void 0===ge?void 0:ge.filter((e=>"QUICK_REPLY"===e.type)))||void 0===he?void 0:he.length)>0&&(ke!==m.CHATBOT?e(w,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e(O,{backTrackMessage:null===(fe=null==Ie?void 0:Ie.backTrackExtra)||void 0===fe?void 0:fe[0],setBackTrackMessage:null===(je=null==Ie?void 0:Ie.backTrackExtra)||void 0===je?void 0:je[1]})),!u(null==R?void 0:R.channel)&&(null===(Oe=null===(Te=null!=we&&we>-1?null===(Ce=Me.cards[we])||void 0===Ce?void 0:Ce.buttons:null==Me?void 0:Me.buttons)||void 0===Te?void 0:Te.filter((e=>"QUICK_REPLY"===e.type)))||void 0===Oe?void 0:Oe.map(((o,n)=>{if("QUICK_REPLY"===o.type&&ke!==m.CHATBOT)return e(L,{variableListIndex:n,QRBoptions:null==H?void 0:H.QRBoptions,button:o,currentVariableList:null!=we&&we>-1?Object.assign({},Me.cards[we]):Object.assign({},Me),updateSelectedQRBTemplateBtn:lo},`${n}_${we}`)}))),ke===m.CHATBOT&&Se&&e(x,{discountCode:null===(xe=null==Ie?void 0:Ie.discountCodeExtra)||void 0===xe?void 0:xe[0],setDiscountCode:null===(ye=null==Ie?void 0:Ie.discountCodeExtra)||void 0===ye?void 0:ye[1]}),null===(Ee=null!=we&&we>-1?null===(Ve=Me.cards[we])||void 0===Ve?void 0:Ve.buttons:null==Me?void 0:Me.buttons)||void 0===Ee?void 0:Ee.map(((o,t)=>{var i,l,a,s,d;if("COPY_CODE"===o.type)return e(n,{children:Re?e("div",{style:{marginBottom:20,borderRadius:4,padding:"8px 10px"},children:e(r,{state:"disabled",labelText:null!==(i=o.text)&&void 0!==i?i:"Copy Code",value:null!==(l=o.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})}):e(M,{index:t,variable:{variableName:null!==(a=o.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=o.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=o.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:o.type},t)})}))]})},U=d.div`
+import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as t}from"../../variable-picker-v3/model.js";import{cloneDeep as i}from"lodash";import{useRef as l,useState as a,useEffect as s}from"react";import d from"styled-components";import{Input as r}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as c}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as v}from"../../template-preview/models/TemplateMeta.js";import{POD as m}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as g,UNSUBSCRIBE_URL_VARIABLE as h}from"../utils/constants.js";import{getAllDataFromTemplateComponent as f}from"../utils/getDataFromTemplateComponent.js";import{isVariable as j}from"../utils/validateIsUrl.js";import{validateInputName as C,validateInputNameChatbot as T}from"../utils/validateName.js";import{BackTrackComponent as O}from"./BackTrackComponent.js";import{DiscountCodeComponent as x}from"./DiscountCodeComponent.js";import y from"./EditMediaModal.js";import V from"./EditMediaV2.js";import{EditTemplateMediaContainer as E}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as B}from"./useEditWhtasappTemplateMedia.js";import M from"./VariableConnector.js";import{Container as k}from"./VariableConnectorsPanel.js";import I from"./VariableConnectorWhatsApp.js";import w from"./VariableEditorHeader.js";import L from"./WhatsAppTemplateCardButtonV2.js";const R=({template:d,onTemplateChange:R,whatsappSpecificPickerMeta:P,showVariableModal:H,variableListForImage:N,setDiscountCode:D,fileName:A,setFileName:_})=>{var F,q,Q,S,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,ve,me,be,ge,he,fe,je,Ce,Te,Oe,xe,ye,Ve;const Ee=d.isCarouselType,{originalVariableList:Be,pod:Me,extras:ke,selectedCarouselIndex:Ie,isProductCarouselType:we,disableCopyCode:Le,isError:Re,cardIndex:Ue}=b(),{descriptionComponents:Pe,urlBtns:He,qrbBtns:Ne,imageComponent:De,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}=f(d),qe=l(null),[Qe,Se]=a(!1),[Ye,Ke]=a(-1===Ie?{descriptionComponents:Pe,urlBtns:He,qrbBtns:Ne,imageComponent:De,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}:{}),{uploadMediaLink:We,uploadMediaFiles:$e,validateMimeType:Ge}=P,Xe=B({uploadMediaLink:We,uploadMediaFiles:$e,updateTemplateImageUrl:function(e,o){var n,t,l,a,s,r,p,u;let c;c=null!=Ie&&Ie>-1?{components:null===(t=null===(n=d.components[Ue])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie].components,mapping:null===(a=null===(l=null==d?void 0:d.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Ie]}:Object.assign({},d);const v=null===(s=null==c?void 0:c.components)||void 0===s?void 0:s.findIndex(e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0});if(void 0!==v&&v>-1&&(null==c?void 0:c.components[v])){const n=Object.assign(Object.assign({},c.components[v]),{format:o,example:{header_handle:[e]}}),t=[...c.components];t[v]=n,c=Object.assign(Object.assign({},c),{components:t})}c.mapping&&(c.mapping=Object.assign(Object.assign({},c.mapping),{header:void 0}));if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=c.components,(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards)&&(null===(p=null==e?void 0:e.mapping)||void 0===p?void 0:p.cards.length)>0&&(e.mapping.cards[Ie]=null!==(u=c.mapping)&&void 0!==u?u:{}),null==R||R(Object.assign({},e)),Je(!0)}else null==R||R(Object.assign({},c))},validateMimeType:Ge,mediaComponent:Ee?Ye.imageComponent:De,fileRef:qe}),[ze,Je]=a(!1),[Ze,eo]=a(A),[oo,no]=a();function to(e,o,n){var t,l,a,s,r,p,u,v,m,b;const g=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},d).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},d).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},d),h=i(g),f="custom"===o&&"string"==typeof e,j=f?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},d).components.map(e=>{var o;return c(e.type)?Object.assign(Object.assign({},e),{cards:null===(o=e.cards)||void 0===o?void 0:o.map(e=>Object.assign(Object.assign({},e),{components:e.components.map(e=>{var o,t,i;if("BUTTONS"===e.type){const l=null===(o=e.buttons)||void 0===o?void 0:o.filter(e=>"URL"===e.type);let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[j]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map(e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e);return Object.assign(Object.assign({},e),{buttons:s})}return e})}))}):e}),t=null===(s=null===(a=Object.assign({},d).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map(o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map((o,t)=>t===n?f?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":o)})}),l=i(d);return l.components=o,l.mapping.cards=t,void(null==R||R(Object.assign({},l)))}const C=null==h?void 0:h.components.findIndex(e=>"BUTTONS"===e.type);if(void 0!==C&&C>-1){const t=null===(r=null==h?void 0:h.components[C].buttons)||void 0===r?void 0:r.filter(e=>"URL"===e.type);if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(v=null===(u=null===(p=h.components)||void 0===p?void 0:p[C])||void 0===u?void 0:u.buttons)&&void 0!==v?v:[]].map(e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e),d=Object.assign(Object.assign({},h.components[C]),{buttons:s}),r=null===(m=h.mapping)||void 0===m?void 0:m.buttons;r&&r.length>0&&(r[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const c=Object.assign(Object.assign({},h.mapping),{buttons:r});h.mapping=c;const b=[...h.components];b[C]=d,h.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(b=e.placeHolder)||void 0===b?void 0:b.slice(2,-2))?Se(!0):(Se(!1),null==D||D(""))}if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=h.components,e.mapping.cards[Ie]=h.mapping,null==R||R(Object.assign({},e))}else null==R||R(h)}function io(e,o,n){var t,l,a,s,r,p,u;const v=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},d).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},d).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},d);if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},d).components.map(o=>{var t;return c(o.type)?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map(o=>Object.assign(Object.assign({},o),{components:o.components.map(o=>{var t,i,l;if("BUTTONS"===o.type){const a=null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.filter(e=>"QUICK_REPLY"===e.type);let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==o?void 0:o.buttons)||void 0===l?void 0:l.map(e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e);return Object.assign(Object.assign({},o),{buttons:d})}return o})}))}):o}),t=i(d);return t.components=o,void(null==R||R(Object.assign({},t)))}const m=null==v?void 0:v.components.findIndex(e=>"BUTTONS"===e.type);if(void 0!==m&&m>-1){const o=null===(s=null===(a=null==v?void 0:v.components[m])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter(e=>"QUICK_REPLY"===e.type);if(o){let t=o[n];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(u=null===(p=null===(r=v.components)||void 0===r?void 0:r[m])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map(e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e),l=Object.assign(Object.assign({},v.components[m]),{buttons:i}),a=[...v.components];a[m]=l,v.components=a}}if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=v.components,null==R||R(Object.assign({},e))}else null==R||R(v)}s(()=>{var e,o;if(null===(e=d.mapping.buttons)||void 0===e?void 0:e.find(e=>"checkout.checkoutUrl"===e.slice(2,-2)))Se(!0);else{Se(!1);const e=null===(o=null==ke?void 0:ke.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}},[d]),s(()=>{var e,o,n,t;if(null!=Ie&&Ie>-1){const i={components:null===(o=null===(e=d.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==d?void 0:d.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}=f(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c})}else if(null!=Ie&&-1===Ie){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a}=f(d);Ke({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a})}},[Ie]),s(()=>{var e,o,n,t;if(null!=Ie&&Ie>-1&&ze){const i={components:null===(o=null===(e=d.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==d?void 0:d.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}=f(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}),Je(!1)}},[ze]);s(()=>{Re&&Me===m.CHATBOT&&(()=>{if(!A)return void no("PDF name is Required");const e=T(A);null==_||_(null!=A?A:""),no(e?"Please enter a valid PDF name":void 0)})()},[Re]);const lo=Ee?Ye.imageComponent:De;return Xe.openEditMedia?e(k,{style:{flexDirection:"column",width:400,maxHeight:460},children:e(y,{mediaComponentFormat:null!==(F=lo.format)&&void 0!==F?F:v.IMAGE,uploadMedia:Xe.uploadMedia,variableListForImage:N||[],useEditWhatsappTemplateMediaResponse:Xe,setOpenEditMedia:Xe.setOpenEditMedia,openEditMedia:Xe.openEditMedia,editIconRef:Xe.editIconRef,fileRef:qe})}):o(k,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:we?"420px":"auto"},children:[!!Ye.imageComponent&&!we&&!u(null==d?void 0:d.channel)&&o(E,{children:[e(V,{imageName:null!==(Q=null===(q=null==lo?void 0:lo.example)||void 0===q?void 0:q.header_handle)&&void 0!==Q?Q:[],handleImageChange:Xe.handleImageChange,mediaType:null==lo?void 0:lo.format,error:Xe.error,isLoading:Xe.loading,setOpenEditMedia:Xe.setOpenEditMedia,selectedVariable:j(null!==(K=null===(Y=null===(S=null==lo?void 0:lo.example)||void 0===S?void 0:S.header_handle)||void 0===Y?void 0:Y[0])&&void 0!==K?K:"")?null===($=null===(W=null==lo?void 0:lo.example)||void 0===W?void 0:W.header_handle)||void 0===$?void 0:$[0]:(null===(X=null===(G=null==d?void 0:d.mapping)||void 0===G?void 0:G.header)||void 0===X?void 0:X[0])?null===(J=null===(z=null==d?void 0:d.mapping)||void 0===z?void 0:z.header)||void 0===J?void 0:J[0]:Xe.selectedVariable}),(null==De?void 0:De.format)==v.DOCUMENT?e(U,{children:Me===m.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:oo||void 0,onChange:e=>{var o;no(""),null==_||_(null!==(o=null==e?void 0:e.actualValue)&&void 0!==o?o:"")},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=A?A:"",variableType:"string"},variablesList:N,showAddButton:!0}):e(r,{labelText:"PDF Name",placeholder:"Enter the name",value:Ze,errorMessage:oo||void 0,onBlur:()=>{if(!Ze)return null==_||_(""),void no("PDF name is Required");const e=C(Ze);null==_||_(Ze),no(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{no(""),eo(e)}})}):e(n,{})]}),(null===(Z=Ye.bodyVariables)||void 0===Z?void 0:Z.length)>0&&e(w,{containerStyle:{paddingTop:Ye.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(ee=Ye.descriptionComponents)||void 0===ee?void 0:ee.map((o,n)=>e(I,{originalVariableList:null!=Ie&&Ie>-1?Be.cards[Ie]:Be,type:o.type,descriptionComponent:o.component,showVariableModal:H},n)),(null===(te=null===(ne=null!=Ie&&Ie>-1?null===(oe=Be.cards[Ie])||void 0===oe?void 0:oe.buttons:null==Be?void 0:Be.buttons)||void 0===ne?void 0:ne.filter(e=>"URL"===e.type))||void 0===te?void 0:te.length)>0&&e(w,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(ae=null===(le=null!=Ie&&Ie>-1?null===(ie=Be.cards[Ie])||void 0===ie?void 0:ie.buttons:null==Be?void 0:Be.buttons)||void 0===le?void 0:le.filter(e=>Me===m.CHATBOT||"URL"===e.type))||void 0===ae?void 0:ae.map((o,n)=>{const t=o.buttonVariable===g,i=o.buttonVariable===h;if("URL"===o.type)return e(L,{variableListIndex:n,disableEdit:t||i,CTAoptions:null==P?void 0:P.CTAoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedURLTemplateBtn:to},`${n}_${Ie}`)}),Me===m.CHATBOT&&(null===(de=null===(se=Ne[0])||void 0===se?void 0:se.component)||void 0===de?void 0:de.buttons)&&(null===(ue=null===(pe=null===(re=Ne[0])||void 0===re?void 0:re.component)||void 0===pe?void 0:pe.buttons)||void 0===ue?void 0:ue.length)>0&&e(O,{backTrackMessage:null===(ce=null==ke?void 0:ke.backTrackExtra)||void 0===ce?void 0:ce[0],setBackTrackMessage:null===(ve=null==ke?void 0:ke.backTrackExtra)||void 0===ve?void 0:ve[1]}),!u(null==d?void 0:d.channel)&&(null===(ge=null===(be=null!=Ie&&Ie>-1?null===(me=Be.cards[Ie])||void 0===me?void 0:me.buttons:null==Be?void 0:Be.buttons)||void 0===be?void 0:be.filter(e=>"QUICK_REPLY"===e.type))||void 0===ge?void 0:ge.length)>0&&(Me!==m.CHATBOT?e(w,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e(O,{backTrackMessage:null===(he=null==ke?void 0:ke.backTrackExtra)||void 0===he?void 0:he[0],setBackTrackMessage:null===(fe=null==ke?void 0:ke.backTrackExtra)||void 0===fe?void 0:fe[1]})),!u(null==d?void 0:d.channel)&&(null===(Te=null===(Ce=null!=Ie&&Ie>-1?null===(je=Be.cards[Ie])||void 0===je?void 0:je.buttons:null==Be?void 0:Be.buttons)||void 0===Ce?void 0:Ce.filter(e=>"QUICK_REPLY"===e.type))||void 0===Te?void 0:Te.map((o,n)=>{if("QUICK_REPLY"===o.type&&Me!==m.CHATBOT)return e(L,{variableListIndex:n,QRBoptions:null==P?void 0:P.QRBoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedQRBTemplateBtn:io},`${n}_${Ie}`)})),Me===m.CHATBOT&&Qe&&e(x,{discountCode:null===(Oe=null==ke?void 0:ke.discountCodeExtra)||void 0===Oe?void 0:Oe[0],setDiscountCode:null===(xe=null==ke?void 0:ke.discountCodeExtra)||void 0===xe?void 0:xe[1]}),null===(Ve=null!=Ie&&Ie>-1?null===(ye=Be.cards[Ie])||void 0===ye?void 0:ye.buttons:null==Be?void 0:Be.buttons)||void 0===Ve?void 0:Ve.map((o,t)=>{var i,l,a,s,d;if("COPY_CODE"===o.type)return e(n,{children:Le?e("div",{style:{marginBottom:20,borderRadius:4,padding:"8px 10px"},children:e(r,{state:"disabled",labelText:null!==(i=o.text)&&void 0!==i?i:"Copy Code",value:null!==(l=o.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})}):e(M,{index:t,variable:{variableName:null!==(a=o.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=o.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=o.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:o.type},t)})})]})},U=d.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;

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

@@ -12,4 +12,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	height: ${e=>e.isWhatsappCarousel?64:80}px;
-`,h=l=>{let{isWhatsappCarousel:h,onSelect:x,footerButtonText:f,footerInfoText:g}=l;var j,b,w,y;const{isError:T,selectedCarouselIndex:C,setSelectedCarouselIndex:S,setErrorIndexes:W,template:k,showVariablePicker:A,hideFooterButton:P}=u(),[I,$]=r(h?"Next":"Select template");return i((()=>{f?$(f):h&&-1===C?$("Next"):h&&null!=C&&C>-1&&$("Save & Select Template")}),[C]),e(v,{isWhatsappCarousel:h,justifyContent:h&&(null===(b=null===(j=null==k?void 0:k.mapping)||void 0===j?void 0:j.body)||void 0===b?void 0:b.length)?"space-between":"end",children:[m((null==k?void 0:k.channel)||n.WHATSAPP)?t(d,{}):h&&null!=C&&C>=-1&&!!(null===(y=null===(w=null==k?void 0:k.mapping)||void 0===w?void 0:w.body)||void 0===y?void 0:y.length)&&t(d,{color:s.text.secondary,children:`Step ${-1===C?1:2}/2`}),e("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[T&&t(c,{errorText:"Some inputs are missing or incorrect. Please check"}),!T&&g&&t("div",{style:{marginRight:12},children:t(a,{tagText:g,LeadingIcon:o})}),!P&&t(p,{disabled:A,id:"select-template-btn",buttonText:I,size:h?"small":"large",onClick:function(){h&&-1===C&&S?S(0):(null==W||W([]),x())}})]})]})};export{h as default};
+`,h=({isWhatsappCarousel:l,onSelect:h,footerButtonText:x,footerInfoText:f})=>{var g,j,b,w;const{isError:y,selectedCarouselIndex:T,setSelectedCarouselIndex:C,setErrorIndexes:S,template:W,showVariablePicker:k,hideFooterButton:A}=u(),[P,I]=r(l?"Next":"Select template");return i(()=>{x?I(x):l&&-1===T?I("Next"):l&&null!=T&&T>-1&&I("Save & Select Template")},[T]),e(v,{isWhatsappCarousel:l,justifyContent:l&&(null===(j=null===(g=null==W?void 0:W.mapping)||void 0===g?void 0:g.body)||void 0===j?void 0:j.length)?"space-between":"end",children:[m((null==W?void 0:W.channel)||n.WHATSAPP)?t(d,{}):l&&null!=T&&T>=-1&&!!(null===(w=null===(b=null==W?void 0:W.mapping)||void 0===b?void 0:b.body)||void 0===w?void 0:w.length)&&t(d,{color:s.text.secondary,children:`Step ${-1===T?1:2}/2`}),e("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[y&&t(c,{errorText:"Some inputs are missing or incorrect. Please check"}),!y&&f&&t("div",{style:{marginRight:12},children:t(a,{tagText:f,LeadingIcon:o})}),!A&&t(p,{disabled:k,id:"select-template-btn",buttonText:P,size:l?"small":"large",onClick:function(){l&&-1===T&&C?C(0):(null==S||S([]),h())}})]})]})};export{h as default};

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

@@ -20,4 +20,4 @@ import{jsxs as o,jsx as e}from"react/jsx-runtime";import t from"../../../assets/
 	align-items: center;
 `,a=i(p)`
 	border-left: 1px solid ${d.stroke.primary};
-`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:h}=s();return o(c,{showOnlyContent:m,children:[o(l,{children:[e(p,{active:"mobile"===b,onClick:()=>null==h?void 0:h("mobile"),children:e(n,{color:"mobile"===b?d.content.brand:d.content.secondary,height:20,width:20})}),e(a,{active:"desktop"===b,onClick:()=>null==h?void 0:h("desktop"),children:e(t,{color:"desktop"===b?d.content.brand:d.content.secondary,height:20,width:20})})]}),o(r,{style:{color:d.content.primary,marginLeft:16},children:["mobile"===b?"Mobile":"Web"," view"]})]})};export{m as default};
+`,m=({showOnlyContent:i})=>{const{device:m,setDevice:b}=s();return o(c,{showOnlyContent:i,children:[o(l,{children:[e(p,{active:"mobile"===m,onClick:()=>null==b?void 0:b("mobile"),children:e(n,{color:"mobile"===m?d.content.brand:d.content.secondary,height:20,width:20})}),e(a,{active:"desktop"===m,onClick:()=>null==b?void 0:b("desktop"),children:e(t,{color:"desktop"===m?d.content.brand:d.content.secondary,height:20,width:20})})]}),o(r,{style:{color:d.content.primary,marginLeft:16},children:["mobile"===m?"Mobile":"Web"," view"]})]})};export{m as default};

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

@@ -17,7 +17,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import o from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=o.forwardRef(((o,a)=>{let{display_content:h,channel:f,template:w,showSampleValues:v}=o;const{pod:b,hideDeviceContainerInPreview:g}=l(),u={showSampleValues:v,template:w,channel:f,smsSpecificMeta:{smsDisplayContent:h},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:f==s.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:h,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return g?e(d,{children:e(r,Object.assign({},u))}):e(t,{children:i(n,{channel:f,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:m(f),height:443}}),e(c,{ref:a,children:e(r,Object.assign({},u))})]})})}));h.displayName="MobilePreview";const d=a.div`
+`,h=o.forwardRef(({display_content:o,channel:a,template:h,showSampleValues:f},w)=>{const{pod:v,hideDeviceContainerInPreview:b}=l(),g={showSampleValues:f,template:h,channel:a,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:v!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:a==s.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return b?e(d,{children:e(r,Object.assign({},g))}):e(t,{children:i(n,{channel:a,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:m(a),height:443}}),e(c,{ref:w,children:e(r,Object.assign({},g))})]})})});h.displayName="MobilePreview";const d=a.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/icons/delete.svg.js";import o from"../../../assets/icons/PlusIcon.js";import{useState as s,useEffect as i}from"react";import a from"styled-components";import{Button as r}from"../../button/Button.js";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";const h=a=>{const{params:h,onChange:y,isError:g,variableValue:f}=a,[x,j]=s(h.length>0),[v,C]=s(h);return i((()=>{C(h)}),[f]),e(u,{children:[e("div",{style:{display:"flex"},children:[t(l,{isChecked:x,onValueChange:e=>{C([]),y([]),j(e)}}),t(m,{style:{marginLeft:8},children:"Add custom query params"})]}),x&&v.map(((o,s)=>e("div",{style:{display:"flex",gap:"8px"},children:[t(p,{placeholder:"Key",value:o.key,onChangeText:e=>{const t=v.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{key:e}):t));C(t),y(t)},state:g&&!o.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:o.value,onChangeText:e=>{const t=v.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{value:e}):t));C(t),y(t)},state:g&&!o.value.length?"invalid":"none"}),t(c,{Icon:n,width:20,height:20,onClick:()=>{const e=v.filter(((e,t)=>t!=s));C(e),y(e)}})]},s))),x&&h.length<10&&t(r,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:t(o,{width:16,height:16,color:d.content.secondary})}),onClick:()=>{const e=[...v,{key:"",value:""}];C(e),y(e)}})]})},u=a.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/icons/delete.svg.js";import o from"../../../assets/icons/PlusIcon.js";import{useState as s,useEffect as i}from"react";import a from"styled-components";import{Button as r}from"../../button/Button.js";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";const h=a=>{const{params:h,onChange:y,isError:g,variableValue:f}=a,[x,j]=s(h.length>0),[v,C]=s(h);return i(()=>{C(h)},[f]),e(u,{children:[e("div",{style:{display:"flex"},children:[t(l,{isChecked:x,onValueChange:e=>{C([]),y([]),j(e)}}),t(m,{style:{marginLeft:8},children:"Add custom query params"})]}),x&&v.map((o,s)=>e("div",{style:{display:"flex",gap:"8px"},children:[t(p,{placeholder:"Key",value:o.key,onChangeText:e=>{const t=v.map((t,n)=>n===s?Object.assign(Object.assign({},t),{key:e}):t);C(t),y(t)},state:g&&!o.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:o.value,onChangeText:e=>{const t=v.map((t,n)=>n===s?Object.assign(Object.assign({},t),{value:e}):t);C(t),y(t)},state:g&&!o.value.length?"invalid":"none"}),t(c,{Icon:n,width:20,height:20,onClick:()=>{const e=v.filter((e,t)=>t!=s);C(e),y(e)}})]},s)),x&&h.length<10&&t(r,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:t(o,{width:16,height:16,color:d.content.secondary})}),onClick:()=>{const e=[...v,{key:"",value:""}];C(e),y(e)}})]})},u=a.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"../../../assets/icons/click.svg.js";import a from"../../../assets/icons/speedometer.svg.js";import{useState as l,useEffect as r,useMemo as c}from"react";import{LineChart as o}from"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as d}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as m}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as u,TitleSmall as h,Caption as p}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as g,LeftPanelContainer as v,RightPanelContainer as f,CustomTitleMedium as N}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as b,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as T}from"./TemplateAnalyticsSkeleton.js";const w=n=>{const{templateAnalytics:i,onClose:a,onProceed:o,onCancel:d,headingTitle:h,headingSubtitle:f,templateId:N}=n,{templateQuality:k=m.GREEN,fetchAnalytics:w}=i||{},{Icon:C,title:E,subline:j,sublineTextType:L,sublineColor:A}=b[k||m.GREEN],[R,W]=l((null==n?void 0:n.analyticsData)||{}),[B,S]=l(!0);r((()=>{(null==n?void 0:n.analyticsData)?S(!1):null==w||w(N||"").then((e=>{e.analytics&&W(e.analytics),S(!1)}))}),[]);const D=c((()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:o,disabled:B},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==a||a(),null==d||d()},disabled:B}})),[k,B,o,a,d]),O=L||p;return e(s,{open:!0,headingTitle:h,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==a||a()},headingSubtitle:f,footerShadow:!0,primaryButton:D.primaryButton,secondaryButton:D.secondaryButton,onClose:()=>{null==a||a()},width:"700px",children:t(g,{children:[k!==m.UNKNOWN&&e(v,{children:t("div",{className:"inside--container",children:[e("div",{className:"icon--container",style:{background:k===m.GREEN?y.background.positive.light:y.background.warning.light},children:e(C,{width:40,height:40,color:k===m.GREEN?y.content.positive:y.content.warning})}),E&&e(u,{style:{textAlign:"center"},children:E}),e(O,{style:{textAlign:"center",color:A||y.content.primary},children:j})]})}),B?e(T,{fullWidth:k===m.UNKNOWN}):e(x,{analyticsData:R,fullWidth:k===m.UNKNOWN})]})})},x=a=>{var l;const{analyticsData:r,skipTitle:c,fullWidth:o}=a;return t(f,{fullWidth:o,children:[c?e(n,{}):e(h,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:k.map(((t,n)=>e(C,{icon:t.icon,title:t.title,value:r[t.valName]||0,percentValue:t.percentValName?r[t.percentValName]:null},n)))}),(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics).length?t(n,{children:[e(h,{color:y.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(r.clickAnalytics).map(((t,n)=>{let[a,l]=t;return e(C,{icon:i,title:a,value:l.totalClicks||0,percentValue:l.clickPercentage},n)}))})]}):e(n,{}),(null===(l=null==r?void 0:r.performance)||void 0===l?void 0:l.qualityTimeLine)&&r.performance.qualityTimeLine.length>0?t(n,{children:[e(h,{color:y.content.secondary,children:"Performance"}),e("div",{className:"mt-3",children:e(E,{qualityTimeLine:r.performance.qualityTimeLine})})]}):e(n,{})]})},C=i=>{const{icon:a,title:l,value:r,percentValue:c}=i;return t("div",{className:"each--analytics--container",children:[t("div",{className:"d-flex align--center",style:{gap:8},children:[e("div",{className:"each--icon--container",children:e(a,{width:"16px",height:"16px",color:y.background.brand})}),e(p,{children:l})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[c?e(d,{tagText:`${c}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(N,{children:r})]})]})},E=n=>{const{qualityTimeLine:i}=n,l=i.map((e=>{switch(e){case m.GREEN:return 2;case m.YELLOW:return 1;case m.RED:return.2;default:return 0}})),r=i.map(((e,t)=>`T${t+1}`)),c=i.map((e=>(e=>{switch(e){case m.GREEN:return y.content.positive;case m.YELLOW:return y.content.warning;case m.RED:return y.content.negative;default:return y.content.secondary}})(e)));return t("div",{className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${y.background.inactive}`},children:[t("div",{className:"d-flex align--center",style:{gap:8,width:"50%"},children:[e("div",{className:"each--icon--container",children:e(a,{width:16,height:16,color:y.content.secondary})}),e(p,{children:"Quality timeline"})]}),e("div",{className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80},children:e(o,{datas:[{data:l,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:c}],labels:r,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:e=>`${(e=>{switch(e){case 2:return"High";case 1:return"Medium";case.2:return"Low";default:return"Unknown"}})(e.parsed.y)}`,titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}})})]})};export{C as AnalyticsItem,E as QualityTimelineChart,x as RightPanelTemplateAnalytics,w as TemplateAnalyticsComponent};
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"../../../assets/icons/click.svg.js";import a from"../../../assets/icons/speedometer.svg.js";import{useState as l,useEffect as r,useMemo as c}from"react";import{LineChart as o}from"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as d}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as m}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as u,TitleSmall as h,Caption as p}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as g,LeftPanelContainer as v,RightPanelContainer as f,CustomTitleMedium as N}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as b,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as T}from"./TemplateAnalyticsSkeleton.js";const w=n=>{const{templateAnalytics:i,onClose:a,onProceed:o,onCancel:d,headingTitle:h,headingSubtitle:f,templateId:N}=n,{templateQuality:k=m.GREEN,fetchAnalytics:w}=i||{},{Icon:C,title:E,subline:j,sublineTextType:L,sublineColor:A}=b[k||m.GREEN],[R,W]=l((null==n?void 0:n.analyticsData)||{}),[B,S]=l(!0);r(()=>{(null==n?void 0:n.analyticsData)?S(!1):null==w||w(N||"").then(e=>{e.analytics&&W(e.analytics),S(!1)})},[]);const D=c(()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:o,disabled:B},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==a||a(),null==d||d()},disabled:B}}),[k,B,o,a,d]),O=L||p;return e(s,{open:!0,headingTitle:h,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==a||a()},headingSubtitle:f,footerShadow:!0,primaryButton:D.primaryButton,secondaryButton:D.secondaryButton,onClose:()=>{null==a||a()},width:"700px",children:t(g,{children:[k!==m.UNKNOWN&&e(v,{children:t("div",{className:"inside--container",children:[e("div",{className:"icon--container",style:{background:k===m.GREEN?y.background.positive.light:y.background.warning.light},children:e(C,{width:40,height:40,color:k===m.GREEN?y.content.positive:y.content.warning})}),E&&e(u,{style:{textAlign:"center"},children:E}),e(O,{style:{textAlign:"center",color:A||y.content.primary},children:j})]})}),B?e(T,{fullWidth:k===m.UNKNOWN}):e(x,{analyticsData:R,fullWidth:k===m.UNKNOWN})]})})},x=a=>{var l;const{analyticsData:r,skipTitle:c,fullWidth:o}=a;return t(f,{fullWidth:o,children:[c?e(n,{}):e(h,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:k.map((t,n)=>e(C,{icon:t.icon,title:t.title,value:r[t.valName]||0,percentValue:t.percentValName?r[t.percentValName]:null},n))}),(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics).length?t(n,{children:[e(h,{color:y.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(r.clickAnalytics).map(([t,n],a)=>e(C,{icon:i,title:t,value:n.totalClicks||0,percentValue:n.clickPercentage},a))})]}):e(n,{}),(null===(l=null==r?void 0:r.performance)||void 0===l?void 0:l.qualityTimeLine)&&r.performance.qualityTimeLine.length>0?t(n,{children:[e(h,{color:y.content.secondary,children:"Performance"}),e("div",{className:"mt-3",children:e(E,{qualityTimeLine:r.performance.qualityTimeLine})})]}):e(n,{})]})},C=i=>{const{icon:a,title:l,value:r,percentValue:c}=i;return t("div",{className:"each--analytics--container",children:[t("div",{className:"d-flex align--center",style:{gap:8},children:[e("div",{className:"each--icon--container",children:e(a,{width:"16px",height:"16px",color:y.background.brand})}),e(p,{children:l})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[c?e(d,{tagText:`${c}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(N,{children:r})]})]})},E=n=>{const{qualityTimeLine:i}=n,l=i.map(e=>{switch(e){case m.GREEN:return 2;case m.YELLOW:return 1;case m.RED:return.2;default:return 0}}),r=i.map((e,t)=>`T${t+1}`),c=i.map(e=>(e=>{switch(e){case m.GREEN:return y.content.positive;case m.YELLOW:return y.content.warning;case m.RED:return y.content.negative;default:return y.content.secondary}})(e));return t("div",{className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${y.background.inactive}`},children:[t("div",{className:"d-flex align--center",style:{gap:8,width:"50%"},children:[e("div",{className:"each--icon--container",children:e(a,{width:16,height:16,color:y.content.secondary})}),e(p,{children:"Quality timeline"})]}),e("div",{className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80},children:e(o,{datas:[{data:l,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:c}],labels:r,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:e=>`${(e=>{switch(e){case 2:return"High";case 1:return"Medium";case.2:return"Low";default:return"Unknown"}})(e.parsed.y)}`,titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}})})]})};export{C as AnalyticsItem,E as QualityTimelineChart,x as RightPanelTemplateAnalytics,w as TemplateAnalyticsComponent};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{BikShimmer as h}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as l}from"../styles/TemplateAnalyticsStyles.js";const s=s=>{const{skipTitleShimmer:d,fullWidth:m}=s;return e(l,{fullWidth:m,children:[i("div",{children:d?i(t,{}):i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:[0,1,2].map((e=>i(r,{},e)))}),e(t,{children:[i("div",{children:i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:i(r,{})})]})]})},r=()=>e("div",{className:"each--analytics--container",children:[e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"24px",height:"24px"}]}),i(h,{boxes:[{width:"69px",height:"11px"}]})]}),e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"43px",height:"18px"}]}),i(h,{boxes:[{width:"69px",height:"28px"}]})]})]});export{s as TemplateAnalyticsSkeleton};
+import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{BikShimmer as h}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as l}from"../styles/TemplateAnalyticsStyles.js";const s=s=>{const{skipTitleShimmer:d,fullWidth:m}=s;return e(l,{fullWidth:m,children:[i("div",{children:d?i(t,{}):i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:[0,1,2].map(e=>i(r,{},e))}),e(t,{children:[i("div",{children:i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:i(r,{})})]})]})},r=()=>e("div",{className:"each--analytics--container",children:[e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"24px",height:"24px"}]}),i(h,{boxes:[{width:"69px",height:"11px"}]})]}),e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"43px",height:"18px"}]}),i(h,{boxes:[{width:"69px",height:"28px"}]})]})]});export{s as TemplateAnalyticsSkeleton};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import t from"./Body.js";import i from"./Header.js";const s=s=>{let{channel:r,showVariableMapping:l,variableListFromProps:n,showOnlyContent:p,whatsappSpecificPickerMeta:m,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:f,fileName:u,setFileName:b,skipDefaultVariableContent:C}=s;return e("div",{style:{paddingBottom:0},children:a("div",{children:[r===o.EMAIL&&e(i,{showOnlyContent:p}),e(t,{variableListFromProps:n,whatsappSpecificPickerMeta:m,showVariableMapping:!!l,showOnlyContent:p,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:f,fileName:u,setFileName:b,skipDefaultVariableContent:C})]})})};export{s as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import i from"./Body.js";import t from"./Header.js";const s=({channel:s,showVariableMapping:l,variableListFromProps:r,showOnlyContent:n,whatsappSpecificPickerMeta:p,showVariableModal:m,discountCode:d,setDiscountCode:c,variableListForImage:h,showSampleValues:w,fileName:f,setFileName:b,skipDefaultVariableContent:u})=>e("div",{style:{paddingBottom:0},children:a("div",{children:[s===o.EMAIL&&e(t,{showOnlyContent:n}),e(i,{variableListFromProps:r,whatsappSpecificPickerMeta:p,showVariableMapping:!!l,showOnlyContent:n,showVariableModal:m,discountCode:d,setDiscountCode:c,variableListForImage:h,showSampleValues:w,fileName:f,setFileName:b,skipDefaultVariableContent:u})]})});export{s as default};

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

@@ -16,4 +16,4 @@ import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import i from"..
 	height: 100%;
 	width: 48%;
 	background: rgba(0, 0, 0, 0.1);
-`,P={value:"custom_link",label:"Custom URL"},w={value:"custom_text",label:"Custom text"},D={value:"static_expiry",label:"Static Expiry"},U=d=>{var U,H,N,R,I,W,Y,$,M;const{onFocus:z,variable:Z,index:q,showVariableModal:G,setShowDiscountCheckBox:F,componentType:K,CTAoptions:Q,buttonType:J}=d,[X,ee]=s(!1),[te,le]=s(""),[ie,ae]=s([]),[ne,oe]=s(),[se,ue]=s(!1),{variableList:de,setVariableList:re,setVariableCallback:ce,setShowVariablePicker:pe,device:me,channel:ve,isError:be,originalVariableList:ge,template:Oe,templateSelectionTriggered:ye,setTemplate:xe,setDisplayContent:je,setOriginalVariableList:he,globalNormalizedPlaceholders:fe,enabledCustomText:Te,pod:_e,selectedCarouselIndex:Ee,isProductCarouselType:Ce,isWhatsappCarousel:Ve,disableEditVariable:Se,disableEditExpiry:ke,templateErrorIndexes:Ae,maxCharLimit:Be,disableDatePicker:Le,showDiscountCodeExpiryInfo:Pe,cardIndex:we=1}=C();function De(e,t){var l,i,a,n;const o=e;le(""),oe(o),ve===y.WHATSAPP||ve===y.RCS?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(He(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Ne||Ne(null!==(i=Z.index)&&void 0!==i?i:0,o.value,!0)):(null==Ne||Ne(null!==(a=Z.index)&&void 0!==a?a:0,"",!0,o.value),He("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(He(o.value,"url"===o.bikPlaceholderType?"link":"string"),ve==y.WEBPUSH&&(null==Ie||Ie(null!==(n=Z.index)&&void 0!==n?n:0,o.value))):(le(""),He("",o.value))}function Ue(e,t){var l,i;le(t);const a="custom_link"===(null==ne?void 0:ne.value)&&t?t.includes("https")?t:`https://${t}`:t;He(a,"static_expiry"===e?"string":e),ve!==y.WHATSAPP&&ve!==y.RCS||null==Ne||Ne(null!==(l=Z.index)&&void 0!==l?l:0,a,"custom_link"===e||_e===j.CHATBOT&&"custom_text"===e,e),ve===y.WEBPUSH&&(null==Ie||Ie(null!==(i=Z.index)&&void 0!==i?i:0,a))}function He(e,t,l){var i,a,n,s,u;const d="custom_link"===t?"link":"custom_text"===t?"string":t;if(ve!==y.WHATSAPP&&ve!==y.WEBPUSH&&ve!==y.RCS){const l=S(q+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===me?"template_html_mobile":"template_html_desktop"),n=ve===y.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:Z.variableName);const o=ge.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t));null==he||he(o)}if(ve===y.WEBPUSH){const t=ge,l=t=>null==t?void 0:t.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)),i={BODY:"BODY"===K?l(t.body):t.body,TITLE:K===x.TITLE.toUpperCase()?l(t.title):t.title};null==he||he((e=>Object.assign(Object.assign({},e),{title:i.TITLE,body:i.BODY,buttons:t.buttons})))}if(ve===y.WHATSAPP||ve===y.RCS){if(null!=Ee&&Ee>-1&&Ce){const l=Object.assign({},ge).cards.map(((l,i)=>{var a,n,o;return"BODY"===K?Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"TITLE"===K?Object.assign(Object.assign({},l),{title:null===(n=l.title)||void 0===n?void 0:n.map(((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"BUTTONS"===K?Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((l,i)=>i===q?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==he||he((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=Ee&&Ee>-1?ge.cards[Ee]:ge;let r=i.body,c=i.title,p=i.header,m=i.buttons;if("BODY"===K?r=null===(a=i.body)||void 0===a?void 0:a.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"TITLE"===K?c=null===(n=null==i?void 0:i.title)||void 0===n?void 0:n.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"HEADER"===K?p=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"BUTTONS"===K&&(m=null===(u=i.buttons)||void 0===u?void 0:u.map(((i,a)=>a===q?Object.assign(Object.assign({},i),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===i.type?e:[e],queryParams:null!=l?l:[]}):i))),null!=Ee&&Ee>-1){const e=o(ge.cards);e[Ee]={header:p,body:r,buttons:m,title:c},null==he||he((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==he||he((e=>Object.assign(Object.assign({},e),{header:p,body:r,buttons:m,title:c})))}}function Ne(e,t,l,i){var a,n,s,u,d,r,c,p,m,v,b,g;if(null!=Ee&&Ee>-1&&Ce){const n=Object.assign({},Oe).components.map((l=>{var i;return O(l.type)?Object.assign(Object.assign({},l),{cards:null===(i=l.cards)||void 0===i?void 0:i.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var i,a,n,o,s,u,d,r,c,p,m;if("BODY"===l.type&&"BODY"===K){if(null===(a=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0]){const i=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{body_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("TITLE"===l.type&&"TITLE"===K){if(null===(d=null===(u=l.example)||void 0===u?void 0:u.title_text)||void 0===d?void 0:d[0]){const i=[...null!==(p=null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])&&void 0!==p?p:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{title_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(m=l.buttons)||void 0===m?void 0:m.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:[t]}):l));return i?Object.assign(Object.assign({},l),{buttons:i}):l}return l}))})))}):l})),s=o(Oe);if(l){const l=null===(a=Object.assign({},Oe).mapping.cards)||void 0===a?void 0:a.map(((l,a)=>{var n,o,s,u;if("BODY"===K)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("TITLE"===K)return Object.assign(Object.assign({},l),{title:null===(o=null==l?void 0:l.title)||void 0===o?void 0:o.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===K&&(null==l?void 0:l.buttons)){let n=-1,o=-1;return null===(s=Oe.components[we].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(o=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(u=l.buttons)||void 0===u?void 0:u.map(((e,l)=>l===o?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=n,void(null==xe||xe(s))}const y=null!=Ee&&Ee>-1?{components:null===(n=Object.assign({},Oe).components[we].cards)||void 0===n?void 0:n[Ee].components,mapping:null===(s=Object.assign({},Oe).mapping.cards)||void 0===s?void 0:s[Ee]}:Object.assign({},Oe),x=null===(u=null==y?void 0:y.components)||void 0===u?void 0:u.map((l=>{var i,a,n,o,s,u,d,r,c,p,m,v,b,g,O,y;const x=Object.assign({},l);if("BODY"===l.type&&"BODY"===K&&(Array.isArray(null===(i=l.example)||void 0===i?void 0:i.body_text)||(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]))){const l=[...null!==(u=null===(s=null===(o=x.example)||void 0===o?void 0:o.body_text)||void 0===s?void 0:s[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{body_text:[l]});return Object.assign(Object.assign({},x),{example:i})}if("TITLE"===l.type&&"TITLE"===K){if(Array.isArray(null===(d=l.example)||void 0===d?void 0:d.title_text)||(null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])){const l=[...null!==(v=null===(m=null===(p=x.example)||void 0===p?void 0:p.title_text)||void 0===m?void 0:m[0])&&void 0!==v?v:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{title_text:[l]});return Object.assign(Object.assign({},x),{example:i})}}else if("HEADER"===l.type&&"HEADER"===K){if(null===(b=l.example)||void 0===b?void 0:b.header_text){const l=[...null!==(O=null===(g=x.example)||void 0===g?void 0:g.header_text)&&void 0!==O?O:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{header_text:l});return Object.assign(Object.assign({},x),{example:i})}}else{if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(y=l.buttons)||void 0===y?void 0:y.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return i?Object.assign(Object.assign({},x),{buttons:i}):x}if("limited_time_offer"===l.type&&"limited_time_offer"===K)return Object.assign(Object.assign({},x),{example:Object.assign(Object.assign({},x.example),{limited_time_offer:t})})}return l}));if(y.components=x,l)if("BODY"===K&&(null===(d=null==y?void 0:y.mapping)||void 0===d?void 0:d.body))y.mapping=Object.assign(Object.assign({},y.mapping),{body:null===(c=null===(r=y.mapping)||void 0===r?void 0:r.body)||void 0===c?void 0:c.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("TITLE"===K&&(null===(p=null==y?void 0:y.mapping)||void 0===p?void 0:p.title))y.mapping=Object.assign(Object.assign({},y.mapping),{title:null===(v=null===(m=y.mapping)||void 0===m?void 0:m.title)||void 0===v?void 0:v.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===K&&(null===(b=null==y?void 0:y.mapping)||void 0===b?void 0:b.header))y.mapping=Object.assign(Object.assign({},y.mapping),{header:y.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===K&&(null===(g=null==y?void 0:y.mapping)||void 0===g?void 0:g.buttons)){let l=-1,a=-1;x.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),y.mapping=Object.assign(Object.assign({},y.mapping),{buttons:y.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=Ee&&Ee>-1&&Oe){const e=o(Oe);e.components[we].cards[Ee].components=y.components,e.mapping.cards[Ee]=y.mapping,null==xe||xe(e)}else null==xe||xe(Object.assign({},y))}u((()=>{X&&(null==z||z())}),[X]),u((()=>{!function(){var e,t,l,i,a;const n="mobile"===me?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(i=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!==i?i:"")+(null===(a=null==o?void 0:o.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);ve===y.EMAIL&&(null==je||je(s))}()}),[ye]),u((()=>{!function(){var e,t;const l=[];let i=[];if(ve!==y.MESSAGE||Te){"link"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(P)):"date_time"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(D)):(l.push({label:"",options:[P,w,D]}),oe(w));const e=null!=fe?fe:[];ae([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:_.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())})}))]),i=[...l,...e]}else{const e=null!=fe?fe:[];ae([{label:"",options:[w,P]},...e]),i=[{label:"",options:[w,P]},...e]}if((ve===y.WHATSAPP||ve===y.EMAIL||ve===y.MESSAGE||ve===y.WEBPUSH||ve===y.RCS)&&Z.updatedValue)if(g.test(Z.updatedValue)&&(ve===y.WHATSAPP||ve===y.RCS)||Z.updatedValue.startsWith("{{")&&ve!==y.WHATSAPP&&ve!==y.RCS){const e=function(e,t,l){var i;let a={label:"",value:""};const n=l===(y.WHATSAPP||y.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(G){let t=e.updatedValue;if(_e===j.CHATBOT&&"BUTTONS"===K){const l=null==Q?void 0:Q.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}a={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(i=e.updatedValue)&&void 0!==i?i:""}}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()&&(a=e)}))}));return a}(Z,i,ve);e.value&&oe(e)}else"date_time"===Z.type?(oe(D),le(Z.updatedValue),Ne(null!==(e=Z.index)&&void 0!==e?e:0,Z.updatedValue)):(null===(t=Z.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(oe(P),le(Z.updatedValue.split("https://")[1])):(oe(w),le(Z.updatedValue))}()}),[Ee]),u((()=>{me&&ne&&te&&setTimeout((()=>{He("custom_link"===(null==ne?void 0:ne.value)&&te?te.includes("https")?te:`https://${te}`:te,ne.value)}),100)}),[me]),u((()=>{!se&&ne&&Z.updatedValue&&setTimeout((()=>{He("custom_link"===(null==ne?void 0:ne.value)&&Z.updatedValue?Z.updatedValue.includes("https")?Z.updatedValue:`https://${Z.updatedValue}`:Z.updatedValue,ne.value),ue(!0)}),100)}),[ne]);const Re=e=>{null==F||F(!1),"{{custom.url}}"===e.actualValue?De({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"static_expiry"}):De({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ie(e,t){var l;const i=o(Oe),a=K.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[a])&&(i.webpushBroadcastConfig[a][e]=t),null==xe||xe(Object.assign({},i))}return e(A,{channel:ve,focused:X,onMouseEnter:()=>ee(!0),onMouseLeave:()=>ee(!1),children:[t("div",{style:{marginBottom:8},children:e(f,{style:{color:be&&!ne?E.content.negative:E.content.primary},children:[null===(U=Z.variableName)||void 0===U?void 0:U.replace("{{","").replace("}}","")," ","link"===(null==Z?void 0:Z.type)?"link":"variable"]})}),t("div",{style:{marginBottom:12},children:G?e("div",{style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ne?void 0:ne.label)?"space-between":"flex-end",backgroundColor:"date_time"===(null==Z?void 0:Z.type)&&ke?E.background.base:void 0},children:[t(T,{numberOfLines:1,children:_e===j.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(H=null==ne?void 0:ne.value)&&void 0!==H?H:"")?null==ne?void 0:ne.label:null==ne?void 0:ne.value:b(null!==(N=null==ne?void 0:ne.label)&&void 0!==N?N:"",20,!0)}),Se||"date_time"===(null==Z?void 0:Z.type)&&ke?t(l,{}):t(i,{onClick:()=>{(()=>{let e=Array.isArray(de)?[...de]:[];const t=(t,l,i)=>{const a=V({variableList:e,categoryDisplayName:t,variableDisplayName:l,variableValue:i});Array.isArray(a)&&(e=a)};_e===j.CHATBOT&&J!==h.URL&&"limited_time_offer"!==K&&t("Custom Variables","Custom Text","{{custom.text}}"),J===h.URL&&_e===j.CHATBOT?t("Custom Variables","Custom URL","{{custom.url}}"):"limited_time_offer"===K?t("Static Variables","Static Expiry","{{static.expiry}}"):J===h.COPY_CODE&&t("Custom Variables","Custom Text","{{custom.text}}"),re(e)})(),ce((()=>Re)),pe(!0)},width:24,height:24,color:E.content.primary})]}):t(m,{disabled:Se,options:ie,isSearchable:!1,onSelect:De,defaultOptions:ne?[Object.assign(Object.assign({},ne),{selected:!0})]:[]})}),("custom_text"===(null==ne?void 0:ne.value)||"custom_link"===(null==ne?void 0:ne.value))&&t(v,{state:Se?"disabled":"none",labelText:"custom_text"===(null==ne?void 0:ne.value)?"Custom text value":"custom_link"===(null==ne?void 0:ne.value)?"Custom URL value":"",id:`variable-value-${null==ne?void 0:ne.value}-${q}`,value:te,errorMessage:be&&(null===(R=null==Ae?void 0:Ae.buttons)||void 0===R?void 0:R.includes(null!==(I=null==Z?void 0:Z.index)&&void 0!==I?I:-1))?te&&0!==te.trim().length?"custom_link"!==ne.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${te.trim()}`)&&0!==te.trim().length?"custom_link"!==ne.value&&te.length>30?"Length cannot be more than 30":"BUTTONS"===K&&"custom_link"!==ne.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Be||("custom_link"===(null==ne?void 0:ne.value)?2e3:"BUTTONS"===K?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ne?void 0:ne.value)?"https://":"",placeholder:"link"===Z.type||"custom_link"===ne.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Ue(ne.value,e)}}),"static_expiry"===(null==ne?void 0:ne.value)&&e("div",{style:{position:"relative"},children:[(Se||Le)&&e(B,{onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"},children:[t(L,{}),t(L,{})]}),t(p,{placement:"auto",time:n(te?new Date(te):new Date,"hh:mm a"),date:te?new Date(te):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Ue("static_expiry",e.toISOString())}})]}),"static_expiry"===(null==ne?void 0:ne.value)&&Pe&&t("div",{style:{marginTop:8},children:t(r,{containerStyle:{padding:"4px 8px"},icon:()=>t(a,{width:16,height:16,color:E.content.secondary}),type:c.NEUTRAL,text:"Please use the same expiration code that you applied when creating\nthe code on Shopify"})}),"link"===Z.type&&"custom_link"!==(null==ne?void 0:ne.value)&&!Ce&&!Ve&&_e===j.CHATBOT&&t(k,{isError:null!==($=null===(W=null==Ae?void 0:Ae.buttons)||void 0===W?void 0:W.includes(null!==(Y=null==Z?void 0:Z.index)&&void 0!==Y?Y:-1))&&void 0!==$&&$,params:null!==(M=Z.queryParams)&&void 0!==M?M:[],onChange:e=>{He(Z.updatedValue,"link",e)},variableValue:Z.updatedValue})]})};export{A as Container,U as default};
+`,P={value:"custom_link",label:"Custom URL"},w={value:"custom_text",label:"Custom text"},D={value:"static_expiry",label:"Static Expiry"},U=d=>{var U,H,N,R,I,W,Y,$,M;const{onFocus:z,variable:Z,index:q,showVariableModal:G,setShowDiscountCheckBox:F,componentType:K,CTAoptions:Q,buttonType:J}=d,[X,ee]=s(!1),[te,le]=s(""),[ie,ae]=s([]),[ne,oe]=s(),[se,ue]=s(!1),{variableList:de,setVariableList:re,setVariableCallback:ce,setShowVariablePicker:pe,device:me,channel:ve,isError:be,originalVariableList:ge,template:Oe,templateSelectionTriggered:ye,setTemplate:xe,setDisplayContent:je,setOriginalVariableList:he,globalNormalizedPlaceholders:fe,enabledCustomText:Te,pod:_e,selectedCarouselIndex:Ee,isProductCarouselType:Ce,isWhatsappCarousel:Ve,disableEditVariable:Se,disableEditExpiry:ke,templateErrorIndexes:Ae,maxCharLimit:Be,disableDatePicker:Le,showDiscountCodeExpiryInfo:Pe,cardIndex:we=1}=C();function De(e,t){var l,i,a,n;const o=e;le(""),oe(o),ve===y.WHATSAPP||ve===y.RCS?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(He(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Ne||Ne(null!==(i=Z.index)&&void 0!==i?i:0,o.value,!0)):(null==Ne||Ne(null!==(a=Z.index)&&void 0!==a?a:0,"",!0,o.value),He("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(He(o.value,"url"===o.bikPlaceholderType?"link":"string"),ve==y.WEBPUSH&&(null==Ie||Ie(null!==(n=Z.index)&&void 0!==n?n:0,o.value))):(le(""),He("",o.value))}function Ue(e,t){var l,i;le(t);const a="custom_link"===(null==ne?void 0:ne.value)&&t?t.includes("https")?t:`https://${t}`:t;He(a,"static_expiry"===e?"string":e),ve!==y.WHATSAPP&&ve!==y.RCS||null==Ne||Ne(null!==(l=Z.index)&&void 0!==l?l:0,a,"custom_link"===e||_e===j.CHATBOT&&"custom_text"===e,e),ve===y.WEBPUSH&&(null==Ie||Ie(null!==(i=Z.index)&&void 0!==i?i:0,a))}function He(e,t,l){var i,a,n,s,u;const d="custom_link"===t?"link":"custom_text"===t?"string":t;if(ve!==y.WHATSAPP&&ve!==y.WEBPUSH&&ve!==y.RCS){const l=S(q+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===me?"template_html_mobile":"template_html_desktop"),n=ve===y.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:Z.variableName);const o=ge.map((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t);null==he||he(o)}if(ve===y.WEBPUSH){const t=ge,l=t=>null==t?void 0:t.map((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t),i={BODY:"BODY"===K?l(t.body):t.body,TITLE:K===x.TITLE.toUpperCase()?l(t.title):t.title};null==he||he(e=>Object.assign(Object.assign({},e),{title:i.TITLE,body:i.BODY,buttons:t.buttons}))}if(ve===y.WHATSAPP||ve===y.RCS){if(null!=Ee&&Ee>-1&&Ce){const l=Object.assign({},ge).cards.map((l,i)=>{var a,n,o;return"BODY"===K?Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)}):"TITLE"===K?Object.assign(Object.assign({},l),{title:null===(n=l.title)||void 0===n?void 0:n.map((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)}):"BUTTONS"===K?Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map((l,i)=>i===q?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l)}):l});return void(null==he||he(e=>Object.assign(Object.assign({},e),{cards:l})))}const i=null!=Ee&&Ee>-1?ge.cards[Ee]:ge;let r=i.body,c=i.title,p=i.header,m=i.buttons;if("BODY"===K?r=null===(a=i.body)||void 0===a?void 0:a.map((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t):"TITLE"===K?c=null===(n=null==i?void 0:i.title)||void 0===n?void 0:n.map((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t):"HEADER"===K?p=null===(s=i.header)||void 0===s?void 0:s.map((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t):"BUTTONS"===K&&(m=null===(u=i.buttons)||void 0===u?void 0:u.map((i,a)=>a===q?Object.assign(Object.assign({},i),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===i.type?e:[e],queryParams:null!=l?l:[]}):i)),null!=Ee&&Ee>-1){const e=o(ge.cards);e[Ee]={header:p,body:r,buttons:m,title:c},null==he||he(t=>Object.assign(Object.assign({},t),{cards:e}))}else null==he||he(e=>Object.assign(Object.assign({},e),{header:p,body:r,buttons:m,title:c}))}}function Ne(e,t,l,i){var a,n,s,u,d,r,c,p,m,v,b,g;if(null!=Ee&&Ee>-1&&Ce){const n=Object.assign({},Oe).components.map(l=>{var i;return O(l.type)?Object.assign(Object.assign({},l),{cards:null===(i=l.cards)||void 0===i?void 0:i.map(l=>Object.assign(Object.assign({},l),{components:l.components.map(l=>{var i,a,n,o,s,u,d,r,c,p,m;if("BODY"===l.type&&"BODY"===K){if(null===(a=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0]){const i=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{body_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("TITLE"===l.type&&"TITLE"===K){if(null===(d=null===(u=l.example)||void 0===u?void 0:u.title_text)||void 0===d?void 0:d[0]){const i=[...null!==(p=null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])&&void 0!==p?p:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{title_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(m=l.buttons)||void 0===m?void 0:m.map((l,i)=>i===e?Object.assign(Object.assign({},l),{example:[t]}):l);return i?Object.assign(Object.assign({},l),{buttons:i}):l}return l})}))}):l}),s=o(Oe);if(l){const l=null===(a=Object.assign({},Oe).mapping.cards)||void 0===a?void 0:a.map((l,a)=>{var n,o,s,u;if("BODY"===K)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l)});if("TITLE"===K)return Object.assign(Object.assign({},l),{title:null===(o=null==l?void 0:l.title)||void 0===o?void 0:o.map((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l)});if("BUTTONS"===K&&(null==l?void 0:l.buttons)){let n=-1,o=-1;return null===(s=Oe.components[we].cards)||void 0===s||s[a].components.forEach(t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(o=n))}))}),Object.assign(Object.assign({},l),{buttons:null===(u=l.buttons)||void 0===u?void 0:u.map((e,l)=>l===o?"custom_link"===i?"((customPlaceholderName))":t:e)})}return l});s.mapping.cards=l}return s.components=n,void(null==xe||xe(s))}const y=null!=Ee&&Ee>-1?{components:null===(n=Object.assign({},Oe).components[we].cards)||void 0===n?void 0:n[Ee].components,mapping:null===(s=Object.assign({},Oe).mapping.cards)||void 0===s?void 0:s[Ee]}:Object.assign({},Oe),x=null===(u=null==y?void 0:y.components)||void 0===u?void 0:u.map(l=>{var i,a,n,o,s,u,d,r,c,p,m,v,b,g,O,y;const x=Object.assign({},l);if("BODY"===l.type&&"BODY"===K&&(Array.isArray(null===(i=l.example)||void 0===i?void 0:i.body_text)||(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]))){const l=[...null!==(u=null===(s=null===(o=x.example)||void 0===o?void 0:o.body_text)||void 0===s?void 0:s[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{body_text:[l]});return Object.assign(Object.assign({},x),{example:i})}if("TITLE"===l.type&&"TITLE"===K){if(Array.isArray(null===(d=l.example)||void 0===d?void 0:d.title_text)||(null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])){const l=[...null!==(v=null===(m=null===(p=x.example)||void 0===p?void 0:p.title_text)||void 0===m?void 0:m[0])&&void 0!==v?v:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{title_text:[l]});return Object.assign(Object.assign({},x),{example:i})}}else if("HEADER"===l.type&&"HEADER"===K){if(null===(b=l.example)||void 0===b?void 0:b.header_text){const l=[...null!==(O=null===(g=x.example)||void 0===g?void 0:g.header_text)&&void 0!==O?O:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},x.example),{header_text:l});return Object.assign(Object.assign({},x),{example:i})}}else{if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(y=l.buttons)||void 0===y?void 0:y.map((l,i)=>i===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l);return i?Object.assign(Object.assign({},x),{buttons:i}):x}if("limited_time_offer"===l.type&&"limited_time_offer"===K)return Object.assign(Object.assign({},x),{example:Object.assign(Object.assign({},x.example),{limited_time_offer:t})})}return l});if(y.components=x,l)if("BODY"===K&&(null===(d=null==y?void 0:y.mapping)||void 0===d?void 0:d.body))y.mapping=Object.assign(Object.assign({},y.mapping),{body:null===(c=null===(r=y.mapping)||void 0===r?void 0:r.body)||void 0===c?void 0:c.map((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l)});else if("TITLE"===K&&(null===(p=null==y?void 0:y.mapping)||void 0===p?void 0:p.title))y.mapping=Object.assign(Object.assign({},y.mapping),{title:null===(v=null===(m=y.mapping)||void 0===m?void 0:m.title)||void 0===v?void 0:v.map((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l)});else if("HEADER"===K&&(null===(b=null==y?void 0:y.mapping)||void 0===b?void 0:b.header))y.mapping=Object.assign(Object.assign({},y.mapping),{header:y.mapping.header.map((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l)});else if("BUTTONS"===K&&(null===(g=null==y?void 0:y.mapping)||void 0===g?void 0:g.buttons)){let l=-1,a=-1;x.forEach(t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))}))}),y.mapping=Object.assign(Object.assign({},y.mapping),{buttons:y.mapping.buttons.map((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e)})}if(null!=Ee&&Ee>-1&&Oe){const e=o(Oe);e.components[we].cards[Ee].components=y.components,e.mapping.cards[Ee]=y.mapping,null==xe||xe(e)}else null==xe||xe(Object.assign({},y))}u(()=>{X&&(null==z||z())},[X]),u(()=>{!function(){var e,t,l,i,a;const n="mobile"===me?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(i=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!==i?i:"")+(null===(a=null==o?void 0:o.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);ve===y.EMAIL&&(null==je||je(s))}()},[ye]),u(()=>{!function(){var e,t;const l=[];let i=[];if(ve!==y.MESSAGE||Te){"link"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(P)):"date_time"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(D)):(l.push({label:"",options:[P,w,D]}),oe(w));const e=null!=fe?fe:[];ae([...l,...e.map(e=>{var t,l;return Object.assign(Object.assign({},e),{label:_.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())})})]),i=[...l,...e]}else{const e=null!=fe?fe:[];ae([{label:"",options:[w,P]},...e]),i=[{label:"",options:[w,P]},...e]}if((ve===y.WHATSAPP||ve===y.EMAIL||ve===y.MESSAGE||ve===y.WEBPUSH||ve===y.RCS)&&Z.updatedValue)if(g.test(Z.updatedValue)&&(ve===y.WHATSAPP||ve===y.RCS)||Z.updatedValue.startsWith("{{")&&ve!==y.WHATSAPP&&ve!==y.RCS){const e=function(e,t,l){var i;let a={label:"",value:""};const n=l===(y.WHATSAPP||y.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(G){let t=e.updatedValue;if(_e===j.CHATBOT&&"BUTTONS"===K){const l=null==Q?void 0:Q.filter(t=>t.placeHolder===e.updatedValue);l&&l.length>0&&(t=l[0].label)}a={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(i=e.updatedValue)&&void 0!==i?i:""}}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()&&(a=e)})});return a}(Z,i,ve);e.value&&oe(e)}else"date_time"===Z.type?(oe(D),le(Z.updatedValue),Ne(null!==(e=Z.index)&&void 0!==e?e:0,Z.updatedValue)):(null===(t=Z.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(oe(P),le(Z.updatedValue.split("https://")[1])):(oe(w),le(Z.updatedValue))}()},[Ee]),u(()=>{me&&ne&&te&&setTimeout(()=>{He("custom_link"===(null==ne?void 0:ne.value)&&te?te.includes("https")?te:`https://${te}`:te,ne.value)},100)},[me]),u(()=>{!se&&ne&&Z.updatedValue&&setTimeout(()=>{He("custom_link"===(null==ne?void 0:ne.value)&&Z.updatedValue?Z.updatedValue.includes("https")?Z.updatedValue:`https://${Z.updatedValue}`:Z.updatedValue,ne.value),ue(!0)},100)},[ne]);const Re=e=>{null==F||F(!1),"{{custom.url}}"===e.actualValue?De({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"static_expiry"}):De({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ie(e,t){var l;const i=o(Oe),a=K.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[a])&&(i.webpushBroadcastConfig[a][e]=t),null==xe||xe(Object.assign({},i))}return e(A,{channel:ve,focused:X,onMouseEnter:()=>ee(!0),onMouseLeave:()=>ee(!1),children:[t("div",{style:{marginBottom:8},children:e(f,{style:{color:be&&!ne?E.content.negative:E.content.primary},children:[null===(U=Z.variableName)||void 0===U?void 0:U.replace("{{","").replace("}}","")," ","link"===(null==Z?void 0:Z.type)?"link":"variable"]})}),t("div",{style:{marginBottom:12},children:G?e("div",{style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ne?void 0:ne.label)?"space-between":"flex-end",backgroundColor:"date_time"===(null==Z?void 0:Z.type)&&ke?E.background.base:void 0},children:[t(T,{numberOfLines:1,children:_e===j.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(H=null==ne?void 0:ne.value)&&void 0!==H?H:"")?null==ne?void 0:ne.label:null==ne?void 0:ne.value:b(null!==(N=null==ne?void 0:ne.label)&&void 0!==N?N:"",20,!0)}),Se||"date_time"===(null==Z?void 0:Z.type)&&ke?t(l,{}):t(i,{onClick:()=>{(()=>{let e=Array.isArray(de)?[...de]:[];const t=(t,l,i)=>{const a=V({variableList:e,categoryDisplayName:t,variableDisplayName:l,variableValue:i});Array.isArray(a)&&(e=a)};_e===j.CHATBOT&&J!==h.URL&&"limited_time_offer"!==K&&t("Custom Variables","Custom Text","{{custom.text}}"),J===h.URL&&_e===j.CHATBOT?t("Custom Variables","Custom URL","{{custom.url}}"):"limited_time_offer"===K?t("Static Variables","Static Expiry","{{static.expiry}}"):J===h.COPY_CODE&&t("Custom Variables","Custom Text","{{custom.text}}"),re(e)})(),ce(()=>Re),pe(!0)},width:24,height:24,color:E.content.primary})]}):t(m,{disabled:Se,options:ie,isSearchable:!1,onSelect:De,defaultOptions:ne?[Object.assign(Object.assign({},ne),{selected:!0})]:[]})}),("custom_text"===(null==ne?void 0:ne.value)||"custom_link"===(null==ne?void 0:ne.value))&&t(v,{state:Se?"disabled":"none",labelText:"custom_text"===(null==ne?void 0:ne.value)?"Custom text value":"custom_link"===(null==ne?void 0:ne.value)?"Custom URL value":"",id:`variable-value-${null==ne?void 0:ne.value}-${q}`,value:te,errorMessage:be&&(null===(R=null==Ae?void 0:Ae.buttons)||void 0===R?void 0:R.includes(null!==(I=null==Z?void 0:Z.index)&&void 0!==I?I:-1))?te&&0!==te.trim().length?"custom_link"!==ne.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${te.trim()}`)&&0!==te.trim().length?"custom_link"!==ne.value&&te.length>30?"Length cannot be more than 30":"BUTTONS"===K&&"custom_link"!==ne.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Be||("custom_link"===(null==ne?void 0:ne.value)?2e3:"BUTTONS"===K?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ne?void 0:ne.value)?"https://":"",placeholder:"link"===Z.type||"custom_link"===ne.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Ue(ne.value,e)}}),"static_expiry"===(null==ne?void 0:ne.value)&&e("div",{style:{position:"relative"},children:[(Se||Le)&&e(B,{onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"},children:[t(L,{}),t(L,{})]}),t(p,{placement:"auto",time:n(te?new Date(te):new Date,"hh:mm a"),date:te?new Date(te):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Ue("static_expiry",e.toISOString())}})]}),"static_expiry"===(null==ne?void 0:ne.value)&&Pe&&t("div",{style:{marginTop:8},children:t(r,{containerStyle:{padding:"4px 8px"},icon:()=>t(a,{width:16,height:16,color:E.content.secondary}),type:c.NEUTRAL,text:"Please use the same expiration code that you applied when creating\nthe code on Shopify"})}),"link"===Z.type&&"custom_link"!==(null==ne?void 0:ne.value)&&!Ce&&!Ve&&_e===j.CHATBOT&&t(k,{isError:null!==($=null===(W=null==Ae?void 0:Ae.buttons)||void 0===W?void 0:W.includes(null!==(Y=null==Z?void 0:Z.index)&&void 0!==Y?Y:-1))&&void 0!==$&&$,params:null!==(M=Z.queryParams)&&void 0!==M?M:[],onChange:e=>{He(Z.updatedValue,"link",e)},variableValue:Z.updatedValue})]})};export{A as Container,U as default};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import{Input as a}from"../../input/Input.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as l}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import d from"./VariableConnector.js";const n=n=>{var m,s,v,c,b,h,u;const{descriptionComponent:x,type:f,showVariableModal:y,originalList:T,channel:w}=n,{originalVariableList:E,disableEditVariable:j,selectedCarouselIndex:C,initialExpiryDateTime:L}=p();let V=E;w&&(w==r.WHATSAPP||w==r.RCS)&&T&&(V=T);const A=x.type;if("BODY"===A||"TITLE"===A.toLocaleUpperCase())return e("div",{children:null===(s=null!=C&&C>-1?"TITLE"===A.toLocaleUpperCase()?null===(m=V.cards[C])||void 0===m?void 0:m.title:V.cards[C].body:"TITLE"===A.toLocaleUpperCase()?(r.RCS,null==V?void 0:V.title):null==V?void 0:V.body)||void 0===s?void 0:s.map(((t,r)=>j||!t.isEditableVariable?i("div",{style:{margin:"16px 8px"},children:[i(o,{style:{color:l.content.primary},children:["HEADER"===f?"Header":""," Locked variable ",r+1]}),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]},r):e(d,{index:r,variable:t,showVariableModal:y,componentType:A},`${r}-${t.index}`)))});if("HEADER"===A)return e("div",{children:null===(v=null!=C&&C>-1?V.cards[C].header:null==V?void 0:V.header)||void 0===v?void 0:v.map(((t,r)=>t.isEditableVariable?e(d,{index:r,variable:t,showVariableModal:y,componentType:A},`${r}-${t.index}`):i("div",{style:{margin:"16px 8px"},children:[i(o,{style:{color:l.content.primary},children:["HEADER"===f?"Header":""," Locked variable ",r+1]}),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]},r)))});if("limited_time_offer"===A){let i=null!==(b=null===(c=x.example)||void 0===c?void 0:c.limited_time_offer)&&void 0!==b?b:(new Date).toISOString();return L&&(i=new Date(L).toISOString()),e("div",{children:e(d,{index:0,variable:{variableName:null!==(u=null===(h=null==x?void 0:x.limited_time_offer)||void 0===h?void 0:h.text)&&void 0!==u?u:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:y,componentType:A},`${A}`)})}return e(t,{})};export{n as default};
+import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import{Input as a}from"../../input/Input.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as l}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import d from"./VariableConnector.js";const n=n=>{var m,s,v,c,b,h,u;const{descriptionComponent:x,type:f,showVariableModal:y,originalList:T,channel:w}=n,{originalVariableList:E,disableEditVariable:j,selectedCarouselIndex:C,initialExpiryDateTime:L}=p();let V=E;w&&(w==r.WHATSAPP||w==r.RCS)&&T&&(V=T);const A=x.type;if("BODY"===A||"TITLE"===A.toLocaleUpperCase())return e("div",{children:null===(s=null!=C&&C>-1?"TITLE"===A.toLocaleUpperCase()?null===(m=V.cards[C])||void 0===m?void 0:m.title:V.cards[C].body:"TITLE"===A.toLocaleUpperCase()?(r.RCS,null==V?void 0:V.title):null==V?void 0:V.body)||void 0===s?void 0:s.map((t,r)=>j||!t.isEditableVariable?i("div",{style:{margin:"16px 8px"},children:[i(o,{style:{color:l.content.primary},children:["HEADER"===f?"Header":""," Locked variable ",r+1]}),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]},r):e(d,{index:r,variable:t,showVariableModal:y,componentType:A},`${r}-${t.index}`))});if("HEADER"===A)return e("div",{children:null===(v=null!=C&&C>-1?V.cards[C].header:null==V?void 0:V.header)||void 0===v?void 0:v.map((t,r)=>t.isEditableVariable?e(d,{index:r,variable:t,showVariableModal:y,componentType:A},`${r}-${t.index}`):i("div",{style:{margin:"16px 8px"},children:[i(o,{style:{color:l.content.primary},children:["HEADER"===f?"Header":""," Locked variable ",r+1]}),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]},r))});if("limited_time_offer"===A){let i=null!==(b=null===(c=x.example)||void 0===c?void 0:c.limited_time_offer)&&void 0!==b?b:(new Date).toISOString();return L&&(i=new Date(L).toISOString()),e("div",{children:e(d,{index:0,variable:{variableName:null!==(u=null===(h=null==x?void 0:x.limited_time_offer)||void 0===h?void 0:h.text)&&void 0!==u?u:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:y,componentType:A},`${A}`)})}return e(t,{})};export{n as default};

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

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

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

@@ -6,4 +6,4 @@ import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`,a=i=>{let{headerText:n,subText:a,toolTipInfo:c,containerStyle:m}=i;return t(d,{style:Object.assign({},m),children:[t("div",{style:{display:"flex",gap:8},children:[o(l,{style:{color:p.content.primary},children:n}),c&&o(r,{body:c,children:o("div",{children:o(e,{width:20,height:20,color:p.content.placeholder})})})]}),o(s,{style:{color:p.content.secondary,marginBottom:0,lineHeight:20,display:"block"},children:a})]})};export{a as default};
+`,a=({headerText:i,subText:n,toolTipInfo:a,containerStyle:c})=>t(d,{style:Object.assign({},c),children:[t("div",{style:{display:"flex",gap:8},children:[o(l,{style:{color:p.content.primary},children:i}),a&&o(r,{body:a,children:o("div",{children:o(e,{width:20,height:20,color:p.content.placeholder})})})]}),o(s,{style:{color:p.content.secondary,marginBottom:0,lineHeight:20,display:"block"},children:n})]});export{a 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{cloneDeep as l}from"lodash";import{useState as a,useEffect as s}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as o}from"../../template-preview/constants/regexPatterns.js";import{UNSUBSCRIBE_URL_OPTION as r,STATIC_URL_CTA_OPTION as u,CUSTOM_URL_NAME as c}from"../../template-preview/models/TemplateMeta.js";import{POD as d}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as p}from"../../TypographyStyle.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import{UNSUBSCRIBE_URL_VARIABLE as v,STATIC_URL_VARIABLE_NAME as j}from"../utils/constants.js";import{validateIsUrl as f}from"../utils/validateIsUrl.js";import g,{Container as O}from"./VariableConnector.js";const x=x=>{let{variableListIndex:y,button:h,updateSelectedURLTemplateBtn:L,updateSelectedQRBTemplateBtn:R,currentVariableList:U,CTAoptions:V,QRBoptions:T,disableEdit:w}=x;var C,I,E,P,H;const[N,B]=a(""),[_,Q]=a(),k=null==V?void 0:V.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value&&_.label===e.label}))),S=null==T?void 0:T.map((e=>Object.assign(Object.assign({},e),{selected:(null==_?void 0:_.value)===e.value}))),{isError:K,disableEditVariable:Y,pod:$,selectedCarouselIndex:q,originalVariableList:A,setOriginalVariableList:M,isProductCarouselType:D,ctaOptionsErrors:W,setCtaOptionsErrors:z}=m();function F(e){if(B(e),null!=q&&q>-1&&D){const t=l(A);if("URL"===h.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[y];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const a=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:a})}));null==M||M((e=>Object.assign(Object.assign({},e),{cards:l}))),null==L||L(`https://${e}`,"custom",y)}return}let t=U.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const a=U.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),s=Object.assign({},null!=q&&q>-1?A.cards[q]:A);if(s.buttons=a,null!=q&&q>-1){const e=[...A.cards];e[q]=s,null==M||M((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==M||M((e=>Object.assign(Object.assign({},e),{buttons:[...a]})));null==L||L(`https://${e}`,"custom",y)}return s((()=>{var e,t;if(h.buttonVariable===v)return Q(r),void B((null===(e=h.example)||void 0===e?void 0:e[0].split("https://")[1])||"");if(h.buttonVariable&&o.test(h.buttonVariable))h.buttonVariable===j?Q(u):Q(c),B((null===(t=h.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let e=-1;const t="URL"===h.type?V:T;e="URL"===h.type?t.findIndex((e=>e.placeHolder===h.buttonVariable)):t.findIndex((e=>e.label===h.flowName)),e>-1?Q(t[e]):null==z||z((e=>Object.assign(Object.assign({},e),{[y]:"Required field!"})))}}),[]),$!==d.CHATBOT?e(O,{children:[t("div",{style:{marginBottom:8},children:e(p,{style:{color:b.content.primary},children:[h.text," button"]})}),t("div",{style:{marginBottom:12},children:t(n,{disabled:Y||w,truncatedText:!1,options:"URL"===h.type?"static_link"===(null==_?void 0:_.value)?[u]:k:S,isSearchable:!0,onSelect:function(e,t){null==z||z((e=>(delete e[y],Object.assign({},e))));const a=e;Q(a);const s=("URL"===h.type?V:T).find((e=>e.placeHolder===a.placeHolder));if(s)if("custom_link"!==s.value){if(null!=q&&q>-1&&D){const e=l(A);if("URL"===h.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:a.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==L||L({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",y),null==M||M((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===h.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[y];t=Object.assign(Object.assign({},t),{flowName:a.label,flowId:a.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==R||R({flowName:a.label,flowId:a.value},"placeholder",y),null==M||M((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===h.type){let t=U.buttons.filter((e=>"URL"===e.type))[y];t=Object.assign(Object.assign({},t),{buttonVariable:a.placeHolder,example:[(null==a?void 0:a.value)||"https://d.bik.ai/"]}),e=U.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==L||L({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",y)}else{let t=U.buttons.filter((e=>"QUICK_REPLY"===e.type))[y];t=Object.assign(Object.assign({},t),{flowName:a.label,flowId:a.value}),e=U.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==R||R({flowName:a.label,flowId:a.value},"placeholder",y)}const t=Object.assign({},null!=q&&q>-1?A.cards[q]:A);if(t.buttons=e,null!=q&&q>-1){const e=[...A.cards];e[q]=t,null==M||M((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==M||M((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else F("")},defaultOptions:_?[Object.assign(Object.assign({},_),{selected:!0})]:[],error:K?null==W?void 0:W[y]:void 0})}),("custom_link"===(null==_?void 0:_.value)||"static_link"===(null==_?void 0:_.value))&&t("div",{style:{marginBottom:20},children:t(i,{state:Y||w?"disabled":"none",errorMessage:K?N?f(N)?"":"Enter valid URL":"Required field":"",value:N,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:F,maxCharLimit:2e3})})]}):t(g,{index:y,variable:{variableName:null!==(C=h.text)&&void 0!==C?C:"",updatedValue:"((customPlaceholderName))"===h.buttonVariable?`${null===(I=h.example)||void 0===I?void 0:I[0]}`:null!==(E=h.buttonVariable)&&void 0!==E?E:"",type:"link",isEditableVariable:!0,index:null!==(P=h.index)&&void 0!==P?P:0,queryParams:null!==(H=h.queryParams)&&void 0!==H?H:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:h.type,CTAoptions:V})};export{x as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as a,useEffect as s}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as o}from"../../template-preview/constants/regexPatterns.js";import{UNSUBSCRIBE_URL_OPTION as r,STATIC_URL_CTA_OPTION as u,CUSTOM_URL_NAME as c}from"../../template-preview/models/TemplateMeta.js";import{POD as d}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as p}from"../../TypographyStyle.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import{UNSUBSCRIBE_URL_VARIABLE as v,STATIC_URL_VARIABLE_NAME as j}from"../utils/constants.js";import{validateIsUrl as f}from"../utils/validateIsUrl.js";import g,{Container as O}from"./VariableConnector.js";const x=({variableListIndex:x,button:y,updateSelectedURLTemplateBtn:h,updateSelectedQRBTemplateBtn:L,currentVariableList:R,CTAoptions:U,QRBoptions:V,disableEdit:T})=>{var w,C,I,E,P;const[H,N]=a(""),[B,_]=a(),Q=null==U?void 0:U.map(e=>Object.assign(Object.assign({},e),{selected:(null==B?void 0:B.value)===e.value&&B.label===e.label})),k=null==V?void 0:V.map(e=>Object.assign(Object.assign({},e),{selected:(null==B?void 0:B.value)===e.value})),{isError:S,disableEditVariable:K,pod:Y,selectedCarouselIndex:$,originalVariableList:q,setOriginalVariableList:A,isProductCarouselType:M,ctaOptionsErrors:D,setCtaOptionsErrors:W}=m();function z(e){if(N(e),null!=$&&$>-1&&M){const t=l(q);if("URL"===y.type){const l=t.cards.map(t=>{let l=t.buttons.filter(e=>"URL"===e.type)[x];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const a=t.buttons.map(e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e);return Object.assign(Object.assign({},t),{buttons:a})});null==A||A(e=>Object.assign(Object.assign({},e),{cards:l})),null==h||h(`https://${e}`,"custom",x)}return}let t=R.buttons.filter(e=>"URL"===e.type)[x];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const a=R.buttons.map(e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e),s=Object.assign({},null!=$&&$>-1?q.cards[$]:q);if(s.buttons=a,null!=$&&$>-1){const e=[...q.cards];e[$]=s,null==A||A(t=>Object.assign(Object.assign({},t),{cards:e}))}else null==A||A(e=>Object.assign(Object.assign({},e),{buttons:[...a]}));null==h||h(`https://${e}`,"custom",x)}return s(()=>{var e,t;if(y.buttonVariable===v)return _(r),void N((null===(e=y.example)||void 0===e?void 0:e[0].split("https://")[1])||"");if(y.buttonVariable&&o.test(y.buttonVariable))y.buttonVariable===j?_(u):_(c),N((null===(t=y.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let e=-1;const t="URL"===y.type?U:V;e="URL"===y.type?t.findIndex(e=>e.placeHolder===y.buttonVariable):t.findIndex(e=>e.label===y.flowName),e>-1?_(t[e]):null==W||W(e=>Object.assign(Object.assign({},e),{[x]:"Required field!"}))}},[]),Y!==d.CHATBOT?e(O,{children:[t("div",{style:{marginBottom:8},children:e(p,{style:{color:b.content.primary},children:[y.text," button"]})}),t("div",{style:{marginBottom:12},children:t(n,{disabled:K||T,truncatedText:!1,options:"URL"===y.type?"static_link"===(null==B?void 0:B.value)?[u]:Q:k,isSearchable:!0,onSelect:function(e,t){null==W||W(e=>(delete e[x],Object.assign({},e)));const a=e;_(a);const s=("URL"===y.type?U:V).find(e=>e.placeHolder===a.placeHolder);if(s)if("custom_link"!==s.value){if(null!=$&&$>-1&&M){const e=l(q);if("URL"===y.type){const t=e.cards.map(e=>{let t=e.buttons.filter(e=>"URL"===e.type)[x];t=Object.assign(Object.assign({},t),{buttonVariable:a.placeHolder});const l=e.buttons.map(e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e);return Object.assign(Object.assign({},e),{buttons:l})});null==h||h({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",x),null==A||A(e=>Object.assign(Object.assign({},e),{cards:t}))}else if("QUICK_REPLY"===y.type){const t=e.cards.map(e=>{let t=e.buttons.filter(e=>"QUICK_REPLY"===e.type)[x];t=Object.assign(Object.assign({},t),{flowName:a.label,flowId:a.value});const l=e.buttons.map(e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e);return Object.assign(Object.assign({},e),{buttons:l})});null==L||L({flowName:a.label,flowId:a.value},"placeholder",x),null==A||A(e=>Object.assign(Object.assign({},e),{cards:t}))}return}let e;if("URL"===y.type){let t=R.buttons.filter(e=>"URL"===e.type)[x];t=Object.assign(Object.assign({},t),{buttonVariable:a.placeHolder,example:[(null==a?void 0:a.value)||"https://d.bik.ai/"]}),e=R.buttons.map(e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e),null==h||h({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",x)}else{let t=R.buttons.filter(e=>"QUICK_REPLY"===e.type)[x];t=Object.assign(Object.assign({},t),{flowName:a.label,flowId:a.value}),e=R.buttons.map(e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e),null==L||L({flowName:a.label,flowId:a.value},"placeholder",x)}const t=Object.assign({},null!=$&&$>-1?q.cards[$]:q);if(t.buttons=e,null!=$&&$>-1){const e=[...q.cards];e[$]=t,null==A||A(t=>Object.assign(Object.assign({},t),{cards:e}))}else null==A||A(t=>Object.assign(Object.assign({},t),{buttons:[...e]}))}else z("")},defaultOptions:B?[Object.assign(Object.assign({},B),{selected:!0})]:[],error:S?null==D?void 0:D[x]:void 0})}),("custom_link"===(null==B?void 0:B.value)||"static_link"===(null==B?void 0:B.value))&&t("div",{style:{marginBottom:20},children:t(i,{state:K||T?"disabled":"none",errorMessage:S?H?f(H)?"":"Enter valid URL":"Required field":"",value:H,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:z,maxCharLimit:2e3})})]}):t(g,{index:x,variable:{variableName:null!==(w=y.text)&&void 0!==w?w:"",updatedValue:"((customPlaceholderName))"===y.buttonVariable?`${null===(C=y.example)||void 0===C?void 0:C[0]}`:null!==(I=y.buttonVariable)&&void 0!==I?I:"",type:"link",isEditableVariable:!0,index:null!==(E=y.index)&&void 0!==E?E:0,queryParams:null!==(P=y.queryParams)&&void 0!==P?P:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:y.type,CTAoptions:U})};export{x as default};

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as i,useRef as n,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,validateMimeType:m,mediaComponent:u,uploadMediaFiles:f,fileRef:v}=d,{template:g,selectedCarouselIndex:h,setTemplate:y}=s(),[b,I]=i(void 0),[M,j]=i(),[E,O]=i(!1),[U,C]=i(""),[T,k]=i(!1),[w,A]=i(),N=n(null);function x(o){return e(this,void 0,void 0,(function*(){var e;const i=new l;if(o instanceof Blob){if(m){const{isValid:e,mimeType:i}=yield m(o);if(!e)return void C(`MIME type ${i} is not supported`)}const n=i.validate({file:o});if(n)C(n),k(!1),O(!1);else{const i=u.format===a.IMAGE,n=yield f({file:o,fileName:b,isImage:i});if(n.success){const[i]=o.type.split("/");p(null!==(e=n.url)&&void 0!==e?e:"","application"===i?a.DOCUMENT:a[i.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1),O(!1)}}else C("An unknown technical error occurred"),k(!1)}))}function R(){var e;(null===(e=null==v?void 0:v.current)||void 0===e?void 0:e.click)&&v.current.click()}return t((()=>{I(void 0),A(void 0),j(void 0),O(!1),k(!1),C("")}),[h]),{uploadMedia:function(i){return e(this,void 0,void 0,(function*(){var e,n,t,s,d,m;if(C(""),j(""),i)if(i.startsWith("https"))try{if(k(!0),c){const o=yield c(i),{type:n,size:t,success:s}=o;if(s){const i=(new l).validate({linkData:{type:n,size:t}});if(i)return C(i),void k(!1);const[s]=n.split("/");p(null!==(e=o.url)&&void 0!==e?e:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1)}else{const e=yield fetch(i),o=yield e.blob();yield x(o)}}catch(e){k(!1),C("An unknown technical error occurred")}else if(r(i)){let e;if(j(i),e=null!=h&&h>-1?{components:null===(t=null===(n=g.components[1])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[h].components,mapping:null===(d=null===(s=null==g?void 0:g.mapping)||void 0===s?void 0:s.cards)||void 0===d?void 0:d[h]}:Object.assign({},g),e.components){const o=null===(m=null==e?void 0:e.components)||void 0===m?void 0:m.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const n=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[i]}}),t=[...e.components];t[o]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),k(!1),null!=h&&h>-1){const i=o(g);i.components[1].cards[h].components=e.components,i.mapping.cards[h]=e.mapping,null==y||y(Object.assign({},i))}else null==y||y(Object.assign({},e))}else k(!1),C("Invalid URL or variable");else R()}))},processImageUpload:x,handleImageUpload:function(e){var o;C(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else x(i)},handleImageChange:R,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),C("");const e=yield fetch(o),i=yield e.blob();yield x(i),A(void 0),O(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:M,setSelectedVariable:j,openEditMedia:E,setOpenEditMedia:O,selectedImage:w,setSelectedImage:A,loading:T,setLoading:k,error:U,setError:C}};export{d as useEditWhatsappTemplateMedia};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as i,useRef as n,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,validateMimeType:m,mediaComponent:u,uploadMediaFiles:f,fileRef:v}=d,{template:g,selectedCarouselIndex:h,setTemplate:y}=s(),[b,I]=i(void 0),[M,j]=i(),[E,O]=i(!1),[U,C]=i(""),[T,k]=i(!1),[w,A]=i(),N=n(null);function x(o){return e(this,void 0,void 0,function*(){var e;const i=new l;if(o instanceof Blob){if(m){const{isValid:e,mimeType:i}=yield m(o);if(!e)return void C(`MIME type ${i} is not supported`)}const n=i.validate({file:o});if(n)C(n),k(!1),O(!1);else{const i=u.format===a.IMAGE,n=yield f({file:o,fileName:b,isImage:i});if(n.success){const[i]=o.type.split("/");p(null!==(e=n.url)&&void 0!==e?e:"","application"===i?a.DOCUMENT:a[i.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1),O(!1)}}else C("An unknown technical error occurred"),k(!1)})}function R(){var e;(null===(e=null==v?void 0:v.current)||void 0===e?void 0:e.click)&&v.current.click()}return t(()=>{I(void 0),A(void 0),j(void 0),O(!1),k(!1),C("")},[h]),{uploadMedia:function(i){return e(this,void 0,void 0,function*(){var e,n,t,s,d,m;if(C(""),j(""),i)if(i.startsWith("https"))try{if(k(!0),c){const o=yield c(i),{type:n,size:t,success:s}=o;if(s){const i=(new l).validate({linkData:{type:n,size:t}});if(i)return C(i),void k(!1);const[s]=n.split("/");p(null!==(e=o.url)&&void 0!==e?e:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1)}else{const e=yield fetch(i),o=yield e.blob();yield x(o)}}catch(e){k(!1),C("An unknown technical error occurred")}else if(r(i)){let e;if(j(i),e=null!=h&&h>-1?{components:null===(t=null===(n=g.components[1])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[h].components,mapping:null===(d=null===(s=null==g?void 0:g.mapping)||void 0===s?void 0:s.cards)||void 0===d?void 0:d[h]}:Object.assign({},g),e.components){const o=null===(m=null==e?void 0:e.components)||void 0===m?void 0:m.findIndex(e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0});if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const n=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[i]}}),t=[...e.components];t[o]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),k(!1),null!=h&&h>-1){const i=o(g);i.components[1].cards[h].components=e.components,i.mapping.cards[h]=e.mapping,null==y||y(Object.assign({},i))}else null==y||y(Object.assign({},e))}else k(!1),C("Invalid URL or variable");else R()})},processImageUpload:x,handleImageUpload:function(e){var o;C(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else x(i)},handleImageChange:R,onCropComplete:function(o){return e(this,void 0,void 0,function*(){k(!1),C("");const e=yield fetch(o),i=yield e.blob();yield x(i),A(void 0),O(!1)})},editIconRef:N,fileName:b,setFileName:I,selectedVariable:M,setSelectedVariable:j,openEditMedia:E,setOpenEditMedia:O,selectedImage:w,setSelectedImage:A,loading:T,setLoading:k,error:U,setError:C}};export{d as useEditWhatsappTemplateMedia};

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

@@ -1 +1 @@
-const l=l=>{const e=[];return l&&Object.keys(l).forEach((o=>{var t;const r=l[o],n=null!==(t=null==r?void 0:r.map((l=>{var e;return{label:l.title,value:l.placeHolder,bikPlaceholderType:null!==(e=l.type)&&void 0!==e?e:"string"}})))&&void 0!==t?t:[];e.push({label:o,options:n})})),e};export{l as convertPlaceholdersToBikDropdown};
+const l=l=>{const e=[];return l&&Object.keys(l).forEach(o=>{var t;const r=l[o],n=null!==(t=null==r?void 0:r.map(l=>{var e;return{label:l.title,value:l.placeHolder,bikPlaceholderType:null!==(e=l.type)&&void 0!==e?e:"string"}}))&&void 0!==t?t:[];e.push({label:o,options:n})}),e};export{l as convertPlaceholdersToBikDropdown};

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

@@ -1 +1 @@
-const o=o=>{var e,i,n;const t=[],l=[],p=[],a=[],d=[],s=[];let r=null;return o.components.forEach(((o,e)=>{var i,n,a,d,s,u;if("BODY"===o.type&&o.text&&t.push({component:o,i:e,type:"BODY"}),"TITLE"===o.type&&o.text&&t.push({component:o,i:e,type:"TITLE"}),"HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format&&(null===(n=null===(i=o.example)||void 0===i?void 0:i.header_handle)||void 0===n?void 0:n[0])&&(r=o),"HEADER"===o.type&&"TEXT"===o.format&&t.push({component:o,i:e,type:"HEADER"}),"BUTTONS"===o.type){const i=null===(d=null===(a=o.buttons)||void 0===a?void 0:a.filter)||void 0===d?void 0:d.call(a,(o=>"URL"===o.type));l.push({component:Object.assign(Object.assign({},o),{buttons:i}),i:e});const n=null===(u=null===(s=o.buttons)||void 0===s?void 0:s.filter)||void 0===u?void 0:u.call(s,(o=>"QUICK_REPLY"===o.type));p.push({component:Object.assign(Object.assign({},o),{buttons:n}),i:e})}"limited_time_offer"===o.type&&t.push({component:o,i:e,type:"limited_time_offer"})})),o.mapping&&(null===(e=o.mapping.body)||void 0===e||e.forEach((o=>{a.push(o)}))),o.mapping&&(null===(i=o.mapping.header)||void 0===i||i.forEach((o=>{d.push(o)}))),o.mapping&&(null===(n=o.mapping.title)||void 0===n||n.forEach((o=>{s.push(o)}))),{imageComponent:r,descriptionComponents:t,urlBtns:l,qrbBtns:p,bodyVariables:a,headerVariables:d,titleVariables:s}},e=(o,e)=>{var i,n,t,l,p;return{bodyVariables:(null===(i=null==o?void 0:o.body)||void 0===i?void 0:i.map((o=>o)))||[],titleVariables:(null===(n=null==o?void 0:o.title)||void 0===n?void 0:n.map((o=>o)))||[],iconImage:(null===(t=null==o?void 0:o.icon)||void 0===t?void 0:t.map((o=>o)))||[],bannerImage:(null===(l=null==o?void 0:o.image)||void 0===l?void 0:l.map((o=>o)))||[],redirectionLink:(null===(p=null==o?void 0:o.redirectionLink)||void 0===p?void 0:p.map((o=>o)))||[],descriptionComponents:Object.keys(e).map((o=>({type:o.toUpperCase(),component:Object.assign(Object.assign({},e[o]),{type:o.toUpperCase()})})))}};export{o as getAllDataFromTemplateComponent,e as getAllDataFromWebpushTemplateComponent};
+const o=o=>{var e,i,n;const t=[],l=[],p=[],a=[],d=[],s=[];let r=null;return o.components.forEach((o,e)=>{var i,n,a,d,s,u;if("BODY"===o.type&&o.text&&t.push({component:o,i:e,type:"BODY"}),"TITLE"===o.type&&o.text&&t.push({component:o,i:e,type:"TITLE"}),"HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format&&(null===(n=null===(i=o.example)||void 0===i?void 0:i.header_handle)||void 0===n?void 0:n[0])&&(r=o),"HEADER"===o.type&&"TEXT"===o.format&&t.push({component:o,i:e,type:"HEADER"}),"BUTTONS"===o.type){const i=null===(d=null===(a=o.buttons)||void 0===a?void 0:a.filter)||void 0===d?void 0:d.call(a,o=>"URL"===o.type);l.push({component:Object.assign(Object.assign({},o),{buttons:i}),i:e});const n=null===(u=null===(s=o.buttons)||void 0===s?void 0:s.filter)||void 0===u?void 0:u.call(s,o=>"QUICK_REPLY"===o.type);p.push({component:Object.assign(Object.assign({},o),{buttons:n}),i:e})}"limited_time_offer"===o.type&&t.push({component:o,i:e,type:"limited_time_offer"})}),o.mapping&&(null===(e=o.mapping.body)||void 0===e||e.forEach(o=>{a.push(o)})),o.mapping&&(null===(i=o.mapping.header)||void 0===i||i.forEach(o=>{d.push(o)})),o.mapping&&(null===(n=o.mapping.title)||void 0===n||n.forEach(o=>{s.push(o)})),{imageComponent:r,descriptionComponents:t,urlBtns:l,qrbBtns:p,bodyVariables:a,headerVariables:d,titleVariables:s}},e=(o,e)=>{var i,n,t,l,p;return{bodyVariables:(null===(i=null==o?void 0:o.body)||void 0===i?void 0:i.map(o=>o))||[],titleVariables:(null===(n=null==o?void 0:o.title)||void 0===n?void 0:n.map(o=>o))||[],iconImage:(null===(t=null==o?void 0:o.icon)||void 0===t?void 0:t.map(o=>o))||[],bannerImage:(null===(l=null==o?void 0:o.image)||void 0===l?void 0:l.map(o=>o))||[],redirectionLink:(null===(p=null==o?void 0:o.redirectionLink)||void 0===p?void 0:p.map(o=>o))||[],descriptionComponents:Object.keys(e).map(o=>({type:o.toUpperCase(),component:Object.assign(Object.assign({},e[o]),{type:o.toUpperCase()})}))}};export{o as getAllDataFromTemplateComponent,e as getAllDataFromWebpushTemplateComponent};

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

@@ -1 +1 @@
-import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function o(o,t,n,l,d){var m;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===d?"template_html_mobile":"template_html_desktop"),u=l===e.EMAIL?null===(m=null==i?void 0:i.contentWindow)||void 0===m?void 0:m.document.getElementById(o):document.getElementById(o);if(u){const e=u.style.backgroundColor;u.style.backgroundColor=t,setTimeout((function(){u.style.backgroundColor=e}),1e3*n)}}export{o as highlightFor};
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function o(o,t,n,l,d){var m;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===d?"template_html_mobile":"template_html_desktop"),u=l===e.EMAIL?null===(m=null==i?void 0:i.contentWindow)||void 0===m?void 0:m.document.getElementById(o):document.getElementById(o);if(u){const e=u.style.backgroundColor;u.style.backgroundColor=t,setTimeout(function(){u.style.backgroundColor=e},1e3*n)}}export{o as highlightFor};

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

@@ -1 +1 @@
-const t=t=>!!/[^a-zA-Z0-9._ ]/.test(t),e=t=>{const e=/[^a-zA-Z0-9._ {}]/.test(t),s=t.match(/\{\{[a-zA-Z0-9._]+\}\}/g)||[],n=s.every((t=>t.startsWith("{{")&&t.endsWith("}}")));return!(!(e||t.includes("{{")&&0===s.length)&&n)};export{t as validateInputName,e as validateInputNameChatbot};
+const t=t=>!!/[^a-zA-Z0-9._ ]/.test(t),e=t=>{const e=/[^a-zA-Z0-9._ {}]/.test(t),s=t.match(/\{\{[a-zA-Z0-9._]+\}\}/g)||[],n=s.every(t=>t.startsWith("{{")&&t.endsWith("}}"));return!(!(e||t.includes("{{")&&0===s.length)&&n)};export{t as validateInputName,e as validateInputNameChatbot};

package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as o,IframeContainer as s,ImageContainer as p,CardLoadingContainer as i,ViewButton as l}from"./EmailTemplatePreview.styled.js";const d="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",c=c=>{let{template:m,handleViewTemplate:u,hideHeader:h,hideViewButton:y,containerStyle:b,emailHtmlContainerId:f,emailDisplayContent:g,applyBorderBottom:C,hidePointerEvents:x}=c;return e(r,{hideHeader:h,style:Object.assign({},null!=b?b:{}),children:[!h&&t(o,{children:t(n,{style:{maxWidth:"100%"},children:m.name})}),t(s,{applyBorderBottom:C,children:g?t("iframe",{title:"Email template preview",id:null!=f?f:"",width:"100%",srcDoc:(v=g,v.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${d}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:x?void 0:"none"}}):t(p,{hideHeader:h,children:t(i,{})})}),!y&&t(l,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{u&&u()}})})]});var v};export{d as DEFAULT_IMAGE,c as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as o,IframeContainer as s,ImageContainer as p,CardLoadingContainer as i,ViewButton as l}from"./EmailTemplatePreview.styled.js";const d="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",c=({template:c,handleViewTemplate:m,hideHeader:u,hideViewButton:h,containerStyle:y,emailHtmlContainerId:b,emailDisplayContent:f,applyBorderBottom:g,hidePointerEvents:C})=>{return e(r,{hideHeader:u,style:Object.assign({},null!=y?y:{}),children:[!u&&t(o,{children:t(n,{style:{maxWidth:"100%"},children:c.name})}),t(s,{applyBorderBottom:g,children:f?t("iframe",{title:"Email template preview",id:null!=b?b:"",width:"100%",srcDoc:(x=f,x.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${d}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:C?void 0:"none"}}):t(p,{hideHeader:u,children:t(i,{})})}),!h&&t(l,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]});var x};export{d as DEFAULT_IMAGE,c as default};

package/dist/esm/components/template-preview/RCS/RCSButtons.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{Caption as o,BodySecondary as i}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const n=n=>{let{Icon:c,text:a,extraContent:p,placeholder:d,textTypography:s,size:h}=n;const f=s||i;return e(t,{children:r("div",{style:{textAlign:"center",maxWidth:"100%"},children:[r("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},children:[c&&e(c,{color:l.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e("div",{style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"},children:e(f,{style:{color:l.special.brand.facebook,textAlign:"center",fontSize:"small"===h?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:a})})]}),!!p&&e(o,{style:{marginTop:2,color:l.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:d?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(d):p})]})})};export{n as RCSButtons};
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{Caption as o,BodySecondary as i}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const n=({Icon:n,text:c,extraContent:a,placeholder:p,textTypography:d,size:s})=>{const h=d||i;return e(t,{children:r("div",{style:{textAlign:"center",maxWidth:"100%"},children:[r("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},children:[n&&e(n,{color:l.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e("div",{style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"},children:e(h,{style:{color:l.special.brand.facebook,textAlign:"center",fontSize:"small"===s?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:c})})]}),!!a&&e(o,{style:{marginTop:2,color:l.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},children:p?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,function(e){return e.toUpperCase()})}(p):a})]})})};export{n as RCSButtons};

package/dist/esm/components/template-preview/RCS/RCSChatPreview.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useMemo as l}from"react";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{isRichAndCarouselCards as i}from"../helpers/templateMiscHelper.js";import{VariableEditorHelper as s}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as o}from"../models/TemplateMeta.js";import{ChatBtn as n}from"../WhatsApp/ChatBtn.js";import{RCSButtons as d}from"./RCSButtons.js";import{RCSMediaCard as m,PdfMediaCard as p}from"./RCSMediaCard.js";import{RCSPreviewContainer as h,HeaderTextContainer as u,TitleTextContainer as c,RcsHtmlContainer as T,RCSChatBtnContainer as g}from"./RCSPreview.styled.js";const y=new s,C=s=>{const{bodyText:C,titleText:v,headerMediaType:x,headerText:f,headerAssetLink:M,headerAssetName:N,imagePreviewStyles:A,size:L,bodyVariableList:w,headerVariableList:E,buttons:j,carouselCardIndex:H,isWhatsappCarousel:I,isPreview:S,titleVariableList:O,templateConfiguration:b}=s,P=y.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),w),_=y.format(null==f?void 0:f.replace(/</g,"&lt;").replace(/>/g,"&gt;"),E),z=y.format(null==v?void 0:v.replace(/</g,"&lt;").replace(/>/g,"&gt;"),O),{selectedCarouselIndex:B,isProductCarouselType:k,errorIndexes:D,isCarouselHovered:R}=a(),V=l((()=>i(null==b?void 0:b.templateType)),[null==b?void 0:b.templateType]),U=l((()=>"HORIZONTAL"==(null==b?void 0:b.orientation)),[b]);return e(h,{isCarouselCard:null!=H&&H>-1,showBorder:null!=H&&H===B||k&&null!=H&&H>-1&&null!=B&&B>-1,hasError:null==D?void 0:D.includes(null!=H?H:-2),isWhatsappCarousel:I,isPreview:S,showDashedBorder:k&&R&&(null!=B?B:-1)<0&&(null!=H?H:-1)>-1,needBorder:V,isHorizontalOrientation:U,children:[!U&&t(r,{children:x===o.TEXT?t(u,{dangerouslySetInnerHTML:{__html:_}}):x!==o.NONE&&M&&x!==o.DOCUMENT?t(m,{headerAssetLink:M,headerAssetName:N,mediaType:x,imagePreviewStyles:x===o.IMAGE?A:{}}):null}),e("div",{style:{width:U?"50%":""},children:[e("div",{className:V?"":"text--template",children:[!!v&&t(r,{children:t(c,{dangerouslySetInnerHTML:{__html:z}})}),!!C&&t(r,{children:t(T,{dangerouslySetInnerHTML:{__html:P},style:{paddingTop:v?0:12}})}),x===o.DOCUMENT?t(p,{headerAssetLink:M,headerAssetName:N}):t(r,{})]}),j&&j.length>0?i(null==b?void 0:b.templateType)?t(r,{children:j.map(((e,r)=>t(n,{text:e.text,size:L},r)))}):t(g,{children:j.map(((e,r)=>t(d,{text:e.text,size:L},r)))}):null]}),U&&x!==o.NONE&&M&&x!==o.DOCUMENT&&t(m,{headerAssetLink:M,headerAssetName:N,mediaType:x,imagePreviewStyles:x===o.IMAGE?A:{},isHorizontal:U})]})};export{C as RCSChatPreview};
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useMemo as l}from"react";import{useTemplateModalContext as a}from"../../template-context-mapper/context/templateModalContext.js";import{isRichAndCarouselCards as i}from"../helpers/templateMiscHelper.js";import{VariableEditorHelper as s}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as o}from"../models/TemplateMeta.js";import{ChatBtn as n}from"../WhatsApp/ChatBtn.js";import{RCSButtons as d}from"./RCSButtons.js";import{RCSMediaCard as m,PdfMediaCard as p}from"./RCSMediaCard.js";import{RCSPreviewContainer as h,HeaderTextContainer as u,TitleTextContainer as c,RcsHtmlContainer as T,RCSChatBtnContainer as g}from"./RCSPreview.styled.js";const y=new s,C=s=>{const{bodyText:C,titleText:v,headerMediaType:x,headerText:f,headerAssetLink:M,headerAssetName:N,imagePreviewStyles:A,size:L,bodyVariableList:w,headerVariableList:E,buttons:j,carouselCardIndex:H,isWhatsappCarousel:I,isPreview:S,titleVariableList:O,templateConfiguration:b}=s,P=y.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),w),_=y.format(null==f?void 0:f.replace(/</g,"&lt;").replace(/>/g,"&gt;"),E),z=y.format(null==v?void 0:v.replace(/</g,"&lt;").replace(/>/g,"&gt;"),O),{selectedCarouselIndex:B,isProductCarouselType:k,errorIndexes:D,isCarouselHovered:R}=a(),V=l(()=>i(null==b?void 0:b.templateType),[null==b?void 0:b.templateType]),U=l(()=>"HORIZONTAL"==(null==b?void 0:b.orientation),[b]);return e(h,{isCarouselCard:null!=H&&H>-1,showBorder:null!=H&&H===B||k&&null!=H&&H>-1&&null!=B&&B>-1,hasError:null==D?void 0:D.includes(null!=H?H:-2),isWhatsappCarousel:I,isPreview:S,showDashedBorder:k&&R&&(null!=B?B:-1)<0&&(null!=H?H:-1)>-1,needBorder:V,isHorizontalOrientation:U,children:[!U&&t(r,{children:x===o.TEXT?t(u,{dangerouslySetInnerHTML:{__html:_}}):x!==o.NONE&&M&&x!==o.DOCUMENT?t(m,{headerAssetLink:M,headerAssetName:N,mediaType:x,imagePreviewStyles:x===o.IMAGE?A:{}}):null}),e("div",{style:{width:U?"50%":""},children:[e("div",{className:V?"":"text--template",children:[!!v&&t(r,{children:t(c,{dangerouslySetInnerHTML:{__html:z}})}),!!C&&t(r,{children:t(T,{dangerouslySetInnerHTML:{__html:P},style:{paddingTop:v?0:12}})}),x===o.DOCUMENT?t(p,{headerAssetLink:M,headerAssetName:N}):t(r,{})]}),j&&j.length>0?i(null==b?void 0:b.templateType)?t(r,{children:j.map((e,r)=>t(n,{text:e.text,size:L},r))}):t(g,{children:j.map((e,r)=>t(d,{text:e.text,size:L},r))}):null]}),U&&x!==o.NONE&&M&&x!==o.DOCUMENT&&t(m,{headerAssetLink:M,headerAssetName:N,mediaType:x,imagePreviewStyles:x===o.IMAGE?A:{},isHorizontal:U})]})};export{C as RCSChatPreview};

package/dist/esm/components/template-preview/RCS/RCSMediaCard.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"../../../assets/icons/RCS_PDF.svg.js";import{ShimmerImage as s}from"../../shimmer-image/ShimmerImage.js";import{COLORS as o}from"../../../constants/Theme.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{RCSPdfContainer as d,PdfComineText as m,PdfText as n,RCSMediaContainer as l}from"./RCSPreview.styled.js";const c=r=>{let{headerAssetLink:s,headerAssetName:a}=r;var l;const c=t,h=a||(null===(l=null==s?void 0:s.split("/").pop())||void 0===l?void 0:l.replace(".pdf",""))||"xxxxxxxx";return e(d,{children:[i(c,{height:24,width:24,color:o.icon.placeholder}),!!h&&e(m,{children:[i(n,{children:h}),i(n,{children:".pdf"})]})]})},h=e=>{let{headerAssetLink:t,headerAssetName:o,mediaType:d,imagePreviewStyles:m,isHorizontal:n}=e;const c={width:"100%",minHeight:n?"100%":"240px",height:n?"100%":"240px",objectFit:"cover",borderRadius:n?"8px":""};return i(l,{isHorizontal:!!n,children:d===a.IMAGE?i(s,{imageUrl:t,alt:t,width:"100%",height:n?"100%":240,imagePreviewStyles:Object.assign(Object.assign({},m),{borderTopRightRadius:8,borderTopLeftRadius:8})}):d===a.VIDEO?i("video",{src:t,style:c,controls:!0,muted:!0,children:i("track",{default:!0,kind:"captions",srcLang:"en",src:t})}):i(r,{})})};export{c as PdfMediaCard,h as RCSMediaCard};
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"../../../assets/icons/RCS_PDF.svg.js";import{ShimmerImage as s}from"../../shimmer-image/ShimmerImage.js";import{COLORS as o}from"../../../constants/Theme.js";import{HEADER_TYPES as a}from"../models/TemplateMeta.js";import{RCSPdfContainer as d,PdfComineText as m,PdfText as n,RCSMediaContainer as l}from"./RCSPreview.styled.js";const c=({headerAssetLink:r,headerAssetName:s})=>{var a;const l=t,c=s||(null===(a=null==r?void 0:r.split("/").pop())||void 0===a?void 0:a.replace(".pdf",""))||"xxxxxxxx";return e(d,{children:[i(l,{height:24,width:24,color:o.icon.placeholder}),!!c&&e(m,{children:[i(n,{children:c}),i(n,{children:".pdf"})]})]})},h=({headerAssetLink:e,headerAssetName:t,mediaType:o,imagePreviewStyles:d,isHorizontal:m})=>{const n={width:"100%",minHeight:m?"100%":"240px",height:m?"100%":"240px",objectFit:"cover",borderRadius:m?"8px":""};return i(l,{isHorizontal:!!m,children:o===a.IMAGE?i(s,{imageUrl:e,alt:e,width:"100%",height:m?"100%":240,imagePreviewStyles:Object.assign(Object.assign({},d),{borderTopRightRadius:8,borderTopLeftRadius:8})}):o===a.VIDEO?i("video",{src:e,style:n,controls:!0,muted:!0,children:i("track",{default:!0,kind:"captions",srcLang:"en",src:e})}):i(r,{})})};export{c as PdfMediaCard,h as RCSMediaCard};

package/dist/esm/components/template-preview/SmsTemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import r from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as n}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as d}from"./helpers/SmsTemplateHelper.js";import m from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as u}from"./SmsTemplatePreview.styled.js";const v=v=>{let{template:f,variableStore:y,hideHeader:g,display_content:j,onlyTemplateContent:x,size:w,uniqueId:S}=v;var z;const T=null==f?void 0:f.content,{hideDeviceContainerInPreview:b}=s();return b?e(p,{size:w,children:e(m,{size:null!=w?w:"large",content:null!=j?j:d(T,null!=y?y:[],void 0,null!=S?S:"")})}):t(l,{children:[!g&&!x&&e(h,{children:e(a,{style:{maxWidth:"100%"},children:f.name})}),!x&&e(u,{children:t(l,{children:[t("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e(o,{width:16,height:16,color:n.content.secondary}),e(c,{children:null===(z=null==f?void 0:f.headers)||void 0===z?void 0:z[0]})]}),t("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e(i,{width:16,height:16,color:n.content.secondary}),e(r,{width:16,height:16,color:n.content.secondary})]})]})}),e(p,{size:w,children:e(m,{size:null!=w?w:"large",content:null!=j?j:d(T,null!=y?y:[],void 0,null!=S?S:"")})})]})};export{v as default};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import r from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as n}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as d}from"./helpers/SmsTemplateHelper.js";import m from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as u}from"./SmsTemplatePreview.styled.js";const v=({template:v,variableStore:f,hideHeader:y,display_content:g,onlyTemplateContent:j,size:x,uniqueId:w})=>{var S;const z=null==v?void 0:v.content,{hideDeviceContainerInPreview:T}=s();return T?e(p,{size:x,children:e(m,{size:null!=x?x:"large",content:null!=g?g:d(z,null!=f?f:[],void 0,null!=w?w:"")})}):t(l,{children:[!y&&!j&&e(h,{children:e(a,{style:{maxWidth:"100%"},children:v.name})}),!j&&e(u,{children:t(l,{children:[t("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e(o,{width:16,height:16,color:n.content.secondary}),e(c,{children:null===(S=null==v?void 0:v.headers)||void 0===S?void 0:S[0]})]}),t("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e(i,{width:16,height:16,color:n.content.secondary}),e(r,{width:16,height:16,color:n.content.secondary})]})]})}),e(p,{size:x,children:e(m,{size:null!=x?x:"large",content:null!=g?g:d(z,null!=f?f:[],void 0,null!=w?w:"")})})]})};export{v as default};

package/dist/esm/components/template-preview/TemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";import n from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import a from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as r}from"../TypographyStyle.js";import s from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as d}from"./models/Channels.js";import p from"./SmsTemplatePreview.js";import m from"./webpush/WebpushPreview.js";import u from"./WhatsAppTemplatePreview.js";const c=c=>{let{template:h,channel:C,whatsAppSpecificMeta:y,templateCreationsInfo:g,hideHeader:S,size:b,onlyTemplateContent:f,emailSpecificMeta:j,smsSpecificMeta:w,showSampleValues:T,carouselCardIndex:x,isWhatsappCarousel:P,isPreview:I,applyBorderBottom:W,webPushSpecificMeta:H,hidePointerEvents:A}=c;var O,B;const{setSelectedCarouselIndex:E}=l();return C===d.SMS?e("div",{style:Object.assign({marginTop:g?16:0,border:g?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==w?void 0:w.templateContainerStyles),children:e(p,{template:h,hideHeader:S,onlyTemplateContent:f,size:null!=b?b:"large",variableStore:null==w?void 0:w.smsVariableStore,display_content:null==w?void 0:w.smsDisplayContent,uniqueId:null==w?void 0:w.uniqueId})}):C===d.EMAIL?e("div",{style:Object.assign({marginTop:g?16:0},null==j?void 0:j.templateContainerStyles),children:e(s,{template:h,handleViewTemplate:()=>{var e;null===(e=null==j?void 0:j.handleViewTemplate)||void 0===e||e.call(j)},hideHeader:S,hideViewButton:null==j?void 0:j.hideViewButtonForEmail,containerStyle:null==j?void 0:j.containerStyle,emailDisplayContent:null==j?void 0:j.emailDisplayContent,emailHtmlContainerId:null==j?void 0:j.emailHtmlContainerId,applyBorderBottom:W,hidePointerEvents:A})}):C===d.WHATSAPP||C===d.RCS?t("div",{style:Object.assign(Object.assign(Object.assign({},null==y?void 0:y.templateContainerStyles),g?v.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(E&&P){if(-1===x&&!(null===(t=null===(e=null==h?void 0:h.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;E(null!=x?x:-1)}},children:[g?e("div",{style:{padding:16},children:e(r,{children:n.convertToTitleCase(null!==(O=null==h?void 0:h.label)&&void 0!==O?O:"")})}):e(i,{}),e(u,{showSampleValues:T,showHeader:null==y?void 0:y.showWhatsAppHeader,extras:null==y?void 0:y.whatsAppExtras,template:h,size:g?"small":null!=b?b:"large",containerStyle:Object.assign(Object.assign({borderWidth:g?0:1,borderTopWidth:1},null!==(B=null==y?void 0:y.containerStyle)&&void 0!==B?B:{}),{height:"100%"}),zeroStateComponent:null==y?void 0:y.zeroStateComponent,usePlaceHolderName:null==y?void 0:y.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:P,isPreview:I,channel:C}),!!(null==h?void 0:h.aiContentConfigId)&&e("div",{style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5},children:e(a,{width:48,height:48})})]}):C==d.WEBPUSH?e("div",{style:Object.assign({},null==H?void 0:H.containerStyle),children:e(m,{template:h,extraContainerCss:null==H?void 0:H.extraContainerCss})}):e(i,{})},v={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{c as TemplatePreview};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";import n from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import a from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as r}from"../TypographyStyle.js";import s from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as d}from"./models/Channels.js";import p from"./SmsTemplatePreview.js";import m from"./webpush/WebpushPreview.js";import u from"./WhatsAppTemplatePreview.js";const c=({template:c,channel:h,whatsAppSpecificMeta:C,templateCreationsInfo:y,hideHeader:g,size:S,onlyTemplateContent:b,emailSpecificMeta:f,smsSpecificMeta:j,showSampleValues:w,carouselCardIndex:T,isWhatsappCarousel:x,isPreview:P,applyBorderBottom:I,webPushSpecificMeta:W,hidePointerEvents:H})=>{var A,O;const{setSelectedCarouselIndex:B}=l();return h===d.SMS?e("div",{style:Object.assign({marginTop:y?16:0,border:y?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles),children:e(p,{template:c,hideHeader:g,onlyTemplateContent:b,size:null!=S?S:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent,uniqueId:null==j?void 0:j.uniqueId})}):h===d.EMAIL?e("div",{style:Object.assign({marginTop:y?16:0},null==f?void 0:f.templateContainerStyles),children:e(s,{template:c,handleViewTemplate:()=>{var e;null===(e=null==f?void 0:f.handleViewTemplate)||void 0===e||e.call(f)},hideHeader:g,hideViewButton:null==f?void 0:f.hideViewButtonForEmail,containerStyle:null==f?void 0:f.containerStyle,emailDisplayContent:null==f?void 0:f.emailDisplayContent,emailHtmlContainerId:null==f?void 0:f.emailHtmlContainerId,applyBorderBottom:I,hidePointerEvents:H})}):h===d.WHATSAPP||h===d.RCS?t("div",{style:Object.assign(Object.assign(Object.assign({},null==C?void 0:C.templateContainerStyles),y?v.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(B&&x){if(-1===T&&!(null===(t=null===(e=null==c?void 0:c.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;B(null!=T?T:-1)}},children:[y?e("div",{style:{padding:16},children:e(r,{children:n.convertToTitleCase(null!==(A=null==c?void 0:c.label)&&void 0!==A?A:"")})}):e(i,{}),e(u,{showSampleValues:w,showHeader:null==C?void 0:C.showWhatsAppHeader,extras:null==C?void 0:C.whatsAppExtras,template:c,size:y?"small":null!=S?S:"large",containerStyle:Object.assign(Object.assign({borderWidth:y?0:1,borderTopWidth:1},null!==(O=null==C?void 0:C.containerStyle)&&void 0!==O?O:{}),{height:"100%"}),zeroStateComponent:null==C?void 0:C.zeroStateComponent,usePlaceHolderName:null==C?void 0:C.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:x,isPreview:P,channel:h}),!!(null==c?void 0:c.aiContentConfigId)&&e("div",{style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,zIndex:5},children:e(a,{width:48,height:48})})]}):h==d.WEBPUSH?e("div",{style:Object.assign({},null==W?void 0:W.containerStyle),children:e(m,{template:c,extraContainerCss:null==W?void 0:W.extraContainerCss})}):e(i,{})},v={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{c as TemplatePreview};