@bikdotai/bik-component-library 0.0.455-beta.13 → 0.0.455-beta.ppi-1
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/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/cjs/components/product-picker-v2/ProductPickerTag.d.ts +8 -0
- package/dist/cjs/components/product-picker-v2/ProductPickerTag.js +1 -0
- package/dist/cjs/components/product-picker-v2/collectionScreen.d.ts +19 -0
- package/dist/cjs/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/helpers/ProductHelper.d.ts +2 -0
- package/dist/cjs/components/product-picker-v2/helpers/ProductHelper.js +1 -1
- package/dist/cjs/components/product-picker-v2/modal.d.ts +16 -3
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/product-picker-v2/productInfoOverlay.d.ts +11 -0
- package/dist/cjs/components/product-picker-v2/productInfoOverlay.js +39 -0
- package/dist/cjs/components/product-picker-v2/productScreen.d.ts +10 -3
- package/dist/cjs/components/product-picker-v2/productScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/rearrangeScreen.d.ts +3 -1
- package/dist/cjs/components/product-picker-v2/rearrangeScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/reducers.d.ts +7 -1
- package/dist/cjs/components/product-picker-v2/reducers.js +1 -1
- package/dist/cjs/components/product-picker-v2/searchScreen.d.ts +10 -3
- package/dist/cjs/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/selectedScreen.d.ts +5 -1
- package/dist/cjs/components/product-picker-v2/selectedScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/style.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/style.js +13 -8
- package/dist/cjs/components/product-picker-v2/utility.d.ts +12 -0
- package/dist/cjs/components/product-picker-v2/utility.js +1 -1
- package/dist/cjs/components/product-picker-v2/variant.js +1 -1
- package/dist/cjs/components/template-context-mapper/utils/getFormattedMonthDate.js +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/esm/components/product-picker-v2/ProductPickerTag.d.ts +8 -0
- package/dist/esm/components/product-picker-v2/ProductPickerTag.js +1 -0
- package/dist/esm/components/product-picker-v2/collectionScreen.d.ts +19 -0
- package/dist/esm/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/helpers/ProductHelper.d.ts +2 -0
- package/dist/esm/components/product-picker-v2/helpers/ProductHelper.js +1 -1
- package/dist/esm/components/product-picker-v2/modal.d.ts +16 -3
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker-v2/productInfoOverlay.d.ts +11 -0
- package/dist/esm/components/product-picker-v2/productInfoOverlay.js +39 -0
- package/dist/esm/components/product-picker-v2/productScreen.d.ts +10 -3
- package/dist/esm/components/product-picker-v2/productScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/rearrangeScreen.d.ts +3 -1
- package/dist/esm/components/product-picker-v2/rearrangeScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/reducers.d.ts +7 -1
- package/dist/esm/components/product-picker-v2/reducers.js +1 -1
- package/dist/esm/components/product-picker-v2/searchScreen.d.ts +10 -3
- package/dist/esm/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/selectedScreen.d.ts +5 -1
- package/dist/esm/components/product-picker-v2/selectedScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/style.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/style.js +13 -8
- package/dist/esm/components/product-picker-v2/utility.d.ts +12 -0
- package/dist/esm/components/product-picker-v2/utility.js +1 -1
- package/dist/esm/components/product-picker-v2/variant.js +1 -1
- package/dist/esm/components/template-context-mapper/utils/getFormattedMonthDate.js +1 -0
- package/package.json +1 -1
|
@@ -1,17 +1,16 @@
|
|
|
1
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 o=i(e);const r=o.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
background-color: white;
|
|
4
|
-
|
|
5
|
-
min-height: 600px;
|
|
4
|
+
height: 600px;
|
|
6
5
|
flex-direction: column;
|
|
7
6
|
`,l=o.default.div`
|
|
8
7
|
overflow-y: scroll;
|
|
9
8
|
overflow-x: hidden;
|
|
10
|
-
`,
|
|
9
|
+
`,n=o.default.div`
|
|
11
10
|
height: 64px;
|
|
12
11
|
background-color: ${e=>e.isDisabled?"#F0F0F0":e.isActive?t.COLORS.background.positive.light:"white"};
|
|
13
12
|
border-bottom: 1px solid #e0e0e0;
|
|
14
|
-
padding: 12px 24px;
|
|
13
|
+
padding: ${e=>e.usedInSearch?"12px 16px":"12px 24px"};
|
|
15
14
|
display: flex;
|
|
16
15
|
flex-direction: row;
|
|
17
16
|
column-gap: 16px;
|
|
@@ -21,7 +20,7 @@
|
|
|
21
20
|
cursor: pointer;
|
|
22
21
|
background-color: ${t.COLORS.surface.hovered};
|
|
23
22
|
}
|
|
24
|
-
`,
|
|
23
|
+
`,d=o.default.div`
|
|
25
24
|
display: flex;
|
|
26
25
|
flex-direction: row;
|
|
27
26
|
justify-content: center;
|
|
@@ -41,6 +40,9 @@
|
|
|
41
40
|
align-items: center;
|
|
42
41
|
padding: 8px 16px;
|
|
43
42
|
margin-top: 16px;
|
|
43
|
+
position: sticky;
|
|
44
|
+
top: 0;
|
|
45
|
+
z-index: 10;
|
|
44
46
|
`,c=o.default.div`
|
|
45
47
|
display: flex;
|
|
46
48
|
flex-direction: row;
|
|
@@ -49,7 +51,7 @@
|
|
|
49
51
|
border-bottom: 1px solid #e0e0e0;
|
|
50
52
|
align-items: center;
|
|
51
53
|
`,x=o.default.div`
|
|
52
|
-
height: 64px;
|
|
54
|
+
min-height: 64px;
|
|
53
55
|
background-color: ${e=>e.isActive?t.COLORS.background.positive.light:"white"};
|
|
54
56
|
border-bottom: 1px solid #e0e0e0;
|
|
55
57
|
padding: 12px 16px;
|
|
@@ -72,11 +74,14 @@
|
|
|
72
74
|
justify-content: flex-start;
|
|
73
75
|
align-items: center;
|
|
74
76
|
padding: 8px 16px;
|
|
77
|
+
position: sticky;
|
|
78
|
+
top: 0;
|
|
79
|
+
z-index: 10;
|
|
75
80
|
`,f=o.default.div`
|
|
76
81
|
display: flex;
|
|
77
82
|
flex-direction: column;
|
|
78
83
|
`,u=o.default.div`
|
|
79
|
-
height: 72px;
|
|
84
|
+
min-height: 72px;
|
|
80
85
|
background: white;
|
|
81
86
|
padding: 12px 16px;
|
|
82
87
|
display: flex;
|
|
@@ -107,4 +112,4 @@
|
|
|
107
112
|
align-items: center;
|
|
108
113
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
109
114
|
border-radius: 4px;
|
|
110
|
-
`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=
|
|
115
|
+
`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=d,exports.CollectionCardStyle=n,exports.CollectionNameHolder=f,exports.ContainerStyle=r,exports.ProductCardStyle=x,exports.ProductScreenCollectionCardStyle=c,exports.ProductScreenHeader=p,exports.ScrollContainerStyle=l,exports.SelectedScreenHeader=s,exports.VariantCardGridStyle=g,exports.VariantCardListStyle=u;
|
|
@@ -1 +1,13 @@
|
|
|
1
|
+
import { Collection, FbStatusFetcherReturn, Product, SelectedItems } from './modal';
|
|
2
|
+
import { CollectionsActions } from './reducers';
|
|
1
3
|
export declare const liftTheStateUp: (payload: any, data: any) => any;
|
|
4
|
+
export declare function paginateSelectedItems(selectedItems: SelectedItems, limit: number, offset: number): {
|
|
5
|
+
[key: string]: Collection;
|
|
6
|
+
};
|
|
7
|
+
export declare const fetchFbStatusCollection: (data: SelectedItems, storeId: string, dispatcher: any, fbStatusFetcher?: ((storeId: string, variantIds: string[]) => FbStatusFetcherReturn) | undefined, dispatchType?: string) => void;
|
|
8
|
+
export declare const getVariantIdsToFetchAtProductLevel: (products: {
|
|
9
|
+
[key: string]: Product;
|
|
10
|
+
}, globalData?: Collection) => string[];
|
|
11
|
+
export declare const markVariantsAsApprovedProductsLevel: (products: {
|
|
12
|
+
[key: string]: Product;
|
|
13
|
+
}, dispatcher: React.Dispatch<CollectionsActions>, collectionId: string, curScreenData?: Collection, setCurScreenData?: React.Dispatch<React.SetStateAction<Collection>>) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("lodash");function t(o,t,l){if(!o)return{};const n=Object.keys(o).slice(l,l+t),d={};return n.forEach((t=>{d[t]=o[t]})),d}const l=(o,t,l)=>{Object.keys(o).forEach((t=>{var l,n;const d=null!==(n=null===(l=o[t])||void 0===l?void 0:l.products)&&void 0!==n?n:{};Object.keys(d).forEach((l=>{var n,d,i,s;const e=null!==(s=null===(i=null===(d=null===(n=o[t])||void 0===n?void 0:n.products)||void 0===d?void 0:d[l])||void 0===i?void 0:i.variants)&&void 0!==s?s:{};Object.keys(e).forEach((n=>{var d,i,s,e;const v=null===(e=null===(s=null===(i=null===(d=o[t])||void 0===d?void 0:d.products)||void 0===i?void 0:i[l])||void 0===s?void 0:s.variants)||void 0===e?void 0:e[n];v&&!v.fbStatus&&(v.fbStatus="APPROVED")}))}))})),t({type:l,data:o})};exports.fetchFbStatusCollection=function(o,t,n,d){let i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"paged";d||l(o,n,i);const s=(o=>{const t=[];return Object.keys(o).forEach((l=>{var n,d;const i=null!==(d=null===(n=o[l])||void 0===n?void 0:n.products)&&void 0!==d?d:{};Object.keys(i).forEach((n=>{var d,i,s,e;const v=null!==(e=null===(s=null===(i=null===(d=o[l])||void 0===d?void 0:d.products)||void 0===i?void 0:i[n])||void 0===s?void 0:s.variants)&&void 0!==e?e:{};Object.keys(v).forEach((d=>{var i,s,e,v;const a=null===(v=null===(e=null===(s=null===(i=o[l])||void 0===i?void 0:i.products)||void 0===s?void 0:s[n])||void 0===e?void 0:e.variants)||void 0===v?void 0:v[d];(null==a?void 0:a.fbStatus)||t.push(d)}))}))})),t})(o);console.log("vj: variantids",s),s.length>0&&d&&d(t,s).then((t=>{const l=Object.assign({},o);Object.keys(l).forEach((o=>{var n,d;const i=null!==(d=null===(n=l[o])||void 0===n?void 0:n.products)&&void 0!==d?d:{};Object.keys(i).forEach((n=>{var d,i,s,e;const v=null!==(e=null===(s=null===(i=null===(d=l[o])||void 0===d?void 0:d.products)||void 0===i?void 0:i[n])||void 0===s?void 0:s.variants)&&void 0!==e?e:{};Object.keys(v).forEach((d=>{var i,s,e,v;const a=null===(v=null===(e=null===(s=null===(i=l[o])||void 0===i?void 0:i.products)||void 0===s?void 0:s[n])||void 0===e?void 0:e.variants)||void 0===v?void 0:v[d];a&&"REJECTED"===t[d]?a.fbStatus="REJECTED":a&&"APPROVED"===t[d]&&(a.fbStatus="APPROVED")}))}))})),console.log("updated data",l,i),n({type:i,data:l})})).catch((t=>{console.error("Error in fbStatusFetcher",t),l(o,n,i)}))},exports.getVariantIdsToFetchAtProductLevel=(o,t)=>{const l=[];return Object.keys(null!=o?o:{}).forEach((n=>{var d,i;const s=null!==(i=null===(d=null==o?void 0:o[n])||void 0===d?void 0:d.variants)&&void 0!==i?i:{};Object.keys(s).forEach((d=>{var i,s,e,v,a;let c;c=t?null===(e=null===(s=null===(i=null==t?void 0:t.products)||void 0===i?void 0:i[n])||void 0===s?void 0:s.variants)||void 0===e?void 0:e[d]:null===(a=null===(v=null==o?void 0:o[n])||void 0===v?void 0:v.variants)||void 0===a?void 0:a[d],(null==c?void 0:c.fbStatus)||l.push(d)}))})),l},exports.liftTheStateUp=(t,l)=>{const n=o.cloneDeep(l);if(delete n.products,(t=Object.assign(Object.assign({},t),{catalogOnlyData:n})).productId&&l.products){const d=o.cloneDeep(l.products[t.productId]);(null==d?void 0:d.variants)&&delete d.variants,t=Object.assign(Object.assign({},t),{catalogOnlyData:n,productOnlyData:d})}return t},exports.markVariantsAsApprovedProductsLevel=(o,t,l,n,d)=>{const i=Object.assign({},o);if(Object.keys(o).forEach((t=>{var l,n;Object.keys(null!==(n=null===(l=null==o?void 0:o[t])||void 0===l?void 0:l.variants)&&void 0!==n?n:{}).forEach((l=>{var n,d;const s=null===(n=null==o?void 0:o[t].variants)||void 0===n?void 0:n[l];s&&(s.fbStatus="APPROVED");const e=null===(d=null==i?void 0:i[t])||void 0===d?void 0:d.variants;e&&e[l]&&(e[l]=s)}))})),n&&d){const o=Object.assign({},n);o.products=i,d(o)}else t({type:"productsPaged",data:{collectionId:l,products:i}})},exports.paginateSelectedItems=function(o,l,n){var d;const i={};let s=0;console.log("paginated offset",n);for(const e in o)if(Object.prototype.hasOwnProperty.call(o,e)){const v=o[e],a=t(v.products,l,n-s);a&&Object.keys(a).length>0&&(i[e]=Object.assign(Object.assign({},v),{products:a})),s+=Object.keys(null!==(d=v.products)&&void 0!==d?d:{}).length}return i};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),r=require("../../assets/icons/drag_handle.svg.js"),i=require("../../constants/Theme.js"),a=require("../icon-button/IconButton.js"),s=require("../shimmer-image/ShimmerImage.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),r=require("../../assets/icons/drag_handle.svg.js"),i=require("../../constants/Theme.js"),a=require("../icon-button/IconButton.js"),s=require("../shimmer-image/ShimmerImage.js"),o=require("../TypographyStyle.js"),n=require("./collectionScreen.js"),c=require("./ProductPickerTag.js"),d=require("./style.js"),l=require("../tooltips/Tooltip.js");exports.VariantCardGridView=t=>{const{data:r}=t;return e.jsx(d.VariantCardGridStyle,{children:e.jsx(l.Tooltip,Object.assign({body:r.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e.jsx(s.ShimmerImage,{width:72,height:72,imageUrl:r.image,alt:"Item",borderRadius:4})}))})},exports.VariantCardListView=u=>{const{data:m,selectedCollectionsDispatch:h,outOfStockAction:j}=u,g=e=>{let t;return t=m.name.includes(m.productName)?m.name:`${m.productName} ${m.name}`,e?n.truncate(t,34,!0):t};return e.jsxs(d.VariantCardListStyle,{children:[e.jsx(r.default,{width:24,height:24,color:i.COLORS.content.placeholder}),e.jsx("div",{children:e.jsx(s.ShimmerImage,{width:40,height:40,imageUrl:m.image,alt:"Item",borderRadius:4},m.variantId)}),e.jsxs("div",Object.assign({className:"tooltip-title-tag"},{children:[e.jsx(l.Tooltip,Object.assign({body:g(!1),placement:"bottom",delay:400},{children:e.jsx(o.TitleRegular,{children:g(!0)})})),e.jsx(c.ProductPickerTag,{isVariant:!0,data:m,outOfStockAction:j})]})),e.jsx(a.IconButton,{Icon:()=>e.jsx(t.default,{width:24,height:24,color:i.COLORS.content.placeholder}),onClick:()=>{h&&h({type:"variantUnselected",data:{productId:m.productId,variantId:m.variantId,collectionId:m.collectionId}}),u.onDelete&&u.onDelete()}})]})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];exports.getFormattedMonthDate=function(e){if("string"==typeof e)return e;const r=t[e.getMonth()],n=e.getDate();return`${r} ${n<10?"0":""}${n}`};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{COLORS as n}from"../../constants/Theme.js";import o from"../../assets/icons/arrow_down.svg.js";import r from"../../assets/icons/arrow_up.svg.js";import s from"../../assets/icons/info.svg.js";import{Tag as a}from"../tag/Tag.js";import{getFormattedMonthDate as l}from"../template-context-mapper/utils/getFormattedMonthDate.js";import{Tooltip as c}from"../tooltips/Tooltip.js";import{BodySecondary as d,TitleSmall as g,Caption as m,TitleLarge as p,TitleMedium as h}from"../TypographyStyle.js";import{AnalyticsTrendContainer as y}from"./CommonStyles.js";const b=o=>{let{title:r,value:l,trendPercent:g,type:m="horizontal",timeline:b,customRange:v,tooltip:j,card:u=!0,rightSeparator:x=!1,size:O="big",share:w=!1,formatVal:I,prefixSymbol:R,trailingIcon:T,onTrailIconClick:$,iconTooltipBody:C}=o;const D="big"===O?p:h,k=void 0!==g?g<0?"negative":0===g?"neutral":"positive":void 0,S=void 0!==g?w?Math.round(g):Math.abs(Math.round(g)):void 0;return e(y,Object.assign({card:u},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:x?1:0,borderRightColor:n.stroke.primary,borderRightStyle:"solid",paddingLeft:u?0:24,paddingRight:u?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(d,Object.assign({style:{color:n.content.secondary}},{children:r})),j&&e(c,Object.assign({body:j,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e(s,{color:n.content.inactive,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},w?{justifyContent:"space-between"}:{})},{children:[e(D,Object.assign({style:{color:n.content.primary}},{children:void 0===l?"--":"number"==typeof l&&I?`${null!=R?R:""}${new Intl.NumberFormat("en-IN",{}).format(l)}`:`${null!=R?R:""}${l}`})),"horizontal"===m&&!w&&e(f,{timeline:b,customRange:v,percent:S,direction:k}),w&&void 0!==S&&e(a,{tagText:`${S} %`,theme:"light",type:"neutral"})]})),"vertical"===m&&!w&&e("div",Object.assign({style:{marginTop:12}},{children:e(f,{timeline:b,customRange:v,percent:S,direction:k})}))]})),C&&e(c,Object.assign({body:C,placement:"right"},{children:T&&e("div",Object.assign({className:"icon--holder",onClick:$},{children:i.createElement(T,{height:20,width:20,color:n.content.secondary})}))}))]}))}))},f=i=>{let{percent:s,direction:a,timeline:c,customRange:d}=i;const p="negative"===a?o:r,h="negative"===a?n.background.negative.vibrant:"positive"===a?n.background.positive.vibrant:n.content.placeholder,y="today"===c?"vs yesterday":"yesterday"===c?"vs 1 day before":"7 days"===c?"vs last 7 days":"30 days"===c?"vs last 30 days":"custom"===c&&d?`vs ${l(d[0])} - ${l(d[1])}`:"";return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof s&&e(p,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof s&&a&&t(g,Object.assign({style:{color:h}},{children:["neutral"===a?0:s,"%"]})),c&&e(m,Object.assign({style:{marginLeft:4,color:n.content.placeholder}},{children:y}))]}))};export{b as AnalyticsTrend};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Product, ProductVariant } from './modal';
|
|
2
|
+
import { OUT_OF_STOCK_ACTION } from './type';
|
|
3
|
+
export type ProductPickerTagType = {
|
|
4
|
+
isVariant: boolean;
|
|
5
|
+
data: Product | ProductVariant;
|
|
6
|
+
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
7
|
+
};
|
|
8
|
+
export declare const ProductPickerTag: (props: ProductPickerTagType) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as t,Fragment as e}from"react/jsx-runtime";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as l}from"../tag/Tag.js";import{ProductHelper as r}from"./helpers/ProductHelper.js";const o=o=>{var s,n;const{isVariant:a,data:m,outOfStockAction:p}=o;let d=m,c=a;1===Object.keys(null!==(s=null==m?void 0:m.variants)&&void 0!==s?s:{}).length&&(d=Object.values(null!==(n=null==m?void 0:m.variants)&&void 0!==n?n:{})[0],c=!0);const u=r.getProductLabels(d,p),g=r.getTagType(null!=u?u:"");return t("div",Object.assign({style:{display:"flex"}},{children:!(null==d?void 0:d.fbStatus)&&c?t(i,{boxes:[{height:"24px",width:"100px",marginTop:"0px"}]}):u?t("div",Object.assign({style:{display:"flex"}},{children:t(l,{tagText:u,type:g,theme:"light"})})):t(e,{})}))};export{o as ProductPickerTag};
|
|
@@ -13,6 +13,7 @@ interface CollectionsScreenInterface {
|
|
|
13
13
|
storeId: string;
|
|
14
14
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
15
15
|
setCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
16
|
+
setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
16
17
|
setScreen: React.Dispatch<React.SetStateAction<string>>;
|
|
17
18
|
collectionsDispatch: React.Dispatch<CollectionsActions>;
|
|
18
19
|
setSaveDisabled: React.Dispatch<boolean>;
|
|
@@ -25,4 +26,22 @@ interface CollectionsScreenInterface {
|
|
|
25
26
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
26
27
|
}
|
|
27
28
|
export declare const CollectionsScreen: (props: CollectionsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export interface CollectionCardInterface {
|
|
30
|
+
customCollectionRestriction?: boolean;
|
|
31
|
+
data: Collection;
|
|
32
|
+
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
33
|
+
setCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
34
|
+
setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
35
|
+
setScreen: React.Dispatch<React.SetStateAction<string>>;
|
|
36
|
+
id: string;
|
|
37
|
+
isChecked: boolean;
|
|
38
|
+
isDisabled: boolean;
|
|
39
|
+
isPartiallyChecked: boolean;
|
|
40
|
+
hideCollectionCheckbox?: boolean;
|
|
41
|
+
renderWithoutModal?: boolean;
|
|
42
|
+
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
43
|
+
selectedCollections: SelectedItems;
|
|
44
|
+
usedInSearch?: boolean;
|
|
45
|
+
}
|
|
46
|
+
export declare const CollectionCard: (props: CollectionCardInterface) => import("react/jsx-runtime").JSX.Element;
|
|
28
47
|
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
|
|
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 l}from"react";import{CheckBox as r}from"../checkBox/CheckBox.js";import{IconButton as n}from"../icon-button/IconButton.js";import{BikShimmer as d}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as a}from"../tag/Tag.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{TitleRegular as p,BodyPrimary as u}from"../TypographyStyle.js";import{EmptyState as m}from"./emptyState.js";import{CollectionCardStyle as C,CollectionCardInfoStyle as g,CollectionCardDetailStyle as b,CollectionNameHolder as v}from"./style.js";const y=(e,t,o)=>{if(e.length<=t)return e;const i=e.slice(0,t-1);return(o?i.slice(0,i.lastIndexOf(" ")):i)+"..."},f=o=>{const{customCollectionRestriction:i,dataLoading:r,collections:n,selectedCollectionsDispatch:a,setCollectionId:h,setSelectedCollectionId:p,selectedCollections:u,setScreen:C,collectionFetcher:g,collectionsDispatch:b,pagingControls:v,storeId:y,setSaveDisabled:f,hideCollectionCheckbox:j,renderWithoutModal:x,pickerType:O}=o,I=c(null),S=c(v.curPage),E=!!i&&(null==u?void 0:u.isCustom),[T,D]=s(!1),P=c(!1);l((()=>{S.current=v.curPage}),[v.curPage]),l((()=>{const e=new IntersectionObserver((e=>{e[0].isIntersecting&&S.current>0&&!P.current&&(f(!0),D(!0),g(S.current,y).then((e=>{b({type:"paged",data:(null==e?void 0:e.collections)||{}}),v.setCurPage(S.current+1),D(!1),f(!1),Object.keys(e).length||(P.current=!0)})).catch())}),{threshold:1});return I.current&&e.observe(I.current),()=>{I.current&&e.unobserve(I.current)}}),[I]);const w=e=>{var t,o;let i=0,c=0;if(u[e]){const s=null===(t=n[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 l=null===(o=u[e])||void 0===o?void 0:o.products;return l&&Object.keys(l).forEach((e=>{var t;const o=null===(t=l[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(n).length?Object.keys(n).map((e=>t(k,{customCollectionRestriction:i,data:n[e],isDisabled:E&&!(null==u?void 0:u[e]),isChecked:!!(null==u?void 0:u[e]),isPartiallyChecked:w(e),selectedCollectionsDispatch:a,setCollectionId:h,setSelectedCollectionId:p,setScreen:C,id:e,hideCollectionCheckbox:j||"-1"===e,selectedCollections:u,renderWithoutModal:x,pickerType:O},e))):r?[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(m,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),t("div",{ref:I}),T&&[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)))]})},k=c=>{const{customCollectionRestriction:s,data:l,selectedCollectionsDispatch:d,setCollectionId:m,setSelectedCollectionId:f,isPartiallyChecked:k,setScreen:j,id:x,isChecked:O,isDisabled:I,hideCollectionCheckbox:S,pickerType:E,selectedCollections:T,usedInSearch:D}=c;console.log("collection card props",{id:x,props:c});return e(C,Object.assign({isDisabled:I,onClick:e=>{if(!I){if("COLLECTION"===E)return e.stopPropagation(),d({type:"reset",data:{}}),d({type:"selected",data:{id:x,val:l,isRestricted:s}}),void m(x);m(x),j("products")}},isActive:!!T[x],usedInSearch:null!=D&&D},{children:[e(g,{children:[!S&&t(r,{isDisabled:I,isChecked:O,isPartiallyChecked:k,onValueChange:function(e,t,o){null==o||o.stopPropagation(),d(e?{type:"selected",data:{id:x,val:l,isRestricted:s}}:{type:"unselected",data:{id:x}}),f(e?x:"")}}),t(b,{children:t(h,Object.assign({body:l.name,placement:"bottom",delay:400},{children:e(v,{children:[t(D?u:p,{children:y(l.name,40,!0)}),l.isSmartCollection?t("div",Object.assign({style:{display:"flex"}},{children:t(a,{tagText:"Smart Collection",type:"warning"})})):t(o,{})]})}))})]}),"COLLECTION"!==E&&t(n,{height:12,width:12,disabled:I,Icon:i})]}))};export{k as CollectionCard,f as CollectionsScreen,y as truncate};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { TagType } from "../../tag/model";
|
|
1
2
|
import { Product, ProductVariant, SelectedItems } from '../modal';
|
|
2
3
|
import { OUT_OF_STOCK_ACTION } from '../type';
|
|
3
4
|
import { ProductVariantForRearrange } from '../variant';
|
|
@@ -31,6 +32,7 @@ export declare class ProductHelper {
|
|
|
31
32
|
* @param outOfStockAction
|
|
32
33
|
*/
|
|
33
34
|
static getProductLabels(productVariant: Product | ProductVariant, outOfStockAction?: OUT_OF_STOCK_ACTION): string | null;
|
|
35
|
+
static getTagType: (tagText: string) => TagType;
|
|
34
36
|
}
|
|
35
37
|
/**
|
|
36
38
|
* Loops through each collection, each product, each variant.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{OUT_OF_STOCK_ACTION as n}from"../type.js";const t={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock"};class
|
|
1
|
+
import{OUT_OF_STOCK_ACTION as n}from"../type.js";const t={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock",FB_REJECTED:"Rejected on FB catalog"};class l{static getProductLabels(l){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.NORMAL,u="NORMAL";if(l.variants)return t[u];const a=l;return"REJECTED"===(null==a?void 0:a.fbStatus)?t.FB_REJECTED:(i===n.HIDE&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),i===n.BLUR&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="OUT_OF_STOCK"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),i===n.NORMAL&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NORMAL"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),t[u])}}Object.defineProperty(l,"getTagType",{enumerable:!0,configurable:!0,writable:!0,value:n=>t.FB_REJECTED===n?"negative":"warning"});const i=n=>{let t=[];Object.keys(n).forEach((l=>{var i;return Object.keys((null===(i=null==n?void 0:n[l])||void 0===i?void 0:i.products)||[]).forEach((i=>{var u,a;const d=null!==(u=n[l].products)&&void 0!==u?u:[],o=null!==(a=d[i].variants)&&void 0!==a?a:[];return Object.keys(o).map((n=>{const t=o[n];t.variantId=n,t.productId=i,t.collectionId=l,t.productName=d[i].name})),t=[...t,...Object.values(o)],t}))}));const l=t.sort(((n,t)=>null==n.displayOrder&&null==t.displayOrder?0:null==n.displayOrder?1:null==t.displayOrder?-1:n.displayOrder-t.displayOrder));return l.forEach(((n,t)=>{n.displayOrder=t})),l};export{l as ProductHelper,i as parseSelectedVariantsToArray};
|
|
@@ -7,10 +7,13 @@ export interface ProductVariant {
|
|
|
7
7
|
quantity: number;
|
|
8
8
|
skipSync?: boolean;
|
|
9
9
|
displayOrder?: number | null;
|
|
10
|
+
fbStatus?: FbProductStatus;
|
|
11
|
+
description?: string;
|
|
10
12
|
}
|
|
11
13
|
export interface Product {
|
|
12
14
|
name: string;
|
|
13
15
|
image: string;
|
|
16
|
+
description?: string;
|
|
14
17
|
variants?: {
|
|
15
18
|
[key: string]: ProductVariant;
|
|
16
19
|
};
|
|
@@ -26,6 +29,10 @@ export interface Collection {
|
|
|
26
29
|
export type SelectedItems = {
|
|
27
30
|
[key: string]: Collection;
|
|
28
31
|
};
|
|
32
|
+
export type SearchedItems = {
|
|
33
|
+
collections: SelectedItems;
|
|
34
|
+
products: SelectedItems;
|
|
35
|
+
};
|
|
29
36
|
export type CollectionFetcherReturn = Promise<{
|
|
30
37
|
collections: {
|
|
31
38
|
[key: string]: {
|
|
@@ -38,6 +45,10 @@ export type CollectionFetcherReturn = Promise<{
|
|
|
38
45
|
export type ProductFetcherReturn = Promise<{
|
|
39
46
|
[key: string]: Product;
|
|
40
47
|
}>;
|
|
48
|
+
export type FbStatusFetcherReturn = Promise<{
|
|
49
|
+
[key: string]: FbProductStatus;
|
|
50
|
+
}>;
|
|
51
|
+
export type FbProductStatus = 'APPROVED' | 'REJECTED';
|
|
41
52
|
export declare enum ScreenName {
|
|
42
53
|
Collections = "collections",
|
|
43
54
|
RearrangeProducts = "rearrange",
|
|
@@ -49,10 +60,11 @@ export type ProductPickerInterface = {
|
|
|
49
60
|
hideGlobalSearch?: boolean;
|
|
50
61
|
hideInCollectionSearch?: boolean;
|
|
51
62
|
customCollectionRestriction?: boolean;
|
|
52
|
-
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) =>
|
|
53
|
-
searchFetcher: (storeId: string, query: string) => Promise<SelectedItems>;
|
|
63
|
+
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => ProductFetcherReturn;
|
|
64
|
+
searchFetcher: (storeId: string, query: string) => Promise<SearchedItems | SelectedItems>;
|
|
54
65
|
collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
|
|
55
|
-
productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
|
|
66
|
+
productFetcher: (collectionId: string, storeId: string, limit?: number, offset?: number) => ProductFetcherReturn;
|
|
67
|
+
fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
|
|
56
68
|
storeId: string;
|
|
57
69
|
selectedItems: SelectedItems;
|
|
58
70
|
onAdd: (items: SelectedItems, total: number) => void;
|
|
@@ -77,6 +89,7 @@ export type ProductPickerInterface = {
|
|
|
77
89
|
rearrangeEnabled?: boolean;
|
|
78
90
|
selectSingleItem?: boolean;
|
|
79
91
|
stickyFooter?: boolean;
|
|
92
|
+
showProductDetailInfoIcon?: boolean;
|
|
80
93
|
} & ({
|
|
81
94
|
startupScreen: ScreenName.RearrangeProducts;
|
|
82
95
|
rearrangeEnabled: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as n}from"react";import{COLORS as l}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";import{Input as a}from"../input/Input.js";import{StyledModal as u}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as m}from"./collectionScreen.js";import{ProductInfoOverlay as C}from"./productInfoOverlay.js";import{ProductsScreen as g}from"./productScreen.js";import{RearrangeScreen as f}from"./rearrangeScreen.js";import{collectionsReducer as b,searchReducer as S,selectedColectionsReducer as y,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as k}from"./searchScreen.js";import{SelectedScreen as x}from"./selectedScreen.js";import{ContainerStyle as P,ScrollContainerStyle as I}from"./style.js";import{OUT_OF_STOCK_ACTION as j}from"./type.js";var F;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(F||(F={}));const T=T=>{const{storeId:O,selectedItems:D,onClose:w,visible:R,zIndex:E,exactLimit:A,limit:$,hideCollectionCheckbox:V,hideProductCheckbox:B,outOfStockAction:L=j.BLUR,hideVariantCheckbox:M,selectProductsFromCustomCollection:z,hideSelectionCount:W,title:G,width:H,renderWithoutModal:Y,onClickSave:K,pickerType:U,hideProductVariants:q=!1,startupScreen:J=F.Collections,rearrangeEnabled:N,selectSingleItem:Q=!1,showProductDetailInfoIcon:X}=T,[Z,_]=r(b,{}),[ee,te]=s([F.Collections,F.RearrangeProducts].includes(J)?J:F.Collections),[oe,ce]=s("grid"),[re,se]=s(""),[ie,ne]=s(""),[le,de]=s(0),[ae,ue]=s(!1),[he,pe]=s(0),[me,Ce]=s(""),[ge,fe]=s(!1),[be,Se]=s(!1),[ye,ve]=r(S,{collections:{},products:{}}),[ke,xe]=r(y,Object.keys(D).length>0?D:{}),Pe=i(null),[Ie,je]=s(!1),[Fe,Te]=s();n((()=>{ue(!0),Se(!0),T.collectionFetcher(le,O).then((e=>{_({type:"fetched",data:(null==e?void 0:e.collections)||{}}),ue(!1),de((e=>e+1)),Se(!1)})).catch()}),[]),n((()=>{let e=0;Object.keys(ke||[]).forEach((t=>{var o;Object.keys((null===(o=ke[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=ke[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),pe(e)})),n((()=>{ie&&(ue(!0),T.productFetcher(ie,O).then((e=>{Object.keys(e).length&&_({type:"productsFetched",data:{collectionId:ie,products:e}}),ue(!1)})).catch())}),[ie]),n((()=>{const e=setTimeout((()=>{"rearrange"!==ee&&(me.length?(fe(!0),T.searchFetcher(O,me).then((e=>{ve("collections"in e&&"products"in e?{type:"set",data:e}:{type:"set",data:{collections:{},products:e}}),te("searchProducts"),ue(!1),fe(!1)}))):te("collections"))}),800);return()=>clearTimeout(e)}),[me]),n((()=>{K&&(T.onAdd(ke,he),Oe())}),[K]),n((()=>{Q&&Object.keys(ke||{}).length&&he&&(T.onAdd(ke,he),Oe())}),[Q,ke,he]);const Oe=()=>{xe({type:"reset",data:{}})},De=e(P,{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===ee||"searchProducts"===ee)&&t("div",Object.assign({style:{padding:Y?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(a,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ge?t(h,{size:"small",color:l.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:me,onChangeText:e=>{e.length&&e.trim().length?Ce(e):Ce("")}})}))}),e(I,Object.assign({ref:Pe},{children:["collections"===ee&&t(m,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:be,collections:Z,selectedCollectionsDispatch:xe,setCollectionId:se,setSelectedCollectionId:ne,setScreen:te,selectedCollections:ke,collectionFetcher:T.collectionFetcher,storeId:O,collectionsDispatch:_,setSaveDisabled:ue,pagingControls:{curPage:le,setCurPage:de},hideCollectionCheckbox:V,renderWithoutModal:Y,pickerType:U}),"products"===ee&&re&&t(v.Provider,Object.assign({value:re},{children:t(g,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:te,storeId:O,data:Z[re],collectionsDispatch:_,selectedCollectionsDispatch:xe,selectedData:ke,setSaveDisabled:ue,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:B,outOfStockAction:L,hideVariantCheckbox:M,selectProductsFromCustomCollection:z,renderWithoutModal:Y,pickerType:U,hideProductVariants:q,fbStatusFetcher:T.fbStatusFetcher,onInfoIconClick:e=>{je(!0),Te(e)},showProductDetailInfoIcon:X})})),"view"===ee&&t(x,{selectedCollections:ke||{},selectedCollectionsDispatch:xe,setScreen:te,collections:Z,outOfStockAction:L,storeId:O,fbStatusFetcher:T.fbStatusFetcher}),"rearrange"===ee&&t(f,{selectedCollections:ke||{},selectedCollectionsDispatch:xe,setScreen:te,outOfStockAction:L,rearrangeViewType:"grid"===oe?"list":"grid",scrollContainerRef:Pe,storeId:O,fbStatusFetcher:T.fbStatusFetcher}),"searchProducts"===ee&&t(k,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:ke||{},searchedCollections:ye||{},searchedCollectionsDispatch:ve,selectedCollectionsDispatch:xe,setScreen:te,collections:Z,onBackPress:()=>{Ce(""),ve({type:"set",data:{collections:{},products:{}}})},pickerType:U,hideProductCheckbox:B,hideProductVariants:q,hideVariantCheckbox:M,storeId:O,fbStatusFetcher:T.fbStatusFetcher,setCollectionId:se,setSelectedCollectionId:ne,renderWithoutModal:Y,hideCollectionCheckbox:V})]}))]});return t(o,{children:Y?De:e(u,Object.assign({zIndex:E,open:R,onClose:()=>{null==w||w(),Oe()},headingTitle:G||("collections"===ee||"products"===ee?"Select Products":"view"===ee?"Selected Products":"searchProducts"===ee?"Searched Products":"rearrange"===ee?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:H||"600px"},headerRightCustomElement:"rearrange"===ee?(console.log("ignore:",ce),t(o,{})):t(o,{}),footerContainerStyle:T.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:l.surface.standard}:void 0,primaryButton:{buttonText:ae?"Loading...":ee===F.RearrangeProducts?"Done":"Add",disabled:ae||he<1||A&&he<A||!A&&$&&he>$||!1,onClick:()=>{T.onAdd(ke,he),Oe()}},wrapperStyle:T.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:W?t(o,{}):A&&he>A?t(p,{tagText:`You can only select ${A} products`,type:"negative"}):$&&he>$?t(p,{tagText:`You can only select ${$} products`,type:"negative"}):t(d,he>0?{onClick:()=>{te(N?F.RearrangeProducts:F.SelectedProducts)},buttonText:A?`${he}/${A} products selected`:`${he} products selected`,buttonType:["rearrange","view"].includes(ee)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(ee)}:{disabled:!0,buttonText:A?`${he}/${A} products selected`:`${he} products selected`,buttonType:"tertiaryGray"}),hideCrossButton:Ie},{children:[De,Ie&&Fe?t(C,{productData:Fe,outOfStockAction:L,onClose:()=>{je(!1)}}):t(o,{})]}))})};export{T as ProductPickerModal,F as ScreenName};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Product, ProductVariant } from './modal';
|
|
2
|
+
import { OUT_OF_STOCK_ACTION } from './type';
|
|
3
|
+
export declare const ProductInfoOverlay: (props: {
|
|
4
|
+
productData: Product | ProductVariant;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const ProductInfoCard: (props: {
|
|
9
|
+
productData: Product | ProductVariant;
|
|
10
|
+
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
11
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-components";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/cross.svg.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as d}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as n,BodyCaption as c}from"../TypographyStyle.js";import{ProductPickerTag as s}from"./ProductPickerTag.js";const l=i=>o(m,{children:[t(u,{}),t(x,{children:t(a,{className:"close-button",onClick:i.onClose,Icon:e,width:20,height:20})}),t(p,{productData:i.productData,outOfStockAction:i.outOfStockAction})]}),p=i=>{var r;console.log("vj: product data",i);const e=void 0===i.productData.variants;return o(f,{children:[t(g,{children:t(d,{imageUrl:i.productData.image,width:"200px",height:200,borderRadius:4})}),o(h,{children:[t(n,Object.assign({style:{display:"flex"}},{children:i.productData.name})),t(c,{style:{display:"flex",flexDirection:"column"},dangerouslySetInnerHTML:{__html:null!==(r=i.productData.description)&&void 0!==r?r:""}}),t(s,{isVariant:e,data:i.productData,outOfStockAction:i.outOfStockAction})]})]})},m=i.div`
|
|
2
|
+
display: flex;
|
|
3
|
+
flex: 1;
|
|
4
|
+
background: rgba(0, 0, 0, 0.5);
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
position: absolute;
|
|
9
|
+
bottom: 0;
|
|
10
|
+
z-index: 10;
|
|
11
|
+
`,u=i.div`
|
|
12
|
+
display: flex;
|
|
13
|
+
flex: 1;
|
|
14
|
+
background: rgba(0, 0, 0, 0.5);
|
|
15
|
+
`,x=i.div`
|
|
16
|
+
position: relative;
|
|
17
|
+
|
|
18
|
+
.close-button {
|
|
19
|
+
position: absolute;
|
|
20
|
+
top: -50px;
|
|
21
|
+
right: 0px;
|
|
22
|
+
margin: 10px;
|
|
23
|
+
background: ${r.surface.standard};
|
|
24
|
+
border-radius: 50%;
|
|
25
|
+
}
|
|
26
|
+
`,f=i.div`
|
|
27
|
+
display: flex;
|
|
28
|
+
background: white;
|
|
29
|
+
padding: 24px;
|
|
30
|
+
gap: 24px;
|
|
31
|
+
border-radius: 8px 8px 0px 0px;
|
|
32
|
+
`,g=i.div`
|
|
33
|
+
display: flex;
|
|
34
|
+
`,h=i.div`
|
|
35
|
+
display: flex;
|
|
36
|
+
flex: 1;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: 10px;
|
|
39
|
+
`;export{p as ProductInfoCard,l as ProductInfoOverlay};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Collection, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
|
|
2
|
+
import { Collection, FbStatusFetcherReturn, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
|
|
3
3
|
import { CollectionsActions, SelectedCollectionsActions } from './reducers';
|
|
4
4
|
import { OUT_OF_STOCK_ACTION } from './type';
|
|
5
5
|
interface ProductsScreenInterface {
|
|
@@ -9,8 +9,8 @@ interface ProductsScreenInterface {
|
|
|
9
9
|
collectionsDispatch: React.Dispatch<CollectionsActions>;
|
|
10
10
|
selectedData: SelectedItems;
|
|
11
11
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
12
|
-
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) =>
|
|
13
|
-
productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
|
|
12
|
+
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => ProductFetcherReturn;
|
|
13
|
+
productFetcher: (collectionId: string, storeId: string, limit?: number, offset?: number) => ProductFetcherReturn;
|
|
14
14
|
storeId: string;
|
|
15
15
|
setScreen: React.Dispatch<React.SetStateAction<string>>;
|
|
16
16
|
setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
|
|
@@ -21,6 +21,9 @@ interface ProductsScreenInterface {
|
|
|
21
21
|
renderWithoutModal?: boolean;
|
|
22
22
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
23
23
|
hideProductVariants?: boolean;
|
|
24
|
+
showProductDetailInfoIcon?: boolean;
|
|
25
|
+
fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
|
|
26
|
+
onInfoIconClick: (productData: Product | ProductVariant) => void;
|
|
24
27
|
}
|
|
25
28
|
export declare const ProductsScreen: (props: ProductsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
26
29
|
interface ProductGroupInterface {
|
|
@@ -36,7 +39,9 @@ interface ProductGroupInterface {
|
|
|
36
39
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
37
40
|
hideVariantCheckbox?: boolean;
|
|
38
41
|
hideProductVariants?: boolean;
|
|
42
|
+
showProductDetailInfoIcon?: boolean;
|
|
39
43
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
44
|
+
onInfoIconClick?: (productData: Product | ProductVariant) => void;
|
|
40
45
|
}
|
|
41
46
|
export declare const ProductGroup: (props: ProductGroupInterface) => import("react/jsx-runtime").JSX.Element;
|
|
42
47
|
interface ProductCardInterface {
|
|
@@ -54,7 +59,9 @@ interface ProductCardInterface {
|
|
|
54
59
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
55
60
|
hideVariantCheckbox?: boolean;
|
|
56
61
|
hideProductVariants?: boolean;
|
|
62
|
+
showProductDetailInfoIcon?: boolean;
|
|
57
63
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
64
|
+
onInfoIconClick?: (productData: Product | ProductVariant) => void;
|
|
58
65
|
}
|
|
59
66
|
export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
|
|
60
67
|
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 r}from"lodash";import{useContext as n,useState as l,useEffect as s}from"react";import{Tag as a}from"../tag/Tag.js";import{COLORS as u}from"../../constants/Theme.js";import{CheckBox as p}from"../checkBox/CheckBox.js";import{IconButton as h}from"../icon-button/IconButton.js";import{Input as v}from"../input/Input.js";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as y}from"../shimmer-image/ShimmerImage.js";import{Spinner as f}from"../spinner/Spinner.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{BodyCaption as k,TitleRegular as b}from"../TypographyStyle.js";import{truncate as j}from"./collectionScreen.js";import{EmptyState as C}from"./emptyState.js";import{ProductHelper as I}from"./helpers/ProductHelper.js";import{CollectionIdContext as O}from"./reducers.js";import{ProductScreenHeader as x,ProductScreenCollectionCardStyle as P,ProductCardStyle as S}from"./style.js";import{OUT_OF_STOCK_ACTION as V}from"./type.js";import{liftTheStateUp as T}from"./utility.js";const w=o=>{const a=n(O),{data:y,collectionsDispatch:g,selectedData:j,selectedCollectionsDispatch:I,productFetcher:S,storeId:w,setScreen:E,setSaveDisabled:A,hideInCollectionSearch:B,customCollectionRestriction:R,hideProductCheckbox:U,outOfStockAction:F=V.BLUR,hideVariantCheckbox:H=!1,selectProductsFromCustomCollection:L=!1,pickerType:W,hideProductVariants:z}=o,[K,N]=l(""),[_,q]=l(!1),[G,J]=l(y);s((()=>{const t=setTimeout((()=>{K.length?(q(!0),o.searchInCollectionFetcher(w,a,K).then((t=>{var e;const o=r(y);o.products={};for(const i of t)(null===(e=null==y?void 0:y.products)||void 0===e?void 0:e[i])&&(o.products[i]=y.products[i]);J(o),A(!1),q(!1)}))):J(y)}),800);return()=>clearTimeout(t)}),[K]);const M=!!R&&y.isSmartCollection,Q=t=>{var e,o,i,c,d,r,n,l;let s=0,u=0;return!!((null===(o=null===(e=null==j?void 0:j[a])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(d=Object.keys((null===(c=null===(i=null==y?void 0:y.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.forEach((()=>u++)),Object.keys((null===(l=null===(n=null===(r=null==j?void 0:j[a])||void 0===r?void 0:r.products)||void 0===n?void 0:n[t])||void 0===l?void 0:l.variants)||[]).forEach((()=>s++)),s>0&&u!==s))};s((()=>{(null==y?void 0:y.products)||X()}),[]);const X=()=>{A(!0),q(!0),S(a,w).then((t=>{Object.keys(t).length&&(g({type:"productsFetched",data:{collectionId:a,products:t}}),J(Object.assign(Object.assign({},G),{products:t}))),A(!1),q(!1)})).catch()},Y=(t,e)=>{const o=T(e,y);I({type:t,data:Object.assign(Object.assign({},o),{isRestricted:R})})};return t("div",{children:[t(x,{children:[e(h,{Icon:i,height:16,onClick:()=>{E("collections")}}),e(k,Object.assign({style:{color:u.content.secondary}},{children:y.name}))]}),!B&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(v,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>_&&K.length?e(f,{size:"small",color:u.content.primary}):e(d,{})},id:"listInput",height:"24px",type:"text",value:K,onChangeText:t=>{t.length&&t.trim().length?N(t):N("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==G?void 0:G.products)||[]).length>0&&!M&&!K.length&&!U&&t(P,{children:[e(p,{isChecked:!!(null==j?void 0:j[a]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(j[t]){const c=null==y?void 0:y.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=j[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){I(t?{type:"selected",data:{id:a,val:y}}:{type:"unselected",data:{id:a}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),e(b,{children:"All Products"})]}),Object.keys((null==G?void 0:G.products)||[]).length?Object.keys(G.products||[]).map((t=>e(D,{outOfStockAction:F,collectionId:a,isProductPartiallyChecked:Q(t),productId:t,data:G.products[t],selectedData:j,selectedCollectionsDispatch:I,viewOnly:!L&&!!M,upliftAdditions:Y,hideProductCheckbox:U,hideVariantCheckbox:H,hideProductVariants:z,pickerType:W},t))):_?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e(C,{title:"No products to show",subtitle:K.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})]})]})},D=o=>{const{collectionId:i,productId:c,data:d,selectedData:r,selectedCollectionsDispatch:n,viewOnly:l,upliftAdditions:s,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:p,hideVariantCheckbox:h,hideProductVariants:v,pickerType:m}=o,y=t=>{var e,o,d,n,l,s;if(!(null===(o=null===(e=null==r?void 0:r[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[c]))return!1;return!!(null===(s=null===(l=null===(n=null===(d=null==r?void 0:r[i])||void 0===d?void 0:d.products)||void 0===n?void 0:n[c])||void 0===l?void 0:l.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(E,{isVariant:!1,data:d,productId:c,collectionId:i,isSelected:!!(null===(g=null===(f=null==r?void 0:r[i])||void 0===f?void 0:f.products)||void 0===g?void 0:g[c]),isPartiallyChecked:a,selectedCollectionsDispatch:n,upliftAdditions:s,viewOnly:l,hideProductCheckbox:u,hideVariantCheckbox:h,hideProductVariants:v,pickerType:m},c),v?null:Object.keys(d.variants||[]).map((t=>e(E,{isVariant:!0,hideVariantCheckbox:h,data:d.variants[t],variantId:t,productId:c,viewOnly:l,upliftAdditions:s,collectionId:i,isSelected:y(t),selectedCollectionsDispatch:n,outOfStockAction:p},t)))]});var f,g},E=i=>{const{isVariant:c,data:d,productId:r,collectionId:n,variantId:l,isSelected:s,selectedCollectionsDispatch:u,viewOnly:h,upliftAdditions:v,isPartiallyChecked:m,hideProductCheckbox:f,outOfStockAction:k,hideVariantCheckbox:C,hideProductVariants:O,pickerType:x}=i,P=I.getProductLabels(d,k);return t(S,Object.assign({isVariant:c,onClick:t=>{"PRODUCT"===x&&O&&(t.stopPropagation(),u({type:"reset",data:{}}),v("variantSelected",{productId:r,variantId:l||Object.keys(d.variants)[0],collectionId:n,variant:d}))},isActive:s},{children:[c&&!h&&!C||!c&&!h&&!f?e(p,{isChecked:s,isPartiallyChecked:m||!1,onValueChange:function(t){c?t?v("variantSelected",{productId:r,variantId:l,collectionId:n,variant:d}):u({type:"variantUnselected",data:{productId:r,variantId:l,collectionId:n}}):t?v("productSelected",{productId:r,collectionId:n,product:d}):u({type:"productUnselected",data:{productId:r,collectionId:n}})}}):e(o,{}),e("div",{children:e(y,{width:40,height:40,imageUrl:d.image,alt:"Item",borderRadius:4})}),e(g,Object.assign({body:d.name,placement:"bottom",delay:400},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"column"}},{children:[e(b,{children:j(d.name,40,!0)}),P?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(a,{tagText:P,type:"warning",theme:"light"})})):e(o,{})]}))}))]}))};export{E as ProductCard,D as ProductGroup,w as ProductsScreen};
|
|
1
|
+
import{jsxs as t,jsx as o,Fragment as e}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import c from"../../assets/icons/box.svg.js";import n from"../../assets/icons/search.svg.js";import{cloneDeep as l}from"lodash";import{useContext as r,useRef as s,useState as d,useEffect as a}from"react";import{COLORS as u}from"../../constants/Theme.js";import h from"../../assets/icons/info.svg.js";import{CheckBox as v}from"../checkBox/CheckBox.js";import{IconButton as p}from"../icon-button/IconButton.js";import{Input as g}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 b}from"../spinner/Spinner.js";import{Tooltip as j}from"../tooltips/Tooltip.js";import{BodyCaption as y,TitleRegular as I,BodyPrimary as k}from"../TypographyStyle.js";import{EmptyState as O}from"./emptyState.js";import{ProductPickerTag as C}from"./ProductPickerTag.js";import{CollectionIdContext as P}from"./reducers.js";import{ProductScreenHeader as x,ProductScreenCollectionCardStyle as S,ProductCardStyle as D}from"./style.js";import{OUT_OF_STOCK_ACTION as E}from"./type.js";import{getVariantIdsToFetchAtProductLevel as w,markVariantsAsApprovedProductsLevel as V,liftTheStateUp as A}from"./utility.js";const T=e=>{const{data:h,collectionsDispatch:f,selectedData:j,selectedCollectionsDispatch:k,productFetcher:C,storeId:D,setScreen:T,setSaveDisabled:F,hideInCollectionSearch:B,customCollectionRestriction:U,hideProductCheckbox:L,outOfStockAction:H=E.BLUR,hideVariantCheckbox:J=!1,selectProductsFromCustomCollection:W=!1,pickerType:z,hideProductVariants:K,fbStatusFetcher:M,onInfoIconClick:N,showProductDetailInfoIcon:_}=e,q=r(P),G=s(null),Q=s(0),[X,Y]=d(!1),[Z,$]=d(""),[tt,ot]=d(!1),[et,it]=d(h),ct=s(!1);a((()=>{const t=setTimeout((()=>{Z.length?(ot(!0),e.searchInCollectionFetcher(D,q,Z).then((t=>{const o=l(h);o.products=t,it(o);const e=w(null!=t?t:{},h);rt(e,null!=t?t:{},!0),F(!1),ot(!1)}))):it(h)}),800);return()=>clearTimeout(t)}),[Z]),a((()=>{var t,o,e,i,c,n,l,r;console.log("vj: collectionId change before",h,h.products,null===(o=Object.keys(null!==(t=h.products)&&void 0!==t?t:{}))||void 0===o?void 0:o.length,ct),ct.current=!1,Q.current=Math.floor((null===(i=Object.keys(null!==(e=h.products)&&void 0!==e?e:{}))||void 0===i?void 0:i.length)/10);const s=w(null!==(c=h.products)&&void 0!==c?c:{});rt(s,null!==(n=h.products)&&void 0!==n?n:{}),console.log("vj: collectionId change after",h,h.products,null===(r=Object.keys(null!==(l=h.products)&&void 0!==l?l:{}))||void 0===r?void 0:r.length,ct)}),[q]);const nt=!!U&&h.isSmartCollection,lt=t=>{var o,e,i,c,n,l,r,s;let d=0,a=0;return!!((null===(e=null===(o=null==j?void 0:j[q])||void 0===o?void 0:o.products)||void 0===e?void 0:e[t])&&(null===(n=Object.keys((null===(c=null===(i=null==h?void 0:h.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===n||n.forEach((()=>a++)),Object.keys((null===(s=null===(r=null===(l=null==j?void 0:j[q])||void 0===l?void 0:l.products)||void 0===r?void 0:r[t])||void 0===s?void 0:s.variants)||[]).forEach((()=>d++)),d>0&&a!==d))};a((()=>{(null==h?void 0:h.products)||st(10)}),[]);const rt=(t,o,e)=>{console.log("fetchFbStatusAndDispatchProducts",{variantIdsToFetchFbStatus:t,fbStatusFetcher:M}),M||(e?V(o,f,q,et,it):V(o,f,q)),t.length>0&&M&&M(D,t).then((t=>{const i=Object.assign({},o);if(Object.keys(o).forEach((e=>{var c,n,l;console.log("vj: response variants",null===(c=null==o?void 0:o[e])||void 0===c?void 0:c.variants),Object.keys(null!==(l=null===(n=null==o?void 0:o[e])||void 0===n?void 0:n.variants)&&void 0!==l?l:{}).forEach((c=>{var n,l;const r=null===(n=null==o?void 0:o[e].variants)||void 0===n?void 0:n[c];console.log("vj: v",{v:r,vId:c,status:t[c],response:t}),r&&"REJECTED"===t[c]?r.fbStatus="REJECTED":r&&"APPROVED"===t[c]&&(r.fbStatus="APPROVED");const s=null===(l=null==i?void 0:i[e])||void 0===l?void 0:l.variants;s&&s[c]&&(s[c]=r)}))})),e){const t=Object.assign({},et);t.products=i,it(t)}else f({type:"productsPaged",data:{collectionId:q,products:i}})})).catch((t=>{e?V(o,f,q,et,it):V(o,f,q)}))};a((()=>{console.log("vj: observertarget",G.current);const t=new IntersectionObserver((t=>{console.log("vj: observertargetinside",t),t[0].isIntersecting&&(console.log("vj: nextPageRef",Q.current,ct),Q.current>=0&&!ct.current&&!Z&&(F(!0),Y(!0),C(q,D,10,Q.current).then((t=>{if(console.log("vj: fetched products",t,ct,Object.keys(t).length),Object.keys(t).length||(console.log("vj: setHasAllCollectionLoaded ",!0),ct.current=!0),Object.keys(t).length){const o=et;o.products=Object.assign(Object.assign({},et.products),t),it(o);const e=w(t);rt(e,t),Q.current+=1}Y(!1),F(!1)})).catch()))}),{threshold:1});return G.current&&t.observe(G.current),()=>{G.current&&t.unobserve(G.current)}}),[G,Z]);const st=t=>{console.log("vj: getProductsForCollection"),F(!0),ot(!0),C(q,D,t,0).then((o=>{if(Object.keys(o).length||(console.log("vj: setHasAllCollectionLoaded ",!0),ct.current=!0),Object.keys(o).length){it(Object.assign(Object.assign({},et),{products:o})),console.log("vj: next page when products loaded",Q.current);const t=w(o);rt(t,o),Q.current=1}console.log("vj: product data",{productData:o,limit:t,data:h}),t||k({type:"selected",data:{id:q,val:Object.assign(Object.assign({},h),{products:o})}}),F(!1),ot(!1)})).catch()},dt=(t,o)=>{const e=A(o,h);k({type:t,data:Object.assign(Object.assign({},e),{isRestricted:U})})};return t("div",{children:[t(x,{children:[o(p,{Icon:i,height:16,onClick:()=>{T("collections")}}),o(y,Object.assign({style:{color:u.content.secondary}},{children:h.name}))]}),!B&&o("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:o(g,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>tt&&Z.length?o(b,{size:"small",color:u.content.primary}):o(n,{})},id:"listInput",height:"24px",type:"text",value:Z,onChangeText:t=>{t.length&&t.trim().length?$(t):$("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==et?void 0:et.products)||[]).length>0&&!nt&&!Z.length&&!L&&"-1"!==q&&t(S,{children:[o(v,{isChecked:!!(null==j?void 0:j[q]),isPartiallyChecked:(t=>{var o;let e=0,i=0;if(j[t]){const c=null==h?void 0:h.products;c&&Object.keys(c).forEach((t=>{var o;const i=null===(o=c[t])||void 0===o?void 0:o.variants;i&&Object.keys(i).forEach((t=>e+=1))}));const n=null===(o=j[t])||void 0===o?void 0:o.products;return n&&Object.keys(n).forEach((t=>{var o;const e=null===(o=n[t])||void 0===o?void 0:o.variants;e&&Object.keys(e).forEach((()=>i+=1))})),i>0&&e!==i}return!1})(q),onValueChange:function(t){t?st():k({type:"unselected",data:{id:q}})}}),o("div",Object.assign({style:{width:40,height:40}},{children:o(c,{})})),o(I,{children:"All Products"})]}),Object.keys((null==et?void 0:et.products)||[]).length?Object.keys(et.products||[]).map((t=>o(R,{outOfStockAction:H,collectionId:q,isProductPartiallyChecked:lt(t),productId:t,data:et.products[t],selectedData:j,selectedCollectionsDispatch:k,viewOnly:!W&&!!nt,upliftAdditions:dt,hideProductCheckbox:L,hideVariantCheckbox:J,hideProductVariants:K,pickerType:z,onInfoIconClick:N,showProductDetailInfoIcon:_},t))):tt?[1,2,3,4,5,6,7,8,9,10].map(((t,e)=>o("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:o(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),e))):o(O,{title:"No products to show",subtitle:Z.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."}),o("div",{ref:G})]}),X&&[1,2,3,4,5].map(((t,e)=>o("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:o(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),e)))]})},R=e=>{const{collectionId:i,productId:c,data:n,selectedData:l,selectedCollectionsDispatch:r,viewOnly:s,upliftAdditions:d,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:h,hideVariantCheckbox:v,hideProductVariants:p,pickerType:g,onInfoIconClick:m,showProductDetailInfoIcon:f}=e,b=t=>{var o,e,n,r,s,d;if(!(null===(e=null===(o=null==l?void 0:l[i])||void 0===o?void 0:o.products)||void 0===e?void 0:e[c]))return!1;return!!(null===(d=null===(s=null===(r=null===(n=null==l?void 0:l[i])||void 0===n?void 0:n.products)||void 0===r?void 0:r[c])||void 0===s?void 0:s.variants)||void 0===d?void 0:d[t])};return t("div",{children:[o(F,{isVariant:!1,data:n,productId:c,collectionId:i,isSelected:!!(null===(y=null===(j=null==l?void 0:l[i])||void 0===j?void 0:j.products)||void 0===y?void 0:y[c]),isPartiallyChecked:a,selectedCollectionsDispatch:r,upliftAdditions:d,viewOnly:s,hideProductCheckbox:u,hideVariantCheckbox:v,hideProductVariants:p,pickerType:g,outOfStockAction:h,onInfoIconClick:m,showProductDetailInfoIcon:f},c),p?null:Object.keys(n.variants||[]).length>1&&Object.keys(n.variants||[]).map((t=>o(F,{isVariant:!0,hideVariantCheckbox:v,data:n.variants[t],variantId:t,productId:c,viewOnly:s,upliftAdditions:d,collectionId:i,isSelected:b(t),selectedCollectionsDispatch:r,outOfStockAction:h,onInfoIconClick:m,showProductDetailInfoIcon:f},t)))]});var j,y},F=i=>{const{isVariant:c,data:n,productId:l,collectionId:r,variantId:s,isSelected:d,selectedCollectionsDispatch:a,viewOnly:g,upliftAdditions:m,isPartiallyChecked:b,hideProductCheckbox:y,outOfStockAction:I,hideVariantCheckbox:O,hideProductVariants:P,pickerType:x,onInfoIconClick:S,showProductDetailInfoIcon:E}=i;return t(D,Object.assign({isVariant:c,onClick:t=>{"PRODUCT"===x&&P&&(t.stopPropagation(),a({type:"reset",data:{}}),m("variantSelected",{productId:l,variantId:s||Object.keys(n.variants)[0],collectionId:r,variant:n}))},isActive:d},{children:[c&&!g&&!O||!c&&!g&&!y?o(v,{isChecked:d,isPartiallyChecked:b||!1,onValueChange:function(t){c?t?m("variantSelected",{productId:l,variantId:s,collectionId:r,variant:n}):a({type:"variantUnselected",data:{productId:l,variantId:s,collectionId:r}}):t?m("productSelected",{productId:l,collectionId:r,product:n}):a({type:"productUnselected",data:{productId:l,collectionId:r}})}}):o(e,{}),o("div",{children:o(f,{width:40,height:40,imageUrl:n.image,alt:"Item",borderRadius:4})}),o(j,Object.assign({variant:"light",body:n.name,placement:"bottom",delay:400},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},{children:[o(k,Object.assign({numberOfLines:1},{children:n.name})),E&&o(p,{onClick:()=>{null==S||S(n)},Icon:()=>o(h,{width:20,height:20,color:u.content.placeholder})})]})),o(C,{isVariant:c,data:n,outOfStockAction:I})]}))}))]}))};export{F as ProductCard,R as ProductGroup,T as ProductsScreen};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SelectedItems } from '.';
|
|
2
|
+
import { FbStatusFetcherReturn, SelectedItems } from '.';
|
|
3
3
|
import { SelectedCollectionsActions } from './reducers';
|
|
4
4
|
import { OUT_OF_STOCK_ACTION } from './type';
|
|
5
5
|
interface RearrangeScreenInterface {
|
|
@@ -9,6 +9,8 @@ interface RearrangeScreenInterface {
|
|
|
9
9
|
rearrangeViewType: 'grid' | 'list';
|
|
10
10
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
11
11
|
scrollContainerRef: React.RefObject<HTMLDivElement>;
|
|
12
|
+
storeId: string;
|
|
13
|
+
fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
|
|
12
14
|
}
|
|
13
15
|
/**
|
|
14
16
|
* Screen will be opened on two conditions -
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r,useEffect as s}from"react";import{DragDropContext as c}from"react-beautiful-dnd";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as a}from"./emptyState.js";import{parseSelectedVariantsToArray as d}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as p}from"./style.js";import{fetchFbStatusCollection as m}from"./utility.js";import{VariantsList as u,VariantsGrid as f}from"./variantComponents.js";const h=h=>{const{selectedCollections:j,selectedCollectionsDispatch:y,setScreen:S,rearrangeViewType:g,outOfStockAction:b,scrollContainerRef:C,storeId:O,fbStatusFetcher:v}=h,[V,k]=r(d(j));s((()=>{var t;null===(t=null==C?void 0:C.current)||void 0===t||t.scrollTo({top:0}),m(j,O,y,v,"update"),k(d(j))}),[j]);return t(c,Object.assign({onDragEnd:t=>{if(!t.destination)return;const e=V,[o]=e.splice(t.source.index,1);e.splice(t.destination.index,0,o),e.forEach(((t,e)=>{t.displayOrder=e})),k(e)}},{children:[t(p,{children:[e(n,{Icon:o,width:16,height:16,color:i.content.secondary,onClick:()=>{S("collections")}}),e(l,Object.assign({color:i.content.secondary},{children:"All Products"}))]}),Object.keys(j).length>0?"list"===g?e(u,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:y,outOfStockAction:b}):e(f,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:y}):e(a,{title:"No Products Selected",subtitle:"Selected products will appear here"})]}))};export{h as RearrangeScreen};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { Collection, SelectedItems } from '.';
|
|
2
|
+
import { Collection, SearchedItems, SelectedItems } from '.';
|
|
3
3
|
export interface SelectedCollectionsActions {
|
|
4
4
|
type: string;
|
|
5
5
|
data: {
|
|
@@ -14,4 +14,10 @@ export interface CollectionsActions {
|
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
16
|
export declare function collectionsReducer(collections: Collection, action: CollectionsActions): any;
|
|
17
|
+
export declare function paginationReducer(collections: SelectedItems, action: SelectedCollectionsActions): SelectedItems;
|
|
18
|
+
export interface SearchReducerActions {
|
|
19
|
+
type: string;
|
|
20
|
+
data: SearchedItems;
|
|
21
|
+
}
|
|
22
|
+
export declare function searchReducer(searchedItems: SearchedItems, action: SearchReducerActions): SearchedItems;
|
|
17
23
|
export declare const CollectionIdContext: import("react").Context<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function
|
|
1
|
+
import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function e(a,e){var s,c,d,o,r,n;let i={},u="",l="",p="";switch(e.type){case"selected":return i=t(a),e.data.val.isSmartCollection&&(e.data.isRestricted&&(i={}),i.isCustom=!0),i[e.data.id]=e.data.val,i;case"unselected":return i=t(a),(null==i?void 0:i.isCustom)&&(i.isCustom=!1),delete i[e.data.id],i;case"productUnselected":return i=t(a),u=e.data.productId,l=e.data.collectionId,delete i[l].products[u],Object.keys(i[l].products).length||((null==i?void 0:i.isCustom)&&(i.isCustom=!1),delete i[l]),i;case"productSelected":return i=t(a),u=e.data.productId,l=e.data.collectionId,(null===(s=e.data.catalogOnlyData)||void 0===s?void 0:s.isSmartCollection)&&(e.data.isRestricted&&(i={}),i.isCustom=!0),(null==i?void 0:i[l])||(i[l]=e.data.catalogOnlyData,i[l].products={}),i[l].products[u]=e.data.product,i;case"variantSelected":return i=t(a),u=e.data.productId,l=e.data.collectionId,p=e.data.variantId,(null===(c=e.data.catalogOnlyData)||void 0===c?void 0:c.isSmartCollection)&&(e.data.isRestricted&&(i={}),i.isCustom=!0),(null==i?void 0:i[l])||(i[l]=e.data.catalogOnlyData,i[l].products={},i[l].products[u]=e.data.productOnlyData,i[l].products[u].variants={}),(null===(o=null===(d=null==i?void 0:i[l])||void 0===d?void 0:d.products)||void 0===o?void 0:o[u])||((null===(r=null==i?void 0:i[l])||void 0===r?void 0:r.products)||(i[l].products={}),i[l].products[u]=e.data.productOnlyData,i[l].products[u].variants={}),i[l].products[u].variants[p]=e.data.variant,i;case"variantUnselected":return i=t(a),u=e.data.productId,l=e.data.collectionId,p=e.data.variantId,delete i[l].products[u].variants[p],Object.keys(i[l].products[u].variants).length||(delete i[l].products[u],Object.keys(i[l].products).length||((null===(n=i[l])||void 0===n?void 0:n.isSmartCollection)&&(i.isCustom=!1),delete i[l])),i;case"update":return i=Object.assign({},a),i;case"reset":return{};default:return a}}function s(t,a){let e={};switch(a.type){case"fetched":return e=Object.assign({},a.data),e;case"productsFetched":return e=Object.assign({},t),e[a.data.collectionId].products=a.data.products,e;case"paged":return e=Object.assign(Object.assign({},t),a.data),e;case"productsPaged":return e=Object.assign({},t),e[a.data.collectionId].products=Object.assign(Object.assign({},e[a.data.collectionId].products),a.data.products),e;default:return{}}}function c(t,a){let e={};switch(a.type){case"paginate":console.log("vj: paginate",a),e=Object.assign({},t);for(const t in a.data)if(Object.prototype.hasOwnProperty.call(a.data,t)){const s=a.data[t];if(Object.prototype.hasOwnProperty.call(e,t)){const a=e[t];e[t]=Object.assign(Object.assign({},a),{products:Object.assign(Object.assign({},a.products),s.products)})}else e[t]=s}return e;case"update":return e=Object.assign({},t),e;case"set":return e=Object.assign(Object.assign({},t),a.data),e;case"filter":e={};for(const s in t)if(s in a.data){const c=Object.assign({},t[s]),d=a.data[s],o={};for(const t in c.products)if(t in d.products){const a=Object.assign({},c.products[t]),e=d.products[t],s={};for(const t in a.variants)t in e.variants&&(s[t]=Object.assign({},a.variants[t]));Object.keys(s).length>0&&(a.variants=s,o[t]=a)}Object.keys(o).length>0&&(c.products=o,e[s]=c)}return e;default:return t}}function d(t,a){let e={collections:{},products:{}};switch(a.type){case"set":return a.data;case"setProducts":return e=Object.assign({},t),e.products=a.data,e;default:return t}}const o=a("");export{o as CollectionIdContext,s as collectionsReducer,c as paginationReducer,d as searchReducer,e as selectedColectionsReducer};
|