@bikdotai/bik-component-library 0.0.788-beta.7 → 0.0.788-beta.8

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

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

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

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

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

@@ -0,0 +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;

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

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

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

@@ -0,0 +1,12 @@
+/// <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;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +1,23 @@
+/// <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;

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

@@ -1,4 +1,4 @@
-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 o from"lodash/cloneDeep";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 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`
 	/* surface/$color-background-warning-light */
 
 	background: ${e=>e.focused&&e.channel===j.EMAIL?E.background.warning.light:"transparent"};

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

@@ -0,0 +1,14 @@
+import { AllTemplateVariables, CHANNEL_TYPE } from "../../template-preview";
+import { WEB_PUSH_COMPONENT_TYPE, WebpushComponentKeyType, WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
+import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+export type ComponentType = WhatsAppTemplate['components'][0];
+export interface VariableConnectorWhatsAppProps {
+    originalVariableList: WhatsAppTemplateVariables | WebpushTemplateVariables | AllTemplateVariables;
+    descriptionComponent: ComponentType | WebpushComponentKeyType;
+    type: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
+    showVariableModal?: boolean;
+    originalList?: WhatsAppTemplateVariables | WebpushTemplateVariables | AllTemplateVariables;
+    channel?: CHANNEL_TYPE;
+}
+declare const VariableConnectorWhatsApp: (props: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableConnectorWhatsApp;

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

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

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

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export interface VariableEditorHeaderProps {
+    headerText: string;
+    subText: string;
+    toolTipInfo?: string;
+    containerStyle?: CSSProperties;
+}
+declare const VariableEditorHeader: ({ headerText, subText, toolTipInfo, containerStyle, }: VariableEditorHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableEditorHeader;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
+import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
+import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
+export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
+export interface WhatsAppTemplateCardButtonV2Props {
+    currentVariableList: WhatsAppTemplateVariables;
+    updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
+    updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
+    button: TEMPLATE_BUTTON;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+    QRBoptions?: ButtonPlaceHolderOptions[];
+    variableListIndex: number;
+    disableEdit?: boolean;
+}
+declare const WhatsAppTemplateCardButtonV2: React.FC<WhatsAppTemplateCardButtonV2Props>;
+export default WhatsAppTemplateCardButtonV2;

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IMimeTypeResponse, WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export type UseEditWhatsappTemplateMediaResponse = ReturnType<typeof useEditWhatsappTemplateMedia>;
+interface UseEditWhatsappTemplateMediaProps {
+    uploadMediaLink?: WhatsAppPickerMeta['uploadMediaLink'];
+    uploadMediaFiles: WhatsAppPickerMeta['uploadMediaFiles'];
+    validateMimeType?: (blob: Blob) => Promise<IMimeTypeResponse>;
+    updateTemplateImageUrl: (url: string, format: WhatsAppTemplate['components'][0]['format']) => void;
+    fileRef: React.RefObject<HTMLInputElement | null>;
+    mediaComponent: any;
+}
+export declare const useEditWhatsappTemplateMedia: (props: UseEditWhatsappTemplateMediaProps) => {
+    uploadMedia: (urlOrVariable?: string) => Promise<void>;
+    processImageUpload: (file?: Blob | File) => Promise<void>;
+    handleImageUpload: ($event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleImageChange: () => void;
+    onCropComplete: (base64: string) => Promise<void>;
+    editIconRef: React.MutableRefObject<null>;
+    fileName: string | undefined;
+    setFileName: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedVariable: string | undefined;
+    setSelectedVariable: React.Dispatch<React.SetStateAction<string | undefined>>;
+    openEditMedia: boolean;
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedImage: string | undefined;
+    setSelectedImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+    loading: boolean;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    error: string;
+    setError: React.Dispatch<React.SetStateAction<string>>;
+};
+export {};

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

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

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

@@ -0,0 +1,6 @@
+import { SingleOption } from "../../dropdown/type";
+import { GlobalPlaceholderType } from "../../template-preview/models/TemplateMeta";
+export declare const convertPlaceholdersToBikDropdown: (data?: GlobalPlaceholderType) => {
+    label: string;
+    options: SingleOption[];
+}[];

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

@@ -0,0 +1,34 @@
+import { WebpushTemplateType, WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
+import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+type ComponentType = WhatsAppTemplate['components'][0];
+export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
+    imageComponent: null;
+    descriptionComponents: {
+        component: ComponentType;
+        i: number;
+        type: ComponentType['type'];
+    }[];
+    urlBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    qrbBtns: {
+        component: ComponentType;
+        i: number;
+    }[];
+    bodyVariables: string[];
+    headerVariables: string[];
+    titleVariables: string[];
+};
+export declare const getAllDataFromWebpushTemplateComponent: (mapping: WebpushTemplateType['webpushBroadcastConfig'], templateVariables: WebpushTemplateVariables) => {
+    bodyVariables: string[];
+    titleVariables: string[];
+    iconImage: string[];
+    bannerImage: string[];
+    redirectionLink: string[];
+    descriptionComponents: {
+        type: string;
+        component: any;
+    }[];
+};
+export {};

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

@@ -0,0 +1,3 @@
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { DEVICE_TYPES } from '../context/templateModalContext';
+export declare function highlightFor(id: string, color: string, seconds: number, channel: CHANNEL_TYPE, device: DEVICE_TYPES): void;

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

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

package/dist/esm/components/template-preview/models/TemplateMeta.d.ts

@@ -0,0 +1,96 @@
+import { SingleOption } from "../../dropdown/type";
+export type CUSTOM_VARIABLE = {
+    variableName: string;
+    type: 'string' | 'link' | 'image' | 'button' | 'date_time';
+    isEditableVariable: boolean;
+    updatedValue: string;
+    index?: number;
+    variableValue?: string;
+    queryParams?: {
+        key: string;
+        value: string;
+    }[];
+    initialValue?: string;
+};
+export type QueryParamtype = {
+    key: string;
+    value: string;
+};
+export declare enum TEMPLATE_EDITOR {
+    SEND_GRID = "sendgrid",
+    BEE = "bee"
+}
+export declare enum TEMPLATE_STATUS {
+    APPROVED = "APPROVED",
+    DISABLED = "DISABLED",
+    FLAGGED = "FLAGGED",
+    PENDING = "PENDING",
+    DRAFT = "DRAFT",
+    REJECTED = "REJECTED",
+    PENDING_DELETION = "PENDING_DELETION",
+    IN_REVIEW = "IN REVIEW",
+    PAUSED = "PAUSED",
+    ACTIVE = "ACTIVE",
+    LIBRARY = "LIBRARY"
+}
+export declare enum HEADER_TYPES {
+    NONE = "NONE",
+    TEXT = "TEXT",
+    IMAGE = "IMAGE",
+    VIDEO = "VIDEO",
+    DOCUMENT = "DOCUMENT"
+}
+export declare enum ACTIONS_TYPES {
+    NONE = "NONE",
+    CTA_BTN = "CTA_BTN",
+    QUICK_REPLY = "QUICK_REPLY"
+}
+export interface QUICK_REPLY_BUTTON {
+    text: string;
+    flowId: string;
+    flowName: string;
+}
+export declare const CUSTOM_URL_NAME: {
+    value: string;
+    label: string;
+    placeHolder: string;
+};
+export declare const STATIC_URL_CTA_OPTION: {
+    label: string;
+    value: string;
+    placeHolder: string;
+};
+export declare const UNSUBSCRIBE_URL_OPTION: {
+    label: string;
+    value: string;
+    placeHolder: string;
+};
+export type GlobalPlaceholderType = {
+    MARKETING: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+    TRANSACTIONAL: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+};
+export type baseAPITemplateVariableType = {
+    title: string;
+    default_value: string;
+    placeHolder: string;
+    type?: 'string' | 'url';
+};
+export type globalNormalizedPlaceholdersType = {
+    label: string;
+    options: SingleOption[];
+};
+export interface ButtonPlaceHolderOptions {
+    value: string;
+    label: string;
+    placeHolder: string;
+}