@bikdotai/bik-component-library 0.0.395-beta.1 → 0.0.395
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 +1 -0
- package/dist/cjs/components/product-picker-v2/collectionScreen.d.ts +0 -2
- package/dist/cjs/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/modal.d.ts +1 -5
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/product-picker-v2/productScreen.d.ts +0 -7
- package/dist/cjs/components/product-picker-v2/productScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/searchScreen.d.ts +0 -4
- package/dist/cjs/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/style.d.ts +0 -2
- package/dist/cjs/components/product-picker-v2/style.js +16 -16
- package/dist/cjs/components/side-modal/SideModal.d.ts +2 -4
- package/dist/cjs/components/side-modal/SideModal.js +1 -1
- package/dist/cjs/components/side-modal/SideModal.style.d.ts +1 -4
- package/dist/cjs/components/side-modal/SideModal.style.js +1 -4
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/collectionScreen.d.ts +0 -2
- package/dist/esm/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/modal.d.ts +1 -5
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker-v2/productScreen.d.ts +0 -7
- package/dist/esm/components/product-picker-v2/productScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/searchScreen.d.ts +0 -4
- package/dist/esm/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/style.d.ts +0 -2
- package/dist/esm/components/product-picker-v2/style.js +5 -5
- package/dist/esm/components/side-modal/SideModal.d.ts +2 -4
- package/dist/esm/components/side-modal/SideModal.js +1 -1
- package/dist/esm/components/side-modal/SideModal.style.d.ts +1 -4
- package/dist/esm/components/side-modal/SideModal.style.js +12 -15
- package/package.json +1 -1
|
@@ -21,8 +21,6 @@ interface CollectionsScreenInterface {
|
|
|
21
21
|
setCurPage: React.Dispatch<React.SetStateAction<number>>;
|
|
22
22
|
};
|
|
23
23
|
hideCollectionCheckbox?: boolean;
|
|
24
|
-
renderWithoutModal?: boolean;
|
|
25
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
26
24
|
}
|
|
27
25
|
export declare const CollectionsScreen: (props: CollectionsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
28
26
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight.svg.js"),s=require("react"),i=require("../checkBox/CheckBox.js"),o=require("../icon-button/IconButton.js"),c=require("../shimmer/ShimmerComponent/BikShimmer.js"),r=require("../tag/Tag.js"),l=require("../TypographyStyle.js"),n=require("./emptyState.js"),a=require("./style.js");const d=(e,t,s)=>{if(e.length<=t)return e;const i=e.slice(0,t-1);return(s?i.slice(0,i.lastIndexOf(" ")):i)+"..."},u=s=>{const{customCollectionRestriction:c,data:n,selectedCollectionsDispatch:u,setCollectionId:h,isPartiallyChecked:C,setScreen:x,id:j,isChecked:p,isDisabled:g,hideCollectionCheckbox:m}=s;return e.jsxs(a.CollectionCardStyle,Object.assign({isDisabled:g,onClick:()=>{g||(h(j),x("products"))}},{children:[e.jsxs(a.CollectionCardInfoStyle,{children:[!m&&e.jsx(i.CheckBox,{isDisabled:g,isChecked:p,isPartiallyChecked:C,onValueChange:function(e,t,s){null==s||s.stopPropagation(),u(e?{type:"selected",data:{id:j,val:n,isRestricted:c}}:{type:"unselected",data:{id:j}}),h(e?j:"")}}),e.jsx(a.CollectionCardDetailStyle,{children:e.jsxs(a.CollectionNameHolder,{children:[e.jsx(l.TitleRegular,{children:d(n.name,40,!0)}),n.isSmartCollection?e.jsx(r.Tag,{tagText:"Smart Collection",type:"warning"}):e.jsx(e.Fragment,{})]})})]}),e.jsx(o.IconButton,{height:12,width:12,disabled:g,Icon:t.default})]}))};exports.CollectionsScreen=t=>{const{customCollectionRestriction:i,dataLoading:o,collections:r,selectedCollectionsDispatch:l,setCollectionId:a,selectedCollections:d,setScreen:h,collectionFetcher:C,collectionsDispatch:x,pagingControls:j,storeId:p,setSaveDisabled:g,hideCollectionCheckbox:m}=t,v=s.useRef(null),b=s.useRef(j.curPage),y=!!i&&(null==d?void 0:d.isCustom),[k,f]=s.useState(!1);s.useEffect((()=>{b.current=j.curPage}),[j.curPage]),s.useEffect((()=>{const e=new IntersectionObserver((e=>{e[0].isIntersecting&&b.current>0&&(g(!0),f(!0),C(b.current,p).then((e=>{x({type:"paged",data:(null==e?void 0:e.collections)||{}}),j.setCurPage(b.current+1),f(!1),g(!1)})).catch())}),{threshold:1});return v.current&&e.observe(v.current),()=>{v.current&&e.unobserve(v.current)}}),[v]);const S=e=>{var t,s;let i=0,o=0;if(d[e]){const c=null===(t=r[e])||void 0===t?void 0:t.products;c&&Object.keys(c).forEach((e=>{var t;const s=null===(t=c[e])||void 0===t?void 0:t.variants;s&&Object.keys(s).forEach((e=>i+=1))}));const l=null===(s=d[e])||void 0===s?void 0:s.products;return l&&Object.keys(l).forEach((e=>{var t;const s=null===(t=l[e])||void 0===t?void 0:t.variants;s&&Object.keys(s).forEach((e=>o+=1))})),!(i<=0&&o>0)&&(o>0&&i!==o)}return!1};return e.jsxs("div",{children:[Object.keys(r).length?Object.keys(r).map((t=>e.jsx(u,{customCollectionRestriction:i,data:r[t],isDisabled:y&&!(null==d?void 0:d[t]),isChecked:!!(null==d?void 0:d[t]),isPartiallyChecked:S(t),selectedCollectionsDispatch:l,setCollectionId:a,setScreen:h,id:t,hideCollectionCheckbox:m},t))):o?[1,2,3,4,5,6,7,8,9,10].map(((t,s)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(c.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),s))):e.jsx(n.EmptyState,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),e.jsx("div",{ref:v}),k&&[1,2,3,4,5].map(((t,s)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(c.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),s)))]})},exports.truncate=d;
|
|
@@ -56,7 +56,7 @@ export type ProductPickerInterface = {
|
|
|
56
56
|
storeId: string;
|
|
57
57
|
selectedItems: SelectedItems;
|
|
58
58
|
onAdd: (items: SelectedItems, total: number) => void;
|
|
59
|
-
onClose
|
|
59
|
+
onClose: () => void;
|
|
60
60
|
visible: boolean;
|
|
61
61
|
zIndex?: number;
|
|
62
62
|
limit?: number;
|
|
@@ -69,10 +69,6 @@ export type ProductPickerInterface = {
|
|
|
69
69
|
title?: string;
|
|
70
70
|
postHeader?: React.ReactNode;
|
|
71
71
|
width?: string;
|
|
72
|
-
renderWithoutModal?: boolean;
|
|
73
|
-
onClickSave?: number;
|
|
74
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
75
|
-
hideProductVariants?: boolean;
|
|
76
72
|
rearrangeEnabled?: boolean;
|
|
77
73
|
} & ({
|
|
78
74
|
startupScreen: ScreenName.RearrangeProducts;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),r=require("../../assets/icons/search.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),r=require("../../assets/icons/search.svg.js"),c=require("react"),o=require("../../constants/Theme.js"),s=require("../button/Button.js"),n=require("../input/Input.js"),l=require("../modals/styledModal.js"),i=require("../spinner/Spinner.js"),a=require("../tag/Tag.js"),d=require("./collectionScreen.js"),u=require("./productScreen.js"),h=require("./rearrangeScreen.js"),p=require("./reducers.js"),S=require("./searchScreen.js"),C=require("./selectedScreen.js"),g=require("./style.js"),x=require("./type.js");exports.ScreenName=void 0,(e=exports.ScreenName||(exports.ScreenName={})).Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products";exports.ProductPickerModal=e=>{const{storeId:j,selectedItems:m,onClose:v,visible:b,zIndex:y,limit:P,hideCollectionCheckbox:f,hideProductCheckbox:O,outOfStockAction:R=x.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:k,selectProductsFromCustomCollection:I,hideSelectionCount:q,title:F,width:T,startupScreen:E=exports.ScreenName.Collections,rearrangeEnabled:D}=e,[N,w]=c.useReducer(p.collectionsReducer,{}),[B,A]=c.useState([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(E)?E:exports.ScreenName.Collections),[L,_]=c.useState("grid"),[M,z]=c.useState(""),[G,H]=c.useState(0),[V,$]=c.useState(!1),[K,U]=c.useState(0),[Y,J]=c.useState(""),[Q,W]=c.useState(!1),[X,Z]=c.useState(!1),[ee,te]=c.useState(),[re,ce]=c.useReducer(p.selectedColectionsReducer,Object.keys(m).length>0?m:{});c.useEffect((()=>{$(!0),Z(!0),e.collectionFetcher(G,j).then((e=>{w({type:"fetched",data:(null==e?void 0:e.collections)||{}}),$(!1),H((e=>e+1)),Z(!1)})).catch()}),[]),c.useEffect((()=>{let e=0;Object.keys(re||[]).forEach((t=>{var r;Object.keys((null===(r=re[t])||void 0===r?void 0:r.products)||[]).forEach((r=>{var c,o;Object.keys((null===(o=null===(c=re[t].products)||void 0===c?void 0:c[r])||void 0===o?void 0:o.variants)||[]).forEach((()=>{e+=1}))}))})),U(e)})),c.useEffect((()=>{var t;M&&!(null===(t=null==N?void 0:N[M])||void 0===t?void 0:t.products)&&($(!0),e.productFetcher(M,j).then((e=>{Object.keys(e).length&&w({type:"productsFetched",data:{collectionId:M,products:e}}),$(!1)})).catch())}),[M]),c.useEffect((()=>{const t=setTimeout((()=>{"rearrange"!==B&&(Y.length?(W(!0),e.searchFetcher(j,Y).then((e=>{te(Object.assign({},e)),A("searchProducts"),$(!1),W(!1)}))):A("collections"))}),800);return()=>clearTimeout(t)}),[Y]);const oe=()=>{ce({type:"reset",data:{}})};return t.jsx(l.StyledModal,Object.assign({zIndex:y,open:b,onClose:()=>{v(),oe()},headingTitle:F||("collections"===B||"products"===B?"Select Products":"view"===B?"Selected Products":"searchProducts"===B?"Searched Products":"rearrange"===B?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:T||"480px"},headerRightCustomElement:"rearrange"===B?(console.log("ignore:",_),t.jsx(t.Fragment,{})):t.jsx(t.Fragment,{}),primaryButton:{buttonText:V?"Loading...":B===exports.ScreenName.RearrangeProducts?"Done":"Add",disabled:V||K<1||P&&K>P||!1,onClick:()=>{e.onAdd(re,K),oe()}},footerLeftCustomElement:q?t.jsx(t.Fragment,{}):P&&K>P?t.jsx(a.Tag,{tagText:`You can only select ${P} products`,type:"negative"}):K>0?t.jsx(s.Button,{onClick:()=>{A(D?exports.ScreenName.RearrangeProducts:exports.ScreenName.SelectedProducts)},buttonText:`${K} products selected`,buttonType:["rearrange","view"].includes(B)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(B)}):t.jsx(s.Button,{disabled:!0,buttonText:`${K} products selected`,buttonType:"tertiaryGray"})},{children:t.jsxs(g.ContainerStyle,{children:[e.postHeader&&t.jsx("div",Object.assign({style:{padding:"0 24px"}},{children:e.postHeader})),!e.hideGlobalSearch&&t.jsx(t.Fragment,{children:("collections"===B||"searchProducts"===B)&&t.jsx("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t.jsx(n.Input,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Q?t.jsx(i.Spinner,{size:"small",color:o.COLORS.content.primary}):t.jsx(r.default,{})},id:"listInput",height:"24px",type:"text",value:Y,onChangeText:e=>{e.length&&e.trim().length?J(e):J("")}})}))}),t.jsxs(g.ScrollContainerStyle,{children:["collections"===B&&t.jsx(d.CollectionsScreen,{customCollectionRestriction:e.customCollectionRestriction,dataLoading:X,collections:N,selectedCollectionsDispatch:ce,setCollectionId:z,setScreen:A,selectedCollections:re,collectionFetcher:e.collectionFetcher,storeId:j,collectionsDispatch:w,setSaveDisabled:$,pagingControls:{curPage:G,setCurPage:H},hideCollectionCheckbox:f}),"products"===B&&M&&t.jsx(p.CollectionIdContext.Provider,Object.assign({value:M},{children:t.jsx(u.ProductsScreen,{hideInCollectionSearch:e.hideInCollectionSearch,customCollectionRestriction:e.customCollectionRestriction,productFetcher:e.productFetcher,setScreen:A,storeId:j,data:N[M],collectionsDispatch:w,selectedCollectionsDispatch:ce,selectedData:re,setSaveDisabled:$,searchInCollectionFetcher:e.searchInCollectionFetcher,hideProductCheckbox:O,outOfStockAction:R,hideVariantCheckbox:k,selectProductsFromCustomCollection:I})})),"view"===B&&t.jsx(C.SelectedScreen,{selectedCollections:re||{},selectedCollectionsDispatch:ce,setScreen:A,collections:N}),"rearrange"===B&&t.jsx(h.RearrangeScreen,{selectedCollections:re||{},selectedCollectionsDispatch:ce,setScreen:A,outOfStockAction:R,rearrangeViewType:"grid"===L?"list":"grid"}),"searchProducts"===B&&t.jsx(S.SearchScreen,{customCollectionRestriction:e.customCollectionRestriction,selectedCollections:re||{},searchedCollections:ee||{},selectedCollectionsDispatch:ce,setScreen:A,collections:N,onBackPress:()=>{J(""),te({})}})]})]})}))};
|
|
@@ -18,9 +18,6 @@ interface ProductsScreenInterface {
|
|
|
18
18
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
19
19
|
hideVariantCheckbox?: boolean;
|
|
20
20
|
selectProductsFromCustomCollection?: boolean;
|
|
21
|
-
renderWithoutModal?: boolean;
|
|
22
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
23
|
-
hideProductVariants?: boolean;
|
|
24
21
|
}
|
|
25
22
|
export declare const ProductsScreen: (props: ProductsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
26
23
|
interface ProductGroupInterface {
|
|
@@ -35,8 +32,6 @@ interface ProductGroupInterface {
|
|
|
35
32
|
hideProductCheckbox?: boolean;
|
|
36
33
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
37
34
|
hideVariantCheckbox?: boolean;
|
|
38
|
-
hideProductVariants?: boolean;
|
|
39
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
40
35
|
}
|
|
41
36
|
export declare const ProductGroup: (props: ProductGroupInterface) => import("react/jsx-runtime").JSX.Element;
|
|
42
37
|
interface ProductCardInterface {
|
|
@@ -53,8 +48,6 @@ interface ProductCardInterface {
|
|
|
53
48
|
hideProductCheckbox?: boolean;
|
|
54
49
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
55
50
|
hideVariantCheckbox?: boolean;
|
|
56
|
-
hideProductVariants?: boolean;
|
|
57
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
58
51
|
}
|
|
59
52
|
export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
|
|
60
53
|
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"),c=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"),c=require("lodash"),s=require("react"),r=require("../tag/Tag.js"),d=require("../../constants/Theme.js"),l=require("../checkBox/CheckBox.js"),n=require("../icon-button/IconButton.js"),a=require("../input/Input.js"),u=require("../shimmer/ShimmerComponent/BikShimmer.js"),h=require("../shimmer-image/ShimmerImage.js"),p=require("../spinner/Spinner.js"),v=require("../TypographyStyle.js"),j=require("./collectionScreen.js"),x=require("./emptyState.js"),y=require("./helpers/ProductHelper.js"),g=require("./reducers.js"),C=require("./style.js"),m=require("./type.js"),b=require("./utility.js");const k=t=>{const{collectionId:i,productId:o,data:c,selectedData:s,selectedCollectionsDispatch:r,viewOnly:d,upliftAdditions:l,isProductPartiallyChecked:n,hideProductCheckbox:a,outOfStockAction:u,hideVariantCheckbox:h}=t,p=e=>{var t,c,r,d,l,n;if(!(null===(c=null===(t=null==s?void 0:s[i])||void 0===t?void 0:t.products)||void 0===c?void 0:c[o]))return!1;return!!(null===(n=null===(l=null===(d=null===(r=null==s?void 0:s[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(O,{isVariant:!1,data:c,productId:o,collectionId:i,isSelected:!!(null===(j=null===(v=null==s?void 0:s[i])||void 0===v?void 0:v.products)||void 0===j?void 0:j[o]),isPartiallyChecked:n,selectedCollectionsDispatch:r,upliftAdditions:l,viewOnly:d,hideProductCheckbox:a,hideVariantCheckbox:h},o),Object.keys(c.variants||[]).map((t=>e.jsx(O,{isVariant:!0,hideVariantCheckbox:h,data:c.variants[t],variantId:t,productId:o,viewOnly:d,upliftAdditions:l,collectionId:i,isSelected:p(t),selectedCollectionsDispatch:r,outOfStockAction:u},t)))]});var v,j},O=t=>{const{isVariant:i,data:o,productId:c,collectionId:s,variantId:d,isSelected:n,selectedCollectionsDispatch:a,viewOnly:u,upliftAdditions:p,isPartiallyChecked:x,hideProductCheckbox:g,outOfStockAction:m,hideVariantCheckbox:b}=t,k=y.ProductHelper.getProductLabels(o,m);return e.jsxs(C.ProductCardStyle,Object.assign({isVariant:i},{children:[i&&!u&&!b||!i&&!u&&!g?e.jsx(l.CheckBox,{isChecked:n,isPartiallyChecked:x||!1,onValueChange:function(e){i?e?p("variantSelected",{productId:c,variantId:d,collectionId:s,variant:o}):a({type:"variantUnselected",data:{productId:c,variantId:d,collectionId:s}}):e?p("productSelected",{productId:c,collectionId:s,product:o}):a({type:"productUnselected",data:{productId:c,collectionId:s}})}}):e.jsx(e.Fragment,{}),e.jsx("div",{children:e.jsx(h.ShimmerImage,{width:40,height:40,imageUrl:o.image,alt:"Item",borderRadius:4})}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column"}},{children:[e.jsx(v.TitleRegular,{children:j.truncate(o.name,40,!0)}),k?e.jsx("div",Object.assign({style:{width:90,display:"flex"}},{children:e.jsx(r.Tag,{tagText:k,type:"warning",theme:"light"})})):e.jsx(e.Fragment,{})]}))]}))};exports.ProductCard=O,exports.ProductGroup=k,exports.ProductsScreen=r=>{const h=s.useContext(g.CollectionIdContext),{data:j,collectionsDispatch:y,selectedData:O,selectedCollectionsDispatch:f,productFetcher:I,storeId:S,setScreen:P,setSaveDisabled:q,hideInCollectionSearch:E,customCollectionRestriction:T,hideProductCheckbox:w,outOfStockAction:D=m.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:A=!1,selectProductsFromCustomCollection:B=!1}=r,[V,R]=s.useState(""),[F,U]=s.useState(!1),[_,H]=s.useState(j);s.useEffect((()=>{const e=setTimeout((()=>{V.length?(U(!0),r.searchInCollectionFetcher(S,h,V).then((e=>{var t;const i=c.cloneDeep(j);i.products={};for(const o of e)(null===(t=null==j?void 0:j.products)||void 0===t?void 0:t[o])&&(i.products[o]=j.products[o]);H(i),q(!1),U(!1)}))):H(j)}),800);return()=>clearTimeout(e)}),[V]);const L=!!T&&j.isSmartCollection,K=e=>{var t,i,o,c,s,r,d,l;let n=0,a=0;return!!((null===(i=null===(t=null==O?void 0:O[h])||void 0===t?void 0:t.products)||void 0===i?void 0:i[e])&&(null===(s=Object.keys((null===(c=null===(o=null==j?void 0:j.products)||void 0===o?void 0:o[e])||void 0===c?void 0:c.variants)||[]))||void 0===s||s.forEach((()=>a++)),Object.keys((null===(l=null===(d=null===(r=null==O?void 0:O[h])||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))};s.useEffect((()=>{(null==j?void 0:j.products)||N()}),[]);const N=()=>{q(!0),U(!0),I(h,S).then((e=>{Object.keys(e).length&&(y({type:"productsFetched",data:{collectionId:h,products:e}}),H(Object.assign(Object.assign({},_),{products:e}))),q(!1),U(!1)})).catch()},W=(e,t)=>{const i=b.liftTheStateUp(t,j);f({type:e,data:Object.assign(Object.assign({},i),{isRestricted:T})})};return e.jsxs("div",{children:[e.jsxs(C.ProductScreenHeader,{children:[e.jsx(n.IconButton,{Icon:t.default,height:16,onClick:()=>{P("collections")}}),e.jsx(v.BodyCaption,Object.assign({style:{color:d.COLORS.content.secondary}},{children:j.name}))]}),!E&&e.jsx("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(a.Input,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>F&&V.length?e.jsx(p.Spinner,{size:"small",color:d.COLORS.content.primary}):e.jsx(o.default,{})},id:"listInput",height:"24px",type:"text",value:V,onChangeText:e=>{e.length&&e.trim().length?R(e):R("")},placeholder:"Search products in this collection..."})})),e.jsxs("div",{children:[Object.keys((null==_?void 0:_.products)||[]).length>0&&!L&&!V.length&&!w&&e.jsxs(C.ProductScreenCollectionCardStyle,{children:[e.jsx(l.CheckBox,{isChecked:!!(null==O?void 0:O[h]),isPartiallyChecked:(e=>{var t;let i=0,o=0;if(O[e]){const c=null==j?void 0:j.products;c&&Object.keys(c).forEach((e=>{var t;const o=null===(t=c[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((e=>i+=1))}));const s=null===(t=O[e])||void 0===t?void 0:t.products;return s&&Object.keys(s).forEach((e=>{var t;const i=null===(t=s[e])||void 0===t?void 0:t.variants;i&&Object.keys(i).forEach((()=>o+=1))})),o>0&&i!==o}return!1})(h),onValueChange:function(e){f(e?{type:"selected",data:{id:h,val:j}}:{type:"unselected",data:{id:h}})}}),e.jsx("div",Object.assign({style:{width:40,height:40}},{children:e.jsx(i.default,{})})),e.jsx(v.TitleRegular,{children:"All Products"})]}),Object.keys((null==_?void 0:_.products)||[]).length?Object.keys(_.products||[]).map((t=>e.jsx(k,{outOfStockAction:D,collectionId:h,isProductPartiallyChecked:K(t),productId:t,data:_.products[t],selectedData:O,selectedCollectionsDispatch:f,viewOnly:!B&&!!L,upliftAdditions:W,hideProductCheckbox:w,hideVariantCheckbox:A},t))):F?[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(u.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),i))):e.jsx(x.EmptyState,{title:"No products to show",subtitle:V.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})]})]})};
|
|
@@ -11,10 +11,6 @@ interface SearchScreenInterface {
|
|
|
11
11
|
[key: string]: Collection;
|
|
12
12
|
};
|
|
13
13
|
onBackPress: () => void;
|
|
14
|
-
hideVariantCheckbox?: boolean;
|
|
15
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
16
|
-
hideProductVariants?: boolean;
|
|
17
|
-
hideProductCheckbox?: boolean;
|
|
18
14
|
}
|
|
19
15
|
export declare const SearchScreen: (props: SearchScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
20
16
|
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"),o=require("../icon-button/IconButton.js"),i=require("../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),o=require("../icon-button/IconButton.js"),i=require("../TypographyStyle.js"),l=require("./emptyState.js"),s=require("./productScreen.js"),r=require("./style.js"),c=require("./utility.js");exports.SearchScreen=d=>{const{customCollectionRestriction:n,selectedCollections:u,searchedCollections:a,selectedCollectionsDispatch:v,setScreen:j,collections:p,onBackPress:h}=d,y=(e,t)=>{var o,i,l,s,r,c,d,n,a;let v=0,j=0;return!!((null===(i=null===(o=null==u?void 0:u[e])||void 0===o?void 0:o.products)||void 0===i?void 0:i[t])&&(null===(c=Object.keys((null===(r=null===(s=null===(l=null==p?void 0:p[e])||void 0===l?void 0:l.products)||void 0===s?void 0:s[t])||void 0===r?void 0:r.variants)||[]))||void 0===c||c.forEach((()=>j++)),Object.keys((null===(a=null===(n=null===(d=null==u?void 0:u[e])||void 0===d?void 0:d.products)||void 0===n?void 0:n[t])||void 0===a?void 0:a.variants)||[]).forEach((()=>v++)),v>0&&j!==v))};return e.jsxs("div",{children:[e.jsxs(r.SelectedScreenHeader,{children:[e.jsx(o.IconButton,{Icon:t.default,onClick:()=>{j("collections"),h()}}),e.jsx(i.BodyCaption,{children:"Searched Products"})]}),e.jsx("div",{children:Object.keys(a).length?e.jsx(e.Fragment,{children:Object.keys(a).map((t=>{var o;return Object.keys((null===(o=null==a?void 0:a[t])||void 0===o?void 0:o.products)||[]).map((o=>{let i=!1;return(null==a?void 0:a.isCustom)&&(i=!0),e.jsx(s.ProductGroup,{collectionId:t,upliftAdditions:(e,o)=>((e,t,o)=>{const i=c.liftTheStateUp(o,a[e]);v({type:t,data:Object.assign(Object.assign({},i),{isRestricted:n})})})(t,e,o),productId:o,data:a[t].products[o],isProductPartiallyChecked:y(t,o),selectedData:u,selectedCollectionsDispatch:v,viewOnly:i},o)}))}))}):e.jsx(l.EmptyState,{title:"No search results found",subtitle:"We couldn’t find the product you were looking for."})})]})};
|
|
@@ -2,7 +2,6 @@ export declare const ContainerStyle: import("styled-components").StyledComponent
|
|
|
2
2
|
export declare const ScrollContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
|
|
4
4
|
isDisabled: boolean;
|
|
5
|
-
isActive: boolean;
|
|
6
5
|
}, never>;
|
|
7
6
|
export declare const CollectionCardInfoStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
7
|
export declare const CollectionCardDetailStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -10,7 +9,6 @@ export declare const ProductScreenHeader: import("styled-components").StyledComp
|
|
|
10
9
|
export declare const ProductScreenCollectionCardStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
10
|
export declare const ProductCardStyle: import("styled-components").StyledComponent<"div", any, {
|
|
12
11
|
isVariant: boolean;
|
|
13
|
-
isActive: boolean;
|
|
14
12
|
}, never>;
|
|
15
13
|
export declare const SelectedScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
14
|
export declare const CollectionNameHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e);const o=l.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
background-color: white;
|
|
4
4
|
max-height: 600px;
|
|
5
5
|
min-height: 600px;
|
|
6
6
|
flex-direction: column;
|
|
7
|
-
`,r=
|
|
7
|
+
`,r=l.default.div`
|
|
8
8
|
overflow-y: scroll;
|
|
9
9
|
overflow-x: hidden;
|
|
10
|
-
`,d=
|
|
10
|
+
`,d=l.default.div`
|
|
11
11
|
height: 64px;
|
|
12
|
-
background-color: ${e=>e.isDisabled?"#F0F0F0":
|
|
12
|
+
background-color: ${e=>e.isDisabled?"#F0F0F0":"white"};
|
|
13
13
|
border-bottom: 1px solid #e0e0e0;
|
|
14
14
|
padding: 12px 24px;
|
|
15
15
|
display: flex;
|
|
@@ -17,17 +17,17 @@
|
|
|
17
17
|
column-gap: 16px;
|
|
18
18
|
justify-content: space-between;
|
|
19
19
|
align-items: center;
|
|
20
|
-
`,n=
|
|
20
|
+
`,n=l.default.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
flex-direction: row;
|
|
23
23
|
justify-content: center;
|
|
24
24
|
align-items: center;
|
|
25
25
|
column-gap: 18px;
|
|
26
|
-
`,a=
|
|
26
|
+
`,a=l.default.div`
|
|
27
27
|
display: flex;
|
|
28
28
|
flex-direction: column;
|
|
29
29
|
justify-content: center;
|
|
30
|
-
`,p=
|
|
30
|
+
`,p=l.default.div`
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: row;
|
|
33
33
|
max-height: 32px;
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
align-items: center;
|
|
38
38
|
padding: 8px 16px;
|
|
39
39
|
margin-top: 16px;
|
|
40
|
-
`,x=
|
|
40
|
+
`,x=l.default.div`
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: row;
|
|
43
43
|
column-gap: 16px;
|
|
44
44
|
padding: 12px 16px;
|
|
45
45
|
border-bottom: 1px solid #e0e0e0;
|
|
46
46
|
align-items: center;
|
|
47
|
-
`,c=
|
|
47
|
+
`,c=l.default.div`
|
|
48
48
|
height: 64px;
|
|
49
|
-
background-color:
|
|
49
|
+
background-color: white;
|
|
50
50
|
border-bottom: 1px solid #e0e0e0;
|
|
51
51
|
padding: 12px 16px;
|
|
52
52
|
display: flex;
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
justify-content: flex-start;
|
|
56
56
|
align-items: center;
|
|
57
57
|
padding-left: ${e=>e.isVariant?"42px":"16px"};
|
|
58
|
-
`,s=
|
|
58
|
+
`,s=l.default.div`
|
|
59
59
|
display: flex;
|
|
60
60
|
flex-direction: row;
|
|
61
61
|
max-height: 32px;
|
|
@@ -64,10 +64,10 @@
|
|
|
64
64
|
justify-content: flex-start;
|
|
65
65
|
align-items: center;
|
|
66
66
|
padding: 8px 16px;
|
|
67
|
-
`,f=
|
|
67
|
+
`,f=l.default.div`
|
|
68
68
|
display: flex;
|
|
69
69
|
flex-direction: column;
|
|
70
|
-
`,u=
|
|
70
|
+
`,u=l.default.div`
|
|
71
71
|
height: 72px;
|
|
72
72
|
background: white;
|
|
73
73
|
padding: 12px 16px;
|
|
@@ -83,14 +83,14 @@
|
|
|
83
83
|
flex-direction: column;
|
|
84
84
|
gap: 2px;
|
|
85
85
|
}
|
|
86
|
-
`,g=
|
|
86
|
+
`,g=l.default.div`
|
|
87
87
|
height: 72px;
|
|
88
88
|
width: 72px;
|
|
89
89
|
display: flex;
|
|
90
90
|
align-items: center;
|
|
91
91
|
justify-content: center;
|
|
92
92
|
margin: 16px;
|
|
93
|
-
`;
|
|
93
|
+
`;l.default.div`
|
|
94
94
|
display: flex;
|
|
95
95
|
width: 32px;
|
|
96
96
|
height: 32px;
|
|
@@ -99,4 +99,4 @@
|
|
|
99
99
|
align-items: center;
|
|
100
100
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
101
101
|
border-radius: 4px;
|
|
102
|
-
`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=n,exports.CollectionCardStyle=d,exports.CollectionNameHolder=f,exports.ContainerStyle=
|
|
102
|
+
`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=n,exports.CollectionCardStyle=d,exports.CollectionNameHolder=f,exports.ContainerStyle=o,exports.ProductCardStyle=c,exports.ProductScreenCollectionCardStyle=x,exports.ProductScreenHeader=p,exports.ScrollContainerStyle=r,exports.SelectedScreenHeader=s,exports.VariantCardGridStyle=g,exports.VariantCardListStyle=u;
|
|
@@ -7,11 +7,9 @@ export interface SideModalProps {
|
|
|
7
7
|
footerDirection?: 'row' | 'row-reverse';
|
|
8
8
|
hideCrossButton?: boolean;
|
|
9
9
|
width?: string;
|
|
10
|
-
saveButtonProps
|
|
11
|
-
cancelButtonProps
|
|
10
|
+
saveButtonProps: ButtonProps;
|
|
11
|
+
cancelButtonProps: ButtonProps;
|
|
12
12
|
onClose: () => void;
|
|
13
13
|
zIndex?: number;
|
|
14
|
-
hideFooter?: boolean;
|
|
15
|
-
bodyStyle?: React.CSSProperties;
|
|
16
14
|
}
|
|
17
15
|
export declare const SideModal: React.FC<SideModalProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-dom"),o=require("../../assets/icons/cross.svg.js"),r=require("../button/Button.js"),s=require("../TypographyStyle.js"),i=require("./SideModal.style.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(t);exports.SideModal=t=>d.default.createPortal(e.jsx(i.SideModalStyle,Object.assign({zIndex:t.zIndex},{children:e.jsxs(i.SideModalContainer,Object.assign({width:t.width},{children:[e.jsxs(i.SideModalHeader,{children:[e.jsx(s.TitleMedium,{children:t.header}),!t.hideCrossButton&&e.jsx(o.default,{width:24,height:24,onClick:t.onClose})]}),e.jsx(i.SideModalBody,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-dom"),o=require("../../assets/icons/cross.svg.js"),r=require("../button/Button.js"),s=require("../TypographyStyle.js"),i=require("./SideModal.style.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(t);exports.SideModal=t=>d.default.createPortal(e.jsx(i.SideModalStyle,Object.assign({zIndex:t.zIndex},{children:e.jsxs(i.SideModalContainer,Object.assign({width:t.width},{children:[e.jsxs(i.SideModalHeader,{children:[e.jsx(s.TitleMedium,{children:t.header}),!t.hideCrossButton&&e.jsx(o.default,{width:24,height:24,onClick:t.onClose})]}),e.jsx(i.SideModalBody,{children:t.children}),e.jsxs(i.SideModalFooter,Object.assign({footerDirection:t.footerDirection},{children:[e.jsxs(i.FooterButtonWrapper,Object.assign({footerDirection:t.footerDirection},{children:[e.jsx(r.Button,Object.assign({},t.saveButtonProps)),e.jsx(r.Button,Object.assign({},t.cancelButtonProps))]})),t.footerCustomComponent?t.footerCustomComponent:e.jsx(e.Fragment,{})]}))]}))})),document.body);
|
|
@@ -5,10 +5,7 @@ export declare const SideModalContainer: import("styled-components").StyledCompo
|
|
|
5
5
|
width?: string | undefined;
|
|
6
6
|
}, never>;
|
|
7
7
|
export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
-
export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
-
hideFooter?: boolean | undefined;
|
|
10
|
-
bodyStyle: React.CSSProperties;
|
|
11
|
-
}, never>;
|
|
8
|
+
export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
9
|
export declare const SideModalFooter: import("styled-components").StyledComponent<"div", any, {
|
|
13
10
|
footerDirection?: "row" | "row-reverse" | undefined;
|
|
14
11
|
}, never>;
|
|
@@ -34,10 +34,7 @@
|
|
|
34
34
|
`,s=d.default.div`
|
|
35
35
|
overflow-y: auto;
|
|
36
36
|
padding: 24px;
|
|
37
|
-
height:
|
|
38
|
-
${t=>{let{bodyStyle:o}=t;return e.css`
|
|
39
|
-
${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
|
|
40
|
-
`}}
|
|
37
|
+
height: calc(100% - 120px);
|
|
41
38
|
`,p=d.default.div`
|
|
42
39
|
height: 60px;
|
|
43
40
|
width: 100%;
|
|
@@ -21,8 +21,6 @@ interface CollectionsScreenInterface {
|
|
|
21
21
|
setCurPage: React.Dispatch<React.SetStateAction<number>>;
|
|
22
22
|
};
|
|
23
23
|
hideCollectionCheckbox?: boolean;
|
|
24
|
-
renderWithoutModal?: boolean;
|
|
25
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
26
24
|
}
|
|
27
25
|
export declare const CollectionsScreen: (props: CollectionsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
28
26
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import{useRef as c,useState as s,useEffect as r}from"react";import{CheckBox as n}from"../checkBox/CheckBox.js";import{IconButton as l}from"../icon-button/IconButton.js";import{BikShimmer as d}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as a}from"../tag/Tag.js";import{TitleRegular as h}from"../TypographyStyle.js";import{EmptyState as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import{useRef as c,useState as s,useEffect as r}from"react";import{CheckBox as n}from"../checkBox/CheckBox.js";import{IconButton as l}from"../icon-button/IconButton.js";import{BikShimmer as d}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as a}from"../tag/Tag.js";import{TitleRegular as h}from"../TypographyStyle.js";import{EmptyState as u}from"./emptyState.js";import{CollectionCardStyle as m,CollectionCardInfoStyle as p,CollectionCardDetailStyle as C,CollectionNameHolder as g}from"./style.js";const v=(e,t,o)=>{if(e.length<=t)return e;const i=e.slice(0,t-1);return(o?i.slice(0,i.lastIndexOf(" ")):i)+"..."},b=o=>{const{customCollectionRestriction:i,dataLoading:n,collections:l,selectedCollectionsDispatch:a,setCollectionId:h,selectedCollections:m,setScreen:p,collectionFetcher:C,collectionsDispatch:g,pagingControls:v,storeId:b,setSaveDisabled:f,hideCollectionCheckbox:k}=o,j=c(null),x=c(v.curPage),O=!!i&&(null==m?void 0:m.isCustom),[E,S]=s(!1);r((()=>{x.current=v.curPage}),[v.curPage]),r((()=>{const e=new IntersectionObserver((e=>{e[0].isIntersecting&&x.current>0&&(f(!0),S(!0),C(x.current,b).then((e=>{g({type:"paged",data:(null==e?void 0:e.collections)||{}}),v.setCurPage(x.current+1),S(!1),f(!1)})).catch())}),{threshold:1});return j.current&&e.observe(j.current),()=>{j.current&&e.unobserve(j.current)}}),[j]);const D=e=>{var t,o;let i=0,c=0;if(m[e]){const s=null===(t=l[e])||void 0===t?void 0:t.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 r=null===(o=m[e])||void 0===o?void 0:o.products;return r&&Object.keys(r).forEach((e=>{var t;const o=null===(t=r[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((e=>c+=1))})),!(i<=0&&c>0)&&(c>0&&i!==c)}return!1};return e("div",{children:[Object.keys(l).length?Object.keys(l).map((e=>t(y,{customCollectionRestriction:i,data:l[e],isDisabled:O&&!(null==m?void 0:m[e]),isChecked:!!(null==m?void 0:m[e]),isPartiallyChecked:D(e),selectedCollectionsDispatch:a,setCollectionId:h,setScreen:p,id:e,hideCollectionCheckbox:k},e))):n?[1,2,3,4,5,6,7,8,9,10].map(((e,o)=>t("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:t(d,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):t(u,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),t("div",{ref:j}),E&&[1,2,3,4,5].map(((e,o)=>t("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:t(d,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))]})},y=c=>{const{customCollectionRestriction:s,data:r,selectedCollectionsDispatch:d,setCollectionId:u,isPartiallyChecked:b,setScreen:y,id:f,isChecked:k,isDisabled:j,hideCollectionCheckbox:x}=c;return e(m,Object.assign({isDisabled:j,onClick:()=>{j||(u(f),y("products"))}},{children:[e(p,{children:[!x&&t(n,{isDisabled:j,isChecked:k,isPartiallyChecked:b,onValueChange:function(e,t,o){null==o||o.stopPropagation(),d(e?{type:"selected",data:{id:f,val:r,isRestricted:s}}:{type:"unselected",data:{id:f}}),u(e?f:"")}}),t(C,{children:e(g,{children:[t(h,{children:v(r.name,40,!0)}),r.isSmartCollection?t(a,{tagText:"Smart Collection",type:"warning"}):t(o,{})]})})]}),t(l,{height:12,width:12,disabled:j,Icon:i})]}))};export{b as CollectionsScreen,v as truncate};
|
|
@@ -56,7 +56,7 @@ export type ProductPickerInterface = {
|
|
|
56
56
|
storeId: string;
|
|
57
57
|
selectedItems: SelectedItems;
|
|
58
58
|
onAdd: (items: SelectedItems, total: number) => void;
|
|
59
|
-
onClose
|
|
59
|
+
onClose: () => void;
|
|
60
60
|
visible: boolean;
|
|
61
61
|
zIndex?: number;
|
|
62
62
|
limit?: number;
|
|
@@ -69,10 +69,6 @@ export type ProductPickerInterface = {
|
|
|
69
69
|
title?: string;
|
|
70
70
|
postHeader?: React.ReactNode;
|
|
71
71
|
width?: string;
|
|
72
|
-
renderWithoutModal?: boolean;
|
|
73
|
-
onClickSave?: number;
|
|
74
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
75
|
-
hideProductVariants?: boolean;
|
|
76
72
|
rearrangeEnabled?: boolean;
|
|
77
73
|
} & ({
|
|
78
74
|
startupScreen: ScreenName.RearrangeProducts;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useEffect as i}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as l}from"../button/Button.js";import{Input as d}from"../input/Input.js";import{StyledModal as a}from"../modals/styledModal.js";import{Spinner as u}from"../spinner/Spinner.js";import{Tag as h}from"../tag/Tag.js";import{CollectionsScreen as p}from"./collectionScreen.js";import{ProductsScreen as m}from"./productScreen.js";import{RearrangeScreen as g}from"./rearrangeScreen.js";import{collectionsReducer as C,selectedColectionsReducer as b,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as S}from"./searchScreen.js";import{SelectedScreen as f}from"./selectedScreen.js";import{ContainerStyle as y,ScrollContainerStyle as j}from"./style.js";import{OUT_OF_STOCK_ACTION as P}from"./type.js";var x;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(x||(x={}));const k=k=>{const{storeId:I,selectedItems:O,onClose:R,visible:T,zIndex:D,limit:F,hideCollectionCheckbox:w,hideProductCheckbox:E,outOfStockAction:A=P.BLUR,hideVariantCheckbox:B,selectProductsFromCustomCollection:L,hideSelectionCount:z,title:G,width:H,startupScreen:V=x.Collections,rearrangeEnabled:$}=k,[K,M]=r(C,{}),[U,Y]=s([x.Collections,x.RearrangeProducts].includes(V)?V:x.Collections),[q,J]=s("grid"),[N,Q]=s(""),[W,X]=s(0),[Z,_]=s(!1),[ee,te]=s(0),[oe,ce]=s(""),[re,se]=s(!1),[ie,ne]=s(!1),[le,de]=s(),[ae,ue]=r(b,Object.keys(O).length>0?O:{});i((()=>{_(!0),ne(!0),k.collectionFetcher(W,I).then((e=>{M({type:"fetched",data:(null==e?void 0:e.collections)||{}}),_(!1),X((e=>e+1)),ne(!1)})).catch()}),[]),i((()=>{let e=0;Object.keys(ae||[]).forEach((t=>{var o;Object.keys((null===(o=ae[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=ae[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),te(e)})),i((()=>{var e;N&&!(null===(e=null==K?void 0:K[N])||void 0===e?void 0:e.products)&&(_(!0),k.productFetcher(N,I).then((e=>{Object.keys(e).length&&M({type:"productsFetched",data:{collectionId:N,products:e}}),_(!1)})).catch())}),[N]),i((()=>{const e=setTimeout((()=>{"rearrange"!==U&&(oe.length?(se(!0),k.searchFetcher(I,oe).then((e=>{de(Object.assign({},e)),Y("searchProducts"),_(!1),se(!1)}))):Y("collections"))}),800);return()=>clearTimeout(e)}),[oe]);const he=()=>{ue({type:"reset",data:{}})};return e(a,Object.assign({zIndex:D,open:T,onClose:()=>{R(),he()},headingTitle:G||("collections"===U||"products"===U?"Select Products":"view"===U?"Selected Products":"searchProducts"===U?"Searched Products":"rearrange"===U?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:H||"480px"},headerRightCustomElement:"rearrange"===U?(console.log("ignore:",J),e(t,{})):e(t,{}),primaryButton:{buttonText:Z?"Loading...":U===x.RearrangeProducts?"Done":"Add",disabled:Z||ee<1||F&&ee>F||!1,onClick:()=>{k.onAdd(ae,ee),he()}},footerLeftCustomElement:z?e(t,{}):F&&ee>F?e(h,{tagText:`You can only select ${F} products`,type:"negative"}):e(l,ee>0?{onClick:()=>{Y($?x.RearrangeProducts:x.SelectedProducts)},buttonText:`${ee} products selected`,buttonType:["rearrange","view"].includes(U)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(U)}:{disabled:!0,buttonText:`${ee} products selected`,buttonType:"tertiaryGray"})},{children:o(y,{children:[k.postHeader&&e("div",Object.assign({style:{padding:"0 24px"}},{children:k.postHeader})),!k.hideGlobalSearch&&e(t,{children:("collections"===U||"searchProducts"===U)&&e("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:e(d,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>re?e(u,{size:"small",color:n.content.primary}):e(c,{})},id:"listInput",height:"24px",type:"text",value:oe,onChangeText:e=>{e.length&&e.trim().length?ce(e):ce("")}})}))}),o(j,{children:["collections"===U&&e(p,{customCollectionRestriction:k.customCollectionRestriction,dataLoading:ie,collections:K,selectedCollectionsDispatch:ue,setCollectionId:Q,setScreen:Y,selectedCollections:ae,collectionFetcher:k.collectionFetcher,storeId:I,collectionsDispatch:M,setSaveDisabled:_,pagingControls:{curPage:W,setCurPage:X},hideCollectionCheckbox:w}),"products"===U&&N&&e(v.Provider,Object.assign({value:N},{children:e(m,{hideInCollectionSearch:k.hideInCollectionSearch,customCollectionRestriction:k.customCollectionRestriction,productFetcher:k.productFetcher,setScreen:Y,storeId:I,data:K[N],collectionsDispatch:M,selectedCollectionsDispatch:ue,selectedData:ae,setSaveDisabled:_,searchInCollectionFetcher:k.searchInCollectionFetcher,hideProductCheckbox:E,outOfStockAction:A,hideVariantCheckbox:B,selectProductsFromCustomCollection:L})})),"view"===U&&e(f,{selectedCollections:ae||{},selectedCollectionsDispatch:ue,setScreen:Y,collections:K}),"rearrange"===U&&e(g,{selectedCollections:ae||{},selectedCollectionsDispatch:ue,setScreen:Y,outOfStockAction:A,rearrangeViewType:"grid"===q?"list":"grid"}),"searchProducts"===U&&e(S,{customCollectionRestriction:k.customCollectionRestriction,selectedCollections:ae||{},searchedCollections:le||{},selectedCollectionsDispatch:ue,setScreen:Y,collections:K,onBackPress:()=>{ce(""),de({})}})]})]})}))};export{k as ProductPickerModal,x as ScreenName};
|
|
@@ -18,9 +18,6 @@ interface ProductsScreenInterface {
|
|
|
18
18
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
19
19
|
hideVariantCheckbox?: boolean;
|
|
20
20
|
selectProductsFromCustomCollection?: boolean;
|
|
21
|
-
renderWithoutModal?: boolean;
|
|
22
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
23
|
-
hideProductVariants?: boolean;
|
|
24
21
|
}
|
|
25
22
|
export declare const ProductsScreen: (props: ProductsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
26
23
|
interface ProductGroupInterface {
|
|
@@ -35,8 +32,6 @@ interface ProductGroupInterface {
|
|
|
35
32
|
hideProductCheckbox?: boolean;
|
|
36
33
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
37
34
|
hideVariantCheckbox?: boolean;
|
|
38
|
-
hideProductVariants?: boolean;
|
|
39
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
40
35
|
}
|
|
41
36
|
export declare const ProductGroup: (props: ProductGroupInterface) => import("react/jsx-runtime").JSX.Element;
|
|
42
37
|
interface ProductCardInterface {
|
|
@@ -53,8 +48,6 @@ interface ProductCardInterface {
|
|
|
53
48
|
hideProductCheckbox?: boolean;
|
|
54
49
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
55
50
|
hideVariantCheckbox?: boolean;
|
|
56
|
-
hideProductVariants?: boolean;
|
|
57
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
58
51
|
}
|
|
59
52
|
export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
|
|
60
53
|
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 c from"../../assets/icons/box.svg.js";import d from"../../assets/icons/search.svg.js";import{cloneDeep as
|
|
1
|
+
import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import c from"../../assets/icons/box.svg.js";import d from"../../assets/icons/search.svg.js";import{cloneDeep as l}from"lodash";import{useContext as n,useState as r,useEffect as s}from"react";import{Tag as a}from"../tag/Tag.js";import{COLORS as u}from"../../constants/Theme.js";import{CheckBox as h}from"../checkBox/CheckBox.js";import{IconButton as p}from"../icon-button/IconButton.js";import{Input as v}from"../input/Input.js";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as f}from"../shimmer-image/ShimmerImage.js";import{Spinner as y}from"../spinner/Spinner.js";import{BodyCaption as g,TitleRegular as b}from"../TypographyStyle.js";import{truncate as j}from"./collectionScreen.js";import{EmptyState as k}from"./emptyState.js";import{ProductHelper as C}from"./helpers/ProductHelper.js";import{CollectionIdContext as I}from"./reducers.js";import{ProductScreenHeader as O,ProductScreenCollectionCardStyle as x,ProductCardStyle as S}from"./style.js";import{OUT_OF_STOCK_ACTION as P}from"./type.js";import{liftTheStateUp as w}from"./utility.js";const D=o=>{const a=n(I),{data:f,collectionsDispatch:j,selectedData:C,selectedCollectionsDispatch:S,productFetcher:D,storeId:V,setScreen:A,setSaveDisabled:T,hideInCollectionSearch:B,customCollectionRestriction:F,hideProductCheckbox:R,outOfStockAction:U=P.BLUR,hideVariantCheckbox:H=!1,selectProductsFromCustomCollection:L=!1}=o,[W,z]=r(""),[K,N]=r(!1),[_,q]=r(f);s((()=>{const t=setTimeout((()=>{W.length?(N(!0),o.searchInCollectionFetcher(V,a,W).then((t=>{var e;const o=l(f);o.products={};for(const i of t)(null===(e=null==f?void 0:f.products)||void 0===e?void 0:e[i])&&(o.products[i]=f.products[i]);q(o),T(!1),N(!1)}))):q(f)}),800);return()=>clearTimeout(t)}),[W]);const G=!!F&&f.isSmartCollection,J=t=>{var e,o,i,c,d,l,n,r;let s=0,u=0;return!!((null===(o=null===(e=null==C?void 0:C[a])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(d=Object.keys((null===(c=null===(i=null==f?void 0:f.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.forEach((()=>u++)),Object.keys((null===(r=null===(n=null===(l=null==C?void 0:C[a])||void 0===l?void 0:l.products)||void 0===n?void 0:n[t])||void 0===r?void 0:r.variants)||[]).forEach((()=>s++)),s>0&&u!==s))};s((()=>{(null==f?void 0:f.products)||M()}),[]);const M=()=>{T(!0),N(!0),D(a,V).then((t=>{Object.keys(t).length&&(j({type:"productsFetched",data:{collectionId:a,products:t}}),q(Object.assign(Object.assign({},_),{products:t}))),T(!1),N(!1)})).catch()},Q=(t,e)=>{const o=w(e,f);S({type:t,data:Object.assign(Object.assign({},o),{isRestricted:F})})};return t("div",{children:[t(O,{children:[e(p,{Icon:i,height:16,onClick:()=>{A("collections")}}),e(g,Object.assign({style:{color:u.content.secondary}},{children:f.name}))]}),!B&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(v,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>K&&W.length?e(y,{size:"small",color:u.content.primary}):e(d,{})},id:"listInput",height:"24px",type:"text",value:W,onChangeText:t=>{t.length&&t.trim().length?z(t):z("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==_?void 0:_.products)||[]).length>0&&!G&&!W.length&&!R&&t(x,{children:[e(h,{isChecked:!!(null==C?void 0:C[a]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(C[t]){const c=null==f?void 0:f.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 d=null===(e=C[t])||void 0===e?void 0:e.products;return d&&Object.keys(d).forEach((t=>{var e;const o=null===(e=d[t])||void 0===e?void 0:e.variants;o&&Object.keys(o).forEach((()=>i+=1))})),i>0&&o!==i}return!1})(a),onValueChange:function(t){S(t?{type:"selected",data:{id:a,val:f}}:{type:"unselected",data:{id:a}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),e(b,{children:"All Products"})]}),Object.keys((null==_?void 0:_.products)||[]).length?Object.keys(_.products||[]).map((t=>e(E,{outOfStockAction:U,collectionId:a,isProductPartiallyChecked:J(t),productId:t,data:_.products[t],selectedData:C,selectedCollectionsDispatch:S,viewOnly:!L&&!!G,upliftAdditions:Q,hideProductCheckbox:R,hideVariantCheckbox:H},t))):K?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e(k,{title:"No products to show",subtitle:W.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})]})]})},E=o=>{const{collectionId:i,productId:c,data:d,selectedData:l,selectedCollectionsDispatch:n,viewOnly:r,upliftAdditions:s,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:h,hideVariantCheckbox:p}=o,v=t=>{var e,o,d,n,r,s;if(!(null===(o=null===(e=null==l?void 0:l[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[c]))return!1;return!!(null===(s=null===(r=null===(n=null===(d=null==l?void 0:l[i])||void 0===d?void 0:d.products)||void 0===n?void 0:n[c])||void 0===r?void 0:r.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(V,{isVariant:!1,data:d,productId:c,collectionId:i,isSelected:!!(null===(f=null===(m=null==l?void 0:l[i])||void 0===m?void 0:m.products)||void 0===f?void 0:f[c]),isPartiallyChecked:a,selectedCollectionsDispatch:n,upliftAdditions:s,viewOnly:r,hideProductCheckbox:u,hideVariantCheckbox:p},c),Object.keys(d.variants||[]).map((t=>e(V,{isVariant:!0,hideVariantCheckbox:p,data:d.variants[t],variantId:t,productId:c,viewOnly:r,upliftAdditions:s,collectionId:i,isSelected:v(t),selectedCollectionsDispatch:n,outOfStockAction:h},t)))]});var m,f},V=i=>{const{isVariant:c,data:d,productId:l,collectionId:n,variantId:r,isSelected:s,selectedCollectionsDispatch:u,viewOnly:p,upliftAdditions:v,isPartiallyChecked:m,hideProductCheckbox:y,outOfStockAction:g,hideVariantCheckbox:k}=i,I=C.getProductLabels(d,g);return t(S,Object.assign({isVariant:c},{children:[c&&!p&&!k||!c&&!p&&!y?e(h,{isChecked:s,isPartiallyChecked:m||!1,onValueChange:function(t){c?t?v("variantSelected",{productId:l,variantId:r,collectionId:n,variant:d}):u({type:"variantUnselected",data:{productId:l,variantId:r,collectionId:n}}):t?v("productSelected",{productId:l,collectionId:n,product:d}):u({type:"productUnselected",data:{productId:l,collectionId:n}})}}):e(o,{}),e("div",{children:e(f,{width:40,height:40,imageUrl:d.image,alt:"Item",borderRadius:4})}),t("div",Object.assign({style:{display:"flex",flexDirection:"column"}},{children:[e(b,{children:j(d.name,40,!0)}),I?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(a,{tagText:I,type:"warning",theme:"light"})})):e(o,{})]}))]}))};export{V as ProductCard,E as ProductGroup,D as ProductsScreen};
|
|
@@ -11,10 +11,6 @@ interface SearchScreenInterface {
|
|
|
11
11
|
[key: string]: Collection;
|
|
12
12
|
};
|
|
13
13
|
onBackPress: () => void;
|
|
14
|
-
hideVariantCheckbox?: boolean;
|
|
15
|
-
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
16
|
-
hideProductVariants?: boolean;
|
|
17
|
-
hideProductCheckbox?: boolean;
|
|
18
14
|
}
|
|
19
15
|
export declare const SearchScreen: (props: SearchScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
20
16
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as t,Fragment as e}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import{IconButton as
|
|
1
|
+
import{jsxs as o,jsx as t,Fragment as e}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import{IconButton as l}from"../icon-button/IconButton.js";import{BodyCaption as r}from"../TypographyStyle.js";import{EmptyState as s}from"./emptyState.js";import{ProductGroup as c}from"./productScreen.js";import{SelectedScreenHeader as d}from"./style.js";import{liftTheStateUp as n}from"./utility.js";const u=u=>{const{customCollectionRestriction:v,selectedCollections:a,searchedCollections:p,selectedCollectionsDispatch:m,setScreen:h,collections:f,onBackPress:j}=u,y=(o,t)=>{var e,i,l,r,s,c,d,n,u;let v=0,p=0;return!!((null===(i=null===(e=null==a?void 0:a[o])||void 0===e?void 0:e.products)||void 0===i?void 0:i[t])&&(null===(c=Object.keys((null===(s=null===(r=null===(l=null==f?void 0:f[o])||void 0===l?void 0:l.products)||void 0===r?void 0:r[t])||void 0===s?void 0:s.variants)||[]))||void 0===c||c.forEach((()=>p++)),Object.keys((null===(u=null===(n=null===(d=null==a?void 0:a[o])||void 0===d?void 0:d.products)||void 0===n?void 0:n[t])||void 0===u?void 0:u.variants)||[]).forEach((()=>v++)),v>0&&p!==v))};return o("div",{children:[o(d,{children:[t(l,{Icon:i,onClick:()=>{h("collections"),j()}}),t(r,{children:"Searched Products"})]}),t("div",{children:Object.keys(p).length?t(e,{children:Object.keys(p).map((o=>{var e;return Object.keys((null===(e=null==p?void 0:p[o])||void 0===e?void 0:e.products)||[]).map((e=>{let i=!1;return(null==p?void 0:p.isCustom)&&(i=!0),t(c,{collectionId:o,upliftAdditions:(t,e)=>((o,t,e)=>{const i=n(e,p[o]);m({type:t,data:Object.assign(Object.assign({},i),{isRestricted:v})})})(o,t,e),productId:e,data:p[o].products[e],isProductPartiallyChecked:y(o,e),selectedData:a,selectedCollectionsDispatch:m,viewOnly:i},e)}))}))}):t(s,{title:"No search results found",subtitle:"We couldn’t find the product you were looking for."})})]})};export{u as SearchScreen};
|
|
@@ -2,7 +2,6 @@ export declare const ContainerStyle: import("styled-components").StyledComponent
|
|
|
2
2
|
export declare const ScrollContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
|
|
4
4
|
isDisabled: boolean;
|
|
5
|
-
isActive: boolean;
|
|
6
5
|
}, never>;
|
|
7
6
|
export declare const CollectionCardInfoStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
7
|
export declare const CollectionCardDetailStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -10,7 +9,6 @@ export declare const ProductScreenHeader: import("styled-components").StyledComp
|
|
|
10
9
|
export declare const ProductScreenCollectionCardStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
10
|
export declare const ProductCardStyle: import("styled-components").StyledComponent<"div", any, {
|
|
12
11
|
isVariant: boolean;
|
|
13
|
-
isActive: boolean;
|
|
14
12
|
}, never>;
|
|
15
13
|
export declare const SelectedScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
14
|
export declare const CollectionNameHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -9,7 +9,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
9
9
|
overflow-x: hidden;
|
|
10
10
|
`,o=e.div`
|
|
11
11
|
height: 64px;
|
|
12
|
-
background-color: ${e=>e.isDisabled?"#F0F0F0":
|
|
12
|
+
background-color: ${e=>e.isDisabled?"#F0F0F0":"white"};
|
|
13
13
|
border-bottom: 1px solid #e0e0e0;
|
|
14
14
|
padding: 12px 24px;
|
|
15
15
|
display: flex;
|
|
@@ -37,16 +37,16 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
37
37
|
align-items: center;
|
|
38
38
|
padding: 8px 16px;
|
|
39
39
|
margin-top: 16px;
|
|
40
|
-
`,
|
|
40
|
+
`,x=e.div`
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: row;
|
|
43
43
|
column-gap: 16px;
|
|
44
44
|
padding: 12px 16px;
|
|
45
45
|
border-bottom: 1px solid #e0e0e0;
|
|
46
46
|
align-items: center;
|
|
47
|
-
`,
|
|
47
|
+
`,r=e.div`
|
|
48
48
|
height: 64px;
|
|
49
|
-
background-color:
|
|
49
|
+
background-color: white;
|
|
50
50
|
border-bottom: 1px solid #e0e0e0;
|
|
51
51
|
padding: 12px 16px;
|
|
52
52
|
display: flex;
|
|
@@ -99,4 +99,4 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
99
99
|
align-items: center;
|
|
100
100
|
border: 1px solid ${i.stroke.primary};
|
|
101
101
|
border-radius: 4px;
|
|
102
|
-
`;export{l as CollectionCardDetailStyle,d as CollectionCardInfoStyle,o as CollectionCardStyle,c as CollectionNameHolder,t as ContainerStyle,
|
|
102
|
+
`;export{l as CollectionCardDetailStyle,d as CollectionCardInfoStyle,o as CollectionCardStyle,c as CollectionNameHolder,t as ContainerStyle,r as ProductCardStyle,x as ProductScreenCollectionCardStyle,p as ProductScreenHeader,n as ScrollContainerStyle,a as SelectedScreenHeader,g as VariantCardGridStyle,s as VariantCardListStyle};
|
|
@@ -7,11 +7,9 @@ export interface SideModalProps {
|
|
|
7
7
|
footerDirection?: 'row' | 'row-reverse';
|
|
8
8
|
hideCrossButton?: boolean;
|
|
9
9
|
width?: string;
|
|
10
|
-
saveButtonProps
|
|
11
|
-
cancelButtonProps
|
|
10
|
+
saveButtonProps: ButtonProps;
|
|
11
|
+
cancelButtonProps: ButtonProps;
|
|
12
12
|
onClose: () => void;
|
|
13
13
|
zIndex?: number;
|
|
14
|
-
hideFooter?: boolean;
|
|
15
|
-
bodyStyle?: React.CSSProperties;
|
|
16
14
|
}
|
|
17
15
|
export declare const SideModal: React.FC<SideModalProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o,jsxs as t,Fragment as e}from"react/jsx-runtime";import r from"react-dom";import i from"../../assets/icons/cross.svg.js";import{Button as n}from"../button/Button.js";import{TitleMedium as s}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as
|
|
1
|
+
import{jsx as o,jsxs as t,Fragment as e}from"react/jsx-runtime";import r from"react-dom";import i from"../../assets/icons/cross.svg.js";import{Button as n}from"../button/Button.js";import{TitleMedium as s}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as m,SideModalBody as a,SideModalFooter as h,FooterButtonWrapper as l}from"./SideModal.style.js";const p=p=>r.createPortal(o(c,Object.assign({zIndex:p.zIndex},{children:t(d,Object.assign({width:p.width},{children:[t(m,{children:[o(s,{children:p.header}),!p.hideCrossButton&&o(i,{width:24,height:24,onClick:p.onClose})]}),o(a,{children:p.children}),t(h,Object.assign({footerDirection:p.footerDirection},{children:[t(l,Object.assign({footerDirection:p.footerDirection},{children:[o(n,Object.assign({},p.saveButtonProps)),o(n,Object.assign({},p.cancelButtonProps))]})),p.footerCustomComponent?p.footerCustomComponent:o(e,{})]}))]}))})),document.body);export{p as SideModal};
|
|
@@ -5,10 +5,7 @@ export declare const SideModalContainer: import("styled-components").StyledCompo
|
|
|
5
5
|
width?: string | undefined;
|
|
6
6
|
}, never>;
|
|
7
7
|
export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
-
export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
-
hideFooter?: boolean | undefined;
|
|
10
|
-
bodyStyle: React.CSSProperties;
|
|
11
|
-
}, never>;
|
|
8
|
+
export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
9
|
export declare const SideModalFooter: import("styled-components").StyledComponent<"div", any, {
|
|
13
10
|
footerDirection?: "row" | "row-reverse" | undefined;
|
|
14
11
|
}, never>;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as e}from"../../constants/zindex.js";const o=t.div`
|
|
2
2
|
position: fixed;
|
|
3
3
|
top: 0;
|
|
4
4
|
left: 0;
|
|
5
|
-
z-index: ${
|
|
5
|
+
z-index: ${t=>t.zIndex||e.SIDE_MODAL};
|
|
6
6
|
height: 100%;
|
|
7
7
|
width: 100%;
|
|
8
8
|
background-color: rgba(0, 0, 0, 0.4);
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
11
11
|
justify-content: flex-end;
|
|
12
|
-
`,
|
|
12
|
+
`,r=t.div`
|
|
13
13
|
height: 100%;
|
|
14
|
-
width: ${
|
|
14
|
+
width: ${t=>t.width||"566px"};
|
|
15
15
|
background: ${i.surface.standard};
|
|
16
16
|
position: relative;
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
|
-
`,
|
|
19
|
+
`,n=t.div`
|
|
20
20
|
width: 100%;
|
|
21
21
|
height: 60px;
|
|
22
22
|
position: sticky;
|
|
@@ -31,27 +31,24 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
|
|
|
31
31
|
svg:hover {
|
|
32
32
|
cursor: pointer;
|
|
33
33
|
}
|
|
34
|
-
`,
|
|
34
|
+
`,d=t.div`
|
|
35
35
|
overflow-y: auto;
|
|
36
36
|
padding: 24px;
|
|
37
|
-
height:
|
|
38
|
-
|
|
39
|
-
${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
|
|
40
|
-
`}}
|
|
41
|
-
`,p=e.div`
|
|
37
|
+
height: calc(100% - 120px);
|
|
38
|
+
`,s=t.div`
|
|
42
39
|
height: 60px;
|
|
43
40
|
width: 100%;
|
|
44
41
|
position: sticky;
|
|
45
42
|
bottom: 0;
|
|
46
43
|
display: flex;
|
|
47
|
-
flex-direction: ${
|
|
44
|
+
flex-direction: ${t=>t.footerDirection||"row"};
|
|
48
45
|
justify-content: space-between;
|
|
49
46
|
align-items: center;
|
|
50
47
|
background: ${i.surface.standard};
|
|
51
48
|
border-top: 1px solid ${i.stroke.primary};
|
|
52
49
|
padding: 0px 24px;
|
|
53
|
-
`,
|
|
50
|
+
`,p=t.div`
|
|
54
51
|
display: flex;
|
|
55
|
-
flex-direction: ${
|
|
52
|
+
flex-direction: ${t=>t.footerDirection||"row"};
|
|
56
53
|
gap: 8px;
|
|
57
|
-
`;export{
|
|
54
|
+
`;export{p as FooterButtonWrapper,d as SideModalBody,r as SideModalContainer,s as SideModalFooter,n as SideModalHeader,o as SideModalStyle};
|