@bikdotai/bik-component-library 0.0.512 → 0.0.513-beta.0

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

@@ -4,4 +4,4 @@
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,discountCode:L,setDiscountCode:q,fileName:D,setFileName:I}=o;var R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,re,ue,pe,ce;const ve=T.isCarouselType,{originalVariableList:me,pod:be,extras:ge,selectedCarouselIndex:fe,isProductCarouselType:je}=s.useTemplateModalContext(),{descriptionComponents:he,urlBtns:Ce,qrbBtns:Oe,imageComponent:xe,bodyVariables:Te,headerVariables:ye}=r.getAllDataFromTemplateComponent(T),Ee=t.useRef(null),Ve=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Be,ke]=t.useState(!1),[Me,Le]=t.useState(-1===fe?{descriptionComponents:he,urlBtns:Ce,qrbBtns:Oe,imageComponent:xe,bodyVariables:Te,headerVariables:ye}:{}),{uploadMediaLink:qe,uploadMediaFiles:De}=V,Ie=f.useEditWhatsappTemplateMedia({uploadMediaLink:qe,uploadMediaFiles:De,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,r,u;let p;p=null!=fe&&fe>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[fe].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[fe]}:Object.assign({},T);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!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[fe]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==E||E(Object.assign({},e)),Ue(!0)}else null==E||E(Object.assign({},p))},mediaComponent:ve?Me.imageComponent:xe,fileRef:Ee}),[Re,Ue]=t.useState(!1),[Pe,Ae]=t.useState(D),[we,Ne]=t.useState();function Se(e,t,o){var i,l,a,s,d,r,u,p,c,v;const m=null!=fe&&fe>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[fe].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[fe]}:Object.assign({},T),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!=fe&&fe>-1&&je){const t=Object.assign({},T).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({},T).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(T);return l.components=t,l.mapping.cards=i,void(null==E||E(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===(u=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===u?void 0:u.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))?ke(!0):(ke(!1),null==q||q(""))}if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=b.components,e.mapping.cards[fe]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function _e(e,t,o){var i,l,a,s,d,r;const u=null!=fe&&fe>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[fe].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[fe]}:Object.assign({},T);if(null!=fe&&fe>-1&&je){const t=Object.assign({},T).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(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const p=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==p&&p>-1){const n=null===(a=null==u?void 0:u.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!==(r=null===(d=null===(s=u.components)||void 0===s?void 0:s[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[p]),{buttons:i}),a=[...u.components];a[p]=l,u.components=a}}if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=u.components,null==E||E(Object.assign({},e))}else null==E||E(u)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ke(!0);else{ke(!1);const e=null===(n=null==ge?void 0:ge.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=fe&&fe>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[fe].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[fe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Le({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p})}else if(null!=fe&&-1===fe){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=r.getAllDataFromTemplateComponent(T);Le({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[fe]),t.useEffect((()=>{var e,n,t,o;if(null!=fe&&fe>-1&&Re){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[fe].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[fe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Le({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}),Ue(!1)}}),[Re]);const Fe=ve?Me.imageComponent:xe;return Ie.openEditMedia?e.jsx(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(R=Fe.format)&&void 0!==R?R:l.HEADER_TYPES.IMAGE,uploadMedia:Ie.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:Ie,setOpenEditMedia:Ie.setOpenEditMedia,openEditMedia:Ie.openEditMedia,editIconRef:Ie.editIconRef,fileRef:Ee})})):e.jsxs(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Me.imageComponent&&!je&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(P=null===(U=null==Fe?void 0:Fe.example)||void 0===U?void 0:U.header_handle)&&void 0!==P?P:[],handleImageChange:Ie.handleImageChange,mediaType:null==Fe?void 0:Fe.format,error:Ie.error,isLoading:Ie.loading,setOpenEditMedia:Ie.setOpenEditMedia,selectedVariable:u.isVariable(null!==(N=null===(w=null===(A=null==Fe?void 0:Fe.example)||void 0===A?void 0:A.header_handle)||void 0===w?void 0:w[0])&&void 0!==N?N:"")?null===(_=null===(S=null==Fe?void 0:Fe.example)||void 0===S?void 0:S.header_handle)||void 0===_?void 0:_[0]:(null===(H=null===(F=null==T?void 0:T.mapping)||void 0===F?void 0:F.header)||void 0===H?void 0:H[0])?null===(Y=null===(Q=null==T?void 0:T.mapping)||void 0===Q?void 0:Q.header)||void 0===Y?void 0:Y[0]:Ie.selectedVariable}),(null==xe?void 0:xe.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Pe,errorMessage:we||void 0,onBlur:()=>{if(!Pe)return null==I||I(""),void Ne("PDF name is Required");const e=p.validateInputName(Pe);null==I||I(Pe),Ne(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Ne(""),Ae(e)}})}):e.jsx(e.Fragment,{})]}),Me.bodyVariables.length>0&&e.jsx(O.default,{containerStyle:{paddingTop:Me.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(K=Me.descriptionComponents)||void 0===K?void 0:K.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=fe&&fe>-1?me.cards[fe]:me,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===($=null===(W=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===W?void 0:W.filter((e=>"URL"===e.type)))||void 0===$?void 0:$.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(X=null===(G=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===G?void 0:G.filter((e=>be===a.POD.CHATBOT||"URL"===e.type)))||void 0===X?void 0:X.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=fe&&fe>-1?Object.assign({},me.cards[fe]):Object.assign({},me),updateSelectedURLTemplateBtn:Se,variableList:k},`${t}_${fe}`)})),be===a.POD.CHATBOT&&(null===(J=null===(z=Oe[0])||void 0===z?void 0:z.component)||void 0===J?void 0:J.buttons)&&(null===(ne=null===(ee=null===(Z=Oe[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(c.BackTrackComponent,{backTrackMessage:null===(te=null==ge?void 0:ge.backTrackExtra)||void 0===te?void 0:te[0],setBackTrackMessage:null===(oe=null==ge?void 0:ge.backTrackExtra)||void 0===oe?void 0:oe[1]}),(null===(le=null===(ie=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===ie?void 0:ie.filter((e=>"QUICK_REPLY"===e.type)))||void 0===le?void 0:le.length)>0&&(be!==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(c.BackTrackComponent,{backTrackMessage:null===(ae=null==ge?void 0:ge.backTrackExtra)||void 0===ae?void 0:ae[0],setBackTrackMessage:null===(se=null==ge?void 0:ge.backTrackExtra)||void 0===se?void 0:se[1]})),null===(re=null===(de=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===re?void 0:re.map(((n,t)=>{if("QUICK_REPLY"===n.type&&be!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=fe&&fe>-1?Object.assign({},me.cards[fe]):Object.assign({},me),updateSelectedQRBTemplateBtn:_e},`${t}_${fe}`)})),be===a.POD.CHATBOT&&Be&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(ue=null==ge?void 0:ge.discountCodeExtra)||void 0===ue?void 0:ue[0],setDiscountCode:null===(pe=null==ge?void 0:ge.discountCodeExtra)||void 0===pe?void 0:pe[1],variableList:k}),null===(ce=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===ce?void 0:ce.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(j.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,variableList:Ve,componentType:"BUTTONS"},t)}))]}))};
+`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,setDiscountCode:L,fileName:q,setFileName:D}=o;var I,R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,re,ue,pe;const ce=T.isCarouselType,{originalVariableList:ve,pod:me,extras:be,selectedCarouselIndex:ge,isProductCarouselType:fe}=s.useTemplateModalContext(),{descriptionComponents:je,urlBtns:he,qrbBtns:Ce,imageComponent:Oe,bodyVariables:xe,headerVariables:Te}=r.getAllDataFromTemplateComponent(T),ye=t.useRef(null),Ee=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Ve,Be]=t.useState(!1),[ke,Me]=t.useState(-1===ge?{descriptionComponents:je,urlBtns:he,qrbBtns:Ce,imageComponent:Oe,bodyVariables:xe,headerVariables:Te}:{}),{uploadMediaLink:Le,uploadMediaFiles:qe}=V,De=f.useEditWhatsappTemplateMedia({uploadMediaLink:Le,uploadMediaFiles:qe,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,r,u;let p;p=null!=ge&&ge>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[ge].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[ge]}:Object.assign({},T);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!=ge&&ge>-1){const e=n.cloneDeep(T);e.components[1].cards[ge].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[ge]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==E||E(Object.assign({},e)),Re(!0)}else null==E||E(Object.assign({},p))},mediaComponent:ce?ke.imageComponent:Oe,fileRef:ye}),[Ie,Re]=t.useState(!1),[Ue,Pe]=t.useState(q),[Ae,we]=t.useState();function Ne(e,t,o){var i,l,a,s,d,r,u,p,c,v;const m=null!=ge&&ge>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ge].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ge]}:Object.assign({},T),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!=ge&&ge>-1&&fe){const t=Object.assign({},T).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({},T).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(T);return l.components=t,l.mapping.cards=i,void(null==E||E(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===(u=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===u?void 0:u.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))?Be(!0):(Be(!1),null==L||L(""))}if(null!=ge&&ge>-1){const e=n.cloneDeep(T);e.components[1].cards[ge].components=b.components,e.mapping.cards[ge]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function Se(e,t,o){var i,l,a,s,d,r;const u=null!=ge&&ge>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ge].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ge]}:Object.assign({},T);if(null!=ge&&ge>-1&&fe){const t=Object.assign({},T).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(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const p=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==p&&p>-1){const n=null===(a=null==u?void 0:u.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!==(r=null===(d=null===(s=u.components)||void 0===s?void 0:s[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[p]),{buttons:i}),a=[...u.components];a[p]=l,u.components=a}}if(null!=ge&&ge>-1){const e=n.cloneDeep(T);e.components[1].cards[ge].components=u.components,null==E||E(Object.assign({},e))}else null==E||E(u)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Be(!0);else{Be(!1);const e=null===(n=null==be?void 0:be.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=ge&&ge>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ge].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ge]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Me({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p})}else if(null!=ge&&-1===ge){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=r.getAllDataFromTemplateComponent(T);Me({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[ge]),t.useEffect((()=>{var e,n,t,o;if(null!=ge&&ge>-1&&Ie){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ge].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ge]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Me({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}),Re(!1)}}),[Ie]);const _e=ce?ke.imageComponent:Oe;return De.openEditMedia?e.jsx(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(I=_e.format)&&void 0!==I?I:l.HEADER_TYPES.IMAGE,uploadMedia:De.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:De,setOpenEditMedia:De.setOpenEditMedia,openEditMedia:De.openEditMedia,editIconRef:De.editIconRef,fileRef:ye})})):e.jsxs(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ke.imageComponent&&!fe&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(U=null===(R=null==_e?void 0:_e.example)||void 0===R?void 0:R.header_handle)&&void 0!==U?U:[],handleImageChange:De.handleImageChange,mediaType:null==_e?void 0:_e.format,error:De.error,isLoading:De.loading,setOpenEditMedia:De.setOpenEditMedia,selectedVariable:u.isVariable(null!==(w=null===(A=null===(P=null==_e?void 0:_e.example)||void 0===P?void 0:P.header_handle)||void 0===A?void 0:A[0])&&void 0!==w?w:"")?null===(S=null===(N=null==_e?void 0:_e.example)||void 0===N?void 0:N.header_handle)||void 0===S?void 0:S[0]:(null===(F=null===(_=null==T?void 0:T.mapping)||void 0===_?void 0:_.header)||void 0===F?void 0:F[0])?null===(Q=null===(H=null==T?void 0:T.mapping)||void 0===H?void 0:H.header)||void 0===Q?void 0:Q[0]:De.selectedVariable}),(null==Oe?void 0:Oe.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Ue,errorMessage:Ae||void 0,onBlur:()=>{if(!Ue)return null==D||D(""),void we("PDF name is Required");const e=p.validateInputName(Ue);null==D||D(Ue),we(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{we(""),Pe(e)}})}):e.jsx(e.Fragment,{})]}),ke.bodyVariables.length>0&&e.jsx(O.default,{containerStyle:{paddingTop:ke.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(Y=ke.descriptionComponents)||void 0===Y?void 0:Y.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=ge&&ge>-1?ve.cards[ge]:ve,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===(W=null===(K=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.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===(G=null===($=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===$?void 0:$.filter((e=>me===a.POD.CHATBOT||"URL"===e.type)))||void 0===G?void 0:G.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=ge&&ge>-1?Object.assign({},ve.cards[ge]):Object.assign({},ve),updateSelectedURLTemplateBtn:Ne,variableList:k},`${t}_${ge}`)})),me===a.POD.CHATBOT&&(null===(z=null===(X=Ce[0])||void 0===X?void 0:X.component)||void 0===z?void 0:z.buttons)&&(null===(ee=null===(Z=null===(J=Ce[0])||void 0===J?void 0:J.component)||void 0===Z?void 0:Z.buttons)||void 0===ee?void 0:ee.length)>0&&e.jsx(c.BackTrackComponent,{backTrackMessage:null===(ne=null==be?void 0:be.backTrackExtra)||void 0===ne?void 0:ne[0],setBackTrackMessage:null===(te=null==be?void 0:be.backTrackExtra)||void 0===te?void 0:te[1]}),(null===(ie=null===(oe=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===oe?void 0:oe.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ie?void 0:ie.length)>0&&(me!==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(c.BackTrackComponent,{backTrackMessage:null===(le=null==be?void 0:be.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==be?void 0:be.backTrackExtra)||void 0===ae?void 0:ae[1]})),null===(de=null===(se=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===se?void 0:se.filter((e=>"QUICK_REPLY"===e.type)))||void 0===de?void 0:de.map(((n,t)=>{if("QUICK_REPLY"===n.type&&me!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=ge&&ge>-1?Object.assign({},ve.cards[ge]):Object.assign({},ve),updateSelectedQRBTemplateBtn:Se},`${t}_${ge}`)})),me===a.POD.CHATBOT&&Ve&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(re=null==be?void 0:be.discountCodeExtra)||void 0===re?void 0:re[0],setDiscountCode:null===(ue=null==be?void 0:be.discountCodeExtra)||void 0===ue?void 0:ue[1]}),null===(pe=null!=ge&&ge>-1?ve.cards[ge].buttons:null==ve?void 0:ve.buttons)||void 0===pe?void 0:pe.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(j.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,variableList:Ee,componentType:"BUTTONS"},t)}))]}))};

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("../../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 n=o(t),p=o(i);const c=p.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 d=n.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,d=p.default.div`
+`,c=n.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,9 +17,7 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=n.default.forwardRef(((t,i)=>{let{display_content:o,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),f={showSampleValues:h,template:p,channel:n,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 w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{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(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));h.displayName="MobilePreview";const m=p.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(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`
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	flex: 1;
 `;exports.default=h;

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

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

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

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

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"),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}};
+"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}};

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

@@ -1,10 +1,10 @@
-"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 d=l(t);const u=d.default.div`
-	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${s.BACKGROUND_PREVIEW_IMAGE})`};
+"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')"};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
 `,c=d.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(u,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`}},{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))]}))]}))})};
+	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))]}))]}))})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../helpers/BaseWhatsappContentLang.helper.js");require("../../curtain/CurtainHelper.js");var r=require("../constants/regexPatterns.js");const a=new e.BaseWhatsappContentLangHelper;exports.VariableEditorHelper=class{format(e,l){var t;if(!e)return"";const n=new RegExp(r.variablePattern,"g"),p=e.match(n),c=null!==(t=null==l?void 0:l.map((e=>{let{placeholder:r}=e;return r})))&&void 0!==t?t:[],o=e.split(r.variablePattern).map(((e,r)=>{var a;const t=null==p?void 0:p[r];if(t){const r=t.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),n=c.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return n>-1?e+'<code style="color: #731DCF">'+(null===(a=null==l?void 0:l[n])||void 0===a?void 0:a.value)+"</code>":e+t}return e})).join("");return a.getHTML(o)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../helpers/BaseWhatsappContentLang.helper.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js");var r=require("../constants/regexPatterns.js");const a=new e.BaseWhatsappContentLangHelper;exports.VariableEditorHelper=class{format(e,l){var t;if(!e)return"";const n=new RegExp(r.variablePattern,"g"),p=e.match(n),c=null!==(t=null==l?void 0:l.map((e=>{let{placeholder:r}=e;return r})))&&void 0!==t?t:[],o=e.split(r.variablePattern).map(((e,r)=>{var a;const t=null==p?void 0:p[r];if(t){const r=t.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),n=c.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return n>-1?e+'<code style="color: #731DCF">'+(null===(a=null==l?void 0:l[n])||void 0===a?void 0:a.value)+"</code>":e+t}return e})).join("");return a.getHTML(o)}};

package/dist/cjs/components/variable-picker-v3/Content.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { VariablePickerV3Props } from './model';
+type Props = VariablePickerV3Props;
+export declare const VariablePickerContent: React.FC<Props>;
+export {};

package/dist/cjs/components/variable-picker-v3/Content.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_back.svg.js"),i=require("../../assets/icons/plus.svg.js"),a=require("../../assets/icons/triangle_error.svg.js"),r=require("react"),l=require("../../constants/Theme.js"),n=require("../accordion/Accordion.js"),o=require("../icon-button/IconButton.js"),c=require("../input/Input.js"),d=require("../list-item/ListItem.js"),h=require("../switch/Switch.js"),u=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),b=require("./context.js"),g=require("./NoResult.js"),p=require("./recommendVaribles.js"),x=require("./searchVariables.js"),y=require("./styles.js"),m=require("./SubHeaderItems.js");exports.VariablePickerContent=O=>{const{data:v,onSelect:S,showHeader:f,showBackButton:C,onBackButtonClick:R}=O,[w,k]=r.useState(v),[q,B]=r.useState(""),[V,I]=r.useState([]),[L,N]=r.useState(""),[T,_]=r.useState(!1),[P,H]=r.useState([]);r.useEffect((()=>{V.length>0?H([V[V.length-1]]):H(v)}),[V]);const A=e=>{let s=104;return V.length>0&&(s+=54),`calc(${e}px - ${s}px)`};return s.jsx(b.VariablePickerContext.Provider,Object.assign({value:{variables:w,searchText:q,subHeaderStack:V,showRecommended:T,setSubHeaderStack:I,setSearchText:B,setVariables:k,setShowRecommended:_}},{children:s.jsxs("div",Object.assign({tabIndex:-1,id:"variable-picker-v3",style:{backgroundColor:"white",borderRadius:4},onClick:e=>e.stopPropagation()},{children:[(f||C)&&s.jsxs(y.HeaderWrapper,{children:[C&&s.jsx(o.IconButton,{Icon:()=>s.jsx(t.default,{width:16,height:16,style:{display:"flex",color:l.COLORS.content.primary}}),onClick:R}),f&&s.jsx(j.TitleRegular,{children:"Select Variable"})]}),s.jsx("div",Object.assign({style:{padding:"0 16px",paddingTop:12,backgroundColor:l.COLORS.surface.subdued}},{children:s.jsx(c.Input,{id:"search-bar-v3-picker",onBlur:e=>{O.onSearchBlur&&O.onSearchBlur(e)},value:q,noKeyDownChange:!0,placeholder:"Search",onChangeText:e=>{e||N("");const s=x.searchVariables(e,P,V);if(T){const e=p.showOnlyRecommendedVariables(s,V);k(e)}else k(s);B(e);const t=V.length>0?V[V.length-1].displayName:"home";N(t)}})})),s.jsxs(y.RecommendWrapper,{children:[s.jsx(j.BodySecondary,Object.assign({style:{color:l.COLORS.content.secondary}},{children:"Only Recommended"})),s.jsx(h.Switch,{value:T,onValueChange:s=>e.__awaiter(void 0,void 0,void 0,(function*(){yield(s=>e.__awaiter(void 0,void 0,void 0,(function*(){if(_(s),s){const e=p.showOnlyRecommendedVariables(w,V);k(e)}else if(V.length>0){const e=L==V[V.length-1].displayName;if(q.length>0&&e){const e=x.searchVariables(q,P,V);k(e)}else k([V[V.length-1].variables])}else if(q.length>0){const e=x.searchVariables(q,P,V);k(e)}else k(v)})))(s)}))})]}),V.length>0&&s.jsxs(y.BackHeader,{children:[s.jsx("div",Object.assign({style:{position:"absolute",left:16}},{children:s.jsx(o.IconButton,{id:"back-btn-v3",style:{display:"flex"},Icon:()=>s.jsx(t.default,{width:12,height:12,style:{color:l.COLORS.content.secondary}}),onClick:e=>{e.stopPropagation();let s=q;const t=[...V],i=t.pop();if(I(t),i.displayName===L&&(B(""),s=""),s.length>0){const e=t.length>0?[t[t.length-1]]:v,i=x.searchVariables(s,e,t);if(T){const e=p.showOnlyRecommendedVariables(i,t);k(e)}else k(i)}else if(t.length>0)if(T){const e=p.showOnlyRecommendedVariables([t[t.length-1].variables],t);k(e)}else k([t[t.length-1].variables]);else if(T){const e=p.showOnlyRecommendedVariables(v,V);k(e)}else k(v)}})})),s.jsx(j.BodyCaption,Object.assign({style:{color:l.COLORS.content.secondary}},{children:V[V.length-1].displayName}))]}),s.jsx(s.Fragment,{children:w.length>0?s.jsx(y.Container,Object.assign({height:A(500)},{children:w.map(((e,t)=>e.displayName&&void 0!==e.variables?s.jsx("div",Object.assign({style:{borderBottom:`1px solid ${l.COLORS.stroke.primary}`}},{children:s.jsx(n.BikAccordion,Object.assign({headerPadding:"12px 16px",header:s.jsx(j.TitleSmall,Object.assign({style:{color:l.COLORS.content.secondary}},{children:e.displayName}))},{children:s.jsx(m.default,{variable:e.variables,onSelect:S})}))}),t):e.displayName?s.jsx(d.ListItem,{version:"2.0",leadingIcon:s.jsx(i.default,{width:14,height:14}),customListItemLabel:s.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[s.jsx(j.BodySecondary,Object.assign({style:{fontSize:"14px",color:l.COLORS.text.primary}},{children:e.displayName})),!e.isAvailable&&s.jsx(u.Tooltip,Object.assign({body:"Not Recommended"},{children:s.jsx("div",Object.assign({style:{display:"flex"}},{children:s.jsx(a.default,{width:16,height:16,color:l.COLORS.content.secondary})}))}))]})),listItem:{label:e.displayName,value:e.displayName},subText:e.description||"",onClick:()=>{S(e)}},t):s.jsx(m.default,{variable:e,onSelect:S},t)))})):s.jsx(g.default,{height:A(500),searchText:q})})]}))}))};

package/dist/cjs/components/variable-picker-v3/NoResult.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    height: string;
+    searchText?: string;
+};
+declare const NoResult: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default NoResult;

package/dist/cjs/components/variable-picker-v3/NoResult.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/search.svg.js"),r=require("styled-components"),n=require("../../constants/Theme.js"),s=require("../TypographyStyle.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(r);const c=o.default.div`
+	display: flex;
+	gap: 16px;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 0 16px;
+	height: ${e=>e.height};
+`,d=o.default.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: ${n.COLORS.background.brandLight};
+	width: 48px;
+	height: 48px;
+	border-radius: 24px;
+`;exports.default=r=>e.jsxs(c,Object.assign({height:r.height},{children:[e.jsx(d,{children:e.jsx(t.default,{width:24,height:24,color:n.COLORS.background.brand})}),e.jsxs("div",Object.assign({style:{textAlign:"center"}},{children:[e.jsx(s.TitleMedium,{children:"No results found"}),r.searchText?e.jsx(s.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary,marginTop:8}},{children:`Sorry we could not find any results for "${r.searchText}"`})):e.jsx(s.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary,marginTop:8}},{children:"Sorry we could not find any variables"}))]}))]}));

package/dist/cjs/components/variable-picker-v3/SubHeaderItems.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SubHeader, VariableV3 } from './model';
+type SubHeaderProps = {
+    onSelect: (variable: VariableV3) => void;
+    variable: {
+        [key: string]: SubHeader | VariableV3;
+    };
+};
+declare const SubHeaderItem: React.FC<SubHeaderProps>;
+export default SubHeaderItem;

package/dist/cjs/components/variable-picker-v3/SubHeaderItems.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/chevronRight.svg.js"),t=require("../../assets/icons/plus.svg.js"),i=require("../../assets/icons/sub_category.svg.js"),a=require("../../assets/icons/triangle_error.svg.js"),r=require("../../constants/Theme.js"),l=require("../list-item/ListItem.js"),o=require("../tooltips/Tooltip.js"),n=require("../TypographyStyle.js"),c=require("./context.js"),d=require("./recommendVaribles.js");exports.default=j=>{const{onSelect:m,variable:u}=j,{subHeaderStack:y,setSubHeaderStack:b,setVariables:x,showRecommended:p}=c.useVariablePickerContext();return e.jsx(e.Fragment,{children:Object.keys(u).map(((c,j)=>void 0===u[c].variables?e.jsx(l.ListItem,{version:"2.0",leadingIcon:e.jsx(t.default,{width:14,height:14}),customListItemLabel:e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:4}},{children:[e.jsx(n.BodySecondary,Object.assign({style:{fontSize:"14px",color:r.COLORS.text.primary}},{children:u[c].displayName})),!u[c].isAvailable&&e.jsx(o.Tooltip,Object.assign({body:"Not Recommended"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:16,height:16,color:r.COLORS.content.secondary})}))}))]})),listItem:{label:u[c].displayName,value:u[c].displayName},subText:u[c].description||"",onClick:()=>{m(u[c])}},j):e.jsx(l.ListItem,{version:"2.0",listItem:{label:u[c].displayName,value:u[c].displayName},customListItemLabel:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:e.jsx(n.BodySecondary,Object.assign({style:{fontSize:"14px",color:r.COLORS.text.primary}},{children:u[c].displayName}))})),leadingIcon:e.jsx(i.default,{width:14,height:14}),subText:u[c].description||"",trailingIcon:e.jsx(s.default,{width:10,height:10,color:"#212121"}),onClick:()=>{const e=[...y,u[c]];if(b(e),p){const s=d.showOnlyRecommendedVariables([u[c].variables],e);x(s)}else x([u[c].variables])}},j)))})};

package/dist/cjs/components/variable-picker-v3/VariablePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { VariablePickerV3Props } from './model';
+type Props = VariablePickerV3Props;
+export declare const VariablePicker: React.FC<Props>;
+export default VariablePicker;

package/dist/cjs/components/variable-picker-v3/VariablePicker.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/cross.svg.js"),t=require("../../constants/Theme.js"),r=require("../modals/modal.styled.js"),i=require("./Content.js"),o=require("./model.js");const n=n=>{const{type:a}=n;return a==o.PickerType.FLOATER?e.jsxs("div",Object.assign({style:{boxShadow:"0px 2px 8px 0px #0000001F",width:n.width?n.width:344,borderRadius:4}},{children:[e.jsx(i.VariablePickerContent,Object.assign({},n)),e.jsx(r.CloseButtonContainer,Object.assign({onClick:()=>{n.onClose&&n.onClose()}},{children:e.jsx(s.default,{height:20,width:20,color:t.COLORS.content.secondary})}))]})):e.jsx(i.VariablePickerContent,Object.assign({},n))};exports.VariablePicker=n,exports.default=n;

package/dist/cjs/components/variable-picker-v3/context.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const VariablePickerContext: React.Context<{
+    searchText: string;
+    setSearchText: React.Dispatch<React.SetStateAction<string>>;
+    subHeaderStack: any[];
+    setSubHeaderStack: React.Dispatch<React.SetStateAction<any[]>>;
+    variables: any[];
+    setVariables: React.Dispatch<React.SetStateAction<any[]>>;
+    showRecommended: boolean;
+    setShowRecommended: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export declare const useVariablePickerContext: () => {
+    searchText: string;
+    setSearchText: React.Dispatch<React.SetStateAction<string>>;
+    subHeaderStack: any[];
+    setSubHeaderStack: React.Dispatch<React.SetStateAction<any[]>>;
+    variables: any[];
+    setVariables: React.Dispatch<React.SetStateAction<any[]>>;
+    showRecommended: boolean;
+    setShowRecommended: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/cjs/components/variable-picker-v3/context.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=t(e).default.createContext({searchText:"",setSearchText:()=>{},subHeaderStack:[],setSubHeaderStack:()=>{},variables:[],setVariables:()=>{},showRecommended:!1,setShowRecommended:()=>{}});exports.VariablePickerContext=r,exports.useVariablePickerContext=()=>e.useContext(r);

package/dist/cjs/components/variable-picker-v3/index.d.ts

@@ -0,0 +1 @@
+export * from './VariablePicker';

package/dist/cjs/components/variable-picker-v3/model.d.ts

@@ -0,0 +1,48 @@
+export declare enum PickerType {
+    FLOATER = "floater",
+    EMBEDDED = "embedded"
+}
+export interface VariablePickerV3Props {
+    type: PickerType;
+    data: VariableListInterfaceV3[];
+    onSelect: (variable: VariableV3) => void;
+    width?: string;
+    onClose?: () => void;
+    showHeader?: boolean;
+    showBackButton?: boolean;
+    onBackButtonClick?: () => void;
+    onSearchBlur?: (e: any) => void;
+}
+export interface VariableListInterfaceV3 {
+    isSubHeader?: boolean;
+    displayName: string;
+    description: string;
+    orderId?: number;
+    isAvailable?: boolean;
+    variables?: {
+        [key: string]: SubHeader | VariableV3;
+    };
+}
+export interface SubHeader {
+    isSubHeader: boolean;
+    isAvailable: boolean;
+    displayName: string;
+    description: string;
+    variables?: {
+        [key: string]: SubHeader | VariableV3;
+    };
+}
+export interface VariableV3 {
+    description?: string;
+    defaultValue?: string;
+    displayName: string;
+    actualValue: string;
+    variableType: string;
+    isAvailable: boolean;
+    actualValueEval?: string;
+    isSubHeader?: boolean;
+    variables?: {
+        [key: string]: VariableV3;
+    };
+    needsFetching?: boolean;
+}

package/dist/cjs/components/variable-picker-v3/model.js

@@ -0,0 +1 @@
+"use strict";var e;Object.defineProperty(exports,"__esModule",{value:!0}),exports.PickerType=void 0,(e=exports.PickerType||(exports.PickerType={})).FLOATER="floater",e.EMBEDDED="embedded";

package/dist/cjs/components/variable-picker-v3/recommendVaribles.d.ts

@@ -0,0 +1 @@
+export declare const showOnlyRecommendedVariables: (data: any, stack: any[]) => any;

package/dist/cjs/components/variable-picker-v3/recommendVaribles.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=e=>Object.keys(e).reduce(((s,a)=>(e[a]&&e[a].isAvailable&&(s[a]=e[a]),s)),{});exports.showOnlyRecommendedVariables=(s,a)=>s.map((s=>{if(s.isAvailable&&void 0===s.variables)return s;if(void 0===s.isAvailable&&void 0!==s.variables){const a=e(s.variables);return Object.assign(Object.assign({},s),{variables:a})}if(void 0===s.variables){return e(s)}{const i=e(s.variables);return a.length?i:Object.assign(Object.assign({},s),{variables:i})}})).filter((e=>Object.keys(e).length>0));

package/dist/cjs/components/variable-picker-v3/searchVariables.d.ts

@@ -0,0 +1,2 @@
+import { VariableListInterfaceV3 } from './model';
+export declare const searchVariables: (text: string, data: VariableListInterfaceV3[], subHeaderStack: any[]) => any[];

package/dist/cjs/components/variable-picker-v3/searchVariables.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=(a,s,r)=>{Object.keys(s).forEach((l=>{s[l].displayName.toLowerCase().includes(a.toLowerCase())&&r.push(s[l].isSubHeader?{[l]:s[l]}:s[l]),s[l].variables&&Object.keys(s[l].variables).length&&e(a,s[l].variables,r)}))};exports.searchVariables=(a,s,r)=>{if(!a)return r.length>0?[r[r.length-1].variables]:s;const l=[];return s.forEach((s=>{if(r.length>0)if(s.displayName&&void 0!==s.variables)e(a,s.variables,l);else{if(s.displayName.toLowerCase().includes(a.toLowerCase())&&l.push(s),!s.variables||!Object.keys(s.variables).length)return;e(a,s.variables,l)}else{if(s.displayName.toLowerCase().includes(a.toLowerCase())&&l.push(s),!s.variables||!Object.keys(s.variables).length)return;e(a,s.variables,l)}})),l};

package/dist/cjs/components/variable-picker-v3/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecommendWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    height: string;
+}, never>;

package/dist/cjs/components/variable-picker-v3/styles.js

@@ -0,0 +1,37 @@
+"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 a=o.default.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 16px 0px 16px;
+	background-color: ${r.COLORS.surface.subdued};
+`,i=o.default.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px 16px;
+	background-color: ${r.COLORS.surface.subdued};
+	border-bottom: 1px solid ${r.COLORS.stroke.primary};
+`,d=o.default.div`
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 32px;
+	background-color: ${r.COLORS.background.base};
+`,p=o.default.div`
+	margin: 8px;
+	height: ${e=>e.height};
+	overflow: scroll;
+	&::-webkit-scrollbar-thumb {
+		background-color: #e0e0e0 !important;
+		border-radius: 8px;
+	}
+	&::-webkit-scrollbar {
+		height: 5px;
+		display: block;
+		width: 8px;
+	}
+	&::-webkit-scrollbar-thumb:horizontal {
+		width: 8px;
+	}
+`;exports.BackHeader=d,exports.Container=p,exports.HeaderWrapper=a,exports.RecommendWrapper=i;

package/dist/cjs/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './BaseWhatsappContentLang.helper';
 export * from '../components/curtain/CurtainHelper';
 export * from '../utils/resizeImage';
+export * from '../components/variable-picker-v3/model';

package/dist/cjs/index.d.ts

@@ -79,3 +79,4 @@ export * from './utils/validator';
 export * from './components/carousel-preview';
 export * from './components/floater';
 export * from './components/card-selector';
+export * from './components/variable-picker-v3';