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

package/dist/esm/components/tag/Tag.styled.js

@@ -1 +1 @@
-import c from"@emotion/styled/base";import{getPadding as l,getBackgroundColor as b,generateBorder as d,getTextColor as g}from"./themes.js";const n=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var l;return null!==(l=c.cursor)&&void 0!==l?l:"default"}),";",(c=>"regular"===c.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;")," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;padding:",(c=>l(c.variant)),";padding:",(c=>c.contentPadding?c.contentPadding:l(c.variant)),"px;background:",(c=>b(c.theme,c.type)),";border-radius:",(c=>"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${d(c.type,c.theme)};`)," .text{color:",(c=>g(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJ1xyXG4gICAgPyBgZGlzcGxheTogYmxvY2s7XG5cdFx0ICAgICBtaW4taGVpZ2h0OiAyNnB4O1xuXHRcdGBcclxuICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YH1cblx0LmNvbnRhaW5lciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogJHsocHJvcHMpID0+IChwcm9wcy5hbGlnbkljb24gPyBwcm9wcy5hbGlnbkljb24gOiAnY2VudGVyJyl9O1xuXHRcdGdhcDogNnB4O1xuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgID8gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgIDogZ2V0UGFkZGluZyhwcm9wcy52YXJpYW50KX1weDtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4gZ2V0QmFja2dyb3VuZENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cblx0XHRib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gKHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJyA/ICc0cHgnIDogJzEycHgnKX07XG5cblx0XHQkeyhwcm9wcykgPT4gIXByb3BzLm5vQm9yZGVyICYmXHJcbiAgICBwcm9wcy50aGVtZSA9PT0gJ2xpZ2h0JyAmJlxyXG4gICAgYGJvcmRlcjogJHtwcm9wcy52ZXJzaW9uID09PSAnMi4wJyA/IDAuNSA6IDF9cHggc29saWQgJHtnZW5lcmF0ZUJvcmRlcihwcm9wcy50eXBlLCBwcm9wcy50aGVtZSl9O2B9XG5cblx0XHQudGV4dCB7XG5cdFx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldFRleHRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSl9O1xuXHRcdH1cblxuXHRcdC5pY29uLXRyYWlsaW5nIHtcblx0XHRcdGFsbDogdW5zZXQ7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdH1cblxuXHRcdC5pY29uLWxlYWRpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1UYWcuc3R5bGVkLmpzLm1hcCJdfQ== */"));export{n as Tag};
+import c from"@emotion/styled/base";import{getPadding as I,getBackgroundColor as b,generateBorder as g,getTextColor as l}from"./themes.js";const i=c("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var I;return null!==(I=c.cursor)&&void 0!==I?I:"default"}),";",(c=>"small"!==c.size&&("regular"===c.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;"))," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;",(c=>"small"===c.size?"height: 16px; box-sizing: border-box;":"")," padding:",(c=>"small"===c.size?"2px 6px":c.contentPadding?`${c.contentPadding}px`:I(c.variant)),";background:",(c=>{var I;return null!==(I=c.backgroundColor)&&void 0!==I?I:b(c.theme,c.type)}),";border-radius:",(c=>void 0!==c.borderRadius?"number"==typeof c.borderRadius?`${c.borderRadius}px`:c.borderRadius:"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${g(c.type,c.theme)};`)," .text{color:",(c=>l(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnNpemUgIT09ICdzbWFsbCcgJiZcclxuICAgIChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgICAgICA/IGBkaXNwbGF5OiBibG9jaztcblx0XHQgICAgIG1pbi1oZWlnaHQ6IDI2cHg7XG5cdFx0YFxyXG4gICAgICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YCl9XG5cdC5jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYWxpZ25JY29uID8gcHJvcHMuYWxpZ25JY29uIDogJ2NlbnRlcicpfTtcblx0XHRnYXA6IDZweDtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuc2l6ZSA9PT0gJ3NtYWxsJyA/ICdoZWlnaHQ6IDE2cHg7IGJveC1zaXppbmc6IGJvcmRlci1ib3g7JyA6ICcnfVxuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBwcm9wcy5zaXplID09PSAnc21hbGwnXHJcbiAgICA/ICcycHggNnB4J1xyXG4gICAgOiBwcm9wcy5jb250ZW50UGFkZGluZ1xyXG4gICAgICAgID8gYCR7cHJvcHMuY29udGVudFBhZGRpbmd9cHhgXHJcbiAgICAgICAgOiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4geyB2YXIgX2E7IHJldHVybiAoX2EgPSBwcm9wcy5iYWNrZ3JvdW5kQ29sb3IpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6IGdldEJhY2tncm91bmRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSk7IH19O1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogJHsocHJvcHMpID0+IHByb3BzLmJvcmRlclJhZGl1cyAhPT0gdW5kZWZpbmVkXHJcbiAgICA/IHR5cGVvZiBwcm9wcy5ib3JkZXJSYWRpdXMgPT09ICdudW1iZXInXHJcbiAgICAgICAgPyBgJHtwcm9wcy5ib3JkZXJSYWRpdXN9cHhgXHJcbiAgICAgICAgOiBwcm9wcy5ib3JkZXJSYWRpdXNcclxuICAgIDogcHJvcHMudmFyaWFudCA9PT0gJ3JlZ3VsYXInXHJcbiAgICAgICAgPyAnNHB4J1xyXG4gICAgICAgIDogJzEycHgnfTtcblxuXHRcdCR7KHByb3BzKSA9PiAhcHJvcHMubm9Cb3JkZXIgJiZcclxuICAgIHByb3BzLnRoZW1lID09PSAnbGlnaHQnICYmXHJcbiAgICBgYm9yZGVyOiAke3Byb3BzLnZlcnNpb24gPT09ICcyLjAnID8gMC41IDogMX1weCBzb2xpZCAke2dlbmVyYXRlQm9yZGVyKHByb3BzLnR5cGUsIHByb3BzLnRoZW1lKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));export{i as Tag};

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{cloneDeep as o}from"lodash";import{useEffect as i,useState as a,useRef as r,useMemo as n}from"react";import s from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as u}from"../modals/styledModal.js";import{determineCardIndex as p,isItCarousal as c,isRCSChannel as m}from"../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as v}from"../template-preview/models/Channels.js";import{TEMPLATE_QUALITY as h,POD as b}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as C}from"./context/templateModalContext.js";import f from"./modalElements/Footer.js";import{TemplateAnalyticsComponent as g}from"./modalElements/TemplateAnalyticsComponent.js";import x from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as y}from"./utils/convertPlaceholdersToBikDropdown.js";const P=P=>{var E,I,T,S,w,D,V,k;const{selectedTemplate:j,closeDialog:L,showVariableMapping:A,channel:B,htmlContent:M,templateVariables:H,onTemplateSelect:F,globalPlaceholders:O,showOnlyContent:W,whatsappSpecificPickerMeta:N,zIndex:$,showVariableModal:z,variableList:Q,discountCode:R,setDiscountCode:U,onBackPress:_,enabledCustomText:q,variableListForImage:G,showSampleValues:J,disableEditVariable:K,pod:X,extras:Y,pickerConf:Z,selectedCarouselProducts:ee,disableEditExpiry:le,cardWidth:te,onDeleteSelectedProducts:oe,fileName:ie,setFileName:ae,hideDeviceContainerInPreview:re,maxCharLimit:ne,onDefaultVariableSelect:se,skipDefaultVariableContent:de,disableDatePicker:ue,disableCopyCode:pe,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,footerButtonText:ve,footerInfoText:he,templateAnalytics:be}=P;i((()=>{Te(M)}),[M]);const Ce=p(B),fe=c(B,j),ge=null==j?void 0:j.isProductCarouselType,[xe,ye]=a(B===v.EMAIL||B==v.WEBPUSH||fe?"desktop":"mobile"),[Pe,Ee]=a(!1),[Ie,Te]=a(M),[Se,we]=a(!1),[De,Ve]=a([]),[ke,je]=a({}),[Le,Ae]=a(j),[Be,Me]=a([]),[He,Fe]=a(null),[Oe,We]=a(!1),[Ne,$e]=a(null!=H?H:[]),[ze,Qe]=a(!1),[Re,Ue]=a(fe?(null===(I=null===(E=null==Le?void 0:Le.mapping)||void 0===E?void 0:E.body)||void 0===I?void 0:I.length)?-1:0:-1),[_e,qe]=a([]),[Ge,Je]=a(void 0),Ke=r(null),[Xe,Ye]=a(!1),[Ze,el]=a(!1),[ll,tl]=a(!1),[ol,il]=a(!0),[al,rl]=a(!0),[nl,sl]=a({});i((()=>{ee?qe(ee):ge&&qe([])}),[ee]),i((()=>{var e;if(!Oe&&ge&&(!ee||0===qe.length)){const l=null===(e=null==Le?void 0:Le.components)||void 0===e?void 0:e[Ce].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,i;"HEADER"===e.type&&t.push(null!==(i=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==i?i:"")}))})),Me(t),We(!0)}}),[Oe]);const dl=n((()=>y(O)),[O]);return i((()=>{Je(o(Q))}),[Q]),(null==be?void 0:be.show)&&ol&&be.templateQuality&&Object.values(h).find((e=>e===String(be.templateQuality)))?e(g,{headingTitle:null==Le?void 0:Le.label,headingSubtitle:B===v.WHATSAPP?`${s.capitaliseFirstLetterOfString(null!==(T=null==Le?void 0:Le.category)&&void 0!==T?T:"")} • ${null!==(S=null==Le?void 0:Le.templateCategory)&&void 0!==S?S:""}`:"",templateAnalytics:be,analyticsData:be.data,onClose:()=>{null==L||L(),il(!1),rl(!1)},onCancel:()=>{il(!1),rl(!1)},onProceed:()=>{il(!1),rl(!0)},templateId:(null==Le?void 0:Le.templateId)||""}):e(C.Provider,Object.assign({value:{hideFooterButton:ll,setHideFooterButton:tl,hideCrossButton:Ze,setHideCrossButton:el,variableList:Ge,setVariableList:Je,variableCallback:He,setVariableCallback:Fe,showVariablePicker:Pe,setShowVariablePicker:Ee,template:Le,setTemplate:Ae,device:xe,setDevice:ye,display_content:Ie,setDisplayContent:Te,originalVariableList:Ne,setOriginalVariableList:$e,isError:Se,setIsError:we,channel:B,globalNormalizedPlaceholders:dl,templateSelectionTriggered:ze,setTemplateSelectionTriggered:Qe,enabledCustomText:q,disableEditVariable:K,pod:X,extras:Y,isWhatsappCarousel:fe,selectedCarouselIndex:Re,setSelectedCarouselIndex:Ue,isProductCarouselType:ge,templateErrorIndexes:ke,cardCount:fe?null===(D=null===(w=j.components)||void 0===w?void 0:w[Ce].cards)||void 0===D?void 0:D.length:void 0,errorIndexes:De,setErrorIndexes:Ve,pickerConf:Z,carouselProducts:_e,setCarouselProducts:qe,disableEditExpiry:le,cardWidth:te,cardImages:Be,onDeleteSelectedProducts:oe,hideDeviceContainerInPreview:re,sliderRef:Ke,isCarouselHovered:Xe,setIsCarouselHovered:Ye,maxCharLimit:ne,ctaOptionsErrors:nl,setCtaOptionsErrors:sl,onDefaultVariableSelect:se,disableDatePicker:ue,disableCopyCode:pe,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,cardIndex:Ce}},{children:W?e(x,{variableListFromProps:Q,channel:v.EMAIL,hideHeader:!0}):l(u,Object.assign({hideCrossButton:Ze,zIndex:$,centralContainerStyles:{width:fe?900:B===v.EMAIL&&A?1e3:800},open:al,onClose:()=>{rl(!1),null==L||L()},headingTitle:null==Le?void 0:Le.label,headingSubtitle:B===v.WHATSAPP||m(B)?`${s.capitaliseFirstLetterOfString(null!==(V=null==Le?void 0:Le.category)&&void 0!==V?V:"")} • ${null!==(k=null==Le?void 0:Le.templateCategory)&&void 0!==k?k:""}`:"",onBackPress:()=>{if(null==be?void 0:be.show)return il(!0),void rl(!1);null==_||_()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(x,{variableListFromProps:Q,showSampleValues:J,showVariableMapping:A,channel:B,whatsappSpecificPickerMeta:N,showVariableModal:z,discountCode:R,setDiscountCode:U,variableListForImage:G&&(null==G?void 0:G.length)>0?G:Ge,fileName:ie,setFileName:e=>{null==ae||ae(e)},skipDefaultVariableContent:de}),F?e(f,{isWhatsappCarousel:null!=fe&&fe,onSelect:function(){var e;if((null==_e?void 0:_e.length)<1&&ge)return void we(!0);if(Object.keys(nl).length>0&&X!==b.CHATBOT)return void we(!0);const l=null==F?void 0:F(Le,Ne,null!=Ie?Ie:"",_e);je(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&Ve(l.errorIndexes),(null==l?void 0:l.error)&&we(!!(null==l?void 0:l.error))):Qe(!0)},footerButtonText:ve,footerInfoText:he}):e(t,{})]}))}))};export{P as TemplateContextMapper};
+import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import o from"lodash/cloneDeep";import{useEffect as i,useState as a,useRef as r,useMemo as n}from"react";import s from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as p}from"../modals/styledModal.js";import{determineCardIndex as u,isItCarousal as c,isRCSChannel as m}from"../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as v}from"../template-preview/models/Channels.js";import{TEMPLATE_QUALITY as h,POD as b}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as C}from"./context/templateModalContext.js";import f from"./modalElements/Footer.js";import{TemplateAnalyticsComponent as g}from"./modalElements/TemplateAnalyticsComponent.js";import x from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as y}from"./utils/convertPlaceholdersToBikDropdown.js";const P=P=>{var E,I,T,S,D,w,V,k;const{selectedTemplate:j,closeDialog:L,showVariableMapping:A,channel:B,htmlContent:M,templateVariables:H,onTemplateSelect:F,globalPlaceholders:O,showOnlyContent:W,whatsappSpecificPickerMeta:N,zIndex:$,showVariableModal:z,variableList:Q,discountCode:R,setDiscountCode:U,onBackPress:_,enabledCustomText:q,variableListForImage:G,showSampleValues:J,disableEditVariable:K,pod:X,extras:Y,pickerConf:Z,selectedCarouselProducts:ee,disableEditExpiry:le,cardWidth:te,onDeleteSelectedProducts:oe,fileName:ie,setFileName:ae,hideDeviceContainerInPreview:re,maxCharLimit:ne,onDefaultVariableSelect:se,skipDefaultVariableContent:de,disableDatePicker:pe,disableCopyCode:ue,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,footerButtonText:ve,footerInfoText:he,templateAnalytics:be}=P;i((()=>{Te(M)}),[M]);const Ce=u(B),fe=c(B,j),ge=null==j?void 0:j.isProductCarouselType,[xe,ye]=a(B===v.EMAIL||B==v.WEBPUSH||fe?"desktop":"mobile"),[Pe,Ee]=a(!1),[Ie,Te]=a(M),[Se,De]=a(!1),[we,Ve]=a([]),[ke,je]=a({}),[Le,Ae]=a(j),[Be,Me]=a([]),[He,Fe]=a(null),[Oe,We]=a(!1),[Ne,$e]=a(null!=H?H:[]),[ze,Qe]=a(!1),[Re,Ue]=a(fe?(null===(I=null===(E=null==Le?void 0:Le.mapping)||void 0===E?void 0:E.body)||void 0===I?void 0:I.length)?-1:0:-1),[_e,qe]=a([]),[Ge,Je]=a(void 0),Ke=r(null),[Xe,Ye]=a(!1),[Ze,el]=a(!1),[ll,tl]=a(!1),[ol,il]=a(!0),[al,rl]=a(!0),[nl,sl]=a({});i((()=>{ee?qe(ee):ge&&qe([])}),[ee]),i((()=>{var e;if(!Oe&&ge&&(!ee||0===qe.length)){const l=null===(e=null==Le?void 0:Le.components)||void 0===e?void 0:e[Ce].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,i;"HEADER"===e.type&&t.push(null!==(i=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==i?i:"")}))})),Me(t),We(!0)}}),[Oe]);const dl=n((()=>y(O)),[O]);return i((()=>{Je(o(Q))}),[Q]),(null==be?void 0:be.show)&&ol&&be.templateQuality&&Object.values(h).find((e=>e===String(be.templateQuality)))?e(g,{headingTitle:null==Le?void 0:Le.label,headingSubtitle:B===v.WHATSAPP?`${s.capitaliseFirstLetterOfString(null!==(T=null==Le?void 0:Le.category)&&void 0!==T?T:"")} • ${null!==(S=null==Le?void 0:Le.templateCategory)&&void 0!==S?S:""}`:"",templateAnalytics:be,analyticsData:be.data,onClose:()=>{null==L||L(),il(!1),rl(!1)},onCancel:()=>{il(!1),rl(!1)},onProceed:()=>{il(!1),rl(!0)},templateId:(null==Le?void 0:Le.templateId)||""}):e(C.Provider,Object.assign({value:{hideFooterButton:ll,setHideFooterButton:tl,hideCrossButton:Ze,setHideCrossButton:el,variableList:Ge,setVariableList:Je,variableCallback:He,setVariableCallback:Fe,showVariablePicker:Pe,setShowVariablePicker:Ee,template:Le,setTemplate:Ae,device:xe,setDevice:ye,display_content:Ie,setDisplayContent:Te,originalVariableList:Ne,setOriginalVariableList:$e,isError:Se,setIsError:De,channel:B,globalNormalizedPlaceholders:dl,templateSelectionTriggered:ze,setTemplateSelectionTriggered:Qe,enabledCustomText:q,disableEditVariable:K,pod:X,extras:Y,isWhatsappCarousel:fe,selectedCarouselIndex:Re,setSelectedCarouselIndex:Ue,isProductCarouselType:ge,templateErrorIndexes:ke,cardCount:fe?null===(w=null===(D=j.components)||void 0===D?void 0:D[Ce].cards)||void 0===w?void 0:w.length:void 0,errorIndexes:we,setErrorIndexes:Ve,pickerConf:Z,carouselProducts:_e,setCarouselProducts:qe,disableEditExpiry:le,cardWidth:te,cardImages:Be,onDeleteSelectedProducts:oe,hideDeviceContainerInPreview:re,sliderRef:Ke,isCarouselHovered:Xe,setIsCarouselHovered:Ye,maxCharLimit:ne,ctaOptionsErrors:nl,setCtaOptionsErrors:sl,onDefaultVariableSelect:se,disableDatePicker:pe,disableCopyCode:ue,initialExpiryDateTime:ce,showDiscountCodeExpiryInfo:me,cardIndex:Ce}},{children:W?e(x,{variableListFromProps:Q,channel:v.EMAIL,hideHeader:!0}):l(p,Object.assign({hideCrossButton:Ze,zIndex:$,centralContainerStyles:{width:fe?900:B===v.EMAIL&&A?1e3:800},open:al,onClose:()=>{rl(!1),null==L||L()},headingTitle:null==Le?void 0:Le.label,headingSubtitle:B===v.WHATSAPP||m(B)?`${s.capitaliseFirstLetterOfString(null!==(V=null==Le?void 0:Le.category)&&void 0!==V?V:"")} • ${null!==(k=null==Le?void 0:Le.templateCategory)&&void 0!==k?k:""}`:"",onBackPress:()=>{if(null==be?void 0:be.show)return il(!0),void rl(!1);null==_||_()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(x,{variableListFromProps:Q,showSampleValues:J,showVariableMapping:A,channel:B,whatsappSpecificPickerMeta:N,showVariableModal:z,discountCode:R,setDiscountCode:U,variableListForImage:G&&(null==G?void 0:G.length)>0?G:Ge,fileName:ie,setFileName:e=>{null==ae||ae(e)},skipDefaultVariableContent:de}),F?e(f,{isWhatsappCarousel:null!=fe&&fe,onSelect:function(){var e;if((null==_e?void 0:_e.length)<1&&ge)return void De(!0);if(Object.keys(nl).length>0&&X!==b.CHATBOT)return void De(!0);const l=null==F?void 0:F(Le,Ne,null!=Ie?Ie:"",_e);je(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&Ve(l.errorIndexes),(null==l?void 0:l.error)&&De(!!(null==l?void 0:l.error))):Qe(!0)},footerButtonText:ve,footerInfoText:he}):e(t,{})]}))}))};export{P as TemplateContextMapper};

package/dist/esm/components/template-context-mapper/helpers/WebpushTemplateHelper.js

@@ -1 +1 @@
-import{__awaiter as t}from"../../../_virtual/_tslib.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{BUTTON_TYPE as e}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{CUSTOM_URL_PLACEHOLDER as i,CUSTOM_URL_PLACEHOLDER_VAR as l}from"../../template-preview/constants/TemplateConstants.js";import{extractVariables as n}from"../../../utils/variableUtils.js";const o=()=>{function o(t,e,i,l){const o=e.map(((e,o)=>{const r=a(e);if(l)return{variableName:e,isEditableVariable:!1,updatedValue:e,index:o,variableValue:e,type:"string"};const u=function(t,e,i){const l=i&&i.length?i:n(t);if(!l||!l.length)return[];const o=[];return l.forEach(((t,i)=>{const l=s(e,`{{${t}}}`);if(l){const{actualValue:t,defaultValue:e}=l,n="{{custom.text}}"===t||"{{custom.url}}"===t;o.push({editable:n,variableVal:e,editableDefaultValues:e,variableName:t,idx:i})}})),o}(r?e:i,t);if(u.length>0){const t=u[0];return{variableName:t.variableName,isEditableVariable:!0,updatedValue:(null==t?void 0:t.updatedValue)?null==t?void 0:t.updatedValue:r?t.variableName:e,index:o,variableValue:t.variableVal,type:"string"}}return null})).filter((t=>null!==t));return o}const a=t=>t.includes("{{")&&t.includes("}}"),r=(t,e)=>t&&t.length?t.flatMap(((t,i)=>{var l;return a(t)?t.includes("editableVariable")?(null===(l=null==e?void 0:e[i])||void 0===l?void 0:l.value)||t:n(t).map((t=>`{{${t}}}`))||[]:t})):[];const s=(t,e)=>{for(const i of t)for(const t in i.variables){const l=i.variables[t];if(l.actualValue===e||e.includes("editableVariable")&&l.actualValue.includes("custom.text"))return l}return null};return{processWebpushTemplate:function(s,u,d,p){var b,v,c,m,f,h,g,w;return t(this,void 0,void 0,(function*(){const t=Object.assign({},s);t.components=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){console.error("Error parsing webpush component JSON:",t),e={}}else e=t;return e}(t.components);const{components:{title:V,body:y,buttons:W,icon:k,image:L},webpushBroadcastConfig:j}=t;let x={title:r(null!==(b=null==j?void 0:j.title)&&void 0!==b?b:[]),body:r(null!==(v=null==j?void 0:j.body)&&void 0!==v?v:[],null==y?void 0:y.variables),buttonsW:null!==(c=null==j?void 0:j.buttons)&&void 0!==c?c:[]};if(!t.webpushBroadcastConfig){const e=null!==(m=null==y?void 0:y.text)&&void 0!==m?m:"string"==typeof y?y:"",l=W&&(null==W?void 0:W.length)?W.map((t=>(null==t?void 0:t.websiteLink)==i?null==t?void 0:t.redirectionLink:null==t?void 0:t.websiteLink)).filter((t=>void 0!==t)):[],o=n(e).map(((t,e)=>{var i,l;return t.includes("editableVariable")?(null===(l=null===(i=null==y?void 0:y.variables)||void 0===i?void 0:i[e])||void 0===l?void 0:l.value)||t:`{{${t}}}`}));x={title:n(V).map((t=>`{{${t}}}`)),body:o,buttonsW:[]};const a={title:null!==(f=x.title)&&void 0!==f?f:[],body:null!==(h=x.body)&&void 0!==h?h:[],buttons:l,icon:k?[k]:void 0,image:L?[L]:void 0,redirectionLink:(null==y?void 0:y.redirectionLink)?[null==y?void 0:y.redirectionLink]:[]};t.webpushBroadcastConfig=a}const C=W&&W.length?W.map(((t,n)=>({type:e.URL,text:null==t?void 0:t.text,url:"https://d.bik.ai/{{1}}",example:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[n])?[""]:[x.buttonsW[n]]:t.redirectionLink?[t.redirectionLink]:void 0,buttonVariable:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[n])?x.buttonsW[n]:l:t.websiteLink?t.websiteLink==i?l:t.websiteLink:l,index:n}))):[],N={title:o(u,x.title,V,p),body:o(u,x.body,(null==y?void 0:y.text)||"",p),buttons:C};return{templateVariableMapping:{title:(null===(g=null==d?void 0:d.title)||void 0===g?void 0:g.length)?d.title:N.title,body:(null===(w=null==d?void 0:d.body)||void 0===w?void 0:w.length)?d.body:N.body,buttons:N.buttons,icon:[],header:[]},webpushBroadcastConfig:t.webpushBroadcastConfig,template:t}}))},isValidUrl:t=>{try{return new URL(t),!0}catch(t){return!1}}}};export{o as default};
+import{__awaiter as t}from"../../../_virtual/_tslib.js";import{CUSTOM_URL_PLACEHOLDER as e,CUSTOM_URL_PLACEHOLDER_VAR as i}from"../../template-preview/constants/TemplateConstants.js";import{BUTTON_TYPE as l}from"../../template-preview/models/WhatsAppTemplate.js";import{extractVariables as n}from"../../../utils/variableUtils.js";const o=()=>{function o(t,e,i,l){const o=e.map(((e,o)=>{const u=a(e);if(l)return{variableName:e,isEditableVariable:!1,updatedValue:e,index:o,variableValue:e,type:"string"};const s=function(t,e,i){const l=i&&i.length?i:n(t);if(!l||!l.length)return[];const o=[];return l.forEach(((t,i)=>{const l=r(e,`{{${t}}}`);if(l){const{actualValue:t,defaultValue:e}=l,n="{{custom.text}}"===t||"{{custom.url}}"===t;o.push({editable:n,variableVal:e,editableDefaultValues:e,variableName:t,idx:i})}})),o}(u?e:i,t);if(s.length>0){const t=s[0];return{variableName:t.variableName,isEditableVariable:!0,updatedValue:(null==t?void 0:t.updatedValue)?null==t?void 0:t.updatedValue:u?t.variableName:e,index:o,variableValue:t.variableVal,type:"string"}}return null})).filter((t=>null!==t));return o}const a=t=>t.includes("{{")&&t.includes("}}"),u=(t,e)=>t&&t.length?t.flatMap(((t,i)=>{var l;return a(t)?t.includes("editableVariable")?(null===(l=null==e?void 0:e[i])||void 0===l?void 0:l.value)||t:n(t).map((t=>`{{${t}}}`))||[]:t})):[];const r=(t,e)=>{for(const i of t)for(const t in i.variables){const l=i.variables[t];if(l.actualValue===e||e.includes("editableVariable")&&l.actualValue.includes("custom.text"))return l}return null};return{processWebpushTemplate:function(r,s,d,b){var c,v,p,m,f,h,g,V;return t(this,void 0,void 0,(function*(){const t=Object.assign({},r);t.components=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){console.error("Error parsing webpush component JSON:",t),e={}}else e=t;return e}(t.components);const{components:{title:y,body:w,buttons:L,icon:k,image:x},webpushBroadcastConfig:W}=t;let N={title:u(null!==(c=null==W?void 0:W.title)&&void 0!==c?c:[]),body:u(null!==(v=null==W?void 0:W.body)&&void 0!==v?v:[],null==w?void 0:w.variables),buttonsW:null!==(p=null==W?void 0:W.buttons)&&void 0!==p?p:[]};if(!t.webpushBroadcastConfig){const i=null!==(m=null==w?void 0:w.text)&&void 0!==m?m:"string"==typeof w?w:"",l=L&&(null==L?void 0:L.length)?L.map((t=>(null==t?void 0:t.websiteLink)==e?null==t?void 0:t.redirectionLink:null==t?void 0:t.websiteLink)).filter((t=>void 0!==t)):[],o=n(i).map(((t,e)=>{var i,l;return t.includes("editableVariable")?(null===(l=null===(i=null==w?void 0:w.variables)||void 0===i?void 0:i[e])||void 0===l?void 0:l.value)||t:`{{${t}}}`}));N={title:n(y).map((t=>`{{${t}}}`)),body:o,buttonsW:[]};const a={title:null!==(f=N.title)&&void 0!==f?f:[],body:null!==(h=N.body)&&void 0!==h?h:[],buttons:l,icon:k?[k]:void 0,image:x?[x]:void 0,redirectionLink:(null==w?void 0:w.redirectionLink)?[null==w?void 0:w.redirectionLink]:[]};t.webpushBroadcastConfig=a}const C=L&&L.length?L.map(((t,n)=>({type:l.URL,text:null==t?void 0:t.text,url:"https://d.bik.ai/{{1}}",example:N.buttonsW&&N.buttonsW.length?a(N.buttonsW[n])?[""]:[N.buttonsW[n]]:t.redirectionLink?[t.redirectionLink]:void 0,buttonVariable:N.buttonsW&&N.buttonsW.length?a(N.buttonsW[n])?N.buttonsW[n]:i:t.websiteLink?t.websiteLink==e?i:t.websiteLink:i,index:n}))):[],j={title:o(s,N.title,y,b),body:o(s,N.body,(null==w?void 0:w.text)||"",b),buttons:C};return{templateVariableMapping:{title:(null===(g=null==d?void 0:d.title)||void 0===g?void 0:g.length)?d.title:j.title,body:(null===(V=null==d?void 0:d.body)||void 0===V?void 0:V.length)?d.body:j.body,buttons:j.buttons,icon:[],header:[]},webpushBroadcastConfig:t.webpushBroadcastConfig,template:t}}))},isValidUrl:t=>{try{return new URL(t),!0}catch(t){return!1}}}};export{o as default};

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

@@ -1,22 +1,22 @@
-import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as i}from"../../variable-picker-v3/model.js";import{cloneDeep as o}from"lodash";import{useRef as l}from"react";import r from"styled-components";import{CarouselPreview as n}from"../../carousel-preview/CarouselPreview.js";import s from"./EditWhatsAppCarouselTemplateV2.js";import{TemplatePreview as p}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{BodySecondary as c}from"../../TypographyStyle.js";import{VariablePicker as h}from"../../variable-picker-v3/VariablePicker.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as w}from"../utils/constants.js";import{getVariableNameForEmailByIndex as v}from"../utils/getVariableNameEmail.js";import{highlightFor as f}from"../utils/highlightFor.js";import b from"./DesktopPreview.js";import C from"./EditWebpushTemplate.js";import P from"./EditWhatsAppTemplateV2.js";import g from"./MobilePreview.js";import S from"./VariableConnectorsPanel.js";const k=r.div`
+import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as i}from"../../variable-picker-v3/model.js";import o from"lodash/cloneDeep";import{useRef as l}from"react";import n from"styled-components";import{CarouselPreview as r}from"../../carousel-preview/CarouselPreview.js";import s from"./EditWhatsAppCarouselTemplateV2.js";import{TemplatePreview as p}from"../../template-preview/TemplatePreview.js";import{CHANNEL_TYPE as c}from"../../template-preview/models/Channels.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{VariablePicker as m}from"../../variable-picker-v3/VariablePicker.js";import{COLORS as h}from"../../../constants/Theme.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as w}from"../utils/constants.js";import{getVariableNameForEmailByIndex as f}from"../utils/getVariableNameEmail.js";import{highlightFor as v}from"../utils/highlightFor.js";import b from"./DesktopPreview.js";import C from"./EditWebpushTemplate.js";import g from"./EditWhatsAppTemplateV2.js";import P from"./MobilePreview.js";import S from"./VariableConnectorsPanel.js";const x=n.div`
 	display: flex;
 	//	height: 100%;
-`,j=r.div`
+`,y=n.div`
 	max-width: 450px;
-	max-width: ${e=>e.channel===d.EMAIL?"400px":"450px"};
+	max-width: ${e=>e.channel===c.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===d.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===c.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${m.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${m.stroke.primary} 1px solid`:void 0};
+	border-left: ${h.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${h.stroke.primary} 1px solid`:void 0};
 	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
-`,x=r.div`
+`,k=n.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===d.WHATSAPP?`url(${w});`:"none"};
-	display: ${e=>!e.hideDeviceContainerInPreview||e.channel!==d.WHATSAPP&&e.channel!==d.RCS?"initial":"flex"};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===c.WHATSAPP?`url(${w});`:"none"};
+	display: ${e=>!e.hideDeviceContainerInPreview||e.channel!==c.WHATSAPP&&e.channel!==c.RCS?"initial":"flex"};
 	align-items: flex-start;
-`,y=r=>{const{showVariableMapping:w,showOnlyContent:y,whatsappSpecificPickerMeta:V,showVariableModal:A,discountCode:W,setDiscountCode:M,variableListForImage:T,showSampleValues:D,variableListFromProps:E,fileName:I,setFileName:H,skipDefaultVariableContent:L}=r,$=l(),B=l(),{variableList:F,setVariableList:O,variableCallback:_,showVariablePicker:N,setShowVariablePicker:R,device:U,display_content:G,channel:q,template:z,setTemplate:J,isWhatsappCarousel:K,isProductCarouselType:Q,hideDeviceContainerInPreview:X,onDefaultVariableSelect:Y}=u();const Z=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(k,{children:[t(x,Object.assign({showOnlyContent:y,showVariableMapping:w,isWhatsappCarousel:K,hideDeviceContainerInPreview:X,channel:q,skipDefaultVariableContent:L},{children:"mobile"===U?t(g,{ref:B,display_content:null!=G?G:"",channel:q,template:z,showSampleValues:D}):q!==d.WHATSAPP&&q!==d.RCS||!K?q===d.WEBPUSH?t(p,{showSampleValues:D,channel:q,hideHeader:!0,template:z}):q!==d.MESSAGE?t(b,{ref:$,channel:q,display_content:null!=G?G:"",showSampleValues:D}):t(a,{}):t(n,{ref:$,channel:q,template:z,showSampleValues:D,isPreview:!1,showArrows:!0})})),(Q||w)&&e(j,Object.assign({channel:q,isWhatsappCarousel:K,showVariableMapping:!0},{children:[t("div",Object.assign({style:{height:"100%",width:"whatsapp"===q?428:400,display:N?"block":"none"}},{children:t(h,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{O(o(E)),R(!1)},onSelect:e=>{_(e),O(o(E)),R(!1)},type:i.EMBEDDED,data:null!=F?F:[],onDefaultVariableSelect:Y,skipDefaultVariableContent:L},Math.random())})),t("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===q||"webpush"==q||"rcs"==q?428:400,display:N?"none":"block"}},{children:q!==d.WHATSAPP&&q!==(null==d?void 0:d.RCS)?q==d.WEBPUSH?t(C,{whatsappSpecificPickerMeta:V,template:z,onTemplateChange:e=>{null==J||J(e)},showVariableModal:A}):t(S,{onFocus:q===d.EMAIL?function(e){var t,a,i;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===U?"template_html_mobile":"template_html_desktop"),l=v(e+1),r=q===d.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(l):document.getElementById(l),n=Z(r),s=null==r?void 0:r.offsetLeft;"desktop"===U?n&&$.current&&(null===(a=null==o?void 0:o.contentWindow)||void 0===a||a.scrollTo(null!=s?s:0,n),f(l,m.background.warning.light,2,q,U)):n&&B.current&&(null===(i=null==o?void 0:o.contentWindow)||void 0===i||i.scrollTo(null!=s?s:0,n),f(l,m.background.warning.light,2,q,U))}:void 0,showVariableModal:A,discountCode:W,setDiscountCode:M}):q!==d.WHATSAPP&&q!==d.RCS||!K?t(P,{whatsappSpecificPickerMeta:V,template:z,onTemplateChange:e=>{null==J||J(e)},showVariableModal:A,variableListForImage:T,discountCode:W,setDiscountCode:M,fileName:I,setFileName:H}):t(s,{whatsappSpecificPickerMeta:V,template:z,showVariableModal:A,variableListForImage:T,discountCode:W,setDiscountCode:M})}))]})),[d.WHATSAPP,d.SMS].includes(q)&&!w&&!Q&&t(j,{children:t(c,Object.assign({color:m.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};export{y as default};
+`,V=n=>{const{showVariableMapping:w,showOnlyContent:V,whatsappSpecificPickerMeta:j,showVariableModal:M,discountCode:A,setDiscountCode:W,variableListForImage:T,showSampleValues:D,variableListFromProps:E,fileName:I,setFileName:H,skipDefaultVariableContent:$}=n,B=l(),L=l(),{variableList:F,setVariableList:O,variableCallback:_,showVariablePicker:N,setShowVariablePicker:R,device:U,display_content:G,channel:q,template:z,setTemplate:J,isWhatsappCarousel:K,isProductCarouselType:Q,hideDeviceContainerInPreview:X,onDefaultVariableSelect:Y}=u();const Z=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(x,{children:[t(k,Object.assign({showOnlyContent:V,showVariableMapping:w,isWhatsappCarousel:K,hideDeviceContainerInPreview:X,channel:q,skipDefaultVariableContent:$},{children:"mobile"===U?t(P,{ref:L,display_content:null!=G?G:"",channel:q,template:z,showSampleValues:D}):q!==c.WHATSAPP&&q!==c.RCS||!K?q===c.WEBPUSH?t(p,{showSampleValues:D,channel:q,hideHeader:!0,template:z}):q!==c.MESSAGE?t(b,{ref:B,channel:q,display_content:null!=G?G:"",showSampleValues:D}):t(a,{}):t(r,{ref:B,channel:q,template:z,showSampleValues:D,isPreview:!1,showArrows:!0})})),(Q||w)&&e(y,Object.assign({channel:q,isWhatsappCarousel:K,showVariableMapping:!0},{children:[t("div",Object.assign({style:{height:"100%",width:"whatsapp"===q?428:400,display:N?"block":"none"}},{children:t(m,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{O(o(E)),R(!1)},onSelect:e=>{_(e),O(o(E)),R(!1)},type:i.EMBEDDED,data:null!=F?F:[],onDefaultVariableSelect:Y,skipDefaultVariableContent:$},Math.random())})),t("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===q||"webpush"==q||"rcs"==q?428:400,display:N?"none":"block"}},{children:q!==c.WHATSAPP&&q!==(null==c?void 0:c.RCS)?q==c.WEBPUSH?t(C,{whatsappSpecificPickerMeta:j,template:z,onTemplateChange:e=>{null==J||J(e)},showVariableModal:M}):t(S,{onFocus:q===c.EMAIL?function(e){var t,a,i;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===U?"template_html_mobile":"template_html_desktop"),l=f(e+1),n=q===c.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(l):document.getElementById(l),r=Z(n),s=null==n?void 0:n.offsetLeft;"desktop"===U?r&&B.current&&(null===(a=null==o?void 0:o.contentWindow)||void 0===a||a.scrollTo(null!=s?s:0,r),v(l,h.background.warning.light,2,q,U)):r&&L.current&&(null===(i=null==o?void 0:o.contentWindow)||void 0===i||i.scrollTo(null!=s?s:0,r),v(l,h.background.warning.light,2,q,U))}:void 0,showVariableModal:M,discountCode:A,setDiscountCode:W}):q!==c.WHATSAPP&&q!==c.RCS||!K?t(g,{whatsappSpecificPickerMeta:j,template:z,onTemplateChange:e=>{null==J||J(e)},showVariableModal:M,variableListForImage:T,discountCode:A,setDiscountCode:W,fileName:I,setFileName:H}):t(s,{whatsappSpecificPickerMeta:j,template:z,showVariableModal:M,variableListForImage:T,discountCode:A,setDiscountCode:W})}))]})),[c.WHATSAPP,c.SMS].includes(q)&&!w&&!Q&&t(y,{children:t(d,Object.assign({color:h.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};export{V as default};

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

@@ -1,6 +1,6 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";const m=i.div`
-	background: ${o.surface.standard};
-	border: 1px solid ${o.stroke.primary};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t from"react";import i from"styled-components";import{Spinner as o}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{COLORS as p}from"../../../constants/Theme.js";const s=i.div`
+	background: ${p.surface.standard};
+	border: 1px solid ${p.stroke.primary};
 	border-radius: 8px;
 	overflow-y: auto;
 	/* max-height: 420px; */
@@ -11,10 +11,10 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${o.stroke.primary};
-`,d=i.div`
+	border-bottom-color: ${p.stroke.primary};
+`,m=i.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(m,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:s.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
+`,n=t.forwardRef(((t,i)=>{let{display_content:p,showSampleValues:n}=t;return e(s,Object.assign({ref:i},{children:[e(l,{children:[r(m,{}),r(m,{}),r(m,{})]}),r("div",{children:p?r(a,{showSampleValues:n,channel:d.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:p,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):r("div",Object.assign({style:{padding:20}},{children:r(o,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import o from"../../../assets/icons/arrow_back.svg.js";import a from"../../../assets/icons/info.svg.js";import"../../curtain/CurtainHelper.js";import{PickerType as r}from"../../variable-picker-v3/model.js";import{useState as s,useEffect as l}from"react";import{Button as n}from"../../button/Button.js";import{BikImageCropper as p}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import{PureSpinner as d}from"../../spinner/Spinner.js";import{InputWithVariables as m}from"../../input-with-vars/InputWithVariables.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as c,COLORS as g}from"../../../constants/Theme.js";import{HEADER_TYPES as h}from"../../template-preview/models/TemplateMeta.js";import{POD as u}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{TitleRegular as f,TitleMedium as v,BodySecondary as b,BodyCaption as j}from"../../TypographyStyle.js";import{validateURL as y}from"../../../utils/validator.js";import x from"../../../assets/icons/file.svg.js";import C from"../../../assets/icons/filePdf.svg.js";import I from"../../../assets/icons/image.svg.js";import M from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as w}from"../context/templateModalContext.js";import{isVariable as k}from"../utils/validateIsUrl.js";const E=E=>{let{setOpenEditMedia:O,mediaComponentFormat:A,variableListForImage:V,openEditMedia:T,uploadMedia:B,fileRef:D,useEditWhatsappTemplateMediaResponse:P,skipAddVariable:U}=E;const{pod:L,setHideCrossButton:G,setHideFooterButton:R}=w(),[W,S]=s(""),[H,$]=s(void 0),[F,_]=s(!1),[z,N]=s("");let q;if(l((()=>(R(!0),()=>{R(!1)})),[]),l((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&$(e)}),[P.loading]),q=A===h.IMAGE?"image/png, image/jpeg":A===h.VIDEO?"video/mp4":"application/pdf",!T)return e(t,{});const J=()=>A===h.IMAGE?"Image":A===h.VIDEO?"Video":"Document";return i(t,{children:[i("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e(o,{onClick:e=>{e.stopPropagation(),O(!1),S("")},style:{cursor:"pointer"},width:16,height:16}),e(f,{children:"Update Media"})]})),i("div",Object.assign({style:{position:"relative",padding:16,borderRadius:4,border:F?`1px dashed ${c.colorsV2.stroke.negative.vibrant}`:`1px dashed ${c.colorsV2.stroke.primary}`,backgroundColor:c.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:P.loading?"flex":"initial"}},{children:[i("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[P.loading?e(d,{width:"40px",height:"40px",color:g.content.brand}):e("div",Object.assign({style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:c.colorsV2.background.base}},{children:A===h.IMAGE?e(I,{width:40,height:40}):A===h.VIDEO?e(x,{width:40,height:40}):e(C,{width:40,height:40})})),e(v,{children:P.loading?"Upload in progress...":A===h.IMAGE?"Upload an image":A===h.VIDEO?"Upload a video":"Upload a document"}),e(b,Object.assign({color:g.content.secondary},{children:P.loading?`Your ${A.toLowerCase()} is getting loaded. This may take a couple of minutes.`:A===h.IMAGE?"JPEG/ PNG format • Max 5MB":A===h.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!P.loading&&i(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:e(m,{labelText:`${J()} URL`,onPickerToggle:e=>{G(!!e)},pickerType:r.EMBEDDED,portalElement:null!=H?H:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{N(e.actualValue),_(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:W,prevVariable:{actualValue:"",variableType:"string"},variablesList:V,placeHolder:U?"Enter URL":"Enter URL/Add variable",showAddButton:L!==u.CAMPAIGN||!U&&A===h.IMAGE})})),i("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(j,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(n,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:M,onClick:()=>{B(),_(!1)},size:"medium"})}))]}),F&&i("div",Object.assign({style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4}},{children:[e(a,{width:16,height:16,color:g.content.negative}),e(j,Object.assign({style:{color:g.content.negative}},{children:`Select ${J()}`}))]}))]})),!P.loading&&e("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",marginTop:8}},{children:e(n,{buttonText:`Add ${J()}`,onClick:()=>{z?y(z)||k(z)?(B(z),O(!1),S(""),_(!1)):S("Enter valid URL"):_(!0)}})})),e("input",{ref:D,style:{display:"none"},type:"file",onChange:P.handleImageUpload,accept:q}),!!P.selectedImage&&e(p,{aspectRatio:15/8,src:P.selectedImage,onCropComplete:P.onCropComplete,onCancel:()=>{P.setLoading(!1),P.setSelectedImage(""),D.current&&(D.current.value="")}})]})};export{E as default};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import i from"../../../assets/icons/arrow_back.svg.js";import a from"../../../assets/icons/info.svg.js";import"../../curtain/CurtainHelper.js";import{PickerType as r}from"../../variable-picker-v3/model.js";import{useState as s,useEffect as n}from"react";import{Button as l}from"../../button/Button.js";import{BikImageCropper as d}from"../../image-cropper/BikImageCropper.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{PureSpinner as c}from"../../spinner/Spinner.js";import{HEADER_TYPES as m}from"../../template-preview/models/TemplateMeta.js";import{POD as g}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as h,TitleMedium as u,BodySecondary as f,BodyCaption as b}from"../../TypographyStyle.js";import{validateURL as v}from"../../../utils/validator.js";import{DEFAULT_THEME as y,COLORS as x}from"../../../constants/Theme.js";import j from"../../../assets/icons/file.svg.js";import I from"../../../assets/icons/filePdf.svg.js";import C from"../../../assets/icons/image.svg.js";import M from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as E}from"../context/templateModalContext.js";import{isVariable as k}from"../utils/validateIsUrl.js";const w=w=>{let{setOpenEditMedia:O,mediaComponentFormat:V,variableListForImage:T,openEditMedia:A,uploadMedia:B,fileRef:D,useEditWhatsappTemplateMediaResponse:U,skipAddVariable:G}=w;const{pod:L,setHideCrossButton:P,setHideFooterButton:R}=E(),[H,S]=s(""),[$,W]=s(void 0),[F,N]=s(!1),[q,z]=s("");let J;if(n((()=>(R(!0),()=>{R(!1)})),[]),n((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&W(e)}),[U.loading]),J=V===m.IMAGE?"image/png, image/jpeg":V===m.VIDEO?"video/mp4":"application/pdf",!A)return e(t,{});const Y=()=>V===m.IMAGE?"Image":V===m.VIDEO?"Video":"Document";return o(t,{children:[o("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e(i,{onClick:e=>{e.stopPropagation(),O(!1),S("")},style:{cursor:"pointer"},width:16,height:16}),e(h,{children:"Update Media"})]})),o("div",Object.assign({style:{position:"relative",padding:16,borderRadius:4,border:F?`1px dashed ${y.colorsV2.stroke.negative.vibrant}`:`1px dashed ${y.colorsV2.stroke.primary}`,backgroundColor:y.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:U.loading?"flex":"initial"}},{children:[o("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[U.loading?e(c,{width:"40px",height:"40px",color:x.content.brand}):e("div",Object.assign({style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:y.colorsV2.background.base}},{children:V===m.IMAGE?e(C,{width:40,height:40}):V===m.VIDEO?e(j,{width:40,height:40}):e(I,{width:40,height:40})})),e(u,{children:U.loading?"Upload in progress...":V===m.IMAGE?"Upload an image":V===m.VIDEO?"Upload a video":"Upload a document"}),e(f,Object.assign({color:x.content.secondary},{children:U.loading?`Your ${V.toLowerCase()} is getting loaded. This may take a couple of minutes.`:V===m.IMAGE?"JPEG/ PNG format • Max 5MB":V===m.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!U.loading&&o(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:e(p,{labelText:`${Y()} URL`,onPickerToggle:e=>{P(!!e)},pickerType:r.EMBEDDED,portalElement:null!=$?$:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{z(e.actualValue),N(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:H,prevVariable:{actualValue:"",variableType:"string"},variablesList:T,placeHolder:G?"Enter URL":"Enter URL/Add variable",showAddButton:L!==g.CAMPAIGN||!G&&V===m.IMAGE})})),o("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(b,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(l,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:M,onClick:()=>{B(),N(!1)},size:"medium"})}))]}),F&&o("div",Object.assign({style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4}},{children:[e(a,{width:16,height:16,color:x.content.negative}),e(b,Object.assign({style:{color:x.content.negative}},{children:`Select ${Y()}`}))]}))]})),!U.loading&&e("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",marginTop:8}},{children:e(l,{buttonText:`Add ${Y()}`,onClick:()=>{q?v(q)||k(q)?(B(q),O(!1),S(""),N(!1)):S("Enter valid URL"):N(!0)}})})),e("input",{ref:D,style:{display:"none"},type:"file",onChange:U.handleImageUpload,accept:J}),!!U.selectedImage&&e(d,{aspectRatio:15/8,src:U.selectedImage,onCropComplete:U.onCropComplete,onCancel:()=>{U.setLoading(!1),U.setSelectedImage(""),D.current&&(D.current.value="")}})]})};export{w as default};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{cloneDeep as a}from"lodash";import{useState as n,useEffect as o,useMemo as l,useRef as r}from"react";import{Input as s}from"../../input/Input.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";const E=E=>{let{template:j,onTemplateChange:V,whatsappSpecificPickerMeta:x,showVariableModal:L}=E;var y,w,I;const[O,k]=n(null),[B,R]=n(null),{variableList:A,disableEditVariable:U,originalVariableList:W,setOriginalVariableList:F}=m(),{processWebpushTemplate:H,isValidUrl:D}=u(),[P,S]=n(null),[G,N]=n(null),[$,K]=n(null);o((()=>{A&&H(j,A,W,U).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;k(t),null==F||F(t),null==V||V(Object.assign({},i)),R(a)}))}),[A,U]);const{descriptionComponents:q,bodyVariables:z,titleVariables:J}=l((()=>{if(O&&B){const e=c(B,O);return P||S(e.iconImage),G||N(e.bannerImage),$||K(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[O,B]),{uploadMediaLink:Q,uploadMediaFiles:X,validateMimeType:Y}=x,Z=r(null),_=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"icon"),validateMimeType:Y,mediaComponent:P,fileRef:Z}),ee=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"image"),validateMimeType:Y,mediaComponent:G,fileRef:Z});function te(e,t){const i=Object.assign({},j),n=a(i);"icon"===t?(n.webpushBroadcastConfig.icon=[e],S([e])):"image"===t&&(n.webpushBroadcastConfig.image=[e],N([e])),null==V||V(Object.assign({},n))}function ie(e,t,i){var n;const o=Object.assign({},j),l=a(o),r="custom"===t&&"string"==typeof e,s=null===(n=null==l?void 0:l.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(s&&s.length>0){s[i]=r?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:s});l.webpushBroadcastConfig=t}null==V||V(l)}const ae=_.openEditMedia?_:ee.openEditMedia?ee:null;if(ae)return e(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(h,{mediaComponentFormat:p.IMAGE,uploadMedia:ae.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:ae,setOpenEditMedia:ae.setOpenEditMedia,openEditMedia:ae.openEditMedia,editIconRef:ae.editIconRef,fileRef:Z,skipAddVariable:!0})}));return t(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[P&&P.length?e(g,{children:e(b,{imageName:P,handleImageChange:_.handleImageChange,mediaType:p.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,G&&G.length?e(g,{children:e(b,{imageName:G,handleImageChange:ee.handleImageChange,mediaType:p.IMAGE,error:ee.error,isLoading:ee.loading,setOpenEditMedia:ee.setOpenEditMedia})}):null,(null==z?void 0:z.length)||(null==J?void 0:J.length)?e(C,{containerStyle:{paddingTop: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,null==q?void 0:q.map(((t,i)=>e(v,{originalVariableList:O,originalList:W,channel:d.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:L},i))),$&&$.length?e("div",Object.assign({style:{padding:"16px 14px"}},{children:e(s,{labelText:"Redirection Link",id:"redirection-link",value:$[0].replace("https://",""),errorMessage:D($[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:U?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var t;const i=`https://${e}`;K([i]);const n=a(j);(null===(t=n.webpushBroadcastConfig)||void 0===t?void 0:t.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[i]),null==V||V(Object.assign({},n))}(e)}})})):e(i,{}),(null===(w=null===(y=null==O?void 0:O.buttons)||void 0===y?void 0:y.filter((e=>"URL"===e.type)))||void 0===w?void 0:w.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==O?void 0:O.buttons)||void 0===I?void 0:I.map(((t,i)=>e(T,{variableListIndex:i,CTAoptions:null==x?void 0:x.CTAoptions,button:t,currentVariableList:O,updateSelectedURLTemplateBtn:ie},`${i}`)))]}))};export{E as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import a from"lodash/cloneDeep";import{useState as n,useEffect as o,useMemo as l,useRef as r}from"react";import{Input as s}from"../../input/Input.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";const E=E=>{let{template:j,onTemplateChange:V,whatsappSpecificPickerMeta:x,showVariableModal:L}=E;var y,w,I;const[O,k]=n(null),[B,R]=n(null),{variableList:A,disableEditVariable:U,originalVariableList:W,setOriginalVariableList:F}=m(),{processWebpushTemplate:H,isValidUrl:D}=u(),[P,S]=n(null),[G,N]=n(null),[$,K]=n(null);o((()=>{A&&H(j,A,W,U).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;k(t),null==F||F(t),null==V||V(Object.assign({},i)),R(a)}))}),[A,U]);const{descriptionComponents:q,bodyVariables:z,titleVariables:J}=l((()=>{if(O&&B){const e=c(B,O);return P||S(e.iconImage),G||N(e.bannerImage),$||K(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[O,B]),{uploadMediaLink:Q,uploadMediaFiles:X,validateMimeType:Y}=x,Z=r(null),_=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"icon"),validateMimeType:Y,mediaComponent:P,fileRef:Z}),ee=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"image"),validateMimeType:Y,mediaComponent:G,fileRef:Z});function te(e,t){const i=Object.assign({},j),n=a(i);"icon"===t?(n.webpushBroadcastConfig.icon=[e],S([e])):"image"===t&&(n.webpushBroadcastConfig.image=[e],N([e])),null==V||V(Object.assign({},n))}function ie(e,t,i){var n;const o=Object.assign({},j),l=a(o),r="custom"===t&&"string"==typeof e,s=null===(n=null==l?void 0:l.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(s&&s.length>0){s[i]=r?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:s});l.webpushBroadcastConfig=t}null==V||V(l)}const ae=_.openEditMedia?_:ee.openEditMedia?ee:null;if(ae)return e(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(h,{mediaComponentFormat:p.IMAGE,uploadMedia:ae.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:ae,setOpenEditMedia:ae.setOpenEditMedia,openEditMedia:ae.openEditMedia,editIconRef:ae.editIconRef,fileRef:Z,skipAddVariable:!0})}));return t(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[P&&P.length?e(g,{children:e(b,{imageName:P,handleImageChange:_.handleImageChange,mediaType:p.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,G&&G.length?e(g,{children:e(b,{imageName:G,handleImageChange:ee.handleImageChange,mediaType:p.IMAGE,error:ee.error,isLoading:ee.loading,setOpenEditMedia:ee.setOpenEditMedia})}):null,(null==z?void 0:z.length)||(null==J?void 0:J.length)?e(C,{containerStyle:{paddingTop: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,null==q?void 0:q.map(((t,i)=>e(v,{originalVariableList:O,originalList:W,channel:d.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:L},i))),$&&$.length?e("div",Object.assign({style:{padding:"16px 14px"}},{children:e(s,{labelText:"Redirection Link",id:"redirection-link",value:$[0].replace("https://",""),errorMessage:D($[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:U?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var t;const i=`https://${e}`;K([i]);const n=a(j);(null===(t=n.webpushBroadcastConfig)||void 0===t?void 0:t.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[i]),null==V||V(Object.assign({},n))}(e)}})})):e(i,{}),(null===(w=null===(y=null==O?void 0:O.buttons)||void 0===y?void 0:y.filter((e=>"URL"===e.type)))||void 0===w?void 0:w.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==O?void 0:O.buttons)||void 0===I?void 0:I.map(((t,i)=>e(T,{variableListIndex:i,CTAoptions:null==x?void 0:x.CTAoptions,button:t,currentVariableList:O,updateSelectedURLTemplateBtn:ie},`${i}`)))]}))};export{E as default};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{ApplicationType as o}from"@bikdotai/bik-models/growth/models/bik-store";import i from"../../../assets/icons/arrow_back.svg.js";import n from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import a from"../../../assets/icons/PlusIcon.js";import{cloneDeep as d}from"lodash";import{useState as s,useEffect as c}from"react";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import{ProductPickerModal as m}from"../../product-picker-v2/modal.js";import{ScreenName as v}from"../../product-picker-v2/type.js";import{Badge as h}from"../Badge/index.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./EditWhatsAppTemplateV2.js";import{ProductBox as y}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as b}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as j}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{isRCSChannel as x}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleMedium as C,TitleRegular as I,BodySecondary as k,BodyCaption as w}from"../../TypographyStyle.js";const O=O=>{let{template:P,whatsappSpecificPickerMeta:T,showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}=O;var A,M,V,D,F,R,W,$;const{selectedCarouselIndex:q,setTemplate:N,pickerConf:_,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:K,setCarouselProducts:J,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,setVariableCallback:ee,setShowVariablePicker:te,sliderRef:le}=g(),[oe,ie]=s(x(null==P?void 0:P.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(M=null===(A=null==P?void 0:P.mapping)||void 0===A?void 0:A.body)||void 0===M?void 0:M.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(D=null===(V=null==P?void 0:P.mapping)||void 0===V?void 0:V.body)||void 0===D?void 0:D.length)?"(Step 2/2)":"")),[ne,re]=s(!1),[ae,de]=s(!1),se=q===(null!=H?H:-1)-1,ce=(null!=q?q:-1)<1;c((()=>{var e,t,l,o;ie(x(null==P?void 0:P.channel)?"Carousel Cards":-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(t=null===(e=null==P?void 0:P.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(l=null==P?void 0:P.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[q]),c((()=>{te(!1)}),[q]);const ue=e=>{null==J||J([{name:"variable",productName:e.actualValue}])};return c((()=>{-1===q&&x(null==P?void 0:P.channel)&&(null==Z||Z(0))}),[q,null==P?void 0:P.channel]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!x(null==P?void 0:P.channel)&&null!=q&&q>=0&&!!(null===(R=null===(F=null==P?void 0:P.mapping)||void 0===F?void 0:F.body)||void 0===R?void 0:R.length)&&t(p,{Icon:i,onClick:()=>{null==Z||Z(-1)}}),t(C,Object.assign({style:{marginLeft:10}},{children:oe}))]})),z&&(null!==(W=null==K?void 0:K.length)&&void 0!==W?W:0)>0&&null!=q&&q>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(y,{editItem:()=>{1===(null==K?void 0:K.length)&&"variable"===K[0].name?(ee((()=>ue)),te(!0)):re(!ne)},cardBody:1===(null==K?void 0:K.length)&&"variable"===K[0].name?`${K[0].productName}`:`${null==K?void 0:K.length} Products Selected`,hideIcon:1===(null==K?void 0:K.length)&&"variable"===K[0].name,deleteItem:()=>{var e;if(1===(null==K?void 0:K.length)&&"variable"===K[0].name)return void(null==J||J([]));const t=d(Object.assign({},P));t&&(U&&U.length>0?null==U||U.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!==(o=U[l])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==N||N(t)),null==J||J([]),null==Y||Y()}}),K&&(null==K?void 0:K.length)>0&&"variable"!=K[0].name&&t(u,{disabled:(null!==($=null==K?void 0:K.length)&&void 0!==$?$:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{de(!0),re(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==K?void 0:K.length)&&null!=q&&q>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(I,{children:"Product(s)"}),t(k,{children:`Select ${null!=H?H:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:Q?16:12,marginRight:Q?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${b.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(a,{width:18,height:18,color:b.content.secondary})})),onClick:e=>{re(!0)}}),G===j.CHATBOT&&e(l,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8,flex:1}}),t(w,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8,flex:1}})]})),t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${b.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(a,{width:18,height:18,color:b.content.secondary})})),onClick:e=>{ee((()=>ue)),te(!0)}})]})]})),Q&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(h,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=q?q:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:b.surface.hovered,alignItems:"center"}},{children:[t(p,{Icon:n,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:b.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickPrev(),(null!=q?q:-1)<1||null==Z||Z((e=>e-1))}}),t(I,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:b.content.secondary},{children:`Card ${(null!=q?q:0)+1}/${H}`})),t(p,{Icon:r,width:8,height:14,disabled:se,svgStyle:se?{}:{color:b.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickNext(),(null!=q?q:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),t(f,{whatsappSpecificPickerMeta:T,template:P,onTemplateChange:e=>{null==N||N(e)},showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}),ne&&_&&t(m,{zIndex:200,startupScreen:ae?v.RearrangeProducts:v.Collections,rearrangeEnabled:!0,storeId:_.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[i]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=K?K:[]),collectionFetcher:_.fetchCollections,productFetcher:_.fetchProducts,onAdd:(e,t)=>{var l,o,i,n,r,a;de(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const d=e[t].products;if(void 0!==d&&Object.keys(d).length)for(const e of Object.keys(d)){const c=d[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:v,displayOrder:h}=c[u],g={name:p,image:null!==(o=null!=m?m:null===(l=d[e])||void 0===l?void 0:l.image)&&void 0!==o?o:"",quantity:v,variantId:u,productId:e,displayOrder:h,collectionId:t,productName:null!==(n=null===(i=d[e])||void 0===i?void 0:i.name)&&void 0!==n?n:"",productImage:null!==(a=null===(r=d[e])||void 0===r?void 0:r.image)&&void 0!==a?a:""};s.push(g)}}}const c=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=s.map((e=>e.image)),p=d(Object.assign({},P));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==U?void 0:U[t])&&void 0!==l?l:""]})),null==N||N(p)),null==J||J(c),re(!1)},searchInCollectionFetcher:_.searchInCollection,searchFetcher:_.searchProducts,visible:ne,onClose:()=>{re(!1)},exactLimit:null!=H?H:1,appType:_.appType||o.BIK})]}))};export{O as default};
+import{jsxs as e,jsx as l,Fragment as t}from"react/jsx-runtime";import{ApplicationType as o}from"@bikdotai/bik-models/growth/models/bik-store";import n from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import a from"../../../assets/icons/PlusIcon.js";import d from"lodash/cloneDeep";import{useState as s,useEffect as c}from"react";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import{ProductPickerModal as m}from"../../product-picker-v2/modal.js";import{ScreenName as v}from"../../product-picker-v2/type.js";import{Badge as h}from"../Badge/index.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./EditWhatsAppTemplateV2.js";import{ProductBox as y}from"./ProductBox.js";import{isRCSChannel as b}from"../../template-preview/helpers/templateMiscHelper.js";import{POD as x}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleMedium as C,TitleRegular as j,BodySecondary as I,BodyCaption as k}from"../../TypographyStyle.js";import{COLORS as O}from"../../../constants/Theme.js";const w=w=>{let{template:P,whatsappSpecificPickerMeta:T,showVariableModal:S,variableListForImage:B,discountCode:E,setDiscountCode:L}=w;var D,F,M,R,V,$,q,A;const{selectedCarouselIndex:N,setTemplate:W,pickerConf:_,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:K,setCarouselProducts:J,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,setVariableCallback:ee,setShowVariablePicker:le,sliderRef:te}=g(),[oe,ne]=s(b(null==P?void 0:P.channel)?"Carousel Cards":-1==N?"First Message (Step 1/2)":z?"Product Carousel "+((null===(F=null===(D=null==P?void 0:P.mapping)||void 0===D?void 0:D.body)||void 0===F?void 0:F.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(R=null===(M=null==P?void 0:P.mapping)||void 0===M?void 0:M.body)||void 0===R?void 0:R.length)?"(Step 2/2)":"")),[ie,re]=s(!1),[ae,de]=s(!1),se=N===(null!=H?H:-1)-1,ce=(null!=N?N:-1)<1;c((()=>{var e,l,t,o;ne(b(null==P?void 0:P.channel)?"Carousel Cards":-1==N?"First Message (Step 1/2)":z?"Product Carousel "+((null===(l=null===(e=null==P?void 0:P.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(t=null==P?void 0:P.mapping)||void 0===t?void 0:t.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[N]),c((()=>{le(!1)}),[N]);const ue=e=>{null==J||J([{name:"variable",productName:e.actualValue}])};return c((()=>{-1===N&&b(null==P?void 0:P.channel)&&(null==Z||Z(0))}),[N,null==P?void 0:P.channel]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!b(null==P?void 0:P.channel)&&null!=N&&N>=0&&!!(null===($=null===(V=null==P?void 0:P.mapping)||void 0===V?void 0:V.body)||void 0===$?void 0:$.length)&&l(p,{Icon:n,onClick:()=>{null==Z||Z(-1)}}),l(C,Object.assign({style:{marginLeft:10}},{children:oe}))]})),z&&(null!==(q=null==K?void 0:K.length)&&void 0!==q?q:0)>0&&null!=N&&N>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[l(y,{editItem:()=>{1===(null==K?void 0:K.length)&&"variable"===K[0].name?(ee((()=>ue)),le(!0)):re(!ie)},cardBody:1===(null==K?void 0:K.length)&&"variable"===K[0].name?`${K[0].productName}`:`${null==K?void 0:K.length} Products Selected`,hideIcon:1===(null==K?void 0:K.length)&&"variable"===K[0].name,deleteItem:()=>{var e;if(1===(null==K?void 0:K.length)&&"variable"===K[0].name)return void(null==J||J([]));const l=d(Object.assign({},P));l&&(U&&U.length>0?null==U||U.forEach(((e,t)=>{var o;l.components[1].cards[t].components[0].example.header_handle=[null!==(o=U[t])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==l?void 0:l.components[1].cards)||void 0===e||e.forEach(((e,t)=>{l.components[1].cards[t].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==W||W(l)),null==J||J([]),null==Y||Y()}}),K&&(null==K?void 0:K.length)>0&&"variable"!=K[0].name&&l(u,{disabled:(null!==(A=null==K?void 0:K.length)&&void 0!==A?A:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{de(!0),re(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==K?void 0:K.length)&&null!=N&&N>=0&&e(t,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[l(j,{children:"Product(s)"}),l(I,{children:`Select ${null!=H?H:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:Q?16:12,marginRight:Q?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[l(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${O.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>l("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:l(a,{width:18,height:18,color:O.content.secondary})})),onClick:e=>{re(!0)}}),G===x.CHATBOT&&e(t,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[l("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8,flex:1}}),l(k,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),l("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8,flex:1}})]})),l(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${O.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>l("div",Object.assign({style:{display:"flex"}},{children:l(a,{width:18,height:18,color:O.content.secondary})})),onClick:e=>{ee((()=>ue)),le(!0)}})]})]})),Q&&l("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:l(h,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=N?N:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:O.surface.hovered,alignItems:"center"}},{children:[l(p,{Icon:i,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:O.content.secondary},onClick:()=>{var e;null===(e=null==te?void 0:te.current)||void 0===e||e.slickPrev(),(null!=N?N:-1)<1||null==Z||Z((e=>e-1))}}),l(j,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:O.content.secondary},{children:`Card ${(null!=N?N:0)+1}/${H}`})),l(p,{Icon:r,width:8,height:14,disabled:se,svgStyle:se?{}:{color:O.content.secondary},onClick:()=>{var e;null===(e=null==te?void 0:te.current)||void 0===e||e.slickNext(),(null!=N?N:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),l(f,{whatsappSpecificPickerMeta:T,template:P,onTemplateChange:e=>{null==W||W(e)},showVariableModal:S,variableListForImage:B,discountCode:E,setDiscountCode:L}),ie&&_&&l(m,{zIndex:200,startupScreen:ae?v.RearrangeProducts:v.Collections,rearrangeEnabled:!0,storeId:_.storeId,selectedItems:(e=>{if(e.length>0){const l={};for(const t of e){const e=null==t?void 0:t.collectionId,o=t.productId,n=t.variantId;e in l||(l[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in l[e].products||(l[e].products[o]={variants:{},name:(null==t?void 0:t.productName)||"",image:(null==t?void 0:t.productImage)||""}),l[e].products[o].variants[n]={name:(null==t?void 0:t.name)||"",price:"",image:(null==t?void 0:t.image)||"",quantity:t.quantity||0,displayOrder:t.displayOrder}}return l}return{}})(null!=K?K:[]),collectionFetcher:_.fetchCollections,productFetcher:_.fetchProducts,onAdd:(e,l)=>{var t,o,n,i,r,a;de(!1);const s=[];delete e.isCustom;for(const l of Object.keys(e)){const d=e[l].products;if(void 0!==d&&Object.keys(d).length)for(const e of Object.keys(d)){const c=d[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:v,displayOrder:h}=c[u],g={name:p,image:null!==(o=null!=m?m:null===(t=d[e])||void 0===t?void 0:t.image)&&void 0!==o?o:"",quantity:v,variantId:u,productId:e,displayOrder:h,collectionId:l,productName:null!==(i=null===(n=d[e])||void 0===n?void 0:n.name)&&void 0!==i?i:"",productImage:null!==(a=null===(r=d[e])||void 0===r?void 0:r.image)&&void 0!==a?a:""};s.push(g)}}}const c=s.sort(((e,l)=>e.displayOrder-l.displayOrder)),u=s.map((e=>e.image)),p=d(Object.assign({},P));p&&(u.forEach(((e,l)=>{var t;p.components[1].cards[l].components[0].example.header_handle=e?[e]:[null!==(t=null==U?void 0:U[l])&&void 0!==t?t:""]})),null==W||W(p)),null==J||J(c),re(!1)},searchInCollectionFetcher:_.searchInCollection,searchFetcher:_.searchProducts,visible:ie,onClose:()=>{re(!1)},exactLimit:null!=H?H:1,appType:_.appType||o.BIK})]}))};export{w as default};

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import i from"../../../assets/icons/edit.svg.js";import a from"../../../assets/icons/info.svg.js";import{format as n}from"date-fns";import{cloneDeep as o}from"lodash";import{useState as s,useEffect as u}from"react";import d from"styled-components";import{Alert as r}from"../../alerts/Alert.js";import{ALERT_TYPES as c}from"../../alerts/AlertHelper.js";import{CustomDateTime as p}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as m}from"../../dropdown/Dropdown.js";import{Input as v}from"../../input/Input.js";import{truncate as b}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as g}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as O}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as j}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as y}from"../../template-preview/models/WebpushTemplate.js";import{POD as x,BUTTON_TYPE as h}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as f,BodyPrimary as T}from"../../TypographyStyle.js";import _ from"../../../utils/StringUtils.js";import{COLORS as E}from"../../../constants/Theme.js";import{useTemplateModalContext as C}from"../context/templateModalContext.js";import{updateVariables as V}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as S}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as k}from"./QueryParamsComponent.js";const A=d.div`
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import i from"../../../assets/icons/edit.svg.js";import a from"../../../assets/icons/info.svg.js";import{format as n}from"date-fns";import o from"lodash/cloneDeep";import{useState as s,useEffect as u}from"react";import d from"styled-components";import{Alert as r}from"../../alerts/Alert.js";import{ALERT_TYPES as c}from"../../alerts/AlertHelper.js";import{CustomDateTime as p}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as m}from"../../dropdown/Dropdown.js";import{Input as v}from"../../input/Input.js";import{truncate as b}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as g}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as O}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as j}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as y}from"../../template-preview/models/WebpushTemplate.js";import{POD as x,BUTTON_TYPE as h}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as f,BodyPrimary as T}from"../../TypographyStyle.js";import _ from"../../../utils/StringUtils.js";import{COLORS as E}from"../../../constants/Theme.js";import{useTemplateModalContext as C}from"../context/templateModalContext.js";import{updateVariables as V}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as S}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as k}from"./QueryParamsComponent.js";const A=d.div`
 	/* surface/$color-background-warning-light */
 
 	background: ${e=>e.focused&&e.channel===j.EMAIL?E.background.warning.light:"transparent"};

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

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

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

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

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

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