@bikdotai/bik-component-library 0.0.533-beta.2 → 0.0.533-beta.4

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

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

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

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),s=require("../../button/Button.js"),o=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),l=require("../Badge/index.js"),n=require("../context/templateModalContext.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=i(r).default.div`
-	background: ${a.COLORS.surface.standard};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("../../button/Button.js"),n=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),s=require("../Badge/index.js"),i=require("../context/templateModalContext.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(r).default.div`
+	background: ${l.COLORS.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${a.COLORS.stroke.primary};
+	border-top-color: ${l.COLORS.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 16px 24px;
 	display: flex;
-	justify-content: ${e=>e.isWhatsappCarousel?"space-between":"end"};
+	justify-content: ${e=>{var t;return null!==(t=e.justifyContent)&&void 0!==t?t:"end"}};
 	align-items: center;
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`;exports.default=r=>{let{isWhatsappCarousel:i,onSelect:d}=r;const{isError:c,selectedCarouselIndex:p,setSelectedCarouselIndex:x,setErrorIndexes:b}=n.useTemplateModalContext(),[j,f]=t.useState(i?"Next":"Select template");return t.useEffect((()=>{i&&-1===p?f("Next"):i&&null!=p&&p>-1&&f("Save & Select Template")}),[p]),e.jsxs(u,Object.assign({isWhatsappCarousel:i},{children:[i&&null!=p&&p>=-1&&e.jsx(o.TitleRegular,Object.assign({color:a.COLORS.text.secondary},{children:`Step ${-1===p?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[c&&e.jsx(l.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(s.Button,{id:"select-template-btn",buttonText:j,size:i?"small":"large",onClick:function(){i&&-1===p&&x?x(0):(null==b||b([]),d())}})]}))]}))};
+`;exports.default=r=>{let{isWhatsappCarousel:a,onSelect:u}=r;var c,p,x,b;const{isError:g,selectedCarouselIndex:j,setSelectedCarouselIndex:f,setErrorIndexes:m,template:v}=i.useTemplateModalContext(),[y,h]=t.useState(a?"Next":"Select template");return t.useEffect((()=>{a&&-1===j?h("Next"):a&&null!=j&&j>-1&&h("Save & Select Template")}),[j]),e.jsxs(d,Object.assign({justifyContent:a&&(null===(p=null===(c=null==v?void 0:v.mapping)||void 0===c?void 0:c.body)||void 0===p?void 0:p.length)?"space-between":"end"},{children:[a&&null!=j&&j>=-1&&(null===(b=null===(x=null==v?void 0:v.mapping)||void 0===x?void 0:x.body)||void 0===b?void 0:b.length)&&e.jsx(n.TitleRegular,Object.assign({color:l.COLORS.text.secondary},{children:`Step ${-1===j?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&e.jsx(s.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:y,size:a?"small":"large",onClick:function(){a&&-1===j&&f?f(0):(null==m||m([]),u())}})]}))]}))};

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=o(t),n=o(i);const d=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=o(t),n=o(i);const c=n.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,c=n.default.div`
+`,d=n.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,9 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=p.default.forwardRef(((t,i)=>{let{display_content:o,channel:p,template:n,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:v}=s.useTemplateModalContext(),w={showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return v?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},w))}):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l.getPreviewWidth(p),height:443}}),e.jsx(c,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},w))}))]}))})}));h.displayName="MobilePreview";const m=n.default.div`
+`,h=p.default.forwardRef(((t,i)=>{let{display_content:o,channel:p,template:n,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:v}=s.useTemplateModalContext(),w={showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return v?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},w))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l.getPreviewWidth(p),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},w))}))]}))})}));h.displayName="MobilePreview";const m=n.default.div`
 	display: flex;
 	align-items: center;
+	justify-content: center;
+	flex: 1;
 `;exports.default=h;

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../custom-date-time/CustomDateTime.js"),o=require("../../dropdown/Dropdown.js"),u=require("../../input/Input.js"),d=require("../../product-picker-v2/collectionScreen.js"),c=require("../../template-preview/constants/regexPatterns.js"),r=require("../../template-preview/models/Channels.js"),p=require("../../template-preview/models/WhatsAppTemplate.js"),m=require("../../TypographyStyle.js"),v=require("../../../utils/StringUtils.js"),b=require("../../../constants/Theme.js"),g=require("../context/templateModalContext.js"),O=require("../custom-hooks/useAdditionalVariables.js"),j=require("../utils/getVariableNameEmail.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=x(n);const _=y.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../custom-date-time/CustomDateTime.js"),o=require("../../dropdown/Dropdown.js"),u=require("../../input/Input.js"),d=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),c=require("../../template-preview/models/Channels.js"),p=require("../../template-preview/models/WhatsAppTemplate.js"),m=require("../../TypographyStyle.js"),v=require("../../../utils/StringUtils.js"),b=require("../../../constants/Theme.js"),g=require("../context/templateModalContext.js"),O=require("../custom-hooks/useAdditionalVariables.js"),j=require("../utils/getVariableNameEmail.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=x(n);const _=y.default.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===r.CHANNEL_TYPE.EMAIL?b.COLORS.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===c.CHANNEL_TYPE.EMAIL?b.COLORS.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
 `,h=y.default.div`
@@ -13,4 +13,4 @@
 	background-color: rgba(0, 0, 0, 0.1);
 	z-index: 1000;
 	cursor: not-allowed;
-`,f={value:"custom_link",label:"Custom URL"},T={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"};exports.Container=_,exports.default=n=>{let{onFocus:x,variable:y,index:N,showVariableModal:C,setShowDiscountCheckBox:P,componentType:A,CTAoptions:V,buttonType:S}=n;var k,L,D,B,H;const[w,Y]=i.useState(!1),[U,R]=i.useState(""),[q,M]=i.useState([]),[I,W]=i.useState(),[$,z]=i.useState(!1),{variableList:Z,setVariableList:F,setVariableCallback:G,setShowVariablePicker:K,device:J,channel:Q,isError:X,originalVariableList:ee,template:te,templateSelectionTriggered:le,setTemplate:ae,setDisplayContent:ie,setOriginalVariableList:ne,globalNormalizedPlaceholders:se,enabledCustomText:oe,pod:ue,selectedCarouselIndex:de,isProductCarouselType:ce,disableEditVariable:re,disableEditExpiry:pe,templateErrorIndexes:me}=g.useTemplateModalContext();function ve(e,t){var l,a,i;const n=e;R(""),W(n),Q===r.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ge(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Oe||Oe(null!==(a=y.index)&&void 0!==a?a:0,n.value,!0)):(null==Oe||Oe(null!==(i=y.index)&&void 0!==i?i:0,"",!0,n.value),ge("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ge(n.value,"url"===n.bikPlaceholderType?"link":"string"):(R(""),ge("",n.value))}function be(e,t){var l;R(t);const a="custom_link"===(null==I?void 0:I.value)&&t?t.includes("https")?t:`https://${t}`:t;ge(a,"static_expiry"===e?"string":e),Q===r.CHANNEL_TYPE.WHATSAPP&&(null==Oe||Oe(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ge(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Q!==r.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(N+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===J?"template_html_mobile":"template_html_desktop"),n=Q===r.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const s=ee.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ne||ne(s)}if(Q===r.CHANNEL_TYPE.WHATSAPP){if(null!=de&&de>-1&&ce){const l=Object.assign({},ee).cards.map(((l,a)=>{var i,n;return"BODY"===A?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))}):"BUTTONS"===A?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ne||ne((e=>Object.assign(Object.assign({},e),{cards:l}))))}const l=null!=de&&de>-1?ee.cards[de]:ee;let u=l.body,d=l.header,c=l.buttons;if("BODY"===A?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===A?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===A&&(c=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=de&&de>-1){const e=a.cloneDeep(ee.cards);e[de]={header:d,body:u,buttons:c},null==ne||ne((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ne||ne((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:c})))}}function Oe(e,t,l,i){var n,s,o,u,d,c,r;if(null!=de&&de>-1&&ce){const s=Object.assign({},te).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(te);if(l){const l=null===(n=Object.assign({},te).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===A)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===A&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=te.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==ae||ae(o))}const p=null!=de&&de>-1?{components:null===(s=Object.assign({},te).components[1].cards)||void 0===s?void 0:s[de].components,mapping:null===(o=Object.assign({},te).mapping.cards)||void 0===o?void 0:o[de]}:Object.assign({},te),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,c,r;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===A){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(c=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(r=l.buttons)||void 0===r?void 0:r.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===A)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===A&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===A&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===A&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=de&&de>-1&&te){const e=a.cloneDeep(te);e.components[1].cards[de].components=p.components,e.mapping.cards[de]=p.mapping,null==ae||ae(e)}else null==ae||ae(Object.assign({},p))}i.useEffect((()=>{w&&(null==x||x())}),[w]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===J?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);Q===r.CHANNEL_TYPE.EMAIL&&(null==ie||ie(o))}()}),[le]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(Q!==r.CHANNEL_TYPE.MESSAGE||oe){"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[f,T]}),W(f)):"date_time"===(null==y?void 0:y.type)?(l.push({label:"",options:[f,T]}),W(E)):(l.push({label:"",options:[f,T,E]}),W(T));const e=null!=se?se:[];M([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=se?se:[];M([{label:"",options:[T,f]},...e]),a=[{label:"",options:[T,f]},...e]}if((Q===r.CHANNEL_TYPE.WHATSAPP||Q===r.CHANNEL_TYPE.EMAIL||Q===r.CHANNEL_TYPE.MESSAGE)&&y.updatedValue)if(c.placeHolderNamePattern.test(y.updatedValue)&&Q===r.CHANNEL_TYPE.WHATSAPP||y.updatedValue.startsWith("{{")&&Q!==r.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===r.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ue===p.POD.CHATBOT&&"BUTTONS"===A){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(y,a,Q);e.value&&W(e)}else"date_time"===y.type?(W(E),R(y.updatedValue),Oe(null!==(e=y.index)&&void 0!==e?e:0,y.updatedValue)):(null===(t=y.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(W(f),R(y.updatedValue.split("https://")[1])):(W(T),R(y.updatedValue))}()}),[de]),i.useEffect((()=>{J&&I&&U&&setTimeout((()=>{ge("custom_link"===(null==I?void 0:I.value)&&U?U.includes("https")?U:`https://${U}`:U,I.value)}),100)}),[J]),i.useEffect((()=>{!$&&I&&y.updatedValue&&setTimeout((()=>{ge("custom_link"===(null==I?void 0:I.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,I.value),z(!0)}),100)}),[I]);const je=e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"static_expiry"}):ve({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e.jsxs(_,Object.assign({channel:Q,focused:w,onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:X&&!I?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(k=y.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==I?void 0:I.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,Object.assign({numberOfLines:1},{children:ue===p.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(L=null==I?void 0:I.value)&&void 0!==L?L:"")?null==I?void 0:I.label:null==I?void 0:I.value:d.truncate(null!==(D=null==I?void 0:I.label)&&void 0!==D?D:"",20,!0)})),re||"date_time"===(null==y?void 0:y.type)&&pe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{console.log("click"),(()=>{if(S===p.BUTTON_TYPE.URL&&ue===p.POD.CHATBOT){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});F(e)}else if("limited_time_offer"===A){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});F(e)}else if(S===p.BUTTON_TYPE.COPY_CODE){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});F(e)}})(),G((()=>je)),K(!0)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:re,options:q,isSearchable:!1,onSelect:ve,defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),("custom_text"===(null==I?void 0:I.value)||"custom_link"===(null==I?void 0:I.value))&&e.jsx(u.Input,{state:re?"disabled":"none",labelText:"custom_text"===(null==I?void 0:I.value)?"Custom text value":"custom_link"===(null==I?void 0:I.value)?"Custom URL value":"",id:`variable-value-${null==I?void 0:I.value}-${N}`,value:U,errorMessage:X&&(null===(B=null==me?void 0:me.buttons)||void 0===B?void 0:B.includes(null!==(H=null==y?void 0:y.index)&&void 0!==H?H:-1))?U&&0!==U.trim().length?"custom_link"!==I.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${U.trim()}`)&&0!==U.trim().length?"custom_link"!==I.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===A&&"custom_link"!==I.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==I?void 0:I.value)?2e3:"BUTTONS"===A?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===I.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{be(I.value,e)}}),"static_expiry"===(null==I?void 0:I.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[re&&e.jsx(h,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:U?l.format(new Date(U),"hh:mm a"):l.format(new Date,"hh:mm a"),date:U?new Date(U):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{be("static_expiry",e.toISOString())}})]}))]}))};
+`,f={value:"custom_link",label:"Custom URL"},T={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"};exports.Container=_,exports.default=n=>{let{onFocus:x,variable:y,index:N,showVariableModal:C,setShowDiscountCheckBox:P,componentType:A,CTAoptions:V,buttonType:S}=n;var L,k,D,B,H;const[w,Y]=i.useState(!1),[U,R]=i.useState(""),[q,M]=i.useState([]),[I,W]=i.useState(),[$,z]=i.useState(!1),{variableList:Z,setVariableList:F,setVariableCallback:G,setShowVariablePicker:K,device:J,channel:Q,isError:X,originalVariableList:ee,template:te,templateSelectionTriggered:le,setTemplate:ae,setDisplayContent:ie,setOriginalVariableList:ne,globalNormalizedPlaceholders:se,enabledCustomText:oe,pod:ue,selectedCarouselIndex:de,isProductCarouselType:re,disableEditVariable:ce,disableEditExpiry:pe,templateErrorIndexes:me}=g.useTemplateModalContext();function ve(e,t){var l,a,i;const n=e;R(""),W(n),Q===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ge(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Oe||Oe(null!==(a=y.index)&&void 0!==a?a:0,n.value,!0)):(null==Oe||Oe(null!==(i=y.index)&&void 0!==i?i:0,"",!0,n.value),ge("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ge(n.value,"url"===n.bikPlaceholderType?"link":"string"):(R(""),ge("",n.value))}function be(e,t){var l;R(t);const a="custom_link"===(null==I?void 0:I.value)&&t?t.includes("https")?t:`https://${t}`:t;ge(a,"static_expiry"===e?"string":e),Q===c.CHANNEL_TYPE.WHATSAPP&&(null==Oe||Oe(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ge(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Q!==c.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(N+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===J?"template_html_mobile":"template_html_desktop"),n=Q===c.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const s=ee.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ne||ne(s)}if(Q===c.CHANNEL_TYPE.WHATSAPP){if(null!=de&&de>-1&&re){const l=Object.assign({},ee).cards.map(((l,a)=>{var i,n;return"BODY"===A?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))}):"BUTTONS"===A?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ne||ne((e=>Object.assign(Object.assign({},e),{cards:l}))))}const l=null!=de&&de>-1?ee.cards[de]:ee;let u=l.body,d=l.header,r=l.buttons;if("BODY"===A?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===A?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===A&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=de&&de>-1){const e=a.cloneDeep(ee.cards);e[de]={header:d,body:u,buttons:r},null==ne||ne((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ne||ne((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function Oe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=de&&de>-1&&re){const s=Object.assign({},te).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(te);if(l){const l=null===(n=Object.assign({},te).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===A)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===A&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=te.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==ae||ae(o))}const p=null!=de&&de>-1?{components:null===(s=Object.assign({},te).components[1].cards)||void 0===s?void 0:s[de].components,mapping:null===(o=Object.assign({},te).mapping.cards)||void 0===o?void 0:o[de]}:Object.assign({},te),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===A){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===A){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===A){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===A)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===A&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===A&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===A&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=de&&de>-1&&te){const e=a.cloneDeep(te);e.components[1].cards[de].components=p.components,e.mapping.cards[de]=p.mapping,null==ae||ae(e)}else null==ae||ae(Object.assign({},p))}i.useEffect((()=>{w&&(null==x||x())}),[w]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===J?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);Q===c.CHANNEL_TYPE.EMAIL&&(null==ie||ie(o))}()}),[le]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(Q!==c.CHANNEL_TYPE.MESSAGE||oe){"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[f,T]}),W(f)):"date_time"===(null==y?void 0:y.type)?(l.push({label:"",options:[f,T]}),W(E)):(l.push({label:"",options:[f,T,E]}),W(T));const e=null!=se?se:[];M([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=se?se:[];M([{label:"",options:[T,f]},...e]),a=[{label:"",options:[T,f]},...e]}if((Q===c.CHANNEL_TYPE.WHATSAPP||Q===c.CHANNEL_TYPE.EMAIL||Q===c.CHANNEL_TYPE.MESSAGE)&&y.updatedValue)if(r.placeHolderNamePattern.test(y.updatedValue)&&Q===c.CHANNEL_TYPE.WHATSAPP||y.updatedValue.startsWith("{{")&&Q!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ue===p.POD.CHATBOT&&"BUTTONS"===A){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(y,a,Q);e.value&&W(e)}else"date_time"===y.type?(W(E),R(y.updatedValue),Oe(null!==(e=y.index)&&void 0!==e?e:0,y.updatedValue)):(null===(t=y.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(W(f),R(y.updatedValue.split("https://")[1])):(W(T),R(y.updatedValue))}()}),[de]),i.useEffect((()=>{J&&I&&U&&setTimeout((()=>{ge("custom_link"===(null==I?void 0:I.value)&&U?U.includes("https")?U:`https://${U}`:U,I.value)}),100)}),[J]),i.useEffect((()=>{!$&&I&&y.updatedValue&&setTimeout((()=>{ge("custom_link"===(null==I?void 0:I.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,I.value),z(!0)}),100)}),[I]);const je=e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"static_expiry"}):ve({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};return e.jsxs(_,Object.assign({channel:Q,focused:w,onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:X&&!I?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(L=y.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==I?void 0:I.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,Object.assign({numberOfLines:1},{children:ue===p.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(k=null==I?void 0:I.value)&&void 0!==k?k:"")?null==I?void 0:I.label:null==I?void 0:I.value:d.truncate(null!==(D=null==I?void 0:I.label)&&void 0!==D?D:"",20,!0)})),ce||"date_time"===(null==y?void 0:y.type)&&pe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(S===p.BUTTON_TYPE.URL&&ue===p.POD.CHATBOT){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});F(e)}else if("limited_time_offer"===A){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});F(e)}else if(S===p.BUTTON_TYPE.COPY_CODE){const e=O.updateVariables({variableList:Z,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});F(e)}})(),G((()=>je)),K(!0)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:ce,options:q,isSearchable:!1,onSelect:ve,defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),("custom_text"===(null==I?void 0:I.value)||"custom_link"===(null==I?void 0:I.value))&&e.jsx(u.Input,{state:ce?"disabled":"none",labelText:"custom_text"===(null==I?void 0:I.value)?"Custom text value":"custom_link"===(null==I?void 0:I.value)?"Custom URL value":"",id:`variable-value-${null==I?void 0:I.value}-${N}`,value:U,errorMessage:X&&(null===(B=null==me?void 0:me.buttons)||void 0===B?void 0:B.includes(null!==(H=null==y?void 0:y.index)&&void 0!==H?H:-1))?U&&0!==U.trim().length?"custom_link"!==I.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${U.trim()}`)&&0!==U.trim().length?"custom_link"!==I.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===A&&"custom_link"!==I.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==I?void 0:I.value)?2e3:"BUTTONS"===A?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==I?void 0:I.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===I.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{be(I.value,e)}}),"static_expiry"===(null==I?void 0:I.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[ce&&e.jsx(h,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:U?l.format(new Date(U),"hh:mm a"):l.format(new Date,"hh:mm a"),date:U?new Date(U):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{be("static_expiry",e.toISOString())}})]}))]}))};

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

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

package/dist/cjs/components/template-context-mapper/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const BACKGROUND_PREVIEW_IMAGE = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f";

package/dist/cjs/components/template-context-mapper/utils/constants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.BACKGROUND_PREVIEW_IMAGE="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f";

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js

@@ -1,24 +1,24 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const d=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-components"),e=require("../../constants/Theme.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=t(r);const d=o.default.div`
 	padding: 16px;
 	padding-bottom: 12px;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-	border: 1px solid ${r.COLORS.stroke.primary};
+	border: 1px solid ${e.COLORS.stroke.primary};
 `,i=o.default.div`
 	width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-left: 1px solid ${r.COLORS.stroke.primary};
-	border-right: 1px solid ${r.COLORS.stroke.primary};
-	border-top-color: ${r.COLORS.stroke.primary};
-	border-top-width: ${e=>e.hideHeader?"1px":"0px"};
+	border-left: 1px solid ${e.COLORS.stroke.primary};
+	border-right: 1px solid ${e.COLORS.stroke.primary};
+	border-top-color: ${e.COLORS.stroke.primary};
+	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
 	overflow: scroll;
 `,a=o.default.div`
 	width: 100%;
 	height: 100%;
-	background-color: ${r.BASE_COLORS.grayscale[100]};
-`,n=o.default.div`
+	background-color: ${e.BASE_COLORS.grayscale[100]};
+`,s=o.default.div`
 	height: 100%;
 	display: flex;
 	flex-direction: column;
@@ -26,18 +26,20 @@
 	justify-content: center;
 	flex-grow: 1;
 	min-height: 180px;
-`,s=o.default.div`
+	border-left: 1px solid ${e.COLORS.stroke.primary};
+	border-right: 1px solid ${e.COLORS.stroke.primary};
+`,n=o.default.div`
 	display: flex;
 	justify-content: center;
 	width: 100%;
-	background: ${r.COLORS.surface.standard};
+	background: ${e.COLORS.surface.standard};
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-	border: 1px solid ${r.COLORS.stroke.primary};
+	border: 1px solid ${e.COLORS.stroke.primary};
 `,l=o.default.div`
 	border-radius: 4px;
-	background-color: ${r.COLORS.surface.standard};
-	margin-top: ${e=>e.hideHeader?0:16};
+	background-color: ${e.COLORS.surface.standard};
+	margin-top: ${r=>r.hideHeader?0:16};
 	display: flex;
 	flex-direction: column;
-`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=n,exports.ImageContainer=i,exports.ViewButton=s;
+`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=s,exports.ImageContainer=i,exports.ViewButton=n;

package/dist/cjs/components/template-preview/SmsTemplatePreview.d.ts

@@ -8,5 +8,6 @@ declare const SmsTemplatePreview: React.FC<{
     onlyTemplateContent?: boolean;
     display_content?: string;
     size?: 'small' | 'large';
+    uniqueId?: string;
 }>;
 export default SmsTemplatePreview;

package/dist/cjs/components/template-preview/SmsTemplatePreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/arrow_left.svg.js"),t=require("../../assets/icons/more_vertical.svg.js"),s=require("../../assets/icons/search.svg.js"),l=require("../../constants/Theme.js"),i=require("../template-context-mapper/context/templateModalContext.js"),n=require("../TypographyStyle.js"),a=require("./helpers/SmsTemplateHelper.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=c=>{let{template:u,variableStore:j,hideHeader:h,display_content:x,onlyTemplateContent:p,size:g}=c;var v;const S=null==u?void 0:u.content,{hideDeviceContainerInPreview:m}=i.useTemplateModalContext();return m?e.jsx(d.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(o.default,{size:null!=g?g:"large",content:null!=x?x:a.renderVariableUIForPreview(S,null!=j?j:[])})})):e.jsxs(e.Fragment,{children:[!h&&!p&&e.jsx(d.SMSCardHeader,{children:e.jsx(n.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:u.name}))}),!p&&e.jsx(d.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(r.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(n.Caption,{children:null===(v=null==u?void 0:u.headers)||void 0===v?void 0:v[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(t.default,{width:16,height:16,color:l.COLORS.content.secondary})]}))]})}),e.jsx(d.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(o.default,{size:null!=g?g:"large",content:null!=x?x:a.renderVariableUIForPreview(S,null!=j?j:[])})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/arrow_left.svg.js"),t=require("../../assets/icons/more_vertical.svg.js"),s=require("../../assets/icons/search.svg.js"),l=require("../../constants/Theme.js"),i=require("../template-context-mapper/context/templateModalContext.js"),n=require("../TypographyStyle.js"),a=require("./helpers/SmsTemplateHelper.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=c=>{let{template:u,variableStore:j,hideHeader:h,display_content:x,onlyTemplateContent:p,size:v,uniqueId:g}=c;var S;const m=null==u?void 0:u.content,{hideDeviceContainerInPreview:b}=i.useTemplateModalContext();return b?e.jsx(d.SMSBubbleContainer,Object.assign({size:v},{children:e.jsx(o.default,{size:null!=v?v:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=j?j:[],void 0,null!=g?g:"")})})):e.jsxs(e.Fragment,{children:[!h&&!p&&e.jsx(d.SMSCardHeader,{children:e.jsx(n.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:u.name}))}),!p&&e.jsx(d.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(r.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(n.Caption,{children:null===(S=null==u?void 0:u.headers)||void 0===S?void 0:S[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(t.default,{width:16,height:16,color:l.COLORS.content.secondary})]}))]})}),e.jsx(d.SMSBubbleContainer,Object.assign({size:v},{children:e.jsx(o.default,{size:null!=v?v:"large",content:null!=x?x:a.renderVariableUIForPreview(m,null!=j?j:[],void 0,null!=g?g:"")})}))]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),s=require("./models/Channels.js"),r=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=p=>{let{template:u,channel:m,whatsAppSpecificMeta:c,templateCreationsInfo:v,hideHeader:h,size:C,onlyTemplateContent:j,emailSpecificMeta:S,smsSpecificMeta:x,showSampleValues:T,carouselCardIndex:b,isWhatsappCarousel:g,isPreview:y}=p;var w,O;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return m===s.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${a.COLORS.stroke.primary}`:"none",borderRadius:4},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(r.default,{template:u,hideHeader:h,onlyTemplateContent:j,size:null!=C?C:"large",variableStore:null==x?void 0:x.smsVariableStore,display_content:null==x?void 0:x.smsDisplayContent})})):m===s.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(n.default,{template:u,handleViewTemplate:()=>{var e;null===(e=null==S?void 0:S.handleViewTemplate)||void 0===e||e.call(S)},hideHeader:h,hideViewButton:null==S?void 0:S.hideViewButtonForEmail,containerStyle:null==S?void 0:S.containerStyle,emailDisplayContent:null==S?void 0:S.emailDisplayContent,emailHtmlContainerId:null==S?void 0:S.emailHtmlContainerId})})):m===s.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{P&&g&&P(null!=b?b:-1)}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(w=null==u?void 0:u.label)&&void 0!==w?w:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:T,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=C?C:"large",containerStyle:Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(O=null==c?void 0:c.containerStyle)&&void 0!==O?O:{}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:b,isWhatsappCarousel:g,isPreview:y})]})):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),s=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=u=>{let{template:p,channel:m,whatsAppSpecificMeta:c,templateCreationsInfo:v,hideHeader:h,size:j,onlyTemplateContent:C,emailSpecificMeta:g,smsSpecificMeta:S,showSampleValues:b,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T}=u;var O,w;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return m===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${a.COLORS.stroke.primary}`:"none",borderRadius:4},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(s.default,{template:p,hideHeader:h,onlyTemplateContent:C,size:null!=j?j:"large",variableStore:null==S?void 0:S.smsVariableStore,display_content:null==S?void 0:S.smsDisplayContent,uniqueId:null==S?void 0:S.uniqueId})})):m===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==g?void 0:g.templateContainerStyles)},{children:e.jsx(n.default,{template:p,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:h,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):m===r.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(P&&y){if(-1===x&&!(null===(l=null===(e=null==p?void 0:p.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length))return;P(null!=x?x:-1)}}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(O=null==p?void 0:p.label)&&void 0!==O?O:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:b,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:p,size:v?"small":null!=j?j:"large",containerStyle:Object.assign(Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(w=null==c?void 0:c.containerStyle)&&void 0!==w?w:{}),{height:"100%"}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T})]})):e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js

@@ -4,4 +4,4 @@
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`;exports.default=a=>{const{bodyText:j,footerText:m,headerMediaType:y,headerText:S,headerAssetLink:g,headerAssetName:f,quickReplybtn:v,ctaBtn:q,actionTypes:E,textType:b,extras:w,showHeader:C,imagePreviewStyles:A,size:N,children:O,isPreview:F}=a,M=new l.WhatsAppFormatToHTML,P=i.useMemo((()=>({color:d.COLORS.content.primary,margin:12,fontSize:C?d.FONTS.caption.fontSize:d.FONTS.bodySecondary.fontSize,fontWeight:d.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(p.Container,Object.assign({isPreview:F},{children:[e.jsx(u,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===c.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:S}):y!==c.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:g,headerAssetName:f,mediaType:y,imagePreviewStyles:y===c.HEADER_TYPES.IMAGE?A:{}}):e.jsx(e.Fragment,{}),!!j&&e.jsx(e.Fragment,{children:O?e.jsx(e.Fragment,{children:O}):e.jsx(e.Fragment,{children:"html"===b?e.jsx("div",{className:"richTextEditor",style:P,dangerouslySetInnerHTML:{__html:M.convertToHTML(j)}}):e.jsx(n.BodySecondary,{children:j})})}),e.jsxs(p.FooterWrapper,{children:[e.jsx(o.Tooltip,Object.assign({body:null!=m?m:"",placement:"top"},{children:e.jsx(p.TimeStamp,Object.assign({style:{flex:1}},{children:m}))})),e.jsx(p.TimeStamp,{children:"16:48"})]}),E===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):E===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==q?void 0:q.map(((t,i)=>e.jsx(h.ChatBtn,{textTypography:C?n.Caption:n.BodySecondary,extraContent:w?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:N},i)))}):e.jsx(e.Fragment,{})]}))};
+`;exports.default=a=>{const{bodyText:j,footerText:m,headerMediaType:y,headerText:g,headerAssetLink:S,headerAssetName:f,quickReplybtn:v,ctaBtn:q,actionTypes:E,textType:b,extras:w,showHeader:C,imagePreviewStyles:A,size:N,children:F,isPreview:O}=a,M=new l.WhatsAppFormatToHTML,P=i.useMemo((()=>({color:d.COLORS.content.primary,margin:12,fontSize:C?d.FONTS.caption.fontSize:d.FONTS.bodySecondary.fontSize,fontWeight:d.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(p.Container,Object.assign({isPreview:O},{children:[e.jsx(u,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===c.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:g}):y!==c.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:S,headerAssetName:f,mediaType:y,imagePreviewStyles:y===c.HEADER_TYPES.IMAGE?A:{}}):e.jsx(e.Fragment,{}),!!j&&e.jsx(e.Fragment,{children:F?e.jsx(e.Fragment,{children:F}):e.jsx(e.Fragment,{children:"html"===b?e.jsx("div",{className:"richTextEditor",style:P,dangerouslySetInnerHTML:{__html:M.convertToHTML(j)}}):e.jsx(n.BodySecondary,{children:j})})}),e.jsxs(p.FooterWrapper,{children:[e.jsx(o.Tooltip,Object.assign({body:null!=m?m:"",placement:"top"},{children:e.jsx(p.FooterText,Object.assign({style:{flex:1}},{children:m}))})),e.jsx(p.TimeStamp,{children:"16:48"})]}),E===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):E===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==q?void 0:q.map(((t,i)=>e.jsx(h.ChatBtn,{textTypography:C?n.Caption:n.BodySecondary,extraContent:w?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:N},i)))}):e.jsx(e.Fragment,{})]}))};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.d.ts

@@ -1,6 +1,7 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     isCarouselCard?: boolean | undefined;
     showBorder?: boolean | undefined;
+    showDashedBorder?: boolean | undefined;
     isWhatsappCarousel?: boolean | undefined;
     hasError?: boolean | undefined;
     isPreview?: boolean | undefined;
@@ -9,6 +10,10 @@ export declare const TimeStamp: import("styled-components").StyledComponent<"div
     numberOfLines?: number | undefined;
     color?: string | undefined;
 }, never>;
+export declare const FooterText: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
 export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -1,6 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const d=i.default.div`
 	background: ${r.COLORS.surface.standard};
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
 	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
@@ -8,20 +7,27 @@
 	position: relative;
 	padding: 8px 0px;
 	border: 2px solid
-		${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.text.white}`};
+		${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.stroke.primary}`};
+	border: ${e=>e.showDashedBorder&&`2px dashed ${r.COLORS.content.brand}`};
+	height: 100%;
+	display: flex;
+	flex-direction: column;
 	:hover {
 		border: 2px
 			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
 			${r.COLORS.stroke.brand};
+		box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
 	}
-`,d=i.default(t.Caption)`
+`,a=i.default(t.Caption)`
 	color: ${r.COLORS.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,s=i.default.div`
+`,s=i.default(a)`
+	max-width: 200px;
+`,n=i.default.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -30,14 +36,14 @@
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,n=i.default.div`
+`,p=i.default.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${r.COLORS.stroke.primary};
-`,p=i.default.div`
+`,x=i.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -60,4 +66,4 @@
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterWrapper=p,exports.MediaContainer=s,exports.TimeStamp=d;
+`,exports.ChatBtnContainer=p,exports.Container=d,exports.FooterText=s,exports.FooterWrapper=x,exports.MediaContainer=n,exports.TimeStamp=a;

package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),i=require("../../../assets/icons/qrb.svg.js"),a=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),l=require("../../tooltips/Tooltip.js"),d=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),u=require("../helpers/VariableEditorHelper.js"),x=require("../models/TemplateMeta.js"),c=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),m=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),j=require("./MediaCard.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=T(o);const y=f.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),i=require("../../../assets/icons/qrb.svg.js"),a=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("styled-components"),l=require("../../template-context-mapper/context/templateModalContext.js"),n=require("../../tooltips/Tooltip.js"),d=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),u=require("../helpers/VariableEditorHelper.js"),x=require("../models/TemplateMeta.js"),c=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),m=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),j=require("./MediaCard.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=T(o);const y=f.default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
@@ -16,4 +16,4 @@
 `,g=f.default(C)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,E=new u.VariableEditorHelper;exports.ChatUIV2=o=>{const{bodyText:p,footerText:u,headerMediaType:T,headerText:f,headerAssetLink:v,headerAssetName:b,quickReplybtn:q,ctaBtn:O,actionTypes:_,extras:w,showHeader:P,imagePreviewStyles:S,size:I,bodyVariableList:L,headerVariableList:A,buttons:M,limitedTimeOfferComponent:N,carouselCardIndex:R,isWhatsappCarousel:B,isPreview:H}=o,Y=E.format(p,L),U=E.format(f,A),{selectedCarouselIndex:D,isProductCarouselType:F,errorIndexes:V}=n.useTemplateModalContext(),k={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:a.default,QUICK_REPLY:i.default};return e.jsxs(h.Container,Object.assign({isCarouselCard:null!=R&&R>-1,showBorder:null!=R&&R===D||F&&null!=R&&R>-1&&null!=D&&D>-1,hasError:null==V?void 0:V.includes(null!=R?R:-2),isWhatsappCarousel:B,isPreview:H},{children:[!B&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===x.HEADER_TYPES.TEXT?e.jsx(g,{dangerouslySetInnerHTML:{__html:U}}):T!==x.HEADER_TYPES.NONE?e.jsx(j.MediaCard,{headerAssetLink:v,headerAssetName:b,mediaType:T,imagePreviewStyles:T===x.HEADER_TYPES.IMAGE?S:{}}):e.jsx(e.Fragment,{}),(null==N?void 0:N.dateTime)?e.jsx(m.LimitedTimeOffer,{text:N.text,dateTime:N.dateTime,code:N.code}):e.jsx(e.Fragment,{}),!!p&&e.jsx(e.Fragment,{children:e.jsx(C,{dangerouslySetInnerHTML:{__html:Y}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(l.Tooltip,Object.assign({body:null!=u?u:"",placement:"top"},{children:e.jsx(h.TimeStamp,Object.assign({style:{flex:1}},{children:u}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),M&&M.length>0?M.map(((t,r)=>e.jsx(c.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:k[t.type],size:I},r))):_===x.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==q?void 0:q.map(((t,r)=>e.jsx(c.ChatBtn,{text:t.text},r)))}):_===x.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(c.ChatBtn,{textTypography:P?d.Caption:d.BodySecondary,extraContent:w?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:a.default,size:I},r)))}):e.jsx(e.Fragment,{})]}))};
+`,E=new u.VariableEditorHelper;exports.ChatUIV2=o=>{const{bodyText:p,footerText:u,headerMediaType:T,headerText:f,headerAssetLink:v,headerAssetName:b,quickReplybtn:q,ctaBtn:O,actionTypes:w,extras:_,showHeader:P,imagePreviewStyles:I,size:S,bodyVariableList:L,headerVariableList:A,buttons:M,limitedTimeOfferComponent:N,carouselCardIndex:R,isWhatsappCarousel:B,isPreview:H}=o,Y=E.format(p,L),D=E.format(f,A),{selectedCarouselIndex:F,isProductCarouselType:U,errorIndexes:V,isCarouselHovered:k}=l.useTemplateModalContext(),z={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:a.default,QUICK_REPLY:i.default};return e.jsxs(h.Container,Object.assign({isCarouselCard:null!=R&&R>-1,showBorder:null!=R&&R===F||U&&null!=R&&R>-1&&null!=F&&F>-1,hasError:null==V?void 0:V.includes(null!=R?R:-2),isWhatsappCarousel:B,isPreview:H,showDashedBorder:U&&k&&(null!=F?F:-1)<0&&(null!=R?R:-1)>-1},{children:[!B&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===x.HEADER_TYPES.TEXT?e.jsx(g,{dangerouslySetInnerHTML:{__html:D}}):T!==x.HEADER_TYPES.NONE?e.jsx(j.MediaCard,{headerAssetLink:v,headerAssetName:b,mediaType:T,imagePreviewStyles:T===x.HEADER_TYPES.IMAGE?I:{}}):e.jsx(e.Fragment,{}),(null==N?void 0:N.dateTime)?e.jsx(m.LimitedTimeOffer,{text:N.text,dateTime:N.dateTime,code:N.code}):e.jsx(e.Fragment,{}),!!p&&e.jsx(e.Fragment,{children:e.jsx(C,{dangerouslySetInnerHTML:{__html:Y},style:{flex:1}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(n.Tooltip,Object.assign({body:null!=u?u:"",placement:"top"},{children:e.jsx(h.FooterText,Object.assign({style:{flex:1}},{children:u}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),M&&M.length>0?M.map(((t,r)=>e.jsx(c.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:z[t.type],size:S},r))):w===x.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==q?void 0:q.map(((t,r)=>e.jsx(c.ChatBtn,{text:t.text},r)))}):w===x.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(c.ChatBtn,{textTypography:P?d.Caption:d.BodySecondary,extraContent:_?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:a.default,size:S},r)))}):e.jsx(e.Fragment,{})]}))};

package/dist/cjs/components/template-preview/WhatsApp/MediaCard.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),d=require("../models/TemplateMeta.js"),n=require("./ChatUI.style.js"),o=require("../../shimmer-image/ShimmerImage.js");const c=o=>{let{headerAssetName:c,mediaType:l}=o;const h=l===d.HEADER_TYPES.IMAGE?r.default:l===d.HEADER_TYPES.VIDEO?i.default:s.default;return e.jsxs(n.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:a.COLORS.icon.placeholder}),!!c&&e.jsx(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:i,mediaType:t,imagePreviewStyles:a}=s;if(!r||t===d.HEADER_TYPES.DOCUMENT)return e.jsx(c,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:t}));return e.jsx(n.MediaContainer,{children:t===d.HEADER_TYPES.IMAGE?e.jsx(o.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):t===d.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),d=require("../models/TemplateMeta.js"),n=require("./ChatUI.style.js"),o=require("../../shimmer-image/ShimmerImage.js");const c=o=>{let{headerAssetName:c,mediaType:l}=o;const h=l===d.HEADER_TYPES.IMAGE?r.default:l===d.HEADER_TYPES.VIDEO?i.default:s.default;return e.jsxs(n.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:a.COLORS.icon.placeholder}),!!c&&e.jsx(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:i,mediaType:t,imagePreviewStyles:a}=s;if(!r||t===d.HEADER_TYPES.DOCUMENT)return e.jsx(c,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:t}));return e.jsx(n.MediaContainer,{children:t===d.HEADER_TYPES.IMAGE?e.jsx(o.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):t===d.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;

package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js

@@ -1,10 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../template-context-mapper/context/templateModalContext.js"),a=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),o=require("./ChatHeader.js"),n=require("./ChatUiV2.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=p(t);const l=d.default.div`
-	background-image: ${e=>e.isWhatsappCarousel?"none":"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f')"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../template-context-mapper/context/templateModalContext.js"),s=require("../../template-context-mapper/utils/constants.js"),a=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("../utils/getPreviewPropLen.js"),n=require("./ChatHeader.js"),p=require("./ChatUiV2.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(t);const d=u.default.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${s.BACKGROUND_PREVIEW_IMAGE})`};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
-`,c=d.default(a.TitleRegular)`
-	color: ${s.COLORS.content.primary};
-`;exports.WhatsappLikePreviewV2=t=>{const{hideDeviceContainerInPreview:a}=r.useTemplateModalContext();return 3===i.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):a?e.jsx(n.ChatUIV2,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(l,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsx(o.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`}},{children:[!t.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(c,{children:"Preview"})})),e.jsx(n.ChatUIV2,Object.assign({showHeader:t.showHeader},t))]}))]}))})};
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+`,c=u.default(a.TitleRegular)`
+	color: ${i.COLORS.content.primary};
+`;exports.WhatsappLikePreviewV2=t=>{const{hideDeviceContainerInPreview:s}=r.useTemplateModalContext();return 3===o.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):s?e.jsx(p.ChatUIV2,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsx(n.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:t.isWhatsappCarousel?"100%":"auto"}},{children:[!t.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(c,{children:"Preview"})})),e.jsx(p.ChatUIV2,Object.assign({showHeader:t.showHeader},t))]}))]}))})};

package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.d.ts

@@ -1,2 +1,2 @@
 import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
-export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string) => string;
+export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string, uniqueId?: string) => string;

package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(r,a){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.COLORS.content.brand;const l=(null==a?void 0:a.length)?null==a?void 0:a.map((e=>e.updatedValue)):r.match(n.variablePatternGlobal);return n.variablePatternGlobal.lastIndex=0,r.split(n.variablePattern).map(((e,n)=>{var r;return(null==l?void 0:l[n])?`${e}<span></span><span id="connectors_variable_${n+1}" style="color: ${t}; text-decoration: underline; word-break: break-word;">${null!==(r=null==l?void 0:l[n])&&void 0!==r?r:""}</span><span> </span>`:e})).join("")};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(r,a){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.COLORS.content.brand,l=arguments.length>3?arguments[3]:void 0;const o=(null==a?void 0:a.length)?null==a?void 0:a.map((e=>e.updatedValue)):r.match(n.variablePatternGlobal);return n.variablePatternGlobal.lastIndex=0,r.split(n.variablePattern).map(((e,n)=>{var r;return(null==o?void 0:o[n])?`${e}<span></span><span id="${l||""}connectors_variable_${n+1}" style="color: ${t}; text-decoration: underline; word-break: break-word;">${null!==(r=null==o?void 0:o[n])&&void 0!==r?r:""}</span><span> </span>`:e})).join("")};

package/dist/cjs/components/template-preview/models/SmsTemplate.d.ts

@@ -32,4 +32,5 @@ export type SMSMeta = {
     smsVariableStore?: CUSTOM_VARIABLE[];
     smsDisplayContent?: string;
     templateContainerStyles?: React.CSSProperties | undefined;
+    uniqueId?: string;
 };

package/dist/cjs/components/tooltips/TooltipInternal.d.ts

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react';
 import { ButtonProps } from "../button/model";
 export interface TooltipInternalProps {
     title?: string;
-    body: string;
+    body?: string;
     buttonProps?: ButtonProps;
     delay?: number;
     variant?: 'light' | 'dark';

package/dist/cjs/hooks/useOutside.d.ts

@@ -1 +1 @@
-export declare function useOutside(ref: any, cb: () => void): void;
+export declare function useOutside(ref: any, cb: () => void, excludeRefs?: any[]): void;

package/dist/cjs/hooks/useOutside.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useOutside=function(t,r){e.useEffect((()=>{function e(e){t.current&&!t.current.contains(e.target)&&r()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[t])};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useOutside=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];e.useEffect((()=>{function e(e){let u=!0;null==n||n.forEach((t=>{t&&t.current&&t.current.contains(e.target)&&(u=!1)})),u&&t.current&&!t.current.contains(e.target)&&r()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[t])};