@bikdotai/bik-component-library 0.0.159-beta.6 → 0.0.159-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/product-picker-v2/modal.d.ts +2 -1
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/product-picker-v2/productScreen.d.ts +1 -3
- package/dist/cjs/components/product-picker-v2/productScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/searchScreen.d.ts +15 -0
- package/dist/cjs/components/product-picker-v2/searchScreen.js +1 -0
- package/dist/cjs/components/product-picker-v2/selectedScreen.d.ts +0 -1
- package/dist/cjs/components/product-picker-v2/selectedScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/utility.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/utility.js +1 -0
- package/dist/cjs/components/stepper/WorkingStepper.d.ts +0 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/product-picker-v2/modal.d.ts +2 -1
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker-v2/productScreen.d.ts +1 -3
- package/dist/esm/components/product-picker-v2/productScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/searchScreen.d.ts +15 -0
- package/dist/esm/components/product-picker-v2/searchScreen.js +1 -0
- package/dist/esm/components/product-picker-v2/selectedScreen.d.ts +0 -1
- package/dist/esm/components/product-picker-v2/selectedScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/utility.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/utility.js +1 -0
- package/dist/esm/components/stepper/WorkingStepper.d.ts +0 -1
- package/package.json +1 -1
|
@@ -35,7 +35,8 @@ export type ProductFetcherReturn = Promise<{
|
|
|
35
35
|
[key: string]: Product;
|
|
36
36
|
}>;
|
|
37
37
|
export interface ProductPickerInterface {
|
|
38
|
-
|
|
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("
|
|
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
|
-
|
|
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,7 +19,6 @@ 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;
|
|
25
24
|
}
|
|
@@ -32,7 +31,6 @@ interface ProductCardInterface {
|
|
|
32
31
|
variantId?: string;
|
|
33
32
|
isSelected: boolean;
|
|
34
33
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
35
|
-
upliftAdditions: any;
|
|
36
34
|
viewOnly: boolean;
|
|
37
35
|
isPartiallyChecked?: boolean;
|
|
38
36
|
}
|
|
@@ -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"),
|
|
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"),c=require("react"),r=require("../../constants/Theme.js"),d=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"),h=require("../TypographyStyle.js"),p=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:c,selectedCollectionsDispatch:r,viewOnly:d,isProductPartiallyChecked:l}=t,n=e=>{var t,s,r,d,l,n;if(!(null===(s=null===(t=null==c?void 0:c[i])||void 0===t?void 0:t.products)||void 0===s?void 0:s[o]))return!1;return!!(null===(n=null===(l=null===(d=null===(r=null==c?void 0:c[i])||void 0===r?void 0:r.products)||void 0===d?void 0:d[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===(u=null===(a=null==c?void 0:c[i])||void 0===a?void 0:a.products)||void 0===u?void 0:u[o]),isPartiallyChecked:l,selectedCollectionsDispatch:r,viewOnly:d},o),Object.keys(s.variants||[]).map((t=>e.jsx(I,{isVariant:!0,data:s.variants[t],variantId:t,productId:o,viewOnly:d,collectionId:i,isSelected:n(t),selectedCollectionsDispatch:r},t)))]});var a,u},I=t=>{const{isVariant:i,data:o,productId:s,collectionId:c,variantId:r,isSelected:l,selectedCollectionsDispatch:n,viewOnly:a,isPartiallyChecked:v}=t;return e.jsxs(x.ProductCardStyle,Object.assign({isVariant:i},{children:[a?e.jsx(e.Fragment,{}):e.jsx(d.CheckBox,{isChecked:l,isPartiallyChecked:v||!1,onValueChange:function(e){if(i)if(e){const e=y.upliftAdditions({productId:s,variantId:r,collectionId:c,variant:o},o);n({type:"variantSelected",data:e})}else n({type:"variantUnselected",data:{productId:s,variantId:r,collectionId:c}});else if(e){const e=y.upliftAdditions({productId:s,collectionId:c,product:o},o);n({type:"productSelected",data:e})}else n({type:"productUnselected",data:{productId:s,collectionId:c}})}}),e.jsx("div",{children:e.jsx(u.ShimmerImage,{width:40,height:40,imageUrl:o.image,alt:"Item",borderRadius:4})}),e.jsx(h.TitleRegular,{children:p.truncate(o.name,40,!0)})]}))};exports.ProductCard=I,exports.ProductGroup=m,exports.ProductsScreen=u=>{const p=c.useContext(j.CollectionIdContext),{data:y,collectionsDispatch:I,selectedData:g,selectedCollectionsDispatch:C,productFetcher:S,storeId:O,setScreen:f,setSaveDisabled:b}=u,[k,q]=c.useState(""),[P,E]=c.useState(!1),[D,B]=c.useState(y);c.useEffect((()=>{const e=setTimeout((()=>{k.length?(E(!0),u.searchInCollectionFetcher(O,p,k).then((e=>{var t;const i=s.cloneDeep(y);i.products={};for(const o of e)(null===(t=null==y?void 0:y.products)||void 0===t?void 0:t[o])&&(i.products[o]=y.products[o]);B(i),b(!1),E(!1)}))):B(y)}),800);return()=>clearTimeout(e)}),[k]);const w=y.isSmartCollection||!1,T=e=>{var t,i,o,s,c,r,d,l;let n=0,a=0;return!!((null===(i=null===(t=null==g?void 0:g[p])||void 0===t?void 0:t.products)||void 0===i?void 0:i[e])&&(null===(c=Object.keys((null===(s=null===(o=null==y?void 0:y.products)||void 0===o?void 0:o[e])||void 0===s?void 0:s.variants)||[]))||void 0===c||c.forEach((()=>a++)),Object.keys((null===(l=null===(d=null===(r=null==g?void 0:g[p])||void 0===r?void 0:r.products)||void 0===d?void 0:d[e])||void 0===l?void 0:l.variants)||[]).forEach((()=>n++)),n>0&&a!==n))};c.useEffect((()=>{(null==y?void 0:y.products)||V()}),[]);const V=()=>{b(!0),S(p,O).then((e=>{Object.keys(e).length&&(I({type:"productsFetched",data:{collectionId:p,products:e}}),B(Object.assign(Object.assign({},D),{products:e}))),b(!1),E(!1)})).catch()};return e.jsxs("div",{children:[e.jsxs(x.ProductScreenHeader,{children:[e.jsx(l.IconButton,{Icon:t.default,height:16,onClick:()=>{f("collections")}}),e.jsx(h.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:y.name}))]}),e.jsx("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(n.Input,{rightIcon:{icon:()=>P?e.jsx(v.Spinner,{size:"small",color:r.COLORS.content.primary}):e.jsx(o.default,{})},id:"listInput",height:"24px",type:"text",value:k,onChangeText:e=>{q(e)},placeholder:"Search products in this collection..."})})),e.jsxs("div",{children:[e.jsxs(x.ProductScreenCollectionCardStyle,{children:[w?e.jsx(e.Fragment,{}):e.jsx(d.CheckBox,{isChecked:!!(null==g?void 0:g[p]),isPartiallyChecked:(e=>{var t;let i=0,o=0;if(g[e]){const s=null==y?void 0:y.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 c=null===(t=g[e])||void 0===t?void 0:t.products;return c&&Object.keys(c).forEach((e=>{var t;const i=null===(t=c[e])||void 0===t?void 0:t.variants;i&&Object.keys(i).forEach((e=>o+=1))})),o>0&&i!==o}return!1})(p),onValueChange:function(e){C(e?{type:"selected",data:{id:p,val:y}}:{type:"unselected",data:{id:p}})}}),e.jsx("div",Object.assign({style:{width:40,height:40}},{children:e.jsx(i.default,{})})),e.jsx(h.TitleRegular,{children:"All Products"})]}),Object.keys((null==D?void 0:D.products)||[]).length&&!P?Object.keys(D.products||[]).map((t=>e.jsx(m,{collectionId:p,isProductPartiallyChecked:T(t),productId:t,data:D.products[t],selectedData:g,selectedCollectionsDispatch:C,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)))]})]})};
|
|
@@ -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"),l=require("../icon-button/IconButton.js"),r=require("../TypographyStyle.js"),t=require("./productScreen.js"),i=require("./style.js");exports.SearchScreen=s=>{const{selectedCollections:c,searchedCollections:d,selectedCollectionsDispatch:n,setScreen:u,collections:v,onBackPress:a}=s,p=(e,o)=>{var l,r,t,i,s,d,n,u,a;let p=0,j=0;return!!((null===(r=null===(l=null==c?void 0:c[e])||void 0===l?void 0:l.products)||void 0===r?void 0:r[o])&&(null===(d=Object.keys((null===(s=null===(i=null===(t=null==v?void 0:v[e])||void 0===t?void 0:t.products)||void 0===i?void 0:i[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(i.SelectedScreenHeader,{children:[e.jsx(l.IconButton,{Icon:o.default,onClick:()=>{u("collections"),a()}}),e.jsx(r.BodyCaption,{children:"Searched Products"})]}),e.jsx("div",{children:Object.keys(d).map((o=>{var l;return Object.keys((null===(l=null==d?void 0:d[o])||void 0===l?void 0:l.products)||[]).map((l=>{let r=!1;return(null==d?void 0:d.isCustom)&&(r=!0),e.jsx(t.ProductGroup,{collectionId:o,productId:l,data:d[o].products[l],isProductPartiallyChecked:p(o,l),selectedData:c,selectedCollectionsDispatch:n,viewOnly:r},l)}))}))})]})};
|
|
@@ -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"),
|
|
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"),r=require("./productScreen.js"),i=require("./style.js");exports.SelectedScreen=d=>{const{selectedCollections:c,selectedCollectionsDispatch:s,setScreen:n,collections:u}=d,v=(e,o)=>{var l,t,r,i,d,s,n,v,a;let p=0,j=0;return!!((null===(t=null===(l=null==c?void 0:c[e])||void 0===l?void 0:l.products)||void 0===t?void 0:t[o])&&(null===(s=Object.keys((null===(d=null===(i=null===(r=null==u?void 0:u[e])||void 0===r?void 0:r.products)||void 0===i?void 0:i[o])||void 0===d?void 0:d.variants)||[]))||void 0===s||s.forEach((()=>j++)),Object.keys((null===(a=null===(v=null===(n=null==c?void 0:c[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(i.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(c).map((o=>{var l;return Object.keys((null===(l=null==c?void 0:c[o])||void 0===l?void 0:l.products)||[]).map((l=>{let t=!1;return(null==c?void 0:c.isCustom)&&(t=!0),e.jsx(r.ProductGroup,{collectionId:o,productId:l,data:c[o].products[l],isProductPartiallyChecked:v(o,l),selectedData:c,selectedCollectionsDispatch:s,viewOnly:t},l)}))}))})]})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const upliftAdditions: (payload: any, data: any) => any;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("lodash");exports.upliftAdditions=(e,s)=>{const a=t.cloneDeep(s);if(delete a.products,(e=Object.assign(Object.assign({},e),{catalogOnlyData:a})).productId&&s.products){const o=t.cloneDeep(s.products[e.productId]);(null==o?void 0:o.variants)&&delete o.variants,e=Object.assign(Object.assign({},e),{catalogOnlyData:a,productOnlyData:o})}return e};
|
|
@@ -35,7 +35,8 @@ export type ProductFetcherReturn = Promise<{
|
|
|
35
35
|
[key: string]: Product;
|
|
36
36
|
}>;
|
|
37
37
|
export interface ProductPickerInterface {
|
|
38
|
-
|
|
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
|
|
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("")})]})]})}))};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
|
-
|
|
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,7 +19,6 @@ 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;
|
|
25
24
|
}
|
|
@@ -32,7 +31,6 @@ interface ProductCardInterface {
|
|
|
32
31
|
variantId?: string;
|
|
33
32
|
isSelected: boolean;
|
|
34
33
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
35
|
-
upliftAdditions: any;
|
|
36
34
|
viewOnly: boolean;
|
|
37
35
|
isPartiallyChecked?: boolean;
|
|
38
36
|
}
|
|
@@ -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
|
|
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 l from"../../assets/icons/search.svg.js";import{cloneDeep as d}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 v}from"../icon-button/IconButton.js";import{Input as p}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{upliftAdditions as O}from"./utility.js";const S=m=>{const I=r(g),{data:C,collectionsDispatch:O,selectedData:S,selectedCollectionsDispatch:E,productFetcher:D,storeId:w,setScreen:P,setSaveDisabled:B}=m,[T,V]=n(""),[F,U]=n(!1),[z,A]=n(C);s((()=>{const t=setTimeout((()=>{T.length?(U(!0),m.searchInCollectionFetcher(w,I,T).then((t=>{var e;const o=d(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]);A(o),B(!1),U(!1)}))):A(C)}),800);return()=>clearTimeout(t)}),[T]);const R=C.isSmartCollection||!1,_=t=>{var e,o,i,c,l,d,r,n;let s=0,a=0;return!!((null===(o=null===(e=null==S?void 0:S[I])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(l=Object.keys((null===(c=null===(i=null==C?void 0:C.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===l||l.forEach((()=>a++)),Object.keys((null===(n=null===(r=null===(d=null==S?void 0:S[I])||void 0===d?void 0:d.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)||q()}),[]);const q=()=>{B(!0),D(I,w).then((t=>{Object.keys(t).length&&(O({type:"productsFetched",data:{collectionId:I,products:t}}),A(Object.assign(Object.assign({},z),{products:t}))),B(!1),U(!1)})).catch()};return t("div",{children:[t(b,{children:[e(v,{Icon:i,height:16,onClick:()=>{P("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(p,{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:[R?e(o,{}):e(u,{isChecked:!!(null==S?void 0:S[I]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(S[t]){const c=null==C?void 0:C.products;c&&Object.keys(c).forEach((t=>{var e;const i=null===(e=c[t])||void 0===e?void 0:e.variants;i&&Object.keys(i).forEach((t=>o+=1))}));const l=null===(e=S[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){E(t?{type:"selected",data:{id:I,val:C}}:{type:"unselected",data:{id:I}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),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:_(t),productId:t,data:z.products[t],selectedData:S,selectedCollectionsDispatch:E,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)))]})]})},x=o=>{const{collectionId:i,productId:c,data:l,selectedData:d,selectedCollectionsDispatch:r,viewOnly:n,isProductPartiallyChecked:s}=o,a=t=>{var e,o,l,r,n,s;if(!(null===(o=null===(e=null==d?void 0:d[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[c]))return!1;return!!(null===(s=null===(n=null===(r=null===(l=null==d?void 0:d[i])||void 0===l?void 0:l.products)||void 0===r?void 0:r[c])||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:c,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[c]),isPartiallyChecked:s,selectedCollectionsDispatch:r,viewOnly:n},c),Object.keys(l.variants||[]).map((t=>e(E,{isVariant:!0,data:l.variants[t],variantId:t,productId:c,viewOnly:n,collectionId:i,isSelected:a(t),selectedCollectionsDispatch:r},t)))]});var u,v},E=i=>{const{isVariant:c,data:l,productId:d,collectionId:r,variantId:n,isSelected:s,selectedCollectionsDispatch:a,viewOnly:v,isPartiallyChecked:p}=i;return t(C,Object.assign({isVariant:c},{children:[v?e(o,{}):e(u,{isChecked:s,isPartiallyChecked:p||!1,onValueChange:function(t){if(c)if(t){const t=O({productId:d,variantId:n,collectionId:r,variant:l},l);a({type:"variantSelected",data:t})}else a({type:"variantUnselected",data:{productId:d,variantId:n,collectionId:r}});else if(t){const t=O({productId:d,collectionId:r,product:l},l);a({type:"productSelected",data:t})}else a({type:"productUnselected",data:{productId:d,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 l}from"react/jsx-runtime";import t from"../../assets/icons/arrow_left.svg.js";import{IconButton as e}from"../icon-button/IconButton.js";import{BodyCaption as i}from"../TypographyStyle.js";import{ProductGroup as r}from"./productScreen.js";import{SelectedScreenHeader as c}from"./style.js";const d=d=>{const{selectedCollections:n,searchedCollections:s,selectedCollectionsDispatch:u,setScreen:v,collections:a,onBackPress:p}=d,m=(o,l)=>{var t,e,i,r,c,d,s,u,v;let p=0,m=0;return!!((null===(e=null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||void 0===e?void 0:e[l])&&(null===(d=Object.keys((null===(c=null===(r=null===(i=null==a?void 0:a[o])||void 0===i?void 0:i.products)||void 0===r?void 0:r[l])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.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(c,{children:[l(e,{Icon:t,onClick:()=>{v("collections"),p()}}),l(i,{children:"Searched Products"})]}),l("div",{children:Object.keys(s).map((o=>{var t;return Object.keys((null===(t=null==s?void 0:s[o])||void 0===t?void 0:t.products)||[]).map((t=>{let e=!1;return(null==s?void 0:s.isCustom)&&(e=!0),l(r,{collectionId:o,productId:t,data:s[o].products[t],isProductPartiallyChecked:m(o,t),selectedData:n,selectedCollectionsDispatch:u,viewOnly:e},t)}))}))})]})};export{d 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
|
|
1
|
+
import{jsxs as o,jsx as l}from"react/jsx-runtime";import t from"../../assets/icons/arrow_left.svg.js";import{IconButton as e}from"../icon-button/IconButton.js";import{BodyCaption as i}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,e,i,d,r,c,s,u,a;let p=0,m=0;return!!((null===(e=null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||void 0===e?void 0:e[l])&&(null===(c=Object.keys((null===(r=null===(d=null===(i=null==v?void 0:v[o])||void 0===i?void 0:i.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(e,{Icon:t,onClick:()=>{u("collections")}}),l(i,{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 e=!1;return(null==n?void 0:n.isCustom)&&(e=!0),l(d,{collectionId:o,productId:t,data:n[o].products[t],isProductPartiallyChecked:a(o,t),selectedData:n,selectedCollectionsDispatch:s,viewOnly:e},t)}))}))})]})};export{c as SelectedScreen};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const upliftAdditions: (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 upliftAdditions};
|