@bikdotai/bik-component-library 0.0.289-beta--switch → 0.0.289

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

@@ -0,0 +1,128 @@
+import e from"styled-components";import{TitleMedium as i}from"../TypographyStyle.js";var t;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(t||(t={})),e.div`
+	position: fixed;
+	top: 0;
+	left: 0;
+	cursor: default;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	background-color: rgba(0, 0, 0, 0.5);
+	align-items: center;
+	justify-content: center;
+`,e.div`
+	background-color: #fff;
+	width: 1032px;
+	height: auto;
+	max-height: 600px;
+	border-radius: 4px;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+`,e.div`
+	display: flex;
+	justify-content: space-between;
+	flex-direction: row;
+	gap: 20px;
+	width: 1032px;
+`,e(i)`
+	padding: 6px 6px 20px 6px;
+`,e.div`
+	padding: 6px 6px 20px 6px;
+`;const o=e.div`
+	display: grid;
+	grid-template-columns: repeat(
+		${e=>e.mediaType==t.POST?6:8},
+		${e=>e.mediaType==t.POST?156:113}px
+	);
+	grid-gap: 16px;
+	overflow-y: scroll;
+	height: calc(564px - 140px);
+	overflow-y: auto;
+	padding: 0 24px;
+
+	/* Hide scrollbar by default */
+	&::-webkit-scrollbar {
+		width: 0.5em;
+	}
+	/* Show scrollbar on hover */
+	&:hover::-webkit-scrollbar {
+		width: 0.5em;
+	}
+`,p=e.div`
+	position: relative;
+	cursor: pointer;
+	height: ${e=>e.mediaType==t.POST?155:180}px;
+	padding: 2px;
+	border-radius: 4px;
+	border: 2px solid transparent;
+
+	img {
+		object-fit: cover;
+		border-radius: 4px;
+	}
+
+	.overlay {
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: ${e=>e.mediaType==t.POST?148:104}px;
+		height: ${e=>e.mediaType==t.POST?148:172}px;
+		background-color: rgba(255, 255, 255, 0.9);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		opacity: 0;
+		transition: opacity 0.2s ease-in-out;
+		border-radius: 4px;
+
+		a {
+			text-decoration: none;
+		}
+	}
+
+	.overlay__caption {
+		text-align: center;
+		background: #fafafa;
+		padding: 10px 20px;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.overlay__redirection {
+		display: flex;
+		justify-content: center;
+		gap: 5px;
+		padding: 10px;
+	}
+
+	&:hover .overlay {
+		opacity: 1;
+	}
+
+	&.selected {
+		border: 2px solid #731dcf;
+	}
+`;e.div`
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	padding-top: 12px;
+	justify-content: space-between;
+	border-top: 1px solid #e0e0e0;
+`,e.div`
+	flex: 1;
+	padding-top: 10px;
+	display: flex;
+	justify-content: flex-start;
+`,e.div`
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	gap: 10px;
+`;export{p as StyledProduct,o as StyledProductGrid};

package/dist/esm/components/postPicker/index.d.ts

@@ -0,0 +1 @@
+export * from './postPicker';

package/dist/esm/components/postPicker/postPicker.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export declare enum MEDIA_TYPES {
+    STORY = "story",
+    POST = "post",
+    REEL = "reel"
+}
+export type Media = {
+    imageUrl: string;
+    redirectionUrl: string;
+    overlayCaption: string;
+    id: string;
+    timestamp?: string;
+};
+export type PostPickerProps = {
+    title: string;
+    showModal: boolean;
+    onClose: () => void;
+    onSelect: (Media: Media[]) => void;
+    media: Media[];
+    mediaType: MEDIA_TYPES;
+    previouslySelected?: Media[];
+    limit?: number;
+    selected: Media[];
+    showFilter?: boolean;
+};
+export declare enum DateKeys {
+    'Today' = "Today",
+    '7_Days' = "7",
+    '30_Days' = "30",
+    'custom' = "custom",
+    'Yesterday' = "Yesterday"
+}
+export interface DateOptionI {
+    label: string;
+    value: string;
+    key: DateKeys;
+    typeValue?: [Date, Date];
+    selectedRange?: [Date, Date];
+    isCustom?: boolean;
+    dateRangeSelectionOptions?: {
+        selectRange: boolean;
+        maxDate?: Date;
+        minDate?: Date;
+    };
+}
+export declare const dateOptions: DateOptionI[];
+export declare const PostPicker: React.FC<PostPickerProps>;

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

@@ -0,0 +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"@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,L]=i(null!==(B=S.previouslySelected)&&void 0!==B?B:[]),[V,G]=i(""),[_,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)),L(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&&G("")}),[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):G(`Please select a ${S.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>S.onClose()},footerLeftCustomElement:V?e(s,{tagText:V,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"}))]})),_?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 L((()=>P.find((t=>t.id===e.id))?P.filter((t=>t.id!==e.id)):!S.limit||P.length<S.limit?[...P,e]:(G(`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};

package/dist/esm/components/product-picker/ProductPicker.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledZeroState: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledProductPickerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/product-picker/ProductPicker.styled.js

@@ -0,0 +1 @@
+import c from"@emotion/styled/base";import{DEFAULT_THEME as d}from"../../constants/Theme.js";const X=c("div","production"===process.env.NODE_ENV?{target:"e1h66m5c1"}:{target:"e1h66m5c1",label:"StyledZeroState"})("height:364px;background-color:",d.colorsV2.surface.standard,";display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column;.icon__container{height:48px;width:48px;border-radius:50%;background-color:",d.colorsV2.background.base,";display:flex;align-items:center;justify-content:center;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByb2R1Y3RQaWNrZXIuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMEMiLCJmaWxlIjoiUHJvZHVjdFBpY2tlci5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBERUZBVUxUX1RIRU1FIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9UaGVtZVwiO1xyXG5leHBvcnQgY29uc3QgU3R5bGVkWmVyb1N0YXRlID0gc3R5bGVkLmRpdiBgXG5cdGhlaWdodDogMzY0cHg7XG5cdGJhY2tncm91bmQtY29sb3I6ICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5zdXJmYWNlLnN0YW5kYXJkfTtcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGdhcDogOHB4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXG5cdC5pY29uX19jb250YWluZXIge1xuXHRcdGhlaWdodDogNDhweDtcblx0XHR3aWR0aDogNDhweDtcblx0XHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQuYmFzZX07XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHR9XG5gO1xyXG5leHBvcnQgY29uc3QgU3R5bGVkUHJvZHVjdFBpY2tlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRtYXJnaW4tdG9wOiA4cHg7XG5cdC5wb3N0X193cmFwcGVyIHtcblx0XHRtYXJnaW4tdG9wOiA4cHg7XG5cdFx0Ym9yZGVyLXRvcDogMXB4IHNvbGlkICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5zdHJva2UucHJpbWFyeX07XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLmJhY2tncm91bmQud2FybmluZy5saWdodH07XG5cdFx0cGFkZGluZzogMTJweCAxNnB4O1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRnYXA6IDE2cHg7XG5cdH1cblxuXHQucG9zdF9fdGh1bWJuYWlsIHtcblx0XHRoZWlnaHQ6IDY4cHg7XG5cdFx0d2lkdGg6IDY4cHg7XG5cdFx0b2JqZWN0LWZpdDogY292ZXI7XG5cdFx0Ym9yZGVyLXJhZGl1czogNHB4O1xuXHR9XG5cdC5wb3N0X19pbmZvLXdyYXBwZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0Z2FwOiA4cHg7XG5cdFx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0XHR3aWR0aDogMzUwcHg7XG5cdH1cblx0LmxvYWRlcl9fd3JhcHBlciB7XG5cdFx0aGVpZ2h0OiAzNTBweDtcblx0XHR3aWR0aDogMTAwJTtcblx0XHRtYXJnaW4tdG9wOiA0cHg7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHR9XG5cdC5wcm9kdWN0X193cmFwcGVyIHtcblx0XHRwYWRkaW5nOiAxMnB4O1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdGdhcDogMTlweDtcblx0XHRib3JkZXItYm90dG9tOiAxcHggc29saWQgJHtERUZBVUxUX1RIRU1FLmNvbG9yc1YyLnN0cm9rZS5wcmltYXJ5fTtcblx0fVxuXHQucHJvZHVjdF9faW5mby13cmFwcGVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGdhcDogMTZweDtcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdG9yZGVyOiAyO1xuXHR9XG5cdC5wcm9kdWN0X19pbWFnZSB7XG5cdFx0aGVpZ2h0OiA0MHB4O1xuXHRcdHdpZHRoOiA0MHB4O1xuXHRcdG9iamVjdC1maXQ6IGNvdmVyO1xuXHRcdGJvcmRlci1yYWRpdXM6IDRweDtcblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9UHJvZHVjdFBpY2tlci5zdHlsZWQuanMubWFwIl19 */")),l=c("div","production"===process.env.NODE_ENV?{target:"e1h66m5c0"}:{target:"e1h66m5c0",label:"StyledProductPickerContainer"})("margin-top:8px;.post__wrapper{margin-top:8px;border-top:1px solid ",d.colorsV2.stroke.primary,";background-color:",d.colorsV2.background.warning.light,";padding:12px 16px;display:flex;align-items:center;gap:16px;}.post__thumbnail{height:68px;width:68px;object-fit:cover;border-radius:4px;}.post__info-wrapper{display:flex;gap:8px;flex-direction:column;width:350px;}.loader__wrapper{height:350px;width:100%;margin-top:4px;display:flex;align-items:center;justify-content:center;}.product__wrapper{padding:12px;display:flex;flex-direction:row;align-items:center;gap:19px;border-bottom:1px solid ",d.colorsV2.stroke.primary,";}.product__info-wrapper{display:flex;gap:16px;align-items:center;order:2;}.product__image{height:40px;width:40px;object-fit:cover;border-radius:4px;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByb2R1Y3RQaWNrZXIuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQnVEIiwiZmlsZSI6IlByb2R1Y3RQaWNrZXIuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgREVGQVVMVF9USEVNRSB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IFN0eWxlZFplcm9TdGF0ZSA9IHN0eWxlZC5kaXYgYFxuXHRoZWlnaHQ6IDM2NHB4O1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAke0RFRkFVTFRfVEhFTUUuY29sb3JzVjIuc3VyZmFjZS5zdGFuZGFyZH07XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRnYXA6IDhweDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblxuXHQuaWNvbl9fY29udGFpbmVyIHtcblx0XHRoZWlnaHQ6IDQ4cHg7XG5cdFx0d2lkdGg6IDQ4cHg7XG5cdFx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRcdGJhY2tncm91bmQtY29sb3I6ICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5iYWNrZ3JvdW5kLmJhc2V9O1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0fVxuYDtcclxuZXhwb3J0IGNvbnN0IFN0eWxlZFByb2R1Y3RQaWNrZXJDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0bWFyZ2luLXRvcDogOHB4O1xuXHQucG9zdF9fd3JhcHBlciB7XG5cdFx0bWFyZ2luLXRvcDogOHB4O1xuXHRcdGJvcmRlci10b3A6IDFweCBzb2xpZCAke0RFRkFVTFRfVEhFTUUuY29sb3JzVjIuc3Ryb2tlLnByaW1hcnl9O1xuXHRcdGJhY2tncm91bmQtY29sb3I6ICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5iYWNrZ3JvdW5kLndhcm5pbmcubGlnaHR9O1xuXHRcdHBhZGRpbmc6IDEycHggMTZweDtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0Z2FwOiAxNnB4O1xuXHR9XG5cblx0LnBvc3RfX3RodW1ibmFpbCB7XG5cdFx0aGVpZ2h0OiA2OHB4O1xuXHRcdHdpZHRoOiA2OHB4O1xuXHRcdG9iamVjdC1maXQ6IGNvdmVyO1xuXHRcdGJvcmRlci1yYWRpdXM6IDRweDtcblx0fVxuXHQucG9zdF9faW5mby13cmFwcGVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGdhcDogOHB4O1xuXHRcdGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG5cdFx0d2lkdGg6IDM1MHB4O1xuXHR9XG5cdC5sb2FkZXJfX3dyYXBwZXIge1xuXHRcdGhlaWdodDogMzUwcHg7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0bWFyZ2luLXRvcDogNHB4O1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0fVxuXHQucHJvZHVjdF9fd3JhcHBlciB7XG5cdFx0cGFkZGluZzogMTJweDtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRnYXA6IDE5cHg7XG5cdFx0Ym9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7REVGQVVMVF9USEVNRS5jb2xvcnNWMi5zdHJva2UucHJpbWFyeX07XG5cdH1cblx0LnByb2R1Y3RfX2luZm8td3JhcHBlciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRnYXA6IDE2cHg7XG5cdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0XHRvcmRlcjogMjtcblx0fVxuXHQucHJvZHVjdF9faW1hZ2Uge1xuXHRcdGhlaWdodDogNDBweDtcblx0XHR3aWR0aDogNDBweDtcblx0XHRvYmplY3QtZml0OiBjb3Zlcjtcblx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVByb2R1Y3RQaWNrZXIuc3R5bGVkLmpzLm1hcCJdfQ== */"));export{l as StyledProductPickerContainer,X as StyledZeroState};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProductPickerProps } from "./type";
+export declare const ProductPickerContent: React.FC<ProductPickerProps>;
+export declare const PricePleaseProductPicker: React.FC<ProductPickerProps>;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../node_modules/lodash.debounce/index.js";import{useState as s,useCallback as r,useEffect as n}from"react";import{PageLoader as c}from"../bik-layout/PageLoader.js";import{CheckBox as l}from"../checkBox/CheckBox.js";import{Input as i}from"../input/Input.js";import{StyledModal as d}from"../modals/styledModal.js";import{StyledProductPickerContainer as a,StyledZeroState as p}from"./ProductPicker.styled.js";import{BodyPrimary as m,Caption as h,TitleRegular as u,BodySecondary as g}from"../TypographyStyle.js";import v from"../../utils/DateUtils.js";import{DEFAULT_THEME as f}from"../../constants/Theme.js";import j from"../../assets/icons/alert_triangle.svg.js";import y from"../../assets/icons/search.svg.js";const P="https://jkfenner.com/wp-content/uploads/2019/11/default.jpg",b=o=>{let{text:s,styleProps:r}=o;return e(p,{children:[t("div",Object.assign({className:"icon__container",style:Object.assign({},r)},{children:t(j,{width:24,height:24,color:f.colorsV2.content.secondary})})),t(u,{children:"No results found"}),t(g,Object.assign({style:{color:f.colorsV2.content.secondary,textAlign:"center"}},{children:`Sorry we could not find any results for "${s}"`}))]})},x=n=>{var d,p,g,j;const x=n.instaPost?v.dateFormat(new Date(n.instaPost.timestamp),"•",!0):"",[_,O]=s(n.products),[w,C]=s(!1),[S,N]=s(""),V=r(o((e=>{e?(O([]),n.onSearchKeyChange(e).then((e=>{O(e),C(!1)}))):(O(n.products),C(!1))}),700),[]);return e(a,{children:[n.instaPost&&e("div",Object.assign({className:"post__wrapper"},{children:[t("img",{alt:"Ig Media",onError:e=>{e.target.onerror=null,e.target.src=P},src:null===(d=n.instaPost)||void 0===d?void 0:d.media_url,className:"post__thumbnail"}),e("div",Object.assign({className:"post__info-wrapper"},{children:[t(m,Object.assign({style:{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap",color:n.instaPost.caption?f.colorsV2.content.primary:f.colorsV2.content.secondary}},{children:(null===(p=n.instaPost)||void 0===p?void 0:p.caption)?null===(g=n.instaPost)||void 0===g?void 0:g.caption:"No caption"})),t(h,Object.assign({style:{color:f.colorsV2.content.placeholder}},{children:x}))]}))]})),t("div",Object.assign({style:{borderTop:n.instaPost?`1px solid ${f.colorsV2.stroke.primary}`:"none",borderBottom:`1px solid ${f.colorsV2.stroke.primary}`,padding:n.instaPost?"16px":"0px 16px 16px 16px"}},{children:t(i,{placeholder:null!==(j=n.searchPlaceholder)&&void 0!==j?j:"Search products..",onChangeText:e=>{var t;N(e),(null===(t=e.trim())||void 0===t?void 0:t.length)>0?(C(!0),V(e)):(C(!1),O(n.products))},rightIcon:{icon:y}})})),e("div",Object.assign({style:{maxHeight:350,overflowY:"scroll"}},{children:[w&&t("div",Object.assign({className:"loader__wrapper"},{children:t(c,{})})),0!==_.length||w?_.map((o=>{var s;const r=n.selectedProducts.find((e=>e.id===o.id));return e("div",Object.assign({className:"product__wrapper"},{children:[e("div",Object.assign({className:"product__info-wrapper"},{children:[t("img",{alt:"Product",onError:e=>{e.target.onerror=null,e.target.src=P},src:null!==(s=o.image)&&void 0!==s?s:P,className:"product__image"}),t(u,{children:o.name})]})),t("div",Object.assign({style:{order:1}},{children:t(l,{isChecked:void 0!==r,onValueChange:e=>{((e,t)=>{const o=n.selectedProducts.find((e=>e.id===t.id));if(e&&!o){const e=[...n.selectedProducts,t];n.setSelectedProducts(e)}else if(o){const e=[...n.selectedProducts];let o=-1;n.selectedProducts.forEach(((e,s)=>{e.id===t.id&&(o=s)})),e.splice(o,1),n.setSelectedProducts(e)}})(e,o)}})}))]}),o.id)})):t(b,{text:S})]}))]})},_=e=>{var o;const[r,c]=s([]);return n((()=>{var t;c(null!==(t=e.selectedProducts)&&void 0!==t?t:[])}),[null===(o=e.selectedProducts)||void 0===o?void 0:o.length]),t(d,Object.assign({open:e.show,onClose:()=>{e.onClose()},footerLeftCustomElement:r.length>10?t(h,Object.assign({style:{color:f.colorsV2.content.negative}},{children:"Can't add more than 10 products"})):t(h,Object.assign({style:{color:f.colorsV2.content.placeholder}},{children:r?`${r.length} selected`:""})),headingTitle:e.title,primaryButton:{disabled:r.length>10||0===r.length,buttonType:"primary",buttonText:"Select",size:"small",onClick:()=>{e.setSelectedProducts(r),e.onClose()}},secondaryButton:e.secondaryButtonProps,footerShadow:!0},{children:t(x,Object.assign({},e,{selectedProducts:r,setSelectedProducts:c}))}))};export{_ as PricePleaseProductPicker,x as ProductPickerContent};

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

@@ -0,0 +1 @@
+export * from './ProductPickerModal';

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

@@ -0,0 +1,57 @@
+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[];
+    onClose: () => void;
+    title: string;
+    onSave: (productIds: Product[]) => void;
+    onSearchKeyChange: (key: string) => Promise<Product[]>;
+    instaPost?: IInstaPost;
+    searchPlaceholder?: string;
+    selectedProducts: Product[];
+    setSelectedProducts: React.Dispatch<React.SetStateAction<Product[]>>;
+    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 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/collectionScreen.d.ts

@@ -0,0 +1,26 @@
+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) => CollectionFetcherReturn;
+    storeId: string;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setCollectionId: 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;
+}
+export declare const CollectionsScreen: (props: CollectionsScreenInterface) => JSX.Element;
+export {};

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

@@ -0,0 +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};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface EmptyStateProps {
+    title: string;
+    subtitle: string;
+}
+export declare const EmptyState: ({ title, subtitle }: EmptyStateProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+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 i}from"../../constants/Theme.js";import{TitleRegular as n,BodySecondary as s}from"../TypographyStyle.js";const c=r=>{let{title:c,subtitle:l}=r;return t(m,{children:[e(o,{width:48,height:48}),e(n,Object.assign({style:{marginTop:8}},{children:c})),e(s,Object.assign({style:{color:i.content.secondary,marginTop:4}},{children:l}))]})},m=r.div`
+	height: 400px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+`;export{c as EmptyState};

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

@@ -0,0 +1 @@
+export * from './modal';

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

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export interface ProductVariant {
+    name: string;
+    price: string;
+    image: string;
+}
+export interface Product {
+    name: string;
+    image: string;
+    variants?: {
+        [key: string]: ProductVariant;
+    };
+}
+export interface Collection {
+    name: string;
+    image: string;
+    isSmartCollection: boolean;
+    products?: {
+        [key: string]: Product;
+    };
+}
+export type SelectedItems = {
+    [key: string]: Collection;
+};
+export type CollectionFetcherReturn = Promise<{
+    collections: {
+        [key: string]: {
+            image: string;
+            name: string;
+            isSmartCollection: string;
+        };
+    };
+}>;
+export type ProductFetcherReturn = Promise<{
+    [key: string]: Product;
+}>;
+export interface ProductPickerInterface {
+    hideGlobalSearch?: boolean;
+    hideInCollectionSearch?: boolean;
+    customCollectionRestriction?: boolean;
+    searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => Promise<string[]>;
+    searchFetcher: (storeId: string, query: string) => Promise<SelectedItems>;
+    collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    storeId: string;
+    selectedItems: SelectedItems;
+    onAdd: (items: SelectedItems, total: number) => void;
+    onClose: () => void;
+    visible: boolean;
+    zIndex?: number;
+    limit?: number;
+    hideCollectionCheckbox?: boolean;
+    hideProductCheckbox?: boolean;
+}
+export declare const ProductPickerModal: (props: ProductPickerInterface) => JSX.Element;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useEffect as l}from"react";import{COLORS as i}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 p}from"../tag/Tag.js";import{CollectionsScreen as u}from"./collectionScreen.js";import{ProductsScreen as m}from"./productScreen.js";import{collectionsReducer as C,selectedColectionsReducer as v,CollectionIdContext as b}from"./reducers.js";import{SearchScreen as g}from"./searchScreen.js";import{SelectedScreen as y}from"./selectedScreen.js";import{ContainerStyle as f,ScrollContainerStyle as j}from"./style.js";const S=S=>{const{storeId:x,selectedItems:I,onClose:P,visible:k,zIndex:T,limit:F,hideCollectionCheckbox:D,hideProductCheckbox:E}=S,[O,R]=r(C,{}),[w,B]=s("collections"),[z,G]=s(""),[L,$]=s(0),[A,H]=s(!1),[M,Y]=s(0),[q,J]=s(""),[K,N]=s(!1),[Q,U]=s(!1),[V,W]=s(),[X,Z]=r(v,Object.keys(I).length>0?I:{});l((()=>{H(!0),U(!0),S.collectionFetcher(L,x).then((e=>{R({type:"fetched",data:(null==e?void 0:e.collections)||{}}),H(!1),$((e=>e+1)),U(!1)})).catch()}),[]),l((()=>{let e=0;Object.keys(X||[]).forEach((t=>{var o;Object.keys((null===(o=X[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=X[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),Y(e)})),l((()=>{var e;z&&!(null===(e=null==O?void 0:O[z])||void 0===e?void 0:e.products)&&(H(!0),S.productFetcher(z,x).then((e=>{Object.keys(e).length&&R({type:"productsFetched",data:{collectionId:z,products:e}}),H(!1)})).catch())}),[z]),l((()=>{const e=setTimeout((()=>{q.length&&(N(!0),S.searchFetcher(x,q).then((e=>{W(e),B("searchProducts"),H(!1),N(!1)})))}),800);return()=>clearTimeout(e)}),[q]);const _=()=>{Z({type:"reset",data:{}})};return e(a,Object.assign({zIndex:T,open:k,onClose:()=>{P(),_()},headingTitle:"collections"===w||"products"===w?"Select Products":"view"===w?"Selected Products":"searchProducts"===w?"Searched Products":void 0,footerShadow:!0,centralContainerStyles:{width:"480px"},primaryButton:{buttonText:A?"Loading...":"Add",disabled:A||M<1||F&&M>F||!1,onClick:()=>{S.onAdd(X,M),_()}},footerLeftCustomElement:F&&M>F?e(p,{tagText:`You can only select ${F} products`,type:"negative"}):e(n,M>0?{onClick:()=>{B("view")},buttonText:`${M} products selected`,buttonType:"tertiaryGray"}:{disabled:!0,buttonText:`${M} products selected`,buttonType:"tertiaryGray"})},{children:t(f,{children:[!S.hideGlobalSearch&&e(o,{children:("collections"===w||"searchProducts"===w)&&e("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:e(d,{noErrorHint:!0,rightIcon:{icon:()=>K?e(h,{size:"small",color:i.content.primary}):e(c,{})},id:"listInput",height:"24px",type:"text",value:q,onChangeText:e=>{e.length&&e.trim().length&&J(e)},placeholder:"Search products..."})}))}),t(j,{children:["collections"===w&&e(u,{customCollectionRestriction:S.customCollectionRestriction,dataLoading:Q,collections:O,selectedCollectionsDispatch:Z,setCollectionId:G,setScreen:B,selectedCollections:X,collectionFetcher:S.collectionFetcher,storeId:x,collectionsDispatch:R,setSaveDisabled:H,pagingControls:{curPage:L,setCurPage:$},hideCollectionCheckbox:D}),"products"===w&&z&&e(b.Provider,Object.assign({value:z},{children:e(m,{hideInCollectionSearch:S.hideInCollectionSearch,customCollectionRestriction:S.customCollectionRestriction,productFetcher:S.productFetcher,setScreen:B,storeId:x,data:O[z],collectionsDispatch:R,selectedCollectionsDispatch:Z,selectedData:X,setSaveDisabled:H,searchInCollectionFetcher:S.searchInCollectionFetcher,hideProductCheckbox:E})})),"view"===w&&e(y,{selectedCollections:X||{},selectedCollectionsDispatch:Z,setScreen:B,collections:O}),"searchProducts"===w&&e(g,{customCollectionRestriction:S.customCollectionRestriction,selectedCollections:X||{},searchedCollections:V||{},selectedCollectionsDispatch:Z,setScreen:B,collections:O,onBackPress:()=>{J(""),W({})}})]})]})}))};export{S as ProductPickerModal};

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { Collection, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
+import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+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) => Promise<string[]>;
+    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    storeId: string;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+    hideProductCheckbox?: boolean;
+}
+export declare const ProductsScreen: (props: ProductsScreenInterface) => JSX.Element;
+interface ProductGroupInterface {
+    collectionId: string;
+    productId: string;
+    data: Product;
+    selectedData: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    viewOnly: boolean;
+    isProductPartiallyChecked?: boolean;
+    upliftAdditions: any;
+    hideProductCheckbox?: boolean;
+}
+export declare const ProductGroup: (props: ProductGroupInterface) => 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;
+}
+export declare const ProductCard: (props: ProductCardInterface) => JSX.Element;
+export {};

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

@@ -0,0 +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 d from"../../assets/icons/box.svg.js";import c from"../../assets/icons/search.svg.js";import{cloneDeep as l}from"lodash";import{useContext as r,useState as n,useEffect as s}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{Input as p}from"../input/Input.js";import{BikShimmer as v}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as m}from"../shimmer-image/ShimmerImage.js";import{Spinner as y}from"../spinner/Spinner.js";import{BodyCaption as f,TitleRegular as g}from"../TypographyStyle.js";import{truncate as j}from"./collectionScreen.js";import{EmptyState as b}from"./emptyState.js";import{CollectionIdContext as I}from"./reducers.js";import{ProductScreenHeader as k,ProductScreenCollectionCardStyle as C,ProductCardStyle as O}from"./style.js";import{liftTheStateUp as x}from"./utility.js";const S=o=>{const m=r(I),{data:j,collectionsDispatch:O,selectedData:S,selectedCollectionsDispatch:E,productFetcher:w,storeId:D,setScreen:A,setSaveDisabled:B,hideInCollectionSearch:T,customCollectionRestriction:V,hideProductCheckbox:F}=o,[R,U]=n(""),[W,z]=n(!1),[H,N]=n(j);s((()=>{const t=setTimeout((()=>{R.length?(z(!0),o.searchInCollectionFetcher(D,m,R).then((t=>{var e;const o=l(j);o.products={};for(const i of t)(null===(e=null==j?void 0:j.products)||void 0===e?void 0:e[i])&&(o.products[i]=j.products[i]);N(o),B(!1),z(!1)}))):N(j)}),800);return()=>clearTimeout(t)}),[R]);const _=!!V&&j.isSmartCollection,q=t=>{var e,o,i,d,c,l,r,n;let s=0,a=0;return!!((null===(o=null===(e=null==S?void 0:S[m])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(c=Object.keys((null===(d=null===(i=null==j?void 0:j.products)||void 0===i?void 0:i[t])||void 0===d?void 0:d.variants)||[]))||void 0===c||c.forEach((()=>a++)),Object.keys((null===(n=null===(r=null===(l=null==S?void 0:S[m])||void 0===l?void 0:l.products)||void 0===r?void 0:r[t])||void 0===n?void 0:n.variants)||[]).forEach((()=>s++)),s>0&&a!==s))};s((()=>{(null==j?void 0:j.products)||G()}),[]);const G=()=>{B(!0),z(!0),w(m,D).then((t=>{Object.keys(t).length&&(O({type:"productsFetched",data:{collectionId:m,products:t}}),N(Object.assign(Object.assign({},H),{products:t}))),B(!1),z(!1)})).catch()},J=(t,e)=>{const o=x(e,j);E({type:t,data:Object.assign(Object.assign({},o),{isRestricted:V})})};return t("div",{children:[t(k,{children:[e(h,{Icon:i,height:16,onClick:()=>{A("collections")}}),e(f,Object.assign({style:{color:a.content.secondary}},{children:j.name}))]}),!T&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(p,{noErrorHint:!0,rightIcon:{icon:()=>W&&R.length?e(y,{size:"small",color:a.content.primary}):e(c,{})},id:"listInput",height:"24px",type:"text",value:R,onChangeText:t=>{t.length&&t.trim().length&&U(t)},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==H?void 0:H.products)||[]).length>0&&!_&&!R.length&&!F&&t(C,{children:[e(u,{isChecked:!!(null==S?void 0:S[m]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(S[t]){const d=null==j?void 0:j.products;d&&Object.keys(d).forEach((t=>{var e;const i=null===(e=d[t])||void 0===e?void 0:e.variants;i&&Object.keys(i).forEach((t=>o+=1))}));const c=null===(e=S[t])||void 0===e?void 0:e.products;return c&&Object.keys(c).forEach((t=>{var e;const o=null===(e=c[t])||void 0===e?void 0:e.variants;o&&Object.keys(o).forEach((()=>i+=1))})),i>0&&o!==i}return!1})(m),onValueChange:function(t){E(t?{type:"selected",data:{id:m,val:j}}:{type:"unselected",data:{id:m}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(d,{})})),e(g,{children:"All Products"})]}),Object.keys((null==H?void 0:H.products)||[]).length?Object.keys(H.products||[]).map((t=>e(P,{collectionId:m,isProductPartiallyChecked:q(t),productId:t,data:H.products[t],selectedData:S,selectedCollectionsDispatch:E,viewOnly:!!_,upliftAdditions:J,hideProductCheckbox:F},t))):W?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e(v,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e(b,{title:"No products to show",subtitle:R.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})]})]})},P=o=>{const{collectionId:i,productId:d,data:c,selectedData:l,selectedCollectionsDispatch:r,viewOnly:n,upliftAdditions:s,isProductPartiallyChecked:a,hideProductCheckbox:u}=o,h=t=>{var e,o,c,r,n,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[d]))return!1;return!!(null===(s=null===(n=null===(r=null===(c=null==l?void 0:l[i])||void 0===c?void 0:c.products)||void 0===r?void 0:r[d])||void 0===n?void 0:n.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(E,{isVariant:!1,data:c,productId:d,collectionId:i,isSelected:!!(null===(v=null===(p=null==l?void 0:l[i])||void 0===p?void 0:p.products)||void 0===v?void 0:v[d]),isPartiallyChecked:a,selectedCollectionsDispatch:r,upliftAdditions:s,viewOnly:n,hideProductCheckbox:u},d),Object.keys(c.variants||[]).map((t=>e(E,{isVariant:!0,data:c.variants[t],variantId:t,productId:d,viewOnly:n,upliftAdditions:s,collectionId:i,isSelected:h(t),selectedCollectionsDispatch:r},t)))]});var p,v},E=i=>{const{isVariant:d,data:c,productId:l,collectionId:r,variantId:n,isSelected:s,selectedCollectionsDispatch:a,viewOnly:h,upliftAdditions:p,isPartiallyChecked:v,hideProductCheckbox:y}=i;return t(O,Object.assign({isVariant:d},{children:[y||h?e(o,{}):e(u,{isChecked:s,isPartiallyChecked:v||!1,onValueChange:function(t){d?t?p("variantSelected",{productId:l,variantId:n,collectionId:r,variant:c}):a({type:"variantUnselected",data:{productId:l,variantId:n,collectionId:r}}):t?p("productSelected",{productId:l,collectionId:r,product:c}):a({type:"productUnselected",data:{productId:l,collectionId:r}})}}),e("div",{children:e(m,{width:40,height:40,imageUrl:c.image,alt:"Item",borderRadius:4})}),e(g,{children:j(c.name,40,!0)})]}))};export{E as ProductCard,P as ProductGroup,S as ProductsScreen};

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Collection, SelectedItems } from '.';
+export interface SelectedCollectionsActions {
+    type: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export declare function selectedColectionsReducer(collections: SelectedItems, action: SelectedCollectionsActions): SelectedItems;
+export interface CollectionsActions {
+    type: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export declare function collectionsReducer(collections: Collection, action: CollectionsActions): any;
+export declare const CollectionIdContext: import("react").Context<string>;

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

@@ -0,0 +1 @@
+import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function d(a,d){var e,o,c,s,r,l;let i={},u="",n="",p="";switch(d.type){case"selected":return i=t(a),d.data.val.isSmartCollection&&(d.data.isRestricted&&(i={}),i.isCustom=!0),i[d.data.id]=d.data.val,i;case"unselected":return i=t(a),(null==i?void 0:i.isCustom)&&(i.isCustom=!1),delete i[d.data.id],i;case"productUnselected":return i=t(a),u=d.data.productId,n=d.data.collectionId,delete i[n].products[u],Object.keys(i[n].products).length||((null==i?void 0:i.isCustom)&&(i.isCustom=!1),delete i[n]),i;case"productSelected":return i=t(a),u=d.data.productId,n=d.data.collectionId,(null===(e=d.data.catalogOnlyData)||void 0===e?void 0:e.isSmartCollection)&&(d.data.isRestricted&&(i={}),i.isCustom=!0),(null==i?void 0:i[n])||(i[n]=d.data.catalogOnlyData,i[n].products={}),i[n].products[u]=d.data.product,i;case"variantSelected":return i=t(a),u=d.data.productId,n=d.data.collectionId,p=d.data.variantId,(null===(o=d.data.catalogOnlyData)||void 0===o?void 0:o.isSmartCollection)&&(d.data.isRestricted&&(i={}),i.isCustom=!0),(null==i?void 0:i[n])||(i[n]=d.data.catalogOnlyData,i[n].products={},i[n].products[u]=d.data.productOnlyData,i[n].products[u].variants={}),(null===(s=null===(c=null==i?void 0:i[n])||void 0===c?void 0:c.products)||void 0===s?void 0:s[u])||((null===(r=null==i?void 0:i[n])||void 0===r?void 0:r.products)||(i[n].products={}),i[n].products[u]=d.data.productOnlyData,i[n].products[u].variants={}),i[n].products[u].variants[p]=d.data.variant,i;case"variantUnselected":return i=t(a),u=d.data.productId,n=d.data.collectionId,p=d.data.variantId,delete i[n].products[u].variants[p],Object.keys(i[n].products[u].variants).length||(delete i[n].products[u],Object.keys(i[n].products).length||((null===(l=i[n])||void 0===l?void 0:l.isSmartCollection)&&(i.isCustom=!1),delete i[n])),i;case"reset":return{};default:return a}}function e(t,a){let d={};switch(a.type){case"fetched":return d=Object.assign({},a.data),d;case"productsFetched":return d=Object.assign({},t),d[a.data.collectionId].products=a.data.products,d;case"paged":return d=Object.assign(Object.assign({},t),a.data),d;default:return{}}}const o=a("");export{o as CollectionIdContext,e as collectionsReducer,d as selectedColectionsReducer};

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Collection, SelectedItems } from '.';
+import { SelectedCollectionsActions } from './reducers';
+interface SearchScreenInterface {
+    customCollectionRestriction?: boolean;
+    selectedCollections: SelectedItems;
+    searchedCollections: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    collections: {
+        [key: string]: Collection;
+    };
+    onBackPress: () => void;
+}
+export declare const SearchScreen: (props: SearchScreenInterface) => JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsxs as o,jsx as t,Fragment as e}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import{IconButton as l}from"../icon-button/IconButton.js";import{BodyCaption as r}from"../TypographyStyle.js";import{EmptyState as s}from"./emptyState.js";import{ProductGroup as c}from"./productScreen.js";import{SelectedScreenHeader as d}from"./style.js";import{liftTheStateUp as n}from"./utility.js";const u=u=>{const{customCollectionRestriction:v,selectedCollections:a,searchedCollections:p,selectedCollectionsDispatch:m,setScreen:h,collections:f,onBackPress:j}=u,y=(o,t)=>{var e,i,l,r,s,c,d,n,u;let v=0,p=0;return!!((null===(i=null===(e=null==a?void 0:a[o])||void 0===e?void 0:e.products)||void 0===i?void 0:i[t])&&(null===(c=Object.keys((null===(s=null===(r=null===(l=null==f?void 0:f[o])||void 0===l?void 0:l.products)||void 0===r?void 0:r[t])||void 0===s?void 0:s.variants)||[]))||void 0===c||c.forEach((()=>p++)),Object.keys((null===(u=null===(n=null===(d=null==a?void 0:a[o])||void 0===d?void 0:d.products)||void 0===n?void 0:n[t])||void 0===u?void 0:u.variants)||[]).forEach((()=>v++)),v>0&&p!==v))};return o("div",{children:[o(d,{children:[t(l,{Icon:i,onClick:()=>{h("collections"),j()}}),t(r,{children:"Searched Products"})]}),t("div",{children:Object.keys(p).length?t(e,{children:Object.keys(p).map((o=>{var e;return Object.keys((null===(e=null==p?void 0:p[o])||void 0===e?void 0:e.products)||[]).map((e=>{let i=!1;return(null==p?void 0:p.isCustom)&&(i=!0),t(c,{collectionId:o,upliftAdditions:(t,e)=>((o,t,e)=>{const i=n(e,p[o]);m({type:t,data:Object.assign(Object.assign({},i),{isRestricted:v})})})(o,t,e),productId:e,data:p[o].products[e],isProductPartiallyChecked:y(o,e),selectedData:a,selectedCollectionsDispatch:m,viewOnly:i},e)}))}))}):t(s,{title:"No search results found",subtitle:"We couldn’t find the product you were looking for."})})]})};export{u as SearchScreen};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Collection, SelectedItems } from '.';
+import { SelectedCollectionsActions } from './reducers';
+interface SelectedScreenInterface {
+    selectedCollections: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    collections: {
+        [key: string]: Collection;
+    };
+}
+export declare const SelectedScreen: (props: SelectedScreenInterface) => JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsxs as o,jsx as t,Fragment as l}from"react/jsx-runtime";import e from"../../assets/icons/arrow_left.svg.js";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as r}from"../TypographyStyle.js";import{EmptyState as d}from"./emptyState.js";import{ProductGroup as c}from"./productScreen.js";import{SelectedScreenHeader as n}from"./style.js";const s=s=>{const{selectedCollections:u,selectedCollectionsDispatch:v,setScreen:p,collections:a}=s,m=(o,t)=>{var l,e,i,r,d,c,n,s,v;let p=0,m=0;return!!((null===(e=null===(l=null==u?void 0:u[o])||void 0===l?void 0:l.products)||void 0===e?void 0:e[t])&&(null===(c=Object.keys((null===(d=null===(r=null===(i=null==a?void 0:a[o])||void 0===i?void 0:i.products)||void 0===r?void 0:r[t])||void 0===d?void 0:d.variants)||[]))||void 0===c||c.forEach((()=>m++)),Object.keys((null===(v=null===(s=null===(n=null==u?void 0:u[o])||void 0===n?void 0:n.products)||void 0===s?void 0:s[t])||void 0===v?void 0:v.variants)||[]).forEach((()=>p++)),p>0&&m!==p))};return o("div",{children:[o(n,{children:[t(i,{Icon:e,onClick:()=>{p("collections")}}),t(r,{children:"Selected Products"})]}),t("div",{children:Object.keys(u).length>0?t(l,{children:Object.keys(u).map((o=>{var l;return Object.keys((null===(l=null==u?void 0:u[o])||void 0===l?void 0:l.products)||[]).map((l=>{let e=!1;return(null==u?void 0:u.isCustom)&&(e=!0),t(c,{upliftAdditions:null,collectionId:o,productId:l,data:u[o].products[l],isProductPartiallyChecked:m(o,l),selectedData:u,selectedCollectionsDispatch:v,viewOnly:e},l)}))}))}):t(d,{title:"No Products Selected",subtitle:"Select products will appear here"})})]})};export{s as SelectedScreen};

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

@@ -0,0 +1,14 @@
+export declare const ContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isDisabled: boolean;
+}, never>;
+export declare const CollectionCardInfoStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionCardDetailStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenCollectionCardStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isVariant: boolean;
+}, never>;
+export declare const SelectedScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionNameHolder: import("styled-components").StyledComponent<"div", any, {}, never>;