@bikdotai/bik-component-library 0.0.736-beta.0 → 0.0.736-beta.1

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

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

package/dist/cjs/components/template-context-mapper/modalElements/Footer.d.ts

@@ -1,8 +1,8 @@
-export interface FooterProps {
-    isWhatsappCarousel: boolean;
-    onSelect: () => void;
-    footerButtonText?: string;
-    footerInfoText?: string;
-}
-declare const Footer: ({ isWhatsappCarousel, onSelect, footerButtonText, footerInfoText, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
-export default Footer;
+export interface FooterProps {
+    isWhatsappCarousel: boolean;
+    onSelect: () => void;
+    footerButtonText?: string;
+    footerInfoText?: string;
+}
+declare const Footer: ({ isWhatsappCarousel, onSelect, footerButtonText, footerInfoText, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/Header.d.ts

@@ -1,5 +1,5 @@
-export interface HeaderProps {
-    showOnlyContent?: boolean;
-}
-declare const Header: ({ showOnlyContent }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default Header;
+export interface HeaderProps {
+    showOnlyContent?: boolean;
+}
+declare const Header: ({ showOnlyContent }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { AllTemplateTypes } from "../../template-preview/models/types";
-declare const MobilePreview: React.ForwardRefExoticComponent<{
-    display_content: string;
-    channel: CHANNEL_TYPE;
-    template: AllTemplateTypes;
-    showSampleValues?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default MobilePreview;
+import React from 'react';
+import { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';
+import { AllTemplateTypes } from '@src/components/template-preview/models/types';
+declare const MobilePreview: React.ForwardRefExoticComponent<{
+    display_content: string;
+    channel: CHANNEL_TYPE;
+    template: AllTemplateTypes;
+    showSampleValues?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default MobilePreview;

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

@@ -17,7 +17,7 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,m=p.default.forwardRef(((t,i)=>{let{display_content:n,channel:p,template:d,showSampleValues:m}=t;const{pod:v,hideDeviceContainerInPreview:w}=l.useTemplateModalContext(),f={showSampleValues:m,template:d,channel:p,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:v!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:p==s.CHANNEL_TYPE.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return w?e.jsx(u,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:o.getPreviewWidth(p),height:443}}),e.jsx(h,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));m.displayName="MobilePreview";const u=d.default.div`
+`,m=p.default.forwardRef(((t,i)=>{let{display_content:n,channel:p,template:d,showSampleValues:m}=t;const{pod:v,hideDeviceContainerInPreview:w}=l.useTemplateModalContext(),f={showSampleValues:m,template:d,channel:p,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:v!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:p==s.CHANNEL_TYPE.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return w?e.jsx(u,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,{channel:p,children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:o.getPreviewWidth(p),height:443}}),e.jsx(h,{ref:i,children:e.jsx(a.TemplatePreview,Object.assign({},f))})]})})}));m.displayName="MobilePreview";const u=d.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

package/dist/cjs/components/template-context-mapper/modalElements/ProductBox.d.ts

@@ -1,8 +1,8 @@
-interface ProductBoxProps {
-    cardBody: string;
-    deleteItem: any;
-    editItem?: any;
-    hideIcon?: boolean;
-}
-export declare const ProductBox: (props: ProductBoxProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+interface ProductBoxProps {
+    cardBody: string;
+    deleteItem: any;
+    editItem?: any;
+    hideIcon?: boolean;
+}
+export declare const ProductBox: (props: ProductBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -44,4 +44,4 @@
 			color: #000000;
 		}
 	}
-`;exports.ProductBox=i=>{const{cardBody:c,deleteItem:a,editItem:f,hideIcon:x}=i;return e.jsxs(d,Object.assign({width:"100%"},{children:[!x&&e.jsx("div",Object.assign({style:{width:36,height:36}},{children:e.jsx(t.default,{})})),e.jsx("div",Object.assign({className:"card-body"},{children:e.jsx(r.TitleSmall,Object.assign({color:l.COLORS.content.secondary},{children:c}))})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[f&&e.jsx(s.IconButton,{style:{display:"flex"},Icon:()=>e.jsx(n.default,{width:24,height:24,color:l.COLORS.content.placeholder}),onClick:e=>{f(),e.stopPropagation()}}),e.jsx(s.IconButton,{style:{display:"flex",color:"#919191"},Icon:()=>e.jsx(o.default,{width:24,height:24,color:l.COLORS.content.placeholder}),onClick:e=>{a(),e.stopPropagation()}})]}))]}))};
+`;exports.ProductBox=i=>{const{cardBody:c,deleteItem:a,editItem:f,hideIcon:x}=i;return e.jsxs(d,{width:"100%",children:[!x&&e.jsx("div",{style:{width:36,height:36},children:e.jsx(t.default,{})}),e.jsx("div",{className:"card-body",children:e.jsx(r.TitleSmall,{color:l.COLORS.content.secondary,children:c})}),e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[f&&e.jsx(s.IconButton,{style:{display:"flex"},Icon:()=>e.jsx(n.default,{width:24,height:24,color:l.COLORS.content.placeholder}),onClick:e=>{f(),e.stopPropagation()}}),e.jsx(s.IconButton,{style:{display:"flex",color:"#919191"},Icon:()=>e.jsx(o.default,{width:24,height:24,color:l.COLORS.content.placeholder}),onClick:e=>{a(),e.stopPropagation()}})]})]})};

package/dist/cjs/components/template-context-mapper/modalElements/QualityWarningModal.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-import { TEMPLATE_QUALITY } from "../../template-preview";
-interface QualityWarningModalProps {
-    quality: TEMPLATE_QUALITY;
-    onClose?: () => void;
-    onProceed?: () => void;
-    onCancel?: () => void;
-    headingTitle?: string;
-    headingSubtitle?: string;
-}
-declare const QualityWarningModal: React.FC<QualityWarningModalProps>;
-export default QualityWarningModal;
+import { TEMPLATE_QUALITY } from '@src/components/template-preview';
+interface QualityWarningModalProps {
+    quality: TEMPLATE_QUALITY;
+    onClose?: () => void;
+    onProceed?: () => void;
+    onCancel?: () => void;
+    headingTitle?: string;
+    headingSubtitle?: string;
+}
+declare const QualityWarningModal: React.FC<QualityWarningModalProps>;
+export default QualityWarningModal;

package/dist/cjs/components/template-context-mapper/modalElements/QueryParamsComponent.d.ts

@@ -1,12 +1,12 @@
-export declare const QueryParamsComponent: (props: {
-    params: {
-        key: string;
-        value: string;
-    }[];
-    onChange: (params: {
-        key: string;
-        value: string;
-    }[]) => void;
-    isError: boolean;
-    variableValue?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const QueryParamsComponent: (props: {
+    params: {
+        key: string;
+        value: string;
+    }[];
+    onChange: (params: {
+        key: string;
+        value: string;
+    }[]) => void;
+    isError: boolean;
+    variableValue?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsComponent.d.ts

@@ -1,16 +1,16 @@
-import { TEMPLATE_QUALITY, TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
-export declare const TemplateAnalyticsComponent: (props: TemplateAnalyticsComponentI) => import("react/jsx-runtime").JSX.Element;
-export declare const RightPanelTemplateAnalytics: (props: {
-    analyticsData: TemplateAnalyticsDataI;
-    skipTitle?: boolean;
-    fullWidth?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const AnalyticsItem: (props: {
-    icon: React.ElementType;
-    title: string;
-    value: number;
-    percentValue?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const QualityTimelineChart: (props: {
-    qualityTimeLine: TEMPLATE_QUALITY[];
-}) => import("react/jsx-runtime").JSX.Element;
+import { TEMPLATE_QUALITY, TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from '@src/components/template-preview/models/WhatsAppTemplate';
+export declare const TemplateAnalyticsComponent: (props: TemplateAnalyticsComponentI) => import("react/jsx-runtime").JSX.Element;
+export declare const RightPanelTemplateAnalytics: (props: {
+    analyticsData: TemplateAnalyticsDataI;
+    skipTitle?: boolean;
+    fullWidth?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AnalyticsItem: (props: {
+    icon: React.ElementType;
+    title: string;
+    value: number;
+    percentValue?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const QualityTimelineChart: (props: {
+    qualityTimeLine: TEMPLATE_QUALITY[];
+}) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/TemplateAnalyticsSkeleton.d.ts

@@ -1,4 +1,4 @@
-export declare const TemplateAnalyticsSkeleton: (props: {
-    skipTitleShimmer?: boolean;
-    fullWidth?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateAnalyticsSkeleton: (props: {
+    skipTitleShimmer?: boolean;
+    fullWidth?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts

@@ -1,21 +1,21 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
-export interface TemplateSelectModalContentProps {
-    channel: CHANNEL_TYPE;
-    showVariableMapping?: boolean;
-    hideHeader?: boolean;
-    showOnlyContent?: boolean;
-    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
-    showVariableModal?: boolean;
-    variableListForImage?: VariableListInterfaceV2[];
-    discountCode?: string;
-    setDiscountCode?: (code: string) => void;
-    showSampleValues?: boolean;
-    fileName?: string;
-    setFileName?: (name: string) => void;
-    variableListFromProps?: VariableListInterfaceV2[];
-    skipDefaultVariableContent?: boolean;
-}
-declare const TemplateSelectModalContent: ({ channel, showVariableMapping, variableListFromProps, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, skipDefaultVariableContent, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
-export default TemplateSelectModalContent;
+import { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';
+import { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';
+import { WhatsAppPickerMeta } from '@src/components/template-preview/models/WhatsAppTemplate';
+export interface TemplateSelectModalContentProps {
+    channel: CHANNEL_TYPE;
+    showVariableMapping?: boolean;
+    hideHeader?: boolean;
+    showOnlyContent?: boolean;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    showVariableModal?: boolean;
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    showSampleValues?: boolean;
+    fileName?: string;
+    setFileName?: (name: string) => void;
+    variableListFromProps?: VariableListInterfaceV2[];
+    skipDefaultVariableContent?: boolean;
+}
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, variableListFromProps, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, skipDefaultVariableContent, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
+export default TemplateSelectModalContent;

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

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

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts

@@ -1,23 +1,22 @@
-/// <reference types="react" />
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
-import { WEB_PUSH_COMPONENT_TYPE } from "../../template-preview/models/WebpushTemplate";
-import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
-import { ComponentType } from './VariableConnectorWhatsApp';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    focused?: boolean | undefined;
-    channel?: CHANNEL_TYPE | undefined;
-}, never>;
-/** COMPONENT BELOW */
-export interface VariableConnectorProps {
-    onFocus?: () => void;
-    variable: CUSTOM_VARIABLE;
-    index: number;
-    showVariableModal?: boolean;
-    setShowDiscountCheckBox?: any;
-    buttonType?: BUTTON_TYPE;
-    componentType?: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
-    CTAoptions?: ButtonPlaceHolderOptions[];
-}
-declare const VariableConnector: React.FC<VariableConnectorProps>;
-export default VariableConnector;
+import { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';
+import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from '@src/components/template-preview/models/TemplateMeta';
+import { WEB_PUSH_COMPONENT_TYPE } from '@src/components/template-preview/models/WebpushTemplate';
+import { BUTTON_TYPE } from '@src/components/template-preview/models/WhatsAppTemplate';
+import { ComponentType } from './VariableConnectorWhatsApp';
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    focused?: boolean;
+    channel?: CHANNEL_TYPE;
+}>> & string;
+/** COMPONENT BELOW */
+export interface VariableConnectorProps {
+    onFocus?: () => void;
+    variable: CUSTOM_VARIABLE;
+    index: number;
+    showVariableModal?: boolean;
+    setShowDiscountCheckBox?: any;
+    buttonType?: BUTTON_TYPE;
+    componentType?: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+}
+declare const VariableConnector: React.FC<VariableConnectorProps>;
+export default VariableConnector;