@bikdotai/bik-component-library 0.0.528-beta.0 → 0.0.528

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

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

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

@@ -26,7 +26,6 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
-	height: 100%;
 `,n=e.div`
 	padding-bottom: 0px;
 	min-width: 285px;

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

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

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

@@ -15,5 +15,5 @@ export interface EditWhatsAppTemplateV2Props {
     fileName?: string;
     setFileName?: (name: string) => void;
 }
-declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditWhatsAppTemplateV2;

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

@@ -1,4 +1,4 @@
-import{jsx as o,jsxs as e,Fragment as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useRef as i,useState as l,useEffect as a}from"react";import s from"styled-components";import{Input as d}from"../../input/Input.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as m}from"../utils/getDataFromTemplateComponent.js";import{isVariable as v}from"../utils/validateIsUrl.js";import{validateInputName as b}from"../utils/validateName.js";import{BackTrackComponent as g}from"./BackTrackComponent.js";import{DiscountCodeComponent as f}from"./DiscountCodeComponent.js";import h from"./EditMediaModal.js";import j from"./EditMediaV2.js";import{EditTemplateMediaContainer as O}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as C}from"./useEditWhtasappTemplateMedia.js";import T from"./VariableConnector.js";import{Container as x}from"./VariableConnectorsPanel.js";import y from"./VariableConnectorWhatsApp.js";import V from"./VariableEditorHeader.js";import E from"./WhatsAppTemplateCardButtonV2.js";const B=s=>{let{template:B,onTemplateChange:L,whatsappSpecificPickerMeta:M,showVariableModal:I,variableList:R,variableListForImage:U,setDiscountCode:w,fileName:N,setFileName:P}=s;var A,D,_,H,S,F,Q,q,Y,K,W,$,G,X,z,J,Z,oo,eo,no,to,io,lo,ao,so,ro,po,uo,co,mo,vo,bo,go;const fo=B.isCarouselType,{originalVariableList:ho,pod:jo,extras:Oo,selectedCarouselIndex:Co,isProductCarouselType:To}=u(),{descriptionComponents:xo,urlBtns:yo,qrbBtns:Vo,imageComponent:Eo,bodyVariables:Bo,headerVariables:ko}=m(B),Lo=i(null),Mo=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});console.log("updatedVariableList1",Mo);const[Io,Ro]=l(!1),[Uo,wo]=l(-1===Co?{descriptionComponents:xo,urlBtns:yo,qrbBtns:Vo,imageComponent:Eo,bodyVariables:Bo,headerVariables:ko}:{}),{uploadMediaLink:No,uploadMediaFiles:Po}=M,Ao=C({uploadMediaLink:No,uploadMediaFiles:Po,updateTemplateImageUrl:function(o,e){var n,i,l,a,s,d,r,p;let u;u=null!=Co&&Co>-1?{components:null===(i=null===(n=B.components[1])||void 0===n?void 0:n.cards)||void 0===i?void 0:i[Co].components,mapping:null===(a=null===(l=null==B?void 0:B.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Co]}:Object.assign({},B);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==c&&c>-1&&(null==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:e,example:{header_handle:[o]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=Co&&Co>-1){const o=t(B);o.components[1].cards[Co].components=u.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[Co]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},o)),_o(!0)}else null==L||L(Object.assign({},u))},mediaComponent:fo?Uo.imageComponent:Eo,fileRef:Lo}),[Do,_o]=l(!1),[Ho,So]=l(N),[Fo,Qo]=l();function qo(o,e,n){var i,l,a,s,d,r,p,u,c,m;const v=null!=Co&&Co>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[Co].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[Co]}:Object.assign({},B),b=t(v),g="custom"===e&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue?o.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Co&&Co>-1&&To){const e=Object.assign({},B).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,t,i;if("BUTTONS"===o.type){const l=null===(e=o.buttons)||void 0===e?void 0:e.filter((o=>"URL"===o.type));let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},o),{buttons:s})}return o}))})))}):o})),i=null===(s=null===(a=Object.assign({},B).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((e=>{var n;return Object.assign(Object.assign({},e),{buttons:null===(n=null==e?void 0:e.buttons)||void 0===n?void 0:n.map((e=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=t(B);return l.components=e,l.mapping.cards=i,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===e&&"string"==typeof o,l=i?o:"string"!=typeof o&&o.defaultValue?o.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),m=null===(c=b.mapping)||void 0===c?void 0:c.buttons;m&&m.length>0&&(m[n]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?Ro(!0):(Ro(!1),null==w||w(""))}if(null!=Co&&Co>-1){const o=t(B);o.components[1].cards[Co].components=b.components,o.mapping.cards[Co]=b.mapping,null==L||L(Object.assign({},o))}else null==L||L(b)}function Yo(o,e,n){var i,l,a,s,d,r;const p=null!=Co&&Co>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[Co].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[Co]}:Object.assign({},B);if(null!=Co&&Co>-1&&To){const e=Object.assign({},B).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,i,l;if("BUTTONS"===e.type){const a=null===(t=e.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=e.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},e),{buttons:d})}return e}))})))}):e})),i=t(B);return i.components=e,void(null==L||L(Object.assign({},i)))}const u=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==u&&u>-1){const e=null===(a=null==p?void 0:p.components[u].buttons)||void 0===a?void 0:a.filter((o=>"QUICK_REPLY"===o.type));if(e){let t=e[n];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(r=null===(d=null===(s=p.components)||void 0===s?void 0:s[u])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},p.components[u]),{buttons:i}),a=[...p.components];a[u]=l,p.components=a}}if(null!=Co&&Co>-1){const o=t(B);o.components[1].cards[Co].components=p.components,null==L||L(Object.assign({},o))}else null==L||L(p)}a((()=>{var o,e;if(null===(o=B.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))Ro(!0);else{Ro(!1);const o=null===(e=null==Oo?void 0:Oo.discountCodeExtra)||void 0===e?void 0:e[1];null==o||o("")}}),[B]),a((()=>{var o,e,n,t;if(null!=Co&&Co>-1){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[Co].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Co]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);wo({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Co&&-1===Co){const{descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=m(B);wo({descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Co]),a((()=>{var o,e,n,t;if(null!=Co&&Co>-1&&Do){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[Co].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Co]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);wo({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),_o(!1)}}),[Do]);const Ko=fo?Uo.imageComponent:Eo;return Ao.openEditMedia?o(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(h,{mediaComponentFormat:null!==(A=Ko.format)&&void 0!==A?A:r.IMAGE,uploadMedia:Ao.uploadMedia,variableListForImage:U||[],useEditWhatsappTemplateMediaResponse:Ao,setOpenEditMedia:Ao.setOpenEditMedia,openEditMedia:Ao.openEditMedia,editIconRef:Ao.editIconRef,fileRef:Lo})})):e(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Uo.imageComponent&&!To&&e(O,{children:[o(j,{imageName:null!==(_=null===(D=null==Ko?void 0:Ko.example)||void 0===D?void 0:D.header_handle)&&void 0!==_?_:[],handleImageChange:Ao.handleImageChange,mediaType:null==Ko?void 0:Ko.format,error:Ao.error,isLoading:Ao.loading,setOpenEditMedia:Ao.setOpenEditMedia,selectedVariable:v(null!==(F=null===(S=null===(H=null==Ko?void 0:Ko.example)||void 0===H?void 0:H.header_handle)||void 0===S?void 0:S[0])&&void 0!==F?F:"")?null===(q=null===(Q=null==Ko?void 0:Ko.example)||void 0===Q?void 0:Q.header_handle)||void 0===q?void 0:q[0]:(null===(K=null===(Y=null==B?void 0:B.mapping)||void 0===Y?void 0:Y.header)||void 0===K?void 0:K[0])?null===($=null===(W=null==B?void 0:B.mapping)||void 0===W?void 0:W.header)||void 0===$?void 0:$[0]:Ao.selectedVariable}),(null==Eo?void 0:Eo.format)==r.DOCUMENT?o(k,{children:o(d,{labelText:"PDF Name",placeholder:"Enter the name",value:Ho,errorMessage:Fo||void 0,onBlur:()=>{if(!Ho)return null==P||P(""),void Qo("PDF name is Required");const o=b(Ho);null==P||P(Ho),Qo(o?"Please enter a valid PDF name":void 0)},onChangeText:o=>{Qo(""),So(o)}})}):o(n,{})]}),Uo.bodyVariables.length>0&&o(V,{containerStyle:{paddingTop:Uo.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===(G=Uo.descriptionComponents)||void 0===G?void 0:G.map(((e,n)=>o(y,{originalVariableList:null!=Co&&Co>-1?ho.cards[Co]:ho,type:e.type,descriptionComponent:e.component,showVariableModal:I,variableList:R},n))),(null===(z=null===(X=null!=Co&&Co>-1?ho.cards[Co].buttons:null==ho?void 0:ho.buttons)||void 0===X?void 0:X.filter((o=>"URL"===o.type)))||void 0===z?void 0:z.length)>0&&o(V,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(Z=null===(J=null!=Co&&Co>-1?ho.cards[Co].buttons:null==ho?void 0:ho.buttons)||void 0===J?void 0:J.filter((o=>jo===p.CHATBOT||"URL"===o.type)))||void 0===Z?void 0:Z.map(((e,n)=>{if("URL"===e.type)return o(E,{variableListIndex:n,CTAoptions:null==M?void 0:M.CTAoptions,button:e,currentVariableList:null!=Co&&Co>-1?Object.assign({},ho.cards[Co]):Object.assign({},ho),updateSelectedURLTemplateBtn:qo,variableList:R},`${n}_${Co}`)})),jo===p.CHATBOT&&(null===(eo=null===(oo=Vo[0])||void 0===oo?void 0:oo.component)||void 0===eo?void 0:eo.buttons)&&(null===(io=null===(to=null===(no=Vo[0])||void 0===no?void 0:no.component)||void 0===to?void 0:to.buttons)||void 0===io?void 0:io.length)>0&&o(g,{backTrackMessage:null===(lo=null==Oo?void 0:Oo.backTrackExtra)||void 0===lo?void 0:lo[0],setBackTrackMessage:null===(ao=null==Oo?void 0:Oo.backTrackExtra)||void 0===ao?void 0:ao[1]}),(null===(ro=null===(so=null!=Co&&Co>-1?ho.cards[Co].buttons:null==ho?void 0:ho.buttons)||void 0===so?void 0:so.filter((o=>"QUICK_REPLY"===o.type)))||void 0===ro?void 0:ro.length)>0&&(jo!==p.CHATBOT?o(V,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(g,{backTrackMessage:null===(po=null==Oo?void 0:Oo.backTrackExtra)||void 0===po?void 0:po[0],setBackTrackMessage:null===(uo=null==Oo?void 0:Oo.backTrackExtra)||void 0===uo?void 0:uo[1]})),null===(mo=null===(co=null!=Co&&Co>-1?ho.cards[Co].buttons:null==ho?void 0:ho.buttons)||void 0===co?void 0:co.filter((o=>"QUICK_REPLY"===o.type)))||void 0===mo?void 0:mo.map(((e,n)=>{if("QUICK_REPLY"===e.type&&jo!==p.CHATBOT)return o(E,{variableListIndex:n,QRBoptions:null==M?void 0:M.QRBoptions,button:e,currentVariableList:null!=Co&&Co>-1?Object.assign({},ho.cards[Co]):Object.assign({},ho),updateSelectedQRBTemplateBtn:Yo},`${n}_${Co}`)})),jo===p.CHATBOT&&Io&&o(f,{discountCode:null===(vo=null==Oo?void 0:Oo.discountCodeExtra)||void 0===vo?void 0:vo[0],setDiscountCode:null===(bo=null==Oo?void 0:Oo.discountCodeExtra)||void 0===bo?void 0:bo[1]}),null===(go=null!=Co&&Co>-1?ho.cards[Co].buttons:null==ho?void 0:ho.buttons)||void 0===go?void 0:go.map(((e,n)=>{var t,i,l;if("COPY_CODE"===e.type)return o(T,{index:n,variable:{variableName:null!==(t=e.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=e.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=e.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Mo,componentType:"BUTTONS"},n)}))]}))},k=s.div`
+import{jsx as o,jsxs as e,Fragment as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useRef as i,useState as l,useEffect as a}from"react";import s from"styled-components";import{Input as d}from"../../input/Input.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as m}from"../utils/getDataFromTemplateComponent.js";import{isVariable as v}from"../utils/validateIsUrl.js";import{validateInputName as b}from"../utils/validateName.js";import{BackTrackComponent as g}from"./BackTrackComponent.js";import{DiscountCodeComponent as f}from"./DiscountCodeComponent.js";import h from"./EditMediaModal.js";import j from"./EditMediaV2.js";import{EditTemplateMediaContainer as O}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as C}from"./useEditWhtasappTemplateMedia.js";import T from"./VariableConnector.js";import{Container as x}from"./VariableConnectorsPanel.js";import y from"./VariableConnectorWhatsApp.js";import E from"./VariableEditorHeader.js";import V from"./WhatsAppTemplateCardButtonV2.js";const B=s=>{let{template:B,onTemplateChange:L,whatsappSpecificPickerMeta:M,showVariableModal:I,variableList:R,variableListForImage:U,discountCode:w,setDiscountCode:N,fileName:P,setFileName:A}=s;var D,_,H,S,F,Q,q,Y,K,W,$,G,X,z,J,Z,oo,eo,no,to,io,lo,ao,so,ro,po,uo,co,mo,vo,bo,go,fo,ho,jo,Oo,Co,To,xo;const yo=B.isCarouselType,{originalVariableList:Eo,pod:Vo,extras:Bo,selectedCarouselIndex:ko,isProductCarouselType:Lo}=u(),{descriptionComponents:Mo,urlBtns:Io,qrbBtns:Ro,imageComponent:Uo,bodyVariables:wo,headerVariables:No}=m(B),Po=i(null),Ao=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Do,_o]=l(!1),[Ho,So]=l(-1===ko?{descriptionComponents:Mo,urlBtns:Io,qrbBtns:Ro,imageComponent:Uo,bodyVariables:wo,headerVariables:No}:{}),{uploadMediaLink:Fo,uploadMediaFiles:Qo}=M,qo=C({uploadMediaLink:Fo,uploadMediaFiles:Qo,updateTemplateImageUrl:function(o,e){var n,i,l,a,s,d,r,p;let u;u=null!=ko&&ko>-1?{components:null===(i=null===(n=B.components[1])||void 0===n?void 0:n.cards)||void 0===i?void 0:i[ko].components,mapping:null===(a=null===(l=null==B?void 0:B.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[ko]}:Object.assign({},B);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==c&&c>-1&&(null==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:e,example:{header_handle:[o]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=u.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[ko]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},o)),Ko(!0)}else null==L||L(Object.assign({},u))},mediaComponent:yo?Ho.imageComponent:Uo,fileRef:Po}),[Yo,Ko]=l(!1),[Wo,$o]=l(P),[Go,Xo]=l();function zo(o,e,n){var i,l,a,s,d,r,p,u,c,m;const v=null!=ko&&ko>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[ko].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[ko]}:Object.assign({},B),b=t(v),g="custom"===e&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue?o.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=ko&&ko>-1&&Lo){const e=Object.assign({},B).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,t,i;if("BUTTONS"===o.type){const l=null===(e=o.buttons)||void 0===e?void 0:e.filter((o=>"URL"===o.type));let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},o),{buttons:s})}return o}))})))}):o})),i=null===(s=null===(a=Object.assign({},B).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((e=>{var n;return Object.assign(Object.assign({},e),{buttons:null===(n=null==e?void 0:e.buttons)||void 0===n?void 0:n.map((e=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=t(B);return l.components=e,l.mapping.cards=i,void(null==L||L(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===e&&"string"==typeof o,l=i?o:"string"!=typeof o&&o.defaultValue?o.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),m=null===(c=b.mapping)||void 0===c?void 0:c.buttons;m&&m.length>0&&(m[n]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?_o(!0):(_o(!1),null==N||N(""))}if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=b.components,o.mapping.cards[ko]=b.mapping,null==L||L(Object.assign({},o))}else null==L||L(b)}function Jo(o,e,n){var i,l,a,s,d,r,p;const u=null!=ko&&ko>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[ko].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[ko]}:Object.assign({},B);if(null!=ko&&ko>-1&&Lo){const e=Object.assign({},B).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,i,l;if("BUTTONS"===e.type){const a=null===(t=null==e?void 0:e.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=null==e?void 0:e.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},e),{buttons:d})}return e}))})))}):e})),i=t(B);return i.components=e,void(null==L||L(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const e=null===(s=null===(a=null==u?void 0:u.components[c])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(e){let t=e[n];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[c])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),a=[...u.components];a[c]=l,u.components=a}}if(null!=ko&&ko>-1){const o=t(B);o.components[1].cards[ko].components=u.components,null==L||L(Object.assign({},o))}else null==L||L(u)}a((()=>{var o,e;if(null===(o=B.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))_o(!0);else{_o(!1);const o=null===(e=null==Bo?void 0:Bo.discountCodeExtra)||void 0===e?void 0:e[1];null==o||o("")}}),[B]),a((()=>{var o,e,n,t;if(null!=ko&&ko>-1){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[ko].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[ko]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=ko&&-1===ko){const{descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=m(B);So({descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[ko]),a((()=>{var o,e,n,t;if(null!=ko&&ko>-1&&Yo){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[ko].components,mapping:null===(t=null===(n=null==B?void 0:B.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[ko]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);So({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),Ko(!1)}}),[Yo]);const Zo=yo?Ho.imageComponent:Uo;return qo.openEditMedia?o(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(h,{mediaComponentFormat:null!==(D=Zo.format)&&void 0!==D?D:r.IMAGE,uploadMedia:qo.uploadMedia,variableListForImage:U||[],useEditWhatsappTemplateMediaResponse:qo,setOpenEditMedia:qo.setOpenEditMedia,openEditMedia:qo.openEditMedia,editIconRef:qo.editIconRef,fileRef:Po})})):e(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Lo?"420px":"auto"}},{children:[!!Ho.imageComponent&&!Lo&&e(O,{children:[o(j,{imageName:null!==(H=null===(_=null==Zo?void 0:Zo.example)||void 0===_?void 0:_.header_handle)&&void 0!==H?H:[],handleImageChange:qo.handleImageChange,mediaType:null==Zo?void 0:Zo.format,error:qo.error,isLoading:qo.loading,setOpenEditMedia:qo.setOpenEditMedia,selectedVariable:v(null!==(Q=null===(F=null===(S=null==Zo?void 0:Zo.example)||void 0===S?void 0:S.header_handle)||void 0===F?void 0:F[0])&&void 0!==Q?Q:"")?null===(Y=null===(q=null==Zo?void 0:Zo.example)||void 0===q?void 0:q.header_handle)||void 0===Y?void 0:Y[0]:(null===(W=null===(K=null==B?void 0:B.mapping)||void 0===K?void 0:K.header)||void 0===W?void 0:W[0])?null===(G=null===($=null==B?void 0:B.mapping)||void 0===$?void 0:$.header)||void 0===G?void 0:G[0]:qo.selectedVariable}),(null==Uo?void 0:Uo.format)==r.DOCUMENT?o(k,{children:o(d,{labelText:"PDF Name",placeholder:"Enter the name",value:Wo,errorMessage:Go||void 0,onBlur:()=>{if(!Wo)return null==A||A(""),void Xo("PDF name is Required");const o=b(Wo);null==A||A(Wo),Xo(o?"Please enter a valid PDF name":void 0)},onChangeText:o=>{Xo(""),$o(o)}})}):o(n,{})]}),(null===(X=Ho.bodyVariables)||void 0===X?void 0:X.length)>0&&o(E,{containerStyle:{paddingTop:Ho.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(z=Ho.descriptionComponents)||void 0===z?void 0:z.map(((e,n)=>o(y,{originalVariableList:null!=ko&&ko>-1?Eo.cards[ko]:Eo,type:e.type,descriptionComponent:e.component,showVariableModal:I,variableList:R},n))),(null===(oo=null===(Z=null!=ko&&ko>-1?null===(J=Eo.cards[ko])||void 0===J?void 0:J.buttons:null==Eo?void 0:Eo.buttons)||void 0===Z?void 0:Z.filter((o=>"URL"===o.type)))||void 0===oo?void 0:oo.length)>0&&o(E,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(to=null===(no=null!=ko&&ko>-1?null===(eo=Eo.cards[ko])||void 0===eo?void 0:eo.buttons:null==Eo?void 0:Eo.buttons)||void 0===no?void 0:no.filter((o=>Vo===p.CHATBOT||"URL"===o.type)))||void 0===to?void 0:to.map(((e,n)=>{if("URL"===e.type)return o(V,{variableListIndex:n,CTAoptions:null==M?void 0:M.CTAoptions,button:e,currentVariableList:null!=ko&&ko>-1?Object.assign({},Eo.cards[ko]):Object.assign({},Eo),updateSelectedURLTemplateBtn:zo,variableList:R},`${n}_${ko}`)})),Vo===p.CHATBOT&&(null===(lo=null===(io=Ro[0])||void 0===io?void 0:io.component)||void 0===lo?void 0:lo.buttons)&&(null===(ro=null===(so=null===(ao=Ro[0])||void 0===ao?void 0:ao.component)||void 0===so?void 0:so.buttons)||void 0===ro?void 0:ro.length)>0&&o(g,{backTrackMessage:null===(po=null==Bo?void 0:Bo.backTrackExtra)||void 0===po?void 0:po[0],setBackTrackMessage:null===(uo=null==Bo?void 0:Bo.backTrackExtra)||void 0===uo?void 0:uo[1]}),(null===(vo=null===(mo=null!=ko&&ko>-1?null===(co=Eo.cards[ko])||void 0===co?void 0:co.buttons:null==Eo?void 0:Eo.buttons)||void 0===mo?void 0:mo.filter((o=>"QUICK_REPLY"===o.type)))||void 0===vo?void 0:vo.length)>0&&(Vo!==p.CHATBOT?o(E,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(g,{backTrackMessage:null===(bo=null==Bo?void 0:Bo.backTrackExtra)||void 0===bo?void 0:bo[0],setBackTrackMessage:null===(go=null==Bo?void 0:Bo.backTrackExtra)||void 0===go?void 0:go[1]})),null===(jo=null===(ho=null!=ko&&ko>-1?null===(fo=Eo.cards[ko])||void 0===fo?void 0:fo.buttons:null==Eo?void 0:Eo.buttons)||void 0===ho?void 0:ho.filter((o=>"QUICK_REPLY"===o.type)))||void 0===jo?void 0:jo.map(((e,n)=>{if("QUICK_REPLY"===e.type&&Vo!==p.CHATBOT)return o(V,{variableListIndex:n,QRBoptions:null==M?void 0:M.QRBoptions,button:e,currentVariableList:null!=ko&&ko>-1?Object.assign({},Eo.cards[ko]):Object.assign({},Eo),updateSelectedQRBTemplateBtn:Jo},`${n}_${ko}`)})),Vo===p.CHATBOT&&Do&&o(f,{discountCode:null===(Oo=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Oo?void 0:Oo[0],setDiscountCode:null===(Co=null==Bo?void 0:Bo.discountCodeExtra)||void 0===Co?void 0:Co[1],variableList:R}),null===(xo=null!=ko&&ko>-1?null===(To=Eo.cards[ko])||void 0===To?void 0:To.buttons:null==Eo?void 0:Eo.buttons)||void 0===xo?void 0:xo.map(((e,n)=>{var t,i,l;if("COPY_CODE"===e.type)return o(T,{index:n,variable:{variableName:null!==(t=e.text)&&void 0!==t?t:"Copy Code",updatedValue:null!==(i=e.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=e.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:Ao,componentType:"BUTTONS"},n)}))]}))},k=s.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;

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

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

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

@@ -1,4 +1,4 @@
-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{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const m=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"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=o.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,n=o.div`
+`,m=o.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +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:b}=a;const{pod:f,hideDeviceContainerInPreview:v}=s(),g={showSampleValues:b,template:w,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:f!==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};return v?e(h,{children:e(r,Object.assign({},g))}):e(t,{children:i(m,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(n,Object.assign({ref:o},{children:e(r,Object.assign({},g))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
+`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:f,showSampleValues:w}=a;const{pod:b,hideDeviceContainerInPreview:g}=s(),v={showSampleValues:w,template:f,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};return g?e(h,{children:e(r,Object.assign({},v))}):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({},v))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
 	display: flex;
 	align-items: center;
+	justify-content: center;
+	flex: 1;
 `;export{c as default};

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

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

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

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

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

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

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

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

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

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

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

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

@@ -26,6 +26,8 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
 	justify-content: center;
 	flex-grow: 1;
 	min-height: 180px;
+	border-left: 1px solid ${e.stroke.primary};
+	border-right: 1px solid ${e.stroke.primary};
 `,p=r.div`
 	display: flex;
 	justify-content: center;

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

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

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

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import o from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as a}from"react";import n from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{BodySecondary as p,Caption as d}from"../../TypographyStyle.js";import{COLORS as l,FONTS as h}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as c}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as f,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as x,FooterWrapper as g,TimeStamp as j}from"./ChatUI.style.js";import{MediaCard as v}from"./MediaCard.js";import w from"./RenderTemplateWithVariable.js";const b=n.div`
+import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import o from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import{useMemo as a}from"react";import n from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{BodySecondary as p,Caption as d}from"../../TypographyStyle.js";import{COLORS as l,FONTS as h}from"../../../constants/Theme.js";import{WhatsAppFormatToHTML as c}from"../helpers/WhatsAppFormatToHTML.js";import{HEADER_TYPES as f,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as x,FooterWrapper as g,FooterText as j,TimeStamp as v}from"./ChatUI.style.js";import{MediaCard as w}from"./MediaCard.js";import b from"./RenderTemplateWithVariable.js";const u=n.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,u=n=>{const{bodyText:u,footerText:S,headerMediaType:N,headerText:A,headerAssetLink:M,headerAssetName:C,quickReplybtn:L,ctaBtn:k,actionTypes:z,textType:B,extras:E,showHeader:I,imagePreviewStyles:P,size:R,children:W,isPreview:H}=n,O=new c,_=a((()=>({color:l.content.primary,margin:12,fontSize:I?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,Object.assign({isPreview:H},{children:[t(b,{children:t(o,{color:"white",height:8,width:8})}),N===f.TEXT?t(w,{bold:!0,text:A}):N!==f.NONE?t(v,{headerAssetLink:M,headerAssetName:C,mediaType:N,imagePreviewStyles:N===f.IMAGE?P:{}}):t(r,{}),!!u&&t(r,{children:t(r,W?{children:W}:{children:"html"===B?t("div",{className:"richTextEditor",style:_,dangerouslySetInnerHTML:{__html:O.convertToHTML(u)}}):t(p,{children:u})})}),e(g,{children:[t(m,Object.assign({body:null!=S?S:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:S}))})),t(j,{children:"16:48"})]}),z===y.QUICK_REPLY?t("div",{children:null==L?void 0:L.map(((e,r)=>t(T,{text:e.text},r)))}):z===y.CTA_BTN?t("div",{children:null==k?void 0:k.map(((e,r)=>t(T,{textTypography:I?d:p,extraContent:E?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:R},r)))}):t(r,{})]}))};export{u as default};
+`,S=n=>{const{bodyText:S,footerText:N,headerMediaType:A,headerText:M,headerAssetLink:C,headerAssetName:L,quickReplybtn:k,ctaBtn:z,actionTypes:B,textType:E,extras:I,showHeader:P,imagePreviewStyles:R,size:W,children:H,isPreview:O}=n,_=new c,U=a((()=>({color:l.content.primary,margin:12,fontSize:P?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,Object.assign({isPreview:O},{children:[t(u,{children:t(o,{color:"white",height:8,width:8})}),A===f.TEXT?t(b,{bold:!0,text:M}):A!==f.NONE?t(w,{headerAssetLink:C,headerAssetName:L,mediaType:A,imagePreviewStyles:A===f.IMAGE?R:{}}):t(r,{}),!!S&&t(r,{children:t(r,H?{children:H}:{children:"html"===E?t("div",{className:"richTextEditor",style:U,dangerouslySetInnerHTML:{__html:_.convertToHTML(S)}}):t(p,{children:S})})}),e(g,{children:[t(m,Object.assign({body:null!=N?N:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:N}))})),t(v,{children:"16:48"})]}),B===y.QUICK_REPLY?t("div",{children:null==k?void 0:k.map(((e,r)=>t(T,{text:e.text},r)))}):B===y.CTA_BTN?t("div",{children:null==z?void 0:z.map(((e,r)=>t(T,{textTypography:P?d:p,extraContent:I?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:W},r)))}):t(r,{})]}))};export{S as default};

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

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