@bikdotai/bik-component-library 0.0.456-0 → 0.0.456-beta.1

package/dist/esm/components/product-picker-v2/productInfoOverlay.d.ts

@@ -0,0 +1,17 @@
+import { Product, ProductVariant } from './modal';
+import { OUT_OF_STOCK_ACTION } from './type';
+/**
+ * When user presses i icon on a product, we show the overlay.
+ * In case of a product, contains products image,  product name & description
+ * In case of a variant, contains variant image,  variant name,
+ *  description as product name, variant tag
+ */
+export declare const ProductInfoOverlay: (props: {
+    productData: Product | ProductVariant;
+    onClose: () => void;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductInfoCard: (props: {
+    productData: Product | ProductVariant;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/product-picker-v2/productInfoOverlay.js

@@ -0,0 +1,39 @@
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-components";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/cross.svg.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as d,BodyCaption as s}from"../TypographyStyle.js";import{ProductPickerTag as c}from"./ProductPickerTag.js";const l=i=>o(m,{children:[t(u,{}),t(x,{children:t(a,{className:"close-button",onClick:i.onClose,Icon:e,width:20,height:20})}),t(p,{productData:i.productData,outOfStockAction:i.outOfStockAction})]}),p=i=>{var r;const e=void 0===i.productData.variants;return o(f,{children:[t(g,{children:t(n,{imageUrl:i.productData.image,width:"200px",height:200,borderRadius:4})}),o(h,{children:[t(d,Object.assign({style:{display:"flex"}},{children:i.productData.name})),t(s,{style:{display:"flex",flexDirection:"column"},dangerouslySetInnerHTML:{__html:null!==(r=i.productData.description)&&void 0!==r?r:""}}),t(c,{isVariant:e,data:i.productData,outOfStockAction:i.outOfStockAction})]})]})},m=i.div`
+	display: flex;
+	flex: 1;
+	background: rgba(0, 0, 0, 0.5);
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	bottom: 0;
+	z-index: 10;
+`,u=i.div`
+	display: flex;
+	flex: 1;
+	background: rgba(0, 0, 0, 0.5);
+`,x=i.div`
+	position: relative;
+
+	.close-button {
+		position: absolute;
+		top: -50px;
+		right: 0px;
+		margin: 10px;
+		background: ${r.surface.standard};
+		border-radius: 50%;
+	}
+`,f=i.div`
+	display: flex;
+	background: white;
+	padding: 24px;
+	gap: 24px;
+	border-radius: 8px 8px 0px 0px;
+`,g=i.div`
+	display: flex;
+`,h=i.div`
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 10px;
+`;export{p as ProductInfoCard,l as ProductInfoOverlay};

package/dist/esm/components/product-picker-v2/productScreen.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Collection, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
+import { Collection, FbStatusFetcherReturn, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
 import { CollectionsActions, SelectedCollectionsActions } from './reducers';
 import { OUT_OF_STOCK_ACTION } from './type';
 interface ProductsScreenInterface {
@@ -9,8 +9,8 @@ interface ProductsScreenInterface {
     collectionsDispatch: React.Dispatch<CollectionsActions>;
     selectedData: SelectedItems;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
-    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
-    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => ProductFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string, limit?: number, offset?: number) => ProductFetcherReturn;
     storeId: string;
     setScreen: React.Dispatch<React.SetStateAction<string>>;
     setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
@@ -21,40 +21,9 @@ interface ProductsScreenInterface {
     renderWithoutModal?: boolean;
     pickerType?: 'COLLECTION' | 'PRODUCT';
     hideProductVariants?: boolean;
+    showProductDetailInfoIcon?: boolean;
+    fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
+    onProductDetailClick: (productData: Product | ProductVariant) => void;
 }
 export declare const ProductsScreen: (props: ProductsScreenInterface) => import("react/jsx-runtime").JSX.Element;
-interface ProductGroupInterface {
-    collectionId: string;
-    productId: string;
-    data: Product;
-    selectedData: SelectedItems;
-    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
-    viewOnly: boolean;
-    isProductPartiallyChecked?: boolean;
-    upliftAdditions: any;
-    hideProductCheckbox?: boolean;
-    outOfStockAction?: OUT_OF_STOCK_ACTION;
-    hideVariantCheckbox?: boolean;
-    hideProductVariants?: boolean;
-    pickerType?: 'COLLECTION' | 'PRODUCT';
-}
-export declare const ProductGroup: (props: ProductGroupInterface) => import("react/jsx-runtime").JSX.Element;
-interface ProductCardInterface {
-    isVariant: boolean;
-    data: Product | ProductVariant;
-    productId: string;
-    collectionId: string;
-    variantId?: string;
-    isSelected: boolean;
-    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
-    viewOnly: boolean;
-    isPartiallyChecked?: boolean;
-    upliftAdditions: any;
-    hideProductCheckbox?: boolean;
-    outOfStockAction?: OUT_OF_STOCK_ACTION;
-    hideVariantCheckbox?: boolean;
-    hideProductVariants?: boolean;
-    pickerType?: 'COLLECTION' | 'PRODUCT';
-}
-export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/product-picker-v2/productScreen.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import c from"../../assets/icons/box.svg.js";import d from"../../assets/icons/search.svg.js";import{cloneDeep as l}from"lodash";import{useContext as n,useState as r,useEffect as s}from"react";import{Tag as a}from"../tag/Tag.js";import{COLORS as u}from"../../constants/Theme.js";import{CheckBox as p}from"../checkBox/CheckBox.js";import{IconButton as h}from"../icon-button/IconButton.js";import{Input as v}from"../input/Input.js";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as y}from"../shimmer-image/ShimmerImage.js";import{Spinner as f}from"../spinner/Spinner.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{BodyCaption as k,TitleRegular as b}from"../TypographyStyle.js";import{truncate as j}from"./collectionScreen.js";import{EmptyState as C}from"./emptyState.js";import{ProductHelper as I}from"./helpers/ProductHelper.js";import{CollectionIdContext as O}from"./reducers.js";import{ProductScreenHeader as x,ProductScreenCollectionCardStyle as S,ProductCardStyle as P}from"./style.js";import{OUT_OF_STOCK_ACTION as V}from"./type.js";import{liftTheStateUp as T}from"./utility.js";const w=o=>{const a=n(O),{data:y,collectionsDispatch:g,selectedData:j,selectedCollectionsDispatch:I,productFetcher:P,storeId:w,setScreen:E,setSaveDisabled:A,hideInCollectionSearch:B,customCollectionRestriction:U,hideProductCheckbox:R,outOfStockAction:F=V.BLUR,hideVariantCheckbox:H=!1,selectProductsFromCustomCollection:L=!1,pickerType:W,hideProductVariants:z}=o,[K,N]=r(""),[_,q]=r(!1),[G,J]=r(y);s((()=>{const t=setTimeout((()=>{K.length?(q(!0),o.searchInCollectionFetcher(w,a,K).then((t=>{var e;const o=l(y);o.products={};for(const i of t)(null===(e=null==y?void 0:y.products)||void 0===e?void 0:e[i])&&(o.products[i]=y.products[i]);J(o),A(!1),q(!1)}))):J(y)}),800);return()=>clearTimeout(t)}),[K]);const M=!!U&&y.isSmartCollection,Q=t=>{var e,o,i,c,d,l,n,r;let s=0,u=0;return!z&&!!((null===(o=null===(e=null==j?void 0:j[a])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(d=Object.keys((null===(c=null===(i=null==y?void 0:y.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.forEach((()=>u++)),Object.keys((null===(r=null===(n=null===(l=null==j?void 0:j[a])||void 0===l?void 0:l.products)||void 0===n?void 0:n[t])||void 0===r?void 0:r.variants)||[]).forEach((()=>s++)),s>0&&u!==s))};s((()=>{(null==y?void 0:y.products)||X()}),[]);const X=()=>{A(!0),q(!0),P(a,w).then((t=>{Object.keys(t).length&&(g({type:"productsFetched",data:{collectionId:a,products:t}}),J(Object.assign(Object.assign({},G),{products:t}))),A(!1),q(!1)})).catch()},Y=(t,e)=>{const o=T(e,y);I({type:t,data:Object.assign(Object.assign({},o),{isRestricted:U})})};return t("div",{children:[t(x,{children:[e(h,{Icon:i,height:16,onClick:()=>{E("collections")}}),e(k,Object.assign({style:{color:u.content.secondary}},{children:y.name}))]}),!B&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(v,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>_&&K.length?e(f,{size:"small",color:u.content.primary}):e(d,{})},id:"listInput",height:"24px",type:"text",value:K,onChangeText:t=>{t.length&&t.trim().length?N(t):N("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==G?void 0:G.products)||[]).length>0&&!M&&!K.length&&!R&&t(S,{children:[e(p,{isChecked:!!(null==j?void 0:j[a]),isPartiallyChecked:(t=>{var e,o,i,c;let d=0,l=0;if(z){const c=null!==(e=null==y?void 0:y.products)&&void 0!==e?e:{};d=Object.keys(c).length;const n=null!==(i=null===(o=j[t])||void 0===o?void 0:o.products)&&void 0!==i?i:{};l=Object.keys(n).length}else if(j[t]){const e=null==y?void 0:y.products;e&&Object.keys(e).forEach((t=>{var o;const i=null===(o=e[t])||void 0===o?void 0:o.variants;i&&Object.keys(i).forEach((t=>d+=1))}));const o=null===(c=j[t])||void 0===c?void 0:c.products;o&&Object.keys(o).forEach((t=>{var e;const i=null===(e=o[t])||void 0===e?void 0:e.variants;i&&Object.keys(i).forEach((()=>l+=1))}))}return l>0&&d!==l})(a),onValueChange:function(t){I(t?{type:"selected",data:{id:a,val:y}}:{type:"unselected",data:{id:a}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),e(b,{children:"All Products"})]}),Object.keys((null==G?void 0:G.products)||[]).length?Object.keys(G.products||[]).map((t=>e(D,{outOfStockAction:F,collectionId:a,isProductPartiallyChecked:Q(t),productId:t,data:G.products[t],selectedData:j,selectedCollectionsDispatch:I,viewOnly:!L&&!!M,upliftAdditions:Y,hideProductCheckbox:R,hideVariantCheckbox:H,hideProductVariants:z,pickerType:W},t))):_?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e(C,{title:"No products to show",subtitle:K.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})]})]})},D=o=>{const{collectionId:i,productId:c,data:d,selectedData:l,selectedCollectionsDispatch:n,viewOnly:r,upliftAdditions:s,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:p,hideVariantCheckbox:h,hideProductVariants:v,pickerType:m}=o,y=t=>{var e,o,d,n,r,s;if(!(null===(o=null===(e=null==l?void 0:l[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[c]))return!1;return!!(null===(s=null===(r=null===(n=null===(d=null==l?void 0:l[i])||void 0===d?void 0:d.products)||void 0===n?void 0:n[c])||void 0===r?void 0:r.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(E,{isVariant:!1,data:d,productId:c,collectionId:i,isSelected:!!(null===(g=null===(f=null==l?void 0:l[i])||void 0===f?void 0:f.products)||void 0===g?void 0:g[c]),isPartiallyChecked:a,selectedCollectionsDispatch:n,upliftAdditions:s,viewOnly:r,hideProductCheckbox:u,hideVariantCheckbox:h,hideProductVariants:v,pickerType:m},c),v?null:Object.keys(d.variants||[]).map((t=>e(E,{isVariant:!0,hideVariantCheckbox:h,data:d.variants[t],variantId:t,productId:c,viewOnly:r,upliftAdditions:s,collectionId:i,isSelected:y(t),selectedCollectionsDispatch:n,outOfStockAction:p},t)))]});var f,g},E=i=>{const{isVariant:c,data:d,productId:l,collectionId:n,variantId:r,isSelected:s,selectedCollectionsDispatch:u,viewOnly:h,upliftAdditions:v,isPartiallyChecked:m,hideProductCheckbox:f,outOfStockAction:k,hideVariantCheckbox:C,hideProductVariants:O,pickerType:x}=i,S=I.getProductLabels(d,k);return t(P,Object.assign({isVariant:c,onClick:t=>{if(t.stopPropagation(),"PRODUCT"===x)if(u({type:"reset",data:{}}),O)v("productSelected",{productId:l,variantId:r,collectionId:n});else{const t=Object.keys(d.variants);v("variantSelected",{productId:l,variantId:r||t[0],collectionId:n,variant:d})}},isActive:s},{children:[c&&!h&&!C||!c&&!h&&!f?e(p,{isChecked:s,isPartiallyChecked:m||!1,onValueChange:function(t){if(c)t?v(O?"productSelected":"variantSelected",{productId:l,variantId:r,collectionId:n,variant:d}):u({type:O?"productUnselected":"variantUnselected",data:{productId:l,variantId:r,collectionId:n}});else if(t){const t=Object.keys(d.variants);v(O?"productSelected":"variantSelected",{productId:l,collectionId:n,product:O?d.variants[t[0]]:d})}else u({type:O?"productUnselected":"variantUnselected",data:{productId:l,collectionId:n}})}}):e(o,{}),e("div",{children:e(y,{width:40,height:40,imageUrl:d.image,alt:"Item",borderRadius:4})}),e(g,Object.assign({body:d.name,placement:"bottom",delay:400},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"column"}},{children:[e(b,{children:j(d.name,40,!0)}),S?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(a,{tagText:S,type:"warning",theme:"light"})})):e(o,{})]}))}))]}))};export{E as ProductCard,D as ProductGroup,w as ProductsScreen};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import c from"../../assets/icons/box.svg.js";import r from"../../assets/icons/search.svg.js";import{cloneDeep as n}from"lodash";import{useContext as s,useRef as i,useState as l,useEffect as d}from"react";import{COLORS as a}from"../../constants/Theme.js";import{CheckBox as u}from"../checkBox/CheckBox.js";import{IconButton as h}from"../icon-button/IconButton.js";import{Input as p}from"../input/Input.js";import{Spinner as m}from"../spinner/Spinner.js";import{BodyCaption as g,TitleRegular as j}from"../TypographyStyle.js";import{EmptyState as v}from"./emptyState.js";import{ProductGroup as b}from"./product.js";import{ProductPickerShimmer as f}from"./ProductPickerShimmer.js";import{CollectionIdContext as y}from"./reducers.js";import{ProductScreenHeader as O,ProductScreenCollectionCardStyle as k}from"./style.js";import{OUT_OF_STOCK_ACTION as C}from"./type.js";import{getVariantIdsToFetchAtProductLevel as P,markVariantsAsApprovedProductsLevel as I,isCollectionPartiallyChecked as D,isProductPartiallyChecked as x,liftTheStateUp as E}from"./utility.js";const S=S=>{const{data:w,collectionsDispatch:T,selectedData:R,selectedCollectionsDispatch:V,productFetcher:A,storeId:B,setScreen:F,setSaveDisabled:J,hideInCollectionSearch:W,customCollectionRestriction:z,hideProductCheckbox:H,outOfStockAction:K=C.BLUR,hideVariantCheckbox:L=!1,selectProductsFromCustomCollection:M=!1,pickerType:N,hideProductVariants:U,fbStatusFetcher:_,onProductDetailClick:q,showProductDetailInfoIcon:G}=S,Q=s(y),X=i(null),Y=i(0),[Z,$]=l(!1),[tt,et]=l(""),[ot,ct]=l(!1),[rt,nt]=l(w),st=i(!1);d((()=>{const t=setTimeout((()=>{tt.length?(ct(!0),S.searchInCollectionFetcher(B,Q,tt).then((t=>{const e=n(w);e.products=t,nt(e);const o=P(null!=t?t:{});lt(o,null!=t?t:{},!0),J(!1),ct(!1)}))):nt(w)}),800);return()=>clearTimeout(t)}),[tt]),d((()=>{var t,e,o,c;st.current=!1,Y.current=Math.floor((null===(e=Object.keys(null!==(t=w.products)&&void 0!==t?t:{}))||void 0===e?void 0:e.length)/10);const r=P(null!==(o=w.products)&&void 0!==o?o:{});lt(r,null!==(c=w.products)&&void 0!==c?c:{})}),[Q]);const it=!!z&&w.isSmartCollection;d((()=>{(null==w?void 0:w.products)||dt(10)}),[]);const lt=(t,e,o)=>{_||(o?I(e,T,Q,rt,nt):I(e,T,Q)),t.length>0&&_&&_(B,t).then((t=>{const c=Object.assign({},e);Object.keys(e).forEach((o=>{var r,n;Object.keys(null!==(n=null===(r=null==e?void 0:e[o])||void 0===r?void 0:r.variants)&&void 0!==n?n:{}).forEach((r=>{var n,s;const i=null===(n=null==e?void 0:e[o].variants)||void 0===n?void 0:n[r];i&&"REJECTED"===t[r]?i.fbStatus="REJECTED":i&&"APPROVED"===t[r]&&(i.fbStatus="APPROVED");const l=null===(s=null==c?void 0:c[o])||void 0===s?void 0:s.variants;l&&l[r]&&(l[r]=i)}))})),o?(nt((t=>{const e=Object.assign({},t);return e.products=c,e})),T({type:"productsPaged",data:{collectionId:Q,products:c}})):T({type:"productsPaged",data:{collectionId:Q,products:c}})})).catch((t=>{o?I(e,T,Q,rt,nt):I(e,T,Q)}))};d((()=>{const t=new IntersectionObserver((t=>{t[0].isIntersecting&&Y.current>=0&&!st.current&&!tt&&(J(!0),$(!0),A(Q,B,10,Y.current).then((t=>{if(Object.keys(t).length||(st.current=!0),Object.keys(t).length){const e=rt;e.products=Object.assign(Object.assign({},rt.products),t),nt(e);const o=P(t);lt(o,t),Y.current+=1}$(!1),J(!1)})).catch())}),{threshold:1});return X.current&&t.observe(X.current),()=>{X.current&&t.unobserve(X.current)}}),[X,tt]);const dt=t=>{J(!0),ct(!0),A(Q,B,t,0).then((e=>{if(Object.keys(e).length||(st.current=!0),Object.keys(e).length){nt(Object.assign(Object.assign({},rt),{products:e}));const t=P(e);lt(t,e),Y.current=1}t||V({type:"selected",data:{id:Q,val:Object.assign(Object.assign({},w),{products:e})}}),J(!1),ct(!1)})).catch()},at=(t,e)=>{const o=E(e,w);V({type:t,data:Object.assign(Object.assign({},o),{isRestricted:z})})};return t("div",{children:[t(O,{children:[e(h,{Icon:o,height:16,onClick:()=>{F("collections")}}),e(g,Object.assign({style:{color:a.content.secondary}},{children:w.name}))]}),!W&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(p,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ot&&tt.length?e(m,{size:"small",color:a.content.primary}):e(r,{})},id:"listInput",height:"24px",type:"text",value:tt,onChangeText:t=>{t.length&&t.trim().length?et(t):et("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==rt?void 0:rt.products)||[]).length>0&&!it&&!tt.length&&!H&&"-1"!==Q&&t(k,{children:[e(u,{isChecked:!!(null==R?void 0:R[Q]),isPartiallyChecked:D(Q,w,R),onValueChange:function(t){t?dt():V({type:"unselected",data:{id:Q}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),e(j,{children:"All Products"})]}),Object.keys((null==rt?void 0:rt.products)||[]).length?Object.keys(rt.products||[]).map((t=>e(b,{outOfStockAction:K,collectionId:Q,isProductPartiallyChecked:x(Q,t,R,rt),productId:t,data:rt.products[t],selectedData:R,selectedCollectionsDispatch:V,viewOnly:!M&&!!it,upliftAdditions:at,hideProductCheckbox:H,hideVariantCheckbox:L,hideProductVariants:U,pickerType:N,onProductDetailClick:q,showProductDetailInfoIcon:G},t))):ot?e(f,{limit:10}):e(v,{title:"No products to show",subtitle:tt.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."}),e("div",{ref:X})]}),Z&&e(f,{})]})};export{S as ProductsScreen};

package/dist/esm/components/product-picker-v2/rearrangeScreen.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SelectedItems } from '.';
+import { FbStatusFetcherReturn, SelectedItems } from '.';
 import { SelectedCollectionsActions } from './reducers';
 import { OUT_OF_STOCK_ACTION } from './type';
 interface RearrangeScreenInterface {
@@ -9,6 +9,8 @@ interface RearrangeScreenInterface {
     rearrangeViewType: 'grid' | 'list';
     outOfStockAction?: OUT_OF_STOCK_ACTION;
     scrollContainerRef: React.RefObject<HTMLDivElement>;
+    storeId: string;
+    fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
 }
 /**
  * Screen will be opened on two conditions -

package/dist/esm/components/product-picker-v2/rearrangeScreen.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r,useEffect as s}from"react";import{DragDropContext as c}from"react-beautiful-dnd";import{COLORS as n}from"../../constants/Theme.js";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as a}from"./emptyState.js";import{parseSelectedVariantsToArray as d}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as p}from"./style.js";import{VariantsList as m,VariantsGrid as f}from"./variantComponents.js";const u=u=>{const{selectedCollections:h,selectedCollectionsDispatch:j,setScreen:y,rearrangeViewType:S,outOfStockAction:g,scrollContainerRef:C}=u,[b,O]=r(d(h));s((()=>{var e;null===(e=null==C?void 0:C.current)||void 0===e||e.scrollTo({top:0}),O(d(h))}),[h]);return e(c,Object.assign({onDragEnd:e=>{if(!e.destination)return;const t=b,[o]=t.splice(e.source.index,1);t.splice(e.destination.index,0,o),t.forEach(((e,t)=>{e.displayOrder=t})),O(t)}},{children:[e(p,{children:[t(i,{Icon:o,width:16,height:16,color:n.content.secondary,onClick:()=>{y("collections")}}),t(l,Object.assign({color:n.content.secondary},{children:"All Products"}))]}),Object.keys(h).length>0?"list"===S?t(m,{selectedVariants:b,setSelectedVariants:O,selectedCollectionsDispatch:j,outOfStockAction:g}):t(f,{selectedVariants:b,setSelectedVariants:O,selectedCollectionsDispatch:j}):t(a,{title:"No Products Selected",subtitle:"Selected products will appear here"})]}))};export{u as RearrangeScreen};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r,useEffect as s}from"react";import{DragDropContext as c}from"react-beautiful-dnd";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as a}from"./emptyState.js";import{parseSelectedVariantsToArray as d}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as p}from"./style.js";import{fetchFbStatusCollection as m}from"./utility.js";import{VariantsList as u,VariantsGrid as f}from"./variantComponents.js";const h=h=>{const{selectedCollections:j,selectedCollectionsDispatch:y,setScreen:S,rearrangeViewType:g,outOfStockAction:b,scrollContainerRef:C,storeId:O,fbStatusFetcher:v}=h,[V,k]=r(d(j));s((()=>{k(d(j))}),[j]),s((()=>{var t;null===(t=null==C?void 0:C.current)||void 0===t||t.scrollTo({top:0}),m(j,O,y,v,"update")}),[]);return t(c,Object.assign({onDragEnd:t=>{if(!t.destination)return;const e=V,[o]=e.splice(t.source.index,1);e.splice(t.destination.index,0,o),e.forEach(((t,e)=>{t.displayOrder=e})),k(e)}},{children:[t(p,{children:[e(n,{Icon:o,width:16,height:16,color:i.content.secondary,onClick:()=>{S("collections")}}),e(l,Object.assign({color:i.content.secondary},{children:"All Products"}))]}),Object.keys(j).length>0?"list"===g?e(u,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:y,outOfStockAction:b}):e(f,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:y}):e(a,{title:"No Products Selected",subtitle:"Selected products will appear here"})]}))};export{h as RearrangeScreen};

package/dist/esm/components/product-picker-v2/reducers.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Collection, SelectedItems } from '.';
+import { Collection, SearchedItems, SelectedItems } from '.';
 export interface SelectedCollectionsActions {
     type: string;
     data: {
@@ -14,4 +14,28 @@ export interface CollectionsActions {
     };
 }
 export declare function collectionsReducer(collections: Collection, action: CollectionsActions): any;
+/**
+ * Pagination reducer used in selected screen.
+ * Used for local pagination.
+ *
+ * Actions used:
+ *  paginate ->  Checks if the products of the collection is already displayed, if yes addes the products, if no adds the entire collection
+ *  update -> triggers a re-render.
+ *  set -> adds the data to existing collections.
+ *  filter -> When user unselects a product in selected screen, we filter out the selected data and show only unselected data.
+ */
+export declare function paginationReducer(collections: SelectedItems, action: SelectedCollectionsActions): SelectedItems;
+export interface SearchReducerActions {
+    type: string;
+    data: SearchedItems;
+}
+/**
+ * Data used in search screen.
+ * To display both collections and products.
+ *
+ * Actions:
+ * 	set -> no change and sets the data.
+ * 	setProducts -> keeps the collection from search as-is and sets only products
+ */
+export declare function searchReducer(searchedItems: SearchedItems, action: SearchReducerActions): SearchedItems;
 export declare const CollectionIdContext: import("react").Context<string>;

package/dist/esm/components/product-picker-v2/reducers.js

@@ -1 +1 @@
-import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function d(a,d){var e,o,l,s,c,r,i,u,n,v,p;let m={},O="",g="",C="";switch(d.type){case"selected":return m=t(a),d.data.val.isSmartCollection&&(d.data.isRestricted&&(m={}),m.isCustom=!0),m[d.data.id]=d.data.val,m;case"unselected":return m=t(a),(null==m?void 0:m.isCustom)&&(m.isCustom=!1),delete m[d.data.id],m;case"productUnselected":return m=t(a),O=d.data.productId,g=d.data.collectionId,delete m[g].products[O],Object.keys(m[g].products).length||((null==m?void 0:m.isCustom)&&(m.isCustom=!1),delete m[g]),m;case"productSelected":return m=t(a),O=d.data.productId,g=d.data.collectionId,(null===(e=d.data.catalogOnlyData)||void 0===e?void 0:e.isSmartCollection)&&(d.data.isRestricted&&(m={}),m.isCustom=!0),(null==m?void 0:m[g])||(m[g]=d.data.catalogOnlyData,m[g].products={}),m[g].products[O]=d.data.product,m;case"variantSelected":return m=t(a),O=d.data.productId,g=d.data.collectionId,C=d.data.variantId,(null===(o=d.data.catalogOnlyData)||void 0===o?void 0:o.isSmartCollection)&&(d.data.isRestricted&&(m={}),m.isCustom=!0),(null==m?void 0:m[g])||(m[g]=d.data.catalogOnlyData,m[g].products={},m[g].products[O]=d.data.productOnlyData,m[g].products[O].variants={}),(null===(s=null===(l=null==m?void 0:m[g])||void 0===l?void 0:l.products)||void 0===s?void 0:s[O])||((null===(c=null==m?void 0:m[g])||void 0===c?void 0:c.products)||(m[g].products={}),m[g].products[O]=d.data.productOnlyData,m[g].products[O].variants={}),m[g].products[O].variants[C]=d.data.variant,m;case"variantUnselected":return m=t(a),O=d.data.productId,g=d.data.collectionId,C=d.data.variantId,(null===(i=null===(r=m[g].products[O])||void 0===r?void 0:r.variants)||void 0===i?void 0:i[C])&&delete m[g].products[O].variants[C],Object.keys(null!==(v=null===(n=null===(u=m[g].products)||void 0===u?void 0:u[O])||void 0===n?void 0:n.variants)&&void 0!==v?v:{}).length||(delete m[g].products[O],Object.keys(m[g].products).length||((null===(p=m[g])||void 0===p?void 0:p.isSmartCollection)&&(m.isCustom=!1),delete m[g])),m;case"reset":return{};default:return a}}function e(t,a){let d={};switch(a.type){case"fetched":return d=Object.assign({},a.data),d;case"productsFetched":return d=Object.assign({},t),d[a.data.collectionId].products=a.data.products,d;case"paged":return d=Object.assign(Object.assign({},t),a.data),d;default:return{}}}const o=a("");export{o as CollectionIdContext,e as collectionsReducer,d as selectedColectionsReducer};
+import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function e(a,e){var s,c,d,r,o,n;let i={},u="",l="",p="";switch(e.type){case"selected":return i=t(a),e.data.val.isSmartCollection&&(e.data.isRestricted&&(i={}),i.isCustom=!0),i[e.data.id]=e.data.val,i;case"unselected":return i=t(a),(null==i?void 0:i.isCustom)&&(i.isCustom=!1),delete i[e.data.id],i;case"productUnselected":return i=t(a),u=e.data.productId,l=e.data.collectionId,delete i[l].products[u],Object.keys(i[l].products).length||((null==i?void 0:i.isCustom)&&(i.isCustom=!1),delete i[l]),i;case"productSelected":return i=t(a),u=e.data.productId,l=e.data.collectionId,(null===(s=e.data.catalogOnlyData)||void 0===s?void 0:s.isSmartCollection)&&(e.data.isRestricted&&(i={}),i.isCustom=!0),(null==i?void 0:i[l])||(i[l]=e.data.catalogOnlyData,i[l].products={}),i[l].products[u]=e.data.product,i;case"variantSelected":return i=t(a),u=e.data.productId,l=e.data.collectionId,p=e.data.variantId,(null===(c=e.data.catalogOnlyData)||void 0===c?void 0:c.isSmartCollection)&&(e.data.isRestricted&&(i={}),i.isCustom=!0),(null==i?void 0:i[l])||(i[l]=e.data.catalogOnlyData,i[l].products={},i[l].products[u]=e.data.productOnlyData,i[l].products[u].variants={}),(null===(r=null===(d=null==i?void 0:i[l])||void 0===d?void 0:d.products)||void 0===r?void 0:r[u])||((null===(o=null==i?void 0:i[l])||void 0===o?void 0:o.products)||(i[l].products={}),i[l].products[u]=e.data.productOnlyData,i[l].products[u].variants={}),i[l].products[u].variants[p]=e.data.variant,i;case"variantUnselected":return i=t(a),u=e.data.productId,l=e.data.collectionId,p=e.data.variantId,delete i[l].products[u].variants[p],Object.keys(i[l].products[u].variants).length||(delete i[l].products[u],Object.keys(i[l].products).length||((null===(n=i[l])||void 0===n?void 0:n.isSmartCollection)&&(i.isCustom=!1),delete i[l])),i;case"update":return i=Object.assign({},a),i;case"reset":return{};default:return a}}function s(t,a){let e={};switch(a.type){case"fetched":return e=Object.assign({},a.data),e;case"productsFetched":return e=Object.assign({},t),e[a.data.collectionId].products=a.data.products,e;case"paged":return e=Object.assign(Object.assign({},t),a.data),e;case"productsPaged":return e=Object.assign({},t),e[a.data.collectionId].products=Object.assign(Object.assign({},e[a.data.collectionId].products),a.data.products),e;case"searched":e=Object.assign({},t);for(const t in a.data)t in e||(e[t]=a.data[t]);return e;default:return{}}}function c(t,a){let e={};switch(a.type){case"paginate":e=Object.assign({},t);for(const t in a.data)if(Object.prototype.hasOwnProperty.call(a.data,t)){const s=a.data[t];if(Object.prototype.hasOwnProperty.call(e,t)){const a=e[t];e[t]=Object.assign(Object.assign({},a),{products:Object.assign(Object.assign({},a.products),s.products)})}else e[t]=s}return e;case"update":return e=Object.assign({},t),e;case"set":return e=Object.assign(Object.assign({},t),a.data),e;case"filter":e={};for(const s in t)if(s in a.data){const c=Object.assign({},t[s]),d=a.data[s],r={};for(const t in c.products)if(t in d.products){const a=Object.assign({},c.products[t]),e=d.products[t],s={};for(const t in a.variants)t in e.variants&&(s[t]=Object.assign({},a.variants[t]));Object.keys(s).length>0&&(a.variants=s,r[t]=a)}Object.keys(r).length>0&&(c.products=r,e[s]=c)}return e;default:return t}}function d(t,a){let e={collections:{},products:{}};switch(a.type){case"set":return a.data;case"setProducts":return e=Object.assign({},t),e.products=a.data,e;default:return t}}const r=a("");export{r as CollectionIdContext,s as collectionsReducer,c as paginationReducer,d as searchReducer,e as selectedColectionsReducer};

package/dist/esm/components/product-picker-v2/searchScreen.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
-import { Collection, SelectedItems } from '.';
-import { SelectedCollectionsActions } from './reducers';
+import { Collection, FbStatusFetcherReturn, SearchedItems, SelectedItems } from '.';
+import { SearchReducerActions, SelectedCollectionsActions } from './reducers';
 interface SearchScreenInterface {
     customCollectionRestriction?: boolean;
     selectedCollections: SelectedItems;
-    searchedCollections: SelectedItems;
+    searchedCollections: SearchedItems;
+    searchedCollectionsDispatch: React.Dispatch<SearchReducerActions>;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
     setScreen: React.Dispatch<React.SetStateAction<string>>;
+    setCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
     collections: {
         [key: string]: Collection;
     };
@@ -15,6 +18,10 @@ interface SearchScreenInterface {
     pickerType?: 'COLLECTION' | 'PRODUCT';
     hideProductVariants?: boolean;
     hideProductCheckbox?: boolean;
+    storeId: string;
+    fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
+    hideCollectionCheckbox?: boolean;
+    renderWithoutModal?: boolean;
 }
 export declare const SearchScreen: (props: SearchScreenInterface) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/product-picker-v2/searchScreen.js

@@ -1 +1 @@
-import{jsxs as o,jsx as t,Fragment as e}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import{IconButton as r}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as c}from"./emptyState.js";import{ProductGroup as d}from"./productScreen.js";import{SelectedScreenHeader as s}from"./style.js";import{liftTheStateUp as n}from"./utility.js";const u=u=>{const{customCollectionRestriction:a,selectedCollections:v,searchedCollections:p,selectedCollectionsDispatch:h,setScreen:m,collections:y,onBackPress:f,hideVariantCheckbox:j,pickerType:k,hideProductVariants:b,hideProductCheckbox:C}=u,O=(o,t)=>{var e,i,r,l,c,d,s,n,u;let a=0,p=0;return!!((null===(i=null===(e=null==v?void 0:v[o])||void 0===e?void 0:e.products)||void 0===i?void 0:i[t])&&(null===(d=Object.keys((null===(c=null===(l=null===(r=null==y?void 0:y[o])||void 0===r?void 0:r.products)||void 0===l?void 0:l[t])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.forEach((()=>p++)),Object.keys((null===(u=null===(n=null===(s=null==v?void 0:v[o])||void 0===s?void 0:s.products)||void 0===n?void 0:n[t])||void 0===u?void 0:u.variants)||[]).forEach((()=>a++)),a>0&&p!==a))};return o("div",{children:[o(s,{children:[t(r,{Icon:i,onClick:()=>{m("collections"),f()}}),t(l,{children:"Searched Products"})]}),t("div",{children:Object.keys(p).length?t(e,{children:Object.keys(p).map((o=>{var e;return Object.keys((null===(e=null==p?void 0:p[o])||void 0===e?void 0:e.products)||[]).map((e=>{let i=!1;return(null==p?void 0:p.isCustom)&&(i=!0),t(d,{collectionId:o,upliftAdditions:(t,e)=>((o,t,e)=>{const i=n(e,p[o]);h({type:t,data:Object.assign(Object.assign({},i),{isRestricted:a})})})(o,t,e),productId:e,data:p[o].products[e],isProductPartiallyChecked:O(o,e),selectedData:v,selectedCollectionsDispatch:h,viewOnly:i,hideProductCheckbox:C,hideVariantCheckbox:j,hideProductVariants:b,pickerType:k},e)}))}))}):t(c,{title:"No search results found",subtitle:"We couldn’t find the product you were looking for."})})]})};export{u as SearchScreen};
+import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import l from"../../assets/icons/arrow_left.svg.js";import{useEffect as i}from"react";import{IconButton as c}from"../icon-button/IconButton.js";import{BodyCaption as d}from"../TypographyStyle.js";import{CollectionCard as s}from"./collectionScreen.js";import{EmptyState as r}from"./emptyState.js";import{ProductGroup as n}from"./product.js";import{SelectedScreenHeader as u}from"./style.js";import{fetchFbStatusCollection as a,isCollectionPartiallyChecked as p,isProductPartiallyChecked as h,liftTheStateUp as v}from"./utility.js";const m=m=>{const{customCollectionRestriction:C,selectedCollections:k,searchedCollections:y,searchedCollectionsDispatch:b,selectedCollectionsDispatch:f,setScreen:j,collections:I,onBackPress:P,hideVariantCheckbox:S,pickerType:x,hideProductVariants:O,hideProductCheckbox:g,storeId:D,fbStatusFetcher:T,setCollectionId:V,setSelectedCollectionId:w,hideCollectionCheckbox:R,renderWithoutModal:W}=m;i((()=>{var e;a(null!==(e=y.products)&&void 0!==e?e:{},D,b,T,"setProducts")}),[null==y?void 0:y.products]);const B=!!C&&(null==k?void 0:k.isCustom);return e("div",{children:[e(u,{children:[o(c,{Icon:l,onClick:()=>{j("collections"),P()}}),o(d,{children:"Searched Products"})]}),o("div",{children:Object.keys(null==y?void 0:y.products).length||Object.keys(null==y?void 0:y.collections).length?e(t,{children:[o(t,{children:Object.keys(null==y?void 0:y.collections).map((e=>o(s,{customCollectionRestriction:C,data:null==I?void 0:I[e],isDisabled:B&&!(null==k?void 0:k[e]),isChecked:!!(null==k?void 0:k[e]),isPartiallyChecked:p(e,null==I?void 0:I[e],k),selectedCollectionsDispatch:f,setCollectionId:V,setSelectedCollectionId:w,setScreen:j,id:e,hideCollectionCheckbox:R||"-1"===e,selectedCollections:k,renderWithoutModal:W,pickerType:x,usedInSearch:!0},e)))}),o(t,{children:Object.keys(null==y?void 0:y.products).map((e=>{var t,l;return Object.keys((null===(l=null===(t=null==y?void 0:y.products)||void 0===t?void 0:t[e])||void 0===l?void 0:l.products)||[]).map((t=>{var l,i,c;let d=!1;return(null===(l=null==y?void 0:y.products)||void 0===l?void 0:l.isCustom)&&(d=!0),o(n,{collectionId:e,upliftAdditions:(o,t)=>((e,o,t)=>{var l;const i=v(t,null===(l=null==y?void 0:y.products)||void 0===l?void 0:l[e]);f({type:o,data:Object.assign(Object.assign({},i),{isRestricted:C})})})(e,o,t),productId:t,data:(null===(i=null==y?void 0:y.products)||void 0===i?void 0:i[e].products)[t],isProductPartiallyChecked:h(e,t,k,null===(c=y.products)||void 0===c?void 0:c[e]),selectedData:k,selectedCollectionsDispatch:f,viewOnly:d,hideProductCheckbox:g,hideVariantCheckbox:S,hideProductVariants:O,pickerType:x},t)}))}))})]}):o(r,{title:"No search results found",subtitle:"We couldn’t find the product you were looking for."})})]})};export{m as SearchScreen};

package/dist/esm/components/product-picker-v2/selectedScreen.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { Collection, SelectedItems } from '.';
+import { Collection, FbStatusFetcherReturn, SelectedItems } from '.';
 import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
 interface SelectedScreenInterface {
     selectedCollections: SelectedItems;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
@@ -8,7 +9,9 @@ interface SelectedScreenInterface {
     collections: {
         [key: string]: Collection;
     };
-    hideProductVariants?: boolean;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    storeId: string;
+    fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
 }
 export declare const SelectedScreen: (props: SelectedScreenInterface) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/product-picker-v2/selectedScreen.js

@@ -1 +1 @@
-import{jsxs as o,jsx as t,Fragment as e}from"react/jsx-runtime";import l from"../../assets/icons/arrow_left.svg.js";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as r}from"../TypographyStyle.js";import{EmptyState as d}from"./emptyState.js";import{AllProductHelper as c}from"./helpers/AllProductHelper.js";import{ProductGroup as s}from"./productScreen.js";import{SelectedScreenHeader as n}from"./style.js";const u=u=>{const{selectedCollections:v,selectedCollectionsDispatch:a,setScreen:p,collections:m,hideProductVariants:h=!1}=u,j=(o,t)=>{var e,l,i,r,d,c,s,n,u;let a=0,p=0;return!!((null===(l=null===(e=null==v?void 0:v[o])||void 0===e?void 0:e.products)||void 0===l?void 0:l[t])&&(null===(c=Object.keys((null===(d=null===(r=null===(i=null==m?void 0:m[o])||void 0===i?void 0:i.products)||void 0===r?void 0:r[t])||void 0===d?void 0:d.variants)||[]))||void 0===c||c.forEach((()=>p++)),Object.keys((null===(u=null===(n=null===(s=null==v?void 0:v[o])||void 0===s?void 0:s.products)||void 0===n?void 0:n[t])||void 0===u?void 0:u.variants)||[]).forEach((()=>a++)),a>0&&p!==a))},f=h?c.removeDuplicatesForAllProducts(Object.assign({},v)):v;return o("div",{children:[o(n,{children:[t(i,{Icon:l,onClick:()=>{p("collections")}}),t(r,{children:"Selected Products"})]}),t("div",{children:Object.keys(f).length>0?t(e,{children:Object.keys(f).map((o=>{var e;return Object.keys((null===(e=null==f?void 0:f[o])||void 0===e?void 0:e.products)||[]).map((e=>{let l=!1;return(null==f?void 0:f.isCustom)&&(l=!0),t(s,{upliftAdditions:null,collectionId:o,productId:e,data:f[o].products[e],isProductPartiallyChecked:j(o,e),selectedData:f,selectedCollectionsDispatch:a,viewOnly:l,hideProductVariants:h},e)}))}))}):t(d,{title:"No Products Selected",subtitle:"Select products will appear here"})})]})};export{u as SelectedScreen};
+import{jsxs as t,jsx as e,Fragment as r}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useRef as c,useReducer as n,useEffect as i}from"react";import{IconButton as s}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as d}from"./emptyState.js";import{ProductGroup as u}from"./product.js";import{paginationReducer as p}from"./reducers.js";import{SelectedScreenHeader as a}from"./style.js";import{paginateSelectedItems as m,fetchFbStatusCollection as f,isProductPartiallyChecked as h}from"./utility.js";const v=v=>{const{selectedCollections:y,selectedCollectionsDispatch:j,setScreen:b,collections:S,outOfStockAction:k,storeId:I,fbStatusFetcher:O}=v,g=c(0),C=c(null),[w,P]=n(p,{});return i((()=>{g.current=0;const t=m(y,10,0);P({type:"paginate",data:t}),f(t,I,P,O,"set"),g.current+=1}),[]),i((()=>{P({type:"filter",data:y})}),[y]),i((()=>{const t=new IntersectionObserver((t=>{if(t[0].isIntersecting&&g.current>0){const t=m(y,10,g.current);P({type:"paginate",data:t}),f(t,I,P,O,"update"),g.current+=1}}),{threshold:1});return C.current&&t.observe(C.current),()=>{C.current&&t.unobserve(C.current)}}),[C,y]),t("div",{children:[t(a,{children:[e(s,{Icon:o,onClick:()=>{b("collections")}}),e(l,{children:"Selected Products"})]}),t("div",{children:[Object.keys(w).length>0?e(r,{children:Object.keys(w).map((t=>{var r;return Object.keys((null===(r=null==w?void 0:w[t])||void 0===r?void 0:r.products)||[]).map((r=>{let o=!1;return(null==y?void 0:y.isCustom)&&(o=!0),e(u,{upliftAdditions:null,collectionId:t,productId:r,data:w[t].products[r],isProductPartiallyChecked:h(t,r,y,null==S?void 0:S[t]),selectedData:y,selectedCollectionsDispatch:j,viewOnly:o,outOfStockAction:k},r)}))}))}):e(d,{title:"No Products Selected",subtitle:"Select products will appear here"}),e("div",{ref:C})]})]})};export{v as SelectedScreen};

package/dist/esm/components/product-picker-v2/style.d.ts

@@ -3,6 +3,7 @@ export declare const ScrollContainerStyle: import("styled-components").StyledCom
 export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
     isDisabled: boolean;
     isActive: boolean;
+    usedInSearch: boolean;
 }, never>;
 export declare const CollectionCardInfoStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CollectionCardDetailStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/product-picker-v2/style.js

@@ -1,17 +1,26 @@
 import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
 	display: flex;
 	background-color: white;
-	max-height: 600px;
-	min-height: 600px;
+	height: 600px;
 	flex-direction: column;
 `,o=e.div`
 	overflow-y: scroll;
 	overflow-x: hidden;
+
+	::-webkit-scrollbar {
+		display: block;
+		width: 8px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background-color: #888;
+		border-radius: 8px;
+	}
 `,n=e.div`
 	height: 64px;
 	background-color: ${e=>e.isDisabled?"#F0F0F0":e.isActive?i.background.positive.light:"white"};
 	border-bottom: 1px solid #e0e0e0;
-	padding: 12px 24px;
+	padding: ${e=>e.usedInSearch?"12px 16px":"12px 24px"};
 	display: flex;
 	flex-direction: row;
 	column-gap: 16px;
@@ -31,7 +40,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-`,l=e.div`
+`,p=e.div`
 	display: flex;
 	flex-direction: row;
 	max-height: 32px;
@@ -41,15 +50,18 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	align-items: center;
 	padding: 8px 16px;
 	margin-top: 16px;
-`,p=e.div`
+	position: sticky;
+	top: 0;
+	z-index: 10;
+`,l=e.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 16px;
 	padding: 12px 16px;
 	border-bottom: 1px solid #e0e0e0;
 	align-items: center;
-`,x=e.div`
-	height: 64px;
+`,c=e.div`
+	min-height: 64px;
 	background-color: ${e=>e.isActive?i.background.positive.light:"white"};
 	border-bottom: 1px solid #e0e0e0;
 	padding: 12px 16px;
@@ -63,7 +75,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 		cursor: pointer;
 		background-color: ${i.surface.hovered};
 	}
-`,c=e.div`
+`,x=e.div`
 	display: flex;
 	flex-direction: row;
 	max-height: 32px;
@@ -72,18 +84,26 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	justify-content: flex-start;
 	align-items: center;
 	padding: 8px 16px;
+	position: sticky;
+	top: 0;
+	z-index: 10;
 `,a=e.div`
 	display: flex;
 	flex-direction: column;
 `,s=e.div`
-	height: 72px;
+	min-height: 72px;
 	background: white;
 	padding: 12px 16px;
 	display: flex;
 	flex-direction: row;
-	gap: 16px;
 	align-items: center;
-	justify-content: center;
+	justify-content: space-between;
+
+	.text-container {
+		display: flex;
+		justify-content: space-between;
+		gap: 16px;
+	}
 
 	.tooltip-title-tag {
 		display: flex;
@@ -107,4 +127,4 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	align-items: center;
 	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
-`;export{d as CollectionCardDetailStyle,r as CollectionCardInfoStyle,n as CollectionCardStyle,a as CollectionNameHolder,t as ContainerStyle,x as ProductCardStyle,p as ProductScreenCollectionCardStyle,l as ProductScreenHeader,o as ScrollContainerStyle,c as SelectedScreenHeader,g as VariantCardGridStyle,s as VariantCardListStyle};
+`;export{d as CollectionCardDetailStyle,r as CollectionCardInfoStyle,n as CollectionCardStyle,a as CollectionNameHolder,t as ContainerStyle,c as ProductCardStyle,l as ProductScreenCollectionCardStyle,p as ProductScreenHeader,o as ScrollContainerStyle,x as SelectedScreenHeader,g as VariantCardGridStyle,s as VariantCardListStyle};

package/dist/esm/components/product-picker-v2/utility.d.ts

@@ -1 +1,38 @@
+import { Collection, FbStatusFetcherReturn, Product, SelectedItems } from './modal';
+import { CollectionsActions } from './reducers';
 export declare const liftTheStateUp: (payload: any, data: any) => any;
+export declare function paginateSelectedItems(selectedItems: SelectedItems, limit: number, offset: number): {
+    [key: string]: Collection;
+};
+/**
+ * 3 scenarios.
+ * 1. If no api is provided -> marks everything as approved.
+ * 2. If api is success -> sets the status
+ * 3. If api is failure -> marks everything as approved.
+ *
+ * We first get the variant ids to fetch and only if we have variant ids, we call api.
+ */
+export declare const fetchFbStatusCollection: (data: SelectedItems, storeId: string, dispatcher: any, fbStatusFetcher?: ((storeId: string, variantIds: string[]) => FbStatusFetcherReturn) | undefined, dispatchType?: string) => void;
+/**
+ * Instead of collection level, we do it product level.
+ *
+ * For more info refer @function getVariantIdsToFetch
+ */
+export declare const getVariantIdsToFetchAtProductLevel: (products: {
+    [key: string]: Product;
+}, globalData?: Collection) => string[];
+/**
+ * Instead of collection level, we do it product level.
+ *
+ * For more info refer @function markVariantsAsApproved
+ */
+export declare const markVariantsAsApprovedProductsLevel: (products: {
+    [key: string]: Product;
+}, dispatcher: React.Dispatch<CollectionsActions>, collectionId: string, curScreenData?: Collection, setCurScreenData?: React.Dispatch<React.SetStateAction<Collection>>) => void;
+/**
+ * If product has only one variant and variant name has product name, returns false.
+ * Other cases returns true.
+ */
+export declare const shouldShowVariant: (data: Product) => boolean;
+export declare const isProductPartiallyChecked: (collectionId: string, productId: string, selectedData: SelectedItems, currentCollection: Collection) => boolean;
+export declare const isCollectionPartiallyChecked: (collectionId: string, collection: Collection, selectedCollections: SelectedItems) => boolean;

package/dist/esm/components/product-picker-v2/utility.js

@@ -1 +1 @@
-import{cloneDeep as t}from"lodash";const a=(a,s)=>{const o=t(s);if(delete o.products,(a=Object.assign(Object.assign({},a),{catalogOnlyData:o})).productId&&s.products){const c=t(s.products[a.productId]);(null==c?void 0:c.variants)&&delete c.variants,a=Object.assign(Object.assign({},a),{catalogOnlyData:o,productOnlyData:c})}return a};export{a as liftTheStateUp};
+import{cloneDeep as o}from"lodash";const l=(l,i)=>{const n=o(i);if(delete n.products,(l=Object.assign(Object.assign({},l),{catalogOnlyData:n})).productId&&i.products){const t=o(i.products[l.productId]);(null==t?void 0:t.variants)&&delete t.variants,l=Object.assign(Object.assign({},l),{catalogOnlyData:n,productOnlyData:t})}return l};function i(o,l,i){var t;const d={};let v=0;for(const s in o)if(Object.prototype.hasOwnProperty.call(o,s)){const u=o[s],c=n(u.products,l,i-v);c&&Object.keys(c).length>0&&(d[s]=Object.assign(Object.assign({},u),{products:c})),v+=Object.keys(null!==(t=u.products)&&void 0!==t?t:{}).length}return d}function n(o,l,i){if(!o)return{};const n=Object.keys(o).slice(i,i+l),t={};return n.forEach((l=>{t[l]=o[l]})),t}const t=(o,l,i)=>{Object.keys(o).forEach((l=>{var i,n;const t=null!==(n=null===(i=o[l])||void 0===i?void 0:i.products)&&void 0!==n?n:{};Object.keys(t).forEach((i=>{var n,t,d,v;const s=null!==(v=null===(d=null===(t=null===(n=o[l])||void 0===n?void 0:n.products)||void 0===t?void 0:t[i])||void 0===d?void 0:d.variants)&&void 0!==v?v:{};Object.keys(s).forEach((n=>{var t,d,v,s;const u=null===(s=null===(v=null===(d=null===(t=o[l])||void 0===t?void 0:t.products)||void 0===d?void 0:d[i])||void 0===v?void 0:v.variants)||void 0===s?void 0:s[n];u&&!u.fbStatus&&(u.fbStatus="APPROVED")}))}))})),l({type:i,data:o})},d=function(o,l,i,n){let d=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"paged";n||t(o,i,d);const v=(o=>{const l=[];return Object.keys(o).forEach((i=>{var n,t;const d=null!==(t=null===(n=o[i])||void 0===n?void 0:n.products)&&void 0!==t?t:{};Object.keys(d).forEach((n=>{var t,d,v,s;const u=null!==(s=null===(v=null===(d=null===(t=o[i])||void 0===t?void 0:t.products)||void 0===d?void 0:d[n])||void 0===v?void 0:v.variants)&&void 0!==s?s:{};Object.keys(u).forEach((t=>{var d,v,s,u;const c=null===(u=null===(s=null===(v=null===(d=o[i])||void 0===d?void 0:d.products)||void 0===v?void 0:v[n])||void 0===s?void 0:s.variants)||void 0===u?void 0:u[t];(null==c?void 0:c.fbStatus)||l.push(t)}))}))})),l})(o);v.length>0&&n&&n(l,v).then((l=>{const n=Object.assign({},o);Object.keys(n).forEach((o=>{var i,t;const d=null!==(t=null===(i=n[o])||void 0===i?void 0:i.products)&&void 0!==t?t:{};Object.keys(d).forEach((i=>{var t,d,v,s;const u=null!==(s=null===(v=null===(d=null===(t=n[o])||void 0===t?void 0:t.products)||void 0===d?void 0:d[i])||void 0===v?void 0:v.variants)&&void 0!==s?s:{};Object.keys(u).forEach((t=>{var d,v,s,u;const c=null===(u=null===(s=null===(v=null===(d=n[o])||void 0===d?void 0:d.products)||void 0===v?void 0:v[i])||void 0===s?void 0:s.variants)||void 0===u?void 0:u[t];c&&"REJECTED"===l[t]?c.fbStatus="REJECTED":c&&"APPROVED"===l[t]&&(c.fbStatus="APPROVED")}))}))})),i({type:d,data:n})})).catch((l=>{console.error("Error in fbStatusFetcher",l),t(o,i,d)}))},v=(o,l)=>{const i=[];return Object.keys(null!=o?o:{}).forEach((n=>{var t,d;const v=null!==(d=null===(t=null==o?void 0:o[n])||void 0===t?void 0:t.variants)&&void 0!==d?d:{};Object.keys(v).forEach((t=>{var d,v,s,u,c;let r;r=l?null===(s=null===(v=null===(d=null==l?void 0:l.products)||void 0===d?void 0:d[n])||void 0===v?void 0:v.variants)||void 0===s?void 0:s[t]:null===(c=null===(u=null==o?void 0:o[n])||void 0===u?void 0:u.variants)||void 0===c?void 0:c[t],(null==r?void 0:r.fbStatus)||i.push(t)}))})),i},s=(o,l,i,n,t)=>{const d=Object.assign({},o);if(Object.keys(o).forEach((l=>{var i,n;Object.keys(null!==(n=null===(i=null==o?void 0:o[l])||void 0===i?void 0:i.variants)&&void 0!==n?n:{}).forEach((i=>{var n,t;const v=null===(n=null==o?void 0:o[l].variants)||void 0===n?void 0:n[i];v&&(v.fbStatus="APPROVED");const s=null===(t=null==d?void 0:d[l])||void 0===t?void 0:t.variants;s&&s[i]&&(s[i]=v)}))})),n&&t){const o=Object.assign({},n);o.products=d,t(o),l({type:"productsPaged",data:{collectionId:i,products:d}})}else l({type:"productsPaged",data:{collectionId:i,products:d}})},u=o=>{const l=Object.keys(o.variants||[]);let i=!1;return!(l.length<=1)||(l.forEach((l=>{var n,t;i=null!==(t=null===(n=o.variants)||void 0===n?void 0:n[l].name.includes(o.name))&&void 0!==t&&t})),!i)},c=(o,l,i,n)=>{var t,d,v,s,u,c,r,a,e,f,p,b,O,h,j,y,E,k,g;let P=0,D=0;if(null===(d=null===(t=null==i?void 0:i[o])||void 0===t?void 0:t.products)||void 0===d?void 0:d[l]){const t=(null===(u=null===(s=null===(v=null==i?void 0:i[o])||void 0===v?void 0:v.products)||void 0===s?void 0:s[l])||void 0===u?void 0:u.variants)||[];if(1===Object.keys(t).length)for(const n in t){const t=null===(r=null===(c=null==i?void 0:i[o])||void 0===c?void 0:c.products)||void 0===r?void 0:r[l],d=null===(p=null===(f=null===(e=null===(a=null==i?void 0:i[o])||void 0===a?void 0:a.products)||void 0===e?void 0:e[l])||void 0===f?void 0:f.variants)||void 0===p?void 0:p[n];if(null===(b=null==d?void 0:d.name)||void 0===b?void 0:b.includes(null!==(O=null==t?void 0:t.name)&&void 0!==O?O:""))return!1}if(null===(y=Object.keys((null===(j=null===(h=null==n?void 0:n.products)||void 0===h?void 0:h[l])||void 0===j?void 0:j.variants)||[]))||void 0===y||y.forEach((()=>D++)),Object.keys((null===(g=null===(k=null===(E=null==i?void 0:i[o])||void 0===E?void 0:E.products)||void 0===k?void 0:k[l])||void 0===g?void 0:g.variants)||[]).forEach((()=>P++)),P>0&&D!==P)return!0}return!1},r=(o,l,i)=>{var n;let t=0,d=0;if(i[o]){const v=null==l?void 0:l.products;v&&Object.keys(v).forEach((o=>{var l;const i=null===(l=v[o])||void 0===l?void 0:l.variants;i&&Object.keys(i).forEach((o=>t+=1))}));const s=null===(n=i[o])||void 0===n?void 0:n.products;return s&&Object.keys(s).forEach((o=>{var l;const i=null===(l=s[o])||void 0===l?void 0:l.variants;i&&Object.keys(i).forEach((o=>d+=1))})),!(t<=0&&d>0)&&(d>0&&t!==d)}return!1};export{d as fetchFbStatusCollection,v as getVariantIdsToFetchAtProductLevel,r as isCollectionPartiallyChecked,c as isProductPartiallyChecked,l as liftTheStateUp,s as markVariantsAsApprovedProductsLevel,i as paginateSelectedItems,u as shouldShowVariant};

package/dist/esm/components/product-picker-v2/variant.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/delete.svg.js";import r from"../../assets/icons/drag_handle.svg.js";import{COLORS as a}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as l}from"../shimmer-image/ShimmerImage.js";import{TitleRegular as s}from"../TypographyStyle.js";import{truncate as c}from"./collectionScreen.js";import{ProductHelper as m}from"./helpers/ProductHelper.js";import{VariantCardListStyle as d,VariantCardGridStyle as h}from"./style.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{Tag as g}from"../tag/Tag.js";const j=h=>{const{data:j,selectedCollectionsDispatch:u,outOfStockAction:f}=h,b=m.getProductLabels(j,f),y=t=>{let e;return e=j.name.includes(j.productName)?j.name:`${j.productName} ${j.name}`,t?c(e,34,!0):e};return t(d,{children:[e(r,{width:24,height:24,color:a.content.placeholder}),e("div",{children:e(l,{width:40,height:40,imageUrl:j.image,alt:"Item",borderRadius:4},j.variantId)}),t("div",Object.assign({className:"tooltip-title-tag"},{children:[e(p,Object.assign({body:y(!1),placement:"bottom",delay:400},{children:e(s,{children:y(!0)})})),b?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(g,{tagText:b,type:"warning",theme:"light"})})):e(o,{})]})),e(n,{Icon:()=>e(i,{width:24,height:24,color:a.content.placeholder}),onClick:()=>{u&&u({type:"variantUnselected",data:{productId:j.productId,variantId:j.variantId,collectionId:j.collectionId}}),h.onDelete&&h.onDelete()}})]})},u=t=>{const{data:o}=t;return e(h,{children:e(p,Object.assign({body:o.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e(l,{width:72,height:72,imageUrl:o.image,alt:"Item",borderRadius:4})}))})};export{u as VariantCardGridView,j as VariantCardListView};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/delete.svg.js";import i from"../../assets/icons/drag_handle.svg.js";import{COLORS as r}from"../../constants/Theme.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{TitleRegular as c}from"../TypographyStyle.js";import{truncate as s}from"./collectionScreen.js";import{ProductPickerTag as l}from"./ProductPickerTag.js";import{VariantCardListStyle as m,VariantCardGridStyle as d}from"./style.js";import{Tooltip as h}from"../tooltips/Tooltip.js";const p=d=>{const{data:p,selectedCollectionsDispatch:g,outOfStockAction:u}=d,j=t=>{let e;return e=p.name.includes(p.productName)?p.name:`${p.productName} ${p.name}`,t?s(e,34,!0):e};return t(m,{children:[t("div",Object.assign({className:"text-container"},{children:[e(i,{width:24,height:24,color:r.content.placeholder}),e("div",{children:e(n,{width:40,height:40,imageUrl:p.image,alt:"Item",borderRadius:4},p.variantId)}),t("div",Object.assign({className:"tooltip-title-tag"},{children:[e(h,Object.assign({body:j(!1),placement:"bottom",delay:400,variant:"light"},{children:e(c,{children:j(!0)})})),e(l,{isVariant:!0,data:p,outOfStockAction:u})]}))]})),e(a,{Icon:()=>e(o,{width:24,height:24,color:r.content.placeholder}),onClick:()=>{g&&g({type:"variantUnselected",data:{productId:p.productId,variantId:p.variantId,collectionId:p.collectionId}}),d.onDelete&&d.onDelete()}})]})},g=t=>{const{data:o}=t;return e(d,{children:e(h,Object.assign({body:o.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e(n,{width:72,height:72,imageUrl:o.image,alt:"Item",borderRadius:4})}))})};export{g as VariantCardGridView,p as VariantCardListView};

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

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

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

@@ -2,6 +2,7 @@ interface ProductBoxProps {
     cardBody: string;
     deleteItem: any;
     editItem?: any;
+    hideIcon?: boolean;
 }
 export declare const ProductBox: (props: ProductBoxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/box.svg.js";import i from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/edit.svg.js";import s from"styled-components";import{IconButton as r}from"../../icon-button/IconButton.js";import{TitleRegular as l}from"../../TypographyStyle.js";const c=s.div`
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/box.svg.js";import i from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/edit.svg.js";import s from"styled-components";import{IconButton as r}from"../../icon-button/IconButton.js";import{TitleSmall as l}from"../../TypographyStyle.js";const c=s.div`
 	width: ${t=>t.width};
 	padding: 12px;
 	display: flex;
@@ -44,4 +44,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/
 			color: #000000;
 		}
 	}
-`,d=s=>{const{cardBody:d,deleteItem:f,editItem:a}=s;return t(c,Object.assign({width:"100%"},{children:[e("div",Object.assign({style:{width:36,height:36}},{children:e(o,{})})),e("div",Object.assign({className:"card-body"},{children:e(l,{children:d})})),t("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[a&&e(r,{style:{display:"flex"},Icon:n,onClick:t=>{a(),t.stopPropagation()}}),e(r,{style:{display:"flex",color:"#919191"},Icon:i,onClick:t=>{f(),t.stopPropagation()}})]}))]}))};export{d as ProductBox};
+`,d=s=>{const{cardBody:d,deleteItem:f,editItem:a,hideIcon:p}=s;return t(c,Object.assign({width:"100%"},{children:[!p&&e("div",Object.assign({style:{width:36,height:36}},{children:e(o,{})})),e("div",Object.assign({className:"card-body"},{children:e(l,{children:d})})),t("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[a&&e(r,{style:{display:"flex"},Icon:n,onClick:t=>{a(),t.stopPropagation()}}),e(r,{style:{display:"flex",color:"#919191"},Icon:i,onClick:t=>{f(),t.stopPropagation()}})]}))]}))};export{d as ProductBox};

package/package.json

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