@bikdotai/bik-component-library 0.0.159-beta.6 → 0.0.159-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,8 @@ export type ProductFetcherReturn = Promise<{
35
35
  [key: string]: Product;
36
36
  }>;
37
37
  export interface ProductPickerInterface {
38
- searchFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
38
+ searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
39
+ searchFetcher: (storeId: string, query: string) => Promise<SelectedItems>;
39
40
  collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
40
41
  productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
41
42
  storeId: string;
@@ -1 +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=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})]})})}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/search.svg.js"),c=require("react"),s=require("../../constants/Theme.js"),o=require("../button/Button.js"),r=require("../input/Input.js"),l=require("../modals/styledModal.js"),n=require("../spinner/Spinner.js"),i=require("../tag/Tag.js"),d=require("./collectionScreen.js"),a=require("./productScreen.js"),u=require("./reducers.js"),h=require("./searchScreen.js"),p=require("./selectedScreen.js"),j=require("./style.js");exports.ProductPickerModal=S=>{const{storeId:x,selectedItems:v,onClose:y,visible:C,zIndex:g,limit:b}=S,[f,q]=c.useReducer(u.collectionsReducer,{}),[I,P]=c.useState("collections"),[T,m]=c.useState(""),[E,O]=c.useState(0),[F,k]=c.useState(!1),[D,B]=c.useState(0),[w,R]=c.useState(""),[M,z]=c.useState(!1),[L,$]=c.useState(),[A,G]=c.useReducer(u.selectedColectionsReducer,Object.keys(v).length>0?v:{});c.useEffect((()=>{k(!0),S.collectionFetcher(E,x).then((e=>{q({type:"fetched",data:(null==e?void 0:e.collections)||{}}),k(!1),O((e=>e+1))})).catch()}),[]),c.useEffect((()=>{let e=0;Object.keys(A||[]).forEach((t=>{var c;Object.keys((null===(c=A[t])||void 0===c?void 0:c.products)||[]).forEach((c=>{var s,o;Object.keys((null===(o=null===(s=A[t].products)||void 0===s?void 0:s[c])||void 0===o?void 0:o.variants)||[]).forEach((()=>{e+=1}))}))})),B(e)})),c.useEffect((()=>{var e;T&&!(null===(e=null==f?void 0:f[T])||void 0===e?void 0:e.products)&&(k(!0),S.productFetcher(T,x).then((e=>{Object.keys(e).length&&q({type:"productsFetched",data:{collectionId:T,products:e}}),k(!1)})).catch())}),[T]),c.useEffect((()=>{const e=setTimeout((()=>{w.length&&(z(!0),S.searchFetcher(x,w).then((e=>{$(e),P("searchProducts"),k(!1),z(!1)})))}),800);return()=>clearTimeout(e)}),[w]);const _=()=>{G({type:"reset",data:{}})};return e.jsx(l.StyledModal,Object.assign({zIndex:g,open:C,onClose:()=>{y(),_()},headingTitle:"collections"===I||"products"===I?"Select Products":"view"===I?"Selected Products":"searchProducts"===I?"Searched Products":void 0,footerShadow:!0,centralContainerStyles:{width:"480px"},primaryButton:{buttonText:F?"Loading...":"Add",disabled:F||b&&D>b||!1,onClick:()=>{S.onAdd(A,D),_()}},footerLeftCustomElement:b&&D>b?e.jsx(i.Tag,{tagText:`You can only select ${b} products`,type:"negative"}):D>0?e.jsx(o.Button,{onClick:()=>{P("view")},buttonText:`${D} products selected`,buttonType:"tertiaryGray"}):e.jsx(o.Button,{disabled:!0,buttonText:`${D} products selected`,buttonType:"tertiaryGray"})},{children:e.jsxs(j.ContainerStyle,{children:[("collections"===I||"searchProducts"===I)&&e.jsx("div",Object.assign({style:{padding:16,paddingTop:0,height:"60px",borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(r.Input,{rightIcon:{icon:()=>M?e.jsx(n.Spinner,{size:"small",color:s.COLORS.content.primary}):e.jsx(t.default,{})},id:"listInput",height:"24px",type:"text",value:w,onChangeText:e=>{R(e)},placeholder:"Search products..."})})),e.jsxs(j.ScrollContainerStyle,{children:["collections"===I&&e.jsx(d.CollectionsScreen,{collections:f,selectedCollectionsDispatch:G,setCollectionId:m,setScreen:P,selectedCollections:A,collectionFetcher:S.collectionFetcher,storeId:x,collectionsDispatch:q,setSaveDisabled:k,pagingControls:{curPage:E,setCurPage:O}}),"products"===I&&T&&e.jsx(u.CollectionIdContext.Provider,Object.assign({value:T},{children:e.jsx(a.ProductsScreen,{productFetcher:S.productFetcher,setScreen:P,storeId:x,data:f[T],collectionsDispatch:q,selectedCollectionsDispatch:G,selectedData:A,setSaveDisabled:k,searchInCollectionFetcher:S.searchInCollectionFetcher})})),"view"===I&&e.jsx(p.SelectedScreen,{selectedCollections:A||{},selectedCollectionsDispatch:G,setScreen:P,collections:f}),"searchProducts"===I&&e.jsx(h.SearchScreen,{selectedCollections:A||{},searchedCollections:L||{},selectedCollectionsDispatch:G,setScreen:P,collections:f,onBackPress:()=>{R(""),$({})}})]})]})}))};
@@ -6,7 +6,7 @@ interface ProductsScreenInterface {
6
6
  collectionsDispatch: React.Dispatch<CollectionsActions>;
7
7
  selectedData: SelectedItems;
8
8
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
9
- searchFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
9
+ searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
10
10
  productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
11
11
  storeId: string;
12
12
  setScreen: React.Dispatch<React.SetStateAction<string>>;
@@ -19,9 +19,9 @@ interface ProductGroupInterface {
19
19
  data: Product;
20
20
  selectedData: SelectedItems;
21
21
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
22
- upliftAdditions: any;
23
22
  viewOnly: boolean;
24
23
  isProductPartiallyChecked?: boolean;
24
+ upliftAdditions: any;
25
25
  }
26
26
  export declare const ProductGroup: (props: ProductGroupInterface) => JSX.Element;
27
27
  interface ProductCardInterface {
@@ -32,9 +32,9 @@ interface ProductCardInterface {
32
32
  variantId?: string;
33
33
  isSelected: boolean;
34
34
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
35
- upliftAdditions: any;
36
35
  viewOnly: boolean;
37
36
  isPartiallyChecked?: boolean;
37
+ upliftAdditions: any;
38
38
  }
39
39
  export declare const ProductCard: (props: ProductCardInterface) => JSX.Element;
40
40
  export {};
@@ -1 +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"),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(b,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)))]})]})};
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"),o=require("../../assets/icons/search.svg.js"),s=require("lodash"),d=require("react"),r=require("../../constants/Theme.js"),c=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"),y=require("./utility.js");const m=t=>{const{collectionId:i,productId:o,data:s,selectedData:d,selectedCollectionsDispatch:r,viewOnly:c,upliftAdditions:l,isProductPartiallyChecked:n}=t,a=e=>{var t,s,r,c,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===(c=null===(r=null==d?void 0:d[i])||void 0===r?void 0:r.products)||void 0===c?void 0:c[o])||void 0===l?void 0:l.variants)||void 0===n?void 0:n[e])};return e.jsxs("div",{children:[e.jsx(I,{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:r,upliftAdditions:l,viewOnly:c},o),Object.keys(s.variants||[]).map((t=>e.jsx(I,{isVariant:!0,data:s.variants[t],variantId:t,productId:o,viewOnly:c,upliftAdditions:l,collectionId:i,isSelected:a(t),selectedCollectionsDispatch:r},t)))]});var u,v},I=t=>{const{isVariant:i,data:o,productId:s,collectionId:d,variantId:r,isSelected:l,selectedCollectionsDispatch:n,viewOnly:a,upliftAdditions:v,isPartiallyChecked:j}=t;return e.jsxs(x.ProductCardStyle,Object.assign({isVariant:i},{children:[a?e.jsx(e.Fragment,{}):e.jsx(c.CheckBox,{isChecked:l,isPartiallyChecked:j||!1,onValueChange:function(e){i?e?v("variantSelected",{productId:s,variantId:r,collectionId:d,variant:o}):n({type:"variantUnselected",data:{productId:s,variantId:r,collectionId:d}}):e?v("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=I,exports.ProductGroup=m,exports.ProductsScreen=u=>{const h=d.useContext(j.CollectionIdContext),{data:I,collectionsDispatch:g,selectedData:C,selectedCollectionsDispatch:S,productFetcher:f,storeId:O,setScreen:b,setSaveDisabled:k}=u,[q,P]=d.useState(""),[E,D]=d.useState(!1),[B,w]=d.useState(I);d.useEffect((()=>{const e=setTimeout((()=>{q.length?(D(!0),u.searchInCollectionFetcher(O,h,q).then((e=>{var t;const i=s.cloneDeep(I);i.products={};for(const o of e)(null===(t=null==I?void 0:I.products)||void 0===t?void 0:t[o])&&(i.products[o]=I.products[o]);w(i),k(!1),D(!1)}))):w(I)}),800);return()=>clearTimeout(e)}),[q]);const T=I.isSmartCollection||!1,A=e=>{var t,i,o,s,d,r,c,l;let n=0,a=0;return!!((null===(i=null===(t=null==C?void 0:C[h])||void 0===t?void 0:t.products)||void 0===i?void 0:i[e])&&(null===(d=Object.keys((null===(s=null===(o=null==I?void 0:I.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===(c=null===(r=null==C?void 0:C[h])||void 0===r?void 0:r.products)||void 0===c?void 0:c[e])||void 0===l?void 0:l.variants)||[]).forEach((()=>n++)),n>0&&a!==n))};d.useEffect((()=>{(null==I?void 0:I.products)||V()}),[]);const V=()=>{k(!0),f(h,O).then((e=>{Object.keys(e).length&&(g({type:"productsFetched",data:{collectionId:h,products:e}}),w(Object.assign(Object.assign({},B),{products:e}))),k(!1),D(!1)})).catch()},F=(e,t)=>{const i=y.liftTheStateUp(t,I);S({type:e,data:i})};return e.jsxs("div",{children:[e.jsxs(x.ProductScreenHeader,{children:[e.jsx(l.IconButton,{Icon:t.default,height:16,onClick:()=>{b("collections")}}),e.jsx(p.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:I.name}))]}),e.jsx("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(n.Input,{rightIcon:{icon:()=>E?e.jsx(v.Spinner,{size:"small",color:r.COLORS.content.primary}):e.jsx(o.default,{})},id:"listInput",height:"24px",type:"text",value:q,onChangeText:e=>{P(e)},placeholder:"Search products in this collection..."})})),e.jsxs("div",{children:[e.jsxs(x.ProductScreenCollectionCardStyle,{children:[T?e.jsx(e.Fragment,{}):e.jsx(c.CheckBox,{isChecked:!!(null==C?void 0:C[h]),isPartiallyChecked:(e=>{var t;let i=0,o=0;if(C[e]){const s=null==I?void 0:I.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=C[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){S(e?{type:"selected",data:{id:h,val:I}}:{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==B?void 0:B.products)||[]).length&&!E?Object.keys(B.products||[]).map((t=>e.jsx(m,{collectionId:h,isProductPartiallyChecked:A(t),productId:t,data:B.products[t],selectedData:C,selectedCollectionsDispatch:S,viewOnly:!!T,upliftAdditions:F},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)))]})]})};
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ import { Collection, SelectedItems } from '.';
3
+ import { SelectedCollectionsActions } from './reducers';
4
+ interface SearchScreenInterface {
5
+ selectedCollections: SelectedItems;
6
+ searchedCollections: SelectedItems;
7
+ selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
8
+ setScreen: React.Dispatch<React.SetStateAction<string>>;
9
+ collections: {
10
+ [key: string]: Collection;
11
+ };
12
+ onBackPress: () => void;
13
+ }
14
+ export declare const SearchScreen: (props: SearchScreenInterface) => JSX.Element;
15
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../assets/icons/arrow_left.svg.js"),t=require("../icon-button/IconButton.js"),l=require("../TypographyStyle.js"),i=require("./productScreen.js"),r=require("./style.js"),s=require("./utility.js");exports.SearchScreen=d=>{const{selectedCollections:c,searchedCollections:n,selectedCollectionsDispatch:u,setScreen:a,collections:v,onBackPress:p}=d,j=(e,o)=>{var t,l,i,r,s,d,n,u,a;let p=0,j=0;return!!((null===(l=null===(t=null==c?void 0:c[e])||void 0===t?void 0:t.products)||void 0===l?void 0:l[o])&&(null===(d=Object.keys((null===(s=null===(r=null===(i=null==v?void 0:v[e])||void 0===i?void 0:i.products)||void 0===r?void 0:r[o])||void 0===s?void 0:s.variants)||[]))||void 0===d||d.forEach((()=>j++)),Object.keys((null===(a=null===(u=null===(n=null==c?void 0:c[e])||void 0===n?void 0:n.products)||void 0===u?void 0:u[o])||void 0===a?void 0:a.variants)||[]).forEach((()=>p++)),p>0&&j!==p))};return e.jsxs("div",{children:[e.jsxs(r.SelectedScreenHeader,{children:[e.jsx(t.IconButton,{Icon:o.default,onClick:()=>{a("collections"),p()}}),e.jsx(l.BodyCaption,{children:"Searched Products"})]}),e.jsx("div",{children:Object.keys(n).map((o=>{var t;return Object.keys((null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||[]).map((t=>{let l=!1;return(null==n?void 0:n.isCustom)&&(l=!0),e.jsx(i.ProductGroup,{collectionId:o,upliftAdditions:(e,t)=>((e,o,t)=>{const l=s.liftTheStateUp(t,n[e]);u({type:o,data:l})})(o,e,t),productId:t,data:n[o].products[t],isProductPartiallyChecked:j(o,t),selectedData:c,selectedCollectionsDispatch:u,viewOnly:l},t)}))}))})]})};
@@ -4,7 +4,6 @@ import { SelectedCollectionsActions } from './reducers';
4
4
  interface SelectedScreenInterface {
5
5
  selectedCollections: SelectedItems;
6
6
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
7
- upliftAdditions: any;
8
7
  setScreen: React.Dispatch<React.SetStateAction<string>>;
9
8
  collections: {
10
9
  [key: string]: Collection;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../assets/icons/arrow_left.svg.js"),l=require("../icon-button/IconButton.js"),t=require("../TypographyStyle.js"),i=require("./productScreen.js"),d=require("./style.js");exports.SelectedScreen=r=>{const{selectedCollections:s,selectedCollectionsDispatch:c,upliftAdditions:n,setScreen:u,collections:v}=r,a=(e,o)=>{var l,t,i,d,r,c,n,u,a;let p=0,j=0;return!!((null===(t=null===(l=null==s?void 0:s[e])||void 0===l?void 0:l.products)||void 0===t?void 0:t[o])&&(null===(c=Object.keys((null===(r=null===(d=null===(i=null==v?void 0:v[e])||void 0===i?void 0:i.products)||void 0===d?void 0:d[o])||void 0===r?void 0:r.variants)||[]))||void 0===c||c.forEach((()=>j++)),Object.keys((null===(a=null===(u=null===(n=null==s?void 0:s[e])||void 0===n?void 0:n.products)||void 0===u?void 0:u[o])||void 0===a?void 0:a.variants)||[]).forEach((()=>p++)),p>0&&j!==p))};return e.jsxs("div",{children:[e.jsxs(d.SelectedScreenHeader,{children:[e.jsx(l.IconButton,{Icon:o.default,onClick:()=>{u("collections")}}),e.jsx(t.BodyCaption,{children:"Selected Products"})]}),e.jsx("div",{children:Object.keys(s).map((o=>{var l;return Object.keys((null===(l=null==s?void 0:s[o])||void 0===l?void 0:l.products)||[]).map((l=>{let t=!1;return(null==s?void 0:s.isCustom)&&(t=!0),e.jsx(i.ProductGroup,{collectionId:o,productId:l,data:s[o].products[l],isProductPartiallyChecked:a(o,l),selectedData:s,selectedCollectionsDispatch:c,upliftAdditions:n,viewOnly:t},l)}))}))})]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../assets/icons/arrow_left.svg.js"),l=require("../icon-button/IconButton.js"),t=require("../TypographyStyle.js"),i=require("./productScreen.js"),d=require("./style.js");exports.SelectedScreen=r=>{const{selectedCollections:s,selectedCollectionsDispatch:c,setScreen:n,collections:u}=r,v=(e,o)=>{var l,t,i,d,r,c,n,v,a;let p=0,j=0;return!!((null===(t=null===(l=null==s?void 0:s[e])||void 0===l?void 0:l.products)||void 0===t?void 0:t[o])&&(null===(c=Object.keys((null===(r=null===(d=null===(i=null==u?void 0:u[e])||void 0===i?void 0:i.products)||void 0===d?void 0:d[o])||void 0===r?void 0:r.variants)||[]))||void 0===c||c.forEach((()=>j++)),Object.keys((null===(a=null===(v=null===(n=null==s?void 0:s[e])||void 0===n?void 0:n.products)||void 0===v?void 0:v[o])||void 0===a?void 0:a.variants)||[]).forEach((()=>p++)),p>0&&j!==p))};return e.jsxs("div",{children:[e.jsxs(d.SelectedScreenHeader,{children:[e.jsx(l.IconButton,{Icon:o.default,onClick:()=>{n("collections")}}),e.jsx(t.BodyCaption,{children:"Selected Products"})]}),e.jsx("div",{children:Object.keys(s).map((o=>{var l;return Object.keys((null===(l=null==s?void 0:s[o])||void 0===l?void 0:l.products)||[]).map((l=>{let t=!1;return(null==s?void 0:s.isCustom)&&(t=!0),e.jsx(i.ProductGroup,{upliftAdditions:null,collectionId:o,productId:l,data:s[o].products[l],isProductPartiallyChecked:v(o,l),selectedData:s,selectedCollectionsDispatch:c,viewOnly:t},l)}))}))})]})};
@@ -0,0 +1 @@
1
+ export declare const liftTheStateUp: (payload: any, data: any) => any;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash");exports.liftTheStateUp=(t,a)=>{const s=e.cloneDeep(a);if(delete s.products,(t=Object.assign(Object.assign({},t),{catalogOnlyData:s})).productId&&a.products){const c=e.cloneDeep(a.products[t.productId]);(null==c?void 0:c.variants)&&delete c.variants,t=Object.assign(Object.assign({},t),{catalogOnlyData:s,productOnlyData:c})}return t};
@@ -35,7 +35,8 @@ export type ProductFetcherReturn = Promise<{
35
35
  [key: string]: Product;
36
36
  }>;
37
37
  export interface ProductPickerInterface {
38
- searchFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
38
+ searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
39
+ searchFetcher: (storeId: string, query: string) => Promise<SelectedItems>;
39
40
  collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
40
41
  productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
41
42
  storeId: string;
@@ -1 +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 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};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../assets/icons/search.svg.js";import{useReducer as c,useState as s,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{Button as i}from"../button/Button.js";import{Input as n}from"../input/Input.js";import{StyledModal as d}from"../modals/styledModal.js";import{Spinner as a}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as h}from"./collectionScreen.js";import{ProductsScreen as u}from"./productScreen.js";import{collectionsReducer as m,selectedColectionsReducer as v,CollectionIdContext as g}from"./reducers.js";import{SearchScreen as y}from"./searchScreen.js";import{SelectedScreen as f}from"./selectedScreen.js";import{ContainerStyle as j,ScrollContainerStyle as b}from"./style.js";const C=C=>{const{storeId:S,selectedItems:x,onClose:I,visible:T,zIndex:P,limit:F}=C,[D,k]=c(m,{}),[O,E]=s("collections"),[w,B]=s(""),[z,$]=s(0),[A,G]=s(!1),[L,M]=s(0),[Y,q]=s(""),[H,J]=s(!1),[K,N]=s(),[Q,R]=c(v,Object.keys(x).length>0?x:{});r((()=>{G(!0),C.collectionFetcher(z,S).then((e=>{k({type:"fetched",data:(null==e?void 0:e.collections)||{}}),G(!1),$((e=>e+1))})).catch()}),[]),r((()=>{let e=0;Object.keys(Q||[]).forEach((t=>{var o;Object.keys((null===(o=Q[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,s;Object.keys((null===(s=null===(c=Q[t].products)||void 0===c?void 0:c[o])||void 0===s?void 0:s.variants)||[]).forEach((()=>{e+=1}))}))})),M(e)})),r((()=>{var e;w&&!(null===(e=null==D?void 0:D[w])||void 0===e?void 0:e.products)&&(G(!0),C.productFetcher(w,S).then((e=>{Object.keys(e).length&&k({type:"productsFetched",data:{collectionId:w,products:e}}),G(!1)})).catch())}),[w]),r((()=>{const e=setTimeout((()=>{Y.length&&(J(!0),C.searchFetcher(S,Y).then((e=>{N(e),E("searchProducts"),G(!1),J(!1)})))}),800);return()=>clearTimeout(e)}),[Y]);const U=()=>{R({type:"reset",data:{}})};return e(d,Object.assign({zIndex:P,open:T,onClose:()=>{I(),U()},headingTitle:"collections"===O||"products"===O?"Select Products":"view"===O?"Selected Products":"searchProducts"===O?"Searched Products":void 0,footerShadow:!0,centralContainerStyles:{width:"480px"},primaryButton:{buttonText:A?"Loading...":"Add",disabled:A||F&&L>F||!1,onClick:()=>{C.onAdd(Q,L),U()}},footerLeftCustomElement:F&&L>F?e(p,{tagText:`You can only select ${F} products`,type:"negative"}):e(i,L>0?{onClick:()=>{E("view")},buttonText:`${L} products selected`,buttonType:"tertiaryGray"}:{disabled:!0,buttonText:`${L} products selected`,buttonType:"tertiaryGray"})},{children:t(j,{children:[("collections"===O||"searchProducts"===O)&&e("div",Object.assign({style:{padding:16,paddingTop:0,height:"60px",borderBottom:"1px solid #E0E0E0"}},{children:e(n,{rightIcon:{icon:()=>H?e(a,{size:"small",color:l.content.primary}):e(o,{})},id:"listInput",height:"24px",type:"text",value:Y,onChangeText:e=>{q(e)},placeholder:"Search products..."})})),t(b,{children:["collections"===O&&e(h,{collections:D,selectedCollectionsDispatch:R,setCollectionId:B,setScreen:E,selectedCollections:Q,collectionFetcher:C.collectionFetcher,storeId:S,collectionsDispatch:k,setSaveDisabled:G,pagingControls:{curPage:z,setCurPage:$}}),"products"===O&&w&&e(g.Provider,Object.assign({value:w},{children:e(u,{productFetcher:C.productFetcher,setScreen:E,storeId:S,data:D[w],collectionsDispatch:k,selectedCollectionsDispatch:R,selectedData:Q,setSaveDisabled:G,searchInCollectionFetcher:C.searchInCollectionFetcher})})),"view"===O&&e(f,{selectedCollections:Q||{},selectedCollectionsDispatch:R,setScreen:E,collections:D}),"searchProducts"===O&&e(y,{selectedCollections:Q||{},searchedCollections:K||{},selectedCollectionsDispatch:R,setScreen:E,collections:D,onBackPress:()=>{q(""),N({})}})]})]})}))};export{C as ProductPickerModal};
@@ -6,7 +6,7 @@ interface ProductsScreenInterface {
6
6
  collectionsDispatch: React.Dispatch<CollectionsActions>;
7
7
  selectedData: SelectedItems;
8
8
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
9
- searchFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
9
+ searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
10
10
  productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
11
11
  storeId: string;
12
12
  setScreen: React.Dispatch<React.SetStateAction<string>>;
@@ -19,9 +19,9 @@ interface ProductGroupInterface {
19
19
  data: Product;
20
20
  selectedData: SelectedItems;
21
21
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
22
- upliftAdditions: any;
23
22
  viewOnly: boolean;
24
23
  isProductPartiallyChecked?: boolean;
24
+ upliftAdditions: any;
25
25
  }
26
26
  export declare const ProductGroup: (props: ProductGroupInterface) => JSX.Element;
27
27
  interface ProductCardInterface {
@@ -32,9 +32,9 @@ interface ProductCardInterface {
32
32
  variantId?: string;
33
33
  isSelected: boolean;
34
34
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
35
- upliftAdditions: any;
36
35
  viewOnly: boolean;
37
36
  isPartiallyChecked?: boolean;
37
+ upliftAdditions: any;
38
38
  }
39
39
  export declare const ProductCard: (props: ProductCardInterface) => JSX.Element;
40
40
  export {};
@@ -1 +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 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(w,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};
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 l from"../../assets/icons/search.svg.js";import{cloneDeep as c}from"lodash";import{useContext as r,useState as n,useEffect as s}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 j}from"../TypographyStyle.js";import{truncate as I}from"./collectionScreen.js";import{CollectionIdContext as g}from"./reducers.js";import{ProductScreenHeader as b,ProductScreenCollectionCardStyle as k,ProductCardStyle as C}from"./style.js";import{liftTheStateUp as O}from"./utility.js";const S=m=>{const I=r(g),{data:C,collectionsDispatch:S,selectedData:E,selectedCollectionsDispatch:D,productFetcher:w,storeId:P,setScreen:A,setSaveDisabled:B}=m,[T,V]=n(""),[F,U]=n(!1),[z,R]=n(C);s((()=>{const t=setTimeout((()=>{T.length?(U(!0),m.searchInCollectionFetcher(P,I,T).then((t=>{var e;const o=c(C);o.products={};for(const i of t)(null===(e=null==C?void 0:C.products)||void 0===e?void 0:e[i])&&(o.products[i]=C.products[i]);R(o),B(!1),U(!1)}))):R(C)}),800);return()=>clearTimeout(t)}),[T]);const _=C.isSmartCollection||!1,q=t=>{var e,o,i,d,l,c,r,n;let s=0,a=0;return!!((null===(o=null===(e=null==E?void 0:E[I])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(l=Object.keys((null===(d=null===(i=null==C?void 0:C.products)||void 0===i?void 0:i[t])||void 0===d?void 0:d.variants)||[]))||void 0===l||l.forEach((()=>a++)),Object.keys((null===(n=null===(r=null===(c=null==E?void 0:E[I])||void 0===c?void 0:c.products)||void 0===r?void 0:r[t])||void 0===n?void 0:n.variants)||[]).forEach((()=>s++)),s>0&&a!==s))};s((()=>{(null==C?void 0:C.products)||G()}),[]);const G=()=>{B(!0),w(I,P).then((t=>{Object.keys(t).length&&(S({type:"productsFetched",data:{collectionId:I,products:t}}),R(Object.assign(Object.assign({},z),{products:t}))),B(!1),U(!1)})).catch()},H=(t,e)=>{const o=O(e,C);D({type:t,data:o})};return t("div",{children:[t(b,{children:[e(p,{Icon:i,height:16,onClick:()=>{A("collections")}}),e(f,Object.assign({style:{color:a.content.secondary}},{children:C.name}))]}),e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(v,{rightIcon:{icon:()=>F?e(y,{size:"small",color:a.content.primary}):e(l,{})},id:"listInput",height:"24px",type:"text",value:T,onChangeText:t=>{V(t)},placeholder:"Search products in this collection..."})})),t("div",{children:[t(k,{children:[_?e(o,{}):e(u,{isChecked:!!(null==E?void 0:E[I]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(E[t]){const d=null==C?void 0:C.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=E[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})(I),onValueChange:function(t){D(t?{type:"selected",data:{id:I,val:C}}:{type:"unselected",data:{id:I}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(d,{})})),e(j,{children:"All Products"})]}),Object.keys((null==z?void 0:z.products)||[]).length&&!F?Object.keys(z.products||[]).map((t=>e(x,{collectionId:I,isProductPartiallyChecked:q(t),productId:t,data:z.products[t],selectedData:E,selectedCollectionsDispatch:D,viewOnly:!!_,upliftAdditions:H},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)))]})]})},x=o=>{const{collectionId:i,productId:d,data:l,selectedData:c,selectedCollectionsDispatch:r,viewOnly:n,upliftAdditions:s,isProductPartiallyChecked:a}=o,u=t=>{var e,o,l,r,n,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===(n=null===(r=null===(l=null==c?void 0:c[i])||void 0===l?void 0:l.products)||void 0===r?void 0:r[d])||void 0===n?void 0:n.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(E,{isVariant:!1,data:l,productId:d,collectionId:i,isSelected:!!(null===(v=null===(p=null==c?void 0:c[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(l.variants||[]).map((t=>e(E,{isVariant:!0,data:l.variants[t],variantId:t,productId:d,viewOnly:n,upliftAdditions:s,collectionId:i,isSelected:u(t),selectedCollectionsDispatch:r},t)))]});var p,v},E=i=>{const{isVariant:d,data:l,productId:c,collectionId:r,variantId:n,isSelected:s,selectedCollectionsDispatch:a,viewOnly:p,upliftAdditions:v,isPartiallyChecked:h}=i;return t(C,Object.assign({isVariant:d},{children:[p?e(o,{}):e(u,{isChecked:s,isPartiallyChecked:h||!1,onValueChange:function(t){d?t?v("variantSelected",{productId:c,variantId:n,collectionId:r,variant:l}):a({type:"variantUnselected",data:{productId:c,variantId:n,collectionId:r}}):t?v("productSelected",{productId:c,collectionId:r,product:l}):a({type:"productUnselected",data:{productId:c,collectionId:r}})}}),e("div",{children:e(m,{width:40,height:40,imageUrl:l.image,alt:"Item",borderRadius:4})}),e(j,{children:I(l.name,40,!0)})]}))};export{E as ProductCard,x as ProductGroup,S as ProductsScreen};
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ import { Collection, SelectedItems } from '.';
3
+ import { SelectedCollectionsActions } from './reducers';
4
+ interface SearchScreenInterface {
5
+ selectedCollections: SelectedItems;
6
+ searchedCollections: SelectedItems;
7
+ selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
8
+ setScreen: React.Dispatch<React.SetStateAction<string>>;
9
+ collections: {
10
+ [key: string]: Collection;
11
+ };
12
+ onBackPress: () => void;
13
+ }
14
+ export declare const SearchScreen: (props: SearchScreenInterface) => JSX.Element;
15
+ export {};
@@ -0,0 +1 @@
1
+ import{jsxs as o,jsx as t}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 e}from"../TypographyStyle.js";import{ProductGroup as r}from"./productScreen.js";import{SelectedScreenHeader as d}from"./style.js";import{liftTheStateUp as c}from"./utility.js";const n=n=>{const{selectedCollections:s,searchedCollections:u,selectedCollectionsDispatch:v,setScreen:a,collections:p,onBackPress:m}=n,h=(o,t)=>{var l,i,e,r,d,c,n,u,v;let a=0,m=0;return!!((null===(i=null===(l=null==s?void 0:s[o])||void 0===l?void 0:l.products)||void 0===i?void 0:i[t])&&(null===(c=Object.keys((null===(d=null===(r=null===(e=null==p?void 0:p[o])||void 0===e?void 0:e.products)||void 0===r?void 0:r[t])||void 0===d?void 0:d.variants)||[]))||void 0===c||c.forEach((()=>m++)),Object.keys((null===(v=null===(u=null===(n=null==s?void 0:s[o])||void 0===n?void 0:n.products)||void 0===u?void 0:u[t])||void 0===v?void 0:v.variants)||[]).forEach((()=>a++)),a>0&&m!==a))};return o("div",{children:[o(d,{children:[t(i,{Icon:l,onClick:()=>{a("collections"),m()}}),t(e,{children:"Searched Products"})]}),t("div",{children:Object.keys(u).map((o=>{var l;return Object.keys((null===(l=null==u?void 0:u[o])||void 0===l?void 0:l.products)||[]).map((l=>{let i=!1;return(null==u?void 0:u.isCustom)&&(i=!0),t(r,{collectionId:o,upliftAdditions:(t,l)=>((o,t,l)=>{const i=c(l,u[o]);v({type:t,data:i})})(o,t,l),productId:l,data:u[o].products[l],isProductPartiallyChecked:h(o,l),selectedData:s,selectedCollectionsDispatch:v,viewOnly:i},l)}))}))})]})};export{n as SearchScreen};
@@ -4,7 +4,6 @@ import { SelectedCollectionsActions } from './reducers';
4
4
  interface SelectedScreenInterface {
5
5
  selectedCollections: SelectedItems;
6
6
  selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
7
- upliftAdditions: any;
8
7
  setScreen: React.Dispatch<React.SetStateAction<string>>;
9
8
  collections: {
10
9
  [key: string]: Collection;
@@ -1 +1 @@
1
- import{jsxs as o,jsx as l}from"react/jsx-runtime";import t from"../../assets/icons/arrow_left.svg.js";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as e}from"../TypographyStyle.js";import{ProductGroup as d}from"./productScreen.js";import{SelectedScreenHeader as r}from"./style.js";const c=c=>{const{selectedCollections:n,selectedCollectionsDispatch:s,upliftAdditions:u,setScreen:v,collections:a}=c,p=(o,l)=>{var t,i,e,d,r,c,s,u,v;let p=0,m=0;return!!((null===(i=null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||void 0===i?void 0:i[l])&&(null===(c=Object.keys((null===(r=null===(d=null===(e=null==a?void 0:a[o])||void 0===e?void 0:e.products)||void 0===d?void 0:d[l])||void 0===r?void 0:r.variants)||[]))||void 0===c||c.forEach((()=>m++)),Object.keys((null===(v=null===(u=null===(s=null==n?void 0:n[o])||void 0===s?void 0:s.products)||void 0===u?void 0:u[l])||void 0===v?void 0:v.variants)||[]).forEach((()=>p++)),p>0&&m!==p))};return o("div",{children:[o(r,{children:[l(i,{Icon:t,onClick:()=>{v("collections")}}),l(e,{children:"Selected Products"})]}),l("div",{children:Object.keys(n).map((o=>{var t;return Object.keys((null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||[]).map((t=>{let i=!1;return(null==n?void 0:n.isCustom)&&(i=!0),l(d,{collectionId:o,productId:t,data:n[o].products[t],isProductPartiallyChecked:p(o,t),selectedData:n,selectedCollectionsDispatch:s,upliftAdditions:u,viewOnly:i},t)}))}))})]})};export{c as SelectedScreen};
1
+ import{jsxs as o,jsx as l}from"react/jsx-runtime";import t from"../../assets/icons/arrow_left.svg.js";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as e}from"../TypographyStyle.js";import{ProductGroup as d}from"./productScreen.js";import{SelectedScreenHeader as r}from"./style.js";const c=c=>{const{selectedCollections:n,selectedCollectionsDispatch:s,setScreen:u,collections:v}=c,a=(o,l)=>{var t,i,e,d,r,c,s,u,a;let p=0,m=0;return!!((null===(i=null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||void 0===i?void 0:i[l])&&(null===(c=Object.keys((null===(r=null===(d=null===(e=null==v?void 0:v[o])||void 0===e?void 0:e.products)||void 0===d?void 0:d[l])||void 0===r?void 0:r.variants)||[]))||void 0===c||c.forEach((()=>m++)),Object.keys((null===(a=null===(u=null===(s=null==n?void 0:n[o])||void 0===s?void 0:s.products)||void 0===u?void 0:u[l])||void 0===a?void 0:a.variants)||[]).forEach((()=>p++)),p>0&&m!==p))};return o("div",{children:[o(r,{children:[l(i,{Icon:t,onClick:()=>{u("collections")}}),l(e,{children:"Selected Products"})]}),l("div",{children:Object.keys(n).map((o=>{var t;return Object.keys((null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||[]).map((t=>{let i=!1;return(null==n?void 0:n.isCustom)&&(i=!0),l(d,{upliftAdditions:null,collectionId:o,productId:t,data:n[o].products[t],isProductPartiallyChecked:a(o,t),selectedData:n,selectedCollectionsDispatch:s,viewOnly:i},t)}))}))})]})};export{c as SelectedScreen};
@@ -0,0 +1 @@
1
+ export declare const liftTheStateUp: (payload: any, data: any) => any;
@@ -0,0 +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};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.159-beta.6",
3
+ "version": "0.0.159-beta.8",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",