@bikdotai/bik-component-library 0.0.736-beta.6 → 0.0.736-beta.8

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ButtonProps } from "../button/model";
+export interface IInstaPost {
+    caption?: string;
+    comments_count: number;
+    id: string;
+    ig_id: string;
+    media_type: string;
+    timestamp: string;
+    media_url: string;
+    permalink: string;
+    products: Product[];
+}
+export interface ProductPickerProps {
+    show: boolean;
+    products: Product[] | Collection[];
+    onClose: () => void;
+    title: string;
+    onSave: (productIds: Product[] | Collection[]) => void;
+    onSearchKeyChange: (key: string) => Promise<Product[] | Collection[]>;
+    instaPost?: IInstaPost;
+    searchPlaceholder?: string;
+    selectedProducts: Product[] | Collection[];
+    setSelectedProducts: React.Dispatch<React.SetStateAction<Product[] | Collection[]>>;
+    secondaryButtonProps?: ButtonProps;
+}
+export interface Product {
+    image: string;
+    variants: Variant[];
+    id: string;
+    combinations: Combination[];
+    photos: Photo[];
+    isNew: boolean;
+    currency: string;
+    isDiscounted: boolean;
+    isLimited: boolean;
+    catalogId: string;
+    isOutOfStock: boolean;
+    isHidden: boolean;
+    tags: string;
+    description: string;
+    name: string;
+    handle: string;
+}
+export interface Collection {
+    id: string;
+    name: string;
+    description: string;
+    image: string;
+    isHidden: boolean;
+    isPrivate: boolean;
+    handle: string;
+    isSmartCollection: boolean;
+}
+export interface Variant {
+    values: string[];
+    name: string;
+    type: string;
+}
+export interface Combination {
+    id: string;
+    price: number;
+    discountedPrice: number;
+}
+export interface Photo {
+    photoUrl: string;
+}

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

@@ -0,0 +1,3 @@
+export declare const ProductPickerShimmer: (props: {
+    limit?: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{jsx as r,Fragment as m}from"react/jsx-runtime";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";const o=o=>{const{limit:t}=o;return r(m,{children:Array.from({length:null!=t?t:5}).map(((m,o)=>r("div",{style:{borderBottom:"1px solid #E0E0E0"},children:r(i,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})},o)))})};export{o as ProductPickerShimmer};
+import{jsx as r,Fragment as i}from"react/jsx-runtime";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";const t=t=>{const{limit:e}=t;return r(i,{children:Array.from({length:null!=e?e:5}).map(((i,t)=>r("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:r(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),t)))})};export{t as ProductPickerShimmer};

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

@@ -0,0 +1,22 @@
+import { TagType } from '../tag/model';
+import { Product, ProductVariant } from './modal';
+export type ProductPickerTagType = {
+    isVariant: boolean;
+    data: Product | ProductVariant;
+    tagText?: string;
+    tagType?: TagType;
+};
+/**
+ * Used in Product Screen, Search Screen, Selected Screen and Rearrange Screen.
+ * Wherever product card is shown, we use this component.
+ *
+ * New logic: When product has only one variant and variant name is same as product name,
+ * we consider that a variant and do operations as variant.
+ *
+ * The logic for showing tag is moved to ProductHelper.tsx.
+ *
+ * Note: If there is no Fb rejected tag in the variant, we show a shimmer,
+ * meanwhile hit the API to get FB status.
+ *
+ */
+export declare const ProductPickerTag: (props: ProductPickerTagType) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{jsx as t,Fragment as e}from"react/jsx-runtime";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as r}from"../tag/Tag.js";const m=m=>{const{isVariant:a,data:o,tagText:p,tagType:s}=m;return t("div",{style:{display:"flex"},children:!(null==o?void 0:o.fbStatus)&&a?t(i,{boxes:[{height:"24px",width:"100px",marginTop:"0px"}]}):p?t("div",{style:{display:"flex"},children:t(r,{tagText:p,type:s,theme:"light"})}):t(e,{})})};export{m as ProductPickerTag};
+import{jsx as t,Fragment as e}from"react/jsx-runtime";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as r}from"../tag/Tag.js";const s=s=>{const{isVariant:a,data:m,tagText:o,tagType:n}=s;return t("div",Object.assign({style:{display:"flex"}},{children:!(null==m?void 0:m.fbStatus)&&a?t(i,{boxes:[{height:"24px",width:"100px",marginTop:"0px"}]}):o?t("div",Object.assign({style:{display:"flex"}},{children:t(r,{tagText:o,type:n,theme:"light"})})):t(e,{})}))};export{s as ProductPickerTag};

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

@@ -0,0 +1,52 @@
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import React from 'react';
+import { Collection, CollectionFetcherReturn, SelectedItems } from '.';
+import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+export declare const truncate: (str: string, n: number, useWordBoundary: boolean) => string;
+interface CollectionsScreenInterface {
+    customCollectionRestriction?: boolean;
+    dataLoading: boolean;
+    collections: {
+        [key: string]: Collection;
+    };
+    selectedCollections: SelectedItems;
+    collectionFetcher: (offset: number, storeId: string, appType: ApplicationType) => CollectionFetcherReturn;
+    storeId: string;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    collectionsDispatch: React.Dispatch<CollectionsActions>;
+    setSaveDisabled: React.Dispatch<boolean>;
+    pagingControls: {
+        curPage: number;
+        setCurPage: React.Dispatch<React.SetStateAction<number>>;
+    };
+    hideCollectionCheckbox?: boolean;
+    renderWithoutModal?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    appType: ApplicationType;
+    limit?: number;
+    exactLimit?: number;
+}
+export declare const CollectionsScreen: (props: CollectionsScreenInterface) => import("react/jsx-runtime").JSX.Element;
+export interface CollectionCardInterface {
+    customCollectionRestriction?: boolean;
+    data?: Collection;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    id: string;
+    isChecked: boolean;
+    isDisabled: boolean;
+    isPartiallyChecked: boolean;
+    hideCollectionCheckbox?: boolean;
+    renderWithoutModal?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    selectedCollections: SelectedItems;
+    usedInSearch?: boolean;
+}
+export declare const CollectionCard: (props: CollectionCardInterface) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import{useRef as l,useState as c,useEffect as n}from"react";import{CheckBox as r}from"../checkBox/CheckBox.js";import{IconButton as s}from"../icon-button/IconButton.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as a}from"../tooltips/Tooltip.js";import{TitleRegular as u,BodyPrimary as h}from"../TypographyStyle.js";import{EmptyState as p}from"./emptyState.js";import{ProductPickerShimmer as m}from"./ProductPickerShimmer.js";import{CollectionCardStyle as C,CollectionCardInfoStyle as v,CollectionCardDetailStyle as y,CollectionNameHolder as g}from"./style.js";import{isCollectionPartiallyChecked as f}from"./utility.js";const k=(e,t,o)=>{if(!e)return"";if(e.length<=t)return e;const i=e.slice(0,t-1);return(o?i.slice(0,i.lastIndexOf(" ")):i)+"..."},b=o=>{var i;const{customCollectionRestriction:r,dataLoading:s,collections:d,selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,selectedCollections:C,setScreen:v,collectionFetcher:y,collectionsDispatch:g,pagingControls:k,storeId:b,setSaveDisabled:I,hideCollectionCheckbox:O,renderWithoutModal:S,pickerType:T,scrollContainerRef:P,appType:x,limit:L,exactLimit:D}=o,R=l(k.curPage),E=!!r&&(null==C?void 0:C.isCustom),[N,w]=c(!1),B=l(!1),W=l(!1),H=()=>{if(!P||!(null==P?void 0:P.current))return;const{scrollTop:e,clientHeight:t,scrollHeight:o}=P.current;e+t>=o-20&&!B.current&&!W.current&&(I(!0),w(!0),W.current=!0,I(!0),w(!0),y(R.current,b,x).then((e=>{g({type:"paged",data:(null==e?void 0:e.collections)||{}}),k.setCurPage(R.current+1),w(!1),I(!1),W.current=!1,Object.keys(null==e?void 0:e.collections).length||(B.current=!0)})).catch())};n((()=>{var e;return null===(e=null==P?void 0:P.current)||void 0===e||e.addEventListener("scroll",H),()=>{var e;null===(e=null==P?void 0:P.current)||void 0===e||e.removeEventListener("scroll",H)}}),[]),n((()=>{R.current=k.curPage}),[k.curPage]);const M=Object.keys(C||{}).filter((e=>"isCustom"!==e)).length;return e("div",{children:[(null===(i=Object.keys(null!=d?d:{}))||void 0===i?void 0:i.length)?Object.keys(d).map((e=>{var o,i;const l=!!(null==C?void 0:C[e])&&("PRODUCT"!==T||!!Object.keys(null!==(i=null===(o=null==C?void 0:C[e])||void 0===o?void 0:o.products)&&void 0!==i?i:{}).length),c="COLLECTION"===T&&!l&&(!!D&&M>=D||!!L&&M>=L);return t(j,{customCollectionRestriction:r,data:d[e],isDisabled:E&&!(null==C?void 0:C[e])||c,isChecked:l,isPartiallyChecked:f(e,null==d?void 0:d[e],C),selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,setScreen:v,id:e,hideCollectionCheckbox:O||"-1"===e,selectedCollections:C,renderWithoutModal:S,pickerType:T},e)})):s?t(m,{}):t(p,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),N&&t(m,{})]})},j=l=>{const{customCollectionRestriction:c,data:n,selectedCollectionsDispatch:p,setCollectionId:m,setSelectedCollectionId:f,isPartiallyChecked:k,setScreen:b,id:j,isChecked:I,isDisabled:O,hideCollectionCheckbox:S,pickerType:T,usedInSearch:P}=l;return n?e(C,{isDisabled:O,onClick:e=>{if(!O){if("COLLECTION"===T)return e.stopPropagation(),p({type:"reset",data:{}}),p({type:"selected",data:{id:j,val:n,isRestricted:c}}),m(j),void f(j);m(j),f(j),b("products")}},isActive:I,usedInSearch:null!=P&&P,children:[e(v,{children:[!S&&t(r,{isDisabled:O,isChecked:I,isPartiallyChecked:k,onValueChange:function(e,t,o){null==o||o.stopPropagation(),p(e?{type:"selected",data:{id:j,val:n,isRestricted:c}}:{type:"unselected",data:{id:j}}),f(e?j:"")}}),t(y,{children:t(a,{body:n.name,placement:"bottom",delay:400,variant:"light",children:e(g,{children:[t(P?h:u,{numberOfLines:1,children:n.name}),n.isSmartCollection?t("div",{style:{display:"flex"},children:t(d,{tagText:"Smart Collection",type:"warning"})}):t(o,{})]})})})]}),"COLLECTION"!==T&&t(s,{height:12,width:12,disabled:O,Icon:i})]}):t(o,{})};export{j as CollectionCard,b as CollectionsScreen,k as truncate};
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight.svg.js";import{useRef as l,useState as c,useEffect as n}from"react";import{CheckBox as r}from"../checkBox/CheckBox.js";import{IconButton as s}from"../icon-button/IconButton.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as a}from"../tooltips/Tooltip.js";import{TitleRegular as u,BodyPrimary as h}from"../TypographyStyle.js";import{EmptyState as p}from"./emptyState.js";import{ProductPickerShimmer as m}from"./ProductPickerShimmer.js";import{CollectionCardStyle as C,CollectionCardInfoStyle as v,CollectionCardDetailStyle as g,CollectionNameHolder as y}from"./style.js";import{isCollectionPartiallyChecked as f}from"./utility.js";const b=(e,t,i)=>{if(!e)return"";if(e.length<=t)return e;const o=e.slice(0,t-1);return(i?o.slice(0,o.lastIndexOf(" ")):o)+"..."},k=i=>{var o;const{customCollectionRestriction:r,dataLoading:s,collections:d,selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,selectedCollections:C,setScreen:v,collectionFetcher:g,collectionsDispatch:y,pagingControls:b,storeId:k,setSaveDisabled:O,hideCollectionCheckbox:I,renderWithoutModal:S,pickerType:T,scrollContainerRef:P,appType:x,limit:L,exactLimit:D}=i,R=l(b.curPage),E=!!r&&(null==C?void 0:C.isCustom),[N,w]=c(!1),B=l(!1),W=l(!1),H=()=>{if(!P||!(null==P?void 0:P.current))return;const{scrollTop:e,clientHeight:t,scrollHeight:i}=P.current;e+t>=i-20&&!B.current&&!W.current&&(O(!0),w(!0),W.current=!0,O(!0),w(!0),g(R.current,k,x).then((e=>{y({type:"paged",data:(null==e?void 0:e.collections)||{}}),b.setCurPage(R.current+1),w(!1),O(!1),W.current=!1,Object.keys(null==e?void 0:e.collections).length||(B.current=!0)})).catch())};n((()=>{var e;return null===(e=null==P?void 0:P.current)||void 0===e||e.addEventListener("scroll",H),()=>{var e;null===(e=null==P?void 0:P.current)||void 0===e||e.removeEventListener("scroll",H)}}),[]),n((()=>{R.current=b.curPage}),[b.curPage]);const M=Object.keys(C||{}).filter((e=>"isCustom"!==e)).length;return e("div",{children:[(null===(o=Object.keys(null!=d?d:{}))||void 0===o?void 0:o.length)?Object.keys(d).map((e=>{var i,o;const l=!!(null==C?void 0:C[e])&&("PRODUCT"!==T||!!Object.keys(null!==(o=null===(i=null==C?void 0:C[e])||void 0===i?void 0:i.products)&&void 0!==o?o:{}).length),c="COLLECTION"===T&&!l&&(!!D&&M>=D||!!L&&M>=L);return t(j,{customCollectionRestriction:r,data:d[e],isDisabled:E&&!(null==C?void 0:C[e])||c,isChecked:l,isPartiallyChecked:f(e,null==d?void 0:d[e],C),selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,setScreen:v,id:e,hideCollectionCheckbox:I||"-1"===e,selectedCollections:C,renderWithoutModal:S,pickerType:T},e)})):s?t(m,{}):t(p,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),N&&t(m,{})]})},j=l=>{const{customCollectionRestriction:c,data:n,selectedCollectionsDispatch:p,setCollectionId:m,setSelectedCollectionId:f,isPartiallyChecked:b,setScreen:k,id:j,isChecked:O,isDisabled:I,hideCollectionCheckbox:S,pickerType:T,usedInSearch:P}=l;return n?e(C,Object.assign({isDisabled:I,onClick:e=>{if(!I){if("COLLECTION"===T)return e.stopPropagation(),p({type:"reset",data:{}}),p({type:"selected",data:{id:j,val:n,isRestricted:c}}),m(j),void f(j);m(j),f(j),k("products")}},isActive:O,usedInSearch:null!=P&&P},{children:[e(v,{children:[!S&&t(r,{isDisabled:I,isChecked:O,isPartiallyChecked:b,onValueChange:function(e,t,i){null==i||i.stopPropagation(),p(e?{type:"selected",data:{id:j,val:n,isRestricted:c}}:{type:"unselected",data:{id:j}}),f(e?j:"")}}),t(g,{children:t(a,Object.assign({body:n.name,placement:"bottom",delay:400,variant:"light"},{children:e(y,{children:[t(P?h:u,Object.assign({numberOfLines:1},{children:n.name})),n.isSmartCollection?t("div",Object.assign({style:{display:"flex"}},{children:t(d,{tagText:"Smart Collection",type:"warning"})})):t(i,{})]})}))})]}),"COLLECTION"!==T&&t(s,{height:12,width:12,disabled:I,Icon:o})]})):t(i,{})};export{j as CollectionCard,k as CollectionsScreen,b as truncate};

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

@@ -0,0 +1,27 @@
+export declare const CurrencySymbols: {
+    USD: string;
+    GBP: string;
+    CAD: string;
+    AUD: string;
+    DKK: string;
+    SEK: string;
+    EUR: string;
+    BRL: string;
+    TRY: string;
+    JPY: string;
+    SAR: string;
+    AED: string;
+    EGP: string;
+    MAD: string;
+    INR: string;
+    CHF: string;
+    CNY: string;
+    NZD: string;
+    MXN: string;
+    ZAR: string;
+    RUB: string;
+    KRW: string;
+    SGD: string;
+    PKR: string;
+    RO: string;
+};

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

@@ -0,0 +1,6 @@
+interface EmptyStateProps {
+    title: string;
+    subtitle: string;
+}
+export declare const EmptyState: ({ title, subtitle }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,4 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/box_round.svg.js";import r from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{TitleRegular as i,BodySecondary as s}from"../TypographyStyle.js";const c=r=>{let{title:c,subtitle:m}=r;return t(l,{children:[e(o,{width:48,height:48}),e(i,{style:{marginTop:8},children:c}),e(s,{style:{color:n.content.secondary,marginTop:4},children:m})]})},l=r.div`
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import n from"../../assets/icons/box_round.svg.js";import o from"styled-components";import{COLORS as r}from"../../constants/Theme.js";import{TitleRegular as i,BodySecondary as s}from"../TypographyStyle.js";const c=o=>{let{title:c,subtitle:m}=o;return t(l,{children:[e(n,{width:48,height:48}),e(i,Object.assign({style:{marginTop:8}},{children:c})),e(s,Object.assign({style:{color:r.content.secondary,marginTop:4}},{children:m}))]})},l=o.div`
 	height: 400px;
 	display: flex;
 	flex-direction: column;

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

@@ -0,0 +1,56 @@
+import { TagType } from "../../tag/model";
+import { Product, ProductVariant, SelectedItems } from '../modal';
+import { OUT_OF_STOCK_ACTION } from '../type';
+import { ProductVariantForRearrange } from '../variant';
+export declare class ProductHelper {
+    /**
+     * how to know if a product is out of stock? currentCombination.quantity === 0 (OOS)
+     * how to know if a product is hidden ? skipSync === true (not-synced)
+     *
+     * if outOfStockAction === OUT_OF_STOCK_ACTION.HIDE
+     *    - not-synced && OOS => NOT_SYNCED
+     *    - not-synced && !OOS => NOT_SYNCED
+     *    - !not-synced && OOS => NOT_SYNCED
+     *    - !not-synced && !OOS => NORMAL
+     *
+     *
+     * if outOfStockAction === OUT_OF_STOCK_ACTION.BLUR
+     *    - not-synced && OOS => NOT_SYNCED
+     *    - not-synced && !OOS => NOT_SYNCED
+     *    - !not-synced && OOS => OUT_OF_STOCK
+     *    - !not-synced && !OOS => NORMAL
+     *
+     *
+     * if outOfStockAction === OUT_OF_STOCK_ACTION.NORMAL
+     *    - not-synced && OOS => NOT_SYNCED
+     *    - not-synced && !OOS => NOT_SYNCED
+     *    - !not-synced && OOS => NORMAL
+     *    - !not-synced && !OOS => NORMAL
+     *
+     * @param product
+     * @param currentCombination
+     * @param outOfStockAction
+     */
+    static getProductLabels(productVariant: Product | ProductVariant, outOfStockAction?: OUT_OF_STOCK_ACTION): string | null;
+    /**
+     * For FB Rejected returns 'negative', for rest returns 'warning'
+     */
+    static getTagType: (tagText: string) => TagType;
+    static getDataForProductPickerTag: (data: Product | ProductVariant, isVariant: boolean, outOfStockAction: OUT_OF_STOCK_ACTION | undefined) => {
+        isVariantForProductPickerTag: boolean;
+        dataForProductPickerTag: Product | ProductVariant;
+        tagText: string | undefined;
+        tagType: TagType;
+    };
+}
+/**
+ * Loops through each collection, each product, each variant.
+ * For each variant, adds a displayOrder if not already there.
+ * For each variant, additional parameters are added from ProductVariantForRearrange
+ * in order to display the variant card.
+ * After converting to array, sorts the array based on displayOrder and returns.
+ *
+ * @param selectedCollections - Collections in object format
+ * @returns Selected Varaints in array format, sorted based on displayOrder.
+ */
+export declare const parseSelectedVariantsToArray: (selectedCollections: SelectedItems) => ProductVariantForRearrange[];

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

@@ -0,0 +1,2 @@
+export * from './modal';
+export { ScreenName } from './type';

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

@@ -0,0 +1,110 @@
+/// <reference types="react" />
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import { ButtonProps } from '../button/model';
+import { FooterForNonModalI, OUT_OF_STOCK_ACTION, ScreenName } from './type';
+export interface ProductVariant {
+    name: string;
+    price: string;
+    image: string;
+    quantity: number;
+    skipSync?: boolean;
+    displayOrder?: number | null;
+    fbStatus?: FbProductStatus;
+    description?: string;
+    id?: string;
+    actualPrice?: string;
+    currency?: string;
+    skuId?: string;
+}
+export interface Product {
+    name: string;
+    image: string;
+    description?: string;
+    variants?: {
+        [key: string]: ProductVariant;
+    };
+    id?: string;
+    handle?: string;
+    currency?: string;
+}
+export interface Collection {
+    name: string;
+    image: string;
+    isSmartCollection: boolean;
+    products?: {
+        [key: string]: Product;
+    };
+}
+export type SelectedItems = {
+    [key: string]: Collection;
+};
+export type SearchedItems = {
+    collections: SelectedItems;
+    products: SelectedItems;
+};
+export type CollectionFetcherReturn = Promise<{
+    collections: {
+        [key: string]: {
+            image: string;
+            name: string;
+            isSmartCollection: string;
+        };
+    };
+}>;
+export type ProductFetcherReturn = Promise<{
+    [key: string]: Product;
+}>;
+export type FbStatusFetcherReturn = Promise<{
+    [key: string]: FbProductStatus;
+}>;
+export type FbProductStatus = 'APPROVED' | 'REJECTED';
+export type ProductPickerInterface = {
+    hideGlobalSearch?: boolean;
+    hideInCollectionSearch?: boolean;
+    customCollectionRestriction?: boolean;
+    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string, appType: ApplicationType) => ProductFetcherReturn;
+    searchFetcher: (storeId: string, query: string, appType: ApplicationType) => Promise<SearchedItems | SelectedItems>;
+    collectionFetcher: (offset: number, storeId: string, appType: ApplicationType) => CollectionFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string, appType: ApplicationType, limit?: number, offset?: number) => ProductFetcherReturn;
+    fbStatusFetcher?: (storeId: string, variantIds: string[], appType: ApplicationType) => FbStatusFetcherReturn;
+    storeId: string;
+    appType?: ApplicationType;
+    selectedItems: SelectedItems;
+    onAdd: (items: SelectedItems, total: number, secondaryClick?: boolean) => void;
+    onClose?: () => void;
+    visible: boolean;
+    zIndex?: number;
+    limit?: number;
+    exactLimit?: number;
+    hideCollectionCheckbox?: boolean;
+    hideProductCheckbox?: boolean;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    hideVariantCheckbox?: boolean;
+    selectProductsFromCustomCollection?: boolean;
+    hideSelectionCount?: boolean;
+    title?: string;
+    postHeader?: React.ReactNode;
+    width?: string;
+    left?: string;
+    renderWithoutModal?: boolean;
+    onClickSave?: number;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    hideProductVariants?: boolean;
+    rearrangeEnabled?: boolean;
+    selectSingleItem?: boolean;
+    stickyFooter?: boolean;
+    showProductDetails?: boolean;
+    containerStyle?: React.CSSProperties;
+    crossButtonInsideHeader?: boolean;
+    footerForNonModal?: FooterForNonModalI;
+    useDynamicInfoImageSize?: boolean;
+    primaryButton?: ButtonProps;
+    secondaryButton?: ButtonProps;
+    subtitle?: string;
+} & ({
+    startupScreen: ScreenName.RearrangeProducts;
+    rearrangeEnabled: true;
+} | {
+    startupScreen?: Exclude<ScreenName, ScreenName.RearrangeProducts>;
+});
+export declare const ProductPickerModal: (props: ProductPickerInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{ApplicationType as c}from"@bikdotai/bik-models/growth/models/bik-store";import r from"../../assets/icons/search.svg.js";import{useReducer as i,useState as s,useRef as n,useEffect as l}from"react";import{COLORS as a}from"../../constants/Theme.js";import d from"../../assets/icons/cross.svg.js";import{Button as u}from"../button/Button.js";import{Input as h}from"../input/Input.js";import{StyledModal as p}from"../modals/styledModal.js";import{Spinner as m}from"../spinner/Spinner.js";import{Tag as C}from"../tag/Tag.js";import{CollectionsScreen as y}from"./collectionScreen.js";import{ProductInfoOverlay as g}from"./productInfoOverlay.js";import{ProductsScreen as f}from"./productScreen.js";import{RearrangeScreen as b}from"./rearrangeScreen.js";import{collectionsReducer as S,searchReducer as k,selectedColectionsReducer as v,CollectionIdContext as I}from"./reducers.js";import{SearchScreen as x}from"./searchScreen.js";import{SelectedScreen as j}from"./selectedScreen.js";import{ContainerStyle as P,ScrollContainerStyle as T,StyledFooterForNonModal as D}from"./style.js";import{OUT_OF_STOCK_ACTION as O,ScreenName as F}from"./type.js";import{updateAllVariantsForSelectedProducts as R}from"./utility.js";const w=w=>{const{storeId:L,selectedItems:A,onClose:E,visible:$,zIndex:B,exactLimit:z,limit:V,hideCollectionCheckbox:M,hideProductCheckbox:N,outOfStockAction:H=O.BLUR,hideVariantCheckbox:W,selectProductsFromCustomCollection:G,hideSelectionCount:K,title:U,width:Y,left:q,renderWithoutModal:J,onClickSave:Q,pickerType:X,hideProductVariants:Z=!1,startupScreen:_=F.Collections,rearrangeEnabled:ee,selectSingleItem:te=!1,showProductDetails:oe,containerStyle:ce,crossButtonInsideHeader:re=!1,footerForNonModal:ie={},primaryButton:se,secondaryButton:ne,subtitle:le}=w,ae=w.appType||c.BIK,[de,ue]=i(S,{}),[he,pe]=s([F.Collections,F.RearrangeProducts].includes(_)?_:F.Collections),[me,Ce]=s("grid"),[ye,ge]=s(""),[fe,be]=s(""),[Se,ke]=s(0),[ve,Ie]=s(!1),[xe,je]=s(0),[Pe,Te]=s(""),[De,Oe]=s(!1),[Fe,Re]=s(!1),[we,Le]=i(k,{collections:{},products:{}}),[Ae,Ee]=i(v,Object.keys(A).length>0?A:{}),$e=n(null),[Be,ze]=s(!1),[Ve,Me]=s();l((()=>{Ie(!0),Re(!0),w.collectionFetcher(Se,L,ae).then((e=>{ue({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Ie(!1),ke((e=>e+1)),Re(!1)})).catch()}),[]),l((()=>{let e=0;"COLLECTION"===X?e=Object.keys(Ae||{}).filter((e=>"isCustom"!==e)).length:Z?Object.keys(Ae||[]).forEach((t=>{var o;Object.keys((null===(o=Ae[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&Ae[-1]&&(null===(c=Ae[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(Ae||[]).forEach((t=>{var o;Object.keys((null===(o=Ae[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=Ae[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),je(e)}),[de,Ae,Z,X]),l((()=>{fe&&(Ie(!0),w.productFetcher(fe,L,ae).then((e=>{Object.keys(e).length&&ue({type:"productsFetched",data:{collectionId:fe,products:e}}),Ie(!1)})).catch())}),[fe]),l((()=>{const e=setTimeout((()=>{"rearrange"!==he&&(Pe.length||"collections"!==he)&&(Pe.length?(Oe(!0),w.searchFetcher(L,Pe,ae).then((e=>{"collections"in e&&"products"in e?(Le({type:"set",data:e}),ue({type:"searched",data:e.collections}),ue({type:"searched",data:e.products})):(Le({type:"set",data:{collections:{},products:e}}),ue({type:"searched",data:e})),pe("searchProducts"),Ie(!1),Oe(!1)}))):pe("collections"))}),800);return()=>clearTimeout(e)}),[Pe]),l((()=>{Q&&(w.onAdd(Ae,xe),Ne())}),[Q]),l((()=>{te&&Object.keys(Ae||{}).length&&xe&&(w.onAdd(Ae,xe),Ne())}),[te,Ae,xe]);const Ne=()=>{Ee({type:"reset",data:{}})},He=()=>{let e,o;return"COLLECTION"===X?(e="collection",o="collections"):Z?(e="product",o="products"):(e="variant",o="variants"),z&&xe>z?t(C,{tagText:`You can only select ${z} ${1===z?e:o}`,type:"negative"}):V&&xe>V?t(C,{tagText:`You can only select ${V} ${1===V?e:o}`,type:"negative"}):t(u,xe>0?{onClick:()=>{pe(ee?F.RearrangeProducts:F.SelectedProducts)},buttonText:z?`${xe}/${z} ${1===xe?e:o} selected`:`${xe} ${1===xe?e:o} selected`,buttonType:["rearrange","view"].includes(he)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(he)}:{disabled:!0,buttonText:z?`${xe}/${z} ${1===z?e:o} selected`:`${xe} ${1===xe?e:o} selected`,buttonType:"tertiaryGray"})},We=e=>ve?"Loading...":he===F.RearrangeProducts?null!=e?e:"Done":null!=e?e:"Add",Ge=e(P,{style:null!=ce?ce:{},children:[w.postHeader&&t("div",{style:{padding:"0 24px"},children:w.postHeader}),!w.hideGlobalSearch&&t(o,{children:("collections"===he||"searchProducts"===he)&&t("div",{style:{padding:J?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"},children:t(h,{placeholder:"Search using ID, Name or SKU ID",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>De?t(m,{size:"small",color:a.content.primary}):t(r,{})},id:"listInput",height:"24px",type:"text",value:Pe,onChangeText:e=>{e.length&&e.trim().length?Te(e):Te("")}})})}),e(T,{ref:$e,screenName:he,children:["collections"===he&&t(y,{customCollectionRestriction:w.customCollectionRestriction,dataLoading:Fe,collections:de,selectedCollectionsDispatch:Ee,setCollectionId:ge,setSelectedCollectionId:be,setScreen:pe,selectedCollections:Ae,collectionFetcher:w.collectionFetcher,storeId:L,appType:ae,collectionsDispatch:ue,setSaveDisabled:Ie,pagingControls:{curPage:Se,setCurPage:ke},hideCollectionCheckbox:M,renderWithoutModal:J,pickerType:X,scrollContainerRef:$e,limit:V,exactLimit:z}),"products"===he&&ye&&t(I.Provider,{value:ye,children:t(f,{hideInCollectionSearch:w.hideInCollectionSearch,customCollectionRestriction:w.customCollectionRestriction,productFetcher:w.productFetcher,setScreen:pe,storeId:L,appType:ae,data:de[ye],collectionsDispatch:ue,selectedCollectionsDispatch:Ee,selectedData:Ae,setSaveDisabled:Ie,searchInCollectionFetcher:w.searchInCollectionFetcher,hideProductCheckbox:N,outOfStockAction:H,hideVariantCheckbox:W,selectProductsFromCustomCollection:G,renderWithoutModal:J,pickerType:X,hideProductVariants:Z,fbStatusFetcher:w.fbStatusFetcher,onProductDetailClick:e=>{ze(!0),Me(e)},showProductDetailInfoIcon:oe,scrollContainerRef:$e})}),"view"===he&&t(j,{selectedCollections:Ae||{},selectedCollectionsDispatch:Ee,setScreen:pe,collections:de,hideProductVariants:Z,outOfStockAction:H,storeId:L,appType:ae,fbStatusFetcher:w.fbStatusFetcher}),"rearrange"===he&&t(b,{selectedCollections:Ae||{},selectedCollectionsDispatch:Ee,setScreen:pe,outOfStockAction:H,rearrangeViewType:"grid"===me?"list":"grid",scrollContainerRef:$e,storeId:L,appType:ae,fbStatusFetcher:w.fbStatusFetcher}),"searchProducts"===he&&t(x,{customCollectionRestriction:w.customCollectionRestriction,selectedCollections:Ae||{},searchedCollections:we||{},searchedCollectionsDispatch:Le,selectedCollectionsDispatch:Ee,setScreen:pe,collections:de,onBackPress:()=>{Te(""),Le({type:"set",data:{collections:{},products:{}}})},pickerType:X,hideProductCheckbox:N,hideProductVariants:Z,hideVariantCheckbox:W,storeId:L,appType:ae,fbStatusFetcher:w.fbStatusFetcher,setCollectionId:ge,setSelectedCollectionId:be,renderWithoutModal:J,hideCollectionCheckbox:M,outOfStockAction:H,limit:V,exactLimit:z})]})]});return t(o,{children:J?e(o,{children:[Ge,ie.renderFooter?e(D,{children:[He(),t(u,{buttonText:We(ie.primaryButtonText),disabled:!ie.isLoading&&(ve||xe<1||z&&xe<z||!z&&V&&xe>V)||ie.primaryButtonDisabled,isLoading:ie.isLoading,onClick:()=>{w.onAdd(Ae,xe),Ne(),pe([F.Collections,F.RearrangeProducts].includes(_)?_:F.Collections)}})]}):t(o,{}),Be&&Ve?t(g,{productData:Ve,outOfStockAction:H,useDynamicInfoImageSize:w.useDynamicInfoImageSize,onClose:()=>{ze(!1)}}):t(o,{})]}):e(p,{zIndex:B,open:$,onClose:()=>{null==E||E(),Ne()},headingTitle:U||("collections"===he||"products"===he?"Select Products":"view"===he?"Selected Products":"searchProducts"===he?"Searched Results":"rearrange"===he?"Rearrange Products":void 0),headingSubtitle:le,footerShadow:!0,centralContainerStyles:{width:Y||"600px",left:q||"auto"},headerRightCustomElement:re?t("div",{style:{cursor:"pointer",display:"flex"},onClick:E,children:t(d,{width:20,height:20,color:a.content.secondary})}):t(o,{}),footerContainerStyle:w.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:a.surface.standard}:void 0,primaryButton:se?(e=>Object.assign(Object.assign({},e),{disabled:!e.isLoading&&(ve||xe<1||z&&xe<z||!z&&V&&xe>V)||e.disabled,onClick:()=>{w.onAdd(Ae,xe),Ne(),pe([F.Collections,F.RearrangeProducts].includes(_)?_:F.Collections)}}))(se):{buttonText:We(),disabled:ve||xe<1||z&&xe<z||!z&&V&&xe>V||!1,onClick:()=>{w.onAdd(Ae,xe),Ne()}},secondaryButton:ne?(e=>Object.assign(Object.assign({},e),{disabled:ve||xe<1||z&&xe<z||!z&&V&&xe>V||!1,onClick:()=>{const e=R(Ae,de,we);w.onAdd(e,xe,!0)}}))(ne):void 0,wrapperStyle:w.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:K?t(o,{}):He(),hideCrossButton:Be||re,children:[Ge,Be&&Ve?t(g,{productData:Ve,useDynamicInfoImageSize:w.useDynamicInfoImageSize,outOfStockAction:H,onClose:()=>{ze(!1)}}):t(o,{})]})})};export{w as ProductPickerModal};
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{ApplicationType as c}from"@bikdotai/bik-models/growth/models/bik-store";import r from"../../assets/icons/search.svg.js";import{useReducer as i,useState as s,useRef as n,useEffect as l}from"react";import{COLORS as a}from"../../constants/Theme.js";import d from"../../assets/icons/cross.svg.js";import{Button as u}from"../button/Button.js";import{Input as h}from"../input/Input.js";import{StyledModal as p}from"../modals/styledModal.js";import{Spinner as m}from"../spinner/Spinner.js";import{Tag as C}from"../tag/Tag.js";import{CollectionsScreen as g}from"./collectionScreen.js";import{ProductInfoOverlay as y}from"./productInfoOverlay.js";import{ProductsScreen as b}from"./productScreen.js";import{RearrangeScreen as f}from"./rearrangeScreen.js";import{collectionsReducer as S,searchReducer as k,selectedColectionsReducer as v,CollectionIdContext as I}from"./reducers.js";import{SearchScreen as j}from"./searchScreen.js";import{SelectedScreen as x}from"./selectedScreen.js";import{ContainerStyle as O,ScrollContainerStyle as P,StyledFooterForNonModal as T}from"./style.js";import{OUT_OF_STOCK_ACTION as D,ScreenName as F}from"./type.js";import{updateAllVariantsForSelectedProducts as R}from"./utility.js";const w=w=>{const{storeId:L,selectedItems:A,onClose:E,visible:$,zIndex:B,exactLimit:z,limit:V,hideCollectionCheckbox:M,hideProductCheckbox:N,outOfStockAction:H=D.BLUR,hideVariantCheckbox:W,selectProductsFromCustomCollection:G,hideSelectionCount:K,title:U,width:Y,left:q,renderWithoutModal:J,onClickSave:Q,pickerType:X,hideProductVariants:Z=!1,startupScreen:_=F.Collections,rearrangeEnabled:ee,selectSingleItem:te=!1,showProductDetails:oe,containerStyle:ce,crossButtonInsideHeader:re=!1,footerForNonModal:ie={},primaryButton:se,secondaryButton:ne,subtitle:le}=w,ae=w.appType||c.BIK,[de,ue]=i(S,{}),[he,pe]=s([F.Collections,F.RearrangeProducts].includes(_)?_:F.Collections),[me,Ce]=s("grid"),[ge,ye]=s(""),[be,fe]=s(""),[Se,ke]=s(0),[ve,Ie]=s(!1),[je,xe]=s(0),[Oe,Pe]=s(""),[Te,De]=s(!1),[Fe,Re]=s(!1),[we,Le]=i(k,{collections:{},products:{}}),[Ae,Ee]=i(v,Object.keys(A).length>0?A:{}),$e=n(null),[Be,ze]=s(!1),[Ve,Me]=s();l((()=>{Ie(!0),Re(!0),w.collectionFetcher(Se,L,ae).then((e=>{ue({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Ie(!1),ke((e=>e+1)),Re(!1)})).catch()}),[]),l((()=>{let e=0;"COLLECTION"===X?e=Object.keys(Ae||{}).filter((e=>"isCustom"!==e)).length:Z?Object.keys(Ae||[]).forEach((t=>{var o;Object.keys((null===(o=Ae[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&Ae[-1]&&(null===(c=Ae[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(Ae||[]).forEach((t=>{var o;Object.keys((null===(o=Ae[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=Ae[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),xe(e)}),[de,Ae,Z,X]),l((()=>{be&&(Ie(!0),w.productFetcher(be,L,ae).then((e=>{Object.keys(e).length&&ue({type:"productsFetched",data:{collectionId:be,products:e}}),Ie(!1)})).catch())}),[be]),l((()=>{const e=setTimeout((()=>{"rearrange"!==he&&(Oe.length||"collections"!==he)&&(Oe.length?(De(!0),w.searchFetcher(L,Oe,ae).then((e=>{"collections"in e&&"products"in e?(Le({type:"set",data:e}),ue({type:"searched",data:e.collections}),ue({type:"searched",data:e.products})):(Le({type:"set",data:{collections:{},products:e}}),ue({type:"searched",data:e})),pe("searchProducts"),Ie(!1),De(!1)}))):pe("collections"))}),800);return()=>clearTimeout(e)}),[Oe]),l((()=>{Q&&(w.onAdd(Ae,je),Ne())}),[Q]),l((()=>{te&&Object.keys(Ae||{}).length&&je&&(w.onAdd(Ae,je),Ne())}),[te,Ae,je]);const Ne=()=>{Ee({type:"reset",data:{}})},He=()=>{let e,o;return"COLLECTION"===X?(e="collection",o="collections"):Z?(e="product",o="products"):(e="variant",o="variants"),z&&je>z?t(C,{tagText:`You can only select ${z} ${1===z?e:o}`,type:"negative"}):V&&je>V?t(C,{tagText:`You can only select ${V} ${1===V?e:o}`,type:"negative"}):t(u,je>0?{onClick:()=>{pe(ee?F.RearrangeProducts:F.SelectedProducts)},buttonText:z?`${je}/${z} ${1===je?e:o} selected`:`${je} ${1===je?e:o} selected`,buttonType:["rearrange","view"].includes(he)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(he)}:{disabled:!0,buttonText:z?`${je}/${z} ${1===z?e:o} selected`:`${je} ${1===je?e:o} selected`,buttonType:"tertiaryGray"})},We=e=>ve?"Loading...":he===F.RearrangeProducts?null!=e?e:"Done":null!=e?e:"Add",Ge=e(O,Object.assign({style:null!=ce?ce:{}},{children:[w.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:w.postHeader})),!w.hideGlobalSearch&&t(o,{children:("collections"===he||"searchProducts"===he)&&t("div",Object.assign({style:{padding:J?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(h,{placeholder:"Search using ID, Name or SKU ID",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Te?t(m,{size:"small",color:a.content.primary}):t(r,{})},id:"listInput",height:"24px",type:"text",value:Oe,onChangeText:e=>{e.length&&e.trim().length?Pe(e):Pe("")}})}))}),e(P,Object.assign({ref:$e,screenName:he},{children:["collections"===he&&t(g,{customCollectionRestriction:w.customCollectionRestriction,dataLoading:Fe,collections:de,selectedCollectionsDispatch:Ee,setCollectionId:ye,setSelectedCollectionId:fe,setScreen:pe,selectedCollections:Ae,collectionFetcher:w.collectionFetcher,storeId:L,appType:ae,collectionsDispatch:ue,setSaveDisabled:Ie,pagingControls:{curPage:Se,setCurPage:ke},hideCollectionCheckbox:M,renderWithoutModal:J,pickerType:X,scrollContainerRef:$e,limit:V,exactLimit:z}),"products"===he&&ge&&t(I.Provider,Object.assign({value:ge},{children:t(b,{hideInCollectionSearch:w.hideInCollectionSearch,customCollectionRestriction:w.customCollectionRestriction,productFetcher:w.productFetcher,setScreen:pe,storeId:L,appType:ae,data:de[ge],collectionsDispatch:ue,selectedCollectionsDispatch:Ee,selectedData:Ae,setSaveDisabled:Ie,searchInCollectionFetcher:w.searchInCollectionFetcher,hideProductCheckbox:N,outOfStockAction:H,hideVariantCheckbox:W,selectProductsFromCustomCollection:G,renderWithoutModal:J,pickerType:X,hideProductVariants:Z,fbStatusFetcher:w.fbStatusFetcher,onProductDetailClick:e=>{ze(!0),Me(e)},showProductDetailInfoIcon:oe,scrollContainerRef:$e})})),"view"===he&&t(x,{selectedCollections:Ae||{},selectedCollectionsDispatch:Ee,setScreen:pe,collections:de,hideProductVariants:Z,outOfStockAction:H,storeId:L,appType:ae,fbStatusFetcher:w.fbStatusFetcher}),"rearrange"===he&&t(f,{selectedCollections:Ae||{},selectedCollectionsDispatch:Ee,setScreen:pe,outOfStockAction:H,rearrangeViewType:"grid"===me?"list":"grid",scrollContainerRef:$e,storeId:L,appType:ae,fbStatusFetcher:w.fbStatusFetcher}),"searchProducts"===he&&t(j,{customCollectionRestriction:w.customCollectionRestriction,selectedCollections:Ae||{},searchedCollections:we||{},searchedCollectionsDispatch:Le,selectedCollectionsDispatch:Ee,setScreen:pe,collections:de,onBackPress:()=>{Pe(""),Le({type:"set",data:{collections:{},products:{}}})},pickerType:X,hideProductCheckbox:N,hideProductVariants:Z,hideVariantCheckbox:W,storeId:L,appType:ae,fbStatusFetcher:w.fbStatusFetcher,setCollectionId:ye,setSelectedCollectionId:fe,renderWithoutModal:J,hideCollectionCheckbox:M,outOfStockAction:H,limit:V,exactLimit:z})]}))]}));return t(o,{children:J?e(o,{children:[Ge,ie.renderFooter?e(T,{children:[He(),t(u,{buttonText:We(ie.primaryButtonText),disabled:!ie.isLoading&&(ve||je<1||z&&je<z||!z&&V&&je>V)||ie.primaryButtonDisabled,isLoading:ie.isLoading,onClick:()=>{w.onAdd(Ae,je),Ne(),pe([F.Collections,F.RearrangeProducts].includes(_)?_:F.Collections)}})]}):t(o,{}),Be&&Ve?t(y,{productData:Ve,outOfStockAction:H,useDynamicInfoImageSize:w.useDynamicInfoImageSize,onClose:()=>{ze(!1)}}):t(o,{})]}):e(p,Object.assign({zIndex:B,open:$,onClose:()=>{null==E||E(),Ne()},headingTitle:U||("collections"===he||"products"===he?"Select Products":"view"===he?"Selected Products":"searchProducts"===he?"Searched Results":"rearrange"===he?"Rearrange Products":void 0),headingSubtitle:le,footerShadow:!0,centralContainerStyles:{width:Y||"600px",left:q||"auto"},headerRightCustomElement:re?t("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:E},{children:t(d,{width:20,height:20,color:a.content.secondary})})):t(o,{}),footerContainerStyle:w.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:a.surface.standard}:void 0,primaryButton:se?(e=>Object.assign(Object.assign({},e),{disabled:!e.isLoading&&(ve||je<1||z&&je<z||!z&&V&&je>V)||e.disabled,onClick:()=>{w.onAdd(Ae,je),Ne(),pe([F.Collections,F.RearrangeProducts].includes(_)?_:F.Collections)}}))(se):{buttonText:We(),disabled:ve||je<1||z&&je<z||!z&&V&&je>V||!1,onClick:()=>{w.onAdd(Ae,je),Ne()}},secondaryButton:ne?(e=>Object.assign(Object.assign({},e),{disabled:ve||je<1||z&&je<z||!z&&V&&je>V||!1,onClick:()=>{const e=R(Ae,de,we);w.onAdd(e,je,!0)}}))(ne):void 0,wrapperStyle:w.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:K?t(o,{}):He(),hideCrossButton:Be||re},{children:[Ge,Be&&Ve?t(y,{productData:Ve,useDynamicInfoImageSize:w.useDynamicInfoImageSize,outOfStockAction:H,onClose:()=>{ze(!1)}}):t(o,{})]}))})};export{w as ProductPickerModal};

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { Product, ProductVariant, SelectedItems } from './modal';
+import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+interface ProductGroupInterface {
+    collectionId: string;
+    productId: string;
+    data: Product;
+    selectedData: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    viewOnly: boolean;
+    isProductPartiallyChecked?: boolean;
+    upliftAdditions: any;
+    hideProductCheckbox?: boolean;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    hideVariantCheckbox?: boolean;
+    hideProductVariants?: boolean;
+    showProductDetailInfoIcon?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    onProductDetailClick?: (productData: Product | ProductVariant) => void;
+}
+export declare const ProductGroup: (props: ProductGroupInterface) => import("react/jsx-runtime").JSX.Element;
+interface ProductCardInterface {
+    isVariant: boolean;
+    data: Product | ProductVariant;
+    productId: string;
+    collectionId: string;
+    variantId?: string;
+    isSelected: boolean;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    viewOnly: boolean;
+    isPartiallyChecked?: boolean;
+    upliftAdditions: any;
+    hideProductCheckbox?: boolean;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    hideVariantCheckbox?: boolean;
+    hideProductVariants?: boolean;
+    showProductDetailInfoIcon?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    onProductDetailClick?: (productData: Product | ProductVariant) => void;
+    currencyAndPrice?: string;
+}
+export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-import{jsxs as t,jsx as i,Fragment as o}from"react/jsx-runtime";import{COLORS as e}from"../../constants/Theme.js";import c from"../../assets/icons/info.svg.js";import{CheckBox as d}from"../checkBox/CheckBox.js";import{IconButton as r}from"../icon-button/IconButton.js";import{ShimmerImage as l}from"../shimmer-image/ShimmerImage.js";import{Tooltip as n}from"../tooltips/Tooltip.js";import{TitleSmall as a,BodyCaption as u}from"../TypographyStyle.js";import{CurrencySymbols as s}from"./constants.js";import{ProductHelper as v}from"./helpers/ProductHelper.js";import{ProductPickerTag as p}from"./ProductPickerTag.js";import{ProductCardStyle as h,ProductInfo as m,ProductSubTitle as I,SKUIDBadge as y,EllipsedBodyTiny as f}from"./style.js";import{shouldShowVariant as P,getSkuId as k}from"./utility.js";const C=o=>{var e,c,d,r,l,n,a,u,v;const{collectionId:p,productId:h,data:m,selectedData:I,selectedCollectionsDispatch:y,viewOnly:f,upliftAdditions:k,isProductPartiallyChecked:C,hideProductCheckbox:b,outOfStockAction:j,hideVariantCheckbox:x,hideProductVariants:D,pickerType:O,onProductDetailClick:S,showProductDetailInfoIcon:T}=o,V=t=>{var i,o,e,c,d,r;if(!(null===(o=null===(i=null==I?void 0:I[p])||void 0===i?void 0:i.products)||void 0===o?void 0:o[h]))return!1;return!!(null===(r=null===(d=null===(c=null===(e=null==I?void 0:I[p])||void 0===e?void 0:e.products)||void 0===c?void 0:c[h])||void 0===d?void 0:d.variants)||void 0===r?void 0:r[t])},A=D||!P(m)?`${m.currency&&null!==(e=s[m.currency])&&void 0!==e?e:""}${null!==(v=null!==(l=null===(r=null===(d=Object.values(null!==(c=m.variants)&&void 0!==c?c:{}))||void 0===d?void 0:d[0])||void 0===r?void 0:r.price)&&void 0!==l?l:null===(u=null===(a=Object.values(null!==(n=m.variants)&&void 0!==n?n:{}))||void 0===a?void 0:a[0])||void 0===u?void 0:u.actualPrice)&&void 0!==v?v:""}`:"";return t("div",{children:[i(g,{isVariant:!1,data:m,productId:h,collectionId:p,isSelected:(()=>{var t,i;return!!(null===(i=null===(t=null==I?void 0:I[p])||void 0===t?void 0:t.products)||void 0===i?void 0:i[h])})(),isPartiallyChecked:C,selectedCollectionsDispatch:y,upliftAdditions:k,viewOnly:f,hideProductCheckbox:b,hideVariantCheckbox:x,hideProductVariants:D,pickerType:O,outOfStockAction:j,onProductDetailClick:S,showProductDetailInfoIcon:T,currencyAndPrice:A},h),D?null:P(m)&&Object.keys(m.variants||[]).map((t=>{var o,e,c,d,r,l,n;const a=`${m.currency&&null!==(o=s[m.currency])&&void 0!==o?o:""}${null!==(n=null!==(d=null===(c=null===(e=m.variants)||void 0===e?void 0:e[t])||void 0===c?void 0:c.price)&&void 0!==d?d:null===(l=null===(r=m.variants)||void 0===r?void 0:r[t])||void 0===l?void 0:l.actualPrice)&&void 0!==n?n:""}`;return i(g,{isVariant:!0,hideVariantCheckbox:x,data:Object.assign(Object.assign({},m.variants[t]),{currency:m.currency}),variantId:t,productId:h,viewOnly:f,upliftAdditions:k,collectionId:p,isSelected:V(t),selectedCollectionsDispatch:y,outOfStockAction:j,onProductDetailClick:S,showProductDetailInfoIcon:T,currencyAndPrice:a},t)}))]})},g=s=>{const{isVariant:P,data:C,productId:g,collectionId:b,variantId:j,isSelected:x,selectedCollectionsDispatch:D,viewOnly:O,upliftAdditions:S,isPartiallyChecked:T,hideProductCheckbox:V,outOfStockAction:A,hideVariantCheckbox:w,hideProductVariants:U,pickerType:$="PRODUCT",onProductDetailClick:B,showProductDetailInfoIcon:F,currencyAndPrice:R}=s,{isVariantForProductPickerTag:H,dataForProductPickerTag:K,tagText:L,tagType:q}=v.getDataForProductPickerTag(C,P,A),z=k(C,P);return t(h,{isVariant:P,onClick:t=>{if(t.stopPropagation(),"PRODUCT"===$&&(V||w)){const t=Object.keys(C.variants);U?x?D({type:"productUnselected",data:{productId:g,collectionId:b}}):S("productSelected",{productId:g,variantId:j,collectionId:b,product:C}):x?D({type:"variantUnselected",data:{productId:g,variantId:j,collectionId:b}}):S("variantSelected",{productId:g,variantId:j||t[0],collectionId:b,variant:C})}},isActive:x,children:[P&&!O&&!w||!P&&!O&&!V?i(d,{isChecked:x,isPartiallyChecked:T||!1,onValueChange:function(t,i,o){null==o||o.stopPropagation(),P?t?S(U?"productSelected":"variantSelected",{productId:g,variantId:j,collectionId:b,variant:C}):D({type:U?"productUnselected":"variantUnselected",data:{productId:g,variantId:j,collectionId:b}}):t?S("productSelected",{productId:g,collectionId:b,product:C}):D({type:"productUnselected",data:{productId:g,collectionId:b}})}}):i(o,{}),i("div",{children:i(l,{width:40,height:40,imageUrl:C.image,alt:"Item",borderRadius:4})}),t("div",{style:{display:"flex",flexDirection:"column",flex:1},children:[t("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:16},children:[i(n,{variant:"light",body:C.name,placement:"bottom",delay:400,children:i(a,{style:{flex:1},numberOfLines:1,children:C.name})}),t(m,{children:[i(p,{isVariant:H,data:K,tagText:L,tagType:q}),F&&i(r,{onClick:()=>{null==B||B(C)},Icon:()=>i(c,{width:20,height:20,color:e.content.placeholder})})]})]}),t(I,{children:[!(null==K?void 0:K.fbStatus)&&H||L?null:i(u,{color:e.content.secondary,children:R}),z&&i(n,{body:z,placement:"top",children:i(y,{children:i(f,{children:`SKU ID: ${z}`})})})]})]})]})};export{g as ProductCard,C as ProductGroup};
+import{jsxs as t,jsx as i,Fragment as e}from"react/jsx-runtime";import{COLORS as o}from"../../constants/Theme.js";import c from"../../assets/icons/info.svg.js";import{CheckBox as d}from"../checkBox/CheckBox.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as r}from"../shimmer-image/ShimmerImage.js";import{Tooltip as l}from"../tooltips/Tooltip.js";import{TitleSmall as a,BodyCaption as s}from"../TypographyStyle.js";import{CurrencySymbols as u}from"./constants.js";import{ProductHelper as v}from"./helpers/ProductHelper.js";import{ProductPickerTag as p}from"./ProductPickerTag.js";import{ProductCardStyle as h,ProductInfo as m,ProductSubTitle as I,SKUIDBadge as y,EllipsedBodyTiny as f}from"./style.js";import{shouldShowVariant as P,getSkuId as k}from"./utility.js";const g=e=>{var o,c,d,n,r,l,a,s,v;const{collectionId:p,productId:h,data:m,selectedData:I,selectedCollectionsDispatch:y,viewOnly:f,upliftAdditions:k,isProductPartiallyChecked:g,hideProductCheckbox:j,outOfStockAction:C,hideVariantCheckbox:O,hideProductVariants:x,pickerType:D,onProductDetailClick:S,showProductDetailInfoIcon:T}=e,V=t=>{var i,e,o,c,d,n;if(!(null===(e=null===(i=null==I?void 0:I[p])||void 0===i?void 0:i.products)||void 0===e?void 0:e[h]))return!1;return!!(null===(n=null===(d=null===(c=null===(o=null==I?void 0:I[p])||void 0===o?void 0:o.products)||void 0===c?void 0:c[h])||void 0===d?void 0:d.variants)||void 0===n?void 0:n[t])},A=x||!P(m)?`${m.currency&&null!==(o=u[m.currency])&&void 0!==o?o:""}${null!==(v=null!==(r=null===(n=null===(d=Object.values(null!==(c=m.variants)&&void 0!==c?c:{}))||void 0===d?void 0:d[0])||void 0===n?void 0:n.price)&&void 0!==r?r:null===(s=null===(a=Object.values(null!==(l=m.variants)&&void 0!==l?l:{}))||void 0===a?void 0:a[0])||void 0===s?void 0:s.actualPrice)&&void 0!==v?v:""}`:"";return t("div",{children:[i(b,{isVariant:!1,data:m,productId:h,collectionId:p,isSelected:(()=>{var t,i;return!!(null===(i=null===(t=null==I?void 0:I[p])||void 0===t?void 0:t.products)||void 0===i?void 0:i[h])})(),isPartiallyChecked:g,selectedCollectionsDispatch:y,upliftAdditions:k,viewOnly:f,hideProductCheckbox:j,hideVariantCheckbox:O,hideProductVariants:x,pickerType:D,outOfStockAction:C,onProductDetailClick:S,showProductDetailInfoIcon:T,currencyAndPrice:A},h),x?null:P(m)&&Object.keys(m.variants||[]).map((t=>{var e,o,c,d,n,r,l;const a=`${m.currency&&null!==(e=u[m.currency])&&void 0!==e?e:""}${null!==(l=null!==(d=null===(c=null===(o=m.variants)||void 0===o?void 0:o[t])||void 0===c?void 0:c.price)&&void 0!==d?d:null===(r=null===(n=m.variants)||void 0===n?void 0:n[t])||void 0===r?void 0:r.actualPrice)&&void 0!==l?l:""}`;return i(b,{isVariant:!0,hideVariantCheckbox:O,data:Object.assign(Object.assign({},m.variants[t]),{currency:m.currency}),variantId:t,productId:h,viewOnly:f,upliftAdditions:k,collectionId:p,isSelected:V(t),selectedCollectionsDispatch:y,outOfStockAction:C,onProductDetailClick:S,showProductDetailInfoIcon:T,currencyAndPrice:a},t)}))]})},b=u=>{const{isVariant:P,data:g,productId:b,collectionId:j,variantId:C,isSelected:O,selectedCollectionsDispatch:x,viewOnly:D,upliftAdditions:S,isPartiallyChecked:T,hideProductCheckbox:V,outOfStockAction:A,hideVariantCheckbox:w,hideProductVariants:U,pickerType:$="PRODUCT",onProductDetailClick:B,showProductDetailInfoIcon:F,currencyAndPrice:R}=u,{isVariantForProductPickerTag:H,dataForProductPickerTag:K,tagText:L,tagType:q}=v.getDataForProductPickerTag(g,P,A),z=k(g,P);return t(h,Object.assign({isVariant:P,onClick:t=>{if(t.stopPropagation(),"PRODUCT"===$&&(V||w)){const t=Object.keys(g.variants);U?O?x({type:"productUnselected",data:{productId:b,collectionId:j}}):S("productSelected",{productId:b,variantId:C,collectionId:j,product:g}):O?x({type:"variantUnselected",data:{productId:b,variantId:C,collectionId:j}}):S("variantSelected",{productId:b,variantId:C||t[0],collectionId:j,variant:g})}},isActive:O},{children:[P&&!D&&!w||!P&&!D&&!V?i(d,{isChecked:O,isPartiallyChecked:T||!1,onValueChange:function(t,i,e){null==e||e.stopPropagation(),P?t?S(U?"productSelected":"variantSelected",{productId:b,variantId:C,collectionId:j,variant:g}):x({type:U?"productUnselected":"variantUnselected",data:{productId:b,variantId:C,collectionId:j}}):t?S("productSelected",{productId:b,collectionId:j,product:g}):x({type:"productUnselected",data:{productId:b,collectionId:j}})}}):i(e,{}),i("div",{children:i(r,{width:40,height:40,imageUrl:g.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",gap:16}},{children:[i(l,Object.assign({variant:"light",body:g.name,placement:"bottom",delay:400},{children:i(a,Object.assign({style:{flex:1},numberOfLines:1},{children:g.name}))})),t(m,{children:[i(p,{isVariant:H,data:K,tagText:L,tagType:q}),F&&i(n,{onClick:()=>{null==B||B(g)},Icon:()=>i(c,{width:20,height:20,color:o.content.placeholder})})]})]})),t(I,{children:[!(null==K?void 0:K.fbStatus)&&H||L?null:i(s,Object.assign({color:o.content.secondary},{children:R})),z&&i(l,Object.assign({body:z,placement:"top"},{children:i(y,{children:i(f,{children:`SKU ID: ${z}`})})}))]})]}))]}))};export{b as ProductCard,g as ProductGroup};

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

@@ -0,0 +1,19 @@
+import { Product, ProductVariant } from './modal';
+import { OUT_OF_STOCK_ACTION } from './type';
+/**
+ * When user presses i icon on a product, we show the overlay.
+ * In case of a product, contains products image,  product name & description
+ * In case of a variant, contains variant image,  variant name,
+ *  description as product name, variant tag
+ */
+export declare const ProductInfoOverlay: (props: {
+    productData: Product | ProductVariant;
+    onClose: () => void;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    useDynamicInfoImageSize?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductInfoCard: (props: {
+    productData: Product | ProductVariant;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    useDynamicInfoImageSize?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-components";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/cross.svg.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleRegular as c,BodyCaption as l}from"../TypographyStyle.js";import{CurrencySymbols as s}from"./constants.js";import{ProductHelper as u}from"./helpers/ProductHelper.js";import{ProductPickerTag as p}from"./ProductPickerTag.js";import{SKUIDBadge as m,EllipsedBodyTiny as v}from"./style.js";import{getSkuId as f,shouldShowVariant as g}from"./utility.js";const x=i=>o(y,{children:[t(D,{}),t(b,{children:t(a,{className:"close-button",onClick:i.onClose,Icon:e,width:20,height:20})}),t(h,{productData:i.productData,outOfStockAction:i.outOfStockAction,useDynamicInfoImageSize:i.useDynamicInfoImageSize})]}),h=i=>{var e,a,x,h,y,D,b,P,T,S,w,$,z,O,A,F;const C=void 0===i.productData.variants;let H;if(C)H=`${i.productData.currency&&null!==(e=s[i.productData.currency])&&void 0!==e?e:""}${null!==(y=null!==(x=null===(a=i.productData)||void 0===a?void 0:a.price)&&void 0!==x?x:null===(h=i.productData)||void 0===h?void 0:h.actualPrice)&&void 0!==y?y:""}`;else{const o=null===(D=i.productData)||void 0===D?void 0:D.currency;H=`${o&&null!==(b=s[o])&&void 0!==b?b:""}${null!==(A=null!==(w=null===(S=null===(T=Object.values(null!==(P=i.productData.variants)&&void 0!==P?P:{}))||void 0===T?void 0:T[0])||void 0===S?void 0:S.price)&&void 0!==w?w:null===(O=null===(z=Object.values(null!==($=i.productData.variants)&&void 0!==$?$:{}))||void 0===z?void 0:z[0])||void 0===O?void 0:O.actualPrice)&&void 0!==A?A:""}`}const{isVariantForProductPickerTag:N,dataForProductPickerTag:U,tagText:V,tagType:_}=u.getDataForProductPickerTag(i.productData,C,i.outOfStockAction),B=f(i.productData,C);return o(j,{children:[t(k,{children:t(n,{useDynamicInfoImageSize:i.useDynamicInfoImageSize,imageUrl:i.productData.image,width:200,height:200,borderRadius:4})}),o(I,{children:[B&&t(d,{body:B,placement:"top",children:t(m,{children:t(v,{children:`SKU ID: ${B}`})})}),t(c,{style:{display:"flex"},children:i.productData.name}),t(l,{color:r.content.secondary,children:`Product ID: ${i.productData.id}`}),t(l,{className:"overlay-description",dangerouslySetInnerHTML:{__html:null!==(F=i.productData.description)&&void 0!==F?F:""}}),t(l,{color:r.content.secondary,children:C?H:g(i.productData)?null:H}),t(p,{isVariant:N,data:U,tagText:V,tagType:_})]})]})},y=i.div`
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-components";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/cross.svg.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{Tooltip as c}from"../tooltips/Tooltip.js";import{TitleRegular as d,BodyCaption as l}from"../TypographyStyle.js";import{CurrencySymbols as s}from"./constants.js";import{ProductHelper as u}from"./helpers/ProductHelper.js";import{ProductPickerTag as p}from"./ProductPickerTag.js";import{SKUIDBadge as m,EllipsedBodyTiny as g}from"./style.js";import{getSkuId as v,shouldShowVariant as f}from"./utility.js";const x=i=>o(y,{children:[t(b,{}),t(D,{children:t(a,{className:"close-button",onClick:i.onClose,Icon:e,width:20,height:20})}),t(h,{productData:i.productData,outOfStockAction:i.outOfStockAction,useDynamicInfoImageSize:i.useDynamicInfoImageSize})]}),h=i=>{var e,a,x,h,y,b,D,P,T,S,O,w,$,z,A,F;const C=void 0===i.productData.variants;let H;if(C)H=`${i.productData.currency&&null!==(e=s[i.productData.currency])&&void 0!==e?e:""}${null!==(y=null!==(x=null===(a=i.productData)||void 0===a?void 0:a.price)&&void 0!==x?x:null===(h=i.productData)||void 0===h?void 0:h.actualPrice)&&void 0!==y?y:""}`;else{const o=null===(b=i.productData)||void 0===b?void 0:b.currency;H=`${o&&null!==(D=s[o])&&void 0!==D?D:""}${null!==(A=null!==(O=null===(S=null===(T=Object.values(null!==(P=i.productData.variants)&&void 0!==P?P:{}))||void 0===T?void 0:T[0])||void 0===S?void 0:S.price)&&void 0!==O?O:null===(z=null===($=Object.values(null!==(w=i.productData.variants)&&void 0!==w?w:{}))||void 0===$?void 0:$[0])||void 0===z?void 0:z.actualPrice)&&void 0!==A?A:""}`}const{isVariantForProductPickerTag:N,dataForProductPickerTag:U,tagText:V,tagType:_}=u.getDataForProductPickerTag(i.productData,C,i.outOfStockAction),B=v(i.productData,C);return o(j,{children:[t(k,{children:t(n,{useDynamicInfoImageSize:i.useDynamicInfoImageSize,imageUrl:i.productData.image,width:200,height:200,borderRadius:4})}),o(I,{children:[B&&t(c,Object.assign({body:B,placement:"top"},{children:t(m,{children:t(g,{children:`SKU ID: ${B}`})})})),t(d,Object.assign({style:{display:"flex"}},{children:i.productData.name})),t(l,Object.assign({color:r.content.secondary},{children:`Product ID: ${i.productData.id}`})),t(l,{className:"overlay-description",dangerouslySetInnerHTML:{__html:null!==(F=i.productData.description)&&void 0!==F?F:""}}),t(l,Object.assign({color:r.content.secondary},{children:C?H:f(i.productData)?null:H})),t(p,{isVariant:N,data:U,tagText:V,tagType:_})]})]})},y=i.div`
 	display: flex;
 	flex: 1;
 	background: rgba(0, 0, 0, 0.5);
@@ -17,11 +17,11 @@ import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-component
 		word-break: break-word;
 		margin-top: 8px;
 	}
-`,D=i.div`
+`,b=i.div`
 	display: flex;
 	flex: 1;
 	background: rgba(0, 0, 0, 0.5);
-`,b=i.div`
+`,D=i.div`
 	position: relative;
 
 	.close-button {

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

@@ -0,0 +1,32 @@
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import React from 'react';
+import { Collection, FbStatusFetcherReturn, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
+import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+interface ProductsScreenInterface {
+    hideInCollectionSearch?: boolean;
+    customCollectionRestriction?: boolean;
+    data: Collection;
+    collectionsDispatch: React.Dispatch<CollectionsActions>;
+    selectedData: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string, appType: ApplicationType) => ProductFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string, appType: ApplicationType, limit?: number, offset?: number) => ProductFetcherReturn;
+    storeId: string;
+    appType: ApplicationType;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+    hideProductCheckbox?: boolean;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    hideVariantCheckbox?: boolean;
+    selectProductsFromCustomCollection?: boolean;
+    renderWithoutModal?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    hideProductVariants?: boolean;
+    showProductDetailInfoIcon?: boolean;
+    fbStatusFetcher?: (storeId: string, variantIds: string[], appType: ApplicationType) => FbStatusFetcherReturn;
+    onProductDetailClick: (productData: Product | ProductVariant) => void;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+}
+export declare const ProductsScreen: (props: ProductsScreenInterface) => import("react/jsx-runtime").JSX.Element;
+export {};