@bikdotai/bik-component-library 0.0.640-0 → 0.0.640-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/product-picker/ProductPickerModal.js +1 -1
- package/dist/cjs/components/product-picker/type.d.ts +0 -1
- package/dist/cjs/components/product-picker-v2/modal.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker/ProductPickerModal.js +1 -1
- package/dist/esm/components/product-picker/type.d.ts +0 -1
- package/dist/esm/components/product-picker-v2/modal.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../node_modules/lodash.debounce/index.js"),s=require("react"),o=require("../bik-layout/PageLoader.js"),r=require("../checkBox/CheckBox.js"),n=require("../input/Input.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../node_modules/lodash.debounce/index.js"),s=require("react"),o=require("../bik-layout/PageLoader.js"),r=require("../checkBox/CheckBox.js"),n=require("../input/Input.js"),c=require("../modals/styledModal.js"),l=require("./ProductPicker.styled.js"),i=require("../TypographyStyle.js"),a=require("../../utils/DateUtils.js"),d=require("../../constants/Theme.js"),u=require("../../assets/icons/alert_triangle.svg.js"),p=require("../../assets/icons/search.svg.js");const h="https://jkfenner.com/wp-content/uploads/2019/11/default.jpg",j=t=>{let{text:s,styleProps:o}=t;return e.jsxs(l.StyledZeroState,{children:[e.jsx("div",Object.assign({className:"icon__container",style:Object.assign({},o)},{children:e.jsx(u.default,{width:24,height:24,color:d.DEFAULT_THEME.colorsV2.content.secondary})})),e.jsx(i.TitleSmall,{children:"No results found"}),e.jsx(i.BodySecondary,Object.assign({style:{color:d.DEFAULT_THEME.colorsV2.content.secondary,textAlign:"center"}},{children:`Sorry we could not find any results for "${s}"`}))]})},g=c=>{var u,g,x,m;const P=c.instaPost?a.default.dateFormat(new Date(c.instaPost.timestamp),"•",!0):"",[y,v]=s.useState(c.products),[E,_]=s.useState(!1),[b,T]=s.useState(""),f=s.useCallback(t.default((e=>{e?(v([]),c.onSearchKeyChange(e).then((e=>{v(e),_(!1)}))):(v(c.products),_(!1))}),700),[]);return e.jsxs(l.StyledProductPickerContainer,{children:[c.instaPost&&e.jsxs("div",Object.assign({className:"post__wrapper"},{children:[e.jsx("img",{alt:"Ig Media",onError:e=>{e.target.onerror=null,e.target.src=h},src:null===(u=c.instaPost)||void 0===u?void 0:u.media_url,className:"post__thumbnail"}),e.jsxs("div",Object.assign({className:"post__info-wrapper"},{children:[e.jsx(i.BodyPrimary,Object.assign({style:{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap",color:c.instaPost.caption?d.DEFAULT_THEME.colorsV2.content.primary:d.DEFAULT_THEME.colorsV2.content.secondary}},{children:(null===(g=c.instaPost)||void 0===g?void 0:g.caption)?null===(x=c.instaPost)||void 0===x?void 0:x.caption:"No caption"})),e.jsx(i.Caption,Object.assign({style:{color:d.DEFAULT_THEME.colorsV2.content.placeholder}},{children:P}))]}))]})),e.jsx("div",Object.assign({style:{borderTop:c.instaPost?`1px solid ${d.DEFAULT_THEME.colorsV2.stroke.primary}`:"none",borderBottom:`1px solid ${d.DEFAULT_THEME.colorsV2.stroke.primary}`,padding:c.instaPost?"16px 24px":"0px 24px 16px 24px"}},{children:e.jsx(n.Input,{placeholder:null!==(m=c.searchPlaceholder)&&void 0!==m?m:"Search products..",onChangeText:e=>{var t;T(e),(null===(t=e.trim())||void 0===t?void 0:t.length)>0?(_(!0),f(e)):(_(!1),v(c.products))},rightIcon:{icon:p.default}})})),e.jsxs("div",Object.assign({style:{maxHeight:350,overflowY:"scroll"}},{children:[E&&e.jsx("div",Object.assign({className:"loader__wrapper"},{children:e.jsx(o.PageLoader,{})})),0!==y.length||E?y.map((t=>{var s;const o=c.selectedProducts.find((e=>e.id===t.id));return e.jsxs("div",Object.assign({className:"product__wrapper"},{children:[e.jsxs("div",Object.assign({className:"product__info-wrapper"},{children:[e.jsx("img",{alt:"Product",onError:e=>{e.target.onerror=null,e.target.src=h},src:null!==(s=t.image)&&void 0!==s?s:h,className:"product__image"}),e.jsx(i.TitleSmall,{children:t.name})]})),e.jsx("div",Object.assign({style:{order:1}},{children:e.jsx(r.CheckBox,{isChecked:void 0!==o,onValueChange:e=>{((e,t)=>{const s=c.selectedProducts.find((e=>e.id===t.id));if(e&&!s){const e=[...c.selectedProducts,t];c.setSelectedProducts(e)}else if(s){const e=[...c.selectedProducts];let s=-1;c.selectedProducts.forEach(((e,o)=>{e.id===t.id&&(s=o)})),e.splice(s,1),c.setSelectedProducts(e)}})(e,t)}})}))]}),t.id)})):e.jsx(j,{text:b})]}))]})};exports.PricePleaseProductPicker=t=>{var o;const[r,n]=s.useState([]);return s.useEffect((()=>{var e;n(null!==(e=t.selectedProducts)&&void 0!==e?e:[])}),[null===(o=t.selectedProducts)||void 0===o?void 0:o.length]),e.jsx(c.StyledModal,Object.assign({open:t.show,onClose:()=>{t.onClose()},footerLeftCustomElement:r.length>10?e.jsx(i.Caption,Object.assign({style:{color:d.DEFAULT_THEME.colorsV2.content.negative}},{children:"Can't add more than 10 products"})):e.jsx(i.Caption,Object.assign({style:{color:d.DEFAULT_THEME.colorsV2.content.placeholder}},{children:r?`${r.length} selected`:""})),headingTitle:t.title,primaryButton:{disabled:r.length>10||0===r.length,buttonType:"primary",buttonText:"Select",size:"small",onClick:()=>{t.setSelectedProducts(r),t.onClose()}},secondaryButton:t.secondaryButtonProps,footerShadow:!0},{children:e.jsx(g,Object.assign({},t,{selectedProducts:r,setSelectedProducts:n}))}))},exports.ProductPickerContent=g;
|
|
@@ -16,7 +16,6 @@ export interface ProductPickerProps {
|
|
|
16
16
|
products: Product[] | Collection[];
|
|
17
17
|
onClose: () => void;
|
|
18
18
|
title: string;
|
|
19
|
-
subtitle?: string;
|
|
20
19
|
onSave: (productIds: Product[] | Collection[]) => void;
|
|
21
20
|
onSearchKeyChange: (key: string) => Promise<Product[] | Collection[]>;
|
|
22
21
|
instaPost?: IInstaPost;
|
|
@@ -104,6 +104,7 @@ export type ProductPickerInterface = {
|
|
|
104
104
|
useDynamicInfoImageSize?: boolean;
|
|
105
105
|
primaryButton?: ButtonProps;
|
|
106
106
|
secondaryButton?: ButtonProps;
|
|
107
|
+
subtitle?: string;
|
|
107
108
|
} & ({
|
|
108
109
|
startupScreen: ScreenName.RearrangeProducts;
|
|
109
110
|
rearrangeEnabled: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),o=require("../../assets/icons/search.svg.js"),c=require("react"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/cross.svg.js"),n=require("../button/Button.js"),i=require("../input/Input.js"),l=require("../modals/styledModal.js"),a=require("../spinner/Spinner.js"),d=require("../tag/Tag.js"),u=require("./collectionScreen.js"),h=require("./productInfoOverlay.js"),p=require("./productScreen.js"),S=require("./rearrangeScreen.js"),x=require("./reducers.js"),C=require("./searchScreen.js"),g=require("./selectedScreen.js"),j=require("./style.js"),y=require("./type.js");exports.ScreenName=void 0,(e=exports.ScreenName||(exports.ScreenName={})).Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products";exports.ProductPickerModal=e=>{const{storeId:m,selectedItems:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),o=require("../../assets/icons/search.svg.js"),c=require("react"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/cross.svg.js"),n=require("../button/Button.js"),i=require("../input/Input.js"),l=require("../modals/styledModal.js"),a=require("../spinner/Spinner.js"),d=require("../tag/Tag.js"),u=require("./collectionScreen.js"),h=require("./productInfoOverlay.js"),p=require("./productScreen.js"),S=require("./rearrangeScreen.js"),x=require("./reducers.js"),C=require("./searchScreen.js"),g=require("./selectedScreen.js"),j=require("./style.js"),y=require("./type.js");exports.ScreenName=void 0,(e=exports.ScreenName||(exports.ScreenName={})).Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products";exports.ProductPickerModal=e=>{const{storeId:m,selectedItems:b,onClose:f,visible:v,zIndex:I,exactLimit:k,limit:P,hideCollectionCheckbox:O,hideProductCheckbox:F,outOfStockAction:R=y.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:T,selectProductsFromCustomCollection:D,hideSelectionCount:N,title:q,width:E,left:w,renderWithoutModal:B,onClickSave:A,pickerType:L,hideProductVariants:M=!1,startupScreen:z=exports.ScreenName.Collections,rearrangeEnabled:V,selectSingleItem:$=!1,showProductDetails:_,containerStyle:H,crossButtonInsideHeader:W=!1,footerForNonModal:G={},primaryButton:K,secondaryButton:U,subtitle:Y}=e,[J,Q]=c.useReducer(x.collectionsReducer,{}),[X,Z]=c.useState([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(z)?z:exports.ScreenName.Collections),[ee,te]=c.useState("grid"),[oe,ce]=c.useState(""),[re,se]=c.useState(""),[ne,ie]=c.useState(0),[le,ae]=c.useState(!1),[de,ue]=c.useState(0),[he,pe]=c.useState(""),[Se,xe]=c.useState(!1),[Ce,ge]=c.useState(!1),[je,ye]=c.useReducer(x.searchReducer,{collections:{},products:{}}),[me,be]=c.useReducer(x.selectedColectionsReducer,Object.keys(b).length>0?b:{}),fe=c.useRef(null),[ve,Ie]=c.useState(!1),[ke,Pe]=c.useState();c.useEffect((()=>{ae(!0),ge(!0),e.collectionFetcher(ne,m).then((e=>{Q({type:"fetched",data:(null==e?void 0:e.collections)||{}}),ae(!1),ie((e=>e+1)),ge(!1)})).catch()}),[]),c.useEffect((()=>{let e=0;M?Object.keys(me||[]).forEach((t=>{var o;Object.keys((null===(o=me[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&me[-1]&&(null===(c=me[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(me||[]).forEach((t=>{var o;Object.keys((null===(o=me[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=me[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),ue(e)}),[J,me,M]),c.useEffect((()=>{re&&(ae(!0),e.productFetcher(re,m).then((e=>{Object.keys(e).length&&Q({type:"productsFetched",data:{collectionId:re,products:e}}),ae(!1)})).catch())}),[re]),c.useEffect((()=>{const t=setTimeout((()=>{"rearrange"!==X&&(he.length||"collections"!==X)&&(he.length?(xe(!0),e.searchFetcher(m,he).then((e=>{"collections"in e&&"products"in e?(ye({type:"set",data:e}),Q({type:"searched",data:e.collections})):(ye({type:"set",data:{collections:{},products:e}}),Q({type:"searched",data:e})),Z("searchProducts"),ae(!1),xe(!1)}))):Z("collections"))}),800);return()=>clearTimeout(t)}),[he]),c.useEffect((()=>{A&&(e.onAdd(me,de),Oe())}),[A]),c.useEffect((()=>{$&&Object.keys(me||{}).length&&de&&(e.onAdd(me,de),Oe())}),[$,me,de]);const Oe=()=>{be({type:"reset",data:{}})},Fe=()=>k&&de>k?t.jsx(d.Tag,{tagText:`You can only select ${k} products`,type:"negative"}):P&&de>P?t.jsx(d.Tag,{tagText:`You can only select ${P} products`,type:"negative"}):de>0?t.jsx(n.Button,{onClick:()=>{Z(V?exports.ScreenName.RearrangeProducts:exports.ScreenName.SelectedProducts)},buttonText:k?`${de}/${k} products selected`:`${de} products selected`,buttonType:["rearrange","view"].includes(X)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(X)}):t.jsx(n.Button,{disabled:!0,buttonText:k?`${de}/${k} products selected`:`${de} products selected`,buttonType:"tertiaryGray"}),Re=e=>le?"Loading...":X===exports.ScreenName.RearrangeProducts?null!=e?e:"Done":null!=e?e:"Add",Te=t.jsxs(j.ContainerStyle,Object.assign({style:null!=H?H:{}},{children:[e.postHeader&&t.jsx("div",Object.assign({style:{padding:"0 24px"}},{children:e.postHeader})),!e.hideGlobalSearch&&t.jsx(t.Fragment,{children:("collections"===X||"searchProducts"===X)&&t.jsx("div",Object.assign({style:{padding:B?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t.jsx(i.Input,{placeholder:"Search for collections and products, or type a product ID",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Se?t.jsx(a.Spinner,{size:"small",color:r.COLORS.content.primary}):t.jsx(o.default,{})},id:"listInput",height:"24px",type:"text",value:he,onChangeText:e=>{e.length&&e.trim().length?pe(e):pe("")}})}))}),t.jsxs(j.ScrollContainerStyle,Object.assign({ref:fe,screenName:X},{children:["collections"===X&&t.jsx(u.CollectionsScreen,{customCollectionRestriction:e.customCollectionRestriction,dataLoading:Ce,collections:J,selectedCollectionsDispatch:be,setCollectionId:ce,setSelectedCollectionId:se,setScreen:Z,selectedCollections:me,collectionFetcher:e.collectionFetcher,storeId:m,collectionsDispatch:Q,setSaveDisabled:ae,pagingControls:{curPage:ne,setCurPage:ie},hideCollectionCheckbox:O,renderWithoutModal:B,pickerType:L,scrollContainerRef:fe}),"products"===X&&oe&&t.jsx(x.CollectionIdContext.Provider,Object.assign({value:oe},{children:t.jsx(p.ProductsScreen,{hideInCollectionSearch:e.hideInCollectionSearch,customCollectionRestriction:e.customCollectionRestriction,productFetcher:e.productFetcher,setScreen:Z,storeId:m,data:J[oe],collectionsDispatch:Q,selectedCollectionsDispatch:be,selectedData:me,setSaveDisabled:ae,searchInCollectionFetcher:e.searchInCollectionFetcher,hideProductCheckbox:F,outOfStockAction:R,hideVariantCheckbox:T,selectProductsFromCustomCollection:D,renderWithoutModal:B,pickerType:L,hideProductVariants:M,fbStatusFetcher:e.fbStatusFetcher,onProductDetailClick:e=>{Ie(!0),Pe(e)},showProductDetailInfoIcon:_,scrollContainerRef:fe})})),"view"===X&&t.jsx(g.SelectedScreen,{selectedCollections:me||{},selectedCollectionsDispatch:be,setScreen:Z,collections:J,hideProductVariants:M,outOfStockAction:R,storeId:m,fbStatusFetcher:e.fbStatusFetcher}),"rearrange"===X&&t.jsx(S.RearrangeScreen,{selectedCollections:me||{},selectedCollectionsDispatch:be,setScreen:Z,outOfStockAction:R,rearrangeViewType:"grid"===ee?"list":"grid",scrollContainerRef:fe,storeId:m,fbStatusFetcher:e.fbStatusFetcher}),"searchProducts"===X&&t.jsx(C.SearchScreen,{customCollectionRestriction:e.customCollectionRestriction,selectedCollections:me||{},searchedCollections:je||{},searchedCollectionsDispatch:ye,selectedCollectionsDispatch:be,setScreen:Z,collections:J,onBackPress:()=>{pe(""),ye({type:"set",data:{collections:{},products:{}}})},pickerType:L,hideProductCheckbox:F,hideProductVariants:M,hideVariantCheckbox:T,storeId:m,fbStatusFetcher:e.fbStatusFetcher,setCollectionId:ce,setSelectedCollectionId:se,renderWithoutModal:B,hideCollectionCheckbox:O,outOfStockAction:R})]}))]}));return t.jsx(t.Fragment,{children:B?t.jsxs(t.Fragment,{children:[Te,G.renderFooter?t.jsxs(j.StyledFooterForNonModal,{children:[Fe(),t.jsx(n.Button,{buttonText:Re(G.primaryButtonText),disabled:!G.isLoading&&(le||de<1||k&&de<k||!k&&P&&de>P)||G.primaryButtonDisabled,isLoading:G.isLoading,onClick:()=>{e.onAdd(me,de),Oe(),Z([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(z)?z:exports.ScreenName.Collections)}})]}):t.jsx(t.Fragment,{}),ve&&ke?t.jsx(h.ProductInfoOverlay,{productData:ke,outOfStockAction:R,useDynamicInfoImageSize:e.useDynamicInfoImageSize,onClose:()=>{Ie(!1)}}):t.jsx(t.Fragment,{})]}):t.jsxs(l.StyledModal,Object.assign({zIndex:I,open:v,onClose:()=>{null==f||f(),Oe()},headingTitle:q||("collections"===X||"products"===X?"Select Products":"view"===X?"Selected Products":"searchProducts"===X?"Searched Results":"rearrange"===X?"Rearrange Products":void 0),headingSubtitle:Y,footerShadow:!0,centralContainerStyles:{width:E||"600px",left:w||"auto"},headerRightCustomElement:W?t.jsx("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:f},{children:t.jsx(s.default,{width:20,height:20,color:r.COLORS.content.secondary})})):t.jsx(t.Fragment,{}),footerContainerStyle:e.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:r.COLORS.surface.standard}:void 0,primaryButton:K?Object.assign(Object.assign({},K),{disabled:!K.isLoading&&(le||de<1||k&&de<k||!k&&P&&de>P)||K.disabled,onClick:()=>{e.onAdd(me,de),Oe(),Z([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(z)?z:exports.ScreenName.Collections)}}):{buttonText:Re(),disabled:le||de<1||k&&de<k||!k&&P&&de>P||!1,onClick:()=>{e.onAdd(me,de),Oe()}},secondaryButton:Object.assign({},null!=U?U:{}),wrapperStyle:e.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:N?t.jsx(t.Fragment,{}):Fe(),hideCrossButton:ve||W},{children:[Te,ve&&ke?t.jsx(h.ProductInfoOverlay,{productData:ke,useDynamicInfoImageSize:e.useDynamicInfoImageSize,outOfStockAction:R,onClose:()=>{Ie(!1)}}):t.jsx(t.Fragment,{})]}))})};
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,TitleSmall 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 24px":"0px 24px 16px 24px"}},{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};
|
|
@@ -16,7 +16,6 @@ export interface ProductPickerProps {
|
|
|
16
16
|
products: Product[] | Collection[];
|
|
17
17
|
onClose: () => void;
|
|
18
18
|
title: string;
|
|
19
|
-
subtitle?: string;
|
|
20
19
|
onSave: (productIds: Product[] | Collection[]) => void;
|
|
21
20
|
onSearchKeyChange: (key: string) => Promise<Product[] | Collection[]>;
|
|
22
21
|
instaPost?: IInstaPost;
|
|
@@ -104,6 +104,7 @@ export type ProductPickerInterface = {
|
|
|
104
104
|
useDynamicInfoImageSize?: boolean;
|
|
105
105
|
primaryButton?: ButtonProps;
|
|
106
106
|
secondaryButton?: ButtonProps;
|
|
107
|
+
subtitle?: string;
|
|
107
108
|
} & ({
|
|
108
109
|
startupScreen: ScreenName.RearrangeProducts;
|
|
109
110
|
rearrangeEnabled: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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
|
|
1
|
+
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 n}from"react";import{COLORS as l}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 I}from"./selectedScreen.js";import{ContainerStyle as x,ScrollContainerStyle as P,StyledFooterForNonModal as O}from"./style.js";import{OUT_OF_STOCK_ACTION as D}from"./type.js";var F;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(F||(F={}));const T=T=>{const{storeId:R,selectedItems:w,onClose:A,visible:B,zIndex:E,exactLimit:L,limit:z,hideCollectionCheckbox:V,hideProductCheckbox:$,outOfStockAction:M=D.BLUR,hideVariantCheckbox:H,selectProductsFromCustomCollection:W,hideSelectionCount:G,title:N,width:Y,left:K,renderWithoutModal:U,onClickSave:q,pickerType:J,hideProductVariants:Q=!1,startupScreen:X=F.Collections,rearrangeEnabled:Z,selectSingleItem:_=!1,showProductDetails:ee,containerStyle:te,crossButtonInsideHeader:oe=!1,footerForNonModal:ce={},primaryButton:re,secondaryButton:se,subtitle:ie}=T,[ne,le]=r(b,{}),[de,ae]=s([F.Collections,F.RearrangeProducts].includes(X)?X:F.Collections),[ue,he]=s("grid"),[pe,me]=s(""),[Ce,ge]=s(""),[fe,ye]=s(0),[be,Se]=s(!1),[ve,ke]=s(0),[je,Ie]=s(""),[xe,Pe]=s(!1),[Oe,De]=s(!1),[Fe,Te]=r(S,{collections:{},products:{}}),[Re,we]=r(v,Object.keys(w).length>0?w:{}),Ae=i(null),[Be,Ee]=s(!1),[Le,ze]=s();n((()=>{Se(!0),De(!0),T.collectionFetcher(fe,R).then((e=>{le({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Se(!1),ye((e=>e+1)),De(!1)})).catch()}),[]),n((()=>{let e=0;Q?Object.keys(Re||[]).forEach((t=>{var o;Object.keys((null===(o=Re[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&Re[-1]&&(null===(c=Re[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(Re||[]).forEach((t=>{var o;Object.keys((null===(o=Re[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=Re[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),ke(e)}),[ne,Re,Q]),n((()=>{Ce&&(Se(!0),T.productFetcher(Ce,R).then((e=>{Object.keys(e).length&&le({type:"productsFetched",data:{collectionId:Ce,products:e}}),Se(!1)})).catch())}),[Ce]),n((()=>{const e=setTimeout((()=>{"rearrange"!==de&&(je.length||"collections"!==de)&&(je.length?(Pe(!0),T.searchFetcher(R,je).then((e=>{"collections"in e&&"products"in e?(Te({type:"set",data:e}),le({type:"searched",data:e.collections})):(Te({type:"set",data:{collections:{},products:e}}),le({type:"searched",data:e})),ae("searchProducts"),Se(!1),Pe(!1)}))):ae("collections"))}),800);return()=>clearTimeout(e)}),[je]),n((()=>{q&&(T.onAdd(Re,ve),Ve())}),[q]),n((()=>{_&&Object.keys(Re||{}).length&&ve&&(T.onAdd(Re,ve),Ve())}),[_,Re,ve]);const Ve=()=>{we({type:"reset",data:{}})},$e=()=>L&&ve>L?t(m,{tagText:`You can only select ${L} products`,type:"negative"}):z&&ve>z?t(m,{tagText:`You can only select ${z} products`,type:"negative"}):t(a,ve>0?{onClick:()=>{ae(Z?F.RearrangeProducts:F.SelectedProducts)},buttonText:L?`${ve}/${L} products selected`:`${ve} products selected`,buttonType:["rearrange","view"].includes(de)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(de)}:{disabled:!0,buttonText:L?`${ve}/${L} products selected`:`${ve} products selected`,buttonType:"tertiaryGray"}),Me=e=>be?"Loading...":de===F.RearrangeProducts?null!=e?e:"Done":null!=e?e:"Add",He=e(x,Object.assign({style:null!=te?te:{}},{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===de||"searchProducts"===de)&&t("div",Object.assign({style:{padding:U?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(u,{placeholder:"Search for collections and products, or type a product ID",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>xe?t(p,{size:"small",color:l.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:je,onChangeText:e=>{e.length&&e.trim().length?Ie(e):Ie("")}})}))}),e(P,Object.assign({ref:Ae,screenName:de},{children:["collections"===de&&t(C,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:Oe,collections:ne,selectedCollectionsDispatch:we,setCollectionId:me,setSelectedCollectionId:ge,setScreen:ae,selectedCollections:Re,collectionFetcher:T.collectionFetcher,storeId:R,collectionsDispatch:le,setSaveDisabled:Se,pagingControls:{curPage:fe,setCurPage:ye},hideCollectionCheckbox:V,renderWithoutModal:U,pickerType:J,scrollContainerRef:Ae}),"products"===de&&pe&&t(k.Provider,Object.assign({value:pe},{children:t(f,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:ae,storeId:R,data:ne[pe],collectionsDispatch:le,selectedCollectionsDispatch:we,selectedData:Re,setSaveDisabled:Se,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:$,outOfStockAction:M,hideVariantCheckbox:H,selectProductsFromCustomCollection:W,renderWithoutModal:U,pickerType:J,hideProductVariants:Q,fbStatusFetcher:T.fbStatusFetcher,onProductDetailClick:e=>{Ee(!0),ze(e)},showProductDetailInfoIcon:ee,scrollContainerRef:Ae})})),"view"===de&&t(I,{selectedCollections:Re||{},selectedCollectionsDispatch:we,setScreen:ae,collections:ne,hideProductVariants:Q,outOfStockAction:M,storeId:R,fbStatusFetcher:T.fbStatusFetcher}),"rearrange"===de&&t(y,{selectedCollections:Re||{},selectedCollectionsDispatch:we,setScreen:ae,outOfStockAction:M,rearrangeViewType:"grid"===ue?"list":"grid",scrollContainerRef:Ae,storeId:R,fbStatusFetcher:T.fbStatusFetcher}),"searchProducts"===de&&t(j,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:Re||{},searchedCollections:Fe||{},searchedCollectionsDispatch:Te,selectedCollectionsDispatch:we,setScreen:ae,collections:ne,onBackPress:()=>{Ie(""),Te({type:"set",data:{collections:{},products:{}}})},pickerType:J,hideProductCheckbox:$,hideProductVariants:Q,hideVariantCheckbox:H,storeId:R,fbStatusFetcher:T.fbStatusFetcher,setCollectionId:me,setSelectedCollectionId:ge,renderWithoutModal:U,hideCollectionCheckbox:V,outOfStockAction:M})]}))]}));return t(o,{children:U?e(o,{children:[He,ce.renderFooter?e(O,{children:[$e(),t(a,{buttonText:Me(ce.primaryButtonText),disabled:!ce.isLoading&&(be||ve<1||L&&ve<L||!L&&z&&ve>z)||ce.primaryButtonDisabled,isLoading:ce.isLoading,onClick:()=>{T.onAdd(Re,ve),Ve(),ae([F.Collections,F.RearrangeProducts].includes(X)?X:F.Collections)}})]}):t(o,{}),Be&&Le?t(g,{productData:Le,outOfStockAction:M,useDynamicInfoImageSize:T.useDynamicInfoImageSize,onClose:()=>{Ee(!1)}}):t(o,{})]}):e(h,Object.assign({zIndex:E,open:B,onClose:()=>{null==A||A(),Ve()},headingTitle:N||("collections"===de||"products"===de?"Select Products":"view"===de?"Selected Products":"searchProducts"===de?"Searched Results":"rearrange"===de?"Rearrange Products":void 0),headingSubtitle:ie,footerShadow:!0,centralContainerStyles:{width:Y||"600px",left:K||"auto"},headerRightCustomElement:oe?t("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:A},{children:t(d,{width:20,height:20,color:l.content.secondary})})):t(o,{}),footerContainerStyle:T.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:l.surface.standard}:void 0,primaryButton:re?Object.assign(Object.assign({},re),{disabled:!re.isLoading&&(be||ve<1||L&&ve<L||!L&&z&&ve>z)||re.disabled,onClick:()=>{T.onAdd(Re,ve),Ve(),ae([F.Collections,F.RearrangeProducts].includes(X)?X:F.Collections)}}):{buttonText:Me(),disabled:be||ve<1||L&&ve<L||!L&&z&&ve>z||!1,onClick:()=>{T.onAdd(Re,ve),Ve()}},secondaryButton:Object.assign({},null!=se?se:{}),wrapperStyle:T.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:G?t(o,{}):$e(),hideCrossButton:Be||oe},{children:[He,Be&&Le?t(g,{productData:Le,useDynamicInfoImageSize:T.useDynamicInfoImageSize,outOfStockAction:M,onClose:()=>{Ee(!1)}}):t(o,{})]}))})};export{T as ProductPickerModal,F as ScreenName};
|