@bikdotai/bik-component-library 0.0.419-beta.10 → 0.0.419-beta.12

package/dist/cjs/assets/icons/PlusIcon.d.ts

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 export type Icon = React.FC<SVGProps<SVGSVGElement> & {
     color?: string;
     width?: string | number;

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

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

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

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),i=require("../../assets/icons/chevronRight.svg.js"),r=require("pure-react-carousel"),o=require("react"),s=require("styled-components"),n=require("./CarouselPreviewCard.js"),l=require("../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=a(o),c=a(s);const u=c.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),r=require("../../assets/icons/chevronRight.svg.js"),i=require("pure-react-carousel"),o=require("react"),n=require("styled-components"),s=require("./CarouselPreviewCard.js"),a=require("../../constants/Theme.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(o),c=l(n);const u=c.default.div`
 	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
-	border-color: ${l.COLORS.stroke.primary};
+	border-color: ${a.COLORS.stroke.primary};
 	border-top-style: solid;
 	border-bottom-style: solid;
 	border-top-width: 1px;
@@ -17,8 +17,8 @@
 	align-items: center;
 	.left_button {
 		border-radius: 50%;
-		width: 38px;
-		height: 36px;
+		width: 24px;
+		height: 24px;
 		align-items: center;
 		justify-content: center;
 		display: flex;
@@ -26,11 +26,14 @@
 		left: 0;
 		z-index: 10;
 		margin-left: 4px;
+		border: none;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
 	}
 	.right_button {
 		border-radius: 50%;
-		width: 38px;
-		height: 36px;
+		width: 24px;
+		height: 24px;
 		align-items: center;
 		justify-content: center;
 		display: flex;
@@ -38,9 +41,12 @@
 		right: 0;
 		z-index: 10;
 		margin-right: 4px;
+		border: none;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
 	}
 	.slider {
-		width: 360px;
+		width: 800px;
 		height: 480px;
 	}
-`,h=d.default.forwardRef(((s,a)=>{let{channel:d,template:c,showSampleValues:h}=s;var b,v,g,f,m,x;return o.useEffect((()=>{console.log("template mapper  use effect: ",-1,c)}),[null===(b=null==c?void 0:c.components)||void 0===b?void 0:b[1].cards]),e.jsxs(u,{children:[e.jsx(n.default,{channel:d,template:c,isHeader:!0,carouselCardIndex:-1}),e.jsx(r.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(f=null===(g=null===(v=null==c?void 0:c.components)||void 0===v?void 0:v[1].cards)||void 0===g?void 0:g.length)&&void 0!==f?f:1,orientation:"horizontal",visibleSlides:1.2},{children:e.jsxs(p,{children:[e.jsx(r.ButtonBack,Object.assign({className:"left_button"},{children:e.jsx(t.default,{height:16,width:16,color:l.COLORS.content.primary})})),e.jsx(r.Slider,Object.assign({className:"slider"},{children:null===(x=null===(m=null==c?void 0:c.components)||void 0===m?void 0:m[1].cards)||void 0===x?void 0:x.map(((t,i)=>{var o,s;const l={components:t.components,mapping:null===(s=null===(o=null==c?void 0:c.mapping)||void 0===o?void 0:o.cards)||void 0===s?void 0:s[i]};return e.jsx(r.Slide,Object.assign({index:i},{children:e.jsx(n.default,{channel:d,template:l,isHeader:!1,carouselCardIndex:i},i)}),i)}))})),e.jsx(r.ButtonNext,Object.assign({className:"right_button"},{children:e.jsx(i.default,{height:16,width:16,color:l.COLORS.content.primary})}))]})}))]})}));exports.CarouselPreview=h;
+`,h=d.default.forwardRef(((o,n)=>{let{channel:l,template:d,showSampleValues:c}=o;var h,b,x,g,v;return e.jsxs(u,{children:[e.jsx(s.default,{channel:l,template:d,isHeader:!0,carouselCardIndex:-1}),e.jsx(i.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(x=null===(b=null===(h=null==d?void 0:d.components)||void 0===h?void 0:h[1].cards)||void 0===b?void 0:b.length)&&void 0!==x?x:1,orientation:"horizontal",visibleSlides:1.6},{children:e.jsxs(p,{children:[e.jsx(i.ButtonBack,Object.assign({className:"left_button"},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})})),e.jsx(i.Slider,Object.assign({className:"slider"},{children:null===(v=null===(g=null==d?void 0:d.components)||void 0===g?void 0:g[1].cards)||void 0===v?void 0:v.map(((t,r)=>{var o,n;const a={components:t.components,mapping:null===(n=null===(o=null==d?void 0:d.mapping)||void 0===o?void 0:o.cards)||void 0===n?void 0:n[r]};return e.jsx(i.Slide,Object.assign({index:r},{children:e.jsx(s.default,{channel:l,template:a,isHeader:!1,carouselCardIndex:r},r)}),r)}))})),e.jsx(i.ButtonNext,Object.assign({className:"right_button"},{children:e.jsx(r.default,{height:10,width:10,color:a.COLORS.content.primary})}))]})}))]})}));exports.CarouselPreview=h;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -31,5 +31,13 @@ export interface TemplateContextMapperProps {
     disableEditVariable?: boolean;
     pod?: POD;
     extras?: ExtrasWhatsapp;
+    isProductCarouselTemplate?: boolean;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    };
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, isProductCarouselTemplate, pickerConf, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),o=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),r=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:v,onTemplateSelect:C,globalPlaceholders:g,showOnlyContent:S,whatsappSpecificPickerMeta:b,zIndex:E,showVariableModal:T,variableList:x,discountCode:P,setDiscountCode:j,onBackPress:L,enabledCustomText:M,variableListForImage:A,showSampleValues:w,disableEditVariable:f,pod:y,extras:N}=d;var V,I,q,H,O,_;l.useEffect((()=>{Y(h)}),[h]);const k=m===o.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(I=null===(V=c.components)||void 0===V?void 0:V[1])||void 0===I?void 0:I.type);console.log("isWhatsappCarousel: ",k),console.log("channel: ",m),console.log("is carousel: ","CAROUSEL"===(null===(H=null===(q=c.components)||void 0===q?void 0:q[1])||void 0===H?void 0:H.type)),console.log("selectedTemplate: ",c.components);const[D,F]=l.useState(m===o.CHANNEL_TYPE.EMAIL||k?"desktop":"mobile"),[W,Y]=l.useState(h),[B,z]=l.useState(!1),[U,R]=l.useState(c),[$,G]=l.useState(null!=v?v:[]),[J,K]=l.useState(!1),[Q,X]=l.useState(-1);const Z=l.useMemo((()=>r.convertPlaceholdersToBikDropdown(g)),[g]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:U,setTemplate:R,device:D,setDevice:F,display_content:W,setDisplayContent:Y,originalVariableList:$,setOriginalVariableList:G,isError:B,setIsError:z,channel:m,globalNormalizedPlaceholders:Z,templateSelectionTriggered:J,setTemplateSelectionTriggered:K,enabledCustomText:M,disableEditVariable:f,pod:y,extras:N,isWhatsappCarousel:k,selectedCarouselIndex:Q,setSelectedCarouselIndex:X}},{children:S?e.jsx(n.default,{channel:o.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:E,centralContainerStyles:{width:k?900:m===o.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==u||u()},headingTitle:null==U?void 0:U.label,headingSubtitle:m===o.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(O=null==U?void 0:U.category)&&void 0!==O?O:"")} • ${null!==(_=null==U?void 0:U.templateCategory)&&void 0!==_?_:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e.jsx(n.default,{showSampleValues:w,showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:b,showVariableModal:T,variableList:x,discountCode:P,setDiscountCode:j,variableListForImage:A&&(null==A?void 0:A.length)>0?A:x}),C?e.jsx(i.default,{isWhatsappCarousel:null!=k&&k,onSelect:function(){const e=null==C?void 0:C(U,$,null!=W?W:"");e?z(!!e):K(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),o=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),r=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:C,templateVariables:h,onTemplateSelect:v,globalPlaceholders:g,showOnlyContent:S,whatsappSpecificPickerMeta:b,zIndex:T,showVariableModal:E,variableList:x,discountCode:P,setDiscountCode:j,onBackPress:L,enabledCustomText:M,variableListForImage:A,showSampleValues:f,disableEditVariable:w,pod:y,extras:N,isProductCarouselTemplate:V,pickerConf:I}=d;var k,q,H,O,_,D;l.useEffect((()=>{z(C)}),[C]);const F=m===o.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(q=null===(k=c.components)||void 0===k?void 0:k[1])||void 0===q?void 0:q.type);console.log("isWhatsappCarousel: ",F),console.log("channel: ",m),console.log("is carousel: ","CAROUSEL"===(null===(O=null===(H=c.components)||void 0===H?void 0:H[1])||void 0===O?void 0:O.type)),console.log("selectedTemplate: ",c.components);const[W,Y]=l.useState(m===o.CHANNEL_TYPE.EMAIL||F?"desktop":"mobile"),[B,z]=l.useState(C),[U,R]=l.useState(!1),[$,G]=l.useState(c),[J,K]=l.useState(null!=h?h:[]),[Q,X]=l.useState(!1),[Z,ee]=l.useState(-1);const le=l.useMemo((()=>r.convertPlaceholdersToBikDropdown(g)),[g]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:$,setTemplate:G,device:W,setDevice:Y,display_content:B,setDisplayContent:z,originalVariableList:J,setOriginalVariableList:K,isError:U,setIsError:R,channel:m,globalNormalizedPlaceholders:le,templateSelectionTriggered:Q,setTemplateSelectionTriggered:X,enabledCustomText:M,disableEditVariable:w,pod:y,extras:N,isWhatsappCarousel:F,selectedCarouselIndex:Z,setSelectedCarouselIndex:ee,isProductCarouselTemplate:V,pickerConf:I}},{children:S?e.jsx(n.default,{channel:o.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:T,centralContainerStyles:{width:F?900:m===o.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==u||u()},headingTitle:null==$?void 0:$.label,headingSubtitle:m===o.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(_=null==$?void 0:$.category)&&void 0!==_?_:"")} • ${null!==(D=null==$?void 0:$.templateCategory)&&void 0!==D?D:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e.jsx(n.default,{showSampleValues:f,showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:b,showVariableModal:E,variableList:x,discountCode:P,setDiscountCode:j,variableListForImage:A&&(null==A?void 0:A.length)>0?A:x}),v?e.jsx(i.default,{isWhatsappCarousel:null!=F&&F,onSelect:function(){const e=null==v?void 0:v($,J,null!=B?B:"");e?R(!!e):X(!0)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts

@@ -29,6 +29,14 @@ export declare const TemplateModalContext: React.Context<{
     isWhatsappCarousel?: boolean | undefined;
     selectedCarouselIndex?: number | undefined;
     setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselTemplate?: boolean | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -53,4 +61,12 @@ export declare const useTemplateModalContext: () => {
     isWhatsappCarousel?: boolean | undefined;
     selectedCarouselIndex?: number | undefined;
     setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselTemplate?: boolean | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
 };

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("react"),a=require("../context/templateModalContext.js"),s=require("./EditWhatsAppTemplateV2.js"),r=require("../../TypographyStyle.js");exports.default=i=>{let{template:l,whatsappSpecificPickerMeta:o,showVariableModal:p,variableList:u,variableListForImage:d,discountCode:c,setDiscountCode:n}=i;const{selectedCarouselIndex:m,setTemplate:C}=a.useTemplateModalContext(),[x,M]=t.useState(-1==m?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)");return t.useEffect((()=>{M(-1==m?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[m]),e.jsxs("div",{children:[e.jsx(r.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:x})),e.jsx(s.default,{whatsappSpecificPickerMeta:o,template:l,onTemplateChange:e=>{null==C||C(e)},showVariableModal:p,variableList:u,variableListForImage:d,discountCode:c,setDiscountCode:n})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),s=require("react"),i=require("../../button/Button.js"),o=require("../../product-picker-v2/modal.js"),r=require("../context/templateModalContext.js"),a=require("./EditWhatsAppTemplateV2.js"),n=require("../../TypographyStyle.js");exports.default=l=>{let{template:d,whatsappSpecificPickerMeta:c,showVariableModal:u,variableList:p,variableListForImage:m,discountCode:h,setDiscountCode:g}=l;const{selectedCarouselIndex:f,setTemplate:y,pickerConf:x,isProductCarouselTemplate:j}=r.useTemplateModalContext(),[b,v]=s.useState(-1==f?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[C,I]=s.useState(!1),[O,k]=s.useState([]);s.useEffect((()=>{v(-1==f?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[f]);return e.jsxs("div",{children:[e.jsx(n.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:b})),j&&e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(i.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{I(!0)}}),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(n.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(i.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{}})]})),e.jsx(a.default,{whatsappSpecificPickerMeta:c,template:d,onTemplateChange:e=>{null==y||y(e)},showVariableModal:u,variableList:p,variableListForImage:m,discountCode:h,setDiscountCode:g}),C&&x&&e.jsx(o.ProductPickerModal,{zIndex:200,limit:1,storeId:x.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const s of e){const e=null==s?void 0:s.collectionId,i=s.productId,o=s.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==s?void 0:s.productName)||"",image:(null==s?void 0:s.productImage)||""}),t[e].products[i].variants[o]={name:(null==s?void 0:s.name)||"",price:"",image:(null==s?void 0:s.image)||"",quantity:s.quantity||0,displayOrder:s.displayOrder}}return t}return{}})(O),collectionFetcher:x.fetchCollections,productFetcher:x.fetchProducts,onAdd:(e,t)=>{const s=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const o=i[e].variants;if(void 0!==o&&Object.keys(o).length)for(const r of Object.keys(o)){const{name:a,image:n,quantity:l,displayOrder:d}=o[r],c={name:a,image:n,quantity:l,variantId:r,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};s.push(c)}}}const i=s.sort(((e,t)=>e.displayOrder-t.displayOrder));k(i)},searchInCollectionFetcher:x.searchInCollection,searchFetcher:x.searchProducts,visible:C,onClose:()=>{I(!1)}})]})};

package/dist/esm/assets/icons/PlusIcon.d.ts

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
 export type Icon = React.FC<SVGProps<SVGSVGElement> & {
     color?: string;
     width?: string | number;

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

@@ -1,4 +1,3 @@
-/// <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 t}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import i from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as r,ButtonBack as n,Slider as l,Slide as a,ButtonNext as s}from"pure-react-carousel";import d,{useEffect as c}from"react";import p from"styled-components";import m from"./CarouselPreviewCard.js";import{COLORS as h}from"../../constants/Theme.js";const u=p.div`
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import i from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as r,ButtonBack as n,Slider as a,Slide as s,ButtonNext as d}from"pure-react-carousel";import l from"react";import c from"styled-components";import p from"./CarouselPreviewCard.js";import{COLORS as h}from"../../constants/Theme.js";const m=c.div`
 	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
 	border-color: ${h.stroke.primary};
 	border-top-style: solid;
@@ -11,14 +11,14 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/ico
 	position: relative;
 	height: 500px;
 	overflow-y: auto;
-`,b=p.div`
+`,b=c.div`
 	flex-direction: row;
 	display: flex;
 	align-items: center;
 	.left_button {
 		border-radius: 50%;
-		width: 38px;
-		height: 36px;
+		width: 24px;
+		height: 24px;
 		align-items: center;
 		justify-content: center;
 		display: flex;
@@ -26,11 +26,14 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/ico
 		left: 0;
 		z-index: 10;
 		margin-left: 4px;
+		border: none;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
 	}
 	.right_button {
 		border-radius: 50%;
-		width: 38px;
-		height: 36px;
+		width: 24px;
+		height: 24px;
 		align-items: center;
 		justify-content: center;
 		display: flex;
@@ -38,9 +41,12 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/ico
 		right: 0;
 		z-index: 10;
 		margin-right: 4px;
+		border: none;
+		background-color: white;
+		box-shadow: 0px 1.5px 6px 0px #0000001f;
 	}
 	.slider {
-		width: 360px;
+		width: 800px;
 		height: 480px;
 	}
-`,g=d.forwardRef(((d,p)=>{let{channel:g,template:v,showSampleValues:f}=d;var x,y,j,w,k,O;return c((()=>{console.log("template mapper  use effect: ",-1,v)}),[null===(x=null==v?void 0:v.components)||void 0===x?void 0:x[1].cards]),e(u,{children:[t(m,{channel:g,template:v,isHeader:!0,carouselCardIndex:-1}),t(r,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(w=null===(j=null===(y=null==v?void 0:v.components)||void 0===y?void 0:y[1].cards)||void 0===j?void 0:j.length)&&void 0!==w?w:1,orientation:"horizontal",visibleSlides:1.2},{children:e(b,{children:[t(n,Object.assign({className:"left_button"},{children:t(o,{height:16,width:16,color:h.content.primary})})),t(l,Object.assign({className:"slider"},{children:null===(O=null===(k=null==v?void 0:v.components)||void 0===k?void 0:k[1].cards)||void 0===O?void 0:O.map(((e,o)=>{var i,r;const n={components:e.components,mapping:null===(r=null===(i=null==v?void 0:v.mapping)||void 0===i?void 0:i.cards)||void 0===r?void 0:r[o]};return t(a,Object.assign({index:o},{children:t(m,{channel:g,template:n,isHeader:!1,carouselCardIndex:o},o)}),o)}))})),t(s,Object.assign({className:"right_button"},{children:t(i,{height:16,width:16,color:h.content.primary})}))]})}))]})}));export{g as CarouselPreview};
+`,u=l.forwardRef(((l,c)=>{let{channel:u,template:g,showSampleValues:x}=l;var f,v,w,y,j;return e(m,{children:[o(p,{channel:u,template:g,isHeader:!0,carouselCardIndex:-1}),o(r,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(w=null===(v=null===(f=null==g?void 0:g.components)||void 0===f?void 0:f[1].cards)||void 0===v?void 0:v.length)&&void 0!==w?w:1,orientation:"horizontal",visibleSlides:1.6},{children:e(b,{children:[o(n,Object.assign({className:"left_button"},{children:o(t,{height:10,width:10,color:h.content.primary})})),o(a,Object.assign({className:"slider"},{children:null===(j=null===(y=null==g?void 0:g.components)||void 0===y?void 0:y[1].cards)||void 0===j?void 0:j.map(((e,t)=>{var i,r;const n={components:e.components,mapping:null===(r=null===(i=null==g?void 0:g.mapping)||void 0===i?void 0:i.cards)||void 0===r?void 0:r[t]};return o(s,Object.assign({index:t},{children:o(p,{channel:u,template:n,isHeader:!1,carouselCardIndex:t},t)}),t)}))})),o(d,Object.assign({className:"right_button"},{children:o(i,{height:10,width:10,color:h.content.primary})}))]})}))]})}));export{u as CarouselPreview};

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

@@ -31,5 +31,13 @@ export interface TemplateContextMapperProps {
     disableEditVariable?: boolean;
     pod?: POD;
     extras?: ExtrasWhatsapp;
+    isProductCarouselTemplate?: boolean;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    };
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, isProductCarouselTemplate, pickerConf, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useEffect as t,useState as a,useMemo as i}from"react";import s from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as r}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as m}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:g,showVariableMapping:v,channel:b,htmlContent:C,templateVariables:S,onTemplateSelect:T,globalPlaceholders:f,showOnlyContent:w,whatsappSpecificPickerMeta:x,zIndex:L,showVariableModal:M,variableList:P,discountCode:E,setDiscountCode:V,onBackPress:j,enabledCustomText:I,variableListForImage:y,showSampleValues:A,disableEditVariable:O,pod:k,extras:D}=u;var W,F,z,B,H,U;t((()=>{q(C)}),[C]);const R=b===r.WHATSAPP&&"CAROUSEL"===(null===(F=null===(W=h.components)||void 0===W?void 0:W[1])||void 0===F?void 0:F.type);console.log("isWhatsappCarousel: ",R),console.log("channel: ",b),console.log("is carousel: ","CAROUSEL"===(null===(B=null===(z=h.components)||void 0===z?void 0:z[1])||void 0===B?void 0:B.type)),console.log("selectedTemplate: ",h.components);const[$,N]=a(b===r.EMAIL||R?"desktop":"mobile"),[_,q]=a(C),[G,J]=a(!1),[K,Q]=a(h),[X,Y]=a(null!=S?S:[]),[Z,ee]=a(!1),[le,oe]=a(-1);const te=i((()=>m(f)),[f]);return e(d.Provider,Object.assign({value:{template:K,setTemplate:Q,device:$,setDevice:N,display_content:_,setDisplayContent:q,originalVariableList:X,setOriginalVariableList:Y,isError:G,setIsError:J,channel:b,globalNormalizedPlaceholders:te,templateSelectionTriggered:Z,setTemplateSelectionTriggered:ee,enabledCustomText:I,disableEditVariable:O,pod:k,extras:D,isWhatsappCarousel:R,selectedCarouselIndex:le,setSelectedCarouselIndex:oe}},{children:w?e(p,{channel:r.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:L,centralContainerStyles:{width:R?900:b===r.EMAIL&&v?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==K?void 0:K.label,headingSubtitle:b===r.WHATSAPP?`${s.capitaliseFirstLetterOfString(null!==(H=null==K?void 0:K.category)&&void 0!==H?H:"")} • ${null!==(U=null==K?void 0:K.templateCategory)&&void 0!==U?U:""}`:"",onBackPress:()=>{null==j||j()}},{children:[e(p,{showSampleValues:A,showVariableMapping:v,channel:b,whatsappSpecificPickerMeta:x,showVariableModal:M,variableList:P,discountCode:E,setDiscountCode:V,variableListForImage:y&&(null==y?void 0:y.length)>0?y:P}),T?e(c,{isWhatsappCarousel:null!=R&&R,onSelect:function(){const e=null==T?void 0:T(K,X,null!=_?_:"");e?J(!!e):ee(!0)}}):e(o,{})]}))}))};export{u as TemplateContextMapper};
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useEffect as t,useState as a,useMemo as i}from"react";import s from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as r}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as m}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:g,showVariableMapping:v,channel:C,htmlContent:b,templateVariables:S,onTemplateSelect:T,globalPlaceholders:f,showOnlyContent:P,whatsappSpecificPickerMeta:w,zIndex:x,showVariableModal:L,variableList:M,discountCode:E,setDiscountCode:V,onBackPress:j,enabledCustomText:I,variableListForImage:y,showSampleValues:A,disableEditVariable:k,pod:O,extras:D,isProductCarouselTemplate:W,pickerConf:F}=u;var z,B,H,U,R,$;t((()=>{J(b)}),[b]);const N=C===r.WHATSAPP&&"CAROUSEL"===(null===(B=null===(z=h.components)||void 0===z?void 0:z[1])||void 0===B?void 0:B.type);console.log("isWhatsappCarousel: ",N),console.log("channel: ",C),console.log("is carousel: ","CAROUSEL"===(null===(U=null===(H=h.components)||void 0===H?void 0:H[1])||void 0===U?void 0:U.type)),console.log("selectedTemplate: ",h.components);const[_,q]=a(C===r.EMAIL||N?"desktop":"mobile"),[G,J]=a(b),[K,Q]=a(!1),[X,Y]=a(h),[Z,ee]=a(null!=S?S:[]),[le,oe]=a(!1),[te,ae]=a(-1);const ie=i((()=>m(f)),[f]);return e(d.Provider,Object.assign({value:{template:X,setTemplate:Y,device:_,setDevice:q,display_content:G,setDisplayContent:J,originalVariableList:Z,setOriginalVariableList:ee,isError:K,setIsError:Q,channel:C,globalNormalizedPlaceholders:ie,templateSelectionTriggered:le,setTemplateSelectionTriggered:oe,enabledCustomText:I,disableEditVariable:k,pod:O,extras:D,isWhatsappCarousel:N,selectedCarouselIndex:te,setSelectedCarouselIndex:ae,isProductCarouselTemplate:W,pickerConf:F}},{children:P?e(p,{channel:r.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:x,centralContainerStyles:{width:N?900:C===r.EMAIL&&v?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==X?void 0:X.label,headingSubtitle:C===r.WHATSAPP?`${s.capitaliseFirstLetterOfString(null!==(R=null==X?void 0:X.category)&&void 0!==R?R:"")} • ${null!==($=null==X?void 0:X.templateCategory)&&void 0!==$?$:""}`:"",onBackPress:()=>{null==j||j()}},{children:[e(p,{showSampleValues:A,showVariableMapping:v,channel:C,whatsappSpecificPickerMeta:w,showVariableModal:L,variableList:M,discountCode:E,setDiscountCode:V,variableListForImage:y&&(null==y?void 0:y.length)>0?y:M}),T?e(c,{isWhatsappCarousel:null!=N&&N,onSelect:function(){const e=null==T?void 0:T(X,Z,null!=G?G:"");e?Q(!!e):oe(!0)}}):e(o,{})]}))}))};export{u as TemplateContextMapper};

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

@@ -29,6 +29,14 @@ export declare const TemplateModalContext: React.Context<{
     isWhatsappCarousel?: boolean | undefined;
     selectedCarouselIndex?: number | undefined;
     setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselTemplate?: boolean | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -53,4 +61,12 @@ export declare const useTemplateModalContext: () => {
     isWhatsappCarousel?: boolean | undefined;
     selectedCarouselIndex?: number | undefined;
     setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
+    isProductCarouselTemplate?: boolean | undefined;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+    } | undefined;
 };

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useEffect as r}from"react";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import o from"./EditWhatsAppTemplateV2.js";import{TitleMedium as i}from"../../TypographyStyle.js";const l=l=>{let{template:p,whatsappSpecificPickerMeta:m,showVariableModal:c,variableList:n,variableListForImage:d,discountCode:u,setDiscountCode:C}=l;const{selectedCarouselIndex:f,setTemplate:g}=s(),[h,b]=a(-1==f?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)");return r((()=>{b(-1==f?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[f]),e("div",{children:[t(i,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:h})),t(o,{whatsappSpecificPickerMeta:m,template:p,onTemplateChange:e=>{null==g||g(e)},showVariableModal:c,variableList:n,variableListForImage:d,discountCode:u,setDiscountCode:C})]})};export{l as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/PlusIcon.js";import{useState as i,useEffect as r}from"react";import{Button as s}from"../../button/Button.js";import{ProductPickerModal as a}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as n}from"../context/templateModalContext.js";import l from"./EditWhatsAppTemplateV2.js";import{TitleMedium as d,BodyCaption as c}from"../../TypographyStyle.js";const m=m=>{let{template:p,whatsappSpecificPickerMeta:u,showVariableModal:h,variableList:g,variableListForImage:f,discountCode:y,setDiscountCode:b}=m;const{selectedCarouselIndex:v,setTemplate:C,pickerConf:I,isProductCarouselTemplate:j}=n(),[x,O]=i(-1==v?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[k,w]=i(!1),[T,P]=i([]);r((()=>{O(-1==v?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[v]);return e("div",{children:[t(d,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:x})),j&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(s,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:o,onClick:e=>{w(!0)}}),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(c,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(s,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:o,onClick:e=>{}})]})),t(l,{whatsappSpecificPickerMeta:u,template:p,onTemplateChange:e=>{null==C||C(e)},showVariableModal:h,variableList:g,variableListForImage:f,discountCode:y,setDiscountCode:b}),k&&I&&t(a,{zIndex:200,limit:1,storeId:I.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,r=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[r]={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{}})(T),collectionFetcher:I.fetchCollections,productFetcher:I.fetchProducts,onAdd:(e,t)=>{const o=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const s of Object.keys(r)){const{name:a,image:n,quantity:l,displayOrder:d}=r[s],c={name:a,image:n,quantity:l,variantId:s,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};o.push(c)}}}const i=o.sort(((e,t)=>e.displayOrder-t.displayOrder));P(i)},searchInCollectionFetcher:I.searchInCollection,searchFetcher:I.searchProducts,visible:k,onClose:()=>{w(!1)}})]})};export{m as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.419-beta.10",
+	"version": "0.0.419-beta.12",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",