@bikdotai/bik-component-library 0.0.509-beta.carousel-9 → 0.0.509-beta.carousel-11
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.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/carousel-preview/CarouselPreview.d.ts +1 -0
- package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -3
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.d.ts +1 -0
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.js +1 -0
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/carousel-preview/CarouselPreview.d.ts +1 -0
- package/dist/esm/components/carousel-preview/CarouselPreview.js +1 -3
- package/dist/esm/components/carousel-preview/CarouselPreview.style.d.ts +1 -0
- package/dist/esm/components/carousel-preview/CarouselPreview.style.js +1 -0
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/package.json +1 -1
|
@@ -13,4 +13,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
|
|
|
13
13
|
showSampleValues?: boolean | undefined;
|
|
14
14
|
isPreview?: boolean | undefined;
|
|
15
15
|
removeBottomBorder?: boolean | undefined;
|
|
16
|
+
borderRadius?: string | undefined;
|
|
16
17
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../assets/icons/chevronLeft.svg.js"),t=require("../../assets/icons/chevronRight.svg.js"),l=require("react"),r=require("react-slick"),s=require("styled-components"),i=require("./CarouselPreview.style.js"),o=require("./CarouselPreviewCard.js"),d=require("../../constants/Theme.js"),a=require("../template-context-mapper/context/templateModalContext.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(l),x=c(r),p=c(s);const v=u.default.forwardRef((n=>{let{channel:t,template:l,isPreview:r,removeBottomBorder:s,borderRadius:d}=n;var c,u,p;const v=null===(c=null==l?void 0:l.components)||void 0===c?void 0:c[1].cards,{sliderRef:m,selectedCarouselIndex:j,cardCount:w,setIsCarouselHovered:C}=a.useTemplateModalContext();return e.jsxs(i.Container,Object.assign({removeBottomBorder:s,borderRadius:d},{children:[e.jsx(o.default,{channel:t,currentTemplate:l,carouselCardIndex:-1,isPreview:r,width:"77%"}),!!(null==v?void 0:v.length)&&e.jsx(g,Object.assign({cardCount:null!=w?w:0,selectedCarouselIndex:null!=j?j:-1,onMouseEnter:()=>null==C?void 0:C(!0),onMouseLeave:()=>null==C?void 0:C(!1)},{children:e.jsx(x.default,Object.assign({ref:m,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!r,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:e.jsx(h,{isPreview:null!=r&&r}),prevArrow:e.jsx(f,{isPreview:null!=r&&r})},{children:null===(p=null===(u=null==l?void 0:l.components)||void 0===u?void 0:u[1].cards)||void 0===p?void 0:p.map(((n,s)=>{var i,d;const a={components:n.components,mapping:null===(d=null===(i=null==l?void 0:l.mapping)||void 0===i?void 0:i.cards)||void 0===d?void 0:d[s]};return e.jsx(o.default,{channel:t,currentTemplate:a,carouselCardIndex:s,isPreview:r,width:"100%"},s)}))}))}))]}))})),h=n=>{const{className:l,style:r,onClick:s,isPreview:i}=n,{selectedCarouselIndex:o,setSelectedCarouselIndex:c,cardCount:u}=a.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},r),{display:s&&(null!=o?o:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",o,u),null==s||s(e),(null!=o?o:-1)>=(null!=u?u:-1)-1||i||null==c||c((null!=o?o:-1)+1)}},{children:e.jsx(t.default,{height:10,width:10,color:d.COLORS.content.primary})}))},f=t=>{const{className:l,style:r,onClick:s,isPreview:i}=t,{selectedCarouselIndex:o,setSelectedCarouselIndex:c}=a.useTemplateModalContext();return e.jsx("div",Object.assign({className:l,style:Object.assign(Object.assign({},r),{display:s&&(null!=o?o:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{null==s||s(e),(null!=o?o:-1)<1||i||null==c||c((null!=o?o:-1)-1)}},{children:e.jsx(n.default,{height:10,width:10,color:d.COLORS.content.primary})}))},g=p.default.div`
|
|
2
2
|
width: 100%;
|
|
3
|
-
/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
|
|
4
|
-
/* margin: auto; */
|
|
5
3
|
|
|
6
4
|
.slick-next:before {
|
|
7
5
|
content: none;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
showHeader?: boolean | undefined;
|
|
3
3
|
removeBottomBorder?: boolean | undefined;
|
|
4
|
+
borderRadius?: string | undefined;
|
|
4
5
|
}, never>;
|
|
5
6
|
export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
7
|
height: string;
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -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"),i=require("../../../assets/icons/chevronRight.svg.js"),n=require("../../../assets/icons/PlusIcon.js"),o=require("lodash"),r=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:S}=x;var q,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]=r.useState(-1==V?"First Message (Step 1/2)":M?"Product Carousel "+((null===(w=null===(q=null==y?void 0:y.mapping)||void 0===q?void 0:q.body)||void 0===w?void 0:w.length)?"
|
|
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"),n=require("../../../assets/icons/PlusIcon.js"),o=require("lodash"),r=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:S}=x;var q,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]=r.useState(-1==V?"First Message (Step 1/2)":M?"Product Carousel "+((null===(w=null===(q=null==y?void 0:y.mapping)||void 0===q?void 0:q.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]=r.useState(!1),[Y,Z]=r.useState(!1),[ee,te]=r.useState(!1),le=V===(null!=F?F:-1)-1,ie=(null!=V?V:-1)<1;r.useEffect((()=>{var e,t,l,i;Q(-1==V?"First Message (Step 1/2)":M?"Product Carousel "+((null===(t=null===(e=null==y?void 0:y.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(i=null===(l=null==y?void 0:y.mapping)||void 0===l?void 0:l.body)||void 0===i?void 0:i.length)?"(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=o.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(n.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(n.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:[e.jsx(d.IconButton,{Icon:l.default,disabled:ie,width:8,height:14,svgStyle:ie?{}:{color:c.COLORS.content.secondary},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}`})),e.jsx(d.IconButton,{Icon:i.default,width:8,height:14,disabled:le,svgStyle:le?{}:{color:c.COLORS.content.secondary},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:S}),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,n=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[n]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=W?W:[]),collectionFetcher:E.fetchCollections,productFetcher:E.fetchProducts,onAdd:(e,t)=>{var l,i,n,r,a,s;Z(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const o=e[t].products;if(void 0!==o&&Object.keys(o).length)for(const e of Object.keys(o)){const c=o[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=o[e])||void 0===l?void 0:l.image)&&void 0!==i?i:"",quantity:h,variantId:u,productId:e,displayOrder:m,collectionId:t,productName:null!==(r=null===(n=o[e])||void 0===n?void 0:n.name)&&void 0!==r?r:"",productImage:null!==(s=null===(a=o[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=o.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}])}})]}))};
|
|
@@ -13,4 +13,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
|
|
|
13
13
|
showSampleValues?: boolean | undefined;
|
|
14
14
|
isPreview?: boolean | undefined;
|
|
15
15
|
removeBottomBorder?: boolean | undefined;
|
|
16
|
+
borderRadius?: string | undefined;
|
|
16
17
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import t from"../../assets/icons/chevronRight.svg.js";import l from"react";import
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import t 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((o=>{let{channel:t,template:l,isPreview:i,removeBottomBorder:d,borderRadius:u}=o;var h,x,g;const f=null===(h=null==l?void 0:l.components)||void 0===h?void 0:h[1].cards,{sliderRef:w,selectedCarouselIndex:b,cardCount:C,setIsCarouselHovered:k}=a();return e(s,Object.assign({removeBottomBorder:d,borderRadius:u},{children:[n(c,{channel:t,currentTemplate:l,carouselCardIndex:-1,isPreview:i,width:"77%"}),!!(null==f?void 0:f.length)&&n(v,Object.assign({cardCount:null!=C?C: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:w,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!i,centerMode:!0,arrows:!0,adaptiveHeight:!0,nextArrow:n(p,{isPreview:null!=i&&i}),prevArrow:n(m,{isPreview:null!=i&&i})},{children:null===(g=null===(x=null==l?void 0:l.components)||void 0===x?void 0:x[1].cards)||void 0===g?void 0:g.map(((e,o)=>{var r,s;const d={components:e.components,mapping:null===(s=null===(r=null==l?void 0:l.mapping)||void 0===r?void 0:r.cards)||void 0===s?void 0:s[o]};return n(c,{channel:t,currentTemplate:d,carouselCardIndex:o,isPreview:i,width:"100%"},o)}))}))}))]}))})),p=e=>{const{className:o,style:l,onClick:r,isPreview:i}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:c,cardCount:u}=a();return n("div",Object.assign({className:o,style:Object.assign(Object.assign({},l),{display:r&&(null!=s?s:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{console.log("onClick",s,u),null==r||r(e),(null!=s?s:-1)>=(null!=u?u:-1)-1||i||null==c||c((null!=s?s:-1)+1)}},{children:n(t,{height:10,width:10,color:d.content.primary})}))},m=e=>{const{className:t,style:l,onClick:r,isPreview:i}=e,{selectedCarouselIndex:s,setSelectedCarouselIndex:c}=a();return n("div",Object.assign({className:t,style:Object.assign(Object.assign({},l),{display:r&&(null!=s?s:-1)>-1||i?"flex":"none",content:"none"}),onClick:e=>{null==r||r(e),(null!=s?s:-1)<1||i||null==c||c((null!=s?s:-1)-1)}},{children:n(o,{height:10,width:10,color:d.content.primary})}))},v=i.div`
|
|
2
2
|
width: 100%;
|
|
3
|
-
/* ${e=>e.selectedCarouselIndex<e.cardCount-1?"width: calc(100% - 48px);":"width: 100%;"} */
|
|
4
|
-
/* margin: auto; */
|
|
5
3
|
|
|
6
4
|
.slick-next:before {
|
|
7
5
|
content: none;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
showHeader?: boolean | undefined;
|
|
3
3
|
removeBottomBorder?: boolean | undefined;
|
|
4
|
+
borderRadius?: string | undefined;
|
|
4
5
|
}, never>;
|
|
5
6
|
export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
7
|
height: string;
|
|
@@ -11,6 +11,7 @@ import e from"styled-components";import{COLORS as o}from"../../constants/Theme.j
|
|
|
11
11
|
position: relative;
|
|
12
12
|
height: 500px;
|
|
13
13
|
overflow-y: auto;
|
|
14
|
+
border-radius: ${e=>{var o;return null!==(o=e.borderRadius)&&void 0!==o?o:"0px"}};
|
|
14
15
|
`;e.div`
|
|
15
16
|
flex-direction: row;
|
|
16
17
|
display: flex;
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import o from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import n from"../../../assets/icons/chevronRight.svg.js";import r from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as d,useEffect as s}from"react";import{AddVariableV2SideModal as c}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as v,TitleRegular as h,BodySecondary as g,BodyCaption as f}from"../../TypographyStyle.js";import{ProductPickerModal as y,ScreenName as b}from"../../product-picker-v2/modal.js";import{Badge as j}from"../Badge/index.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import C from"./EditWhatsAppTemplateV2.js";import{ProductBox as I}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as w}from"../../template-preview/models/WhatsAppTemplate.js";const O=O=>{let{template:k,whatsappSpecificPickerMeta:P,showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}=O;var E,B,M,D,F,R,W,$;const{selectedCarouselIndex:q,setTemplate:_,pickerConf:N,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:J,setCarouselProducts:K,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,sliderRef:ee}=x(),[te,le]=d(-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(B=null===(E=null==k?void 0:k.mapping)||void 0===E?void 0:E.body)||void 0===B?void 0:B.length)?"
|
|
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 v,TitleRegular as h,BodySecondary as g,BodyCaption as f}from"../../TypographyStyle.js";import{ProductPickerModal as y,ScreenName as b}from"../../product-picker-v2/modal.js";import{Badge as j}from"../Badge/index.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import C from"./EditWhatsAppTemplateV2.js";import{ProductBox as I}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as w}from"../../template-preview/models/WhatsAppTemplate.js";const O=O=>{let{template:k,whatsappSpecificPickerMeta:P,showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}=O;var E,B,M,D,F,R,W,$;const{selectedCarouselIndex:q,setTemplate:_,pickerConf:N,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:J,setCarouselProducts:K,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,sliderRef:ee}=x(),[te,le]=d(-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(B=null===(E=null==k?void 0:k.mapping)||void 0===E?void 0:E.body)||void 0===B?void 0:B.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(D=null===(M=null==k?void 0:k.mapping)||void 0===M?void 0:M.body)||void 0===D?void 0:D.length)?"(Step 2/2)":"")),[oe,ie]=d(!1),[ne,re]=d(!1),[ae,de]=d(!1),se=q===(null!=H?H:-1)-1,ce=(null!=q?q:-1)<1;s((()=>{var e,t,l,o;le(-1==q?"First Message (Step 1/2)":z?"Product Carousel "+((null===(t=null===(e=null==k?void 0:k.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(l=null==k?void 0:k.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[q]);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=q&&q>=0&&(null===(R=null===(F=null==k?void 0:k.mapping)||void 0===F?void 0:F.body)||void 0===R?void 0:R.length)&&t(p,{Icon:o,onClick:()=>{null==Z||Z(-1)}}),t(v,Object.assign({style:{marginLeft:10}},{children:te}))]})),z&&(null!==(W=null==J?void 0:J.length)&&void 0!==W?W:0)>0&&null!=q&&q>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(I,{editItem:()=>{1===(null==J?void 0:J.length)&&"variable"===J[0].name?de(!0):ie(!oe)},cardBody:1===(null==J?void 0:J.length)&&"variable"===J[0].name?`${J[0].productName}`:`${null==J?void 0:J.length} Products Selected`,hideIcon:1===(null==J?void 0:J.length)&&"variable"===J[0].name,deleteItem:()=>{var e;if(1===(null==J?void 0:J.length)&&"variable"===J[0].name)return void(null==K||K([]));const t=a(Object.assign({},k));t&&(U&&U.length>0?null==U||U.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!==(o=U[l])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==_||_(t)),null==K||K([]),null==Y||Y()}}),J&&(null==J?void 0:J.length)>0&&"variable"!=J[0].name&&t(u,{disabled:(null!==($=null==J?void 0:J.length)&&void 0!==$?$:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{re(!0),ie(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==J?void 0:J.length)&&null!=q&&q>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(h,{children:"Product(s)"}),t(g,{children:`Select ${null!=H?H:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:Q?16:12,marginRight:Q?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(r,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{ie(!0)}}),G===w.CHATBOT&&e(l,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(f,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(r,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{de(!0)}})]})]})),Q&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(j,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=q?q:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:m.surface.hovered,alignItems:"center"}},{children:[t(p,{Icon:i,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:m.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickPrev(),(null!=q?q:-1)<1||null==Z||Z((e=>e-1))}}),t(h,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:m.content.secondary},{children:`Card ${(null!=q?q:0)+1}/${H}`})),t(p,{Icon:n,width:8,height:14,disabled:se,svgStyle:se?{}:{color:m.content.secondary},onClick:()=>{var e;null===(e=null==ee?void 0:ee.current)||void 0===e||e.slickNext(),(null!=q?q:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),t(C,{whatsappSpecificPickerMeta:P,template:k,onTemplateChange:e=>{null==_||_(e)},showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}),oe&&N&&t(y,{zIndex:200,startupScreen:ne?b.RearrangeProducts:b.Collections,rearrangeEnabled:!0,storeId:N.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[i]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=J?J:[]),collectionFetcher:N.fetchCollections,productFetcher:N.fetchProducts,onAdd:(e,t)=>{var l,o,i,n,r,d;re(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const a=e[t].products;if(void 0!==a&&Object.keys(a).length)for(const e of Object.keys(a)){const c=a[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:v,displayOrder:h}=c[u],g={name:p,image:null!==(o=null!=m?m:null===(l=a[e])||void 0===l?void 0:l.image)&&void 0!==o?o:"",quantity:v,variantId:u,productId:e,displayOrder:h,collectionId:t,productName:null!==(n=null===(i=a[e])||void 0===i?void 0:i.name)&&void 0!==n?n:"",productImage:null!==(d=null===(r=a[e])||void 0===r?void 0:r.image)&&void 0!==d?d:""};s.push(g)}}}const c=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=s.map((e=>e.image)),p=a(Object.assign({},k));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==U?void 0:U[t])&&void 0!==l?l:""]})),null==_||_(p)),null==K||K(c),ie(!1)},searchInCollectionFetcher:N.searchInCollection,searchFetcher:N.searchProducts,visible:oe,onClose:()=>{ie(!1)},exactLimit:null!=H?H:1}),ae&&t(c,{zIndex:2e3,data:null!=S?S:[],showVariable:ae,setShowVariable:de,placeholder:"Add a variable",customTrigger:e=>{null==K||K([{name:"variable",productName:e.actualValue}])}})]}))};export{O as default};
|