@bikdotai/bik-component-library 0.0.159-beta.3 → 0.0.159-beta.5

package/dist/cjs/components/product-picker-v2/modal.d.ts

@@ -35,6 +35,7 @@ export type ProductFetcherReturn = Promise<{
     [key: string]: Product;
 }>;
 export interface ProductPickerInterface {
+    searchFetcher: (collectionId: string, query: string) => Promise<string[]>;
     collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
     productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
     storeId: string;

package/dist/cjs/components/product-picker-v2/modal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),c=require("../button/Button.js"),o=require("../modals/styledModal.js"),s=require("../tag/Tag.js"),l=require("./collectionScreen.js"),r=require("./productScreen.js"),n=require("./reducers.js"),d=require("./selectedScreen.js"),i=require("./style.js");exports.ProductPickerModal=u=>{const{storeId:a,selectedItems:p,onClose:h,visible:j,zIndex:v,limit:S}=u,[y,x]=t.useReducer(n.collectionsReducer,{}),[C,b]=t.useState("collections"),[f,g]=t.useState(""),[q,I]=t.useState(0),[P,T]=t.useState(!1),[k,m]=t.useState(0),[D,O]=t.useReducer(n.selectedColectionsReducer,Object.keys(p).length>0?p:{});t.useEffect((()=>{T(!0),u.collectionFetcher(q,a).then((e=>{x({type:"fetched",data:(null==e?void 0:e.collections)||{}}),T(!1),I((e=>e+1))})).catch()}),[]),t.useEffect((()=>{let e=0;Object.keys(D||[]).forEach((t=>{var c;Object.keys((null===(c=D[t])||void 0===c?void 0:c.products)||[]).forEach((c=>{var o,s;Object.keys((null===(s=null===(o=D[t].products)||void 0===o?void 0:o[c])||void 0===s?void 0:s.variants)||[]).forEach((()=>{e+=1}))}))})),m(e)})),t.useEffect((()=>{var e;f&&!(null===(e=null==y?void 0:y[f])||void 0===e?void 0:e.products)&&(T(!0),u.productFetcher(f,a).then((e=>{Object.keys(e).length&&(x({type:"productsFetched",data:{collectionId:f,products:e}}),T(!1))})).catch())}),[f]);const E=()=>{O({type:"reset",data:{}})};return e.jsx(o.StyledModal,Object.assign({zIndex:v,open:j,onClose:()=>{h(),E()},headingTitle:"collections"===C?"Select Products":"products"===C?y[f].name:"view"===C?"Selected Products":void 0,footerShadow:!0,centralContainerStyles:{width:"480px"},primaryButton:{buttonText:P?"Loading...":"Add",disabled:P||S&&k>S||!1,onClick:()=>{u.onAdd(D,k),E()}},footerLeftCustomElement:S&&k>S?e.jsx(s.Tag,{tagText:`You can only select ${S} products`,type:"negative"}):k>0?e.jsx(c.Button,{onClick:()=>{b("view")},buttonText:`${k} products selected`,buttonType:"tertiaryGray"}):e.jsx(c.Button,{disabled:!0,buttonText:`${k} products selected`,buttonType:"tertiaryGray"})},{children:e.jsx(i.ContainerStyle,{children:e.jsxs(i.ScrollContainerStyle,{children:["collections"===C&&e.jsx(l.CollectionsScreen,{collections:y,selectedCollectionsDispatch:O,setCollectionId:g,setScreen:b,selectedCollections:D,collectionFetcher:u.collectionFetcher,storeId:a,collectionsDispatch:x,setSaveDisabled:T,pagingControls:{curPage:q,setCurPage:I}}),"products"===C&&f&&e.jsx(n.CollectionIdContext.Provider,Object.assign({value:f},{children:e.jsx(r.ProductsScreen,{productFetcher:u.productFetcher,setScreen:b,storeId:a,data:y[f],collectionsDispatch:x,selectedCollectionsDispatch:O,selectedData:D,setSaveDisabled:T})})),"view"===C&&e.jsx(d.SelectedScreen,{selectedCollections:D||{},selectedCollectionsDispatch:O,upliftAdditions:null,setScreen:b,collections:y})]})})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),c=require("../button/Button.js"),o=require("../modals/styledModal.js"),s=require("../tag/Tag.js"),l=require("./collectionScreen.js"),r=require("./productScreen.js"),n=require("./reducers.js"),d=require("./selectedScreen.js"),i=require("./style.js");exports.ProductPickerModal=a=>{const{storeId:u,selectedItems:h,onClose:p,visible:j,zIndex:v,limit:S}=a,[y,x]=t.useReducer(n.collectionsReducer,{}),[C,b]=t.useState("collections"),[f,g]=t.useState(""),[q,F]=t.useState(0),[I,P]=t.useState(!1),[T,k]=t.useState(0),[m,D]=t.useReducer(n.selectedColectionsReducer,Object.keys(h).length>0?h:{});t.useEffect((()=>{P(!0),a.collectionFetcher(q,u).then((e=>{x({type:"fetched",data:(null==e?void 0:e.collections)||{}}),P(!1),F((e=>e+1))})).catch()}),[]),t.useEffect((()=>{let e=0;Object.keys(m||[]).forEach((t=>{var c;Object.keys((null===(c=m[t])||void 0===c?void 0:c.products)||[]).forEach((c=>{var o,s;Object.keys((null===(s=null===(o=m[t].products)||void 0===o?void 0:o[c])||void 0===s?void 0:s.variants)||[]).forEach((()=>{e+=1}))}))})),k(e)})),t.useEffect((()=>{var e;f&&!(null===(e=null==y?void 0:y[f])||void 0===e?void 0:e.products)&&(P(!0),a.productFetcher(f,u).then((e=>{Object.keys(e).length&&x({type:"productsFetched",data:{collectionId:f,products:e}}),P(!1)})).catch())}),[f]);const O=()=>{D({type:"reset",data:{}})};return e.jsx(o.StyledModal,Object.assign({zIndex:v,open:j,onClose:()=>{p(),O()},headingTitle:"collections"===C?"Select Products":"products"===C?y[f].name:"view"===C?"Selected Products":void 0,footerShadow:!0,centralContainerStyles:{width:"480px"},primaryButton:{buttonText:I?"Loading...":"Add",disabled:I||S&&T>S||!1,onClick:()=>{a.onAdd(m,T),O()}},footerLeftCustomElement:S&&T>S?e.jsx(s.Tag,{tagText:`You can only select ${S} products`,type:"negative"}):T>0?e.jsx(c.Button,{onClick:()=>{b("view")},buttonText:`${T} products selected`,buttonType:"tertiaryGray"}):e.jsx(c.Button,{disabled:!0,buttonText:`${T} products selected`,buttonType:"tertiaryGray"})},{children:e.jsx(i.ContainerStyle,{children:e.jsxs(i.ScrollContainerStyle,{children:["collections"===C&&e.jsx(l.CollectionsScreen,{collections:y,selectedCollectionsDispatch:D,setCollectionId:g,setScreen:b,selectedCollections:m,collectionFetcher:a.collectionFetcher,storeId:u,collectionsDispatch:x,setSaveDisabled:P,pagingControls:{curPage:q,setCurPage:F}}),"products"===C&&f&&e.jsx(n.CollectionIdContext.Provider,Object.assign({value:f},{children:e.jsx(r.ProductsScreen,{productFetcher:a.productFetcher,setScreen:b,storeId:u,data:y[f],collectionsDispatch:x,selectedCollectionsDispatch:D,selectedData:m,setSaveDisabled:P,searchFetcher:a.searchFetcher})})),"view"===C&&e.jsx(d.SelectedScreen,{selectedCollections:m||{},selectedCollectionsDispatch:D,upliftAdditions:null,setScreen:b,collections:y})]})})}))};

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

@@ -6,6 +6,7 @@ interface ProductsScreenInterface {
     collectionsDispatch: React.Dispatch<CollectionsActions>;
     selectedData: SelectedItems;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    searchFetcher: (collectionId: string, query: string) => Promise<string[]>;
     productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
     storeId: string;
     setScreen: React.Dispatch<React.SetStateAction<string>>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),i=require("../../assets/icons/box.svg.js"),d=require("lodash"),o=require("react"),l=require("../../constants/Theme.js"),c=require("../checkBox/CheckBox.js"),s=require("../icon-button/IconButton.js"),r=require("../shimmer/ShimmerComponent/BikShimmer.js"),n=require("../shimmer-image/ShimmerImage.js"),a=require("../TypographyStyle.js"),u=require("./collectionScreen.js"),v=require("./reducers.js"),p=require("./style.js");const h=t=>{const{collectionId:i,productId:d,data:o,selectedData:l,selectedCollectionsDispatch:c,upliftAdditions:s,viewOnly:r,isProductPartiallyChecked:n}=t,a=e=>{var t,o,c,s,r,n;if(!(null===(o=null===(t=null==l?void 0:l[i])||void 0===t?void 0:t.products)||void 0===o?void 0:o[d]))return!1;return!!(null===(n=null===(r=null===(s=null===(c=null==l?void 0:l[i])||void 0===c?void 0:c.products)||void 0===s?void 0:s[d])||void 0===r?void 0:r.variants)||void 0===n?void 0:n[e])};return e.jsxs("div",{children:[e.jsx(j,{isVariant:!1,data:o,productId:d,collectionId:i,isSelected:!!(null===(v=null===(u=null==l?void 0:l[i])||void 0===u?void 0:u.products)||void 0===v?void 0:v[d]),isPartiallyChecked:n,selectedCollectionsDispatch:c,upliftAdditions:s,viewOnly:r},d),Object.keys(o.variants||[]).map((t=>e.jsx(j,{isVariant:!0,data:o.variants[t],variantId:t,productId:d,viewOnly:r,collectionId:i,isSelected:a(t),selectedCollectionsDispatch:c,upliftAdditions:s},t)))]});var u,v},j=t=>{const{isVariant:i,data:d,productId:o,collectionId:l,variantId:s,isSelected:r,selectedCollectionsDispatch:v,upliftAdditions:h,viewOnly:j,isPartiallyChecked:y}=t;return e.jsxs(p.ProductCardStyle,Object.assign({isVariant:i},{children:[j?e.jsx(e.Fragment,{}):e.jsx(c.CheckBox,{isChecked:r,isPartiallyChecked:y||!1,onValueChange:function(e){i?e?h("variantSelected",{productId:o,variantId:s,collectionId:l,variant:d}):v({type:"variantUnselected",data:{productId:o,variantId:s,collectionId:l}}):e?h("productSelected",{productId:o,collectionId:l,product:d}):v({type:"productUnselected",data:{productId:o,collectionId:l}})}}),e.jsx("div",{children:e.jsx(n.ShimmerImage,{width:40,height:40,imageUrl:d.image,alt:"Item",borderRadius:4})}),e.jsx(a.TitleRegular,{children:u.truncate(d.name,40,!0)})]}))};exports.ProductCard=j,exports.ProductGroup=h,exports.ProductsScreen=n=>{const u=o.useContext(v.CollectionIdContext),{data:j,collectionsDispatch:y,selectedData:x,selectedCollectionsDispatch:m,productFetcher:I,storeId:g,setScreen:C,setSaveDisabled:O}=n,[b]=o.useState(j),k=j.isSmartCollection||!1,f=e=>{var t,i,d,o,l,c,s,r;let n=0,a=0;return!!((null===(i=null===(t=null==x?void 0:x[u])||void 0===t?void 0:t.products)||void 0===i?void 0:i[e])&&(null===(l=Object.keys((null===(o=null===(d=null==j?void 0:j.products)||void 0===d?void 0:d[e])||void 0===o?void 0:o.variants)||[]))||void 0===l||l.forEach((()=>a++)),Object.keys((null===(r=null===(s=null===(c=null==x?void 0:x[u])||void 0===c?void 0:c.products)||void 0===s?void 0:s[e])||void 0===r?void 0:r.variants)||[]).forEach((()=>n++)),n>0&&a!==n))};o.useEffect((()=>{(null==j?void 0:j.products)||(O(!0),I(u,g).then((e=>{Object.keys(e).length&&y({type:"productsFetched",data:{collectionId:u,products:e}}),O(!1)})).catch())}),[]);const S=(e,t)=>{const i=d.cloneDeep(j);if(delete i.products,(t=Object.assign(Object.assign({},t),{catalogOnlyData:i})).productId&&j.products){const e=d.cloneDeep(j.products[t.productId]);(null==e?void 0:e.variants)&&delete e.variants,t=Object.assign(Object.assign({},t),{catalogOnlyData:i,productOnlyData:e})}m({type:e,data:t})};return e.jsxs("div",{children:[e.jsxs(p.ProductScreenHeader,{children:[e.jsx(s.IconButton,{Icon:t.default,height:16,onClick:()=>{C("collections")}}),e.jsx(a.BodyCaption,Object.assign({style:{color:l.COLORS.content.secondary}},{children:j.name}))]}),e.jsxs("div",{children:[e.jsxs(p.ProductScreenCollectionCardStyle,{children:[k?e.jsx(e.Fragment,{}):e.jsx(c.CheckBox,{isChecked:!!(null==x?void 0:x[u]),isPartiallyChecked:(e=>{var t;let i=0,d=0;if(x[e]){const o=null==j?void 0:j.products;o&&Object.keys(o).forEach((e=>{var t;const d=null===(t=o[e])||void 0===t?void 0:t.variants;d&&Object.keys(d).forEach((e=>i+=1))}));const l=null===(t=x[e])||void 0===t?void 0:t.products;return l&&Object.keys(l).forEach((e=>{var t;const i=null===(t=l[e])||void 0===t?void 0:t.variants;i&&Object.keys(i).forEach((e=>d+=1))})),d>0&&i!==d}return!1})(u),onValueChange:function(e){m(e?{type:"selected",data:{id:u,val:j}}:{type:"unselected",data:{id:u}})}}),e.jsx("div",Object.assign({style:{width:40,height:40}},{children:e.jsx(i.default,{})})),e.jsx(a.TitleRegular,{children:"All Products"})]}),Object.keys((null==b?void 0:b.products)||[]).length?Object.keys(b.products||[]).map((t=>e.jsx(h,{collectionId:u,isProductPartiallyChecked:f(t),productId:t,data:b.products[t],selectedData:x,selectedCollectionsDispatch:m,upliftAdditions:S,viewOnly:!!k},t))):[1,2,3,4,5,6,7,8,9,10].map(((t,i)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(r.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),i)))]})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),i=require("../../assets/icons/box.svg.js"),o=require("../../assets/icons/search.svg.js"),s=require("lodash"),d=require("react"),c=require("../../constants/Theme.js"),r=require("../checkBox/CheckBox.js"),l=require("../icon-button/IconButton.js"),n=require("../input/Input.js"),a=require("../shimmer/ShimmerComponent/BikShimmer.js"),u=require("../shimmer-image/ShimmerImage.js"),v=require("../spinner/Spinner.js"),p=require("../TypographyStyle.js"),h=require("./collectionScreen.js"),j=require("./reducers.js"),x=require("./style.js");const y=t=>{const{collectionId:i,productId:o,data:s,selectedData:d,selectedCollectionsDispatch:c,upliftAdditions:r,viewOnly:l,isProductPartiallyChecked:n}=t,a=e=>{var t,s,c,r,l,n;if(!(null===(s=null===(t=null==d?void 0:d[i])||void 0===t?void 0:t.products)||void 0===s?void 0:s[o]))return!1;return!!(null===(n=null===(l=null===(r=null===(c=null==d?void 0:d[i])||void 0===c?void 0:c.products)||void 0===r?void 0:r[o])||void 0===l?void 0:l.variants)||void 0===n?void 0:n[e])};return e.jsxs("div",{children:[e.jsx(g,{isVariant:!1,data:s,productId:o,collectionId:i,isSelected:!!(null===(v=null===(u=null==d?void 0:d[i])||void 0===u?void 0:u.products)||void 0===v?void 0:v[o]),isPartiallyChecked:n,selectedCollectionsDispatch:c,upliftAdditions:r,viewOnly:l},o),Object.keys(s.variants||[]).map((t=>e.jsx(g,{isVariant:!0,data:s.variants[t],variantId:t,productId:o,viewOnly:l,collectionId:i,isSelected:a(t),selectedCollectionsDispatch:c,upliftAdditions:r},t)))]});var u,v},g=t=>{const{isVariant:i,data:o,productId:s,collectionId:d,variantId:c,isSelected:l,selectedCollectionsDispatch:n,upliftAdditions:a,viewOnly:v,isPartiallyChecked:j}=t;return e.jsxs(x.ProductCardStyle,Object.assign({isVariant:i},{children:[v?e.jsx(e.Fragment,{}):e.jsx(r.CheckBox,{isChecked:l,isPartiallyChecked:j||!1,onValueChange:function(e){i?e?a("variantSelected",{productId:s,variantId:c,collectionId:d,variant:o}):n({type:"variantUnselected",data:{productId:s,variantId:c,collectionId:d}}):e?a("productSelected",{productId:s,collectionId:d,product:o}):n({type:"productUnselected",data:{productId:s,collectionId:d}})}}),e.jsx("div",{children:e.jsx(u.ShimmerImage,{width:40,height:40,imageUrl:o.image,alt:"Item",borderRadius:4})}),e.jsx(p.TitleRegular,{children:h.truncate(o.name,40,!0)})]}))};exports.ProductCard=g,exports.ProductGroup=y,exports.ProductsScreen=u=>{const h=d.useContext(j.CollectionIdContext),{data:g,collectionsDispatch:m,selectedData:I,selectedCollectionsDispatch:O,productFetcher:C,storeId:b,setScreen:S,setSaveDisabled:f}=u,[k,q]=d.useState(""),[D,P]=d.useState(!1),[E,B]=d.useState(g);d.useEffect((()=>{const e=setTimeout((()=>{k.length?(P(!0),u.searchFetcher(h,k).then((e=>{var t;const i=s.cloneDeep(g);i.products={};for(const o of e)(null===(t=null==g?void 0:g.products)||void 0===t?void 0:t[o])&&(i.products[o]=g.products[o]);B(i),f(!1),P(!1)}))):B(g)}),800);return()=>clearTimeout(e)}),[k]);const w=g.isSmartCollection||!1,T=e=>{var t,i,o,s,d,c,r,l;let n=0,a=0;return!!((null===(i=null===(t=null==I?void 0:I[h])||void 0===t?void 0:t.products)||void 0===i?void 0:i[e])&&(null===(d=Object.keys((null===(s=null===(o=null==g?void 0:g.products)||void 0===o?void 0:o[e])||void 0===s?void 0:s.variants)||[]))||void 0===d||d.forEach((()=>a++)),Object.keys((null===(l=null===(r=null===(c=null==I?void 0:I[h])||void 0===c?void 0:c.products)||void 0===r?void 0:r[e])||void 0===l?void 0:l.variants)||[]).forEach((()=>n++)),n>0&&a!==n))};d.useEffect((()=>{(null==g?void 0:g.products)||A()}),[]);const A=()=>{f(!0),C(h,b).then((e=>{Object.keys(e).length&&(m({type:"productsFetched",data:{collectionId:h,products:e}}),B(Object.assign(Object.assign({},E),{products:e}))),f(!1),P(!1)})).catch()},V=(e,t)=>{const i=s.cloneDeep(g);if(delete i.products,(t=Object.assign(Object.assign({},t),{catalogOnlyData:i})).productId&&g.products){const e=s.cloneDeep(g.products[t.productId]);(null==e?void 0:e.variants)&&delete e.variants,t=Object.assign(Object.assign({},t),{catalogOnlyData:i,productOnlyData:e})}O({type:e,data:t})};return e.jsxs("div",{children:[e.jsxs(x.ProductScreenHeader,{children:[e.jsx(l.IconButton,{Icon:t.default,height:16,onClick:()=>{S("collections")}}),e.jsx(p.BodyCaption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:g.name}))]}),e.jsx("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(n.Input,{rightIcon:{icon:()=>D?e.jsx(v.Spinner,{size:"small",color:c.COLORS.content.primary}):e.jsx(o.default,{})},id:"listInput",height:"24px",type:"text",value:k,onChangeText:e=>{q(e)},placeholder:"Search products..."})})),e.jsxs("div",{children:[e.jsxs(x.ProductScreenCollectionCardStyle,{children:[w?e.jsx(e.Fragment,{}):e.jsx(r.CheckBox,{isChecked:!!(null==I?void 0:I[h]),isPartiallyChecked:(e=>{var t;let i=0,o=0;if(I[e]){const s=null==g?void 0:g.products;s&&Object.keys(s).forEach((e=>{var t;const o=null===(t=s[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((e=>i+=1))}));const d=null===(t=I[e])||void 0===t?void 0:t.products;return d&&Object.keys(d).forEach((e=>{var t;const i=null===(t=d[e])||void 0===t?void 0:t.variants;i&&Object.keys(i).forEach((e=>o+=1))})),o>0&&i!==o}return!1})(h),onValueChange:function(e){O(e?{type:"selected",data:{id:h,val:g}}:{type:"unselected",data:{id:h}})}}),e.jsx("div",Object.assign({style:{width:40,height:40}},{children:e.jsx(i.default,{})})),e.jsx(p.TitleRegular,{children:"All Products"})]}),Object.keys((null==E?void 0:E.products)||[]).length&&!D?Object.keys(E.products||[]).map((t=>e.jsx(y,{collectionId:h,isProductPartiallyChecked:T(t),productId:t,data:E.products[t],selectedData:I,selectedCollectionsDispatch:O,upliftAdditions:V,viewOnly:!!w},t))):[1,2,3,4,5,6,7,8,9,10].map(((t,i)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(a.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),i)))]})]})};

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

@@ -35,6 +35,7 @@ export type ProductFetcherReturn = Promise<{
     [key: string]: Product;
 }>;
 export interface ProductPickerInterface {
+    searchFetcher: (collectionId: string, query: string) => Promise<string[]>;
     collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
     productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
     storeId: string;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useReducer as o,useState as c,useEffect as l}from"react";import{Button as s}from"../button/Button.js";import{StyledModal as r}from"../modals/styledModal.js";import{Tag as i}from"../tag/Tag.js";import{CollectionsScreen as n}from"./collectionScreen.js";import{ProductsScreen as d}from"./productScreen.js";import{collectionsReducer as a,selectedColectionsReducer as p,CollectionIdContext as u}from"./reducers.js";import{SelectedScreen as h}from"./selectedScreen.js";import{ContainerStyle as m,ScrollContainerStyle as v}from"./style.js";const y=y=>{const{storeId:b,selectedItems:f,onClose:j,visible:g,zIndex:C,limit:S}=y,[x,D]=o(a,{}),[I,T]=c("collections"),[k,F]=c(""),[O,w]=c(0),[P,E]=c(!1),[A,$]=c(0),[z,B]=o(p,Object.keys(f).length>0?f:{});l((()=>{E(!0),y.collectionFetcher(O,b).then((e=>{D({type:"fetched",data:(null==e?void 0:e.collections)||{}}),E(!1),w((e=>e+1))})).catch()}),[]),l((()=>{let e=0;Object.keys(z||[]).forEach((t=>{var o;Object.keys((null===(o=z[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,l;Object.keys((null===(l=null===(c=z[t].products)||void 0===c?void 0:c[o])||void 0===l?void 0:l.variants)||[]).forEach((()=>{e+=1}))}))})),$(e)})),l((()=>{var e;k&&!(null===(e=null==x?void 0:x[k])||void 0===e?void 0:e.products)&&(E(!0),y.productFetcher(k,b).then((e=>{Object.keys(e).length&&(D({type:"productsFetched",data:{collectionId:k,products:e}}),E(!1))})).catch())}),[k]);const G=()=>{B({type:"reset",data:{}})};return e(r,Object.assign({zIndex:C,open:g,onClose:()=>{j(),G()},headingTitle:"collections"===I?"Select Products":"products"===I?x[k].name:"view"===I?"Selected Products":void 0,footerShadow:!0,centralContainerStyles:{width:"480px"},primaryButton:{buttonText:P?"Loading...":"Add",disabled:P||S&&A>S||!1,onClick:()=>{y.onAdd(z,A),G()}},footerLeftCustomElement:S&&A>S?e(i,{tagText:`You can only select ${S} products`,type:"negative"}):e(s,A>0?{onClick:()=>{T("view")},buttonText:`${A} products selected`,buttonType:"tertiaryGray"}:{disabled:!0,buttonText:`${A} products selected`,buttonType:"tertiaryGray"})},{children:e(m,{children:t(v,{children:["collections"===I&&e(n,{collections:x,selectedCollectionsDispatch:B,setCollectionId:F,setScreen:T,selectedCollections:z,collectionFetcher:y.collectionFetcher,storeId:b,collectionsDispatch:D,setSaveDisabled:E,pagingControls:{curPage:O,setCurPage:w}}),"products"===I&&k&&e(u.Provider,Object.assign({value:k},{children:e(d,{productFetcher:y.productFetcher,setScreen:T,storeId:b,data:x[k],collectionsDispatch:D,selectedCollectionsDispatch:B,selectedData:z,setSaveDisabled:E})})),"view"===I&&e(h,{selectedCollections:z||{},selectedCollectionsDispatch:B,upliftAdditions:null,setScreen:T,collections:x})]})})}))};export{y as ProductPickerModal};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useReducer as o,useState as c,useEffect as l}from"react";import{Button as r}from"../button/Button.js";import{StyledModal as s}from"../modals/styledModal.js";import{Tag as i}from"../tag/Tag.js";import{CollectionsScreen as n}from"./collectionScreen.js";import{ProductsScreen as d}from"./productScreen.js";import{collectionsReducer as a,selectedColectionsReducer as p,CollectionIdContext as u}from"./reducers.js";import{SelectedScreen as h}from"./selectedScreen.js";import{ContainerStyle as m,ScrollContainerStyle as v}from"./style.js";const y=y=>{const{storeId:b,selectedItems:f,onClose:j,visible:g,zIndex:C,limit:S}=y,[x,F]=o(a,{}),[D,I]=c("collections"),[T,k]=c(""),[O,w]=c(0),[P,E]=c(!1),[A,$]=c(0),[z,B]=o(p,Object.keys(f).length>0?f:{});l((()=>{E(!0),y.collectionFetcher(O,b).then((e=>{F({type:"fetched",data:(null==e?void 0:e.collections)||{}}),E(!1),w((e=>e+1))})).catch()}),[]),l((()=>{let e=0;Object.keys(z||[]).forEach((t=>{var o;Object.keys((null===(o=z[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,l;Object.keys((null===(l=null===(c=z[t].products)||void 0===c?void 0:c[o])||void 0===l?void 0:l.variants)||[]).forEach((()=>{e+=1}))}))})),$(e)})),l((()=>{var e;T&&!(null===(e=null==x?void 0:x[T])||void 0===e?void 0:e.products)&&(E(!0),y.productFetcher(T,b).then((e=>{Object.keys(e).length&&F({type:"productsFetched",data:{collectionId:T,products:e}}),E(!1)})).catch())}),[T]);const G=()=>{B({type:"reset",data:{}})};return e(s,Object.assign({zIndex:C,open:g,onClose:()=>{j(),G()},headingTitle:"collections"===D?"Select Products":"products"===D?x[T].name:"view"===D?"Selected Products":void 0,footerShadow:!0,centralContainerStyles:{width:"480px"},primaryButton:{buttonText:P?"Loading...":"Add",disabled:P||S&&A>S||!1,onClick:()=>{y.onAdd(z,A),G()}},footerLeftCustomElement:S&&A>S?e(i,{tagText:`You can only select ${S} products`,type:"negative"}):e(r,A>0?{onClick:()=>{I("view")},buttonText:`${A} products selected`,buttonType:"tertiaryGray"}:{disabled:!0,buttonText:`${A} products selected`,buttonType:"tertiaryGray"})},{children:e(m,{children:t(v,{children:["collections"===D&&e(n,{collections:x,selectedCollectionsDispatch:B,setCollectionId:k,setScreen:I,selectedCollections:z,collectionFetcher:y.collectionFetcher,storeId:b,collectionsDispatch:F,setSaveDisabled:E,pagingControls:{curPage:O,setCurPage:w}}),"products"===D&&T&&e(u.Provider,Object.assign({value:T},{children:e(d,{productFetcher:y.productFetcher,setScreen:I,storeId:b,data:x[T],collectionsDispatch:F,selectedCollectionsDispatch:B,selectedData:z,setSaveDisabled:E,searchFetcher:y.searchFetcher})})),"view"===D&&e(h,{selectedCollections:z||{},selectedCollectionsDispatch:B,upliftAdditions:null,setScreen:I,collections:x})]})})}))};export{y as ProductPickerModal};

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

@@ -6,6 +6,7 @@ interface ProductsScreenInterface {
     collectionsDispatch: React.Dispatch<CollectionsActions>;
     selectedData: SelectedItems;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    searchFetcher: (collectionId: string, query: string) => Promise<string[]>;
     productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
     storeId: string;
     setScreen: React.Dispatch<React.SetStateAction<string>>;

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 d from"../../assets/icons/box.svg.js";import{cloneDeep as l}from"lodash";import{useContext as c,useState as n,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import{CheckBox as a}from"../checkBox/CheckBox.js";import{IconButton as u}from"../icon-button/IconButton.js";import{BikShimmer as v}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as p}from"../shimmer-image/ShimmerImage.js";import{BodyCaption as h,TitleRegular as m}from"../TypographyStyle.js";import{truncate as y}from"./collectionScreen.js";import{CollectionIdContext as f}from"./reducers.js";import{ProductScreenHeader as j,ProductScreenCollectionCardStyle as I,ProductCardStyle as g}from"./style.js";const O=p=>{const y=c(f),{data:g,collectionsDispatch:O,selectedData:k,selectedCollectionsDispatch:C,productFetcher:D,storeId:S,setScreen:w,setSaveDisabled:x}=p,[E]=n(g),P=g.isSmartCollection||!1,A=t=>{var e,o,i,d,l,c,n,r;let s=0,a=0;return!!((null===(o=null===(e=null==k?void 0:k[y])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(l=Object.keys((null===(d=null===(i=null==g?void 0:g.products)||void 0===i?void 0:i[t])||void 0===d?void 0:d.variants)||[]))||void 0===l||l.forEach((()=>a++)),Object.keys((null===(r=null===(n=null===(c=null==k?void 0:k[y])||void 0===c?void 0:c.products)||void 0===n?void 0:n[t])||void 0===r?void 0:r.variants)||[]).forEach((()=>s++)),s>0&&a!==s))};r((()=>{(null==g?void 0:g.products)||(x(!0),D(y,S).then((t=>{Object.keys(t).length&&O({type:"productsFetched",data:{collectionId:y,products:t}}),x(!1)})).catch())}),[]);const V=(t,e)=>{const o=l(g);if(delete o.products,(e=Object.assign(Object.assign({},e),{catalogOnlyData:o})).productId&&g.products){const t=l(g.products[e.productId]);(null==t?void 0:t.variants)&&delete t.variants,e=Object.assign(Object.assign({},e),{catalogOnlyData:o,productOnlyData:t})}C({type:t,data:e})};return t("div",{children:[t(j,{children:[e(u,{Icon:i,height:16,onClick:()=>{w("collections")}}),e(h,Object.assign({style:{color:s.content.secondary}},{children:g.name}))]}),t("div",{children:[t(I,{children:[P?e(o,{}):e(a,{isChecked:!!(null==k?void 0:k[y]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(k[t]){const d=null==g?void 0:g.products;d&&Object.keys(d).forEach((t=>{var e;const i=null===(e=d[t])||void 0===e?void 0:e.variants;i&&Object.keys(i).forEach((t=>o+=1))}));const l=null===(e=k[t])||void 0===e?void 0:e.products;return l&&Object.keys(l).forEach((t=>{var e;const o=null===(e=l[t])||void 0===e?void 0:e.variants;o&&Object.keys(o).forEach((t=>i+=1))})),i>0&&o!==i}return!1})(y),onValueChange:function(t){C(t?{type:"selected",data:{id:y,val:g}}:{type:"unselected",data:{id:y}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(d,{})})),e(m,{children:"All Products"})]}),Object.keys((null==E?void 0:E.products)||[]).length?Object.keys(E.products||[]).map((t=>e(b,{collectionId:y,isProductPartiallyChecked:A(t),productId:t,data:E.products[t],selectedData:k,selectedCollectionsDispatch:C,upliftAdditions:V,viewOnly:!!P},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(v,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))]})]})},b=o=>{const{collectionId:i,productId:d,data:l,selectedData:c,selectedCollectionsDispatch:n,upliftAdditions:r,viewOnly:s,isProductPartiallyChecked:a}=o,u=t=>{var e,o,l,n,r,s;if(!(null===(o=null===(e=null==c?void 0:c[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[d]))return!1;return!!(null===(s=null===(r=null===(n=null===(l=null==c?void 0:c[i])||void 0===l?void 0:l.products)||void 0===n?void 0:n[d])||void 0===r?void 0:r.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(k,{isVariant:!1,data:l,productId:d,collectionId:i,isSelected:!!(null===(p=null===(v=null==c?void 0:c[i])||void 0===v?void 0:v.products)||void 0===p?void 0:p[d]),isPartiallyChecked:a,selectedCollectionsDispatch:n,upliftAdditions:r,viewOnly:s},d),Object.keys(l.variants||[]).map((t=>e(k,{isVariant:!0,data:l.variants[t],variantId:t,productId:d,viewOnly:s,collectionId:i,isSelected:u(t),selectedCollectionsDispatch:n,upliftAdditions:r},t)))]});var v,p},k=i=>{const{isVariant:d,data:l,productId:c,collectionId:n,variantId:r,isSelected:s,selectedCollectionsDispatch:u,upliftAdditions:v,viewOnly:h,isPartiallyChecked:f}=i;return t(g,Object.assign({isVariant:d},{children:[h?e(o,{}):e(a,{isChecked:s,isPartiallyChecked:f||!1,onValueChange:function(t){d?t?v("variantSelected",{productId:c,variantId:r,collectionId:n,variant:l}):u({type:"variantUnselected",data:{productId:c,variantId:r,collectionId:n}}):t?v("productSelected",{productId:c,collectionId:n,product:l}):u({type:"productUnselected",data:{productId:c,collectionId:n}})}}),e("div",{children:e(p,{width:40,height:40,imageUrl:l.image,alt:"Item",borderRadius:4})}),e(m,{children:y(l.name,40,!0)})]}))};export{k as ProductCard,b as ProductGroup,O as ProductsScreen};
+import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import d from"../../assets/icons/box.svg.js";import c from"../../assets/icons/search.svg.js";import{cloneDeep as l}from"lodash";import{useContext as r,useState as s,useEffect as n}from"react";import{COLORS as a}from"../../constants/Theme.js";import{CheckBox as u}from"../checkBox/CheckBox.js";import{IconButton as p}from"../icon-button/IconButton.js";import{Input as v}from"../input/Input.js";import{BikShimmer as h}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as m}from"../shimmer-image/ShimmerImage.js";import{Spinner as y}from"../spinner/Spinner.js";import{BodyCaption as f,TitleRegular as g}from"../TypographyStyle.js";import{truncate as j}from"./collectionScreen.js";import{CollectionIdContext as I}from"./reducers.js";import{ProductScreenHeader as O,ProductScreenCollectionCardStyle as b,ProductCardStyle as k}from"./style.js";const C=m=>{const j=r(I),{data:k,collectionsDispatch:C,selectedData:x,selectedCollectionsDispatch:D,productFetcher:E,storeId:w,setScreen:P,setSaveDisabled:A}=m,[B,T]=s(""),[V,F]=s(!1),[U,z]=s(k);n((()=>{const t=setTimeout((()=>{B.length?(F(!0),m.searchFetcher(j,B).then((t=>{var e;const o=l(k);o.products={};for(const i of t)(null===(e=null==k?void 0:k.products)||void 0===e?void 0:e[i])&&(o.products[i]=k.products[i]);z(o),A(!1),F(!1)}))):z(k)}),800);return()=>clearTimeout(t)}),[B]);const R=k.isSmartCollection||!1,_=t=>{var e,o,i,d,c,l,r,s;let n=0,a=0;return!!((null===(o=null===(e=null==x?void 0:x[j])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(c=Object.keys((null===(d=null===(i=null==k?void 0:k.products)||void 0===i?void 0:i[t])||void 0===d?void 0:d.variants)||[]))||void 0===c||c.forEach((()=>a++)),Object.keys((null===(s=null===(r=null===(l=null==x?void 0:x[j])||void 0===l?void 0:l.products)||void 0===r?void 0:r[t])||void 0===s?void 0:s.variants)||[]).forEach((()=>n++)),n>0&&a!==n))};n((()=>{(null==k?void 0:k.products)||q()}),[]);const q=()=>{A(!0),E(j,w).then((t=>{Object.keys(t).length&&(C({type:"productsFetched",data:{collectionId:j,products:t}}),z(Object.assign(Object.assign({},U),{products:t}))),A(!1),F(!1)})).catch()},G=(t,e)=>{const o=l(k);if(delete o.products,(e=Object.assign(Object.assign({},e),{catalogOnlyData:o})).productId&&k.products){const t=l(k.products[e.productId]);(null==t?void 0:t.variants)&&delete t.variants,e=Object.assign(Object.assign({},e),{catalogOnlyData:o,productOnlyData:t})}D({type:t,data:e})};return t("div",{children:[t(O,{children:[e(p,{Icon:i,height:16,onClick:()=>{P("collections")}}),e(f,Object.assign({style:{color:a.content.secondary}},{children:k.name}))]}),e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(v,{rightIcon:{icon:()=>V?e(y,{size:"small",color:a.content.primary}):e(c,{})},id:"listInput",height:"24px",type:"text",value:B,onChangeText:t=>{T(t)},placeholder:"Search products..."})})),t("div",{children:[t(b,{children:[R?e(o,{}):e(u,{isChecked:!!(null==x?void 0:x[j]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(x[t]){const d=null==k?void 0:k.products;d&&Object.keys(d).forEach((t=>{var e;const i=null===(e=d[t])||void 0===e?void 0:e.variants;i&&Object.keys(i).forEach((t=>o+=1))}));const c=null===(e=x[t])||void 0===e?void 0:e.products;return c&&Object.keys(c).forEach((t=>{var e;const o=null===(e=c[t])||void 0===e?void 0:e.variants;o&&Object.keys(o).forEach((t=>i+=1))})),i>0&&o!==i}return!1})(j),onValueChange:function(t){D(t?{type:"selected",data:{id:j,val:k}}:{type:"unselected",data:{id:j}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(d,{})})),e(g,{children:"All Products"})]}),Object.keys((null==U?void 0:U.products)||[]).length&&!V?Object.keys(U.products||[]).map((t=>e(S,{collectionId:j,isProductPartiallyChecked:_(t),productId:t,data:U.products[t],selectedData:x,selectedCollectionsDispatch:D,upliftAdditions:G,viewOnly:!!R},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(h,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))]})]})},S=o=>{const{collectionId:i,productId:d,data:c,selectedData:l,selectedCollectionsDispatch:r,upliftAdditions:s,viewOnly:n,isProductPartiallyChecked:a}=o,u=t=>{var e,o,c,r,s,n;if(!(null===(o=null===(e=null==l?void 0:l[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[d]))return!1;return!!(null===(n=null===(s=null===(r=null===(c=null==l?void 0:l[i])||void 0===c?void 0:c.products)||void 0===r?void 0:r[d])||void 0===s?void 0:s.variants)||void 0===n?void 0:n[t])};return t("div",{children:[e(x,{isVariant:!1,data:c,productId:d,collectionId:i,isSelected:!!(null===(v=null===(p=null==l?void 0:l[i])||void 0===p?void 0:p.products)||void 0===v?void 0:v[d]),isPartiallyChecked:a,selectedCollectionsDispatch:r,upliftAdditions:s,viewOnly:n},d),Object.keys(c.variants||[]).map((t=>e(x,{isVariant:!0,data:c.variants[t],variantId:t,productId:d,viewOnly:n,collectionId:i,isSelected:u(t),selectedCollectionsDispatch:r,upliftAdditions:s},t)))]});var p,v},x=i=>{const{isVariant:d,data:c,productId:l,collectionId:r,variantId:s,isSelected:n,selectedCollectionsDispatch:a,upliftAdditions:p,viewOnly:v,isPartiallyChecked:h}=i;return t(k,Object.assign({isVariant:d},{children:[v?e(o,{}):e(u,{isChecked:n,isPartiallyChecked:h||!1,onValueChange:function(t){d?t?p("variantSelected",{productId:l,variantId:s,collectionId:r,variant:c}):a({type:"variantUnselected",data:{productId:l,variantId:s,collectionId:r}}):t?p("productSelected",{productId:l,collectionId:r,product:c}):a({type:"productUnselected",data:{productId:l,collectionId:r}})}}),e("div",{children:e(m,{width:40,height:40,imageUrl:c.image,alt:"Item",borderRadius:4})}),e(g,{children:j(c.name,40,!0)})]}))};export{x as ProductCard,S as ProductGroup,C as ProductsScreen};

package/package.json

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