@bikdotai/bik-component-library 0.0.685 → 0.0.687-beta.1

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

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

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

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

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

@@ -1,23 +1,23 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const c=i.div`
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import t from"../../../assets/icons/desktop_custom.svg.js";import n from"../../../assets/icons/mobile_custom.svg.js";import i from"styled-components";import{BodyPrimary as r}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const c=i.div`
 	padding-top: 12px;
 	padding-bottom: 12px;
 	padding-left: 30px;
 	padding-right: 30px;
-	background-color: ${s.surface.subdued};
+	background-color: ${d.surface.subdued};
 	align-items: center;
 	display: flex;
-	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
-`,a=i.div`
+	filter: ${o=>o.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
+`,l=i.div`
 	display: flex;
-	border: 1px solid ${s.stroke.primary};
+	border: 1px solid ${d.stroke.primary};
 	border-radius: 4px;
 	overflow: hidden;
 	width: min-content;
-`,l=i.div`
-	background: ${e=>e.active?s.background.brandLight:s.background.base};
+`,p=i.div`
+	background: ${o=>o.active?d.background.brandLight:d.background.base};
 	padding: 6px 8px;
 	justify-content: center;
 	align-items: center;
-`,p=i(l)`
-	border-left: 1px solid ${s.stroke.primary};
-`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:g}=d();return e(c,Object.assign({showOnlyContent:m},{children:[e(a,{children:[t(l,Object.assign({active:"mobile"===b,onClick:()=>null==g?void 0:g("mobile")},{children:t(n,{color:"mobile"===b?s.content.brand:s.content.secondary,height:20,width:20})})),t(p,Object.assign({active:"desktop"===b,onClick:()=>null==g?void 0:g("desktop")},{children:t(o,{color:"desktop"===b?s.content.brand:s.content.secondary,height:20,width:20})}))]}),e(r,Object.assign({style:{color:s.content.primary,marginLeft:16}},{children:["mobile"===b?"Mobile":"Web"," view"]}))]}))};export{m as default};
+`,a=i(p)`
+	border-left: 1px solid ${d.stroke.primary};
+`,m=i=>{let{showOnlyContent:m}=i;const{device:b,setDevice:h}=s();return o(c,{showOnlyContent:m,children:[o(l,{children:[e(p,{active:"mobile"===b,onClick:()=>null==h?void 0:h("mobile"),children:e(n,{color:"mobile"===b?d.content.brand:d.content.secondary,height:20,width:20})}),e(a,{active:"desktop"===b,onClick:()=>null==h?void 0:h("desktop"),children:e(t,{color:"desktop"===b?d.content.brand:d.content.secondary,height:20,width:20})})]}),o(r,{style:{color:d.content.primary,marginLeft:16},children:["mobile"===b?"Mobile":"Web"," view"]})]})};export{m as default};

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}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 s}from"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as p}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{getPreviewWidth as n}from"../utils/getPreviewDimension.js";const m=o.div`
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import o from"react";import r 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{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as n}from"../utils/getPreviewDimension.js";var m=Object.defineProperty,c=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,f=(e,t,i)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,w=(e,t)=>{for(var i in t||(t={}))h.call(t,i)&&f(e,i,t[i]);if(c)for(var i of c(t))d.call(t,i)&&f(e,i,t[i]);return e};const b=r.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,c=o.div`
+`,v=r.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,9 +17,9 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=a.forwardRef(((a,o)=>{let{display_content:h,channel:f,template:w,showSampleValues:b}=a;const{pod:v,hideDeviceContainerInPreview:g}=l(),u={showSampleValues:b,template:w,channel:f,smsSpecificMeta:{smsDisplayContent:h},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:v!==s.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:f==p.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:h,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return g?e(d,{children:e(r,Object.assign({},u))}):e(t,{children:i(m,Object.assign({channel:f},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n(f),height:443}}),e(c,Object.assign({ref:o},{children:e(r,Object.assign({},u))}))]}))})}));h.displayName="MobilePreview";const d=o.div`
+`,u=o.forwardRef(((o,r)=>{let{display_content:m,channel:c,template:h,showSampleValues:d}=o;const{pod:f,hideDeviceContainerInPreview:u}=s(),y={showSampleValues:d,template:h,channel:c,smsSpecificMeta:{smsDisplayContent:m},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:f!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:c==l.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 u?e(g,{children:e(a,w({},y))}):e(t,{children:i(b,{channel:c,children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n(c),height:443}}),e(v,{ref:r,children:e(a,w({},y))})]})})}));u.displayName="MobilePreview";const g=r.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`;export{h as default};
+`;export{u as default};

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

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

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

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

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import i from"../../../assets/icons/click.svg.js";import{useState as a,useEffect as c,useMemo as s}from"react";import{StyledModal as r}from"../../modals/styledModal.js";import{Tag as o}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,TitleSmall as p,Caption as u}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as h,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as j}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as T,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const f=n=>{const{templateAnalytics:i,onClose:o,onProceed:p,onCancel:b,headingTitle:j,headingSubtitle:k,templateId:f}=n,{templateQuality:N=d.GREEN,fetchAnalytics:O}=i||{},{icon:C,title:A,subline:B,sublineTextType:w,sublineColor:E}=T[N||d.GREEN],[S,G]=a({}),[P,V]=a(!0);c((()=>{null==O||O(f||"").then((e=>{e.analytics&&G(e.analytics),V(!1)}))}),[]);const R=s((()=>N===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:p,disabled:P},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==o||o(),null==b||b()},disabled:P}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==o||o(),null==b||b()},disabled:P},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:p,disabled:P}}),[N,P]),H=w||u;return e(r,Object.assign({open:!0,headingTitle:j,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==o||o()},headingSubtitle:k,footerShadow:!0,primaryButton:R.primaryButton,secondaryButton:R.secondaryButton,onClose:()=>{null==o||o()},width:"700px"},{children:t(h,{children:[e(g,{children:t("div",Object.assign({className:"inside--container"},{children:[C&&e("div",Object.assign({className:"icon--container"},{children:e(l,{width:40,height:40,color:y.content.warning})})),A&&e(m,Object.assign({style:{textAlign:"center"}},{children:A})),e(H,Object.assign({style:{textAlign:"center",color:E||y.content.primary}},{children:B}))]}))}),P?e(v,{}):e(x,{analyticsData:S,skipTitle:N==d.GREEN})]})}))},x=l=>{const{analyticsData:a,skipTitle:c}=l;return t(b,{children:[c?e(n,{}):e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",Object.assign({className:"mt-3"},{children:k.map(((t,n)=>e(N,{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?t(n,{children:[e(p,Object.assign({color:y.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(a.clickAnalytics).map(((t,n)=>{let[l,a]=t;return e(N,{icon:i,title:l,value:a.totalClicks||0,percentValue:a.clickPercentage},n)}))}))]}):e(n,{})]})},N=l=>{const{icon:i,title:a,value:c,percentValue:s}=l;return t("div",Object.assign({className:"each--analytics--container"},{children:[t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e("div",Object.assign({className:"each--icon--container"},{children:e(i,{width:"16px",height:"16px",color:y.background.brand})})),e(u,{children:a})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?e(o,{tagText:`${s}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(j,{children:c})]}))]}))};export{N as AnalyticsItem,x as RightPanelTemplateAnalytics,f as TemplateAnalyticsComponent};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import n from"../../../assets/icons/alert_triangle.svg.js";import i from"../../../assets/icons/click.svg.js";import{useState as a,useEffect as r,useMemo as c}from"react";import{StyledModal as o}from"../../modals/styledModal.js";import{Tag as s}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,TitleSmall as p,Caption as u}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as h,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as T}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as k,ANALYTICS_ENGAGEMENT_MAP as v}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as f}from"./TemplateAnalyticsSkeleton.js";const x=l=>{const{templateAnalytics:i,onClose:s,onProceed:p,onCancel:b,headingTitle:T,headingSubtitle:v,templateId:x}=l,{templateQuality:j=d.GREEN,fetchAnalytics:C}=i||{},{icon:A,title:B,subline:w,sublineTextType:E,sublineColor:S}=k[j||d.GREEN],[G,P]=a({}),[V,R]=a(!0);r((()=>{null==C||C(x||"").then((e=>{e.analytics&&P(e.analytics),R(!1)}))}),[]);const H=c((()=>j===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:p,disabled:V},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==s||s(),null==b||b()},disabled:V}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==s||s(),null==b||b()},disabled:V},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:p,disabled:V}}),[j,V]),O=E||u;return e(o,{open:!0,headingTitle:T,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==s||s()},headingSubtitle:v,footerShadow:!0,primaryButton:H.primaryButton,secondaryButton:H.secondaryButton,onClose:()=>{null==s||s()},width:"700px",children:t(h,{children:[e(g,{children:t("div",{className:"inside--container",children:[A&&e("div",{className:"icon--container",children:e(n,{width:40,height:40,color:y.content.warning})}),B&&e(m,{style:{textAlign:"center"},children:B}),e(O,{style:{textAlign:"center",color:S||y.content.primary},children:w})]})}),V?e(f,{}):e(N,{analyticsData:G,skipTitle:j==d.GREEN})]})})},N=n=>{const{analyticsData:a,skipTitle:r}=n;return t(b,{children:[r?e(l,{}):e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:v.map(((t,l)=>e(j,{icon:t.icon,title:t.title,value:a[t.valName]||0,percentValue:t.percentValName?a[t.percentValName]:null},l)))}),(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics).length?t(l,{children:[e(p,{color:y.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(a.clickAnalytics).map(((t,l)=>{let[n,a]=t;return e(j,{icon:i,title:n,value:a.totalClicks||0,percentValue:a.clickPercentage},l)}))})]}):e(l,{})]})},j=n=>{const{icon:i,title:a,value:r,percentValue:c}=n;return t("div",{className:"each--analytics--container",children:[t("div",{className:"d-flex align--center",style:{gap:8},children:[e("div",{className:"each--icon--container",children:e(i,{width:"16px",height:"16px",color:y.background.brand})}),e(u,{children:a})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[c?e(s,{tagText:`${c}%`||0,theme:"light",type:"neutral"}):e(l,{}),e(T,{children:r})]})]})};export{j as AnalyticsItem,N as RightPanelTemplateAnalytics,x as TemplateAnalyticsComponent};

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

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

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

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

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

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

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

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

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

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

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

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

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

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