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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
@@ -1,4 +1,4 @@
1
- "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`
1
+ "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(f,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(h,{})},{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})}))},h=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})}))},f=v.default.div`
2
2
  width: 100%;
3
3
  /* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
4
4
  /* margin: auto; */
@@ -35,9 +35,9 @@
35
35
  display: flex;
36
36
  }
37
37
 
38
- /* .slick-slide > div {
39
- margin-bottom: 24px;
40
- } */
38
+ .slick-slide > div {
39
+ height: 100%;
40
+ }
41
41
 
42
42
  .slick-track {
43
43
  flex: 1;
@@ -1 +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}])}})]}))};
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"),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==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==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}])}})]}))};
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
@@ -1,4 +1,4 @@
1
- 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`
1
+ 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 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=l.forwardRef(((t,o)=>{let{channel:l,template:s,showSampleValues:a,isPreview:u,removeBottomBorder:h}=t;var g,f,x;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:l,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(r,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===(x=null===(f=null==s?void 0:s.components)||void 0===f?void 0:f[1].cards)||void 0===x?void 0:x.map(((e,t)=>{var o,r;const i={components:e.components,mapping:null===(r=null===(o=null==s?void 0:s.mapping)||void 0===o?void 0:o.cards)||void 0===r?void 0:r[t]};return n(c,{channel:l,currentTemplate:i,carouselCardIndex:t,isPreview:u,width:"100%"},t)}))}))}))]}))})),m=e=>{const{className:t,style:l,onClick:r}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:i}=d();return n("div",Object.assign({className:t,style:Object.assign(Object.assign({},l),{display:r&&(null!=s?s:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==i||i((e=>e+1)),null==r||r(e)}},{children:n(o,{height:10,width:10,color:a.content.primary})}))},p=e=>{const{className:o,style:l,onClick:r}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:i}=d();return n("div",Object.assign({className:o,style:Object.assign(Object.assign({},l),{display:r&&(null!=s?s:-1)>-1?"flex":"none",content:"none"}),onClick:e=>{null==i||i((e=>e-1)),null==r||r(e)}},{children:n(t,{height:10,width:10,color:a.content.primary})}))},v=s.div`
2
2
  width: 100%;
3
3
  /* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
4
4
  /* margin: auto; */
@@ -35,9 +35,9 @@ import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"../../assets/ico
35
35
  display: flex;
36
36
  }
37
37
 
38
- /* .slick-slide > div {
39
- margin-bottom: 24px;
40
- } */
38
+ .slick-slide > div {
39
+ height: 100%;
40
+ }
41
41
 
42
42
  .slick-track {
43
43
  flex: 1;
@@ -1 +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};
1
+ import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import o from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import n from"../../../assets/icons/chevronRight.svg.js";import r from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as d,useEffect as s}from"react";import{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==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==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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.509-beta.carousel-2",
3
+ "version": "0.0.509-beta.carousel-3",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",