@bikdotai/bik-component-library 0.0.687-beta.9 → 0.0.687

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

@@ -1 +1 @@
-import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function e(a,e){let r={},d="",c="",s="";switch(e.type){case"selected":return r=t(a),e.data.val.isSmartCollection&&(e.data.isRestricted&&(r={}),r.isCustom=!0),r[e.data.id]=e.data.val,r;case"unselected":return r=t(a),r?.isCustom&&(r.isCustom=!1),delete r[e.data.id],r;case"productUnselected":return r=t(a),d=e.data.productId,c=e.data.collectionId,delete r[c].products[d],Object.keys(r[c].products).length||(r?.isCustom&&(r.isCustom=!1),delete r[c]),r;case"productSelected":return r=t(a),d=e.data.productId,c=e.data.collectionId,e.data.catalogOnlyData?.isSmartCollection&&(e.data.isRestricted&&(r={}),r.isCustom=!0),r?.[c]||(r[c]=e.data.catalogOnlyData,r[c].products={}),r[c].products[d]=e.data.product,r;case"variantSelected":return r=t(a),d=e.data.productId,c=e.data.collectionId,s=e.data.variantId,e.data.catalogOnlyData?.isSmartCollection&&(e.data.isRestricted&&(r={}),r.isCustom=!0),r?.[c]||(r[c]=e.data.catalogOnlyData,r[c].products={},r[c].products[d]=e.data.productOnlyData,r[c].products[d].variants={}),r?.[c]?.products||(r[c].products={}),r?.[c]?.products?.[d]||(r[c].products[d]=e.data.productOnlyData,r[c].products[d].variants={}),r[c].products[d].variants||(r[c].products[d].variants={}),r[c].products[d].variants[s]=e.data.variant,r;case"variantUnselected":return r=t(a),d=e.data.productId,c=e.data.collectionId,s=e.data.variantId,r[c].products[d]?.variants?.[s]&&delete r[c].products[d].variants[s],Object.keys(r[c].products?.[d]?.variants??{}).length||(delete r[c].products[d],Object.keys(r[c].products).length||(r[c]?.isSmartCollection&&(r.isCustom=!1),delete r[c])),r;case"update":return r={...a},r;case"reset":return{};default:return a}}function r(t,a){let e={};switch(a.type){case"fetched":return e={...a.data},e;case"productsFetched":return e={...t},e[a.data.collectionId].products=a.data.products,e;case"paged":return e={...t,...a.data},e;case"productsPaged":return e={...t},e[a.data.collectionId].products={...e[a.data.collectionId].products,...a.data.products},e;case"searched":e={...t};for(const t in a.data)t in e||(e[t]=a.data[t]);return e;default:return{}}}function d(t,a){let e={};switch(a.type){case"paginate":e={...t};for(const t in a.data)if(Object.prototype.hasOwnProperty.call(a.data,t)){const r=a.data[t];if(Object.prototype.hasOwnProperty.call(e,t)){const a=e[t];e[t]={...a,products:{...a.products,...r.products}}}else e[t]=r}return e;case"update":return e={...t},e;case"set":return e={...t,...a.data},e;case"filter":e={};for(const r in t)if(r in a.data){const d={...t[r]},c=a.data[r],s={};for(const t in d.products)if(t in c.products){const a={...d.products[t]},e=c.products[t],r={};for(const t in a.variants)t in e.variants&&(r[t]={...a.variants[t]});Object.keys(r).length>0&&(a.variants=r,s[t]=a)}Object.keys(s).length>0&&(d.products=s,e[r]=d)}return e;default:return t}}function c(t,a){let e={collections:{},products:{}};switch(a.type){case"set":return a.data;case"setProducts":return e={...t},e.products=a.data,e;default:return t}}const s=a("");export{s as CollectionIdContext,r as collectionsReducer,d as paginationReducer,c as searchReducer,e as selectedColectionsReducer};
+import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function e(a,e){var s,d,c,o,r,n,i,u,l,p,v;let O={},g="",b="",j="";switch(e.type){case"selected":return O=t(a),e.data.val.isSmartCollection&&(e.data.isRestricted&&(O={}),O.isCustom=!0),O[e.data.id]=e.data.val,O;case"unselected":return O=t(a),(null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[e.data.id],O;case"productUnselected":return O=t(a),g=e.data.productId,b=e.data.collectionId,delete O[b].products[g],Object.keys(O[b].products).length||((null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[b]),O;case"productSelected":return O=t(a),g=e.data.productId,b=e.data.collectionId,(null===(s=e.data.catalogOnlyData)||void 0===s?void 0:s.isSmartCollection)&&(e.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=e.data.catalogOnlyData,O[b].products={}),O[b].products[g]=e.data.product,O;case"variantSelected":return O=t(a),g=e.data.productId,b=e.data.collectionId,j=e.data.variantId,(null===(d=e.data.catalogOnlyData)||void 0===d?void 0:d.isSmartCollection)&&(e.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=e.data.catalogOnlyData,O[b].products={},O[b].products[g]=e.data.productOnlyData,O[b].products[g].variants={}),(null===(c=null==O?void 0:O[b])||void 0===c?void 0:c.products)||(O[b].products={}),(null===(r=null===(o=null==O?void 0:O[b])||void 0===o?void 0:o.products)||void 0===r?void 0:r[g])||(O[b].products[g]=e.data.productOnlyData,O[b].products[g].variants={}),O[b].products[g].variants||(O[b].products[g].variants={}),O[b].products[g].variants[j]=e.data.variant,O;case"variantUnselected":return O=t(a),g=e.data.productId,b=e.data.collectionId,j=e.data.variantId,(null===(i=null===(n=O[b].products[g])||void 0===n?void 0:n.variants)||void 0===i?void 0:i[j])&&delete O[b].products[g].variants[j],Object.keys(null!==(p=null===(l=null===(u=O[b].products)||void 0===u?void 0:u[g])||void 0===l?void 0:l.variants)&&void 0!==p?p:{}).length||(delete O[b].products[g],Object.keys(O[b].products).length||((null===(v=O[b])||void 0===v?void 0:v.isSmartCollection)&&(O.isCustom=!1),delete O[b])),O;case"update":return O=Object.assign({},a),O;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;case"searched":e=Object.assign({},t);for(const t in a.data)t in e||(e[t]=a.data[t]);return e;default:return{}}}function d(t,a){let e={};switch(a.type){case"paginate":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 d=Object.assign({},t[s]),c=a.data[s],o={};for(const t in d.products)if(t in c.products){const a=Object.assign({},d.products[t]),e=c.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&&(d.products=o,e[s]=d)}return e;default:return t}}function c(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,d as paginationReducer,c as searchReducer,e as selectedColectionsReducer};

package/dist/esm/components/product-picker-v2/searchScreen.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import { Collection, FbStatusFetcherReturn, SearchedItems, SelectedItems } from '.';
+import { SearchReducerActions, SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+interface SearchScreenInterface {
+    customCollectionRestriction?: boolean;
+    selectedCollections: SelectedItems;
+    searchedCollections: SearchedItems;
+    searchedCollectionsDispatch: React.Dispatch<SearchReducerActions>;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    setCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    collections: {
+        [key: string]: Collection;
+    };
+    onBackPress: () => void;
+    hideVariantCheckbox?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    hideProductVariants?: boolean;
+    hideProductCheckbox?: boolean;
+    storeId: string;
+    appType: ApplicationType;
+    fbStatusFetcher?: (storeId: string, variantIds: string[], appType: ApplicationType) => FbStatusFetcherReturn;
+    hideCollectionCheckbox?: boolean;
+    renderWithoutModal?: boolean;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+}
+export declare const SearchScreen: (props: SearchScreenInterface) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/arrow_left.svg.js";import{useEffect as s}from"react";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as r}from"../TypographyStyle.js";import{CollectionCard as l}from"./collectionScreen.js";import{EmptyState as d}from"./emptyState.js";import{ProductGroup as n}from"./product.js";import{SelectedScreenHeader as p}from"./style.js";import{fetchFbStatusCollection as a,isCollectionPartiallyChecked as u,isProductPartiallyChecked as h,liftTheStateUp as m}from"./utility.js";const C=C=>{const{customCollectionRestriction:k,selectedCollections:y,searchedCollections:f,searchedCollectionsDispatch:b,selectedCollectionsDispatch:j,setScreen:S,collections:P,onBackPress:I,hideVariantCheckbox:O,pickerType:x,hideProductVariants:g,hideProductCheckbox:D,storeId:T,fbStatusFetcher:v,setCollectionId:V,setSelectedCollectionId:w,hideCollectionCheckbox:A,renderWithoutModal:R,outOfStockAction:W,appType:B}=C;s((()=>{a(f.products??{},T,B,b,v,"setProducts")}),[f?.products]);const M=!!k&&y?.isCustom;return e("div",{children:[e(p,{children:[t(i,{Icon:c,onClick:()=>{S("collections"),I()}}),t(r,{children:Object.keys(f?.collections)?.length?"Searched Collections & Products":"Searched Products"})]}),t("div",{children:Object.keys(f?.products).length||Object.keys(f?.collections).length?e(o,{children:[t(o,{children:Object.keys(f?.collections).map((e=>t(l,{customCollectionRestriction:k,data:P?.[e],isDisabled:M&&!y?.[e],isChecked:!!y?.[e],isPartiallyChecked:u(e,P?.[e],y,g),selectedCollectionsDispatch:j,setCollectionId:V,setSelectedCollectionId:w,setScreen:S,id:e,hideCollectionCheckbox:A||"-1"===e,selectedCollections:y,renderWithoutModal:R,pickerType:x,usedInSearch:!0},e)))}),t(o,{children:Object.keys(f?.products).map((e=>Object.keys(f?.products?.[e]?.products||[]).map((o=>{let c=!1;return f?.products?.isCustom&&(c=!0),t(n,{collectionId:e,upliftAdditions:(t,o)=>((e,t,o)=>{const c=m(o,f?.products?.[e]);j({type:t,data:{...c,isRestricted:k}})})(e,t,o),productId:o,data:(f?.products?.[e].products)[o],isProductPartiallyChecked:h(e,o,y,f.products?.[e],g),selectedData:y,selectedCollectionsDispatch:j,viewOnly:c,hideProductCheckbox:D,hideVariantCheckbox:O,hideProductVariants:g,pickerType:x,outOfStockAction:W},o)}))))})]}):t(d,{title:"No search results found",subtitle:"We couldn’t find the product you were looking for."})})]})};export{C as SearchScreen};
+import{jsxs as o,jsx as e,Fragment as t}from"react/jsx-runtime";import l from"../../assets/icons/arrow_left.svg.js";import{useEffect as i}from"react";import{IconButton as c}from"../icon-button/IconButton.js";import{BodyCaption as d}from"../TypographyStyle.js";import{CollectionCard as s}from"./collectionScreen.js";import{EmptyState as r}from"./emptyState.js";import{ProductGroup as n}from"./product.js";import{SelectedScreenHeader as u}from"./style.js";import{fetchFbStatusCollection as a,isCollectionPartiallyChecked as p,isProductPartiallyChecked as h,liftTheStateUp as v}from"./utility.js";const m=m=>{var C;const{customCollectionRestriction:k,selectedCollections:y,searchedCollections:b,searchedCollectionsDispatch:f,selectedCollectionsDispatch:j,setScreen:S,collections:O,onBackPress:P,hideVariantCheckbox:I,pickerType:g,hideProductVariants:x,hideProductCheckbox:D,storeId:T,fbStatusFetcher:V,setCollectionId:w,setSelectedCollectionId:A,hideCollectionCheckbox:R,renderWithoutModal:W,outOfStockAction:B,appType:M}=m;i((()=>{var o;a(null!==(o=b.products)&&void 0!==o?o:{},T,M,f,V,"setProducts")}),[null==b?void 0:b.products]);const F=!!k&&(null==y?void 0:y.isCustom);return o("div",{children:[o(u,{children:[e(c,{Icon:l,onClick:()=>{S("collections"),P()}}),e(d,{children:(null===(C=Object.keys(null==b?void 0:b.collections))||void 0===C?void 0:C.length)?"Searched Collections & Products":"Searched Products"})]}),e("div",{children:Object.keys(null==b?void 0:b.products).length||Object.keys(null==b?void 0:b.collections).length?o(t,{children:[e(t,{children:Object.keys(null==b?void 0:b.collections).map((o=>e(s,{customCollectionRestriction:k,data:null==O?void 0:O[o],isDisabled:F&&!(null==y?void 0:y[o]),isChecked:!!(null==y?void 0:y[o]),isPartiallyChecked:p(o,null==O?void 0:O[o],y,x),selectedCollectionsDispatch:j,setCollectionId:w,setSelectedCollectionId:A,setScreen:S,id:o,hideCollectionCheckbox:R||"-1"===o,selectedCollections:y,renderWithoutModal:W,pickerType:g,usedInSearch:!0},o)))}),e(t,{children:Object.keys(null==b?void 0:b.products).map((o=>{var t,l;return Object.keys((null===(l=null===(t=null==b?void 0:b.products)||void 0===t?void 0:t[o])||void 0===l?void 0:l.products)||[]).map((t=>{var l,i,c;let d=!1;return(null===(l=null==b?void 0:b.products)||void 0===l?void 0:l.isCustom)&&(d=!0),e(n,{collectionId:o,upliftAdditions:(e,t)=>((o,e,t)=>{var l;const i=v(t,null===(l=null==b?void 0:b.products)||void 0===l?void 0:l[o]);j({type:e,data:Object.assign(Object.assign({},i),{isRestricted:k})})})(o,e,t),productId:t,data:(null===(i=null==b?void 0:b.products)||void 0===i?void 0:i[o].products)[t],isProductPartiallyChecked:h(o,t,y,null===(c=b.products)||void 0===c?void 0:c[o],x),selectedData:y,selectedCollectionsDispatch:j,viewOnly:d,hideProductCheckbox:D,hideVariantCheckbox:I,hideProductVariants:x,pickerType:g,outOfStockAction:B},t)}))}))})]}):e(r,{title:"No search results found",subtitle:"We couldn’t find the product you were looking for."})})]})};export{m as SearchScreen};

package/dist/esm/components/product-picker-v2/selectedScreen.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import { Collection, FbStatusFetcherReturn, SelectedItems } from '.';
+import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+interface SelectedScreenInterface {
+    selectedCollections: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    collections: {
+        [key: string]: Collection;
+    };
+    hideProductVariants?: boolean;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    storeId: string;
+    appType: ApplicationType;
+    fbStatusFetcher?: (storeId: string, variantIds: string[], appType: ApplicationType) => FbStatusFetcherReturn;
+}
+export declare const SelectedScreen: (props: SelectedScreenInterface) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as r}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useRef as c,useReducer as s,useEffect as i}from"react";import{IconButton as n}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as d}from"./emptyState.js";import{ProductGroup as u}from"./product.js";import{paginationReducer as a}from"./reducers.js";import{SelectedScreenHeader as p}from"./style.js";import{paginateSelectedItems as m,fetchFbStatusCollection as f,isProductPartiallyChecked as h}from"./utility.js";const y=y=>{const{selectedCollections:j,selectedCollectionsDispatch:b,setScreen:S,collections:v,hideProductVariants:k=!1,outOfStockAction:I,storeId:O,fbStatusFetcher:g,appType:C}=y,P=c(0),w=c(null),[A,D]=s(a,{});i((()=>{P.current=0;const t=m(j,10,0);D({type:"paginate",data:t}),f(t,O,C,D,g,"set"),P.current+=1}),[]),i((()=>{D({type:"filter",data:j})}),[j]),i((()=>{const t=new IntersectionObserver((t=>{if(t[0].isIntersecting&&P.current>0){const t=m(j,10,P.current);D({type:"paginate",data:t}),f(t,O,C,D,g,"update"),P.current+=1}}),{threshold:1});return w.current&&t.observe(w.current),()=>{w.current&&t.unobserve(w.current)}}),[w,j]);const x=j;return t("div",{children:[t(p,{children:[e(n,{Icon:o,onClick:()=>{S("collections")}}),e(l,{children:"Selected Products"})]}),t("div",{children:[Object.keys(A).length>0?e(r,{children:Object.keys(A).map((t=>Object.keys(A?.[t]?.products||[]).map((r=>{let o=!1;return x?.isCustom&&(o=!0),e(u,{upliftAdditions:null,collectionId:t,productId:r,data:A[t].products[r],isProductPartiallyChecked:h(t,r,x,v?.[t],k),selectedData:x,selectedCollectionsDispatch:b,viewOnly:o,hideProductVariants:k,outOfStockAction:I},r)}))))}):e(d,{title:"No Products Selected",subtitle:"Select products will appear here"}),e("div",{ref:w})]})]})};export{y as SelectedScreen};
+import{jsxs as t,jsx as e,Fragment as r}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useRef as c,useReducer as i,useEffect as n}from"react";import{IconButton as s}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as d}from"./emptyState.js";import{ProductGroup as u}from"./product.js";import{paginationReducer as a}from"./reducers.js";import{SelectedScreenHeader as p}from"./style.js";import{paginateSelectedItems as m,fetchFbStatusCollection as f,isProductPartiallyChecked as h}from"./utility.js";const y=y=>{const{selectedCollections:v,selectedCollectionsDispatch:j,setScreen:b,collections:S,hideProductVariants:k=!1,outOfStockAction:I,storeId:O,fbStatusFetcher:g,appType:C}=y,P=c(0),w=c(null),[A,D]=i(a,{});n((()=>{P.current=0;const t=m(v,10,0);D({type:"paginate",data:t}),f(t,O,C,D,g,"set"),P.current+=1}),[]),n((()=>{D({type:"filter",data:v})}),[v]),n((()=>{const t=new IntersectionObserver((t=>{if(t[0].isIntersecting&&P.current>0){const t=m(v,10,P.current);D({type:"paginate",data:t}),f(t,O,C,D,g,"update"),P.current+=1}}),{threshold:1});return w.current&&t.observe(w.current),()=>{w.current&&t.unobserve(w.current)}}),[w,v]);const x=v;return t("div",{children:[t(p,{children:[e(s,{Icon:o,onClick:()=>{b("collections")}}),e(l,{children:"Selected Products"})]}),t("div",{children:[Object.keys(A).length>0?e(r,{children:Object.keys(A).map((t=>{var r;return Object.keys((null===(r=null==A?void 0:A[t])||void 0===r?void 0:r.products)||[]).map((r=>{let o=!1;return(null==x?void 0:x.isCustom)&&(o=!0),e(u,{upliftAdditions:null,collectionId:t,productId:r,data:A[t].products[r],isProductPartiallyChecked:h(t,r,x,null==S?void 0:S[t],k),selectedData:x,selectedCollectionsDispatch:j,viewOnly:o,hideProductVariants:k,outOfStockAction:I},r)}))}))}):e(d,{title:"No Products Selected",subtitle:"Select products will appear here"}),e("div",{ref:w})]})]})};export{y as SelectedScreen};

package/dist/esm/components/product-picker-v2/style.d.ts

@@ -0,0 +1,36 @@
+export declare const ContainerStyle: import("styled-components").StyledComponent<"div", any, {
+    renderWithoutModal?: boolean | undefined;
+}, never>;
+export declare const ScrollContainerStyle: import("styled-components").StyledComponent<"div", any, {
+    screenName: string;
+}, never>;
+export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isDisabled: boolean;
+    isActive: boolean;
+    usedInSearch: boolean;
+}, never>;
+export declare const CollectionCardInfoStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionCardDetailStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenCollectionCardStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isVariant: boolean;
+    isActive: boolean;
+}, never>;
+export declare const SelectedScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionNameHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VariantCardListStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VariantCardGridStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHeaderRightIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFooterForNonModal: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SKUIDBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EllipsedBodyTiny: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const ProductSubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitleSmall: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;

package/dist/esm/components/product-picker-v2/type.d.ts

@@ -1,22 +1,19 @@
-declare enum OUT_OF_STOCK_ACTION {
-    HIDE = "HIDE",
-    NORMAL = "NORMAL",
-    /** @description shows OOS label  */
-    BLUR = "BLUR"
-}
-interface FooterForNonModalI {
-    renderFooter?: boolean;
-    primaryButtonText?: string;
-    primaryButtonDisabled?: boolean;
-    isLoading?: boolean;
-}
-declare enum ScreenName {
-    Collections = "collections",
-    RearrangeProducts = "rearrange",
-    SelectedProducts = "view",
-    SearchProducts = "searchProducts",
-    Products = "products"
-}
-
-export { OUT_OF_STOCK_ACTION, ScreenName };
-export type { FooterForNonModalI };
+export declare enum OUT_OF_STOCK_ACTION {
+    HIDE = "HIDE",
+    NORMAL = "NORMAL",
+    /** @description shows OOS label  */
+    BLUR = "BLUR"
+}
+export interface FooterForNonModalI {
+    renderFooter?: boolean;
+    primaryButtonText?: string;
+    primaryButtonDisabled?: boolean;
+    isLoading?: boolean;
+}
+export declare enum ScreenName {
+    Collections = "collections",
+    RearrangeProducts = "rearrange",
+    SelectedProducts = "view",
+    SearchProducts = "searchProducts",
+    Products = "products"
+}

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

@@ -1 +1 @@
-var r=(r=>(r.HIDE="HIDE",r.NORMAL="NORMAL",r.BLUR="BLUR",r))(r||{}),e=(r=>(r.Collections="collections",r.RearrangeProducts="rearrange",r.SelectedProducts="view",r.SearchProducts="searchProducts",r.Products="products",r))(e||{});export{r as OUT_OF_STOCK_ACTION,e as ScreenName};
+var r,c;!function(r){r.HIDE="HIDE",r.NORMAL="NORMAL",r.BLUR="BLUR"}(r||(r={})),function(r){r.Collections="collections",r.RearrangeProducts="rearrange",r.SelectedProducts="view",r.SearchProducts="searchProducts",r.Products="products"}(c||(c={}));export{r as OUT_OF_STOCK_ACTION,c as ScreenName};

package/dist/esm/components/product-picker-v2/utility.d.ts

@@ -0,0 +1,52 @@
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import { Collection, FbStatusFetcherReturn, Product, ProductVariant, SearchedItems, SelectedItems } from './modal';
+import { CollectionsActions } from './reducers';
+export declare const liftTheStateUp: (payload: any, data: any) => any;
+export declare function paginateSelectedItems(selectedItems: SelectedItems, limit: number, offset: number): {
+    [key: string]: Collection;
+};
+/**
+ * 3 scenarios.
+ * 1. If no api is provided -> marks everything as approved.
+ * 2. If api is success -> sets the status
+ * 3. If api is failure -> marks everything as approved.
+ *
+ * We first get the variant ids to fetch and only if we have variant ids, we call api.
+ */
+export declare const fetchFbStatusCollection: (data: SelectedItems, storeId: string, appType: ApplicationType, dispatcher: any, fbStatusFetcher?: ((storeId: string, variantIds: string[], appType: ApplicationType) => FbStatusFetcherReturn) | undefined, dispatchType?: string) => void;
+/**
+ * Instead of collection level, we do it product level.
+ *
+ * For more info refer @function getVariantIdsToFetch
+ */
+export declare const getVariantIdsToFetchAtProductLevel: (products: {
+    [key: string]: Product;
+}, globalData?: Collection) => string[];
+/**
+ * Instead of collection level, we do it product level.
+ *
+ * For more info refer @function markVariantsAsApproved
+ */
+export declare const markVariantsAsApprovedProductsLevel: (products: {
+    [key: string]: Product;
+}, dispatcher: React.Dispatch<CollectionsActions>, collectionId: string, curScreenData?: Collection, setCurScreenData?: React.Dispatch<React.SetStateAction<Collection>>) => void;
+/**
+ * If product has only one variant and variant name has product name, returns false.
+ * Other cases returns true.
+ */
+export declare const shouldShowVariant: (data: Product) => boolean;
+export declare const isProductPartiallyChecked: (collectionId: string, productId: string, selectedData: SelectedItems, currentCollection: Collection, hideProductVariants?: boolean) => boolean;
+export declare const isCollectionPartiallyChecked: (collectionId: string, collection: Collection, selectedCollections: SelectedItems, hideProductVariants?: boolean) => boolean;
+export declare const updateAllVariantsForSelectedProducts: (selectedItems: {
+    [key: string]: {
+        name: string;
+        image: string;
+        isSmartCollection: boolean;
+        products?: {
+            [key: string]: Product & {
+                allVariants?: ProductVariant | undefined;
+            };
+        } | undefined;
+    };
+}, collections: Collection, searchedProducts: SearchedItems) => Record<string, any>;
+export declare const getSkuId: (product: Product | ProductVariant, isVariant: boolean) => string | undefined;

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

@@ -1 +1 @@
-import{cloneDeep as t}from"lodash";const s=(s,c)=>{const r=t(c);if(delete r.products,(s={...s,catalogOnlyData:r}).productId&&c.products){const e=t(c.products[s.productId]);e?.variants&&delete e.variants,s={...s,catalogOnlyData:r,productOnlyData:e}}return s};function c(t,s,c){const e={};let a=0;for(const o in t)if(Object.prototype.hasOwnProperty.call(t,o)){const n=t[o],u=r(n.products,s,c-a);u&&Object.keys(u).length>0&&(e[o]={...n,products:u}),a+=Object.keys(n.products??{}).length}return e}function r(t,s,c){if(!t)return{};const r=Object.keys(t).slice(c,c+s),e={};return r.forEach((s=>{e[s]=t[s]})),e}const e=(t,s,c)=>{Object.keys(t).forEach((s=>{const c=t[s]?.products??{};Object.keys(c).forEach((c=>{const r=t[s]?.products?.[c]?.variants??{};Object.keys(r).forEach((r=>{const e=t[s]?.products?.[c]?.variants?.[r];e&&!e.fbStatus&&(e.fbStatus="APPROVED")}))}))})),s({type:c,data:t})},a=(t,s,c,r,a,o="paged")=>{a||e(t,r,o);const n=(t=>{const s=[];return Object.keys(t).forEach((c=>{const r=t[c]?.products??{};Object.keys(r).forEach((r=>{const e=t[c]?.products?.[r]?.variants??{};Object.keys(e).forEach((e=>{const a=t[c]?.products?.[r]?.variants?.[e];a?.fbStatus||s.push(e)}))}))})),s})(t);n.length>0&&a&&a(s,n,c).then((s=>{const c={...t};Object.keys(c).forEach((t=>{const r=c[t]?.products??{};Object.keys(r).forEach((r=>{const e=c[t]?.products?.[r]?.variants??{};Object.keys(e).forEach((e=>{const a=c[t]?.products?.[r]?.variants?.[e];a&&"REJECTED"===s[e]?a.fbStatus="REJECTED":a&&"APPROVED"===s[e]&&(a.fbStatus="APPROVED")}))}))})),r({type:o,data:c})})).catch((s=>{console.error("Error in fbStatusFetcher",s),e(t,r,o)}))},o=(t,s)=>{const c=[];return Object.keys(t??{}).forEach((r=>{const e=t?.[r]?.variants??{};Object.keys(e).forEach((e=>{let a;a=s?s?.products?.[r]?.variants?.[e]:t?.[r]?.variants?.[e],a?.fbStatus||c.push(e)}))})),c},n=(t,s,c,r,e)=>{const a={...t};if(Object.keys(t).forEach((s=>{Object.keys(t?.[s]?.variants??{}).forEach((c=>{const r=t?.[s].variants?.[c];r&&(r.fbStatus="APPROVED");const e=a?.[s]?.variants;e&&e[c]&&(e[c]=r)}))})),r&&e){const t={...r};t.products=a,e(t),s({type:"productsPaged",data:{collectionId:c,products:a}})}else s({type:"productsPaged",data:{collectionId:c,products:a}})},u=t=>{const s=Object.keys(t.variants||[]);let c=!1;return!(s.length<=1)||(s.forEach((s=>{c=t.variants?.[s].name.includes(t.name)??!1})),!c)},d=(t,s,c,r,e)=>{let a=0,o=0;if(c?.[t]?.products?.[s]){if(e)return!1;const n=c?.[t]?.products?.[s]?.variants||[];if(1===Object.keys(n).length)for(const r in n){const e=c?.[t]?.products?.[s],a=c?.[t]?.products?.[s]?.variants?.[r];if(a?.name?.includes(e?.name??""))return!1}if(Object.keys(r?.products?.[s]?.variants||[])?.forEach((()=>o++)),Object.keys(c?.[t]?.products?.[s]?.variants||[]).forEach((()=>a++)),a>0&&o!==a)return!0}return!1},i=(t,s,c,r=!1)=>{let e=0,a=0;if(r){const r=s?.products??{};e=Object.keys(r).length;const o=c[t]?.products??{};a=Object.keys(o).length}else if(c[t]){const r=s?.products;r&&Object.keys(r).forEach((t=>{const s=r[t]?.variants;s&&Object.keys(s).forEach((t=>e+=1))}));const o=c[t]?.products;if(o&&Object.keys(o).forEach((t=>{const s=o[t]?.variants;s&&Object.keys(s).forEach((t=>a+=1))})),e<=0&&a>0)return!1}return a>0&&e!==a},p=(s,c,r)=>Object.keys(s).reduce(((e,a)=>a in c?(e[a]={...s[a],products:Object.keys(s[a].products??{}).reduce(((e,o)=>{const n=c[a].products?.[o],u=r?.products?.[a]?.products?.[o];return n?e[o]={...s[a].products?.[o]||{},allVariants:t(n.variants)}:u?e[o]={...s[a].products?.[o]||{},allVariants:t(u.variants)}:s[a].products?.[o]?.allVariants&&(e[o]={...s[a].products?.[o]||{},allVariants:t(s[a].products?.[o].allVariants)}),e}),{})},e):e),{}),f=(t,s)=>{if(s)return t.skuId;const c=Object.values(t?.variants??{});return 1===c.length&&c[0].name.includes(t.name)?c[0].skuId:""};export{a as fetchFbStatusCollection,f as getSkuId,o as getVariantIdsToFetchAtProductLevel,i as isCollectionPartiallyChecked,d as isProductPartiallyChecked,s as liftTheStateUp,n as markVariantsAsApprovedProductsLevel,c as paginateSelectedItems,u as shouldShowVariant,p as updateAllVariantsForSelectedProducts};
+import{cloneDeep as o}from"lodash";const l=(l,i)=>{const n=o(i);if(delete n.products,(l=Object.assign(Object.assign({},l),{catalogOnlyData:n})).productId&&i.products){const t=o(i.products[l.productId]);(null==t?void 0:t.variants)&&delete t.variants,l=Object.assign(Object.assign({},l),{catalogOnlyData:n,productOnlyData:t})}return l};function i(o,l,i){var t;const d={};let v=0;for(const s in o)if(Object.prototype.hasOwnProperty.call(o,s)){const u=o[s],c=n(u.products,l,i-v);c&&Object.keys(c).length>0&&(d[s]=Object.assign(Object.assign({},u),{products:c})),v+=Object.keys(null!==(t=u.products)&&void 0!==t?t:{}).length}return d}function n(o,l,i){if(!o)return{};const n=Object.keys(o).slice(i,i+l),t={};return n.forEach((l=>{t[l]=o[l]})),t}const t=(o,l,i)=>{Object.keys(o).forEach((l=>{var i,n;const t=null!==(n=null===(i=o[l])||void 0===i?void 0:i.products)&&void 0!==n?n:{};Object.keys(t).forEach((i=>{var n,t,d,v;const s=null!==(v=null===(d=null===(t=null===(n=o[l])||void 0===n?void 0:n.products)||void 0===t?void 0:t[i])||void 0===d?void 0:d.variants)&&void 0!==v?v:{};Object.keys(s).forEach((n=>{var t,d,v,s;const u=null===(s=null===(v=null===(d=null===(t=o[l])||void 0===t?void 0:t.products)||void 0===d?void 0:d[i])||void 0===v?void 0:v.variants)||void 0===s?void 0:s[n];u&&!u.fbStatus&&(u.fbStatus="APPROVED")}))}))})),l({type:i,data:o})},d=function(o,l,i,n,d){let v=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"paged";d||t(o,n,v);const s=(o=>{const l=[];return Object.keys(o).forEach((i=>{var n,t;const d=null!==(t=null===(n=o[i])||void 0===n?void 0:n.products)&&void 0!==t?t:{};Object.keys(d).forEach((n=>{var t,d,v,s;const u=null!==(s=null===(v=null===(d=null===(t=o[i])||void 0===t?void 0:t.products)||void 0===d?void 0:d[n])||void 0===v?void 0:v.variants)&&void 0!==s?s:{};Object.keys(u).forEach((t=>{var d,v,s,u;const c=null===(u=null===(s=null===(v=null===(d=o[i])||void 0===d?void 0:d.products)||void 0===v?void 0:v[n])||void 0===s?void 0:s.variants)||void 0===u?void 0:u[t];(null==c?void 0:c.fbStatus)||l.push(t)}))}))})),l})(o);s.length>0&&d&&d(l,s,i).then((l=>{const i=Object.assign({},o);Object.keys(i).forEach((o=>{var n,t;const d=null!==(t=null===(n=i[o])||void 0===n?void 0:n.products)&&void 0!==t?t:{};Object.keys(d).forEach((n=>{var t,d,v,s;const u=null!==(s=null===(v=null===(d=null===(t=i[o])||void 0===t?void 0:t.products)||void 0===d?void 0:d[n])||void 0===v?void 0:v.variants)&&void 0!==s?s:{};Object.keys(u).forEach((t=>{var d,v,s,u;const c=null===(u=null===(s=null===(v=null===(d=i[o])||void 0===d?void 0:d.products)||void 0===v?void 0:v[n])||void 0===s?void 0:s.variants)||void 0===u?void 0:u[t];c&&"REJECTED"===l[t]?c.fbStatus="REJECTED":c&&"APPROVED"===l[t]&&(c.fbStatus="APPROVED")}))}))})),n({type:v,data:i})})).catch((l=>{console.error("Error in fbStatusFetcher",l),t(o,n,v)}))},v=(o,l)=>{const i=[];return Object.keys(null!=o?o:{}).forEach((n=>{var t,d;const v=null!==(d=null===(t=null==o?void 0:o[n])||void 0===t?void 0:t.variants)&&void 0!==d?d:{};Object.keys(v).forEach((t=>{var d,v,s,u,c;let r;r=l?null===(s=null===(v=null===(d=null==l?void 0:l.products)||void 0===d?void 0:d[n])||void 0===v?void 0:v.variants)||void 0===s?void 0:s[t]:null===(c=null===(u=null==o?void 0:o[n])||void 0===u?void 0:u.variants)||void 0===c?void 0:c[t],(null==r?void 0:r.fbStatus)||i.push(t)}))})),i},s=(o,l,i,n,t)=>{const d=Object.assign({},o);if(Object.keys(o).forEach((l=>{var i,n;Object.keys(null!==(n=null===(i=null==o?void 0:o[l])||void 0===i?void 0:i.variants)&&void 0!==n?n:{}).forEach((i=>{var n,t;const v=null===(n=null==o?void 0:o[l].variants)||void 0===n?void 0:n[i];v&&(v.fbStatus="APPROVED");const s=null===(t=null==d?void 0:d[l])||void 0===t?void 0:t.variants;s&&s[i]&&(s[i]=v)}))})),n&&t){const o=Object.assign({},n);o.products=d,t(o),l({type:"productsPaged",data:{collectionId:i,products:d}})}else l({type:"productsPaged",data:{collectionId:i,products:d}})},u=o=>{const l=Object.keys(o.variants||[]);let i=!1;return!(l.length<=1)||(l.forEach((l=>{var n,t;i=null!==(t=null===(n=o.variants)||void 0===n?void 0:n[l].name.includes(o.name))&&void 0!==t&&t})),!i)},c=(o,l,i,n,t)=>{var d,v,s,u,c,r,a,e,p,b,O,f,j,h,y,g,E,k,P;let D=0,V=0;if(null===(v=null===(d=null==i?void 0:i[o])||void 0===d?void 0:d.products)||void 0===v?void 0:v[l]){if(t)return!1;const d=(null===(c=null===(u=null===(s=null==i?void 0:i[o])||void 0===s?void 0:s.products)||void 0===u?void 0:u[l])||void 0===c?void 0:c.variants)||[];if(1===Object.keys(d).length)for(const n in d){const t=null===(a=null===(r=null==i?void 0:i[o])||void 0===r?void 0:r.products)||void 0===a?void 0:a[l],d=null===(O=null===(b=null===(p=null===(e=null==i?void 0:i[o])||void 0===e?void 0:e.products)||void 0===p?void 0:p[l])||void 0===b?void 0:b.variants)||void 0===O?void 0:O[n];if(null===(f=null==d?void 0:d.name)||void 0===f?void 0:f.includes(null!==(j=null==t?void 0:t.name)&&void 0!==j?j:""))return!1}if(null===(g=Object.keys((null===(y=null===(h=null==n?void 0:n.products)||void 0===h?void 0:h[l])||void 0===y?void 0:y.variants)||[]))||void 0===g||g.forEach((()=>V++)),Object.keys((null===(P=null===(k=null===(E=null==i?void 0:i[o])||void 0===E?void 0:E.products)||void 0===k?void 0:k[l])||void 0===P?void 0:P.variants)||[]).forEach((()=>D++)),D>0&&V!==D)return!0}return!1},r=function(o,l,i){var n,t,d,v;let s=0,u=0;if(arguments.length>3&&void 0!==arguments[3]&&arguments[3]){const v=null!==(n=null==l?void 0:l.products)&&void 0!==n?n:{};s=Object.keys(v).length;const c=null!==(d=null===(t=i[o])||void 0===t?void 0:t.products)&&void 0!==d?d:{};u=Object.keys(c).length}else if(i[o]){const n=null==l?void 0:l.products;n&&Object.keys(n).forEach((o=>{var l;const i=null===(l=n[o])||void 0===l?void 0:l.variants;i&&Object.keys(i).forEach((o=>s+=1))}));const t=null===(v=i[o])||void 0===v?void 0:v.products;if(t&&Object.keys(t).forEach((o=>{var l;const i=null===(l=t[o])||void 0===l?void 0:l.variants;i&&Object.keys(i).forEach((o=>u+=1))})),s<=0&&u>0)return!1}return u>0&&s!==u},a=(l,i,n)=>Object.keys(l).reduce(((t,d)=>{var v;return d in i?(t[d]=Object.assign(Object.assign({},l[d]),{products:Object.keys(null!==(v=l[d].products)&&void 0!==v?v:{}).reduce(((t,v)=>{var s,u,c,r,a,e,p,b,O,f;const j=null===(s=i[d].products)||void 0===s?void 0:s[v],h=null===(r=null===(c=null===(u=null==n?void 0:n.products)||void 0===u?void 0:u[d])||void 0===c?void 0:c.products)||void 0===r?void 0:r[v];return j?t[v]=Object.assign(Object.assign({},(null===(a=l[d].products)||void 0===a?void 0:a[v])||{}),{allVariants:o(j.variants)}):h?t[v]=Object.assign(Object.assign({},(null===(e=l[d].products)||void 0===e?void 0:e[v])||{}),{allVariants:o(h.variants)}):(null===(b=null===(p=l[d].products)||void 0===p?void 0:p[v])||void 0===b?void 0:b.allVariants)&&(t[v]=Object.assign(Object.assign({},(null===(O=l[d].products)||void 0===O?void 0:O[v])||{}),{allVariants:o(null===(f=l[d].products)||void 0===f?void 0:f[v].allVariants)})),t}),{})}),t):t}),{}),e=(o,l)=>{var i;if(l)return o.skuId;const n=Object.values(null!==(i=null==o?void 0:o.variants)&&void 0!==i?i:{});return 1===n.length&&n[0].name.includes(o.name)?n[0].skuId:""};export{d as fetchFbStatusCollection,e as getSkuId,v as getVariantIdsToFetchAtProductLevel,r as isCollectionPartiallyChecked,c as isProductPartiallyChecked,l as liftTheStateUp,s as markVariantsAsApprovedProductsLevel,i as paginateSelectedItems,u as shouldShowVariant,a as updateAllVariantsForSelectedProducts};

package/dist/esm/components/product-picker-v2/variant.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { ProductVariant } from './modal';
+import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+/**
+ * Extended type from Product Variant, which contains ids and name.
+ */
+export type ProductVariantForRearrange = ProductVariant & {
+    variantId: string;
+    productId: string;
+    collectionId: string;
+    productName: string;
+};
+/**
+ * Props type for variant card in rearrange screen
+ */
+export interface VariantCardInterface {
+    data: ProductVariantForRearrange;
+    selectedCollectionsDispatch?: React.Dispatch<SelectedCollectionsActions>;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    onDelete?: () => void;
+}
+/**
+ * Variant card in list view format.
+ * Displays image, name and delete icon
+ */
+export declare const VariantCardListView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Variant card in grid view format.
+ * Displays only image
+ */
+export declare const VariantCardGridView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import r from"../../assets/icons/delete.svg.js";import o from"../../assets/icons/drag_handle.svg.js";import{Tooltip as i}from"../tooltips/Tooltip.js";import{COLORS as a}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as c}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as l,BodyCaption as d}from"../TypographyStyle.js";import{CurrencySymbols as m}from"./constants.js";import{ProductHelper as s}from"./helpers/ProductHelper.js";import{ProductPickerTag as h}from"./ProductPickerTag.js";import{VariantCardListStyle as p,ProductInfo as u,ProductSubTitle as g,SKUIDBadge as f,EllipsedBodyTiny as y,VariantCardGridStyle as I}from"./style.js";const j=I=>{const{data:j,selectedCollectionsDispatch:v,outOfStockAction:b}=I,T=()=>{let t;return t=j.name.includes(j.productName)?j.name:`${j.productName} ${j.name}`,t},{dataForProductPickerTag:P,tagText:k,tagType:x}=s.getDataForProductPickerTag(j,!0,b),w=`${j.currency?m[j.currency]??"":""}${j.price??j.actualPrice??""}`,D=j.skuId;return t(p,{children:e("div",{className:"text-container",children:[t(o,{width:24,height:24,color:a.content.placeholder}),t("div",{children:t(c,{width:40,height:40,imageUrl:j.image,alt:"Item",borderRadius:4},j.variantId)}),e("div",{className:"info-container",children:[e("div",{className:"tooltip-title-tag",children:[t(i,{body:T(),placement:"bottom",delay:400,variant:"light",children:t(l,{numberOfLines:1,style:{flex:1,minWidth:0},children:T()})}),e(u,{children:[t(h,{isVariant:!0,data:P,tagText:k,tagType:x}),t(n,{Icon:()=>t(r,{width:24,height:24,color:a.content.placeholder}),onClick:()=>{v&&v({type:"variantUnselected",data:{productId:j.productId,variantId:j.variantId,collectionId:j.collectionId}}),I.onDelete&&I.onDelete()}})]})]}),e(g,{children:[t(d,{color:a.content.secondary,children:!P?.fbStatus||k?null:w}),D&&t(i,{body:D,placement:"top",children:t(f,{children:t(y,{children:`SKU ID: ${D}`})})})]})]})]})})},v=e=>{const{data:r}=e;return t(I,{children:t(i,{body:r.name,alwaysVisible:!1,variant:"dark",placement:"bottom",children:t(c,{width:72,height:72,imageUrl:r.image,alt:"Item",borderRadius:4})})})};export{v as VariantCardGridView,j as VariantCardListView};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import i from"../../assets/icons/delete.svg.js";import r from"../../assets/icons/drag_handle.svg.js";import{Tooltip as o}from"../tooltips/Tooltip.js";import{COLORS as a}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as c}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as l,BodyCaption as s}from"../TypographyStyle.js";import{CurrencySymbols as d}from"./constants.js";import{ProductHelper as m}from"./helpers/ProductHelper.js";import{ProductPickerTag as h}from"./ProductPickerTag.js";import{VariantCardListStyle as p,ProductInfo as g,ProductSubTitle as u,SKUIDBadge as j,EllipsedBodyTiny as b,VariantCardGridStyle as f}from"./style.js";const v=f=>{var v,y,I;const{data:O,selectedCollectionsDispatch:T,outOfStockAction:P}=f,k=()=>{let t;return t=O.name.includes(O.productName)?O.name:`${O.productName} ${O.name}`,t},{dataForProductPickerTag:x,tagText:w,tagType:D}=m.getDataForProductPickerTag(O,!0,P),N=`${O.currency&&null!==(v=d[O.currency])&&void 0!==v?v:""}${null!==(I=null!==(y=O.price)&&void 0!==y?y:O.actualPrice)&&void 0!==I?I:""}`,S=O.skuId;return t(p,{children:e("div",Object.assign({className:"text-container"},{children:[t(r,{width:24,height:24,color:a.content.placeholder}),t("div",{children:t(c,{width:40,height:40,imageUrl:O.image,alt:"Item",borderRadius:4},O.variantId)}),e("div",Object.assign({className:"info-container"},{children:[e("div",Object.assign({className:"tooltip-title-tag"},{children:[t(o,Object.assign({body:k(),placement:"bottom",delay:400,variant:"light"},{children:t(l,Object.assign({numberOfLines:1,style:{flex:1,minWidth:0}},{children:k()}))})),e(g,{children:[t(h,{isVariant:!0,data:x,tagText:w,tagType:D}),t(n,{Icon:()=>t(i,{width:24,height:24,color:a.content.placeholder}),onClick:()=>{T&&T({type:"variantUnselected",data:{productId:O.productId,variantId:O.variantId,collectionId:O.collectionId}}),f.onDelete&&f.onDelete()}})]})]})),e(u,{children:[t(s,Object.assign({color:a.content.secondary},{children:!(null==x?void 0:x.fbStatus)||w?null:N})),S&&t(o,Object.assign({body:S,placement:"top"},{children:t(j,{children:t(b,{children:`SKU ID: ${S}`})})}))]})]}))]}))})},y=e=>{const{data:i}=e;return t(f,{children:t(o,Object.assign({body:i.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:t(c,{width:72,height:72,imageUrl:i.image,alt:"Item",borderRadius:4})}))})};export{y as VariantCardGridView,v as VariantCardListView};

package/dist/esm/components/product-picker-v2/variantComponents.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+import { ProductVariantForRearrange } from './variant';
+/**
+ * Props for list of variants - applicable both in list and grid view
+ */
+export type VariantsComponentProps = {
+    selectedVariants: ProductVariantForRearrange[];
+    setSelectedVariants: React.Dispatch<React.SetStateAction<ProductVariantForRearrange[]>>;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+};
+/**
+ * Returns a react component of variants list, which are eligible to drag and drop.
+ */
+export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, outOfStockAction, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns a react component of variants grid, which are eligible to drag and drop.
+ */
+export declare const VariantsGrid: ({ selectedVariants }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as d}from"react";import{Droppable as a,Draggable as o}from"react-beautiful-dnd";import{COLORS as l}from"../../constants/Theme.js";import{VariantCardListView as t,VariantCardGridView as n}from"./variant.js";const p=({selectedVariants:n,setSelectedVariants:p,selectedCollectionsDispatch:i,outOfStockAction:s})=>{const[c,f]=d(-1);function h(e){if(e?.transform){const r=`translate(0px, ${e.transform.split(",").pop()}`;return{...e,transform:r}}return e}return e(a,{droppableId:"droppable-list",children:(d,a)=>r("div",{...d.droppableProps,ref:d.innerRef,style:{backgroundColor:l.surface.subdued,padding:"0.05px",height:n.length<8?"550px":"100%",overflow:"auto",...d.droppableProps.style},children:[n.map(((r,d)=>e("div",{style:{background:l.surface.hovered,margin:"5px",boxShadow:d===c?"0px 4px 12px rgba(0, 0, 0, 0.12)":""},onMouseEnter:()=>f(d),onMouseLeave:()=>f(-1),children:e(o,{draggableId:`${r.productId}-${r.variantId}`,index:d,children:(a,o)=>e("div",{ref:a.innerRef,...a.draggableProps,...a.dragHandleProps,style:h({...a.draggableProps.style,...a.draggableSnapshot}),children:e(t,{data:r,selectedCollectionsDispatch:i,onDelete:()=>{const e=n.slice();e[d].displayOrder=null,e.splice(d,1),p(e)},outOfStockAction:s},`${r.productId}-${r.variantId}`)})},`${r.productId}-${r.variantId}`)},`${r.productId}-${r.variantId}`))),d.placeholder&&a.isDraggingOver?e("div",{style:{background:l.surface.hovered,margin:"5px"},children:d.placeholder}):null]})})},i=({selectedVariants:d})=>e(a,{droppableId:"droppable-horizontal",children:l=>r("div",{...l.droppableProps,ref:l.innerRef,style:{...l.droppableProps.style,display:"flex"},children:[e(a,{droppableId:"droppable-vertical",direction:"horizontal",children:a=>r("div",{...a.droppableProps,ref:a.innerRef,style:{...a.droppableProps.style,display:"flex",flexWrap:"wrap",flexDirection:"row"},children:[d.map(((d,a)=>e(o,{draggableId:`${d.productId}-${d.variantId}`,index:a,children:(a,o)=>r("div",{ref:a.innerRef,...a.draggableProps,...a.dragHandleProps,children:[e(n,{data:d}),a.placeholder]})},`${d.productId}-${d.variantId}`))),a.placeholder]})}),l.placeholder]})});export{i as VariantsGrid,p as VariantsList};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as a}from"react";import{Droppable as t,Draggable as s}from"react-beautiful-dnd";import{COLORS as n}from"../../constants/Theme.js";import{VariantCardListView as d,VariantCardGridView as i}from"./variant.js";const o=i=>{let{selectedVariants:o,setSelectedVariants:l,selectedCollectionsDispatch:c,outOfStockAction:p}=i;const[g,b]=a(-1);function f(e){if(null==e?void 0:e.transform){const r=`translate(0px, ${e.transform.split(",").pop()}`;return Object.assign(Object.assign({},e),{transform:r})}return e}return e(t,Object.assign({droppableId:"droppable-list"},{children:(a,t)=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign({backgroundColor:n.surface.subdued,padding:"0.05px",height:o.length<8?"550px":"100%",overflow:"auto"},a.droppableProps.style)},{children:[o.map(((r,a)=>e("div",Object.assign({style:{background:n.surface.hovered,margin:"5px",boxShadow:a===g?"0px 4px 12px rgba(0, 0, 0, 0.12)":""},onMouseEnter:()=>b(a),onMouseLeave:()=>b(-1)},{children:e(s,Object.assign({draggableId:`${r.productId}-${r.variantId}`,index:a},{children:(t,s)=>e("div",Object.assign({ref:t.innerRef},t.draggableProps,t.dragHandleProps,{style:f(Object.assign(Object.assign({},t.draggableProps.style),t.draggableSnapshot))},{children:e(d,{data:r,selectedCollectionsDispatch:c,onDelete:()=>{const e=o.slice();e[a].displayOrder=null,e.splice(a,1),l(e)},outOfStockAction:p},`${r.productId}-${r.variantId}`)}))}),`${r.productId}-${r.variantId}`)}),`${r.productId}-${r.variantId}`))),a.placeholder&&t.isDraggingOver?e("div",Object.assign({style:{background:n.surface.hovered,margin:"5px"}},{children:a.placeholder})):null]}))}))},l=a=>{let{selectedVariants:n}=a;return e(t,Object.assign({droppableId:"droppable-horizontal"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex"})},{children:[e(t,Object.assign({droppableId:"droppable-vertical",direction:"horizontal"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"})},{children:[n.map(((a,t)=>e(s,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:t},{children:(t,s)=>r("div",Object.assign({ref:t.innerRef},t.draggableProps,t.dragHandleProps,{children:[e(i,{data:a}),t.placeholder]}))}),`${a.productId}-${a.variantId}`))),a.placeholder]}))})),a.placeholder]}))}))};export{l as VariantsGrid,o as VariantsList};

package/dist/esm/components/progress-bar/CircularProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const CircularProgressBar: React.FC<{
+    percentage: number;
+    width?: number;
+    containerStyle?: React.CSSProperties;
+}>;
+export default CircularProgressBar;

package/dist/esm/components/progress-bar/CircularProgressBar.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import r from"../../assets/icons/checklistIcon.svg.js";const o=({percentage:o,width:s=200,containerStyle:i})=>{const n=o<0?0:o>100?100:o,c=s/2-s/10,l=c*Math.PI*2,a=l-l*n/100,f=s/10,d=s/3;return t("div",{style:i,children:e("svg",{width:s,height:s,viewBox:`0 0 ${s} ${s}`,children:[t("defs",{children:e("linearGradient",{id:"gradientStroke",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[t("stop",{offset:"0%",stopColor:"#7000FF"}),t("stop",{offset:"100%",stopColor:"#AD00FF"})]})}),t("circle",{cx:s/2,cy:s/2,strokeWidth:f,r:c,strokeOpacity:.8,fill:"none",style:{stroke:"#ffffff"}}),t("circle",{cx:s/2,cy:s/2,strokeWidth:f,r:c,style:{stroke:"url(#gradientStroke)",strokeDasharray:l,strokeDashoffset:a},transform:`rotate(-90 ${s/2} ${s/2})`,fill:"none",strokeLinecap:"round",strokeLinejoin:"round"}),t(r,{x:s/2-d/2,width:d})]})})};export{o as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import r from"../../assets/icons/checklistIcon.svg.js";const s=s=>{let{percentage:o,width:i=200,containerStyle:n}=s;const c=o<0?0:o>100?100:o,a=i/2-i/10,l=a*Math.PI*2,f=l-l*c/100,d=i/10,h=i/3;return t("div",Object.assign({style:n},{children:e("svg",Object.assign({width:i,height:i,viewBox:`0 0 ${i} ${i}`},{children:[t("defs",{children:e("linearGradient",Object.assign({id:"gradientStroke",x1:"0%",y1:"0%",x2:"100%",y2:"0%"},{children:[t("stop",{offset:"0%",stopColor:"#7000FF"}),t("stop",{offset:"100%",stopColor:"#AD00FF"})]}))}),t("circle",{cx:i/2,cy:i/2,strokeWidth:d,r:a,strokeOpacity:.8,fill:"none",style:{stroke:"#ffffff"}}),t("circle",{cx:i/2,cy:i/2,strokeWidth:d,r:a,style:{stroke:"url(#gradientStroke)",strokeDasharray:l,strokeDashoffset:f},transform:`rotate(-90 ${i/2} ${i/2})`,fill:"none",strokeLinecap:"round",strokeLinejoin:"round"}),t(r,{x:i/2-h/2,width:h})]}))}))};export{s as default};

package/dist/esm/components/progress-bar/ProgressBarComponent.d.ts

@@ -1,21 +1,14 @@
-import * as _emotion_styled from '@emotion/styled';
-import * as React from 'react';
-import * as _emotion_react from '@emotion/react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface ProgressBarProps {
-    completed: number;
-    isAnimated: boolean;
-    color?: string;
-    height?: number;
-}
-declare const ProgressBarComponent: (props: ProgressBarProps) => react_jsx_runtime.JSX.Element;
-declare const ProgressCompletedBar: _emotion_styled.StyledComponent<{
-    theme?: _emotion_react.Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & {
-    color: string;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-export { ProgressBarComponent, ProgressCompletedBar };
-export type { ProgressBarProps };
+/// <reference types="react" />
+export interface ProgressBarProps {
+    completed: number;
+    isAnimated: boolean;
+    color?: string;
+    height?: number;
+}
+export declare const ProgressBarComponent: (props: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCompletedBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    color: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/progress-bar/ProgressBarComponent.js

@@ -1,6 +1 @@
-import{jsx as o}from"react/jsx-runtime";import t from"@emotion/styled";import{ProgressBar as r}from"react-bootstrap";import{COLORS as e}from"../../constants/Theme.js";const i=t=>o(m,{color:t.color?t.color:e.content.brand,children:o(r,{animated:t.isAnimated,now:t.completed,style:{height:`${t.height?t.height:8}px`}})}),m=t.div`
-	flex: 50%;
-	.progress-bar {
-		background: ${o=>o.color};
-	}
-`;export{i as ProgressBarComponent,m as ProgressCompletedBar};
+import c from"@emotion/styled/base";import{jsx as b}from"react/jsx-runtime";import{ProgressBar as o}from"react-bootstrap";import{COLORS as t}from"../../constants/Theme.js";const I=c=>b(l,Object.assign({color:c.color?c.color:t.content.brand},{children:b(o,{animated:c.isAnimated,now:c.completed,style:{height:`${c.height?c.height:8}px`}})})),l=c("div","production"===process.env.NODE_ENV?{target:"e17nsuvt0"}:{target:"e17nsuvt0",label:"ProgressCompletedBar"})("flex:50%;.progress-bar{background:",(c=>c.color),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByb2dyZXNzQmFyQ29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPK0MiLCJmaWxlIjoiUHJvZ3Jlc3NCYXJDb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3ggfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0JhciB9IGZyb20gJ3JlYWN0LWJvb3RzdHJhcCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IFByb2dyZXNzQmFyQ29tcG9uZW50ID0gKHByb3BzKSA9PiB7XHJcbiAgICByZXR1cm4gKF9qc3goUHJvZ3Jlc3NDb21wbGV0ZWRCYXIsIE9iamVjdC5hc3NpZ24oeyBjb2xvcjogcHJvcHMuY29sb3IgPyBwcm9wcy5jb2xvciA6IENPTE9SUy5jb250ZW50LmJyYW5kIH0sIHsgY2hpbGRyZW46IF9qc3goUHJvZ3Jlc3NCYXIsIHsgYW5pbWF0ZWQ6IHByb3BzLmlzQW5pbWF0ZWQsIG5vdzogcHJvcHMuY29tcGxldGVkLCBzdHlsZTogeyBoZWlnaHQ6IGAke3Byb3BzLmhlaWdodCA/IHByb3BzLmhlaWdodCA6IDh9cHhgIH0gfSkgfSkpKTtcclxufTtcclxuZXhwb3J0IGNvbnN0IFByb2dyZXNzQ29tcGxldGVkQmFyID0gc3R5bGVkLmRpdiBgXG5cdGZsZXg6IDUwJTtcblx0LnByb2dyZXNzLWJhciB7XG5cdFx0YmFja2dyb3VuZDogJHsocHJvcHMpID0+IHByb3BzLmNvbG9yfTtcblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9UHJvZ3Jlc3NCYXJDb21wb25lbnQuanMubWFwIl19 */"));export{I as ProgressBarComponent,l as ProgressCompletedBar};

package/dist/esm/components/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProgressBarComponent';
+export * from './CircularProgressBar';

package/dist/esm/components/progress-bar-v2/ProgressBarV2.d.ts

@@ -1,27 +1,22 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare enum TextAlignment {
-    RIGHT = "right",
-    LEFT = "left",
-    TOP = "top",
-    BOTTOM = "bottom"
-}
-declare enum ProgressBarType {
-    CIRCLE = "circle",
-    LINE = "line"
-}
-interface ProgressBarV2Props {
-    progress: number;
-    type: ProgressBarType;
-    showProgress?: boolean;
-    text?: string;
-    size?: number;
-    progressBarThickness?: number;
-    color?: string;
-    textPosition?: TextAlignment;
-    matchParentWidth?: boolean;
-}
-declare const ProgressBarV2: (props: ProgressBarV2Props) => react_jsx_runtime.JSX.Element;
-
-export { ProgressBarType, ProgressBarV2, TextAlignment };
-export type { ProgressBarV2Props };
+export declare enum TextAlignment {
+    RIGHT = "right",
+    LEFT = "left",
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export declare enum ProgressBarType {
+    CIRCLE = "circle",
+    LINE = "line"
+}
+export interface ProgressBarV2Props {
+    progress: number;
+    type: ProgressBarType;
+    showProgress?: boolean;
+    text?: string;
+    size?: number;
+    progressBarThickness?: number;
+    color?: string;
+    textPosition?: TextAlignment;
+    matchParentWidth?: boolean;
+}
+export declare const ProgressBarV2: (props: ProgressBarV2Props) => import("react/jsx-runtime").JSX.Element;