@bikdotai/bik-component-library 0.0.455-beta.ppi-2 → 0.0.455-beta.ppi-4

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),o=require("../../assets/icons/box.svg.js"),i=require("../../assets/icons/search.svg.js"),c=require("lodash"),n=require("react"),s=require("../../constants/Theme.js"),r=require("../../assets/icons/info.svg.js"),l=require("../checkBox/CheckBox.js"),d=require("../icon-button/IconButton.js"),a=require("../input/Input.js"),u=require("../shimmer/ShimmerComponent/BikShimmer.js"),h=require("../shimmer-image/ShimmerImage.js"),v=require("../spinner/Spinner.js"),p=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),g=require("./emptyState.js"),b=require("./ProductPickerTag.js"),f=require("./reducers.js"),x=require("./style.js"),I=require("./type.js"),y=require("./utility.js");const k=t=>{const{collectionId:o,productId:i,data:c,selectedData:n,selectedCollectionsDispatch:s,viewOnly:r,upliftAdditions:l,isProductPartiallyChecked:d,hideProductCheckbox:a,outOfStockAction:u,hideVariantCheckbox:h,hideProductVariants:v,pickerType:p,onInfoIconClick:j,showProductDetailInfoIcon:g}=t,b=e=>{var t,c,s,r,l,d;if(!(null===(c=null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||void 0===c?void 0:c[i]))return!1;return!!(null===(d=null===(l=null===(r=null===(s=null==n?void 0:n[o])||void 0===s?void 0:s.products)||void 0===r?void 0:r[i])||void 0===l?void 0:l.variants)||void 0===d?void 0:d[e])};return e.jsxs("div",{children:[e.jsx(O,{isVariant:!1,data:c,productId:i,collectionId:o,isSelected:!!(null===(x=null===(f=null==n?void 0:n[o])||void 0===f?void 0:f.products)||void 0===x?void 0:x[i]),isPartiallyChecked:d,selectedCollectionsDispatch:s,upliftAdditions:l,viewOnly:r,hideProductCheckbox:a,hideVariantCheckbox:h,hideProductVariants:v,pickerType:p,outOfStockAction:u,onInfoIconClick:j,showProductDetailInfoIcon:g},i),v?null:Object.keys(c.variants||[]).length>1&&Object.keys(c.variants||[]).map((t=>e.jsx(O,{isVariant:!0,hideVariantCheckbox:h,data:c.variants[t],variantId:t,productId:i,viewOnly:r,upliftAdditions:l,collectionId:o,isSelected:b(t),selectedCollectionsDispatch:s,outOfStockAction:u,onInfoIconClick:j,showProductDetailInfoIcon:g},t)))]});var f,x},O=t=>{const{isVariant:o,data:i,productId:c,collectionId:n,variantId:a,isSelected:u,selectedCollectionsDispatch:v,viewOnly:g,upliftAdditions:f,isPartiallyChecked:I,hideProductCheckbox:y,outOfStockAction:k,hideVariantCheckbox:O,hideProductVariants:C,pickerType:m,onInfoIconClick:P,showProductDetailInfoIcon:S}=t;return e.jsxs(x.ProductCardStyle,Object.assign({isVariant:o,onClick:e=>{"PRODUCT"===m&&C&&(e.stopPropagation(),v({type:"reset",data:{}}),f("variantSelected",{productId:c,variantId:a||Object.keys(i.variants)[0],collectionId:n,variant:i}))},isActive:u},{children:[o&&!g&&!O||!o&&!g&&!y?e.jsx(l.CheckBox,{isChecked:u,isPartiallyChecked:I||!1,onValueChange:function(e){o?e?f("variantSelected",{productId:c,variantId:a,collectionId:n,variant:i}):v({type:"variantUnselected",data:{productId:c,variantId:a,collectionId:n}}):e?f("productSelected",{productId:c,collectionId:n,product:i}):v({type:"productUnselected",data:{productId:c,collectionId:n}})}}):e.jsx(e.Fragment,{}),e.jsx("div",{children:e.jsx(h.ShimmerImage,{width:40,height:40,imageUrl:i.image,alt:"Item",borderRadius:4})}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},{children:[e.jsx(p.Tooltip,Object.assign({variant:"light",body:i.name,placement:"bottom",delay:400},{children:e.jsx(j.BodyPrimary,Object.assign({numberOfLines:1},{children:i.name}))})),S&&e.jsx(d.IconButton,{onClick:()=>{null==P||P(i)},Icon:()=>e.jsx(r.default,{width:20,height:20,color:s.COLORS.content.placeholder})})]})),e.jsx(b.ProductPickerTag,{isVariant:o,data:i,outOfStockAction:k})]}))]}))};exports.ProductCard=O,exports.ProductGroup=k,exports.ProductsScreen=r=>{const{data:h,collectionsDispatch:p,selectedData:b,selectedCollectionsDispatch:O,productFetcher:C,storeId:m,setScreen:P,setSaveDisabled:S,hideInCollectionSearch:A,customCollectionRestriction:E,hideProductCheckbox:T,outOfStockAction:V=I.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:D=!1,selectProductsFromCustomCollection:w=!1,pickerType:q,hideProductVariants:R,fbStatusFetcher:B,onInfoIconClick:F,showProductDetailInfoIcon:L}=r,U=n.useContext(f.CollectionIdContext),_=n.useRef(null),H=n.useRef(0),[J,K]=n.useState(!1),[M,N]=n.useState(""),[W,z]=n.useState(!1),[G,Q]=n.useState(h),X=n.useRef(!1);n.useEffect((()=>{const e=setTimeout((()=>{M.length?(z(!0),r.searchInCollectionFetcher(m,U,M).then((e=>{const t=c.cloneDeep(h);t.products=e,Q(t);const o=y.getVariantIdsToFetchAtProductLevel(null!=e?e:{},h);$(o,null!=e?e:{},!0),S(!1),z(!1)}))):Q(h)}),800);return()=>clearTimeout(e)}),[M]),n.useEffect((()=>{var e,t,o,i,c,n,s,r;console.log("vj: collectionId change before",h,h.products,null===(t=Object.keys(null!==(e=h.products)&&void 0!==e?e:{}))||void 0===t?void 0:t.length,X),X.current=!1,H.current=Math.floor((null===(i=Object.keys(null!==(o=h.products)&&void 0!==o?o:{}))||void 0===i?void 0:i.length)/10);const l=y.getVariantIdsToFetchAtProductLevel(null!==(c=h.products)&&void 0!==c?c:{});$(l,null!==(n=h.products)&&void 0!==n?n:{}),console.log("vj: collectionId change after",h,h.products,null===(r=Object.keys(null!==(s=h.products)&&void 0!==s?s:{}))||void 0===r?void 0:r.length,X)}),[U]);const Y=!!E&&h.isSmartCollection,Z=e=>{var t,o,i,c,n,s,r,l;let d=0,a=0;return!!((null===(o=null===(t=null==b?void 0:b[U])||void 0===t?void 0:t.products)||void 0===o?void 0:o[e])&&(null===(n=Object.keys((null===(c=null===(i=null==h?void 0:h.products)||void 0===i?void 0:i[e])||void 0===c?void 0:c.variants)||[]))||void 0===n||n.forEach((()=>a++)),Object.keys((null===(l=null===(r=null===(s=null==b?void 0:b[U])||void 0===s?void 0:s.products)||void 0===r?void 0:r[e])||void 0===l?void 0:l.variants)||[]).forEach((()=>d++)),d>0&&a!==d))};n.useEffect((()=>{(null==h?void 0:h.products)||ee(10)}),[]);const $=(e,t,o)=>{console.log("fetchFbStatusAndDispatchProducts",{variantIdsToFetchFbStatus:e,fbStatusFetcher:B}),B||(o?y.markVariantsAsApprovedProductsLevel(t,p,U,G,Q):y.markVariantsAsApprovedProductsLevel(t,p,U)),e.length>0&&B&&B(m,e).then((e=>{const i=Object.assign({},t);if(Object.keys(t).forEach((o=>{var c,n,s;console.log("vj: response variants",null===(c=null==t?void 0:t[o])||void 0===c?void 0:c.variants),Object.keys(null!==(s=null===(n=null==t?void 0:t[o])||void 0===n?void 0:n.variants)&&void 0!==s?s:{}).forEach((c=>{var n,s;const r=null===(n=null==t?void 0:t[o].variants)||void 0===n?void 0:n[c];console.log("vj: v",{v:r,vId:c,status:e[c],response:e}),r&&"REJECTED"===e[c]?r.fbStatus="REJECTED":r&&"APPROVED"===e[c]&&(r.fbStatus="APPROVED");const l=null===(s=null==i?void 0:i[o])||void 0===s?void 0:s.variants;l&&l[c]&&(l[c]=r)}))})),o){const e=Object.assign({},G);e.products=i,Q(e)}else p({type:"productsPaged",data:{collectionId:U,products:i}})})).catch((e=>{o?y.markVariantsAsApprovedProductsLevel(t,p,U,G,Q):y.markVariantsAsApprovedProductsLevel(t,p,U)}))};n.useEffect((()=>{console.log("vj: observertarget",_.current);const e=new IntersectionObserver((e=>{console.log("vj: observertargetinside",e),e[0].isIntersecting&&(console.log("vj: nextPageRef",H.current,X),H.current>=0&&!X.current&&!M&&(S(!0),K(!0),C(U,m,10,H.current).then((e=>{if(console.log("vj: fetched products",e,X,Object.keys(e).length),Object.keys(e).length||(console.log("vj: setHasAllCollectionLoaded ",!0),X.current=!0),Object.keys(e).length){const t=G;t.products=Object.assign(Object.assign({},G.products),e),Q(t);const o=y.getVariantIdsToFetchAtProductLevel(e);$(o,e),H.current+=1}K(!1),S(!1)})).catch()))}),{threshold:1});return _.current&&e.observe(_.current),()=>{_.current&&e.unobserve(_.current)}}),[_,M]);const ee=e=>{console.log("vj: getProductsForCollection"),S(!0),z(!0),C(U,m,e,0).then((t=>{if(Object.keys(t).length||(console.log("vj: setHasAllCollectionLoaded ",!0),X.current=!0),Object.keys(t).length){Q(Object.assign(Object.assign({},G),{products:t})),console.log("vj: next page when products loaded",H.current);const e=y.getVariantIdsToFetchAtProductLevel(t);$(e,t),H.current=1}console.log("vj: product data",{productData:t,limit:e,data:h}),e||O({type:"selected",data:{id:U,val:Object.assign(Object.assign({},h),{products:t})}}),S(!1),z(!1)})).catch()},te=(e,t)=>{const o=y.liftTheStateUp(t,h);O({type:e,data:Object.assign(Object.assign({},o),{isRestricted:E})})};return e.jsxs("div",{children:[e.jsxs(x.ProductScreenHeader,{children:[e.jsx(d.IconButton,{Icon:t.default,height:16,onClick:()=>{P("collections")}}),e.jsx(j.BodyCaption,Object.assign({style:{color:s.COLORS.content.secondary}},{children:h.name}))]}),!A&&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:()=>W&&M.length?e.jsx(v.Spinner,{size:"small",color:s.COLORS.content.primary}):e.jsx(i.default,{})},id:"listInput",height:"24px",type:"text",value:M,onChangeText:e=>{e.length&&e.trim().length?N(e):N("")},placeholder:"Search products in this collection..."})})),e.jsxs("div",{children:[Object.keys((null==G?void 0:G.products)||[]).length>0&&!Y&&!M.length&&!T&&"-1"!==U&&e.jsxs(x.ProductScreenCollectionCardStyle,{children:[e.jsx(l.CheckBox,{isChecked:!!(null==b?void 0:b[U]),isPartiallyChecked:(e=>{var t;let o=0,i=0;if(b[e]){const c=null==h?void 0:h.products;c&&Object.keys(c).forEach((e=>{var t;const i=null===(t=c[e])||void 0===t?void 0:t.variants;i&&Object.keys(i).forEach((e=>o+=1))}));const n=null===(t=b[e])||void 0===t?void 0:t.products;return n&&Object.keys(n).forEach((e=>{var t;const o=null===(t=n[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((()=>i+=1))})),i>0&&o!==i}return!1})(U),onValueChange:function(e){e?ee():O({type:"unselected",data:{id:U}})}}),e.jsx("div",Object.assign({style:{width:40,height:40}},{children:e.jsx(o.default,{})})),e.jsx(j.TitleRegular,{children:"All Products"})]}),Object.keys((null==G?void 0:G.products)||[]).length?Object.keys(G.products||[]).map((t=>e.jsx(k,{outOfStockAction:V,collectionId:U,isProductPartiallyChecked:Z(t),productId:t,data:G.products[t],selectedData:b,selectedCollectionsDispatch:O,viewOnly:!w&&!!Y,upliftAdditions:te,hideProductCheckbox:T,hideVariantCheckbox:D,hideProductVariants:R,pickerType:q,onInfoIconClick:F,showProductDetailInfoIcon:L},t))):W?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(u.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e.jsx(g.EmptyState,{title:"No products to show",subtitle:M.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."}),e.jsx("div",{ref:_})]}),J&&[1,2,3,4,5].map(((t,o)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(u.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),o=require("../../assets/icons/box.svg.js"),c=require("../../assets/icons/search.svg.js"),i=require("lodash"),n=require("react"),s=require("../../constants/Theme.js"),r=require("../../assets/icons/info.svg.js"),l=require("../checkBox/CheckBox.js"),d=require("../icon-button/IconButton.js"),a=require("../input/Input.js"),u=require("../shimmer/ShimmerComponent/BikShimmer.js"),h=require("../shimmer-image/ShimmerImage.js"),v=require("../spinner/Spinner.js"),p=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),g=require("./emptyState.js"),b=require("./ProductPickerTag.js"),f=require("./reducers.js"),x=require("./style.js"),I=require("./type.js"),y=require("./utility.js");const k=t=>{const{collectionId:o,productId:c,data:i,selectedData:n,selectedCollectionsDispatch:s,viewOnly:r,upliftAdditions:l,isProductPartiallyChecked:d,hideProductCheckbox:a,outOfStockAction:u,hideVariantCheckbox:h,hideProductVariants:v,pickerType:p,onInfoIconClick:j,showProductDetailInfoIcon:g}=t,b=e=>{var t,i,s,r,l,d;if(!(null===(i=null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||void 0===i?void 0:i[c]))return!1;return!!(null===(d=null===(l=null===(r=null===(s=null==n?void 0:n[o])||void 0===s?void 0:s.products)||void 0===r?void 0:r[c])||void 0===l?void 0:l.variants)||void 0===d?void 0:d[e])};return e.jsxs("div",{children:[e.jsx(O,{isVariant:!1,data:i,productId:c,collectionId:o,isSelected:!!(null===(x=null===(f=null==n?void 0:n[o])||void 0===f?void 0:f.products)||void 0===x?void 0:x[c]),isPartiallyChecked:d,selectedCollectionsDispatch:s,upliftAdditions:l,viewOnly:r,hideProductCheckbox:a,hideVariantCheckbox:h,hideProductVariants:v,pickerType:p,outOfStockAction:u,onInfoIconClick:j,showProductDetailInfoIcon:g},c),v?null:(()=>{const e=Object.keys(i.variants||[]);let t=!1;return 1===e.length&&e.forEach((o=>{t=e[o].name.includes(i.name)})),t})()&&Object.keys(i.variants||[]).map((t=>e.jsx(O,{isVariant:!0,hideVariantCheckbox:h,data:i.variants[t],variantId:t,productId:c,viewOnly:r,upliftAdditions:l,collectionId:o,isSelected:b(t),selectedCollectionsDispatch:s,outOfStockAction:u,onInfoIconClick:j,showProductDetailInfoIcon:g},t)))]});var f,x},O=t=>{const{isVariant:o,data:c,productId:i,collectionId:n,variantId:a,isSelected:u,selectedCollectionsDispatch:v,viewOnly:g,upliftAdditions:f,isPartiallyChecked:I,hideProductCheckbox:y,outOfStockAction:k,hideVariantCheckbox:O,hideProductVariants:C,pickerType:m,onInfoIconClick:P,showProductDetailInfoIcon:S}=t;return e.jsxs(x.ProductCardStyle,Object.assign({isVariant:o,onClick:e=>{"PRODUCT"===m&&C&&(e.stopPropagation(),v({type:"reset",data:{}}),f("variantSelected",{productId:i,variantId:a||Object.keys(c.variants)[0],collectionId:n,variant:c}))},isActive:u},{children:[o&&!g&&!O||!o&&!g&&!y?e.jsx(l.CheckBox,{isChecked:u,isPartiallyChecked:I||!1,onValueChange:function(e){o?e?f("variantSelected",{productId:i,variantId:a,collectionId:n,variant:c}):v({type:"variantUnselected",data:{productId:i,variantId:a,collectionId:n}}):e?f("productSelected",{productId:i,collectionId:n,product:c}):v({type:"productUnselected",data:{productId:i,collectionId:n}})}}):e.jsx(e.Fragment,{}),e.jsx("div",{children:e.jsx(h.ShimmerImage,{width:40,height:40,imageUrl:c.image,alt:"Item",borderRadius:4})}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},{children:[e.jsx(p.Tooltip,Object.assign({variant:"light",body:c.name,placement:"bottom",delay:400},{children:e.jsx(j.BodyPrimary,Object.assign({numberOfLines:1},{children:c.name}))})),S&&e.jsx(d.IconButton,{onClick:()=>{null==P||P(c)},Icon:()=>e.jsx(r.default,{width:20,height:20,color:s.COLORS.content.placeholder})})]})),e.jsx(b.ProductPickerTag,{isVariant:o,data:c,outOfStockAction:k})]}))]}))};exports.ProductCard=O,exports.ProductGroup=k,exports.ProductsScreen=r=>{const{data:h,collectionsDispatch:p,selectedData:b,selectedCollectionsDispatch:O,productFetcher:C,storeId:m,setScreen:P,setSaveDisabled:S,hideInCollectionSearch:A,customCollectionRestriction:E,hideProductCheckbox:T,outOfStockAction:V=I.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:D=!1,selectProductsFromCustomCollection:w=!1,pickerType:q,hideProductVariants:R,fbStatusFetcher:B,onInfoIconClick:F,showProductDetailInfoIcon:L}=r,U=n.useContext(f.CollectionIdContext),_=n.useRef(null),H=n.useRef(0),[J,K]=n.useState(!1),[M,N]=n.useState(""),[W,z]=n.useState(!1),[G,Q]=n.useState(h),X=n.useRef(!1);n.useEffect((()=>{const e=setTimeout((()=>{M.length?(z(!0),r.searchInCollectionFetcher(m,U,M).then((e=>{const t=i.cloneDeep(h);t.products=e,Q(t);const o=y.getVariantIdsToFetchAtProductLevel(null!=e?e:{},h);$(o,null!=e?e:{},!0),S(!1),z(!1)}))):Q(h)}),800);return()=>clearTimeout(e)}),[M]),n.useEffect((()=>{var e,t,o,c,i,n,s,r;console.log("vj: collectionId change before",h,h.products,null===(t=Object.keys(null!==(e=h.products)&&void 0!==e?e:{}))||void 0===t?void 0:t.length,X),X.current=!1,H.current=Math.floor((null===(c=Object.keys(null!==(o=h.products)&&void 0!==o?o:{}))||void 0===c?void 0:c.length)/10);const l=y.getVariantIdsToFetchAtProductLevel(null!==(i=h.products)&&void 0!==i?i:{});$(l,null!==(n=h.products)&&void 0!==n?n:{}),console.log("vj: collectionId change after",h,h.products,null===(r=Object.keys(null!==(s=h.products)&&void 0!==s?s:{}))||void 0===r?void 0:r.length,X)}),[U]);const Y=!!E&&h.isSmartCollection,Z=e=>{var t,o,c,i,n,s,r,l;let d=0,a=0;return!!((null===(o=null===(t=null==b?void 0:b[U])||void 0===t?void 0:t.products)||void 0===o?void 0:o[e])&&(null===(n=Object.keys((null===(i=null===(c=null==h?void 0:h.products)||void 0===c?void 0:c[e])||void 0===i?void 0:i.variants)||[]))||void 0===n||n.forEach((()=>a++)),Object.keys((null===(l=null===(r=null===(s=null==b?void 0:b[U])||void 0===s?void 0:s.products)||void 0===r?void 0:r[e])||void 0===l?void 0:l.variants)||[]).forEach((()=>d++)),d>0&&a!==d))};n.useEffect((()=>{(null==h?void 0:h.products)||ee(10)}),[]);const $=(e,t,o)=>{console.log("fetchFbStatusAndDispatchProducts",{variantIdsToFetchFbStatus:e,fbStatusFetcher:B}),B||(o?y.markVariantsAsApprovedProductsLevel(t,p,U,G,Q):y.markVariantsAsApprovedProductsLevel(t,p,U)),e.length>0&&B&&B(m,e).then((e=>{const c=Object.assign({},t);if(Object.keys(t).forEach((o=>{var i,n,s;console.log("vj: response variants",null===(i=null==t?void 0:t[o])||void 0===i?void 0:i.variants),Object.keys(null!==(s=null===(n=null==t?void 0:t[o])||void 0===n?void 0:n.variants)&&void 0!==s?s:{}).forEach((i=>{var n,s;const r=null===(n=null==t?void 0:t[o].variants)||void 0===n?void 0:n[i];console.log("vj: v",{v:r,vId:i,status:e[i],response:e}),r&&"REJECTED"===e[i]?r.fbStatus="REJECTED":r&&"APPROVED"===e[i]&&(r.fbStatus="APPROVED");const l=null===(s=null==c?void 0:c[o])||void 0===s?void 0:s.variants;l&&l[i]&&(l[i]=r)}))})),o){const e=Object.assign({},G);e.products=c,Q(e)}else p({type:"productsPaged",data:{collectionId:U,products:c}})})).catch((e=>{o?y.markVariantsAsApprovedProductsLevel(t,p,U,G,Q):y.markVariantsAsApprovedProductsLevel(t,p,U)}))};n.useEffect((()=>{console.log("vj: observertarget",_.current);const e=new IntersectionObserver((e=>{console.log("vj: observertargetinside",e),e[0].isIntersecting&&(console.log("vj: nextPageRef",H.current,X),H.current>=0&&!X.current&&!M&&(S(!0),K(!0),C(U,m,10,H.current).then((e=>{if(console.log("vj: fetched products",e,X,Object.keys(e).length),Object.keys(e).length||(console.log("vj: setHasAllCollectionLoaded ",!0),X.current=!0),Object.keys(e).length){const t=G;t.products=Object.assign(Object.assign({},G.products),e),Q(t);const o=y.getVariantIdsToFetchAtProductLevel(e);$(o,e),H.current+=1}K(!1),S(!1)})).catch()))}),{threshold:1});return _.current&&e.observe(_.current),()=>{_.current&&e.unobserve(_.current)}}),[_,M]);const ee=e=>{console.log("vj: getProductsForCollection"),S(!0),z(!0),C(U,m,e,0).then((t=>{if(Object.keys(t).length||(console.log("vj: setHasAllCollectionLoaded ",!0),X.current=!0),Object.keys(t).length){Q(Object.assign(Object.assign({},G),{products:t})),console.log("vj: next page when products loaded",H.current);const e=y.getVariantIdsToFetchAtProductLevel(t);$(e,t),H.current=1}console.log("vj: product data",{productData:t,limit:e,data:h}),e||O({type:"selected",data:{id:U,val:Object.assign(Object.assign({},h),{products:t})}}),S(!1),z(!1)})).catch()},te=(e,t)=>{const o=y.liftTheStateUp(t,h);O({type:e,data:Object.assign(Object.assign({},o),{isRestricted:E})})};return e.jsxs("div",{children:[e.jsxs(x.ProductScreenHeader,{children:[e.jsx(d.IconButton,{Icon:t.default,height:16,onClick:()=>{P("collections")}}),e.jsx(j.BodyCaption,Object.assign({style:{color:s.COLORS.content.secondary}},{children:h.name}))]}),!A&&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:()=>W&&M.length?e.jsx(v.Spinner,{size:"small",color:s.COLORS.content.primary}):e.jsx(c.default,{})},id:"listInput",height:"24px",type:"text",value:M,onChangeText:e=>{e.length&&e.trim().length?N(e):N("")},placeholder:"Search products in this collection..."})})),e.jsxs("div",{children:[Object.keys((null==G?void 0:G.products)||[]).length>0&&!Y&&!M.length&&!T&&"-1"!==U&&e.jsxs(x.ProductScreenCollectionCardStyle,{children:[e.jsx(l.CheckBox,{isChecked:!!(null==b?void 0:b[U]),isPartiallyChecked:(e=>{var t;let o=0,c=0;if(b[e]){const i=null==h?void 0:h.products;i&&Object.keys(i).forEach((e=>{var t;const c=null===(t=i[e])||void 0===t?void 0:t.variants;c&&Object.keys(c).forEach((e=>o+=1))}));const n=null===(t=b[e])||void 0===t?void 0:t.products;return n&&Object.keys(n).forEach((e=>{var t;const o=null===(t=n[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((()=>c+=1))})),c>0&&o!==c}return!1})(U),onValueChange:function(e){e?ee():O({type:"unselected",data:{id:U}})}}),e.jsx("div",Object.assign({style:{width:40,height:40}},{children:e.jsx(o.default,{})})),e.jsx(j.TitleRegular,{children:"All Products"})]}),Object.keys((null==G?void 0:G.products)||[]).length?Object.keys(G.products||[]).map((t=>e.jsx(k,{outOfStockAction:V,collectionId:U,isProductPartiallyChecked:Z(t),productId:t,data:G.products[t],selectedData:b,selectedCollectionsDispatch:O,viewOnly:!w&&!!Y,upliftAdditions:te,hideProductCheckbox:T,hideVariantCheckbox:D,hideProductVariants:R,pickerType:q,onInfoIconClick:F,showProductDetailInfoIcon:L},t))):W?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(u.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e.jsx(g.EmptyState,{title:"No products to show",subtitle:M.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."}),e.jsx("div",{ref:_})]}),J&&[1,2,3,4,5].map(((t,o)=>e.jsx("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(u.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))]})};

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

@@ -8,9 +8,15 @@
 	overflow-x: hidden;
 
 	::-webkit-scrollbar {
-		display: block !important;
+		display: block;
+		width: 8px;
 	}
-`,n=o.default.div`
+
+	::-webkit-scrollbar-thumb {
+		background-color: #888;
+		border-radius: 8px;
+	}
+`,d=o.default.div`
 	height: 64px;
 	background-color: ${e=>e.isDisabled?"#F0F0F0":e.isActive?t.COLORS.background.positive.light:"white"};
 	border-bottom: 1px solid #e0e0e0;
@@ -24,7 +30,7 @@
 		cursor: pointer;
 		background-color: ${t.COLORS.surface.hovered};
 	}
-`,d=o.default.div`
+`,n=o.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -81,10 +87,10 @@
 	position: sticky;
 	top: 0;
 	z-index: 10;
-`,f=o.default.div`
+`,u=o.default.div`
 	display: flex;
 	flex-direction: column;
-`,u=o.default.div`
+`,f=o.default.div`
 	min-height: 72px;
 	background: white;
 	padding: 12px 16px;
@@ -116,4 +122,4 @@
 	align-items: center;
 	border: 1px solid ${t.COLORS.stroke.primary};
 	border-radius: 4px;
-`,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;
+`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=n,exports.CollectionCardStyle=d,exports.CollectionNameHolder=u,exports.ContainerStyle=r,exports.ProductCardStyle=x,exports.ProductScreenCollectionCardStyle=c,exports.ProductScreenHeader=p,exports.ScrollContainerStyle=l,exports.SelectedScreenHeader=s,exports.VariantCardGridStyle=g,exports.VariantCardListStyle=f;

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

@@ -1 +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})}),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(j,Object.assign({variant:"light",body:n.name,placement:"bottom",delay:400},{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};
+import{jsxs as t,jsx as o,Fragment as e}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import n from"../../assets/icons/box.svg.js";import c 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 m}from"../input/Input.js";import{BikShimmer as g}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 E}from"./style.js";import{OUT_OF_STOCK_ACTION as D}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:E,setScreen:T,setSaveDisabled:F,hideInCollectionSearch:B,customCollectionRestriction:U,hideProductCheckbox:L,outOfStockAction:H=D.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),nt=s(!1);a((()=>{const t=setTimeout((()=>{Z.length?(ot(!0),e.searchInCollectionFetcher(E,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,n,c,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,nt),nt.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!==(n=h.products)&&void 0!==n?n:{});rt(s,null!==(c=h.products)&&void 0!==c?c:{}),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,nt)}),[q]);const ct=!!U&&h.isSmartCollection,lt=t=>{var o,e,i,n,c,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===(c=Object.keys((null===(n=null===(i=null==h?void 0:h.products)||void 0===i?void 0:i[t])||void 0===n?void 0:n.variants)||[]))||void 0===c||c.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(E,t).then((t=>{const i=Object.assign({},o);if(Object.keys(o).forEach((e=>{var n,c,l;console.log("vj: response variants",null===(n=null==o?void 0:o[e])||void 0===n?void 0:n.variants),Object.keys(null!==(l=null===(c=null==o?void 0:o[e])||void 0===c?void 0:c.variants)&&void 0!==l?l:{}).forEach((n=>{var c,l;const r=null===(c=null==o?void 0:o[e].variants)||void 0===c?void 0:c[n];console.log("vj: v",{v:r,vId:n,status:t[n],response:t}),r&&"REJECTED"===t[n]?r.fbStatus="REJECTED":r&&"APPROVED"===t[n]&&(r.fbStatus="APPROVED");const s=null===(l=null==i?void 0:i[e])||void 0===l?void 0:l.variants;s&&s[n]&&(s[n]=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,nt),Q.current>=0&&!nt.current&&!Z&&(F(!0),Y(!0),C(q,E,10,Q.current).then((t=>{if(console.log("vj: fetched products",t,nt,Object.keys(t).length),Object.keys(t).length||(console.log("vj: setHasAllCollectionLoaded ",!0),nt.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,E,t,0).then((o=>{if(Object.keys(o).length||(console.log("vj: setHasAllCollectionLoaded ",!0),nt.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(m,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>tt&&Z.length?o(b,{size:"small",color:u.content.primary}):o(c,{})},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&&!ct&&!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 n=null==h?void 0:h.products;n&&Object.keys(n).forEach((t=>{var o;const i=null===(o=n[t])||void 0===o?void 0:o.variants;i&&Object.keys(i).forEach((t=>e+=1))}));const c=null===(o=j[t])||void 0===o?void 0:o.products;return c&&Object.keys(c).forEach((t=>{var o;const e=null===(o=c[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(n,{})})),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&&!!ct,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(g,{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(g,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),e)))]})},R=e=>{const{collectionId:i,productId:n,data:c,selectedData:l,selectedCollectionsDispatch:r,viewOnly:s,upliftAdditions:d,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:h,hideVariantCheckbox:v,hideProductVariants:p,pickerType:m,onInfoIconClick:g,showProductDetailInfoIcon:f}=e,b=t=>{var o,e,c,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[n]))return!1;return!!(null===(d=null===(s=null===(r=null===(c=null==l?void 0:l[i])||void 0===c?void 0:c.products)||void 0===r?void 0:r[n])||void 0===s?void 0:s.variants)||void 0===d?void 0:d[t])};return t("div",{children:[o(F,{isVariant:!1,data:c,productId:n,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[n]),isPartiallyChecked:a,selectedCollectionsDispatch:r,upliftAdditions:d,viewOnly:s,hideProductCheckbox:u,hideVariantCheckbox:v,hideProductVariants:p,pickerType:m,outOfStockAction:h,onInfoIconClick:g,showProductDetailInfoIcon:f},n),p?null:(()=>{const t=Object.keys(c.variants||[]);let o=!1;return 1===t.length&&t.forEach((e=>{o=t[e].name.includes(c.name)})),o})()&&Object.keys(c.variants||[]).map((t=>o(F,{isVariant:!0,hideVariantCheckbox:v,data:c.variants[t],variantId:t,productId:n,viewOnly:s,upliftAdditions:d,collectionId:i,isSelected:b(t),selectedCollectionsDispatch:r,outOfStockAction:h,onInfoIconClick:g,showProductDetailInfoIcon:f},t)))]});var j,y},F=i=>{const{isVariant:n,data:c,productId:l,collectionId:r,variantId:s,isSelected:d,selectedCollectionsDispatch:a,viewOnly:m,upliftAdditions:g,isPartiallyChecked:b,hideProductCheckbox:y,outOfStockAction:I,hideVariantCheckbox:O,hideProductVariants:P,pickerType:x,onInfoIconClick:S,showProductDetailInfoIcon:D}=i;return t(E,Object.assign({isVariant:n,onClick:t=>{"PRODUCT"===x&&P&&(t.stopPropagation(),a({type:"reset",data:{}}),g("variantSelected",{productId:l,variantId:s||Object.keys(c.variants)[0],collectionId:r,variant:c}))},isActive:d},{children:[n&&!m&&!O||!n&&!m&&!y?o(v,{isChecked:d,isPartiallyChecked:b||!1,onValueChange:function(t){n?t?g("variantSelected",{productId:l,variantId:s,collectionId:r,variant:c}):a({type:"variantUnselected",data:{productId:l,variantId:s,collectionId:r}}):t?g("productSelected",{productId:l,collectionId:r,product:c}):a({type:"productUnselected",data:{productId:l,collectionId:r}})}}):o(e,{}),o("div",{children:o(f,{width:40,height:40,imageUrl:c.image,alt:"Item",borderRadius:4})}),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(j,Object.assign({variant:"light",body:c.name,placement:"bottom",delay:400},{children:o(k,Object.assign({numberOfLines:1},{children:c.name}))})),D&&o(p,{onClick:()=>{null==S||S(c)},Icon:()=>o(h,{width:20,height:20,color:u.content.placeholder})})]})),o(C,{isVariant:n,data:c,outOfStockAction:I})]}))]}))};export{F as ProductCard,R as ProductGroup,T as ProductsScreen};

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

@@ -8,7 +8,13 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	overflow-x: hidden;
 
 	::-webkit-scrollbar {
-		display: block !important;
+		display: block;
+		width: 8px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background-color: #888;
+		border-radius: 8px;
 	}
 `,n=e.div`
 	height: 64px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.455-beta.ppi-2",
+	"version": "0.0.455-beta.ppi-4",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",