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

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/carousel-preview/CarouselPreview.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js"),s=require("react"),l=require("react-slick"),r=require("styled-components"),o=require("./CarouselPreview.style.js"),i=require("./CarouselPreviewCard.js"),a=require("../../constants/Theme.js"),c=require("../template-context-mapper/context/templateModalContext.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(s),x=d(l),v=d(r);const p=u.default.forwardRef(((t,n)=>{let{channel:s,template:l,showSampleValues:r,isPreview:a,removeBottomBorder:d}=t;var u,v,p;const j=null===(u=null==l?void 0:l.components)||void 0===u?void 0:u[1].cards,{sliderRef:g,selectedCarouselIndex:C,cardCount:b,setIsCarouselHovered:w}=c.useTemplateModalContext();return e.jsxs(o.Container,Object.assign({removeBottomBorder:d},{children:[e.jsx(i.default,{channel:s,currentTemplate:l,carouselCardIndex:-1,isPreview:a,width:"77%"}),!!(null==j?void 0:j.length)&&e.jsx(h,Object.assign({cardCount:null!=b?b:0,selectedCarouselIndex:null!=C?C:-1,onMouseEnter:()=>null==w?void 0:w(!0),onMouseLeave:()=>null==w?void 0:w(!1)},{children:e.jsx(x.default,Object.assign({ref:g,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!0,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:e.jsx(m,{}),prevArrow:e.jsx(f,{})},{children:null===(p=null===(v=null==l?void 0:l.components)||void 0===v?void 0:v[1].cards)||void 0===p?void 0:p.map(((t,n)=>{var r,o;const c={components:t.components,mapping:null===(o=null===(r=null==l?void 0:l.mapping)||void 0===r?void 0:r.cards)||void 0===o?void 0:o[n]};return e.jsx(i.default,{channel:s,currentTemplate:c,carouselCardIndex:n,isPreview:a,width:"100%"},n)}))}))}))]}))})),m=t=>{const{className:s,style:l,onClick:r}=t,{selectedCarouselIndex:o,setSelectedCarouselIndex:i}=c.useTemplateModalContext();return e.jsx("div",Object.assign({className:s,style:Object.assign(Object.assign({},l),{display:r&&(null!=o?o:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==i||i((e=>e+1)),null==r||r(e)}},{children:e.jsx(n.default,{height:10,width:10,color:a.COLORS.content.primary})}))},f=n=>{const{className:s,style:l,onClick:r}=n,{selectedCarouselIndex:o,setSelectedCarouselIndex:i}=c.useTemplateModalContext();return e.jsx("div",Object.assign({className:s,style:Object.assign(Object.assign({},l),{display:r&&(null!=o?o:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==i||i((e=>e-1)),null==r||r(e)}},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})}))},h=v.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),l=require("../../assets/icons/chevronRight.svg.js"),n=require("react"),s=require("react-slick"),r=require("styled-components"),o=require("./CarouselPreview.style.js"),i=require("./CarouselPreviewCard.js"),a=require("../../constants/Theme.js"),d=require("../template-context-mapper/context/templateModalContext.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(n),x=c(s),p=c(r);const h=u.default.forwardRef(((t,l)=>{let{channel:n,template:s,showSampleValues:r,isPreview:a,removeBottomBorder:c}=t;var u,p,h;const g=null===(u=null==s?void 0:s.components)||void 0===u?void 0:u[1].cards,{sliderRef:j,selectedCarouselIndex:C,cardCount:w,setIsCarouselHovered:b}=d.useTemplateModalContext();return e.jsxs(o.Container,Object.assign({removeBottomBorder:c},{children:[e.jsx(i.default,{channel:n,currentTemplate:s,carouselCardIndex:-1,isPreview:a,width:"77%"}),!!(null==g?void 0:g.length)&&e.jsx(m,Object.assign({cardCount:null!=w?w:0,selectedCarouselIndex:null!=C?C:-1,onMouseEnter:()=>null==b?void 0:b(!0),onMouseLeave:()=>null==b?void 0:b(!1)},{children:e.jsx(x.default,Object.assign({ref:j,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!0,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:e.jsx(v,{}),prevArrow:e.jsx(f,{})},{children:null===(h=null===(p=null==s?void 0:s.components)||void 0===p?void 0:p[1].cards)||void 0===h?void 0:h.map(((t,l)=>{var r,o;const d={components:t.components,mapping:null===(o=null===(r=null==s?void 0:s.mapping)||void 0===r?void 0:r.cards)||void 0===o?void 0:o[l]};return e.jsx(i.default,{channel:n,currentTemplate:d,carouselCardIndex:l,isPreview:a,width:"100%"},l)}))}))}))]}))})),v=t=>{const{className:n,style:s,onClick:r}=t,{selectedCarouselIndex:o,setSelectedCarouselIndex:i,cardCount:c}=d.useTemplateModalContext();return e.jsx("div",Object.assign({className:n,style:Object.assign(Object.assign({},s),{display:r&&(null!=o?o:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",o,c),null==r||r(e),(null!=o?o:-1)>=(null!=c?c:-1)-1||null==i||i((null!=o?o:-1)+1)}},{children:e.jsx(l.default,{height:10,width:10,color:a.COLORS.content.primary})}))},f=l=>{const{className:n,style:s,onClick:r}=l,{selectedCarouselIndex:o,setSelectedCarouselIndex:i}=d.useTemplateModalContext();return e.jsx("div",Object.assign({className:n,style:Object.assign(Object.assign({},s),{display:r&&(null!=o?o:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==r||r(e),(null!=o?o:-1)<1||null==i||i((null!=o?o:-1)-1)}},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})}))},m=p.default.div`
 	width: 100%;
 	/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
 	/* margin: auto; */
@@ -13,21 +13,32 @@
 
 	.slick-next {
 		z-index: 10;
-		background: ${a.COLORS.background.base};
 		border-radius: 50%;
 		align-items: center;
 		justify-content: center;
 		right: 10px;
+		border-radius: 50%;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
 		/* height: 100%; */
 	}
 
 	.slick-prev {
 		left: 0px;
 		z-index: 10;
-		background: ${a.COLORS.background.base};
 		border-radius: 50%;
 		align-items: center;
 		justify-content: center;
+		border-radius: 50%;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
+
 		/* height: 100%; */
 	}
 
@@ -35,9 +46,9 @@
 		display: flex;
 	}
 
-	/* .slick-slide > div {
-		margin-bottom: 24px;
-	} */
+	.slick-slide > div {
+		height: 100%;
+	}
 
 	.slick-track {
 		flex: 1;
@@ -48,4 +59,4 @@
 		flex-direction: column;
 		margin-left: -49px;
 	}
-`;exports.CarouselPreview=p;
+`;exports.CarouselPreview=h;

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

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

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

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

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/carousel-preview/CarouselPreview.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import o from"../../assets/icons/chevronRight.svg.js";import r from"react";import l from"react-slick";import s from"styled-components";import{Container as i}from"./CarouselPreview.style.js";import c from"./CarouselPreviewCard.js";import{COLORS as a}from"../../constants/Theme.js";import{useTemplateModalContext as d}from"../template-context-mapper/context/templateModalContext.js";const u=r.forwardRef(((t,o)=>{let{channel:r,template:s,showSampleValues:a,isPreview:u,removeBottomBorder:h}=t;var g,x,f;const C=null===(g=null==s?void 0:s.components)||void 0===g?void 0:g[1].cards,{sliderRef:b,selectedCarouselIndex:w,cardCount:j,setIsCarouselHovered:k}=d();return e(i,Object.assign({removeBottomBorder:h},{children:[n(c,{channel:r,currentTemplate:s,carouselCardIndex:-1,isPreview:u,width:"77%"}),!!(null==C?void 0:C.length)&&n(v,Object.assign({cardCount:null!=j?j:0,selectedCarouselIndex:null!=w?w:-1,onMouseEnter:()=>null==k?void 0:k(!0),onMouseLeave:()=>null==k?void 0:k(!1)},{children:n(l,Object.assign({ref:b,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!0,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:n(m,{}),prevArrow:n(p,{})},{children:null===(f=null===(x=null==s?void 0:s.components)||void 0===x?void 0:x[1].cards)||void 0===f?void 0:f.map(((e,t)=>{var o,l;const i={components:e.components,mapping:null===(l=null===(o=null==s?void 0:s.mapping)||void 0===o?void 0:o.cards)||void 0===l?void 0:l[t]};return n(c,{channel:r,currentTemplate:i,carouselCardIndex:t,isPreview:u,width:"100%"},t)}))}))}))]}))})),m=e=>{const{className:t,style:r,onClick:l}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:i}=d();return n("div",Object.assign({className:t,style:Object.assign(Object.assign({},r),{display:l&&(null!=s?s:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==i||i((e=>e+1)),null==l||l(e)}},{children:n(o,{height:10,width:10,color:a.content.primary})}))},p=e=>{const{className:o,style:r,onClick:l}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:i}=d();return n("div",Object.assign({className:o,style:Object.assign(Object.assign({},r),{display:l&&(null!=s?s:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==i||i((e=>e-1)),null==l||l(e)}},{children:n(t,{height:10,width:10,color:a.content.primary})}))},v=s.div`
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import o from"../../assets/icons/chevronRight.svg.js";import l from"react";import r from"react-slick";import i from"styled-components";import{Container as s}from"./CarouselPreview.style.js";import c from"./CarouselPreviewCard.js";import{COLORS as d}from"../../constants/Theme.js";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";const u=l.forwardRef(((t,o)=>{let{channel:l,template:i,showSampleValues:d,isPreview:u,removeBottomBorder:h}=t;var v,f,g;const w=null===(v=null==i?void 0:i.components)||void 0===v?void 0:v[1].cards,{sliderRef:C,selectedCarouselIndex:b,cardCount:j,setIsCarouselHovered:k}=a();return e(s,Object.assign({removeBottomBorder:h},{children:[n(c,{channel:l,currentTemplate:i,carouselCardIndex:-1,isPreview:u,width:"77%"}),!!(null==w?void 0:w.length)&&n(x,Object.assign({cardCount:null!=j?j:0,selectedCarouselIndex:null!=b?b:-1,onMouseEnter:()=>null==k?void 0:k(!0),onMouseLeave:()=>null==k?void 0:k(!1)},{children:n(r,Object.assign({ref:C,swipeToSlide:!0,swipe:!0,infinite:!1,focusOnSelect:!0,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:n(p,{}),prevArrow:n(m,{})},{children:null===(g=null===(f=null==i?void 0:i.components)||void 0===f?void 0:f[1].cards)||void 0===g?void 0:g.map(((e,t)=>{var o,r;const s={components:e.components,mapping:null===(r=null===(o=null==i?void 0:i.mapping)||void 0===o?void 0:o.cards)||void 0===r?void 0:r[t]};return n(c,{channel:l,currentTemplate:s,carouselCardIndex:t,isPreview:u,width:"100%"},t)}))}))}))]}))})),p=e=>{const{className:t,style:l,onClick:r}=e,{selectedCarouselIndex:i,setSelectedCarouselIndex:s,cardCount:c}=a();return n("div",Object.assign({className:t,style:Object.assign(Object.assign({},l),{display:r&&(null!=i?i:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",i,c),null==r||r(e),(null!=i?i:-1)>=(null!=c?c:-1)-1||null==s||s((null!=i?i:-1)+1)}},{children:n(o,{height:10,width:10,color:d.content.primary})}))},m=e=>{const{className:o,style:l,onClick:r}=e,{selectedCarouselIndex:i,setSelectedCarouselIndex:s}=a();return n("div",Object.assign({className:o,style:Object.assign(Object.assign({},l),{display:r&&(null!=i?i:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==r||r(e),(null!=i?i:-1)<1||null==s||s((null!=i?i:-1)-1)}},{children:n(t,{height:10,width:10,color:d.content.primary})}))},x=i.div`
 	width: 100%;
 	/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
 	/* margin: auto; */
@@ -13,21 +13,32 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/ico
 
 	.slick-next {
 		z-index: 10;
-		background: ${a.background.base};
 		border-radius: 50%;
 		align-items: center;
 		justify-content: center;
 		right: 10px;
+		border-radius: 50%;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
 		/* height: 100%; */
 	}
 
 	.slick-prev {
 		left: 0px;
 		z-index: 10;
-		background: ${a.background.base};
 		border-radius: 50%;
 		align-items: center;
 		justify-content: center;
+		border-radius: 50%;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
+
 		/* height: 100%; */
 	}
 
@@ -35,9 +46,9 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/ico
 		display: flex;
 	}
 
-	/* .slick-slide > div {
-		margin-bottom: 24px;
-	} */
+	.slick-slide > div {
+		height: 100%;
+	}
 
 	.slick-track {
 		flex: 1;

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/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import n from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as s,useEffect as d}from"react";import{AddVariableV2SideModal as c}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as p}from"../../button/Button.js";import{IconButton as u}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 h,TitleRegular as v,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;const{selectedCarouselIndex:F,setTemplate:R,pickerConf:W,isProductCarouselType:$,pod:q,cardCount:_,carouselProducts:N,setCarouselProducts:z,isError:G,cardImages:H,disableEditVariable:J,onDeleteSelectedProducts:K,setSelectedCarouselIndex:Q,sliderRef:U}=x(),[X,Y]=s(-1==F?"First Message (Step 1/2)":$?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[Z,ee]=s(!1),[te,oe]=s(!1),[le,ie]=s(!1);d((()=>{Y(-1==F?"First Message (Step 1/2)":$?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[F]);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!=F&&F>=0&&(null===(B=null===(E=null==k?void 0:k.mapping)||void 0===E?void 0:E.body)||void 0===B?void 0:B.length)&&t(u,{Icon:l,onClick:()=>{null==Q||Q(-1)}}),t(h,Object.assign({style:{marginLeft:10}},{children:X}))]})),$&&(null!==(M=null==N?void 0:N.length)&&void 0!==M?M:0)>0&&null!=F&&F>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(I,{editItem:()=>{1===(null==N?void 0:N.length)&&"variable"===N[0].name?ie(!0):ee(!Z)},cardBody:1===(null==N?void 0:N.length)&&"variable"===N[0].name?`${N[0].productName}`:`${null==N?void 0:N.length} Products Selected`,hideIcon:1===(null==N?void 0:N.length)&&"variable"===N[0].name,deleteItem:()=>{var e;if(1===(null==N?void 0:N.length)&&"variable"===N[0].name)return void(null==z||z([]));const t=a(Object.assign({},k));t&&(H&&H.length>0?null==H||H.forEach(((e,o)=>{var l;t.components[1].cards[o].components[0].example.header_handle=[null!==(l=H[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==R||R(t)),null==z||z([]),null==K||K()}}),N&&(null==N?void 0:N.length)>0&&"variable"!=N[0].name&&t(p,{disabled:(null!==(D=null==N?void 0:N.length)&&void 0!==D?D:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{oe(!0),ee(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!J&&$&&0===(null==N?void 0:N.length)&&null!=F&&F>=0&&e(o,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(v,{children:"Product(s)"}),t(g,{children:`Select ${null!=_?_:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:G?16:12,marginRight:G?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(p,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:G?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:G?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(n,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{ee(!0)}}),q===w.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(f,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(p,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:G?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:G?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(n,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{ie(!0)}})]})]})),G&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(j,{padding:"8px",errorText:"Please add products"})}))]}),!$&&(null!=F?F:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:m.surface.hovered,alignItems:"center"}},{children:[(null!=F?F:-1)>0&&t(u,{Icon:i,color:m.content.secondary,width:8,height:14,onClick:()=>{var e;null===(e=null==U?void 0:U.current)||void 0===e||e.slickPrev(),null==Q||Q((e=>e-1))}}),t(v,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:m.content.secondary},{children:`Card ${(null!=F?F:0)+1}/${_}`})),F!==(null!=_?_:0)-1&&t(u,{Icon:r,color:m.content.secondary,width:8,height:14,onClick:()=>{var e;null===(e=null==U?void 0:U.current)||void 0===e||e.slickNext(),null==Q||Q((e=>e+1))}})]})),t(C,{whatsappSpecificPickerMeta:P,template:k,onTemplateChange:e=>{null==R||R(e)},showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}),Z&&W&&t(y,{zIndex:200,startupScreen:te?b.RearrangeProducts:b.Collections,rearrangeEnabled:!0,storeId:W.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!=N?N:[]),collectionFetcher:W.fetchCollections,productFetcher:W.fetchProducts,onAdd:(e,t)=>{var o,l,i,r,n,s;oe(!1);const d=[];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 p of Object.keys(c)){const{name:u,image:m,quantity:h,displayOrder:v}=c[p],g={name:u,image:null!==(l=null!=m?m:null===(o=a[e])||void 0===o?void 0:o.image)&&void 0!==l?l:"",quantity:h,variantId:p,productId:e,displayOrder:v,collectionId:t,productName:null!==(r=null===(i=a[e])||void 0===i?void 0:i.name)&&void 0!==r?r:"",productImage:null!==(s=null===(n=a[e])||void 0===n?void 0:n.image)&&void 0!==s?s:""};d.push(g)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),p=d.map((e=>e.image)),u=a(Object.assign({},k));u&&(p.forEach(((e,t)=>{var o;u.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(o=null==H?void 0:H[t])&&void 0!==o?o:""]})),null==R||R(u)),null==z||z(c),ee(!1)},searchInCollectionFetcher:W.searchInCollection,searchFetcher:W.searchProducts,visible:Z,onClose:()=>{ee(!1)},exactLimit:null!=_?_:1}),le&&t(c,{zIndex:2e3,data:null!=S?S:[],showVariable:le,setShowVariable:ie,placeholder:"Add a variable",customTrigger:e=>{null==z||z([{name:"variable",productName:e.actualValue}])}})]}))};export{O 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 h,TitleRegular as v,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);s((()=>{le(-1==q?"First Message (Step 1/2)":z?"Product Carousel (Step 2/2)":"Carousel Cards (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(h,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(v,{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:[(null!=q?q:-1)>0&&t(p,{Icon:i,color:m.content.secondary,width:8,height:14,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(v,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:m.content.secondary},{children:`Card ${(null!=q?q:0)+1}/${H}`})),q!==(null!=H?H:0)-1&&t(p,{Icon:n,color:m.content.secondary,width:8,height:14,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:h,displayOrder:v}=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:h,variantId:u,productId:e,displayOrder:v,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.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 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;const jo=B.isCarouselType,{originalVariableList:Oo,pod:Co,extras:To,selectedCarouselIndex:xo,isProductCarouselType:yo}=u(),{descriptionComponents:Eo,urlBtns:Vo,qrbBtns:Bo,imageComponent:ko,bodyVariables:Lo,headerVariables:Mo}=m(B),Io=i(null),Ro=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Uo,wo]=l(!1),[No,Po]=l(-1===xo?{descriptionComponents:Eo,urlBtns:Vo,qrbBtns:Bo,imageComponent:ko,bodyVariables:Lo,headerVariables:Mo}:{}),{uploadMediaLink:Ao,uploadMediaFiles:Do}=M,_o=C({uploadMediaLink:Ao,uploadMediaFiles:Do,updateTemplateImageUrl:function(o,e){var n,i,l,a,s,d,r,p;let u;u=null!=xo&&xo>-1?{components:null===(i=null===(n=B.components[1])||void 0===n?void 0:n.cards)||void 0===i?void 0:i[xo].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[xo]}: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!=xo&&xo>-1){const o=t(B);o.components[1].cards[xo].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[xo]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==L||L(Object.assign({},o)),So(!0)}else null==L||L(Object.assign({},u))},mediaComponent:jo?No.imageComponent:ko,fileRef:Io}),[Ho,So]=l(!1),[Fo,Qo]=l(P),[qo,Yo]=l();function Ko(o,e,n){var i,l,a,s,d,r,p,u,c,m;const v=null!=xo&&xo>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[xo].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[xo]}: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!=xo&&xo>-1&&yo){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))?wo(!0):(wo(!1),null==N||N(""))}if(null!=xo&&xo>-1){const o=t(B);o.components[1].cards[xo].components=b.components,o.mapping.cards[xo]=b.mapping,null==L||L(Object.assign({},o))}else null==L||L(b)}function Wo(o,e,n){var i,l,a,s,d,r;const p=null!=xo&&xo>-1?{components:null===(i=Object.assign({},B).components[1].cards)||void 0===i?void 0:i[xo].components,mapping:null===(l=Object.assign({},B).mapping.cards)||void 0===l?void 0:l[xo]}:Object.assign({},B);if(null!=xo&&xo>-1&&yo){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!=xo&&xo>-1){const o=t(B);o.components[1].cards[xo].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))))wo(!0);else{wo(!1);const o=null===(e=null==To?void 0:To.discountCodeExtra)||void 0===e?void 0:e[1];null==o||o("")}}),[B]),a((()=>{var o,e,n,t;if(null!=xo&&xo>-1){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[xo].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[xo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);Po({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=xo&&-1===xo){const{descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l}=m(B);Po({descriptionComponents:o,urlBtns:e,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[xo]),a((()=>{var o,e,n,t;if(null!=xo&&xo>-1&&Ho){const i={components:null===(e=null===(o=B.components[1])||void 0===o?void 0:o.cards)||void 0===e?void 0:e[xo].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[xo]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=m(i);Po({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),So(!1)}}),[Ho]);const $o=jo?No.imageComponent:ko;return _o.openEditMedia?o(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:o(h,{mediaComponentFormat:null!==(D=$o.format)&&void 0!==D?D:r.IMAGE,uploadMedia:_o.uploadMedia,variableListForImage:U||[],useEditWhatsappTemplateMediaResponse:_o,setOpenEditMedia:_o.setOpenEditMedia,openEditMedia:_o.openEditMedia,editIconRef:_o.editIconRef,fileRef:Io})})):e(x,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!No.imageComponent&&!yo&&e(O,{children:[o(j,{imageName:null!==(H=null===(_=null==$o?void 0:$o.example)||void 0===_?void 0:_.header_handle)&&void 0!==H?H:[],handleImageChange:_o.handleImageChange,mediaType:null==$o?void 0:$o.format,error:_o.error,isLoading:_o.loading,setOpenEditMedia:_o.setOpenEditMedia,selectedVariable:v(null!==(Q=null===(F=null===(S=null==$o?void 0:$o.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==$o?void 0:$o.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]:_o.selectedVariable}),(null==ko?void 0:ko.format)==r.DOCUMENT?o(k,{children:o(d,{labelText:"PDF Name",placeholder:"Enter the name",value:Fo,errorMessage:qo||void 0,onBlur:()=>{if(!Fo)return null==A||A(""),void Yo("PDF name is Required");const o=b(Fo);null==A||A(Fo),Yo(o?"Please enter a valid PDF name":void 0)},onChangeText:o=>{Yo(""),Qo(o)}})}):o(n,{})]}),(null===(X=No.bodyVariables)||void 0===X?void 0:X.length)>0&&o(E,{containerStyle:{paddingTop:No.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=No.descriptionComponents)||void 0===z?void 0:z.map(((e,n)=>o(y,{originalVariableList:null!=xo&&xo>-1?Oo.cards[xo]:Oo,type:e.type,descriptionComponent:e.component,showVariableModal:I,variableList:R},n))),(null===(Z=null===(J=null!=xo&&xo>-1?Oo.cards[xo].buttons:null==Oo?void 0:Oo.buttons)||void 0===J?void 0:J.filter((o=>"URL"===o.type)))||void 0===Z?void 0:Z.length)>0&&o(E,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(eo=null===(oo=null!=xo&&xo>-1?Oo.cards[xo].buttons:null==Oo?void 0:Oo.buttons)||void 0===oo?void 0:oo.filter((o=>Co===p.CHATBOT||"URL"===o.type)))||void 0===eo?void 0:eo.map(((e,n)=>{if("URL"===e.type)return o(V,{variableListIndex:n,CTAoptions:null==M?void 0:M.CTAoptions,button:e,currentVariableList:null!=xo&&xo>-1?Object.assign({},Oo.cards[xo]):Object.assign({},Oo),updateSelectedURLTemplateBtn:Ko,variableList:R},`${n}_${xo}`)})),Co===p.CHATBOT&&(null===(to=null===(no=Bo[0])||void 0===no?void 0:no.component)||void 0===to?void 0:to.buttons)&&(null===(ao=null===(lo=null===(io=Bo[0])||void 0===io?void 0:io.component)||void 0===lo?void 0:lo.buttons)||void 0===ao?void 0:ao.length)>0&&o(g,{backTrackMessage:null===(so=null==To?void 0:To.backTrackExtra)||void 0===so?void 0:so[0],setBackTrackMessage:null===(ro=null==To?void 0:To.backTrackExtra)||void 0===ro?void 0:ro[1]}),(null===(uo=null===(po=null!=xo&&xo>-1?Oo.cards[xo].buttons:null==Oo?void 0:Oo.buttons)||void 0===po?void 0:po.filter((o=>"QUICK_REPLY"===o.type)))||void 0===uo?void 0:uo.length)>0&&(Co!==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===(co=null==To?void 0:To.backTrackExtra)||void 0===co?void 0:co[0],setBackTrackMessage:null===(mo=null==To?void 0:To.backTrackExtra)||void 0===mo?void 0:mo[1]})),null===(bo=null===(vo=null!=xo&&xo>-1?Oo.cards[xo].buttons:null==Oo?void 0:Oo.buttons)||void 0===vo?void 0:vo.filter((o=>"QUICK_REPLY"===o.type)))||void 0===bo?void 0:bo.map(((e,n)=>{if("QUICK_REPLY"===e.type&&Co!==p.CHATBOT)return o(V,{variableListIndex:n,QRBoptions:null==M?void 0:M.QRBoptions,button:e,currentVariableList:null!=xo&&xo>-1?Object.assign({},Oo.cards[xo]):Object.assign({},Oo),updateSelectedQRBTemplateBtn:Wo},`${n}_${xo}`)})),Co===p.CHATBOT&&Uo&&o(f,{discountCode:null===(go=null==To?void 0:To.discountCodeExtra)||void 0===go?void 0:go[0],setDiscountCode:null===(fo=null==To?void 0:To.discountCodeExtra)||void 0===fo?void 0:fo[1],variableList:R}),null===(ho=null!=xo&&xo>-1?Oo.cards[xo].buttons:null==Oo?void 0:Oo.buttons)||void 0===ho?void 0:ho.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:Ro,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);console.log("selectedCarouselIndex",ko);const 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}},{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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.509-beta.carousel-2",
+	"version": "0.0.509-beta.carousel-4",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",