@bikdotai/bik-component-library 0.0.3202-beta.1 → 0.0.5581-tooltip-beta

package/dist/esm/components/postPicker/postPicker.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import{useState as i,useEffect as n}from"react";import{StyledProductGrid as o,StyledProduct as r}from"./PostPicker.styled.js";import{Tag as s}from"../tag/Tag.js";import{ButtonRegular as l,BodyPrimary as d,BodyCaption as c,TitleMedium as p,ButtonLarge as m,BodySecondary as h}from"../TypographyStyle.js";import{unCamelCase as y}from"../../utils/unCamelCase.js";import{PRIMARY as g}from"../../constants/colors.js";import{COLORS as u}from"../../constants/Theme.js";import j from"../../assets/icons/instagram.svg.js";import w from"../../assets/icons/warning.svg.js";import{StyledModal as f}from"../modals/styledModal.js";import{BikShimmer as v}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as b}from"../shimmer-image/ShimmerImage.js";import{StateComponent as C,StateInterface as T}from"../states/StateComponent.js";import"../../_virtual/_tslib.js";import"@tippyjs/react";import"../tooltips/TooltipInternal.js";import"../analytics-chips-and-dropdowns/CommonStyles.js";import{AnalyticsDropdown as D}from"../analytics-chips-and-dropdowns/AnalyticsDropdown.js";import"../analytics-chips-and-dropdowns/AnalyticsMetric.js";import"../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import"react-bootstrap";import"../analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChart.js";import"../analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js";import"../analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js";import{SearchIcon as O}from"../../assets/icons/searchIcon.js";var x,S;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(x||(x={})),function(e){e.Today="Today",e["7_Days"]="7",e["30_Days"]="30",e.custom="custom",e.Yesterday="Yesterday"}(S||(S={}));const k=[{label:"Today",value:"today",key:S.Today,typeValue:[new Date,new Date]},{label:"Last 7 days",value:"7 days",key:S["7_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-6)),new Date]},{label:"Last 30 days",value:"30 days",key:S["30_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-29)),new Date]},{label:"Custom range",value:"calender",key:S.custom,isCustom:!0,dateRangeSelectionOptions:{selectRange:!0,maxDate:new Date((new Date).setMonth((new Date).getMonth()+3))}}],B=S=>{var B,I;const[P,_]=i(null!==(B=S.previouslySelected)&&void 0!==B?B:[]),[L,V]=i(""),[G,N]=i(!1),[R,$]=i(S.media),[A,M]=i(!1),[E,z]=i(!1);n((()=>{S.media.length||(N(!0),setTimeout((()=>{N(!1)}),2e3)),_(S.selected||[])}),[]),n((()=>{S.media.length>0&&($(S.media),N(!1))}),[null===(I=null==S?void 0:S.media)||void 0===I?void 0:I.length]),n((()=>{P.length>0&&V("")}),[P.length]),n((()=>{A&&($(S.media),z(!1))}),[A]);return e(t,{children:a(f,Object.assign({zIndex:201,open:S.showModal,headingTitle:S.title,onClose:S.onClose,centralContainerStyles:{width:1071,height:S.showFilter?612:564},primaryButton:{disabled:!R.length,buttonType:"primary",buttonText:`Select ${y(S.mediaType)}`,onClick:()=>{P.length?S.onSelect(P):V(`Please select a ${S.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>S.onClose()},footerLeftCustomElement:L?e(s,{tagText:L,type:"negative",LeadingIcon:w}):P.length?a(h,{children:[P.length," selected"]}):null},{children:[S.showFilter&&a("div",Object.assign({style:{marginTop:24,marginBottom:24,padding:"0 24px",display:"flex",flexDirection:"row",gap:8,alignItems:"center"}},{children:[e(D,{options:k,placeholder:"posted on",resetDropdown:A,onOptionSelected:e=>{var t,a;let i=null,n=null;"Custom range"===e.label?(i=(null===(t=null==e?void 0:e.selectedRange)||void 0===t?void 0:t[0])||new Date,n=(null===(a=null==e?void 0:e.selectedRange)||void 0===a?void 0:a[1])||new Date):(i=e.typeValue[0],n=e.typeValue[1]);const o=S.media.filter((e=>function(e,t,a){const i=new Date(e),n=new Date(t),o=new Date(a);return i>=n&&i<=o}(e.timestamp,i,n)));$(o),z(!0),M(!1)}}),E&&e(l,Object.assign({color:u.content.secondary,onClick:()=>M(!0)},{children:"Clear"}))]})),G?e("div",Object.assign({style:{padding:"0 24px"}},{children:e(v,{boxes:[{width:(S.mediaType==x.POST?148:104)+"px",height:(S.mediaType==x.POST?148:172)+"px"}]})})):e(t,{children:R&&R.length?e(o,Object.assign({mediaType:S.mediaType},{children:R.map((t=>{return a(r,Object.assign({mediaType:S.mediaType,className:""+(i=t,n=P,n.some((e=>e.id===i.id))?"selected":""),onClick:()=>{return e=t,void _((()=>P.find((t=>t.id===e.id))?P.filter((t=>t.id!==e.id)):!S.limit||P.length<S.limit?[...P,e]:(V(`Only ${S.limit} ${S.mediaType}s can be selected`),P)));var e}},{children:[e(b,{imageUrl:t.imageUrl,width:S.mediaType==x.POST?148:104,height:S.mediaType==x.POST?148:172,alt:t.overlayCaption}),a("div",Object.assign({className:"overlay"},{children:[e("a",Object.assign({target:"_blank",rel:"noreferrer",href:t.redirectionUrl},{children:a("div",Object.assign({className:"overlay__redirection"},{children:[e(j,{height:22,width:22}),e(d,Object.assign({color:g,style:{fontWeight:500}},{children:"View"}))]}))})),e("div",Object.assign({className:"overlay__caption"},{children:e(c,Object.assign({color:u.content.placeholder},{children:t.overlayCaption}))}))]}))]}),t.id);var i,n}))})):e("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:S.media.length?R.length?e(t,{}):a("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",backgroundColor:`${u.background.inverse}`,borderRadius:"50%"}},{children:e(O,{color:u.content.primaryInverse})})),a("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px"}},{children:[e(p,{children:"No results found"}),e(d,{children:"Sorry we could not find any results for the selected filter"})]})),e("div",Object.assign({onClick:()=>{M(!0)}},{children:e(m,Object.assign({color:`${u.content.brand}`},{children:"Clear Filter"}))}))]})):e(C,{states:T.WARNING,heading:`No ${S.mediaType}s on your account`,subline:`There seems to be no ${S.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))})]}))})};export{S as DateKeys,x as MEDIA_TYPES,B as PostPicker,k as dateOptions};
+import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{SearchIcon as i}from"../../assets/icons/searchIcon.js";import{useState as n,useRef as r,useEffect as o}from"react";import{StyledProductGrid as s,StyledProduct as l}from"./PostPicker.styled.js";import{Tag as d}from"../tag/Tag.js";import{ButtonRegular as c,BodyPrimary as p,BodyCaption as m,TitleMedium as h,ButtonLarge as y,BodySecondary as g}from"../TypographyStyle.js";import{unCamelCase as u}from"../../utils/unCamelCase.js";import{PRIMARY as j}from"../../constants/colors.js";import{COLORS as w}from"../../constants/Theme.js";import v from"../../assets/icons/instagram.svg.js";import f from"../../assets/icons/warning.svg.js";import"../tooltips/Tooltip.js";import"../analytics-chips-and-dropdowns/CommonStyles.js";import{AnalyticsDropdown as b}from"../analytics-chips-and-dropdowns/AnalyticsDropdown.js";import"../analytics-chips-and-dropdowns/AnalyticsMetric.js";import"../shimmer/ShimmerComponent/ShimmerStyled.js";import"../../utils/DateUtils.js";import"../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import"react-bootstrap";import"../analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js";import"../analytics-chips-and-dropdowns/chart/Pie/PieChart.js";import"../analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js";import"../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarGraph/FunnelVerticalBarGraph.js";import"../analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js";import"../analytics-chips-and-dropdowns/chart/heatmap/HeatMapVertical.js";import"../analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js";import{StyledModal as C}from"../modals/styledModal.js";import{BikShimmer as D}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as T}from"../shimmer-image/ShimmerImage.js";import{StateComponent as O,StateInterface as S}from"../states/StateComponent.js";import"../../_virtual/_tslib.js";var k,x;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(k||(k={})),function(e){e.Today="Today",e["7_Days"]="7",e["30_Days"]="30",e.custom="custom",e.Yesterday="Yesterday"}(x||(x={}));const B=[{label:"Today",value:"today",key:x.Today,typeValue:[new Date,new Date]},{label:"Last 7 days",value:"7 days",key:x["7_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-6)),new Date]},{label:"Last 30 days",value:"30 days",key:x["30_Days"],typeValue:[new Date((new Date).setDate((new Date).getDate()-29)),new Date]},{label:"Custom range",value:"calender",key:x.custom,isCustom:!0,dateRangeSelectionOptions:{selectRange:!0,maxDate:new Date((new Date).setMonth((new Date).getMonth()+3))}}],I=x=>{var I,V;const[L,P]=n(null!==(I=x.previouslySelected)&&void 0!==I?I:[]),[G,_]=n(""),[E,N]=n(!1),[R,$]=n(x.media),[M,A]=n(!1),[F,H]=n(!1),[U,z]=n(!1),Y=r(null);o((()=>{x.media.length||(N(!0),setTimeout((()=>{N(!1)}),2e3)),P(x.selected||[])}),[]),o((()=>{x.media.length>0&&($(x.media),N(!1))}),[null===(V=null==x?void 0:x.media)||void 0===V?void 0:V.length]),o((()=>{L.length>0&&_("")}),[L.length]),o((()=>{M&&($(x.media),H(!1))}),[M]),o((()=>{const e=e=>{document.getElementById("analytic-dropdown").contains(e.target)||z(!U)},t=document.getElementById("post-picker");return t&&t.addEventListener("click",e),()=>{t&&t.removeEventListener("click",e)}}));return e("div",Object.assign({ref:Y},{children:t(C,Object.assign({zIndex:201,open:x.showModal,headingTitle:x.title,onClose:x.onClose,centralContainerStyles:{width:1071,height:x.showFilter?650:564},primaryButton:{disabled:!R.length,buttonType:"primary",buttonText:`Select ${u(x.mediaType)}`,onClick:()=>{L.length?x.onSelect(L):_(`Please select a ${x.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>x.onClose()},footerLeftCustomElement:G?e(d,{tagText:G,type:"negative",LeadingIcon:f}):L.length?t(g,{children:[L.length," selected"]}):null,id:"post-picker"},{children:[x.showFilter&&t("div",Object.assign({style:{marginTop:24,marginBottom:24,padding:"0 24px",display:"flex",flexDirection:"row",gap:8,alignItems:"center"}},{children:[e(b,{options:B,placeholder:"posted on",resetDropdown:M,onOptionSelected:e=>{var t,a;let i=null,n=null;"Custom range"===e.label?(i=(null===(t=null==e?void 0:e.selectedRange)||void 0===t?void 0:t[0])||new Date,n=(null===(a=null==e?void 0:e.selectedRange)||void 0===a?void 0:a[1])||new Date):(i=e.typeValue[0],n=e.typeValue[1]);const r=x.media.filter((e=>function(e,t,a){const i=new Date(e),n=new Date(t),r=new Date(a);return i>=n&&i<=r}(e.timestamp,i,n)));$(r),H(!0),A(!1)},closeDropdown:U}),F&&e(c,Object.assign({color:w.content.secondary,onClick:()=>A(!0),style:{cursor:"pointer"}},{children:"Clear"}))]})),E?e("div",Object.assign({style:{padding:"0 24px"}},{children:e(D,{boxes:[{width:(x.mediaType==k.POST?148:104)+"px",height:(x.mediaType==k.POST?148:172)+"px"}]})})):e(a,{children:R&&R.length?e(s,Object.assign({mediaType:x.mediaType},{children:R.map((a=>{return t(l,Object.assign({mediaType:x.mediaType,className:""+(i=a,n=L,n.some((e=>e.id===i.id))?"selected":""),onClick:()=>{return e=a,void P((()=>L.find((t=>t.id===e.id))?L.filter((t=>t.id!==e.id)):!x.limit||L.length<x.limit?[...L,e]:(_(`Only ${x.limit} ${x.mediaType}s can be selected`),L)));var e}},{children:[e(T,{imageUrl:a.imageUrl,width:x.mediaType==k.POST?148:104,height:x.mediaType==k.POST?148:172,alt:a.overlayCaption}),t("div",Object.assign({className:"overlay"},{children:[e("a",Object.assign({target:"_blank",rel:"noreferrer",href:a.redirectionUrl},{children:t("div",Object.assign({className:"overlay__redirection"},{children:[e(v,{height:22,width:22}),e(p,Object.assign({color:j,style:{fontWeight:500}},{children:"View"}))]}))})),e("div",Object.assign({className:"overlay__caption"},{children:e(m,Object.assign({color:w.content.placeholder},{children:a.overlayCaption}))}))]}))]}),a.id);var i,n}))})):e("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:x.media.length?R.length?e(a,{}):t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",backgroundColor:`${w.background.inverse}`,borderRadius:"50%"}},{children:e(i,{color:w.content.primaryInverse})})),t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px"}},{children:[e(h,{children:"No results found"}),e(p,{children:"Sorry we could not find any results for the selected filter"})]})),e("div",Object.assign({onClick:()=>{A(!0)},style:{cursor:"pointer"}},{children:e(y,Object.assign({color:`${w.content.brand}`},{children:"Clear Filter"}))}))]})):e(O,{states:S.WARNING,heading:`No ${x.mediaType}s on your account`,subline:`There seems to be no ${x.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))})]}))}))};export{x as DateKeys,k as MEDIA_TYPES,I as PostPicker,B as dateOptions};

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

@@ -0,0 +1 @@
+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,19 @@
+import { Product, ProductVariant } from './modal';
+import { OUT_OF_STOCK_ACTION } from './type';
+export type ProductPickerTagType = {
+    isVariant: boolean;
+    data: Product | ProductVariant;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+};
+/**
+ * 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.
+ *
+ * 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

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

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

@@ -13,6 +13,7 @@ interface CollectionsScreenInterface {
     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>;
@@ -21,6 +22,27 @@ interface CollectionsScreenInterface {
         setCurPage: React.Dispatch<React.SetStateAction<number>>;
     };
     hideCollectionCheckbox?: boolean;
+    renderWithoutModal?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
 }
 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 c,useState as s,useEffect as r}from"react";import{CheckBox as n}from"../checkBox/CheckBox.js";import{IconButton as l}from"../icon-button/IconButton.js";import{BikShimmer as d}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as a}from"../tag/Tag.js";import{TitleRegular as h}from"../TypographyStyle.js";import{EmptyState as u}from"./emptyState.js";import{CollectionCardStyle as m,CollectionCardInfoStyle as p,CollectionCardDetailStyle as C,CollectionNameHolder as g}from"./style.js";const v=(e,t,o)=>{if(e.length<=t)return e;const i=e.slice(0,t-1);return(o?i.slice(0,i.lastIndexOf(" ")):i)+"..."},b=o=>{const{customCollectionRestriction:i,dataLoading:n,collections:l,selectedCollectionsDispatch:a,setCollectionId:h,selectedCollections:m,setScreen:p,collectionFetcher:C,collectionsDispatch:g,pagingControls:v,storeId:b,setSaveDisabled:f,hideCollectionCheckbox:k}=o,j=c(null),x=c(v.curPage),O=!!i&&(null==m?void 0:m.isCustom),[E,S]=s(!1);r((()=>{x.current=v.curPage}),[v.curPage]),r((()=>{const e=new IntersectionObserver((e=>{e[0].isIntersecting&&x.current>0&&(f(!0),S(!0),C(x.current,b).then((e=>{g({type:"paged",data:(null==e?void 0:e.collections)||{}}),v.setCurPage(x.current+1),S(!1),f(!1)})).catch())}),{threshold:1});return j.current&&e.observe(j.current),()=>{j.current&&e.unobserve(j.current)}}),[j]);const D=e=>{var t,o;let i=0,c=0;if(m[e]){const s=null===(t=l[e])||void 0===t?void 0:t.products;s&&Object.keys(s).forEach((e=>{var t;const o=null===(t=s[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((e=>i+=1))}));const r=null===(o=m[e])||void 0===o?void 0:o.products;return r&&Object.keys(r).forEach((e=>{var t;const o=null===(t=r[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((e=>c+=1))})),!(i<=0&&c>0)&&(c>0&&i!==c)}return!1};return e("div",{children:[Object.keys(l).length?Object.keys(l).map((e=>t(y,{customCollectionRestriction:i,data:l[e],isDisabled:O&&!(null==m?void 0:m[e]),isChecked:!!(null==m?void 0:m[e]),isPartiallyChecked:D(e),selectedCollectionsDispatch:a,setCollectionId:h,setScreen:p,id:e,hideCollectionCheckbox:k},e))):n?[1,2,3,4,5,6,7,8,9,10].map(((e,o)=>t("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:t(d,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):t(u,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),t("div",{ref:j}),E&&[1,2,3,4,5].map(((e,o)=>t("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:t(d,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))]})},y=c=>{const{customCollectionRestriction:s,data:r,selectedCollectionsDispatch:d,setCollectionId:u,isPartiallyChecked:b,setScreen:y,id:f,isChecked:k,isDisabled:j,hideCollectionCheckbox:x}=c;return e(m,Object.assign({isDisabled:j,onClick:()=>{j||(u(f),y("products"))}},{children:[e(p,{children:[!x&&t(n,{isDisabled:j,isChecked:k,isPartiallyChecked:b,onValueChange:function(e,t,o){null==o||o.stopPropagation(),d(e?{type:"selected",data:{id:f,val:r,isRestricted:s}}:{type:"unselected",data:{id:f}}),u(e?f:"")}}),t(C,{children:e(g,{children:[t(h,{children:v(r.name,40,!0)}),r.isSmartCollection?t(a,{tagText:"Smart Collection",type:"warning"}):t(o,{})]})})]}),t(l,{height:12,width:12,disabled:j,Icon:i})]}))};export{b as CollectionsScreen,v as truncate};
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import l from"../../assets/icons/chevronRight.svg.js";import{useRef as i,useState as r,useEffect as n}from"react";import{CheckBox as c}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 b}from"./utility.js";const f=(e,t,o)=>{if(!e)return"";if(e.length<=t)return e;const l=e.slice(0,t-1);return(o?l.slice(0,l.lastIndexOf(" ")):l)+"..."},k=o=>{var l;const{customCollectionRestriction:c,dataLoading:s,collections:d,selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,selectedCollections:C,setScreen:v,collectionFetcher:g,collectionsDispatch:y,pagingControls:f,storeId:k,setSaveDisabled:O,hideCollectionCheckbox:I,renderWithoutModal:S,pickerType:P,scrollContainerRef:T}=o,x=i(null),D=i(f.curPage),L=!!c&&(null==C?void 0:C.isCustom),[R,w]=r(!1),E=i(!1),B=i(!1),N=()=>{if(!T||!(null==T?void 0:T.current))return;const{scrollTop:e,clientHeight:t,scrollHeight:o}=T.current;e+t>=o-20&&!E.current&&!B.current&&(O(!0),w(!0),B.current=!0,O(!0),w(!0),g(D.current,k).then((e=>{y({type:"paged",data:(null==e?void 0:e.collections)||{}}),f.setCurPage(D.current+1),w(!1),O(!1),B.current=!1,Object.keys(null==e?void 0:e.collections).length||(E.current=!0)})).catch())};return n((()=>{var e;return null===(e=null==T?void 0:T.current)||void 0===e||e.addEventListener("scroll",N),()=>{var e;null===(e=null==T?void 0:T.current)||void 0===e||e.removeEventListener("scroll",N)}}),[]),n((()=>{D.current=f.curPage}),[f.curPage]),n((()=>{const e=new IntersectionObserver((e=>{e[0].isIntersecting&&D.current>0&&!E.current&&(O(!0),w(!0),g(D.current,k).then((e=>{y({type:"paged",data:(null==e?void 0:e.collections)||{}}),f.setCurPage(D.current+1),w(!1),O(!1),Object.keys(e).length||(E.current=!0)})).catch())}),{threshold:1});return x.current&&e.observe(x.current),()=>{x.current&&e.unobserve(x.current)}}),[x]),e("div",{children:[(null===(l=Object.keys(null!=d?d:{}))||void 0===l?void 0:l.length)?Object.keys(d).map((e=>{var o,l;const i=!!(null==C?void 0:C[e])&&("PRODUCT"!==P||!!Object.keys(null!==(l=null===(o=null==C?void 0:C[e])||void 0===o?void 0:o.products)&&void 0!==l?l:{}).length);return t(j,{customCollectionRestriction:c,data:d[e],isDisabled:L&&!(null==C?void 0:C[e]),isChecked:i,isPartiallyChecked:b(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:P},e)})):s?t(m,{}):t(p,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),t("div",{ref:x}),R&&t(m,{})]})},j=i=>{const{customCollectionRestriction:r,data:n,selectedCollectionsDispatch:p,setCollectionId:m,setSelectedCollectionId:b,isPartiallyChecked:f,setScreen:k,id:j,isChecked:O,isDisabled:I,hideCollectionCheckbox:S,pickerType:P,usedInSearch:T}=i;return e(C,Object.assign({isDisabled:I,onClick:e=>{if(!I){if("COLLECTION"===P)return e.stopPropagation(),p({type:"reset",data:{}}),p({type:"selected",data:{id:j,val:n,isRestricted:r}}),m(j),void b(j);m(j),b(j),k("products")}},isActive:O,usedInSearch:null!=T&&T},{children:[e(v,{children:[!S&&t(c,{isDisabled:I,isChecked:O,isPartiallyChecked:f,onValueChange:function(e,t,o){null==o||o.stopPropagation(),p(e?{type:"selected",data:{id:j,val:n,isRestricted:r}}:{type:"unselected",data:{id:j}}),b(e?j:"")}}),t(g,{children:t(a,Object.assign({body:n.name,placement:"bottom",delay:400,variant:"light"},{children:e(y,{children:[t(T?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(o,{})]})}))})]}),"COLLECTION"!==P&&t(s,{height:12,width:12,disabled:I,Icon:l})]}))};export{j as CollectionCard,k as CollectionsScreen,f as truncate};

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

@@ -1,5 +1,7 @@
-import { Product, ProductVariant } from '../modal';
+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)
@@ -30,4 +32,19 @@ export declare class ProductHelper {
      * @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;
 }
+/**
+ * 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/helpers/ProductHelper.js

@@ -1 +1 @@
-import{OUT_OF_STOCK_ACTION as n}from"../type.js";const i={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock"};class t{static getProductLabels(t){let l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.NORMAL,u="NORMAL";if(t.variants)return i[u];const y=t;return l===n.HIDE&&(!y.skipSync||0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)||(u="NOT_SYNCED"),y.skipSync&&0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)&&(u="NOT_SYNCED"),y.skipSync||0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)||(u="NOT_SYNCED"),y.skipSync||0===(null==y?void 0:y.quantity)||-2===(null==y?void 0:y.quantity)||(u="NORMAL")),l===n.BLUR&&(!y.skipSync||0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)||(u="NOT_SYNCED"),y.skipSync&&0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)&&(u="NOT_SYNCED"),y.skipSync||0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)||(u="OUT_OF_STOCK"),y.skipSync||0===(null==y?void 0:y.quantity)||-2===(null==y?void 0:y.quantity)||(u="NORMAL")),l===n.NORMAL&&(!y.skipSync||0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)||(u="NOT_SYNCED"),y.skipSync&&0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)&&(u="NOT_SYNCED"),y.skipSync||0!==(null==y?void 0:y.quantity)&&-2!==(null==y?void 0:y.quantity)||(u="NORMAL"),y.skipSync||0===(null==y?void 0:y.quantity)||-2===(null==y?void 0:y.quantity)||(u="NORMAL")),i[u]}}export{t as ProductHelper};
+import{OUT_OF_STOCK_ACTION as n}from"../type.js";const t={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock",FB_REJECTED:"Rejected on FB catalog"};class l{static getProductLabels(l){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.NORMAL,u="NORMAL";if(l.variants)return t[u];const a=l;return"REJECTED"===(null==a?void 0:a.fbStatus)?t.FB_REJECTED:(i===n.HIDE&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),i===n.BLUR&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="OUT_OF_STOCK"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),i===n.NORMAL&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NORMAL"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),t[u])}}Object.defineProperty(l,"getTagType",{enumerable:!0,configurable:!0,writable:!0,value:n=>t.FB_REJECTED===n?"negative":"warning"});const i=n=>{let t=[];Object.keys(n).forEach((l=>{var i;return Object.keys((null===(i=null==n?void 0:n[l])||void 0===i?void 0:i.products)||[]).forEach((i=>{var u,a;const d=null!==(u=n[l].products)&&void 0!==u?u:[],o=null!==(a=d[i].variants)&&void 0!==a?a:[];return Object.keys(o).map((n=>{const t=o[n];t.variantId=n,t.productId=i,t.collectionId=l,t.productName=d[i].name})),t=[...t,...Object.values(o)],t}))}));const l=t.sort(((n,t)=>null==n.displayOrder&&null==t.displayOrder?0:null==n.displayOrder?1:null==t.displayOrder?-1:n.displayOrder-t.displayOrder));return l.forEach(((n,t)=>{n.displayOrder=t})),l};export{l as ProductHelper,i as parseSelectedVariantsToArray};

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

@@ -6,10 +6,14 @@ export interface ProductVariant {
     image: string;
     quantity: number;
     skipSync?: boolean;
+    displayOrder?: number | null;
+    fbStatus?: FbProductStatus;
+    description?: string;
 }
 export interface Product {
     name: string;
     image: string;
+    description?: string;
     variants?: {
         [key: string]: ProductVariant;
     };
@@ -25,6 +29,10 @@ export interface Collection {
 export type SelectedItems = {
     [key: string]: Collection;
 };
+export type SearchedItems = {
+    collections: SelectedItems;
+    products: SelectedItems;
+};
 export type CollectionFetcherReturn = Promise<{
     collections: {
         [key: string]: {
@@ -37,21 +45,34 @@ export type CollectionFetcherReturn = Promise<{
 export type ProductFetcherReturn = Promise<{
     [key: string]: Product;
 }>;
-export interface ProductPickerInterface {
+export type FbStatusFetcherReturn = Promise<{
+    [key: string]: FbProductStatus;
+}>;
+export type FbProductStatus = 'APPROVED' | 'REJECTED';
+export declare enum ScreenName {
+    Collections = "collections",
+    RearrangeProducts = "rearrange",
+    SelectedProducts = "view",
+    SearchProducts = "searchProducts",
+    Products = "products"
+}
+export type ProductPickerInterface = {
     hideGlobalSearch?: boolean;
     hideInCollectionSearch?: boolean;
     customCollectionRestriction?: boolean;
-    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
-    searchFetcher: (storeId: string, query: string) => Promise<SelectedItems>;
+    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => ProductFetcherReturn;
+    searchFetcher: (storeId: string, query: string) => Promise<SearchedItems | SelectedItems>;
     collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
-    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string, limit?: number, offset?: number) => ProductFetcherReturn;
+    fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
     storeId: string;
     selectedItems: SelectedItems;
     onAdd: (items: SelectedItems, total: number) => void;
-    onClose: () => void;
+    onClose?: () => void;
     visible: boolean;
     zIndex?: number;
     limit?: number;
+    exactLimit?: number;
     hideCollectionCheckbox?: boolean;
     hideProductCheckbox?: boolean;
     outOfStockAction?: OUT_OF_STOCK_ACTION;
@@ -61,5 +82,21 @@ export interface ProductPickerInterface {
     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;
+} & ({
+    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{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as s,useState as i,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{Button as n}from"../button/Button.js";import{Input as d}from"../input/Input.js";import{StyledModal as a}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as u}from"../tag/Tag.js";import{CollectionsScreen as p}from"./collectionScreen.js";import{ProductsScreen as m}from"./productScreen.js";import{collectionsReducer as C,selectedColectionsReducer as b,CollectionIdContext as g}from"./reducers.js";import{SearchScreen as v}from"./searchScreen.js";import{SelectedScreen as y}from"./selectedScreen.js";import{ContainerStyle as f,ScrollContainerStyle as j}from"./style.js";import{OUT_OF_STOCK_ACTION as x}from"./type.js";const S=S=>{const{storeId:k,selectedItems:I,onClose:P,visible:F,zIndex:O,limit:T,hideCollectionCheckbox:D,hideProductCheckbox:E,outOfStockAction:w=x.BLUR,hideVariantCheckbox:R,selectProductsFromCustomCollection:B,hideSelectionCount:A,title:L,width:z}=S,[G,H]=s(C,{}),[$,V]=i("collections"),[K,M]=i(""),[U,Y]=i(0),[q,J]=i(!1),[N,Q]=i(0),[W,X]=i(""),[Z,_]=i(!1),[ee,te]=i(!1),[oe,ce]=i(),[se,ie]=s(b,Object.keys(I).length>0?I:{});r((()=>{J(!0),te(!0),S.collectionFetcher(U,k).then((e=>{H({type:"fetched",data:(null==e?void 0:e.collections)||{}}),J(!1),Y((e=>e+1)),te(!1)})).catch()}),[]),r((()=>{let e=0;Object.keys(se||[]).forEach((t=>{var o;Object.keys((null===(o=se[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,s;Object.keys((null===(s=null===(c=se[t].products)||void 0===c?void 0:c[o])||void 0===s?void 0:s.variants)||[]).forEach((()=>{e+=1}))}))})),Q(e)})),r((()=>{var e;K&&!(null===(e=null==G?void 0:G[K])||void 0===e?void 0:e.products)&&(J(!0),S.productFetcher(K,k).then((e=>{Object.keys(e).length&&H({type:"productsFetched",data:{collectionId:K,products:e}}),J(!1)})).catch())}),[K]),r((()=>{const e=setTimeout((()=>{W.length?(_(!0),S.searchFetcher(k,W).then((e=>{ce(Object.assign({},e)),V("searchProducts"),J(!1),_(!1)}))):V("collections")}),800);return()=>clearTimeout(e)}),[W]);const re=()=>{ie({type:"reset",data:{}})};return e(a,Object.assign({zIndex:O,open:F,onClose:()=>{P(),re()},headingTitle:L||("collections"===$||"products"===$?"Select Products":"view"===$?"Selected Products":"searchProducts"===$?"Searched Products":void 0),footerShadow:!0,centralContainerStyles:{width:z||"480px"},primaryButton:{buttonText:q?"Loading...":"Add",disabled:q||N<1||T&&N>T||!1,onClick:()=>{S.onAdd(se,N),re()}},footerLeftCustomElement:A?e(t,{}):T&&N>T?e(u,{tagText:`You can only select ${T} products`,type:"negative"}):e(n,N>0?{onClick:()=>{V("view")},buttonText:`${N} products selected`,buttonType:"tertiaryGray"}:{disabled:!0,buttonText:`${N} products selected`,buttonType:"tertiaryGray"})},{children:o(f,{children:[S.postHeader&&e("div",Object.assign({style:{padding:"0 24px"}},{children:S.postHeader})),!S.hideGlobalSearch&&e(t,{children:("collections"===$||"searchProducts"===$)&&e("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:e(d,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Z?e(h,{size:"small",color:l.content.primary}):e(c,{})},id:"listInput",height:"24px",type:"text",value:W,onChangeText:e=>{e.length&&e.trim().length?X(e):X("")}})}))}),o(j,{children:["collections"===$&&e(p,{customCollectionRestriction:S.customCollectionRestriction,dataLoading:ee,collections:G,selectedCollectionsDispatch:ie,setCollectionId:M,setScreen:V,selectedCollections:se,collectionFetcher:S.collectionFetcher,storeId:k,collectionsDispatch:H,setSaveDisabled:J,pagingControls:{curPage:U,setCurPage:Y},hideCollectionCheckbox:D}),"products"===$&&K&&e(g.Provider,Object.assign({value:K},{children:e(m,{hideInCollectionSearch:S.hideInCollectionSearch,customCollectionRestriction:S.customCollectionRestriction,productFetcher:S.productFetcher,setScreen:V,storeId:k,data:G[K],collectionsDispatch:H,selectedCollectionsDispatch:ie,selectedData:se,setSaveDisabled:J,searchInCollectionFetcher:S.searchInCollectionFetcher,hideProductCheckbox:E,outOfStockAction:w,hideVariantCheckbox:R,selectProductsFromCustomCollection:B})})),"view"===$&&e(y,{selectedCollections:se||{},selectedCollectionsDispatch:ie,setScreen:V,collections:G}),"searchProducts"===$&&e(v,{customCollectionRestriction:S.customCollectionRestriction,selectedCollections:se||{},searchedCollections:oe||{},selectedCollectionsDispatch:ie,setScreen:V,collections:G,onBackPress:()=>{X(""),ce({})}})]})]})}))};export{S as ProductPickerModal};
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import d from"../../assets/icons/cross.svg.js";import{Button as a}from"../button/Button.js";import{Input as u}from"../input/Input.js";import{StyledModal as h}from"../modals/styledModal.js";import{Spinner as p}from"../spinner/Spinner.js";import{Tag as m}from"../tag/Tag.js";import{CollectionsScreen as C}from"./collectionScreen.js";import{ProductInfoOverlay as g}from"./productInfoOverlay.js";import{ProductsScreen as f}from"./productScreen.js";import{RearrangeScreen as y}from"./rearrangeScreen.js";import{collectionsReducer as b,searchReducer as S,selectedColectionsReducer as v,CollectionIdContext as k}from"./reducers.js";import{SearchScreen as j}from"./searchScreen.js";import{SelectedScreen as P}from"./selectedScreen.js";import{ContainerStyle as x,ScrollContainerStyle as I}from"./style.js";import{OUT_OF_STOCK_ACTION as F}from"./type.js";var O;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(O||(O={}));const T=T=>{const{storeId:D,selectedItems:R,onClose:w,visible:E,zIndex:A,exactLimit:V,limit:$,hideCollectionCheckbox:B,hideProductCheckbox:L,outOfStockAction:M=F.BLUR,hideVariantCheckbox:z,selectProductsFromCustomCollection:H,hideSelectionCount:W,title:G,width:Y,left:K,renderWithoutModal:N,onClickSave:U,pickerType:q,hideProductVariants:J=!1,startupScreen:Q=O.Collections,rearrangeEnabled:X,selectSingleItem:Z=!1,showProductDetails:_,containerStyle:ee,crossButtonInsideHeader:te=!1}=T,[oe,ce]=r(b,{}),[re,se]=s([O.Collections,O.RearrangeProducts].includes(Q)?Q:O.Collections),[ie,le]=s("grid"),[ne,de]=s(""),[ae,ue]=s(""),[he,pe]=s(0),[me,Ce]=s(!1),[ge,fe]=s(0),[ye,be]=s(""),[Se,ve]=s(!1),[ke,je]=s(!1),[Pe,xe]=r(S,{collections:{},products:{}}),[Ie,Fe]=r(v,Object.keys(R).length>0?R:{}),Oe=i(null),[Te,De]=s(!1),[Re,we]=s();l((()=>{Ce(!0),je(!0),T.collectionFetcher(he,D).then((e=>{ce({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Ce(!1),pe((e=>e+1)),je(!1)})).catch()}),[]),l((()=>{let e=0;J?Object.keys(Ie||[]).forEach((t=>{var o;Object.keys((null===(o=Ie[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&Ie[-1]&&(null===(c=Ie[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(Ie||[]).forEach((t=>{var o;Object.keys((null===(o=Ie[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=Ie[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),fe(e)}),[oe,Ie,J]),l((()=>{ae&&(Ce(!0),T.productFetcher(ae,D).then((e=>{Object.keys(e).length&&ce({type:"productsFetched",data:{collectionId:ae,products:e}}),Ce(!1)})).catch())}),[ae]),l((()=>{const e=setTimeout((()=>{"rearrange"!==re&&(ye.length||"collections"!==re)&&(ye.length?(ve(!0),T.searchFetcher(D,ye).then((e=>{"collections"in e&&"products"in e?(xe({type:"set",data:e}),ce({type:"searched",data:e.collections})):(xe({type:"set",data:{collections:{},products:e}}),ce({type:"searched",data:e})),se("searchProducts"),Ce(!1),ve(!1)}))):se("collections"))}),800);return()=>clearTimeout(e)}),[ye]),l((()=>{U&&(T.onAdd(Ie,ge),Ee())}),[U]),l((()=>{Z&&Object.keys(Ie||{}).length&&ge&&(T.onAdd(Ie,ge),Ee())}),[Z,Ie,ge]);const Ee=()=>{Fe({type:"reset",data:{}})},Ae=e(x,Object.assign({style:null!=ee?ee:{}},{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===re||"searchProducts"===re)&&t("div",Object.assign({style:{padding:N?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(u,{placeholder:"Search Collections or Products",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Se?t(p,{size:"small",color:n.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:ye,onChangeText:e=>{e.length&&e.trim().length?be(e):be("")}})}))}),e(I,Object.assign({ref:Oe,screenName:re},{children:["collections"===re&&t(C,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:ke,collections:oe,selectedCollectionsDispatch:Fe,setCollectionId:de,setSelectedCollectionId:ue,setScreen:se,selectedCollections:Ie,collectionFetcher:T.collectionFetcher,storeId:D,collectionsDispatch:ce,setSaveDisabled:Ce,pagingControls:{curPage:he,setCurPage:pe},hideCollectionCheckbox:B,renderWithoutModal:N,pickerType:q,scrollContainerRef:Oe}),"products"===re&&ne&&t(k.Provider,Object.assign({value:ne},{children:t(f,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:se,storeId:D,data:oe[ne],collectionsDispatch:ce,selectedCollectionsDispatch:Fe,selectedData:Ie,setSaveDisabled:Ce,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:L,outOfStockAction:M,hideVariantCheckbox:z,selectProductsFromCustomCollection:H,renderWithoutModal:N,pickerType:q,hideProductVariants:J,fbStatusFetcher:T.fbStatusFetcher,onProductDetailClick:e=>{De(!0),we(e)},showProductDetailInfoIcon:_,scrollContainerRef:Oe})})),"view"===re&&t(P,{selectedCollections:Ie||{},selectedCollectionsDispatch:Fe,setScreen:se,collections:oe,hideProductVariants:J,outOfStockAction:M,storeId:D,fbStatusFetcher:T.fbStatusFetcher}),"rearrange"===re&&t(y,{selectedCollections:Ie||{},selectedCollectionsDispatch:Fe,setScreen:se,outOfStockAction:M,rearrangeViewType:"grid"===ie?"list":"grid",scrollContainerRef:Oe,storeId:D,fbStatusFetcher:T.fbStatusFetcher}),"searchProducts"===re&&t(j,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:Ie||{},searchedCollections:Pe||{},searchedCollectionsDispatch:xe,selectedCollectionsDispatch:Fe,setScreen:se,collections:oe,onBackPress:()=>{be(""),xe({type:"set",data:{collections:{},products:{}}})},pickerType:q,hideProductCheckbox:L,hideProductVariants:J,hideVariantCheckbox:z,storeId:D,fbStatusFetcher:T.fbStatusFetcher,setCollectionId:de,setSelectedCollectionId:ue,renderWithoutModal:N,hideCollectionCheckbox:B,outOfStockAction:M})]}))]}));return t(o,{children:N?Ae:e(h,Object.assign({zIndex:A,open:E,onClose:()=>{null==w||w(),Ee()},headingTitle:G||("collections"===re||"products"===re?"Select Products":"view"===re?"Selected Products":"searchProducts"===re?"Searched Results":"rearrange"===re?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:Y||"600px",left:K||"auto"},headerRightCustomElement:te?t("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:w},{children:t(d,{width:20,height:20,color:n.content.secondary})})):t(o,{}),footerContainerStyle:T.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:n.surface.standard}:void 0,primaryButton:{buttonText:me?"Loading...":re===O.RearrangeProducts?"Done":"Add",disabled:me||ge<1||V&&ge<V||!V&&$&&ge>$||!1,onClick:()=>{T.onAdd(Ie,ge),Ee()}},wrapperStyle:T.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:W?t(o,{}):V&&ge>V?t(m,{tagText:`You can only select ${V} products`,type:"negative"}):$&&ge>$?t(m,{tagText:`You can only select ${$} products`,type:"negative"}):t(a,ge>0?{onClick:()=>{se(X?O.RearrangeProducts:O.SelectedProducts)},buttonText:V?`${ge}/${V} products selected`:`${ge} products selected`,buttonType:["rearrange","view"].includes(re)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(re)}:{disabled:!0,buttonText:V?`${ge}/${V} products selected`:`${ge} products selected`,buttonType:"tertiaryGray"}),hideCrossButton:Te||te},{children:[Ae,Te&&Re?t(g,{productData:Re,outOfStockAction:M,onClose:()=>{De(!1)}}):t(o,{})]}))})};export{T as ProductPickerModal,O as ScreenName};

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

@@ -0,0 +1,43 @@
+/// <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;
+}
+export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +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 n}from"../icon-button/IconButton.js";import{ShimmerImage as l}from"../shimmer-image/ShimmerImage.js";import{Tooltip as a}from"../tooltips/Tooltip.js";import{BodyPrimary as r}from"../TypographyStyle.js";import{ProductPickerTag as s}from"./ProductPickerTag.js";import{ProductCardStyle as u}from"./style.js";import{shouldShowVariant as p}from"./utility.js";const h=o=>{const{collectionId:e,productId:c,data:d,selectedData:n,selectedCollectionsDispatch:l,viewOnly:a,upliftAdditions:r,isProductPartiallyChecked:s,hideProductCheckbox:u,outOfStockAction:h,hideVariantCheckbox:I,hideProductVariants:m,pickerType:f,onProductDetailClick:k,showProductDetailInfoIcon:y}=o,C=t=>{var i,o,d,l,a,r;if(!(null===(o=null===(i=null==n?void 0:n[e])||void 0===i?void 0:i.products)||void 0===o?void 0:o[c]))return!1;return!!(null===(r=null===(a=null===(l=null===(d=null==n?void 0:n[e])||void 0===d?void 0:d.products)||void 0===l?void 0:l[c])||void 0===a?void 0:a.variants)||void 0===r?void 0:r[t])};return t("div",{children:[i(v,{isVariant:!1,data:d,productId:c,collectionId:e,isSelected:!!(null===(b=null===(P=null==n?void 0:n[e])||void 0===P?void 0:P.products)||void 0===b?void 0:b[c]),isPartiallyChecked:s,selectedCollectionsDispatch:l,upliftAdditions:r,viewOnly:a,hideProductCheckbox:u,hideVariantCheckbox:I,hideProductVariants:m,pickerType:f,outOfStockAction:h,onProductDetailClick:k,showProductDetailInfoIcon:y},c),m?null:p(d)&&Object.keys(d.variants||[]).map((t=>i(v,{isVariant:!0,hideVariantCheckbox:I,data:d.variants[t],variantId:t,productId:c,viewOnly:a,upliftAdditions:r,collectionId:e,isSelected:C(t),selectedCollectionsDispatch:l,outOfStockAction:h,onProductDetailClick:k,showProductDetailInfoIcon:y},t)))]});var P,b},v=p=>{const{isVariant:h,data:v,productId:I,collectionId:m,variantId:f,isSelected:k,selectedCollectionsDispatch:y,viewOnly:C,upliftAdditions:P,isPartiallyChecked:b,hideProductCheckbox:g,outOfStockAction:j,hideVariantCheckbox:O,hideProductVariants:D,pickerType:x="PRODUCT",onProductDetailClick:S,showProductDetailInfoIcon:V}=p;return t(u,Object.assign({isVariant:h,onClick:t=>{if(t.stopPropagation(),"PRODUCT"===x&&(g||O)){const t=Object.keys(v.variants);D?k?y({type:"productUnselected",data:{productId:I,collectionId:m}}):P("productSelected",{productId:I,variantId:f,collectionId:m,product:v}):k?y({type:"variantUnselected",data:{productId:I,variantId:f,collectionId:m}}):P("variantSelected",{productId:I,variantId:f||t[0],collectionId:m,variant:v})}},isActive:k},{children:[h&&!C&&!O||!h&&!C&&!g?i(d,{isChecked:k,isPartiallyChecked:b||!1,onValueChange:function(t,i,o){null==o||o.stopPropagation(),h?t?P(D?"productSelected":"variantSelected",{productId:I,variantId:f,collectionId:m,variant:v}):y({type:D?"productUnselected":"variantUnselected",data:{productId:I,variantId:f,collectionId:m}}):t?P("productSelected",{productId:I,collectionId:m,product:v}):y({type:"productUnselected",data:{productId:I,collectionId:m}})}}):i(o,{}),i("div",{children:i(l,{width:40,height:40,imageUrl:v.image,alt:"Item",borderRadius:4})}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},{children:[i(a,Object.assign({variant:"light",body:v.name,placement:"bottom",delay:400},{children:i(r,Object.assign({numberOfLines:1},{children:v.name}))})),V&&i(n,{onClick:()=>{null==S||S(v)},Icon:()=>i(c,{width:20,height:20,color:e.content.placeholder})})]})),i(s,{isVariant:h,data:v,outOfStockAction:j})]}))]}))};export{v as ProductCard,h as ProductGroup};

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

@@ -0,0 +1,17 @@
+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;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductInfoCard: (props: {
+    productData: Product | ProductVariant;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-components";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/cross.svg.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as d}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as n,BodyCaption as s}from"../TypographyStyle.js";import{ProductPickerTag as c}from"./ProductPickerTag.js";const l=i=>o(m,{children:[t(u,{}),t(x,{children:t(a,{className:"close-button",onClick:i.onClose,Icon:e,width:20,height:20})}),t(p,{productData:i.productData,outOfStockAction:i.outOfStockAction})]}),p=i=>{var r;const e=void 0===i.productData.variants;return o(f,{children:[t(g,{children:t(d,{imageUrl:i.productData.image,width:"200px",height:200,borderRadius:4})}),o(h,{children:[t(n,Object.assign({style:{display:"flex"}},{children:i.productData.name})),t(s,{className:"overlay-description",dangerouslySetInnerHTML:{__html:null!==(r=i.productData.description)&&void 0!==r?r:""}}),t(c,{isVariant:e,data:i.productData,outOfStockAction:i.outOfStockAction})]})]})},m=i.div`
+	display: flex;
+	flex: 1;
+	background: rgba(0, 0, 0, 0.5);
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	bottom: 0;
+	z-index: 10;
+
+	.overlay-description {
+		display: flex;
+		flex-direction: column;
+		max-height: 300px;
+		overflow-y: auto;
+		word-break: break-word;
+	}
+`,u=i.div`
+	display: flex;
+	flex: 1;
+	background: rgba(0, 0, 0, 0.5);
+`,x=i.div`
+	position: relative;
+
+	.close-button {
+		position: absolute;
+		top: -50px;
+		right: 0px;
+		margin: 10px;
+		background: ${r.surface.standard};
+		border-radius: 50%;
+	}
+`,f=i.div`
+	display: flex;
+	background: white;
+	padding: 24px;
+	gap: 24px;
+	border-radius: 8px 8px 0px 0px;
+`,g=i.div`
+	display: flex;
+`,h=i.div`
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 10px;
+`;export{p as ProductInfoCard,l as ProductInfoOverlay};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Collection, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
+import { Collection, FbStatusFetcherReturn, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
 import { CollectionsActions, SelectedCollectionsActions } from './reducers';
 import { OUT_OF_STOCK_ACTION } from './type';
 interface ProductsScreenInterface {
@@ -9,8 +9,8 @@ interface ProductsScreenInterface {
     collectionsDispatch: React.Dispatch<CollectionsActions>;
     selectedData: SelectedItems;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
-    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
-    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => ProductFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string, limit?: number, offset?: number) => ProductFetcherReturn;
     storeId: string;
     setScreen: React.Dispatch<React.SetStateAction<string>>;
     setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
@@ -18,36 +18,13 @@ interface ProductsScreenInterface {
     outOfStockAction?: OUT_OF_STOCK_ACTION;
     hideVariantCheckbox?: boolean;
     selectProductsFromCustomCollection?: boolean;
+    renderWithoutModal?: boolean;
+    pickerType?: 'COLLECTION' | 'PRODUCT';
+    hideProductVariants?: boolean;
+    showProductDetailInfoIcon?: boolean;
+    fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
+    onProductDetailClick: (productData: Product | ProductVariant) => void;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
 }
 export declare const ProductsScreen: (props: ProductsScreenInterface) => import("react/jsx-runtime").JSX.Element;
-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;
-}
-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;
-}
-export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import c from"../../assets/icons/box.svg.js";import d from"../../assets/icons/search.svg.js";import{cloneDeep as l}from"lodash";import{useContext as n,useState as r,useEffect as s}from"react";import{Tag as a}from"../tag/Tag.js";import{COLORS as u}from"../../constants/Theme.js";import{CheckBox as h}from"../checkBox/CheckBox.js";import{IconButton as p}from"../icon-button/IconButton.js";import{Input as v}from"../input/Input.js";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as f}from"../shimmer-image/ShimmerImage.js";import{Spinner as y}from"../spinner/Spinner.js";import{BodyCaption as g,TitleRegular as b}from"../TypographyStyle.js";import{truncate as j}from"./collectionScreen.js";import{EmptyState as k}from"./emptyState.js";import{ProductHelper as C}from"./helpers/ProductHelper.js";import{CollectionIdContext as I}from"./reducers.js";import{ProductScreenHeader as O,ProductScreenCollectionCardStyle as x,ProductCardStyle as S}from"./style.js";import{OUT_OF_STOCK_ACTION as P}from"./type.js";import{liftTheStateUp as w}from"./utility.js";const D=o=>{const a=n(I),{data:f,collectionsDispatch:j,selectedData:C,selectedCollectionsDispatch:S,productFetcher:D,storeId:V,setScreen:A,setSaveDisabled:T,hideInCollectionSearch:B,customCollectionRestriction:F,hideProductCheckbox:R,outOfStockAction:U=P.BLUR,hideVariantCheckbox:H=!1,selectProductsFromCustomCollection:L=!1}=o,[W,z]=r(""),[K,N]=r(!1),[_,q]=r(f);s((()=>{const t=setTimeout((()=>{W.length?(N(!0),o.searchInCollectionFetcher(V,a,W).then((t=>{var e;const o=l(f);o.products={};for(const i of t)(null===(e=null==f?void 0:f.products)||void 0===e?void 0:e[i])&&(o.products[i]=f.products[i]);q(o),T(!1),N(!1)}))):q(f)}),800);return()=>clearTimeout(t)}),[W]);const G=!!F&&f.isSmartCollection,J=t=>{var e,o,i,c,d,l,n,r;let s=0,u=0;return!!((null===(o=null===(e=null==C?void 0:C[a])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(d=Object.keys((null===(c=null===(i=null==f?void 0:f.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.forEach((()=>u++)),Object.keys((null===(r=null===(n=null===(l=null==C?void 0:C[a])||void 0===l?void 0:l.products)||void 0===n?void 0:n[t])||void 0===r?void 0:r.variants)||[]).forEach((()=>s++)),s>0&&u!==s))};s((()=>{(null==f?void 0:f.products)||M()}),[]);const M=()=>{T(!0),N(!0),D(a,V).then((t=>{Object.keys(t).length&&(j({type:"productsFetched",data:{collectionId:a,products:t}}),q(Object.assign(Object.assign({},_),{products:t}))),T(!1),N(!1)})).catch()},Q=(t,e)=>{const o=w(e,f);S({type:t,data:Object.assign(Object.assign({},o),{isRestricted:F})})};return t("div",{children:[t(O,{children:[e(p,{Icon:i,height:16,onClick:()=>{A("collections")}}),e(g,Object.assign({style:{color:u.content.secondary}},{children:f.name}))]}),!B&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(v,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>K&&W.length?e(y,{size:"small",color:u.content.primary}):e(d,{})},id:"listInput",height:"24px",type:"text",value:W,onChangeText:t=>{t.length&&t.trim().length?z(t):z("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==_?void 0:_.products)||[]).length>0&&!G&&!W.length&&!R&&t(x,{children:[e(h,{isChecked:!!(null==C?void 0:C[a]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(C[t]){const c=null==f?void 0:f.products;c&&Object.keys(c).forEach((t=>{var e;const i=null===(e=c[t])||void 0===e?void 0:e.variants;i&&Object.keys(i).forEach((t=>o+=1))}));const d=null===(e=C[t])||void 0===e?void 0:e.products;return d&&Object.keys(d).forEach((t=>{var e;const o=null===(e=d[t])||void 0===e?void 0:e.variants;o&&Object.keys(o).forEach((()=>i+=1))})),i>0&&o!==i}return!1})(a),onValueChange:function(t){S(t?{type:"selected",data:{id:a,val:f}}:{type:"unselected",data:{id:a}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),e(b,{children:"All Products"})]}),Object.keys((null==_?void 0:_.products)||[]).length?Object.keys(_.products||[]).map((t=>e(E,{outOfStockAction:U,collectionId:a,isProductPartiallyChecked:J(t),productId:t,data:_.products[t],selectedData:C,selectedCollectionsDispatch:S,viewOnly:!L&&!!G,upliftAdditions:Q,hideProductCheckbox:R,hideVariantCheckbox:H},t))):K?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e(k,{title:"No products to show",subtitle:W.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})]})]})},E=o=>{const{collectionId:i,productId:c,data:d,selectedData:l,selectedCollectionsDispatch:n,viewOnly:r,upliftAdditions:s,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:h,hideVariantCheckbox:p}=o,v=t=>{var e,o,d,n,r,s;if(!(null===(o=null===(e=null==l?void 0:l[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[c]))return!1;return!!(null===(s=null===(r=null===(n=null===(d=null==l?void 0:l[i])||void 0===d?void 0:d.products)||void 0===n?void 0:n[c])||void 0===r?void 0:r.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(V,{isVariant:!1,data:d,productId:c,collectionId:i,isSelected:!!(null===(f=null===(m=null==l?void 0:l[i])||void 0===m?void 0:m.products)||void 0===f?void 0:f[c]),isPartiallyChecked:a,selectedCollectionsDispatch:n,upliftAdditions:s,viewOnly:r,hideProductCheckbox:u,hideVariantCheckbox:p},c),Object.keys(d.variants||[]).map((t=>e(V,{isVariant:!0,hideVariantCheckbox:p,data:d.variants[t],variantId:t,productId:c,viewOnly:r,upliftAdditions:s,collectionId:i,isSelected:v(t),selectedCollectionsDispatch:n,outOfStockAction:h},t)))]});var m,f},V=i=>{const{isVariant:c,data:d,productId:l,collectionId:n,variantId:r,isSelected:s,selectedCollectionsDispatch:u,viewOnly:p,upliftAdditions:v,isPartiallyChecked:m,hideProductCheckbox:y,outOfStockAction:g,hideVariantCheckbox:k}=i,I=C.getProductLabels(d,g);return t(S,Object.assign({isVariant:c},{children:[c&&!p&&!k||!c&&!p&&!y?e(h,{isChecked:s,isPartiallyChecked:m||!1,onValueChange:function(t){c?t?v("variantSelected",{productId:l,variantId:r,collectionId:n,variant:d}):u({type:"variantUnselected",data:{productId:l,variantId:r,collectionId:n}}):t?v("productSelected",{productId:l,collectionId:n,product:d}):u({type:"productUnselected",data:{productId:l,collectionId:n}})}}):e(o,{}),e("div",{children:e(f,{width:40,height:40,imageUrl:d.image,alt:"Item",borderRadius:4})}),t("div",Object.assign({style:{display:"flex",flexDirection:"column"}},{children:[e(b,{children:j(d.name,40,!0)}),I?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(a,{tagText:I,type:"warning",theme:"light"})})):e(o,{})]}))]}))};export{V as ProductCard,E as ProductGroup,D as ProductsScreen};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import c from"../../assets/icons/box.svg.js";import n from"../../assets/icons/search.svg.js";import{cloneDeep as i}from"lodash";import{useContext as r,useRef as s,useState as l,useEffect as d}from"react";import{COLORS as a}from"../../constants/Theme.js";import{CheckBox as u}from"../checkBox/CheckBox.js";import{IconButton as h}from"../icon-button/IconButton.js";import{InfiniteScroll as p}from"../InfiniteScroll/InfiniteScroll.js";import{Input as m}from"../input/Input.js";import{Spinner as g}from"../spinner/Spinner.js";import{BodyCaption as j,TitleRegular as f}from"../TypographyStyle.js";import{EmptyState as v}from"./emptyState.js";import{ProductGroup as b}from"./product.js";import{ProductPickerShimmer as y}from"./ProductPickerShimmer.js";import{CollectionIdContext as O}from"./reducers.js";import{ProductScreenHeader as k,ProductScreenCollectionCardStyle as C}from"./style.js";import{OUT_OF_STOCK_ACTION as P}from"./type.js";import{getVariantIdsToFetchAtProductLevel as I,markVariantsAsApprovedProductsLevel as D,isCollectionPartiallyChecked as S,isProductPartiallyChecked as x,liftTheStateUp as E}from"./utility.js";const R=R=>{var T,w;const{data:V,collectionsDispatch:A,selectedData:B,selectedCollectionsDispatch:F,productFetcher:J,storeId:M,setScreen:W,setSaveDisabled:z,hideInCollectionSearch:H,customCollectionRestriction:K,hideProductCheckbox:L,outOfStockAction:N=P.BLUR,hideVariantCheckbox:U=!1,selectProductsFromCustomCollection:_=!1,pickerType:q,hideProductVariants:G,fbStatusFetcher:Q,onProductDetailClick:X,showProductDetailInfoIcon:Y,scrollContainerRef:Z}=R,$=r(O),tt=s(0),et=s(!1),[ot,ct]=l(""),[nt,it]=l(!1),[rt,st]=l(V),lt=s(!1);d((()=>{const t=setTimeout((()=>{ot.length?(it(!0),R.searchInCollectionFetcher(M,$,ot).then((t=>{const e=i(V);e.products=t,st(e);const o=I(null!=t?t:{});at(o,null!=t?t:{},!0),z(!1),it(!1)}))):st(V)}),800);return()=>clearTimeout(t)}),[ot]);d((()=>{var t,e,o,c;lt.current=!1,tt.current=Math.floor((null===(e=Object.keys(null!==(t=V.products)&&void 0!==t?t:{}))||void 0===e?void 0:e.length)/10);const n=I(null!==(o=V.products)&&void 0!==o?o:{});at(n,null!==(c=V.products)&&void 0!==c?c:{})}),[$]);const dt=!!K&&V.isSmartCollection;d((()=>{(null==V?void 0:V.products)||ut(10)}),[]);const at=(t,e,o)=>{Q||(o?D(e,A,$,rt,st):D(e,A,$)),t.length>0&&Q&&Q(M,t).then((t=>{const c=Object.assign({},e);Object.keys(e).forEach((o=>{var n,i;Object.keys(null!==(i=null===(n=null==e?void 0:e[o])||void 0===n?void 0:n.variants)&&void 0!==i?i:{}).forEach((n=>{var i,r;const s=null===(i=null==e?void 0:e[o].variants)||void 0===i?void 0:i[n];s&&"REJECTED"===t[n]?s.fbStatus="REJECTED":s&&"APPROVED"===t[n]&&(s.fbStatus="APPROVED");const l=null===(r=null==c?void 0:c[o])||void 0===r?void 0:r.variants;l&&l[n]&&(l[n]=s)}))})),o?(st((t=>{const e=Object.assign({},t);return e.products=c,e})),A({type:"productsPaged",data:{collectionId:$,products:c}})):A({type:"productsPaged",data:{collectionId:$,products:c}})})).catch((t=>{o?D(e,A,$,rt,st):D(e,A,$)}))},ut=t=>{z(!0),it(!0),J($,M,t,0).then((e=>{if(Object.keys(e).length||(lt.current=!0),Object.keys(e).length){st(Object.assign(Object.assign({},rt),{products:e}));const t=I(e);at(t,e),tt.current=1}t||F({type:"selected",data:{id:$,val:Object.assign(Object.assign({},V),{products:e})}}),z(!1),it(!1)})).catch()},ht=(t,e)=>{const o=E(e,V);F({type:t,data:Object.assign(Object.assign({},o),{isRestricted:K})})},pt=!!(null==B?void 0:B[$])&&!!Object.keys(null!==(w=null===(T=null==B?void 0:B[$])||void 0===T?void 0:T.products)&&void 0!==w?w:{}).length;return t("div",{children:[t(k,{children:[e(h,{Icon:o,height:16,onClick:()=>{W("collections")}}),e(j,Object.assign({style:{color:a.content.secondary}},{children:V.name}))]}),!H&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(m,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>nt&&ot.length?e(g,{size:"small",color:a.content.primary}):e(n,{})},id:"listInput",height:"24px",type:"text",value:ot,onChangeText:t=>{t.length&&t.trim().length?ct(t):ct("")},placeholder:"Search products in this collection..."})})),Object.keys((null==rt?void 0:rt.products)||[]).length>0&&!dt&&!ot.length&&!L&&"-1"!==$&&t(C,{children:[e(u,{isChecked:pt,isPartiallyChecked:S($,rt,B,G),onValueChange:function(t){t?ut():F({type:"unselected",data:{id:$}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),e(f,{children:"All Products"})]}),e(p,Object.assign({hasData:!(Object.keys((null==rt?void 0:rt.products)||[]).length<10)&&!!Object.keys((null==rt?void 0:rt.products)||[]).length,fetchMore:()=>(et.current=!0,J($,M,10,tt.current).then((t=>{let e=!1;if(Object.keys(t).length||(e=!0),Object.keys(t).length){const e=rt;e.products=Object.assign(Object.assign({},rt.products),t),st(Object.assign({},e));const o=I(t);at(o,t)}return z(!1),et.current=!1,tt.current+=1,e}))),containerRef:Z},{children:Object.keys((null==rt?void 0:rt.products)||[]).length?Object.keys(rt.products||[]).map((t=>e(b,{outOfStockAction:N,collectionId:$,isProductPartiallyChecked:x($,t,B,rt,G),productId:t,data:rt.products[t],selectedData:B,selectedCollectionsDispatch:F,viewOnly:!_&&!!dt,upliftAdditions:ht,hideProductCheckbox:L,hideVariantCheckbox:U,hideProductVariants:G,pickerType:q,onProductDetailClick:X,showProductDetailInfoIcon:Y},t))):nt?e(y,{limit:10}):e(v,{title:"No products to show",subtitle:ot.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})}))]})};export{R as ProductsScreen};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FbStatusFetcherReturn, SelectedItems } from '.';
+import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+interface RearrangeScreenInterface {
+    selectedCollections: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    rearrangeViewType: 'grid' | 'list';
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    storeId: string;
+    fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
+}
+/**
+ * Screen will be opened on two conditions -
+ * 1. When startupScreen is 'rearrange'- Here, this screen will be opened as beginning.
+     2. When rearrangeAfterSelectionEnabled is true - Here instead of selected products screen, rearrange screen will be opened
+ */
+export declare const RearrangeScreen: (props: RearrangeScreenInterface) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r,useEffect as s}from"react";import{DragDropContext as c}from"react-beautiful-dnd";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as a}from"./emptyState.js";import{parseSelectedVariantsToArray as d}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as p}from"./style.js";import{fetchFbStatusCollection as m}from"./utility.js";import{VariantsList as u,VariantsGrid as f}from"./variantComponents.js";const h=h=>{const{selectedCollections:j,selectedCollectionsDispatch:y,setScreen:S,rearrangeViewType:g,outOfStockAction:b,scrollContainerRef:C,storeId:O,fbStatusFetcher:v}=h,[V,k]=r(d(j));s((()=>{k(d(j))}),[j]),s((()=>{var t;null===(t=null==C?void 0:C.current)||void 0===t||t.scrollTo({top:0}),m(j,O,y,v,"update")}),[]);return t(c,Object.assign({onDragEnd:t=>{if(!t.destination)return;const e=V,[o]=e.splice(t.source.index,1);e.splice(t.destination.index,0,o),e.forEach(((t,e)=>{t.displayOrder=e})),k(e)}},{children:[t(p,{children:[e(n,{Icon:o,width:16,height:16,color:i.content.secondary,onClick:()=>{S("collections")}}),e(l,Object.assign({color:i.content.secondary},{children:"All Products"}))]}),Object.keys(j).length>0?"list"===g?e(u,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:y,outOfStockAction:b}):e(f,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:y}):e(a,{title:"No Products Selected",subtitle:"Selected products will appear here"})]}))};export{h as RearrangeScreen};