@bikdotai/bik-component-library 0.0.612-beta-vsp.3 → 0.0.612-beta-vsp.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
  2. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
  3. package/package.json +1 -1
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js CHANGED
@@ -4,4 +4,4 @@
4
4
  padding-right: 10px;
5
5
  margin-bottom: 8px;
6
6
  line-height: normal;
7
- `;exports.default=i=>{let{template:E,onTemplateChange:B,whatsappSpecificPickerMeta:M,showVariableModal:k,variableListForImage:q,setDiscountCode:I,fileName:D,setFileName:R}=i;var L,U,P,w,A,_,N,S,H,F,W,Q,Y,K,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,ue,re,pe,ce,ve,me,be,ge,he,je;const fe=E.isCarouselType,{originalVariableList:Ce,pod:xe,extras:Oe,selectedCarouselIndex:Te,isProductCarouselType:ye,disableCopyCode:Ee}=u.useTemplateModalContext(),{descriptionComponents:Ve,urlBtns:Be,qrbBtns:Me,imageComponent:ke,bodyVariables:qe,headerVariables:Ie}=p.getAllDataFromTemplateComponent(E),De=o.useRef(null),[Re,Le]=o.useState(!1),[Ue,Pe]=o.useState(-1===Te?{descriptionComponents:Ve,urlBtns:Be,qrbBtns:Me,imageComponent:ke,bodyVariables:qe,headerVariables:Ie}:{}),{uploadMediaLink:we,uploadMediaFiles:Ae,validateMimeType:_e}=M,Ne=f.useEditWhatsappTemplateMedia({uploadMediaLink:we,uploadMediaFiles:Ae,updateTemplateImageUrl:function(e,n){var o,i,l,a,s,d,u,r;let p;p=null!=Te&&Te>-1?{components:null===(i=null===(o=E.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Te].components,mapping:null===(a=null===(l=null==E?void 0:E.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Te]}:Object.assign({},E);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!=Te&&Te>-1){const e=t.cloneDeep(E);e.components[1].cards[Te].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(u=null==e?void 0:e.mapping)||void 0===u?void 0:u.cards.length)>0&&(e.mapping.cards[Te]=null!==(r=p.mapping)&&void 0!==r?r:{}),null==B||B(Object.assign({},e)),He(!0)}else null==B||B(Object.assign({},p))},validateMimeType:_e,mediaComponent:fe?Ue.imageComponent:ke,fileRef:De}),[Se,He]=o.useState(!1),[Fe,We]=o.useState(D),[Qe,Ye]=o.useState();function Ke(e,n,o){var i,l,a,s,d,u,r,p,c,v;const m=null!=Te&&Te>-1?{components:null===(i=Object.assign({},E).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},E).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},E),b=t.cloneDeep(m),g="custom"===n&&"string"==typeof e,h=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Te&&Te>-1&&ye){const n=Object.assign({},E).components.map((e=>{var n;return"CAROUSEL"===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:[h]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),i=null===(s=null===(a=Object.assign({},E).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.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=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=t.cloneDeep(E);return l.components=n,l.mapping.cards=i,void(null==B||B(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const t=null===(d=null==b?void 0:b.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"===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!==(p=null===(r=null===(u=b.components)||void 0===u?void 0:u[j])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[j]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[j]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Le(!0):(Le(!1),null==I||I(""))}if(null!=Te&&Te>-1){const e=t.cloneDeep(E);e.components[1].cards[Te].components=b.components,e.mapping.cards[Te]=b.mapping,null==B||B(Object.assign({},e))}else null==B||B(b)}function $e(e,n,o){var i,l,a,s,d,u,r;const p=null!=Te&&Te>-1?{components:null===(i=Object.assign({},E).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},E).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},E);if(null!=Te&&Te>-1&&ye){const n=Object.assign({},E).components.map((n=>{var t;return"CAROUSEL"===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(E);return i.components=n,void(null==B||B(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null===(a=null==p?void 0:p.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.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!==(r=null===(u=null===(d=p.components)||void 0===d?void 0:d[c])||void 0===u?void 0:u.buttons)&&void 0!==r?r:[]].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({},p.components[c]),{buttons:i}),a=[...p.components];a[c]=l,p.components=a}}if(null!=Te&&Te>-1){const e=t.cloneDeep(E);e.components[1].cards[Te].components=p.components,null==B||B(Object.assign({},e))}else null==B||B(p)}o.useEffect((()=>{var e,n;if(null===(e=E.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Le(!0);else{Le(!1);const e=null===(n=null==Oe?void 0:Oe.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[E]),o.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1){const i={components:null===(n=null===(e=E.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==E?void 0:E.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r}=p.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r})}else if(null!=Te&&-1===Te){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=p.getAllDataFromTemplateComponent(E);Pe({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Te]),o.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1&&Se){const i={components:null===(n=null===(e=E.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==E?void 0:E.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r}=p.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r}),He(!1)}}),[Se]);const Ge=fe?Ue.imageComponent:ke;return Ne.openEditMedia?e.jsx(x.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(g.default,{mediaComponentFormat:null!==(L=Ge.format)&&void 0!==L?L:s.HEADER_TYPES.IMAGE,uploadMedia:Ne.uploadMedia,variableListForImage:q||[],useEditWhatsappTemplateMediaResponse:Ne,setOpenEditMedia:Ne.setOpenEditMedia,openEditMedia:Ne.openEditMedia,editIconRef:Ne.editIconRef,fileRef:De})})):e.jsxs(x.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:ye?"420px":"auto"}},{children:[!!Ue.imageComponent&&!ye&&e.jsxs(j.EditTemplateMediaContainer,{children:[e.jsx(h.default,{imageName:null!==(P=null===(U=null==Ge?void 0:Ge.example)||void 0===U?void 0:U.header_handle)&&void 0!==P?P:[],handleImageChange:Ne.handleImageChange,mediaType:null==Ge?void 0:Ge.format,error:Ne.error,isLoading:Ne.loading,setOpenEditMedia:Ne.setOpenEditMedia,selectedVariable:c.isVariable(null!==(_=null===(A=null===(w=null==Ge?void 0:Ge.example)||void 0===w?void 0:w.header_handle)||void 0===A?void 0:A[0])&&void 0!==_?_:"")?null===(S=null===(N=null==Ge?void 0:Ge.example)||void 0===N?void 0:N.header_handle)||void 0===S?void 0:S[0]:(null===(F=null===(H=null==E?void 0:E.mapping)||void 0===H?void 0:H.header)||void 0===F?void 0:F[0])?null===(Q=null===(W=null==E?void 0:E.mapping)||void 0===W?void 0:W.header)||void 0===Q?void 0:Q[0]:Ne.selectedVariable}),(null==ke?void 0:ke.format)==s.HEADER_TYPES.DOCUMENT?e.jsx(V,{children:e.jsx(a.InputWithVariables,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:Qe||void 0,onBlur:()=>{if(!Fe)return null==R||R(""),void Ye("PDF name is Required");const e=v.validateInputName(Fe);null==R||R(Fe),Ye(e?"Please enter a valid PDF name":void 0)},onChange:e=>{var n,t;console.log("name",e),Ye(""),(null!==(n=null==e?void 0:e.actualValue)&&void 0!==n?n:"").startsWith("{{")&&(null!==(t=null==e?void 0:e.actualValue)&&void 0!==t?t:"").endsWith("}}")?We(Fe+(null==e?void 0:e.actualValue)):We(null==e?void 0:e.actualValue)},pickerType:n.PickerType.EMBEDDED,noMaxCharCheck:!0,allowMix:!1,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=Fe?Fe:"",variableType:"string"},variablesList:q})}):e.jsx(e.Fragment,{})]}),(null===(Y=Ue.bodyVariables)||void 0===Y?void 0:Y.length)>0&&e.jsx(T.default,{containerStyle:{paddingTop:Ue.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===(K=Ue.descriptionComponents)||void 0===K?void 0:K.map(((n,t)=>e.jsx(O.default,{originalVariableList:null!=Te&&Te>-1?Ce.cards[Te]:Ce,type:n.type,descriptionComponent:n.component,showVariableModal:k},t))),(null===(X=null===(G=null!=Te&&Te>-1?null===($=Ce.cards[Te])||void 0===$?void 0:$.buttons:null==Ce?void 0:Ce.buttons)||void 0===G?void 0:G.filter((e=>"URL"===e.type)))||void 0===X?void 0:X.length)>0&&e.jsx(T.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(Z=null===(J=null!=Te&&Te>-1?null===(z=Ce.cards[Te])||void 0===z?void 0:z.buttons:null==Ce?void 0:Ce.buttons)||void 0===J?void 0:J.filter((e=>xe===d.POD.CHATBOT||"URL"===e.type)))||void 0===Z?void 0:Z.map(((n,t)=>{const o=n.buttonVariable===r.STATIC_URL_VARIABLE_NAME;if("URL"===n.type)return e.jsx(y.default,{variableListIndex:t,disableEdit:o,CTAoptions:null==M?void 0:M.CTAoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedURLTemplateBtn:Ke},`${t}_${Te}`)})),xe===d.POD.CHATBOT&&(null===(ne=null===(ee=Me[0])||void 0===ee?void 0:ee.component)||void 0===ne?void 0:ne.buttons)&&(null===(ie=null===(oe=null===(te=Me[0])||void 0===te?void 0:te.component)||void 0===oe?void 0:oe.buttons)||void 0===ie?void 0:ie.length)>0&&e.jsx(m.BackTrackComponent,{backTrackMessage:null===(le=null==Oe?void 0:Oe.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==Oe?void 0:Oe.backTrackExtra)||void 0===ae?void 0:ae[1]}),(null===(ue=null===(de=null!=Te&&Te>-1?null===(se=Ce.cards[Te])||void 0===se?void 0:se.buttons:null==Ce?void 0:Ce.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ue?void 0:ue.length)>0&&(xe!==d.POD.CHATBOT?e.jsx(T.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(m.BackTrackComponent,{backTrackMessage:null===(re=null==Oe?void 0:Oe.backTrackExtra)||void 0===re?void 0:re[0],setBackTrackMessage:null===(pe=null==Oe?void 0:Oe.backTrackExtra)||void 0===pe?void 0:pe[1]})),null===(me=null===(ve=null!=Te&&Te>-1?null===(ce=Ce.cards[Te])||void 0===ce?void 0:ce.buttons:null==Ce?void 0:Ce.buttons)||void 0===ve?void 0:ve.filter((e=>"QUICK_REPLY"===e.type)))||void 0===me?void 0:me.map(((n,t)=>{if("QUICK_REPLY"===n.type&&xe!==d.POD.CHATBOT)return e.jsx(y.default,{variableListIndex:t,QRBoptions:null==M?void 0:M.QRBoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedQRBTemplateBtn:$e},`${t}_${Te}`)})),xe===d.POD.CHATBOT&&Re&&e.jsx(b.DiscountCodeComponent,{discountCode:null===(be=null==Oe?void 0:Oe.discountCodeExtra)||void 0===be?void 0:be[0],setDiscountCode:null===(ge=null==Oe?void 0:Oe.discountCodeExtra)||void 0===ge?void 0:ge[1]}),null===(je=null!=Te&&Te>-1?null===(he=Ce.cards[Te])||void 0===he?void 0:he.buttons:null==Ce?void 0:Ce.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:Ee?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(C.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)})}))]}))};
7
+ `;exports.default=i=>{let{template:E,onTemplateChange:B,whatsappSpecificPickerMeta:M,showVariableModal:k,variableListForImage:q,setDiscountCode:I,fileName:D,setFileName:R}=i;var L,U,A,P,w,_,N,S,H,F,W,Q,Y,K,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,ue,re,pe,ce,ve,me,be,ge,he,je;const fe=E.isCarouselType,{originalVariableList:Ce,pod:xe,extras:Oe,selectedCarouselIndex:Te,isProductCarouselType:ye,disableCopyCode:Ee}=u.useTemplateModalContext(),{descriptionComponents:Ve,urlBtns:Be,qrbBtns:Me,imageComponent:ke,bodyVariables:qe,headerVariables:Ie}=p.getAllDataFromTemplateComponent(E),De=o.useRef(null),[Re,Le]=o.useState(!1),[Ue,Ae]=o.useState(-1===Te?{descriptionComponents:Ve,urlBtns:Be,qrbBtns:Me,imageComponent:ke,bodyVariables:qe,headerVariables:Ie}:{}),{uploadMediaLink:Pe,uploadMediaFiles:we,validateMimeType:_e}=M,Ne=f.useEditWhatsappTemplateMedia({uploadMediaLink:Pe,uploadMediaFiles:we,updateTemplateImageUrl:function(e,n){var o,i,l,a,s,d,u,r;let p;p=null!=Te&&Te>-1?{components:null===(i=null===(o=E.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Te].components,mapping:null===(a=null===(l=null==E?void 0:E.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Te]}:Object.assign({},E);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!=Te&&Te>-1){const e=t.cloneDeep(E);e.components[1].cards[Te].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(u=null==e?void 0:e.mapping)||void 0===u?void 0:u.cards.length)>0&&(e.mapping.cards[Te]=null!==(r=p.mapping)&&void 0!==r?r:{}),null==B||B(Object.assign({},e)),He(!0)}else null==B||B(Object.assign({},p))},validateMimeType:_e,mediaComponent:fe?Ue.imageComponent:ke,fileRef:De}),[Se,He]=o.useState(!1),[Fe,We]=o.useState(D),[Qe,Ye]=o.useState();function Ke(e,n,o){var i,l,a,s,d,u,r,p,c,v;const m=null!=Te&&Te>-1?{components:null===(i=Object.assign({},E).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},E).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},E),b=t.cloneDeep(m),g="custom"===n&&"string"==typeof e,h=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Te&&Te>-1&&ye){const n=Object.assign({},E).components.map((e=>{var n;return"CAROUSEL"===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:[h]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),i=null===(s=null===(a=Object.assign({},E).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.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=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=t.cloneDeep(E);return l.components=n,l.mapping.cards=i,void(null==B||B(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const t=null===(d=null==b?void 0:b.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"===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!==(p=null===(r=null===(u=b.components)||void 0===u?void 0:u[j])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[j]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[j]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Le(!0):(Le(!1),null==I||I(""))}if(null!=Te&&Te>-1){const e=t.cloneDeep(E);e.components[1].cards[Te].components=b.components,e.mapping.cards[Te]=b.mapping,null==B||B(Object.assign({},e))}else null==B||B(b)}function $e(e,n,o){var i,l,a,s,d,u,r;const p=null!=Te&&Te>-1?{components:null===(i=Object.assign({},E).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},E).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},E);if(null!=Te&&Te>-1&&ye){const n=Object.assign({},E).components.map((n=>{var t;return"CAROUSEL"===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(E);return i.components=n,void(null==B||B(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null===(a=null==p?void 0:p.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.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!==(r=null===(u=null===(d=p.components)||void 0===d?void 0:d[c])||void 0===u?void 0:u.buttons)&&void 0!==r?r:[]].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({},p.components[c]),{buttons:i}),a=[...p.components];a[c]=l,p.components=a}}if(null!=Te&&Te>-1){const e=t.cloneDeep(E);e.components[1].cards[Te].components=p.components,null==B||B(Object.assign({},e))}else null==B||B(p)}o.useEffect((()=>{var e,n;if(null===(e=E.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Le(!0);else{Le(!1);const e=null===(n=null==Oe?void 0:Oe.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[E]),o.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1){const i={components:null===(n=null===(e=E.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==E?void 0:E.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r}=p.getAllDataFromTemplateComponent(i);Ae({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r})}else if(null!=Te&&-1===Te){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=p.getAllDataFromTemplateComponent(E);Ae({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Te]),o.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1&&Se){const i={components:null===(n=null===(e=E.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==E?void 0:E.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r}=p.getAllDataFromTemplateComponent(i);Ae({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:r}),He(!1)}}),[Se]);const Ge=fe?Ue.imageComponent:ke;return Ne.openEditMedia?e.jsx(x.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(g.default,{mediaComponentFormat:null!==(L=Ge.format)&&void 0!==L?L:s.HEADER_TYPES.IMAGE,uploadMedia:Ne.uploadMedia,variableListForImage:q||[],useEditWhatsappTemplateMediaResponse:Ne,setOpenEditMedia:Ne.setOpenEditMedia,openEditMedia:Ne.openEditMedia,editIconRef:Ne.editIconRef,fileRef:De})})):e.jsxs(x.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:ye?"420px":"auto"}},{children:[!!Ue.imageComponent&&!ye&&e.jsxs(j.EditTemplateMediaContainer,{children:[e.jsx(h.default,{imageName:null!==(A=null===(U=null==Ge?void 0:Ge.example)||void 0===U?void 0:U.header_handle)&&void 0!==A?A:[],handleImageChange:Ne.handleImageChange,mediaType:null==Ge?void 0:Ge.format,error:Ne.error,isLoading:Ne.loading,setOpenEditMedia:Ne.setOpenEditMedia,selectedVariable:c.isVariable(null!==(_=null===(w=null===(P=null==Ge?void 0:Ge.example)||void 0===P?void 0:P.header_handle)||void 0===w?void 0:w[0])&&void 0!==_?_:"")?null===(S=null===(N=null==Ge?void 0:Ge.example)||void 0===N?void 0:N.header_handle)||void 0===S?void 0:S[0]:(null===(F=null===(H=null==E?void 0:E.mapping)||void 0===H?void 0:H.header)||void 0===F?void 0:F[0])?null===(Q=null===(W=null==E?void 0:E.mapping)||void 0===W?void 0:W.header)||void 0===Q?void 0:Q[0]:Ne.selectedVariable}),(null==ke?void 0:ke.format)==s.HEADER_TYPES.DOCUMENT?e.jsx(V,{children:e.jsx(a.InputWithVariables,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:Qe||void 0,onBlur:()=>{if(!Fe)return null==R||R(""),void Ye("PDF name is Required");const e=v.validateInputName(Fe);null==R||R(Fe),Ye(e?"Please enter a valid PDF name":void 0)},onChange:e=>{var n,t;Ye(""),(null!==(n=null==e?void 0:e.actualValue)&&void 0!==n?n:"").startsWith("{{")&&(null!==(t=null==e?void 0:e.actualValue)&&void 0!==t?t:"").endsWith("}}")?We(Fe+(null==e?void 0:e.actualValue)):We(null==e?void 0:e.actualValue)},pickerType:n.PickerType.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=Fe?Fe:"",variableType:"string"},variablesList:q,showAddButton:xe===d.POD.CHATBOT})}):e.jsx(e.Fragment,{})]}),(null===(Y=Ue.bodyVariables)||void 0===Y?void 0:Y.length)>0&&e.jsx(T.default,{containerStyle:{paddingTop:Ue.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===(K=Ue.descriptionComponents)||void 0===K?void 0:K.map(((n,t)=>e.jsx(O.default,{originalVariableList:null!=Te&&Te>-1?Ce.cards[Te]:Ce,type:n.type,descriptionComponent:n.component,showVariableModal:k},t))),(null===(X=null===(G=null!=Te&&Te>-1?null===($=Ce.cards[Te])||void 0===$?void 0:$.buttons:null==Ce?void 0:Ce.buttons)||void 0===G?void 0:G.filter((e=>"URL"===e.type)))||void 0===X?void 0:X.length)>0&&e.jsx(T.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(Z=null===(J=null!=Te&&Te>-1?null===(z=Ce.cards[Te])||void 0===z?void 0:z.buttons:null==Ce?void 0:Ce.buttons)||void 0===J?void 0:J.filter((e=>xe===d.POD.CHATBOT||"URL"===e.type)))||void 0===Z?void 0:Z.map(((n,t)=>{const o=n.buttonVariable===r.STATIC_URL_VARIABLE_NAME;if("URL"===n.type)return e.jsx(y.default,{variableListIndex:t,disableEdit:o,CTAoptions:null==M?void 0:M.CTAoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedURLTemplateBtn:Ke},`${t}_${Te}`)})),xe===d.POD.CHATBOT&&(null===(ne=null===(ee=Me[0])||void 0===ee?void 0:ee.component)||void 0===ne?void 0:ne.buttons)&&(null===(ie=null===(oe=null===(te=Me[0])||void 0===te?void 0:te.component)||void 0===oe?void 0:oe.buttons)||void 0===ie?void 0:ie.length)>0&&e.jsx(m.BackTrackComponent,{backTrackMessage:null===(le=null==Oe?void 0:Oe.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==Oe?void 0:Oe.backTrackExtra)||void 0===ae?void 0:ae[1]}),(null===(ue=null===(de=null!=Te&&Te>-1?null===(se=Ce.cards[Te])||void 0===se?void 0:se.buttons:null==Ce?void 0:Ce.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ue?void 0:ue.length)>0&&(xe!==d.POD.CHATBOT?e.jsx(T.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(m.BackTrackComponent,{backTrackMessage:null===(re=null==Oe?void 0:Oe.backTrackExtra)||void 0===re?void 0:re[0],setBackTrackMessage:null===(pe=null==Oe?void 0:Oe.backTrackExtra)||void 0===pe?void 0:pe[1]})),null===(me=null===(ve=null!=Te&&Te>-1?null===(ce=Ce.cards[Te])||void 0===ce?void 0:ce.buttons:null==Ce?void 0:Ce.buttons)||void 0===ve?void 0:ve.filter((e=>"QUICK_REPLY"===e.type)))||void 0===me?void 0:me.map(((n,t)=>{if("QUICK_REPLY"===n.type&&xe!==d.POD.CHATBOT)return e.jsx(y.default,{variableListIndex:t,QRBoptions:null==M?void 0:M.QRBoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedQRBTemplateBtn:$e},`${t}_${Te}`)})),xe===d.POD.CHATBOT&&Re&&e.jsx(b.DiscountCodeComponent,{discountCode:null===(be=null==Oe?void 0:Oe.discountCodeExtra)||void 0===be?void 0:be[0],setDiscountCode:null===(ge=null==Oe?void 0:Oe.discountCodeExtra)||void 0===ge?void 0:ge[1]}),null===(je=null!=Te&&Te>-1?null===(he=Ce.cards[Te])||void 0===he?void 0:he.buttons:null==Ce?void 0:Ce.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:Ee?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(C.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/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsx as o,jsxs as e,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{HEADER_TYPES as u}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as v}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as m}from"../utils/constants.js";import{getAllDataFromTemplateComponent as b}from"../utils/getDataFromTemplateComponent.js";import{isVariable as g}from"../utils/validateIsUrl.js";import{validateInputName as f}from"../utils/validateName.js";import{BackTrackComponent as h}from"./BackTrackComponent.js";import{DiscountCodeComponent as j}from"./DiscountCodeComponent.js";import O from"./EditMediaModal.js";import C from"./EditMediaV2.js";import{EditTemplateMediaContainer as T}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as x}from"./useEditWhtasappTemplateMedia.js";import y from"./VariableConnector.js";import{Container as V}from"./VariableConnectorsPanel.js";import E from"./VariableConnectorWhatsApp.js";import B from"./VariableEditorHeader.js";import M from"./WhatsAppTemplateCardButtonV2.js";const k=d=>{let{template:k,onTemplateChange:L,whatsappSpecificPickerMeta:R,showVariableModal:U,variableListForImage:w,setDiscountCode:N,fileName:P,setFileName:H}=d;var A,D,_,S,F,Q,q,W,Y,K,$,G,X,z,J,Z,oo,eo,no,to,io,lo,ao,so,ro,po,uo,co,vo,mo,bo,go,fo,ho,jo,Oo,Co,To,xo;const yo=k.isCarouselType,{originalVariableList:Vo,pod:Eo,extras:Bo,selectedCarouselIndex:Mo,isProductCarouselType:ko,disableCopyCode:Io}=v(),{descriptionComponents:Lo,urlBtns:Ro,qrbBtns:Uo,imageComponent:wo,bodyVariables:No,headerVariables:Po}=b(k),Ho=l(null),[Ao,Do]=a(!1),[_o,So]=a(-1===Mo?{descriptionComponents:Lo,urlBtns:Ro,qrbBtns:Uo,imageComponent:wo,bodyVariables:No,headerVariables:Po}:{}),{uploadMediaLink:Fo,uploadMediaFiles:Qo,validateMimeType:qo}=R,Wo=x({uploadMediaLink:Fo,uploadMediaFiles:Qo,updateTemplateImageUrl:function(o,e){var n,t,l,a,s,d,r,p;let u;u=null!=Mo&&Mo>-1?{components:null===(t=null===(n=k.components[1])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Mo].components,mapping:null===(a=null===(l=null==k?void 0:k.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Mo]}:Object.assign({},k);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.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:e,example:{header_handle:[o]}}),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!=Mo&&Mo>-1){const o=i(k);o.components[1].cards[Mo].components=u.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[Mo]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},o)),Ko(!0)}else null==L||L(Object.assign({},u))},validateMimeType:qo,mediaComponent:yo?_o.imageComponent:wo,fileRef:Ho}),[Yo,Ko]=a(!1),[$o,Go]=a(P),[Xo,zo]=a();function Jo(o,e,n){var t,l,a,s,d,r,p,u,c,v;const m=null!=Mo&&Mo>-1?{components:null===(t=Object.assign({},k).components[1].cards)||void 0===t?void 0:t[Mo].components,mapping:null===(l=Object.assign({},k).mapping.cards)||void 0===l?void 0:l[Mo]}:Object.assign({},k),b=i(m),g="custom"===e&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue?o.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Mo&&Mo>-1&&ko){const e=Object.assign({},k).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,t,i;if("BUTTONS"===o.type){const l=null===(e=o.buttons)||void 0===e?void 0:e.filter((o=>"URL"===o.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=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},o),{buttons:s})}return o}))})))}):o})),t=null===(s=null===(a=Object.assign({},k).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((e=>{var n;return Object.assign(Object.assign({},e),{buttons:null===(n=null==e?void 0:e.buttons)||void 0===n?void 0:n.map((e=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=i(k);return l.components=e,l.mapping.cards=t,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===e&&"string"==typeof o,l=i?o:"string"!=typeof o&&o.defaultValue?o.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=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[n]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(v=o.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Do(!0):(Do(!1),null==N||N(""))}if(null!=Mo&&Mo>-1){const o=i(k);o.components[1].cards[Mo].components=b.components,o.mapping.cards[Mo]=b.mapping,null==L||L(Object.assign({},o))}else null==L||L(b)}function Zo(o,e,n){var t,l,a,s,d,r,p;const u=null!=Mo&&Mo>-1?{components:null===(t=Object.assign({},k).components[1].cards)||void 0===t?void 0:t[Mo].components,mapping:null===(l=Object.assign({},k).mapping.cards)||void 0===l?void 0:l[Mo]}:Object.assign({},k);if(null!=Mo&&Mo>-1&&ko){const e=Object.assign({},k).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,i,l;if("BUTTONS"===e.type){const a=null===(t=null==e?void 0:e.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=null==e?void 0:e.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},e),{buttons:d})}return e}))})))}):e})),t=i(k);return t.components=e,void(null==L||L(Object.assign({},t)))}const c=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const e=null===(s=null===(a=null==u?void 0:u.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(e){let t=e[n];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[c])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),a=[...u.components];a[c]=l,u.components=a}}if(null!=Mo&&Mo>-1){const o=i(k);o.components[1].cards[Mo].components=u.components,null==L||L(Object.assign({},o))}else null==L||L(u)}s((()=>{var o,e;if(null===(o=k.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))Do(!0);else{Do(!1);const o=null===(e=null==Bo?void 0:Bo.discountCodeExtra)||void 0===e?void 0:e[1];null==o||o("")}}),[k]),s((()=>{var o,e,n,t;if(null!=Mo&&Mo>-1){const i={components:null===(e=null===(o=k.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[Mo].components,mapping:null===(t=null===(n=null==k?void 0:k.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Mo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=b(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Mo&&-1===Mo){const{descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=b(k);So({descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Mo]),s((()=>{var o,e,n,t;if(null!=Mo&&Mo>-1&&Yo){const i={components:null===(e=null===(o=k.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[Mo].components,mapping:null===(t=null===(n=null==k?void 0:k.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Mo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=b(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),Ko(!1)}}),[Yo]);const oe=yo?_o.imageComponent:wo;return Wo.openEditMedia?o(V,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(O,{mediaComponentFormat:null!==(A=oe.format)&&void 0!==A?A:u.IMAGE,uploadMedia:Wo.uploadMedia,variableListForImage:w||[],useEditWhatsappTemplateMediaResponse:Wo,setOpenEditMedia:Wo.setOpenEditMedia,openEditMedia:Wo.openEditMedia,editIconRef:Wo.editIconRef,fileRef:Ho})})):e(V,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:ko?"420px":"auto"}},{children:[!!_o.imageComponent&&!ko&&e(T,{children:[o(C,{imageName:null!==(_=null===(D=null==oe?void 0:oe.example)||void 0===D?void 0:D.header_handle)&&void 0!==_?_:[],handleImageChange:Wo.handleImageChange,mediaType:null==oe?void 0:oe.format,error:Wo.error,isLoading:Wo.loading,setOpenEditMedia:Wo.setOpenEditMedia,selectedVariable:g(null!==(Q=null===(F=null===(S=null==oe?void 0:oe.example)||void 0===S?void 0:S.header_handle)||void 0===F?void 0:F[0])&&void 0!==Q?Q:"")?null===(W=null===(q=null==oe?void 0:oe.example)||void 0===q?void 0:q.header_handle)||void 0===W?void 0:W[0]:(null===(K=null===(Y=null==k?void 0:k.mapping)||void 0===Y?void 0:Y.header)||void 0===K?void 0:K[0])?null===(G=null===($=null==k?void 0:k.mapping)||void 0===$?void 0:$.header)||void 0===G?void 0:G[0]:Wo.selectedVariable}),(null==wo?void 0:wo.format)==u.DOCUMENT?o(I,{children:o(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:Xo||void 0,onBlur:()=>{if(!$o)return null==H||H(""),void zo("PDF name is Required");const o=f($o);null==H||H($o),zo(o?"Please enter a valid PDF name":void 0)},onChange:o=>{var e,n;console.log("name",o),zo(""),(null!==(e=null==o?void 0:o.actualValue)&&void 0!==e?e:"").startsWith("{{")&&(null!==(n=null==o?void 0:o.actualValue)&&void 0!==n?n:"").endsWith("}}")?Go($o+(null==o?void 0:o.actualValue)):Go(null==o?void 0:o.actualValue)},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!1,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=$o?$o:"",variableType:"string"},variablesList:w})}):o(n,{})]}),(null===(X=_o.bodyVariables)||void 0===X?void 0:X.length)>0&&o(B,{containerStyle:{paddingTop:_o.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(z=_o.descriptionComponents)||void 0===z?void 0:z.map(((e,n)=>o(E,{originalVariableList:null!=Mo&&Mo>-1?Vo.cards[Mo]:Vo,type:e.type,descriptionComponent:e.component,showVariableModal:U},n))),(null===(oo=null===(Z=null!=Mo&&Mo>-1?null===(J=Vo.cards[Mo])||void 0===J?void 0:J.buttons:null==Vo?void 0:Vo.buttons)||void 0===Z?void 0:Z.filter((o=>"URL"===o.type)))||void 0===oo?void 0:oo.length)>0&&o(B,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(to=null===(no=null!=Mo&&Mo>-1?null===(eo=Vo.cards[Mo])||void 0===eo?void 0:eo.buttons:null==Vo?void 0:Vo.buttons)||void 0===no?void 0:no.filter((o=>Eo===c.CHATBOT||"URL"===o.type)))||void 0===to?void 0:to.map(((e,n)=>{const t=e.buttonVariable===m;if("URL"===e.type)return o(M,{variableListIndex:n,disableEdit:t,CTAoptions:null==R?void 0:R.CTAoptions,button:e,currentVariableList:null!=Mo&&Mo>-1?Object.assign({},Vo.cards[Mo]):Object.assign({},Vo),updateSelectedURLTemplateBtn:Jo},`${n}_${Mo}`)})),Eo===c.CHATBOT&&(null===(lo=null===(io=Uo[0])||void 0===io?void 0:io.component)||void 0===lo?void 0:lo.buttons)&&(null===(ro=null===(so=null===(ao=Uo[0])||void 0===ao?void 0:ao.component)||void 0===so?void 0:so.buttons)||void 0===ro?void 0:ro.length)>0&&o(h,{backTrackMessage:null===(po=null==Bo?void 0:Bo.backTrackExtra)||void 0===po?void 0:po[0],setBackTrackMessage:null===(uo=null==Bo?void 0:Bo.backTrackExtra)||void 0===uo?void 0:uo[1]}),(null===(mo=null===(vo=null!=Mo&&Mo>-1?null===(co=Vo.cards[Mo])||void 0===co?void 0:co.buttons:null==Vo?void 0:Vo.buttons)||void 0===vo?void 0:vo.filter((o=>"QUICK_REPLY"===o.type)))||void 0===mo?void 0:mo.length)>0&&(Eo!==c.CHATBOT?o(B,{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"}):o(h,{backTrackMessage:null===(bo=null==Bo?void 0:Bo.backTrackExtra)||void 0===bo?void 0:bo[0],setBackTrackMessage:null===(go=null==Bo?void 0:Bo.backTrackExtra)||void 0===go?void 0:go[1]})),null===(jo=null===(ho=null!=Mo&&Mo>-1?null===(fo=Vo.cards[Mo])||void 0===fo?void 0:fo.buttons:null==Vo?void 0:Vo.buttons)||void 0===ho?void 0:ho.filter((o=>"QUICK_REPLY"===o.type)))||void 0===jo?void 0:jo.map(((e,n)=>{if("QUICK_REPLY"===e.type&&Eo!==c.CHATBOT)return o(M,{variableListIndex:n,QRBoptions:null==R?void 0:R.QRBoptions,button:e,currentVariableList:null!=Mo&&Mo>-1?Object.assign({},Vo.cards[Mo]):Object.assign({},Vo),updateSelectedQRBTemplateBtn:Zo},`${n}_${Mo}`)})),Eo===c.CHATBOT&&Ao&&o(j,{discountCode:null===(Oo=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Oo?void 0:Oo[0],setDiscountCode:null===(Co=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Co?void 0:Co[1]}),null===(xo=null!=Mo&&Mo>-1?null===(To=Vo.cards[Mo])||void 0===To?void 0:To.buttons:null==Vo?void 0:Vo.buttons)||void 0===xo?void 0:xo.map(((e,t)=>{var i,l,a,s,d;if("COPY_CODE"===e.type)return o(n,{children:Io?o("div",Object.assign({style:{marginBottom:20,borderRadius:4,padding:"8px 10px"}},{children:o(r,{state:"disabled",labelText:null!==(i=e.text)&&void 0!==i?i:"Copy Code",value:null!==(l=e.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})})):o(y,{index:t,variable:{variableName:null!==(a=e.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=e.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=e.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:e.type},t)})}))]}))},I=d.div`
1
+ import{jsx as o,jsxs as e,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{HEADER_TYPES as u}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as v}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as m}from"../utils/constants.js";import{getAllDataFromTemplateComponent as b}from"../utils/getDataFromTemplateComponent.js";import{isVariable as g}from"../utils/validateIsUrl.js";import{validateInputName as f}from"../utils/validateName.js";import{BackTrackComponent as h}from"./BackTrackComponent.js";import{DiscountCodeComponent as j}from"./DiscountCodeComponent.js";import O from"./EditMediaModal.js";import C from"./EditMediaV2.js";import{EditTemplateMediaContainer as T}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as x}from"./useEditWhtasappTemplateMedia.js";import y from"./VariableConnector.js";import{Container as V}from"./VariableConnectorsPanel.js";import E from"./VariableConnectorWhatsApp.js";import B from"./VariableEditorHeader.js";import M from"./WhatsAppTemplateCardButtonV2.js";const k=d=>{let{template:k,onTemplateChange:L,whatsappSpecificPickerMeta:R,showVariableModal:U,variableListForImage:w,setDiscountCode:N,fileName:A,setFileName:H}=d;var P,D,_,S,F,Q,q,W,Y,K,$,G,X,z,J,Z,oo,eo,no,to,io,lo,ao,so,ro,po,uo,co,vo,mo,bo,go,fo,ho,jo,Oo,Co,To,xo;const yo=k.isCarouselType,{originalVariableList:Vo,pod:Eo,extras:Bo,selectedCarouselIndex:Mo,isProductCarouselType:ko,disableCopyCode:Io}=v(),{descriptionComponents:Lo,urlBtns:Ro,qrbBtns:Uo,imageComponent:wo,bodyVariables:No,headerVariables:Ao}=b(k),Ho=l(null),[Po,Do]=a(!1),[_o,So]=a(-1===Mo?{descriptionComponents:Lo,urlBtns:Ro,qrbBtns:Uo,imageComponent:wo,bodyVariables:No,headerVariables:Ao}:{}),{uploadMediaLink:Fo,uploadMediaFiles:Qo,validateMimeType:qo}=R,Wo=x({uploadMediaLink:Fo,uploadMediaFiles:Qo,updateTemplateImageUrl:function(o,e){var n,t,l,a,s,d,r,p;let u;u=null!=Mo&&Mo>-1?{components:null===(t=null===(n=k.components[1])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Mo].components,mapping:null===(a=null===(l=null==k?void 0:k.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Mo]}:Object.assign({},k);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.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:e,example:{header_handle:[o]}}),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!=Mo&&Mo>-1){const o=i(k);o.components[1].cards[Mo].components=u.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[Mo]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},o)),Ko(!0)}else null==L||L(Object.assign({},u))},validateMimeType:qo,mediaComponent:yo?_o.imageComponent:wo,fileRef:Ho}),[Yo,Ko]=a(!1),[$o,Go]=a(A),[Xo,zo]=a();function Jo(o,e,n){var t,l,a,s,d,r,p,u,c,v;const m=null!=Mo&&Mo>-1?{components:null===(t=Object.assign({},k).components[1].cards)||void 0===t?void 0:t[Mo].components,mapping:null===(l=Object.assign({},k).mapping.cards)||void 0===l?void 0:l[Mo]}:Object.assign({},k),b=i(m),g="custom"===e&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue?o.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Mo&&Mo>-1&&ko){const e=Object.assign({},k).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,t,i;if("BUTTONS"===o.type){const l=null===(e=o.buttons)||void 0===e?void 0:e.filter((o=>"URL"===o.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=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},o),{buttons:s})}return o}))})))}):o})),t=null===(s=null===(a=Object.assign({},k).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((e=>{var n;return Object.assign(Object.assign({},e),{buttons:null===(n=null==e?void 0:e.buttons)||void 0===n?void 0:n.map((e=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=i(k);return l.components=e,l.mapping.cards=t,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===e&&"string"==typeof o,l=i?o:"string"!=typeof o&&o.defaultValue?o.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=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.buttons;v&&v.length>0&&(v[n]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(v=o.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Do(!0):(Do(!1),null==N||N(""))}if(null!=Mo&&Mo>-1){const o=i(k);o.components[1].cards[Mo].components=b.components,o.mapping.cards[Mo]=b.mapping,null==L||L(Object.assign({},o))}else null==L||L(b)}function Zo(o,e,n){var t,l,a,s,d,r,p;const u=null!=Mo&&Mo>-1?{components:null===(t=Object.assign({},k).components[1].cards)||void 0===t?void 0:t[Mo].components,mapping:null===(l=Object.assign({},k).mapping.cards)||void 0===l?void 0:l[Mo]}:Object.assign({},k);if(null!=Mo&&Mo>-1&&ko){const e=Object.assign({},k).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,i,l;if("BUTTONS"===e.type){const a=null===(t=null==e?void 0:e.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=null==e?void 0:e.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},e),{buttons:d})}return e}))})))}):e})),t=i(k);return t.components=e,void(null==L||L(Object.assign({},t)))}const c=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const e=null===(s=null===(a=null==u?void 0:u.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(e){let t=e[n];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[c])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),a=[...u.components];a[c]=l,u.components=a}}if(null!=Mo&&Mo>-1){const o=i(k);o.components[1].cards[Mo].components=u.components,null==L||L(Object.assign({},o))}else null==L||L(u)}s((()=>{var o,e;if(null===(o=k.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))Do(!0);else{Do(!1);const o=null===(e=null==Bo?void 0:Bo.discountCodeExtra)||void 0===e?void 0:e[1];null==o||o("")}}),[k]),s((()=>{var o,e,n,t;if(null!=Mo&&Mo>-1){const i={components:null===(e=null===(o=k.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[Mo].components,mapping:null===(t=null===(n=null==k?void 0:k.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Mo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=b(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Mo&&-1===Mo){const{descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=b(k);So({descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Mo]),s((()=>{var o,e,n,t;if(null!=Mo&&Mo>-1&&Yo){const i={components:null===(e=null===(o=k.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[Mo].components,mapping:null===(t=null===(n=null==k?void 0:k.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Mo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=b(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),Ko(!1)}}),[Yo]);const oe=yo?_o.imageComponent:wo;return Wo.openEditMedia?o(V,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(O,{mediaComponentFormat:null!==(P=oe.format)&&void 0!==P?P:u.IMAGE,uploadMedia:Wo.uploadMedia,variableListForImage:w||[],useEditWhatsappTemplateMediaResponse:Wo,setOpenEditMedia:Wo.setOpenEditMedia,openEditMedia:Wo.openEditMedia,editIconRef:Wo.editIconRef,fileRef:Ho})})):e(V,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:ko?"420px":"auto"}},{children:[!!_o.imageComponent&&!ko&&e(T,{children:[o(C,{imageName:null!==(_=null===(D=null==oe?void 0:oe.example)||void 0===D?void 0:D.header_handle)&&void 0!==_?_:[],handleImageChange:Wo.handleImageChange,mediaType:null==oe?void 0:oe.format,error:Wo.error,isLoading:Wo.loading,setOpenEditMedia:Wo.setOpenEditMedia,selectedVariable:g(null!==(Q=null===(F=null===(S=null==oe?void 0:oe.example)||void 0===S?void 0:S.header_handle)||void 0===F?void 0:F[0])&&void 0!==Q?Q:"")?null===(W=null===(q=null==oe?void 0:oe.example)||void 0===q?void 0:q.header_handle)||void 0===W?void 0:W[0]:(null===(K=null===(Y=null==k?void 0:k.mapping)||void 0===Y?void 0:Y.header)||void 0===K?void 0:K[0])?null===(G=null===($=null==k?void 0:k.mapping)||void 0===$?void 0:$.header)||void 0===G?void 0:G[0]:Wo.selectedVariable}),(null==wo?void 0:wo.format)==u.DOCUMENT?o(I,{children:o(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:Xo||void 0,onBlur:()=>{if(!$o)return null==H||H(""),void zo("PDF name is Required");const o=f($o);null==H||H($o),zo(o?"Please enter a valid PDF name":void 0)},onChange:o=>{var e,n;zo(""),(null!==(e=null==o?void 0:o.actualValue)&&void 0!==e?e:"").startsWith("{{")&&(null!==(n=null==o?void 0:o.actualValue)&&void 0!==n?n:"").endsWith("}}")?Go($o+(null==o?void 0:o.actualValue)):Go(null==o?void 0:o.actualValue)},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=$o?$o:"",variableType:"string"},variablesList:w,showAddButton:Eo===c.CHATBOT})}):o(n,{})]}),(null===(X=_o.bodyVariables)||void 0===X?void 0:X.length)>0&&o(B,{containerStyle:{paddingTop:_o.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(z=_o.descriptionComponents)||void 0===z?void 0:z.map(((e,n)=>o(E,{originalVariableList:null!=Mo&&Mo>-1?Vo.cards[Mo]:Vo,type:e.type,descriptionComponent:e.component,showVariableModal:U},n))),(null===(oo=null===(Z=null!=Mo&&Mo>-1?null===(J=Vo.cards[Mo])||void 0===J?void 0:J.buttons:null==Vo?void 0:Vo.buttons)||void 0===Z?void 0:Z.filter((o=>"URL"===o.type)))||void 0===oo?void 0:oo.length)>0&&o(B,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(to=null===(no=null!=Mo&&Mo>-1?null===(eo=Vo.cards[Mo])||void 0===eo?void 0:eo.buttons:null==Vo?void 0:Vo.buttons)||void 0===no?void 0:no.filter((o=>Eo===c.CHATBOT||"URL"===o.type)))||void 0===to?void 0:to.map(((e,n)=>{const t=e.buttonVariable===m;if("URL"===e.type)return o(M,{variableListIndex:n,disableEdit:t,CTAoptions:null==R?void 0:R.CTAoptions,button:e,currentVariableList:null!=Mo&&Mo>-1?Object.assign({},Vo.cards[Mo]):Object.assign({},Vo),updateSelectedURLTemplateBtn:Jo},`${n}_${Mo}`)})),Eo===c.CHATBOT&&(null===(lo=null===(io=Uo[0])||void 0===io?void 0:io.component)||void 0===lo?void 0:lo.buttons)&&(null===(ro=null===(so=null===(ao=Uo[0])||void 0===ao?void 0:ao.component)||void 0===so?void 0:so.buttons)||void 0===ro?void 0:ro.length)>0&&o(h,{backTrackMessage:null===(po=null==Bo?void 0:Bo.backTrackExtra)||void 0===po?void 0:po[0],setBackTrackMessage:null===(uo=null==Bo?void 0:Bo.backTrackExtra)||void 0===uo?void 0:uo[1]}),(null===(mo=null===(vo=null!=Mo&&Mo>-1?null===(co=Vo.cards[Mo])||void 0===co?void 0:co.buttons:null==Vo?void 0:Vo.buttons)||void 0===vo?void 0:vo.filter((o=>"QUICK_REPLY"===o.type)))||void 0===mo?void 0:mo.length)>0&&(Eo!==c.CHATBOT?o(B,{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"}):o(h,{backTrackMessage:null===(bo=null==Bo?void 0:Bo.backTrackExtra)||void 0===bo?void 0:bo[0],setBackTrackMessage:null===(go=null==Bo?void 0:Bo.backTrackExtra)||void 0===go?void 0:go[1]})),null===(jo=null===(ho=null!=Mo&&Mo>-1?null===(fo=Vo.cards[Mo])||void 0===fo?void 0:fo.buttons:null==Vo?void 0:Vo.buttons)||void 0===ho?void 0:ho.filter((o=>"QUICK_REPLY"===o.type)))||void 0===jo?void 0:jo.map(((e,n)=>{if("QUICK_REPLY"===e.type&&Eo!==c.CHATBOT)return o(M,{variableListIndex:n,QRBoptions:null==R?void 0:R.QRBoptions,button:e,currentVariableList:null!=Mo&&Mo>-1?Object.assign({},Vo.cards[Mo]):Object.assign({},Vo),updateSelectedQRBTemplateBtn:Zo},`${n}_${Mo}`)})),Eo===c.CHATBOT&&Po&&o(j,{discountCode:null===(Oo=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Oo?void 0:Oo[0],setDiscountCode:null===(Co=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Co?void 0:Co[1]}),null===(xo=null!=Mo&&Mo>-1?null===(To=Vo.cards[Mo])||void 0===To?void 0:To.buttons:null==Vo?void 0:Vo.buttons)||void 0===xo?void 0:xo.map(((e,t)=>{var i,l,a,s,d;if("COPY_CODE"===e.type)return o(n,{children:Io?o("div",Object.assign({style:{marginBottom:20,borderRadius:4,padding:"8px 10px"}},{children:o(r,{state:"disabled",labelText:null!==(i=e.text)&&void 0!==i?i:"Copy Code",value:null!==(l=e.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})})):o(y,{index:t,variable:{variableName:null!==(a=e.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=e.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=e.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:e.type},t)})}))]}))},I=d.div`
2
2
  padding-top: 24px;
3
3
  padding-left: 10px;
4
4
  padding-right: 10px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.612-beta-vsp.3",
3
+ "version": "0.0.612-beta-vsp.4",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",