@bikdotai/bik-component-library 0.0.731-beta.1 → 0.0.731-beta.11

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

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

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

@@ -1,7 +1,7 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/info.svg.js";import{useState as o,useEffect as r}from"react";import s from"styled-components";import"../../button/index.js";import"../../tag/index.js";import"../../template-preview/index.js";import{isRCSChannel as i}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleRegular as n}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";import{Badge as a}from"../Badge/index.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import{CHANNEL_TYPE as p}from"../../template-preview/models/Channels.js";import{Tag as m}from"../../tag/Tag.js";import{Button as c}from"../../button/Button.js";const x=s.div`
-	background: ${l.surface.standard};
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/info.svg.js";import{useState as o,useEffect as r}from"react";import s from"styled-components";import{Button as i}from"../../button/Button.js";import{Tag as l}from"../../tag/Tag.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as p}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 a}from"../../template-preview/models/Channels.js";import{isRCSChannel as n}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleRegular as m}from"../../TypographyStyle.js";import{Badge as d}from"../Badge/index.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";const u=s.div`
+	background: ${p.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${l.stroke.primary};
+	border-top-color: ${p.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 0 24px;
@@ -12,4 +12,4 @@ import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	height: ${e=>e.isWhatsappCarousel?64:80}px;
-`,u=s=>{let{isWhatsappCarousel:u,onSelect:j,footerButtonText:g,footerInfoText:f}=s;var h,b,v,y;const{isError:C,selectedCarouselIndex:T,setSelectedCarouselIndex:w,setErrorIndexes:S,template:I,showVariablePicker:k,hideFooterButton:$}=d(),[B,O]=o(u?"Next":"Select template");return r((()=>{g?O(g):u&&-1===T?O("Next"):u&&null!=T&&T>-1&&O("Save & Select Template")}),[T]),e.jsxs(x,Object.assign({isWhatsappCarousel:u,justifyContent:u&&(null===(b=null===(h=null==I?void 0:I.mapping)||void 0===h?void 0:h.body)||void 0===b?void 0:b.length)?"space-between":"end"},{children:[i((null==I?void 0:I.channel)||p.WHATSAPP)?e.jsx(n,{}):u&&null!=T&&T>=-1&&!!(null===(y=null===(v=null==I?void 0:I.mapping)||void 0===v?void 0:v.body)||void 0===y?void 0:y.length)&&e.jsx(n,Object.assign({color:l.text.secondary},{children:`Step ${-1===T?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[C&&e.jsx(a,{errorText:"Some inputs are missing or incorrect. Please check"}),!C&&f&&e.jsx("div",Object.assign({style:{marginRight:12}},{children:e.jsx(m,{tagText:f,LeadingIcon:t})})),!$&&e.jsx(c,{disabled:k,id:"select-template-btn",buttonText:B,size:u?"small":"large",onClick:function(){u&&-1===T&&w?w(0):(null==S||S([]),j())}})]}))]}))};export{u as default};
+`,x=s=>{let{isWhatsappCarousel:x,onSelect:j,footerButtonText:v,footerInfoText:h}=s;var g,f,b,w;const{isError:y,selectedCarouselIndex:T,setSelectedCarouselIndex:C,setErrorIndexes:S,template:W,showVariablePicker:k,hideFooterButton:A}=c(),[P,I]=o(x?"Next":"Select template");return r((()=>{v?I(v):x&&-1===T?I("Next"):x&&null!=T&&T>-1&&I("Save & Select Template")}),[T]),e.jsxs(u,Object.assign({isWhatsappCarousel:x,justifyContent:x&&(null===(f=null===(g=null==W?void 0:W.mapping)||void 0===g?void 0:g.body)||void 0===f?void 0:f.length)?"space-between":"end"},{children:[n((null==W?void 0:W.channel)||a.WHATSAPP)?e.jsx(m,{}):x&&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)&&e.jsx(m,Object.assign({color:p.text.secondary},{children:`Step ${-1===T?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[y&&e.jsx(d,{errorText:"Some inputs are missing or incorrect. Please check"}),!y&&h&&e.jsx("div",Object.assign({style:{marginRight:12}},{children:e.jsx(l,{tagText:h,LeadingIcon:t})})),!A&&e.jsx(i,{disabled:k,id:"select-template-btn",buttonText:P,size:x?"small":"large",onClick:function(){x&&-1===T&&C?C(0):(null==S||S([]),j())}})]}))]}))};export{x as default};

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

@@ -1,12 +1,12 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"react";import i from"styled-components";import"../../template-preview/index.js";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import{POD as a}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as r}from"../utils/getPreviewDimension.js";import{TemplatePreview as l}from"../../template-preview/TemplatePreview.js";const n=i.div`
+import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"react";import i from"styled-components";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as o}from"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getPreviewWidth as p}from"../utils/getPreviewDimension.js";const l=i.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${e=>r(e.channel)}px;
+	width: ${e=>p(e.channel)}px;
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,p=i.div`
+`,n=i.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,7 @@ import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"rea
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,m=t.forwardRef(((t,i)=>{let{display_content:m,channel:d,template:h,showSampleValues:f}=t;const{pod:b,hideDeviceContainerInPreview:w}=s(),g={showSampleValues:f,template:h,channel:d,smsSpecificMeta:{smsDisplayContent:m},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==a.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:d==o.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:m,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return w?e.jsx(c,{children:e.jsx(l,Object.assign({},g))}):e.jsx(e.Fragment,{children:e.jsxs(n,Object.assign({channel:d},{children:[e.jsx("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:r(d),height:443}}),e.jsx(p,Object.assign({ref:i},{children:e.jsx(l,Object.assign({},g))}))]}))})}));m.displayName="MobilePreview";const c=i.div`
+`,m=t.forwardRef(((t,i)=>{let{display_content:m,channel:d,template:h,showSampleValues:f}=t;const{pod:w,hideDeviceContainerInPreview:j}=r(),b={showSampleValues:f,template:h,channel:d,smsSpecificMeta:{smsDisplayContent:m},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==o.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:d==s.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:m,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return j?e.jsx(c,{children:e.jsx(a,Object.assign({},b))}):e.jsx(e.Fragment,{children:e.jsxs(l,Object.assign({channel:d},{children:[e.jsx("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:p(d),height:443}}),e.jsx(n,Object.assign({ref:i},{children:e.jsx(a,Object.assign({},b))}))]}))})}));m.displayName="MobilePreview";const c=i.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -1,4 +1,4 @@
-import{j as t}from"../../../node_modules/react/jsx-runtime.js";import e from"../../../assets/icons/box.svg.js";import o from"../../../assets/icons/delete.svg.js";import s from"../../../assets/icons/edit.svg.js";import i from"styled-components";import"../../icon-button/index.js";import{TitleSmall as n}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{IconButton as l}from"../../icon-button/IconButton.js";const c=i.div`
+import{j as t}from"../../../node_modules/react/jsx-runtime.js";import e from"../../../assets/icons/box.svg.js";import o from"../../../assets/icons/delete.svg.js";import s from"../../../assets/icons/edit.svg.js";import i from"styled-components";import{IconButton as n}from"../../icon-button/IconButton.js";import{TitleSmall as r}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const c=i.div`
 	width: ${t=>t.width};
 	padding: 12px;
 	display: flex;
@@ -44,4 +44,4 @@ import{j as t}from"../../../node_modules/react/jsx-runtime.js";import e from"../
 			color: #000000;
 		}
 	}
-`,d=i=>{const{cardBody:d,deleteItem:a,editItem:f,hideIcon:p}=i;return t.jsxs(c,Object.assign({width:"100%"},{children:[!p&&t.jsx("div",Object.assign({style:{width:36,height:36}},{children:t.jsx(e,{})})),t.jsx("div",Object.assign({className:"card-body"},{children:t.jsx(n,Object.assign({color:r.content.secondary},{children:d}))})),t.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[f&&t.jsx(l,{style:{display:"flex"},Icon:()=>t.jsx(s,{width:24,height:24,color:r.content.placeholder}),onClick:t=>{f(),t.stopPropagation()}}),t.jsx(l,{style:{display:"flex",color:"#919191"},Icon:()=>t.jsx(o,{width:24,height:24,color:r.content.placeholder}),onClick:t=>{a(),t.stopPropagation()}})]}))]}))};export{d as ProductBox};
+`,d=i=>{const{cardBody:d,deleteItem:a,editItem:f,hideIcon:p}=i;return t.jsxs(c,Object.assign({width:"100%"},{children:[!p&&t.jsx("div",Object.assign({style:{width:36,height:36}},{children:t.jsx(e,{})})),t.jsx("div",Object.assign({className:"card-body"},{children:t.jsx(r,Object.assign({color:l.content.secondary},{children:d}))})),t.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[f&&t.jsx(n,{style:{display:"flex"},Icon:()=>t.jsx(s,{width:24,height:24,color:l.content.placeholder}),onClick:t=>{f(),t.stopPropagation()}}),t.jsx(n,{style:{display:"flex",color:"#919191"},Icon:()=>t.jsx(o,{width:24,height:24,color:l.content.placeholder}),onClick:t=>{a(),t.stopPropagation()}})]}))]}))};export{d as ProductBox};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
-import{j as t}from"../../../node_modules/react/jsx-runtime.js";import o from"../../../assets/icons/info.svg.js";import e from"styled-components";import"../../tooltips/index.js";import{BodySecondary as s,TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{Tooltip as r}from"../../tooltips/Tooltip.js";const l=e(s)`
+import{j as t}from"../../../node_modules/react/jsx-runtime.js";import e from"../../../assets/icons/info.svg.js";import o from"styled-components";import{Tooltip as s}from"../../tooltips/Tooltip.js";import{BodySecondary as i,TitleRegular as n}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";const l=o(i)`
 	line-height: 1.5 !important;
-`,p=e.div`
+`,a=o.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`,a=e=>{let{headerText:s,subText:a,toolTipInfo:c,containerStyle:d}=e;return t.jsxs(p,Object.assign({style:Object.assign({},d)},{children:[t.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[t.jsx(i,Object.assign({style:{color:n.content.primary}},{children:s})),c&&t.jsx(r,Object.assign({body:c},{children:t.jsx("div",{children:t.jsx(o,{width:20,height:20,color:n.content.placeholder})})}))]})),t.jsx(l,Object.assign({style:{color:n.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:a}))]}))};export{a as default};
+`,c=o=>{let{headerText:i,subText:c,toolTipInfo:p,containerStyle:d}=o;return t.jsxs(a,Object.assign({style:Object.assign({},d)},{children:[t.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[t.jsx(n,Object.assign({style:{color:r.content.primary}},{children:i})),p&&t.jsx(s,Object.assign({body:p},{children:t.jsx("div",{children:t.jsx(e,{width:20,height:20,color:r.content.placeholder})})}))]})),t.jsx(l,Object.assign({style:{color:r.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:c}))]}))};export{c as default};

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

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

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import o from"../../../node_modules/lodash/cloneDeep.js";import{useState as n,useRef as i,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as a}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}=a(),[b,I]=n(void 0),[M,j]=n(),[E,O]=n(!1),[U,C]=n(""),[T,k]=n(!1),[w,A]=n(),N=i(null);function x(o){var n;return e(this,void 0,void 0,(function*(){const e=new l;if(o instanceof Blob){if(m){const{isValid:e,mimeType:n}=yield m(o);if(!e)return void C(`MIME type ${n} is not supported`)}const i=e.validate({file:o});if(i)C(i),k(!1),O(!1);else{const e=u.format===s.IMAGE,i=yield f({file:o,fileName:b,isImage:e});if(i.success){const[e]=o.type.split("/");p(null!==(n=i.url)&&void 0!==n?n:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1),O(!1)}}else C("An unknown technical error occurred"),k(!1)}))}function D(){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(n){var i,t,a,d,m,f;return e(this,void 0,void 0,(function*(){if(C(""),j(""),n)if(n.startsWith("https"))try{if(k(!0),c){const e=yield c(n),{type:o,size:t,success:a}=e;if(a){const n=(new l).validate({linkData:{type:o,size:t}});if(n)return C(n),void k(!1);const[a]=o.split("/");p(null!==(i=e.url)&&void 0!==i?i:"",a.includes("application")?s.DOCUMENT:s[a.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1)}else{const e=yield fetch(n),o=yield e.blob();yield x(o)}}catch(e){k(!1),C("An unknown technical error occurred")}else if(r(n)){let e;if(j(n),e=null!=h&&h>-1?{components:null===(a=null===(t=g.components[1])||void 0===t?void 0:t.cards)||void 0===a?void 0:a[h].components,mapping:null===(m=null===(d=null==g?void 0:g.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[h]}:Object.assign({},g),e.components){const o=null===(f=null==e?void 0:e.components)||void 0===f?void 0:f.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 i=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[n]}}),t=[...e.components];t[o]=i,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[n]})),k(!1),null!=h&&h>-1){const n=o(g);n.components[1].cards[h].components=e.components,n.mapping.cards[h]=e.mapping,null==y||y(Object.assign({},n))}else null==y||y(Object.assign({},e))}else k(!1),C("Invalid URL or variable");else D()}))},processImageUpload:x,handleImageUpload:function(e){var o;C(""),k(!0);const n=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===s.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==n?void 0:n.name)},n&&e.readAsDataURL(n)}else x(n)},handleImageChange:D,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),C("");const e=yield fetch(o),n=yield e.blob();yield x(n),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){var i;return e(this,void 0,void 0,(function*(){const e=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=e.validate({file:o});if(n)C(n),k(!1),O(!1);else{const e=u.format===a.IMAGE,n=yield f({file:o,fileName:b,isImage:e});if(n.success){const[e]=o.type.split("/");p(null!==(i=n.url)&&void 0!==i?i:"","application"===e?a.DOCUMENT:a[e.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){var n,t,s,d,m,f;return e(this,void 0,void 0,(function*(){if(C(""),j(""),i)if(i.startsWith("https"))try{if(k(!0),c){const e=yield c(i),{type:o,size:t,success:s}=e;if(s){const i=(new l).validate({linkData:{type:o,size:t}});if(i)return C(i),void k(!1);const[s]=o.split("/");p(null!==(n=e.url)&&void 0!==n?n:"",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===(s=null===(t=g.components[1])||void 0===t?void 0:t.cards)||void 0===s?void 0:s[h].components,mapping:null===(m=null===(d=null==g?void 0:g.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[h]}:Object.assign({},g),e.components){const o=null===(f=null==e?void 0:e.components)||void 0===f?void 0:f.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/TemplateConstants.js

@@ -1 +1 @@
-import e from"../../../assets/icons/alert_triangle.svg.js";import t from"../../../assets/icons/check.svg.js";import a from"../../../assets/icons/send_template.svg.js";import i from"../../../assets/icons/tick.svg.js";import n from"../../../assets/icons/tick_double.svg.js";import"../../template-preview/index.js";import{Caption as o}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{TEMPLATE_QUALITY as r}from"../../template-preview/models/WhatsAppTemplate.js";const l={[r.YELLOW]:{Icon:e,title:"Medium quality template",sublineTextType:o,sublineColor:s.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.RED]:{Icon:e,title:"Low quality template",sublineTextType:o,sublineColor:s.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.GREEN]:{Icon:t,title:"High quality template",sublineTextType:o,sublineColor:s.content.secondary,subline:"Meta has rated this template as high quality due to strong engagement and positive customer interactions. We recommend continuing to use this template or creating similar ones to maintain high delivery rates and maximize campaign performance."},[r.UNKNOWN]:{Icon:t,title:"No quality data available",sublineTextType:o,sublineColor:s.content.secondary,subline:"There is currently no quality data available for this template. This may be due to insufficient usage or recent creation. We recommend monitoring its performance over time to gather insights and optimize future campaigns."}},m=[{title:"Sent",icon:a,valName:"totalSent"},{title:"Delivered",icon:i,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:n,valName:"totalReads",percentValName:"readPercentage"}];export{m as ANALYTICS_ENGAGEMENT_MAP,l as TEMPLATE_QUALITY_MAP};
+import e from"../../../assets/icons/alert_triangle.svg.js";import t from"../../../assets/icons/check.svg.js";import a from"../../../assets/icons/send_template.svg.js";import i from"../../../assets/icons/tick.svg.js";import o from"../../../assets/icons/tick_double.svg.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as n}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{TEMPLATE_QUALITY as r}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{Caption as s}from"../../TypographyStyle.js";const m={[r.YELLOW]:{Icon:e,title:"Medium quality template",sublineTextType:s,sublineColor:n.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.RED]:{Icon:e,title:"Low quality template",sublineTextType:s,sublineColor:n.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[r.GREEN]:{Icon:t,title:"High quality template",sublineTextType:s,sublineColor:n.content.secondary,subline:"Meta has rated this template as high quality due to strong engagement and positive customer interactions. We recommend continuing to use this template or creating similar ones to maintain high delivery rates and maximize campaign performance."},[r.UNKNOWN]:{Icon:t,title:"No quality data available",sublineTextType:s,sublineColor:n.content.secondary,subline:"There is currently no quality data available for this template. This may be due to insufficient usage or recent creation. We recommend monitoring its performance over time to gather insights and optimize future campaigns."}},l=[{title:"Sent",icon:a,valName:"totalSent"},{title:"Delivered",icon:i,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:o,valName:"totalReads",percentValName:"readPercentage"}];export{l as ANALYTICS_ENGAGEMENT_MAP,m as TEMPLATE_QUALITY_MAP};

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

@@ -1 +1 @@
-const o=/\{\{[a-zA-Z0-9_ ]+\}\}/g,a=o=>"connectors_variable_"+o;export{o as SMS_TEMPLATE_VAR_PATTERN,a as getVariableNameForEmailByIndex};
+const o=o=>"connectors_variable_"+o;export{o as getVariableNameForEmailByIndex};

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

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import"../button/index.js";import{TitleRegular as t}from"../TypographyStyle.js";import{EmailContainer as n,Header as s,IframeContainer as a,ImageContainer as r,CardLoadingContainer as o,ViewButton as i}from"./EmailTemplatePreview.styled.js";import{Button as p}from"../button/Button.js";const l="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",d=d=>{let{template:c,handleViewTemplate:m,hideHeader:u,hideViewButton:j,containerStyle:h,emailHtmlContainerId:b,emailDisplayContent:x,applyBorderBottom:y,hidePointerEvents:g}=d;return e.jsxs(n,Object.assign({hideHeader:u,style:Object.assign({},null!=h?h:{})},{children:[!u&&e.jsx(s,{children:e.jsx(t,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),e.jsx(a,Object.assign({applyBorderBottom:y},{children:x?e.jsx("iframe",{title:"Email template preview",id:null!=b?b:"",width:"100%",srcDoc:(f=x,f.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=${l}`).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:g?void 0:"none"}}):e.jsx(r,Object.assign({hideHeader:u},{children:e.jsx(o,{})}))})),!j&&e.jsx(i,{children:e.jsx(p,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]}));var f};export{l as DEFAULT_IMAGE,d as default};
+import{j as e}from"../../node_modules/react/jsx-runtime.js";import{Button as t}from"../button/Button.js";import{TitleRegular as a}from"../TypographyStyle.js";import{EmailContainer as s,Header as n,IframeContainer as r,ImageContainer as o,CardLoadingContainer as i,ViewButton as p}from"./EmailTemplatePreview.styled.js";const l="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",d=d=>{let{template:c,handleViewTemplate:m,hideHeader:u,hideViewButton:h,containerStyle:j,emailHtmlContainerId:y,emailDisplayContent:b,applyBorderBottom:x,hidePointerEvents:g}=d;return e.jsxs(s,Object.assign({hideHeader:u,style:Object.assign({},null!=j?j:{})},{children:[!u&&e.jsx(n,{children:e.jsx(a,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),e.jsx(r,Object.assign({applyBorderBottom:x},{children:b?e.jsx("iframe",{title:"Email template preview",id:null!=y?y:"",width:"100%",srcDoc:(f=b,f.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=${l}`).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:g?void 0:"none"}}):e.jsx(o,Object.assign({hideHeader:u},{children:e.jsx(i,{})}))})),!h&&e.jsx(p,{children:e.jsx(t,{buttonType:"tertiary",buttonText:"View",onClick:()=>{m&&m()}})})]}));var f};export{l as DEFAULT_IMAGE,d as default};

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

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