@bikdotai/bik-component-library 0.0.646 → 0.0.647--beta--analytics0.2

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

@@ -1,4 +1,4 @@
-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 P from"./EditWebpushTemplate.js";import g from"./EditWhatsAppTemplateV2.js";import C from"./MobilePreview.js";import k from"./VariableConnectorsPanel.js";const S=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{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`
 	display: flex;
 	//	height: 100%;
 `,j=r.div`
@@ -17,6 +17,6 @@ import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import"../../cur
 	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?"flex":"initial"};
+	display: ${e=>!e.hideDeviceContainerInPreview||e.channel!==d.WHATSAPP&&e.channel!==d.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:U,device:G,display_content:q,channel:z,template:J,setTemplate:K,isWhatsappCarousel:Q,isProductCarouselType:R,hideDeviceContainerInPreview:X,onDefaultVariableSelect:Y}=u();const Z=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(S,{children:[t(x,Object.assign({showOnlyContent:y,showVariableMapping:w,isWhatsappCarousel:Q,hideDeviceContainerInPreview:X,channel:z,skipDefaultVariableContent:L},{children:"mobile"===G?t(C,{ref:B,display_content:null!=q?q:"",channel:z,template:J,showSampleValues:D}):z===d.WHATSAPP&&Q?t(n,{ref:$,channel:z,template:J,showSampleValues:D,isPreview:!1,showArrows:!0}):z===d.WEBPUSH?t(p,{showSampleValues:D,channel:z,hideHeader:!0,template:J}):z!==d.MESSAGE?t(b,{ref:$,channel:z,display_content:null!=q?q:"",showSampleValues:D}):t(a,{})})),(R||w)&&e(j,Object.assign({channel:z,isWhatsappCarousel:Q,showVariableMapping:!0},{children:[t("div",Object.assign({style:{height:"100%",width:"whatsapp"===z?428:400,display:N?"block":"none"}},{children:t(h,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{O(o(E)),U(!1)},onSelect:e=>{_(e),O(o(E)),U(!1)},type:i.EMBEDDED,data:null!=F?F:[],onDefaultVariableSelect:Y,skipDefaultVariableContent:L},Math.random())})),t("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===z||"webpush"==z?428:400,display:N?"none":"block"}},{children:z!==d.WHATSAPP?z==d.WEBPUSH?t(P,{whatsappSpecificPickerMeta:V,template:J,onTemplateChange:e=>{null==K||K(e)},showVariableModal:A}):t(k,{onFocus:z===d.EMAIL?function(e){var t,a,i;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),l=v(e+1),r=z===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"===G?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,z,G)):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,z,G))}:void 0,showVariableModal:A,discountCode:W,setDiscountCode:M}):z===d.WHATSAPP&&Q?t(s,{whatsappSpecificPickerMeta:V,template:J,showVariableModal:A,variableListForImage:T,discountCode:W,setDiscountCode:M}):t(g,{whatsappSpecificPickerMeta:V,template:J,onTemplateChange:e=>{null==K||K(e)},showVariableModal:A,variableListForImage:T,discountCode:W,setDiscountCode:M,fileName:I,setFileName:H})}))]})),[d.WHATSAPP,d.SMS].includes(z)&&!w&&!R&&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};
+`,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};

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
 import { WEB_PUSH_COMPONENT_TYPE } from "../../template-preview/models/WebpushTemplate";
 import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
+import { ComponentType } from './VariableConnectorWhatsApp';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;
@@ -15,7 +16,7 @@ export interface VariableConnectorProps {
     showVariableModal?: boolean;
     setShowDiscountCheckBox?: any;
     buttonType?: BUTTON_TYPE;
-    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer' | WEB_PUSH_COMPONENT_TYPE;
+    componentType?: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
     CTAoptions?: ButtonPlaceHolderOptions[];
 }
 declare const VariableConnector: React.FC<VariableConnectorProps>;

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

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

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

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

@@ -18,6 +18,7 @@ export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplat
     }[];
     bodyVariables: string[];
     headerVariables: string[];
+    titleVariables: string[];
 };
 export declare const getAllDataFromWebpushTemplateComponent: (mapping: WebpushTemplateType['webpushBroadcastConfig'], templateVariables: WebpushTemplateVariables) => {
     bodyVariables: string[];

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

@@ -1 +1 @@
-const o=o=>{var e,i;const n=[],t=[],l=[],p=[],a=[];let d=null;return o.components.forEach(((o,e)=>{var i,p,a,s,r,u;if("BODY"===o.type&&o.text&&n.push({component:o,i:e,type:"BODY"}),"HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format&&(null===(p=null===(i=o.example)||void 0===i?void 0:i.header_handle)||void 0===p?void 0:p[0])&&(d=o),"HEADER"===o.type&&"TEXT"===o.format&&n.push({component:o,i:e,type:"HEADER"}),"BUTTONS"===o.type){const i=null===(s=null===(a=o.buttons)||void 0===a?void 0:a.filter)||void 0===s?void 0:s.call(a,(o=>"URL"===o.type));t.push({component:Object.assign(Object.assign({},o),{buttons:i}),i:e});const n=null===(u=null===(r=o.buttons)||void 0===r?void 0:r.filter)||void 0===u?void 0:u.call(r,(o=>"QUICK_REPLY"===o.type));l.push({component:Object.assign(Object.assign({},o),{buttons:n}),i:e})}"limited_time_offer"===o.type&&n.push({component:o,i:e,type:"limited_time_offer"})})),o.mapping&&(null===(e=o.mapping.body)||void 0===e||e.forEach((o=>{p.push(o)}))),o.mapping&&(null===(i=o.mapping.header)||void 0===i||i.forEach((o=>{a.push(o)}))),{imageComponent:d,descriptionComponents:n,urlBtns:t,qrbBtns:l,bodyVariables:p,headerVariables:a}},e=(o,e)=>{var i,n,t,l,p;return{bodyVariables:(null===(i=null==o?void 0:o.body)||void 0===i?void 0:i.map((o=>o)))||[],titleVariables:(null===(n=null==o?void 0:o.title)||void 0===n?void 0:n.map((o=>o)))||[],iconImage:(null===(t=null==o?void 0:o.icon)||void 0===t?void 0:t.map((o=>o)))||[],bannerImage:(null===(l=null==o?void 0:o.image)||void 0===l?void 0:l.map((o=>o)))||[],redirectionLink:(null===(p=null==o?void 0:o.redirectionLink)||void 0===p?void 0:p.map((o=>o)))||[],descriptionComponents:Object.keys(e).map((o=>({type:o.toUpperCase(),component:Object.assign(Object.assign({},e[o]),{type:o.toUpperCase()})})))}};export{o as getAllDataFromTemplateComponent,e as getAllDataFromWebpushTemplateComponent};
+const o=o=>{var e,i,n;const t=[],l=[],p=[],a=[],d=[],s=[];let r=null;return o.components.forEach(((o,e)=>{var i,n,a,d,s,u;if("BODY"===o.type&&o.text&&t.push({component:o,i:e,type:"BODY"}),"TITLE"===o.type&&o.text&&t.push({component:o,i:e,type:"TITLE"}),"HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format&&(null===(n=null===(i=o.example)||void 0===i?void 0:i.header_handle)||void 0===n?void 0:n[0])&&(r=o),"HEADER"===o.type&&"TEXT"===o.format&&t.push({component:o,i:e,type:"HEADER"}),"BUTTONS"===o.type){const i=null===(d=null===(a=o.buttons)||void 0===a?void 0:a.filter)||void 0===d?void 0:d.call(a,(o=>"URL"===o.type));l.push({component:Object.assign(Object.assign({},o),{buttons:i}),i:e});const n=null===(u=null===(s=o.buttons)||void 0===s?void 0:s.filter)||void 0===u?void 0:u.call(s,(o=>"QUICK_REPLY"===o.type));p.push({component:Object.assign(Object.assign({},o),{buttons:n}),i:e})}"limited_time_offer"===o.type&&t.push({component:o,i:e,type:"limited_time_offer"})})),o.mapping&&(null===(e=o.mapping.body)||void 0===e||e.forEach((o=>{a.push(o)}))),o.mapping&&(null===(i=o.mapping.header)||void 0===i||i.forEach((o=>{d.push(o)}))),o.mapping&&(null===(n=o.mapping.title)||void 0===n||n.forEach((o=>{s.push(o)}))),{imageComponent:r,descriptionComponents:t,urlBtns:l,qrbBtns:p,bodyVariables:a,headerVariables:d,titleVariables:s}},e=(o,e)=>{var i,n,t,l,p;return{bodyVariables:(null===(i=null==o?void 0:o.body)||void 0===i?void 0:i.map((o=>o)))||[],titleVariables:(null===(n=null==o?void 0:o.title)||void 0===n?void 0:n.map((o=>o)))||[],iconImage:(null===(t=null==o?void 0:o.icon)||void 0===t?void 0:t.map((o=>o)))||[],bannerImage:(null===(l=null==o?void 0:o.image)||void 0===l?void 0:l.map((o=>o)))||[],redirectionLink:(null===(p=null==o?void 0:o.redirectionLink)||void 0===p?void 0:p.map((o=>o)))||[],descriptionComponents:Object.keys(e).map((o=>({type:o.toUpperCase(),component:Object.assign(Object.assign({},e[o]),{type:o.toUpperCase()})})))}};export{o as getAllDataFromTemplateComponent,e as getAllDataFromWebpushTemplateComponent};

package/dist/esm/components/template-context-mapper/utils/getPreviewDimension.js

@@ -1 +1 @@
-import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";const r=r=>{switch(r){case e.WHATSAPP:return 240;case e.SMS:return 300;case e.EMAIL:return 360;default:return 300}};export{r as getPreviewWidth};
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";const r=r=>{switch(r){case e.WHATSAPP:return 240;case e.SMS:return 300;case e.EMAIL:return 360;case e.RCS:return 240;default:return 300}};export{r as getPreviewWidth};

package/dist/esm/components/template-preview/RCS/RCSButtons.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const RCSButtons: React.FC<{
+    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    text: string;
+    extraContent?: string;
+    placeholder?: string;
+    textTypography?: React.FC;
+    size?: 'small' | 'large';
+}>;

package/dist/esm/components/template-preview/RCS/RCSButtons.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Caption as r,BodySecondary as i}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{RCSChatBtnContainer as o}from"./RCSPreview.styled.js";const l=l=>{let{Icon:c,text:s,extraContent:a,placeholder:p,textTypography:d,size:h}=l;const f=d||i;return e(o,{children:t("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[c&&e(c,{color:n.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e("div",Object.assign({style:{border:"1px solid #E0E0E0",width:"100%",borderRadius:30,padding:"8px 12px"}},{children:e(f,Object.assign({style:{color:n.special.brand.facebook,textAlign:"center",fontSize:"small"===h?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:s}))}))]})),!!a&&e(r,Object.assign({style:{marginTop:2,color:n.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:p?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(p):a}))]}))})};export{l as RCSButtons};

package/dist/esm/components/template-preview/RCS/RCSChatHeader.d.ts

@@ -0,0 +1,2 @@
+declare const RCSChatHeader: () => import("react/jsx-runtime").JSX.Element;
+export default RCSChatHeader;

package/dist/esm/components/template-preview/RCS/RCSChatHeader.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import r from"../../../assets/icons/arrow_left.svg.js";import e from"../../../assets/icons/user_icon.svg.js";import s from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as n}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as a,IconContainer as h,TitleContainer as m,SubTitle as d}from"./RCSPreview.styled.js";const l=()=>o(c,{children:[o(a,{children:[t(r,{height:16,width:16,color:i.content.secondary}),t(h,{children:t(e,{height:14,width:14,color:i.content.primaryInverse})}),o(m,{children:[t(n,Object.assign({color:i.content.secondary,style:{fontWeight:600}},{children:"Brand name"})),t(d,{children:"Business account"})]})]}),t(s,{height:16,width:16,color:i.content.secondary})]});export{l as default};

package/dist/esm/components/template-preview/RCS/RCSChatPreview.d.ts

@@ -0,0 +1,2 @@
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
+export declare const RCSChatPreview: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-preview/RCS/RCSChatPreview.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../../template-context-mapper/context/templateModalContext.js";import{VariableEditorHelper as a}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as s}from"../models/TemplateMeta.js";import{RCSButtons as o}from"./RCSButtons.js";import{RCSMediaCard as i,PdfMediaCard as d}from"./RCSMediaCard.js";import{RCSPreviewContainer as n,HeaderTextContainer as m,TitleTextContainer as p,RcsHtmlContainer as u}from"./RCSPreview.styled.js";const h=new a,c=a=>{const{bodyText:c,titleText:g,headerMediaType:T,headerText:C,headerAssetLink:x,headerAssetName:y,imagePreviewStyles:M,size:f,bodyVariableList:v,headerVariableList:b,buttons:j,carouselCardIndex:L,isWhatsappCarousel:w,isPreview:S,titleVariableList:A}=a,E=h.format(null==c?void 0:c.replace(/</g,"&lt;").replace(/>/g,"&gt;"),v),I=h.format(null==C?void 0:C.replace(/</g,"&lt;").replace(/>/g,"&gt;"),b),N=h.format(null==g?void 0:g.replace(/</g,"&lt;").replace(/>/g,"&gt;"),A),{selectedCarouselIndex:P,isProductCarouselType:_,errorIndexes:H,isCarouselHovered:O}=l();return e(n,Object.assign({isCarouselCard:null!=L&&L>-1,showBorder:null!=L&&L===P||_&&null!=L&&L>-1&&null!=P&&P>-1,hasError:null==H?void 0:H.includes(null!=L?L:-2),isWhatsappCarousel:w,isPreview:S,showDashedBorder:_&&O&&(null!=P?P:-1)<0&&(null!=L?L:-1)>-1},{children:[T===s.TEXT?r(m,{dangerouslySetInnerHTML:{__html:I}}):T!==s.NONE&&x&&T!==s.DOCUMENT?r(i,{headerAssetLink:x||"",headerAssetName:y,mediaType:T,imagePreviewStyles:T===s.IMAGE?M:{}}):r(t,{}),!!g&&r(t,{children:r(p,{dangerouslySetInnerHTML:{__html:N}})}),!!c&&r(t,{children:r(u,{dangerouslySetInnerHTML:{__html:E},style:{paddingTop:g?0:12}})}),T===s.DOCUMENT?r(d,Object.assign({},{headerAssetLink:x,headerAssetName:y,headerMediaType:T})):r(t,{}),j&&j.length>0?j.map(((e,t)=>r(o,{text:e.text,size:f},t))):r(t,{})]}))};export{c as RCSChatPreview};

package/dist/esm/components/template-preview/RCS/RCSMediaCard.d.ts

@@ -0,0 +1,14 @@
+import { HEADER_TYPES } from "../../../index";
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+export declare const PdfMediaCard: React.FC<{
+    headerAssetLink?: string;
+    headerAssetName?: string;
+    mediaType?: HEADER_TYPES;
+}>;
+export declare const RCSMediaCard: React.FC<{
+    headerAssetLink: string;
+    headerAssetName?: string;
+    mediaType: HEADER_TYPES;
+    imagePreviewStyles?: CSSProperties;
+}>;

package/dist/esm/components/template-preview/RCS/RCSMediaCard.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import t from"../../../assets/icons/RCS_PDF.svg.js";import{COLORS as s}from"../../../constants/Theme.js";import{RCSPdfContainer as o,PdfComineText as a,PdfText as d,RCSMediaContainer as m}from"./RCSPreview.styled.js";import{HEADER_TYPES as n}from"../models/TemplateMeta.js";import{ShimmerImage as l}from"../../shimmer-image/ShimmerImage.js";const h=r=>{let{headerAssetLink:m,headerAssetName:n,mediaType:l}=r;var h;const c=t,p=n||(null===(h=null==m?void 0:m.split("/").pop())||void 0===h?void 0:h.replace(".pdf",""))||"xxxxxxxx";return e(o,{children:[i(c,{height:24,width:24,color:s.icon.placeholder}),!!p&&e(a,{children:[i(d,{children:p}),i(d,{children:".pdf"})]})]})},c=e=>{let{headerAssetLink:t,headerAssetName:s,mediaType:o,imagePreviewStyles:a}=e;return i(m,{children:o===n.IMAGE?i(l,{imageUrl:t,alt:t,width:"100%",height:240,imagePreviewStyles:Object.assign(Object.assign({},a),{borderTopRightRadius:8,borderTopLeftRadius:8})}):o===n.VIDEO?i("video",Object.assign({src:t,style:{width:"100%",minHeight:"240px",height:"240px"},controls:!0,muted:!0},{children:i("track",{default:!0,kind:"captions",srcLang:"en",src:t})})):i(r,{})})};export{h as PdfMediaCard,c as RCSMediaCard};

package/dist/esm/components/template-preview/RCS/RCSPreview.styled.d.ts

@@ -0,0 +1,29 @@
+import { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';
+export declare const RCSContainer: import("styled-components").StyledComponent<"div", any, {
+    isCarousal?: boolean | undefined;
+    templateType?: RCS_TEMPLATE_TYPE | undefined;
+}, never>;
+export declare const RcsHtmlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RCSPreviewContainer: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    showDashedBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+}, never>;
+export declare const RCSChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RCSMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RCSPdfContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PdfComineText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PdfText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const RCSCarousalContainer: import("styled-components").StyledComponent<"div", any, {
+    borderRadius?: string | undefined;
+}, never>;
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubTitle: import("styled-components").StyledComponent<"p", any, {}, never>;