@bikdotai/bik-component-library 0.0.657-3 → 0.0.657-6
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-v2/modal.js +1 -1
- package/dist/cjs/components/product-picker-v2/product.js +1 -1
- package/dist/cjs/components/product-picker-v2/productInfoOverlay.js +7 -12
- package/dist/cjs/components/product-picker-v2/style.d.ts +6 -0
- package/dist/cjs/components/product-picker-v2/style.js +33 -16
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker-v2/product.js +1 -1
- package/dist/esm/components/product-picker-v2/productInfoOverlay.js +7 -12
- package/dist/esm/components/product-picker-v2/style.d.ts +6 -0
- package/dist/esm/components/product-picker-v2/style.js +30 -13
- package/package.json +1 -1
|
@@ -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"),
|
|
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"),g=require("./reducers.js"),C=require("./searchScreen.js"),x=require("./selectedScreen.js"),j=require("./style.js"),y=require("./type.js"),m=require("./utility.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:b,selectedItems:f,onClose:v,visible:P,zIndex:k,exactLimit:I,limit:O,hideCollectionCheckbox:F,hideProductCheckbox:R,outOfStockAction:T=y.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:D,selectProductsFromCustomCollection:q,hideSelectionCount:N,title:E,width:A,left:w,renderWithoutModal:B,onClickSave:L,pickerType:M,hideProductVariants:V=!1,startupScreen:z=exports.ScreenName.Collections,rearrangeEnabled:$,selectSingleItem:_=!1,showProductDetails:H,containerStyle:W,crossButtonInsideHeader:G=!1,footerForNonModal:K={},primaryButton:U,secondaryButton:Y,subtitle:J}=e,[Q,X]=c.useReducer(g.collectionsReducer,{}),[Z,ee]=c.useState([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(z)?z:exports.ScreenName.Collections),[te,oe]=c.useState("grid"),[ce,re]=c.useState(""),[se,ne]=c.useState(""),[ie,le]=c.useState(0),[ae,de]=c.useState(!1),[ue,he]=c.useState(0),[pe,Se]=c.useState(""),[ge,Ce]=c.useState(!1),[xe,je]=c.useState(!1),[ye,me]=c.useReducer(g.searchReducer,{collections:{},products:{}}),[be,fe]=c.useReducer(g.selectedColectionsReducer,Object.keys(f).length>0?f:{}),ve=c.useRef(null),[Pe,ke]=c.useState(!1),[Ie,Oe]=c.useState();c.useEffect((()=>{de(!0),je(!0),e.collectionFetcher(ie,b).then((e=>{console.log("collectionsParsed?.collections",null==e?void 0:e.collections),X({type:"fetched",data:(null==e?void 0:e.collections)||{}}),de(!1),le((e=>e+1)),je(!1)})).catch()}),[]),c.useEffect((()=>{let e=0;V?Object.keys(be||[]).forEach((t=>{var o;Object.keys((null===(o=be[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&be[-1]&&(null===(c=be[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(be||[]).forEach((t=>{var o;Object.keys((null===(o=be[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=be[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),he(e)}),[Q,be,V]),c.useEffect((()=>{se&&(de(!0),e.productFetcher(se,b).then((e=>{Object.keys(e).length&&X({type:"productsFetched",data:{collectionId:se,products:e}}),de(!1)})).catch())}),[se]),c.useEffect((()=>{const t=setTimeout((()=>{"rearrange"!==Z&&(pe.length||"collections"!==Z)&&(pe.length?(Ce(!0),e.searchFetcher(b,pe).then((e=>{"collections"in e&&"products"in e?(me({type:"set",data:e}),X({type:"searched",data:e.collections})):(me({type:"set",data:{collections:{},products:e}}),X({type:"searched",data:e})),ee("searchProducts"),de(!1),Ce(!1)}))):ee("collections"))}),800);return()=>clearTimeout(t)}),[pe]),c.useEffect((()=>{L&&(e.onAdd(be,ue),Fe())}),[L]),c.useEffect((()=>{_&&Object.keys(be||{}).length&&ue&&(e.onAdd(be,ue),Fe())}),[_,be,ue]);const Fe=()=>{fe({type:"reset",data:{}})},Re=()=>I&&ue>I?t.jsx(d.Tag,{tagText:`You can only select ${I} products`,type:"negative"}):O&&ue>O?t.jsx(d.Tag,{tagText:`You can only select ${O} products`,type:"negative"}):ue>0?t.jsx(n.Button,{onClick:()=>{ee($?exports.ScreenName.RearrangeProducts:exports.ScreenName.SelectedProducts)},buttonText:I?`${ue}/${I} products selected`:`${ue} products selected`,buttonType:["rearrange","view"].includes(Z)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(Z)}):t.jsx(n.Button,{disabled:!0,buttonText:I?`${ue}/${I} products selected`:`${ue} products selected`,buttonType:"tertiaryGray"}),Te=e=>ae?"Loading...":Z===exports.ScreenName.RearrangeProducts?null!=e?e:"Done":null!=e?e:"Add",De=t.jsxs(j.ContainerStyle,Object.assign({style:null!=W?W:{}},{children:[e.postHeader&&t.jsx("div",Object.assign({style:{padding:"0 24px"}},{children:e.postHeader})),!e.hideGlobalSearch&&t.jsx(t.Fragment,{children:("collections"===Z||"searchProducts"===Z)&&t.jsx("div",Object.assign({style:{padding:B?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t.jsx(i.Input,{placeholder:"Search products using name or SKU ID",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ge?t.jsx(a.Spinner,{size:"small",color:r.COLORS.content.primary}):t.jsx(o.default,{})},id:"listInput",height:"24px",type:"text",value:pe,onChangeText:e=>{e.length&&e.trim().length?Se(e):Se("")}})}))}),t.jsxs(j.ScrollContainerStyle,Object.assign({ref:ve,screenName:Z},{children:["collections"===Z&&t.jsx(u.CollectionsScreen,{customCollectionRestriction:e.customCollectionRestriction,dataLoading:xe,collections:Q,selectedCollectionsDispatch:fe,setCollectionId:re,setSelectedCollectionId:ne,setScreen:ee,selectedCollections:be,collectionFetcher:e.collectionFetcher,storeId:b,collectionsDispatch:X,setSaveDisabled:de,pagingControls:{curPage:ie,setCurPage:le},hideCollectionCheckbox:F,renderWithoutModal:B,pickerType:M,scrollContainerRef:ve}),"products"===Z&&ce&&t.jsx(g.CollectionIdContext.Provider,Object.assign({value:ce},{children:t.jsx(p.ProductsScreen,{hideInCollectionSearch:e.hideInCollectionSearch,customCollectionRestriction:e.customCollectionRestriction,productFetcher:e.productFetcher,setScreen:ee,storeId:b,data:Q[ce],collectionsDispatch:X,selectedCollectionsDispatch:fe,selectedData:be,setSaveDisabled:de,searchInCollectionFetcher:e.searchInCollectionFetcher,hideProductCheckbox:R,outOfStockAction:T,hideVariantCheckbox:D,selectProductsFromCustomCollection:q,renderWithoutModal:B,pickerType:M,hideProductVariants:V,fbStatusFetcher:e.fbStatusFetcher,onProductDetailClick:e=>{ke(!0),Oe(e)},showProductDetailInfoIcon:H,scrollContainerRef:ve})})),"view"===Z&&t.jsx(x.SelectedScreen,{selectedCollections:be||{},selectedCollectionsDispatch:fe,setScreen:ee,collections:Q,hideProductVariants:V,outOfStockAction:T,storeId:b,fbStatusFetcher:e.fbStatusFetcher}),"rearrange"===Z&&t.jsx(S.RearrangeScreen,{selectedCollections:be||{},selectedCollectionsDispatch:fe,setScreen:ee,outOfStockAction:T,rearrangeViewType:"grid"===te?"list":"grid",scrollContainerRef:ve,storeId:b,fbStatusFetcher:e.fbStatusFetcher}),"searchProducts"===Z&&t.jsx(C.SearchScreen,{customCollectionRestriction:e.customCollectionRestriction,selectedCollections:be||{},searchedCollections:ye||{},searchedCollectionsDispatch:me,selectedCollectionsDispatch:fe,setScreen:ee,collections:Q,onBackPress:()=>{Se(""),me({type:"set",data:{collections:{},products:{}}})},pickerType:M,hideProductCheckbox:R,hideProductVariants:V,hideVariantCheckbox:D,storeId:b,fbStatusFetcher:e.fbStatusFetcher,setCollectionId:re,setSelectedCollectionId:ne,renderWithoutModal:B,hideCollectionCheckbox:F,outOfStockAction:T})]}))]}));return t.jsx(t.Fragment,{children:B?t.jsxs(t.Fragment,{children:[De,K.renderFooter?t.jsxs(j.StyledFooterForNonModal,{children:[Re(),t.jsx(n.Button,{buttonText:Te(K.primaryButtonText),disabled:!K.isLoading&&(ae||ue<1||I&&ue<I||!I&&O&&ue>O)||K.primaryButtonDisabled,isLoading:K.isLoading,onClick:()=>{e.onAdd(be,ue),Fe(),ee([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(z)?z:exports.ScreenName.Collections)}})]}):t.jsx(t.Fragment,{}),Pe&&Ie?t.jsx(h.ProductInfoOverlay,{productData:Ie,outOfStockAction:T,useDynamicInfoImageSize:e.useDynamicInfoImageSize,onClose:()=>{ke(!1)}}):t.jsx(t.Fragment,{})]}):t.jsxs(l.StyledModal,Object.assign({zIndex:k,open:P,onClose:()=>{null==v||v(),Fe()},headingTitle:E||("collections"===Z||"products"===Z?"Select Products":"view"===Z?"Selected Products":"searchProducts"===Z?"Searched Results":"rearrange"===Z?"Rearrange Products":void 0),headingSubtitle:J,footerShadow:!0,centralContainerStyles:{width:A||"600px",left:w||"auto"},headerRightCustomElement:G?t.jsx("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:v},{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:U?(t=>Object.assign(Object.assign({},t),{disabled:!t.isLoading&&(ae||ue<1||I&&ue<I||!I&&O&&ue>O)||t.disabled,onClick:()=>{e.onAdd(be,ue),Fe(),ee([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(z)?z:exports.ScreenName.Collections)}}))(U):{buttonText:Te(),disabled:ae||ue<1||I&&ue<I||!I&&O&&ue>O||!1,onClick:()=>{e.onAdd(be,ue),Fe()}},secondaryButton:Y?(t=>Object.assign(Object.assign({},t),{disabled:ae||ue<1||I&&ue<I||!I&&O&&ue>O||!1,onClick:()=>{const t=m.updateAllVariantsForSelectedProducts(be,Q,ye);e.onAdd(t,ue,!0)}}))(Y):void 0,wrapperStyle:e.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:N?t.jsx(t.Fragment,{}):Re(),hideCrossButton:Pe||G},{children:[De,Pe&&Ie?t.jsx(h.ProductInfoOverlay,{productData:Ie,useDynamicInfoImageSize:e.useDynamicInfoImageSize,outOfStockAction:T,onClose:()=>{ke(!1)}}):t.jsx(t.Fragment,{})]}))})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../../assets/icons/info.svg.js"),o=require("../checkBox/CheckBox.js"),c=require("../icon-button/IconButton.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../../assets/icons/info.svg.js"),o=require("../checkBox/CheckBox.js"),c=require("../icon-button/IconButton.js"),d=require("../shimmer-image/ShimmerImage.js"),r=require("../tooltips/Tooltip.js"),l=require("../TypographyStyle.js"),n=require("./constants.js"),a=require("./helpers/ProductHelper.js"),s=require("./ProductPickerTag.js"),u=require("./style.js"),v=require("./utility.js");const p=n=>{var v,p;const{isVariant:h,data:y,productId:I,collectionId:j,variantId:P,isSelected:x,selectedCollectionsDispatch:g,viewOnly:k,upliftAdditions:C,isPartiallyChecked:b,hideProductCheckbox:O,outOfStockAction:m,hideVariantCheckbox:S,hideProductVariants:f,pickerType:T="PRODUCT",onProductDetailClick:D,showProductDetailInfoIcon:V,currencyAndPrice:q}=n,{isVariantForProductPickerTag:w,dataForProductPickerTag:A,tagText:U,tagType:B}=a.ProductHelper.getDataForProductPickerTag(y,h,m);console.log({data:y});const F=h?y.skuId:null===(p=null===(v=null==y?void 0:y.variants)||void 0===v?void 0:v[0])||void 0===p?void 0:p.skuId;return e.jsxs(u.ProductCardStyle,Object.assign({isVariant:h,onClick:e=>{if(e.stopPropagation(),"PRODUCT"===T&&(O||S)){const e=Object.keys(y.variants);f?x?g({type:"productUnselected",data:{productId:I,collectionId:j}}):C("productSelected",{productId:I,variantId:P,collectionId:j,product:y}):x?g({type:"variantUnselected",data:{productId:I,variantId:P,collectionId:j}}):C("variantSelected",{productId:I,variantId:P||e[0],collectionId:j,variant:y})}},isActive:x},{children:[h&&!k&&!S||!h&&!k&&!O?e.jsx(o.CheckBox,{isChecked:x,isPartiallyChecked:b||!1,onValueChange:function(e,t,i){null==i||i.stopPropagation(),h?e?C(f?"productSelected":"variantSelected",{productId:I,variantId:P,collectionId:j,variant:y}):g({type:f?"productUnselected":"variantUnselected",data:{productId:I,variantId:P,collectionId:j}}):e?C("productSelected",{productId:I,collectionId:j,product:y}):g({type:"productUnselected",data:{productId:I,collectionId:j}})}}):e.jsx(e.Fragment,{}),e.jsx("div",{children:e.jsx(d.ShimmerImage,{width:40,height:40,imageUrl:y.image,alt:"Item",borderRadius:4})}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},{children:[e.jsx(r.Tooltip,Object.assign({variant:"light",body:y.name,placement:"bottom",delay:400},{children:e.jsx(l.TitleSmall,Object.assign({numberOfLines:1},{children:y.name}))})),V&&e.jsx(c.IconButton,{onClick:()=>{null==D||D(y)},Icon:()=>e.jsx(i.default,{width:20,height:20,color:t.COLORS.content.placeholder})})]})),e.jsxs(u.ProductSubTitle,{children:[e.jsx(s.ProductPickerTag,{isVariant:w,data:A,tagText:U,tagType:B}),!(null==A?void 0:A.fbStatus)&&w||U?null:e.jsxs(e.Fragment,{children:[e.jsx(l.BodyCaption,Object.assign({color:t.COLORS.content.secondary},{children:q})),F&&e.jsx(r.Tooltip,Object.assign({body:F,placement:"top"},{children:e.jsx(u.SKUIDBadge,{children:e.jsx(u.EllipsedBodyTiny,{children:`SKU ID: ${F}`})})}))]})]})]}))]}))};exports.ProductCard=p,exports.ProductGroup=t=>{var i,o,c,d,r,l,a,s,u;const{collectionId:h,productId:y,data:I,selectedData:j,selectedCollectionsDispatch:P,viewOnly:x,upliftAdditions:g,isProductPartiallyChecked:k,hideProductCheckbox:C,outOfStockAction:b,hideVariantCheckbox:O,hideProductVariants:m,pickerType:S,onProductDetailClick:f,showProductDetailInfoIcon:T}=t,D=e=>{var t,i,o,c,d,r;if(!(null===(i=null===(t=null==j?void 0:j[h])||void 0===t?void 0:t.products)||void 0===i?void 0:i[y]))return!1;return!!(null===(r=null===(d=null===(c=null===(o=null==j?void 0:j[h])||void 0===o?void 0:o.products)||void 0===c?void 0:c[y])||void 0===d?void 0:d.variants)||void 0===r?void 0:r[e])},V=m||!v.shouldShowVariant(I)?`${I.currency&&null!==(i=n.CurrencySymbols[I.currency])&&void 0!==i?i:""}${null!==(u=null!==(r=null===(d=null===(c=Object.values(null!==(o=I.variants)&&void 0!==o?o:{}))||void 0===c?void 0:c[0])||void 0===d?void 0:d.price)&&void 0!==r?r:null===(s=null===(a=Object.values(null!==(l=I.variants)&&void 0!==l?l:{}))||void 0===a?void 0:a[0])||void 0===s?void 0:s.actualPrice)&&void 0!==u?u:""}`:"";return e.jsxs("div",{children:[e.jsx(p,{isVariant:!1,data:I,productId:y,collectionId:h,isSelected:(()=>{var e,t;return!!(null===(t=null===(e=null==j?void 0:j[h])||void 0===e?void 0:e.products)||void 0===t?void 0:t[y])})(),isPartiallyChecked:k,selectedCollectionsDispatch:P,upliftAdditions:g,viewOnly:x,hideProductCheckbox:C,hideVariantCheckbox:O,hideProductVariants:m,pickerType:S,outOfStockAction:b,onProductDetailClick:f,showProductDetailInfoIcon:T,currencyAndPrice:V},y),m?null:v.shouldShowVariant(I)&&Object.keys(I.variants||[]).map((t=>{var i,o,c,d,r,l,a;const s=`${I.currency&&null!==(i=n.CurrencySymbols[I.currency])&&void 0!==i?i:""}${null!==(a=null!==(d=null===(c=null===(o=I.variants)||void 0===o?void 0:o[t])||void 0===c?void 0:c.price)&&void 0!==d?d:null===(l=null===(r=I.variants)||void 0===r?void 0:r[t])||void 0===l?void 0:l.actualPrice)&&void 0!==a?a:""}`;return e.jsx(p,{isVariant:!0,hideVariantCheckbox:O,data:Object.assign(Object.assign({},I.variants[t]),{currency:I.currency}),variantId:t,productId:y,viewOnly:x,upliftAdditions:g,collectionId:h,isSelected:D(t),selectedCollectionsDispatch:P,outOfStockAction:b,onProductDetailClick:f,showProductDetailInfoIcon:T,currencyAndPrice:s},t)}))]})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),o=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/cross.svg.js"),r=require("../icon-button/IconButton.js"),a=require("../shimmer-image/ShimmerImage.js"),d=require("../tooltips/Tooltip.js"),n=require("../TypographyStyle.js"),l=require("./constants.js"),c=require("./helpers/ProductHelper.js"),u=require("./ProductPickerTag.js"),s=require("./style.js"),p=require("./utility.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=x(t);const g=t=>{var i,r,x,v,g,y,m,f,D,I,S,P,k,O,T,q,C,w,B;const $=void 0===t.productData.variants;let z;if($)z=`${t.productData.currency&&null!==(i=l.CurrencySymbols[t.productData.currency])&&void 0!==i?i:""}${null!==(g=null!==(x=null===(r=t.productData)||void 0===r?void 0:r.price)&&void 0!==x?x:null===(v=t.productData)||void 0===v?void 0:v.actualPrice)&&void 0!==g?g:""}`;else{const e=null===(y=t.productData)||void 0===y?void 0:y.currency;z=`${e&&null!==(m=l.CurrencySymbols[e])&&void 0!==m?m:""}${null!==(T=null!==(S=null===(I=null===(D=Object.values(null!==(f=t.productData.variants)&&void 0!==f?f:{}))||void 0===D?void 0:D[0])||void 0===I?void 0:I.price)&&void 0!==S?S:null===(O=null===(k=Object.values(null!==(P=t.productData.variants)&&void 0!==P?P:{}))||void 0===k?void 0:k[0])||void 0===O?void 0:O.actualPrice)&&void 0!==T?T:""}`}const{isVariantForProductPickerTag:R,dataForProductPickerTag:L,tagText:_,tagType:A}=c.ProductHelper.getDataForProductPickerTag(t.productData,$,t.outOfStockAction);console.log({productData:t.productData});const F=$?t.productData.skuId:null===(w=null===(C=null===(q=t.productData)||void 0===q?void 0:q.variants)||void 0===C?void 0:C[0])||void 0===w?void 0:w.skuId;return e.jsxs(j,{children:[e.jsx(h,{children:e.jsx(a.ShimmerImage,{useDynamicInfoImageSize:t.useDynamicInfoImageSize,imageUrl:t.productData.image,width:200,height:200,borderRadius:4})}),e.jsxs(b,{children:[F&&e.jsx(d.Tooltip,Object.assign({body:F,placement:"top"},{children:e.jsx(s.SKUIDBadge,{children:e.jsx(s.EllipsedBodyTiny,{children:`SKU ID: ${F}`})})})),e.jsx(n.TitleRegular,Object.assign({style:{display:"flex"}},{children:t.productData.name})),e.jsx(n.BodyCaption,Object.assign({color:o.COLORS.content.secondary},{children:`Product ID: ${t.productData.id}`})),e.jsx(n.BodyCaption,{className:"overlay-description",dangerouslySetInnerHTML:{__html:null!==(B=t.productData.description)&&void 0!==B?B:""}}),e.jsx(n.BodyCaption,Object.assign({color:o.COLORS.content.secondary},{children:$?z:p.shouldShowVariant(t.productData)?null:z})),e.jsx(u.ProductPickerTag,{isVariant:R,data:L,tagText:_,tagType:A})]})]})},y=v.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex: 1;
|
|
4
4
|
background: rgba(0, 0, 0, 0.5);
|
|
@@ -17,11 +17,11 @@
|
|
|
17
17
|
word-break: break-word;
|
|
18
18
|
margin-top: 8px;
|
|
19
19
|
}
|
|
20
|
-
`,v
|
|
20
|
+
`,m=v.default.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
flex: 1;
|
|
23
23
|
background: rgba(0, 0, 0, 0.5);
|
|
24
|
-
`,f=
|
|
24
|
+
`,f=v.default.div`
|
|
25
25
|
position: relative;
|
|
26
26
|
|
|
27
27
|
.close-button {
|
|
@@ -32,26 +32,21 @@
|
|
|
32
32
|
background: ${o.COLORS.surface.standard};
|
|
33
33
|
border-radius: 50%;
|
|
34
34
|
}
|
|
35
|
-
`,
|
|
35
|
+
`,j=v.default.div`
|
|
36
36
|
display: flex;
|
|
37
37
|
background: white;
|
|
38
38
|
padding: 24px;
|
|
39
39
|
gap: 24px;
|
|
40
40
|
border-radius: 8px 8px 0px 0px;
|
|
41
|
-
`,
|
|
41
|
+
`,h=v.default.div`
|
|
42
42
|
display: flex;
|
|
43
43
|
max-width: min(50%, 200px);
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
justify-content: center;
|
|
46
46
|
align-items: center;
|
|
47
|
-
`,
|
|
47
|
+
`,b=v.default.div`
|
|
48
48
|
display: flex;
|
|
49
49
|
flex: 1;
|
|
50
50
|
flex-direction: column;
|
|
51
51
|
gap: 4px;
|
|
52
|
-
|
|
53
|
-
width: fit-content;
|
|
54
|
-
background: ${o.COLORS.background.brandLight};
|
|
55
|
-
padding: 2px 6px;
|
|
56
|
-
border-radius: 14px;
|
|
57
|
-
`;exports.ProductInfoCard=x,exports.ProductInfoOverlay=t=>e.jsxs(g,{children:[e.jsx(v,{}),e.jsx(f,{children:e.jsx(i.IconButton,{className:"close-button",onClick:t.onClose,Icon:r.default,width:20,height:20})}),e.jsx(x,{productData:t.productData,outOfStockAction:t.outOfStockAction,useDynamicInfoImageSize:t.useDynamicInfoImageSize})]});
|
|
52
|
+
`;exports.ProductInfoCard=g,exports.ProductInfoOverlay=t=>e.jsxs(y,{children:[e.jsx(m,{}),e.jsx(f,{children:e.jsx(r.IconButton,{className:"close-button",onClick:t.onClose,Icon:i.default,width:20,height:20})}),e.jsx(g,{productData:t.productData,outOfStockAction:t.outOfStockAction,useDynamicInfoImageSize:t.useDynamicInfoImageSize})]});
|
|
@@ -23,3 +23,9 @@ export declare const VariantCardListStyle: import("styled-components").StyledCom
|
|
|
23
23
|
export declare const VariantCardGridStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
24
24
|
export declare const StyledHeaderRightIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
25
25
|
export declare const StyledFooterForNonModal: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
26
|
+
export declare const SKUIDBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
27
|
+
export declare const EllipsedBodyTiny: import("styled-components").StyledComponent<"div", any, {
|
|
28
|
+
numberOfLines?: number | undefined;
|
|
29
|
+
color?: string | undefined;
|
|
30
|
+
}, never>;
|
|
31
|
+
export declare const ProductSubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js"),i=require("./modal.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./modal.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(e);const l=d.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
background-color: white;
|
|
4
4
|
height: ${e=>e.renderWithoutModal?"90%":"75vh"};
|
|
5
5
|
flex-direction: column;
|
|
6
|
-
`,
|
|
6
|
+
`,n=d.default.div`
|
|
7
7
|
overflow-y: scroll;
|
|
8
8
|
overflow-x: hidden;
|
|
9
9
|
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
::-webkit-scrollbar-thumb {
|
|
16
|
-
background-color: ${e=>e.screenName!==
|
|
16
|
+
background-color: ${e=>e.screenName!==o.ScreenName.RearrangeProducts?"#888":"#fff"};
|
|
17
17
|
border-radius: 8px;
|
|
18
18
|
}
|
|
19
|
-
`,d
|
|
19
|
+
`,a=d.default.div`
|
|
20
20
|
height: 64px;
|
|
21
21
|
background-color: ${e=>e.isDisabled?"#F0F0F0":e.isActive?t.COLORS.background.positive.light:"white"};
|
|
22
22
|
border-bottom: 1px solid #e0e0e0;
|
|
@@ -30,17 +30,17 @@
|
|
|
30
30
|
cursor: pointer;
|
|
31
31
|
background-color: ${t.COLORS.surface.hovered};
|
|
32
32
|
}
|
|
33
|
-
`,
|
|
33
|
+
`,p=d.default.div`
|
|
34
34
|
display: flex;
|
|
35
35
|
flex-direction: row;
|
|
36
36
|
justify-content: center;
|
|
37
37
|
align-items: center;
|
|
38
38
|
column-gap: 18px;
|
|
39
|
-
`,
|
|
39
|
+
`,c=d.default.div`
|
|
40
40
|
display: flex;
|
|
41
41
|
flex-direction: column;
|
|
42
42
|
justify-content: center;
|
|
43
|
-
`,
|
|
43
|
+
`,s=d.default.div`
|
|
44
44
|
display: flex;
|
|
45
45
|
flex-direction: row;
|
|
46
46
|
max-height: 32px;
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
position: sticky;
|
|
54
54
|
top: 0;
|
|
55
55
|
z-index: 10;
|
|
56
|
-
`,
|
|
56
|
+
`,x=d.default.div`
|
|
57
57
|
display: flex;
|
|
58
58
|
flex-direction: row;
|
|
59
59
|
column-gap: 16px;
|
|
60
60
|
padding: 12px 16px;
|
|
61
61
|
border-bottom: 1px solid #e0e0e0;
|
|
62
62
|
align-items: center;
|
|
63
|
-
`,
|
|
63
|
+
`,u=d.default.div`
|
|
64
64
|
min-height: 64px;
|
|
65
65
|
background-color: ${e=>e.isActive?t.COLORS.background.positive.light:"white"};
|
|
66
66
|
border-bottom: 1px solid #e0e0e0;
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
cursor: pointer;
|
|
76
76
|
background-color: ${t.COLORS.surface.hovered};
|
|
77
77
|
}
|
|
78
|
-
`,
|
|
78
|
+
`,f=d.default.div`
|
|
79
79
|
display: flex;
|
|
80
80
|
flex-direction: row;
|
|
81
81
|
max-height: 32px;
|
|
@@ -87,10 +87,10 @@
|
|
|
87
87
|
position: sticky;
|
|
88
88
|
top: 0;
|
|
89
89
|
z-index: 10;
|
|
90
|
-
`,
|
|
90
|
+
`,g=d.default.div`
|
|
91
91
|
display: flex;
|
|
92
92
|
flex-direction: column;
|
|
93
|
-
`,
|
|
93
|
+
`,y=d.default.div`
|
|
94
94
|
min-height: 72px;
|
|
95
95
|
background: white;
|
|
96
96
|
padding: 12px 16px;
|
|
@@ -111,14 +111,14 @@
|
|
|
111
111
|
flex-direction: column;
|
|
112
112
|
gap: 2px;
|
|
113
113
|
}
|
|
114
|
-
`,
|
|
114
|
+
`,h=d.default.div`
|
|
115
115
|
height: 72px;
|
|
116
116
|
width: 72px;
|
|
117
117
|
display: flex;
|
|
118
118
|
align-items: center;
|
|
119
119
|
justify-content: center;
|
|
120
120
|
margin: 16px;
|
|
121
|
-
`;
|
|
121
|
+
`;d.default.div`
|
|
122
122
|
display: flex;
|
|
123
123
|
width: 32px;
|
|
124
124
|
height: 32px;
|
|
@@ -127,11 +127,28 @@
|
|
|
127
127
|
align-items: center;
|
|
128
128
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
129
129
|
border-radius: 4px;
|
|
130
|
-
`;const
|
|
130
|
+
`;const b=d.default.div`
|
|
131
131
|
padding: 16px 24px;
|
|
132
132
|
display: flex;
|
|
133
133
|
align-items: center;
|
|
134
134
|
justify-content: space-between;
|
|
135
135
|
margin-top: auto;
|
|
136
136
|
width: 100%;
|
|
137
|
-
|
|
137
|
+
`,m=d.default.div`
|
|
138
|
+
width: fit-content;
|
|
139
|
+
background: ${t.COLORS.background.brandLight};
|
|
140
|
+
padding: 2px 6px;
|
|
141
|
+
border-radius: 14px;
|
|
142
|
+
`,v=d.default(i.BodyTiny)`
|
|
143
|
+
white-space: nowrap;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
text-overflow: ellipsis;
|
|
146
|
+
max-width: 196px;
|
|
147
|
+
display: block;
|
|
148
|
+
color: ${t.COLORS.background.inverseLight};
|
|
149
|
+
`,w=d.default.div`
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-direction: row;
|
|
152
|
+
align-items: center;
|
|
153
|
+
gap: 5px;
|
|
154
|
+
`;exports.CollectionCardDetailStyle=c,exports.CollectionCardInfoStyle=p,exports.CollectionCardStyle=a,exports.CollectionNameHolder=g,exports.ContainerStyle=l,exports.EllipsedBodyTiny=v,exports.ProductCardStyle=u,exports.ProductScreenCollectionCardStyle=x,exports.ProductScreenHeader=s,exports.ProductSubTitle=w,exports.SKUIDBadge=m,exports.ScrollContainerStyle=n,exports.SelectedScreenHeader=f,exports.StyledFooterForNonModal=b,exports.VariantCardGridStyle=h,exports.VariantCardListStyle=y;
|
|
@@ -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 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
|
|
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 g}from"./collectionScreen.js";import{ProductInfoOverlay as C}from"./productInfoOverlay.js";import{ProductsScreen as b}from"./productScreen.js";import{RearrangeScreen as f}from"./rearrangeScreen.js";import{collectionsReducer as y,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 P,ScrollContainerStyle as x,StyledFooterForNonModal as O}from"./style.js";import{OUT_OF_STOCK_ACTION as D}from"./type.js";import{updateAllVariantsForSelectedProducts as F}from"./utility.js";var T;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(T||(T={}));const R=R=>{const{storeId:w,selectedItems:A,onClose:B,visible:E,zIndex:L,exactLimit:z,limit:V,hideCollectionCheckbox:$,hideProductCheckbox:M,outOfStockAction:H=D.BLUR,hideVariantCheckbox:W,selectProductsFromCustomCollection:G,hideSelectionCount:K,title:N,width:U,left:Y,renderWithoutModal:q,onClickSave:J,pickerType:Q,hideProductVariants:X=!1,startupScreen:Z=T.Collections,rearrangeEnabled:_,selectSingleItem:ee=!1,showProductDetails:te,containerStyle:oe,crossButtonInsideHeader:ce=!1,footerForNonModal:re={},primaryButton:se,secondaryButton:ie,subtitle:ne}=R,[le,de]=r(y,{}),[ae,ue]=s([T.Collections,T.RearrangeProducts].includes(Z)?Z:T.Collections),[he,pe]=s("grid"),[me,ge]=s(""),[Ce,be]=s(""),[fe,ye]=s(0),[Se,ve]=s(!1),[ke,je]=s(0),[Ie,Pe]=s(""),[xe,Oe]=s(!1),[De,Fe]=s(!1),[Te,Re]=r(S,{collections:{},products:{}}),[we,Ae]=r(v,Object.keys(A).length>0?A:{}),Be=i(null),[Ee,Le]=s(!1),[ze,Ve]=s();n((()=>{ve(!0),Fe(!0),R.collectionFetcher(fe,w).then((e=>{console.log("collectionsParsed?.collections",null==e?void 0:e.collections),de({type:"fetched",data:(null==e?void 0:e.collections)||{}}),ve(!1),ye((e=>e+1)),Fe(!1)})).catch()}),[]),n((()=>{let e=0;X?Object.keys(we||[]).forEach((t=>{var o;Object.keys((null===(o=we[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&we[-1]&&(null===(c=we[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(we||[]).forEach((t=>{var o;Object.keys((null===(o=we[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=we[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),je(e)}),[le,we,X]),n((()=>{Ce&&(ve(!0),R.productFetcher(Ce,w).then((e=>{Object.keys(e).length&&de({type:"productsFetched",data:{collectionId:Ce,products:e}}),ve(!1)})).catch())}),[Ce]),n((()=>{const e=setTimeout((()=>{"rearrange"!==ae&&(Ie.length||"collections"!==ae)&&(Ie.length?(Oe(!0),R.searchFetcher(w,Ie).then((e=>{"collections"in e&&"products"in e?(Re({type:"set",data:e}),de({type:"searched",data:e.collections})):(Re({type:"set",data:{collections:{},products:e}}),de({type:"searched",data:e})),ue("searchProducts"),ve(!1),Oe(!1)}))):ue("collections"))}),800);return()=>clearTimeout(e)}),[Ie]),n((()=>{J&&(R.onAdd(we,ke),$e())}),[J]),n((()=>{ee&&Object.keys(we||{}).length&&ke&&(R.onAdd(we,ke),$e())}),[ee,we,ke]);const $e=()=>{Ae({type:"reset",data:{}})},Me=()=>z&&ke>z?t(m,{tagText:`You can only select ${z} products`,type:"negative"}):V&&ke>V?t(m,{tagText:`You can only select ${V} products`,type:"negative"}):t(a,ke>0?{onClick:()=>{ue(_?T.RearrangeProducts:T.SelectedProducts)},buttonText:z?`${ke}/${z} products selected`:`${ke} products selected`,buttonType:["rearrange","view"].includes(ae)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(ae)}:{disabled:!0,buttonText:z?`${ke}/${z} products selected`:`${ke} products selected`,buttonType:"tertiaryGray"}),He=e=>Se?"Loading...":ae===T.RearrangeProducts?null!=e?e:"Done":null!=e?e:"Add",We=e(P,Object.assign({style:null!=oe?oe:{}},{children:[R.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:R.postHeader})),!R.hideGlobalSearch&&t(o,{children:("collections"===ae||"searchProducts"===ae)&&t("div",Object.assign({style:{padding:q?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(u,{placeholder:"Search products using name or SKU 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:Ie,onChangeText:e=>{e.length&&e.trim().length?Pe(e):Pe("")}})}))}),e(x,Object.assign({ref:Be,screenName:ae},{children:["collections"===ae&&t(g,{customCollectionRestriction:R.customCollectionRestriction,dataLoading:De,collections:le,selectedCollectionsDispatch:Ae,setCollectionId:ge,setSelectedCollectionId:be,setScreen:ue,selectedCollections:we,collectionFetcher:R.collectionFetcher,storeId:w,collectionsDispatch:de,setSaveDisabled:ve,pagingControls:{curPage:fe,setCurPage:ye},hideCollectionCheckbox:$,renderWithoutModal:q,pickerType:Q,scrollContainerRef:Be}),"products"===ae&&me&&t(k.Provider,Object.assign({value:me},{children:t(b,{hideInCollectionSearch:R.hideInCollectionSearch,customCollectionRestriction:R.customCollectionRestriction,productFetcher:R.productFetcher,setScreen:ue,storeId:w,data:le[me],collectionsDispatch:de,selectedCollectionsDispatch:Ae,selectedData:we,setSaveDisabled:ve,searchInCollectionFetcher:R.searchInCollectionFetcher,hideProductCheckbox:M,outOfStockAction:H,hideVariantCheckbox:W,selectProductsFromCustomCollection:G,renderWithoutModal:q,pickerType:Q,hideProductVariants:X,fbStatusFetcher:R.fbStatusFetcher,onProductDetailClick:e=>{Le(!0),Ve(e)},showProductDetailInfoIcon:te,scrollContainerRef:Be})})),"view"===ae&&t(I,{selectedCollections:we||{},selectedCollectionsDispatch:Ae,setScreen:ue,collections:le,hideProductVariants:X,outOfStockAction:H,storeId:w,fbStatusFetcher:R.fbStatusFetcher}),"rearrange"===ae&&t(f,{selectedCollections:we||{},selectedCollectionsDispatch:Ae,setScreen:ue,outOfStockAction:H,rearrangeViewType:"grid"===he?"list":"grid",scrollContainerRef:Be,storeId:w,fbStatusFetcher:R.fbStatusFetcher}),"searchProducts"===ae&&t(j,{customCollectionRestriction:R.customCollectionRestriction,selectedCollections:we||{},searchedCollections:Te||{},searchedCollectionsDispatch:Re,selectedCollectionsDispatch:Ae,setScreen:ue,collections:le,onBackPress:()=>{Pe(""),Re({type:"set",data:{collections:{},products:{}}})},pickerType:Q,hideProductCheckbox:M,hideProductVariants:X,hideVariantCheckbox:W,storeId:w,fbStatusFetcher:R.fbStatusFetcher,setCollectionId:ge,setSelectedCollectionId:be,renderWithoutModal:q,hideCollectionCheckbox:$,outOfStockAction:H})]}))]}));return t(o,{children:q?e(o,{children:[We,re.renderFooter?e(O,{children:[Me(),t(a,{buttonText:He(re.primaryButtonText),disabled:!re.isLoading&&(Se||ke<1||z&&ke<z||!z&&V&&ke>V)||re.primaryButtonDisabled,isLoading:re.isLoading,onClick:()=>{R.onAdd(we,ke),$e(),ue([T.Collections,T.RearrangeProducts].includes(Z)?Z:T.Collections)}})]}):t(o,{}),Ee&&ze?t(C,{productData:ze,outOfStockAction:H,useDynamicInfoImageSize:R.useDynamicInfoImageSize,onClose:()=>{Le(!1)}}):t(o,{})]}):e(h,Object.assign({zIndex:L,open:E,onClose:()=>{null==B||B(),$e()},headingTitle:N||("collections"===ae||"products"===ae?"Select Products":"view"===ae?"Selected Products":"searchProducts"===ae?"Searched Results":"rearrange"===ae?"Rearrange Products":void 0),headingSubtitle:ne,footerShadow:!0,centralContainerStyles:{width:U||"600px",left:Y||"auto"},headerRightCustomElement:ce?t("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:B},{children:t(d,{width:20,height:20,color:l.content.secondary})})):t(o,{}),footerContainerStyle:R.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:l.surface.standard}:void 0,primaryButton:se?(e=>Object.assign(Object.assign({},e),{disabled:!e.isLoading&&(Se||ke<1||z&&ke<z||!z&&V&&ke>V)||e.disabled,onClick:()=>{R.onAdd(we,ke),$e(),ue([T.Collections,T.RearrangeProducts].includes(Z)?Z:T.Collections)}}))(se):{buttonText:He(),disabled:Se||ke<1||z&&ke<z||!z&&V&&ke>V||!1,onClick:()=>{R.onAdd(we,ke),$e()}},secondaryButton:ie?(e=>Object.assign(Object.assign({},e),{disabled:Se||ke<1||z&&ke<z||!z&&V&&ke>V||!1,onClick:()=>{const e=F(we,le,Te);R.onAdd(e,ke,!0)}}))(ie):void 0,wrapperStyle:R.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:K?t(o,{}):Me(),hideCrossButton:Ee||ce},{children:[We,Ee&&ze?t(C,{productData:ze,useDynamicInfoImageSize:R.useDynamicInfoImageSize,outOfStockAction:H,onClose:()=>{Le(!1)}}):t(o,{})]}))})};export{R as ProductPickerModal,T as ScreenName};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as i,Fragment as o}from"react/jsx-runtime";import{COLORS as e}from"../../constants/Theme.js";import c from"../../assets/icons/info.svg.js";import{CheckBox as d}from"../checkBox/CheckBox.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as
|
|
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 r}from"../tooltips/Tooltip.js";import{TitleSmall as a,BodyCaption as s}from"../TypographyStyle.js";import{CurrencySymbols as u}from"./constants.js";import{ProductHelper as v}from"./helpers/ProductHelper.js";import{ProductPickerTag as p}from"./ProductPickerTag.js";import{ProductCardStyle as h,ProductSubTitle as I,SKUIDBadge as m,EllipsedBodyTiny as y}from"./style.js";import{shouldShowVariant as P}from"./utility.js";const f=o=>{var e,c,d,n,l,r,a,s,v;const{collectionId:p,productId:h,data:I,selectedData:m,selectedCollectionsDispatch:y,viewOnly:f,upliftAdditions:g,isProductPartiallyChecked:b,hideProductCheckbox:j,outOfStockAction:C,hideVariantCheckbox:O,hideProductVariants:D,pickerType:x,onProductDetailClick:S,showProductDetailInfoIcon:T}=o,V=t=>{var i,o,e,c,d,n;if(!(null===(o=null===(i=null==m?void 0:m[p])||void 0===i?void 0:i.products)||void 0===o?void 0:o[h]))return!1;return!!(null===(n=null===(d=null===(c=null===(e=null==m?void 0:m[p])||void 0===e?void 0:e.products)||void 0===c?void 0:c[h])||void 0===d?void 0:d.variants)||void 0===n?void 0:n[t])},A=D||!P(I)?`${I.currency&&null!==(e=u[I.currency])&&void 0!==e?e:""}${null!==(v=null!==(l=null===(n=null===(d=Object.values(null!==(c=I.variants)&&void 0!==c?c:{}))||void 0===d?void 0:d[0])||void 0===n?void 0:n.price)&&void 0!==l?l:null===(s=null===(a=Object.values(null!==(r=I.variants)&&void 0!==r?r:{}))||void 0===a?void 0:a[0])||void 0===s?void 0:s.actualPrice)&&void 0!==v?v:""}`:"";return t("div",{children:[i(k,{isVariant:!1,data:I,productId:h,collectionId:p,isSelected:(()=>{var t,i;return!!(null===(i=null===(t=null==m?void 0:m[p])||void 0===t?void 0:t.products)||void 0===i?void 0:i[h])})(),isPartiallyChecked:b,selectedCollectionsDispatch:y,upliftAdditions:g,viewOnly:f,hideProductCheckbox:j,hideVariantCheckbox:O,hideProductVariants:D,pickerType:x,outOfStockAction:C,onProductDetailClick:S,showProductDetailInfoIcon:T,currencyAndPrice:A},h),D?null:P(I)&&Object.keys(I.variants||[]).map((t=>{var o,e,c,d,n,l,r;const a=`${I.currency&&null!==(o=u[I.currency])&&void 0!==o?o:""}${null!==(r=null!==(d=null===(c=null===(e=I.variants)||void 0===e?void 0:e[t])||void 0===c?void 0:c.price)&&void 0!==d?d:null===(l=null===(n=I.variants)||void 0===n?void 0:n[t])||void 0===l?void 0:l.actualPrice)&&void 0!==r?r:""}`;return i(k,{isVariant:!0,hideVariantCheckbox:O,data:Object.assign(Object.assign({},I.variants[t]),{currency:I.currency}),variantId:t,productId:h,viewOnly:f,upliftAdditions:g,collectionId:p,isSelected:V(t),selectedCollectionsDispatch:y,outOfStockAction:C,onProductDetailClick:S,showProductDetailInfoIcon:T,currencyAndPrice:a},t)}))]})},k=u=>{var P,f;const{isVariant:k,data:g,productId:b,collectionId:j,variantId:C,isSelected:O,selectedCollectionsDispatch:D,viewOnly:x,upliftAdditions:S,isPartiallyChecked:T,hideProductCheckbox:V,outOfStockAction:A,hideVariantCheckbox:w,hideProductVariants:U,pickerType:$="PRODUCT",onProductDetailClick:B,showProductDetailInfoIcon:F,currencyAndPrice:R}=u,{isVariantForProductPickerTag:H,dataForProductPickerTag:K,tagText:L,tagType:q}=v.getDataForProductPickerTag(g,k,A);console.log({data:g});const z=k?g.skuId:null===(f=null===(P=null==g?void 0:g.variants)||void 0===P?void 0:P[0])||void 0===f?void 0:f.skuId;return t(h,Object.assign({isVariant:k,onClick:t=>{if(t.stopPropagation(),"PRODUCT"===$&&(V||w)){const t=Object.keys(g.variants);U?O?D({type:"productUnselected",data:{productId:b,collectionId:j}}):S("productSelected",{productId:b,variantId:C,collectionId:j,product:g}):O?D({type:"variantUnselected",data:{productId:b,variantId:C,collectionId:j}}):S("variantSelected",{productId:b,variantId:C||t[0],collectionId:j,variant:g})}},isActive:O},{children:[k&&!x&&!w||!k&&!x&&!V?i(d,{isChecked:O,isPartiallyChecked:T||!1,onValueChange:function(t,i,o){null==o||o.stopPropagation(),k?t?S(U?"productSelected":"variantSelected",{productId:b,variantId:C,collectionId:j,variant:g}):D({type:U?"productUnselected":"variantUnselected",data:{productId:b,variantId:C,collectionId:j}}):t?S("productSelected",{productId:b,collectionId:j,product:g}):D({type:"productUnselected",data:{productId:b,collectionId:j}})}}):i(o,{}),i("div",{children:i(l,{width:40,height:40,imageUrl:g.image,alt:"Item",borderRadius:4})}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},{children:[i(r,Object.assign({variant:"light",body:g.name,placement:"bottom",delay:400},{children:i(a,Object.assign({numberOfLines:1},{children:g.name}))})),F&&i(n,{onClick:()=>{null==B||B(g)},Icon:()=>i(c,{width:20,height:20,color:e.content.placeholder})})]})),t(I,{children:[i(p,{isVariant:H,data:K,tagText:L,tagType:q}),!(null==K?void 0:K.fbStatus)&&H||L?null:t(o,{children:[i(s,Object.assign({color:e.content.secondary},{children:R})),z&&i(r,Object.assign({body:z,placement:"top"},{children:i(m,{children:i(y,{children:`SKU ID: ${z}`})})}))]})]})]}))]}))};export{k as ProductCard,f as ProductGroup};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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 a from"../../assets/icons/cross.svg.js";import{IconButton as e}from"../icon-button/IconButton.js";import{ShimmerImage as
|
|
1
|
+
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 a from"../../assets/icons/cross.svg.js";import{IconButton as e}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleRegular as c,BodyCaption as l}from"../TypographyStyle.js";import{CurrencySymbols as s}from"./constants.js";import{ProductHelper as u}from"./helpers/ProductHelper.js";import{ProductPickerTag as p}from"./ProductPickerTag.js";import{SKUIDBadge as m,EllipsedBodyTiny as v}from"./style.js";import{shouldShowVariant as g}from"./utility.js";const f=i=>o(h,{children:[t(y,{}),t(D,{children:t(e,{className:"close-button",onClick:i.onClose,Icon:a,width:20,height:20})}),t(x,{productData:i.productData,outOfStockAction:i.outOfStockAction,useDynamicInfoImageSize:i.useDynamicInfoImageSize})]}),x=i=>{var a,e,f,x,h,y,D,I,P,T,S,O,w,$,z,A,F,C,H;const N=void 0===i.productData.variants;let U;if(N)U=`${i.productData.currency&&null!==(a=s[i.productData.currency])&&void 0!==a?a:""}${null!==(h=null!==(f=null===(e=i.productData)||void 0===e?void 0:e.price)&&void 0!==f?f:null===(x=i.productData)||void 0===x?void 0:x.actualPrice)&&void 0!==h?h:""}`;else{const o=null===(y=i.productData)||void 0===y?void 0:y.currency;U=`${o&&null!==(D=s[o])&&void 0!==D?D:""}${null!==(z=null!==(S=null===(T=null===(P=Object.values(null!==(I=i.productData.variants)&&void 0!==I?I:{}))||void 0===P?void 0:P[0])||void 0===T?void 0:T.price)&&void 0!==S?S:null===($=null===(w=Object.values(null!==(O=i.productData.variants)&&void 0!==O?O:{}))||void 0===w?void 0:w[0])||void 0===$?void 0:$.actualPrice)&&void 0!==z?z:""}`}const{isVariantForProductPickerTag:V,dataForProductPickerTag:_,tagText:B,tagType:K}=u.getDataForProductPickerTag(i.productData,N,i.outOfStockAction);console.log({productData:i.productData});const L=N?i.productData.skuId:null===(C=null===(F=null===(A=i.productData)||void 0===A?void 0:A.variants)||void 0===F?void 0:F[0])||void 0===C?void 0:C.skuId;return o(b,{children:[t(j,{children:t(n,{useDynamicInfoImageSize:i.useDynamicInfoImageSize,imageUrl:i.productData.image,width:200,height:200,borderRadius:4})}),o(k,{children:[L&&t(d,Object.assign({body:L,placement:"top"},{children:t(m,{children:t(v,{children:`SKU ID: ${L}`})})})),t(c,Object.assign({style:{display:"flex"}},{children:i.productData.name})),t(l,Object.assign({color:r.content.secondary},{children:`Product ID: ${i.productData.id}`})),t(l,{className:"overlay-description",dangerouslySetInnerHTML:{__html:null!==(H=i.productData.description)&&void 0!==H?H:""}}),t(l,Object.assign({color:r.content.secondary},{children:N?U:g(i.productData)?null:U})),t(p,{isVariant:V,data:_,tagText:B,tagType:K})]})]})},h=i.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex: 1;
|
|
4
4
|
background: rgba(0, 0, 0, 0.5);
|
|
@@ -17,11 +17,11 @@ import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-component
|
|
|
17
17
|
word-break: break-word;
|
|
18
18
|
margin-top: 8px;
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
20
|
+
`,y=i.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
flex: 1;
|
|
23
23
|
background: rgba(0, 0, 0, 0.5);
|
|
24
|
-
`,
|
|
24
|
+
`,D=i.div`
|
|
25
25
|
position: relative;
|
|
26
26
|
|
|
27
27
|
.close-button {
|
|
@@ -32,26 +32,21 @@ import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-component
|
|
|
32
32
|
background: ${r.surface.standard};
|
|
33
33
|
border-radius: 50%;
|
|
34
34
|
}
|
|
35
|
-
`,
|
|
35
|
+
`,b=i.div`
|
|
36
36
|
display: flex;
|
|
37
37
|
background: white;
|
|
38
38
|
padding: 24px;
|
|
39
39
|
gap: 24px;
|
|
40
40
|
border-radius: 8px 8px 0px 0px;
|
|
41
|
-
`,
|
|
41
|
+
`,j=i.div`
|
|
42
42
|
display: flex;
|
|
43
43
|
max-width: min(50%, 200px);
|
|
44
44
|
flex-direction: column;
|
|
45
45
|
justify-content: center;
|
|
46
46
|
align-items: center;
|
|
47
|
-
`,
|
|
47
|
+
`,k=i.div`
|
|
48
48
|
display: flex;
|
|
49
49
|
flex: 1;
|
|
50
50
|
flex-direction: column;
|
|
51
51
|
gap: 4px;
|
|
52
|
-
|
|
53
|
-
width: fit-content;
|
|
54
|
-
background: ${r.background.brandLight};
|
|
55
|
-
padding: 2px 6px;
|
|
56
|
-
border-radius: 14px;
|
|
57
|
-
`;export{v as ProductInfoCard,g as ProductInfoOverlay};
|
|
52
|
+
`;export{x as ProductInfoCard,f as ProductInfoOverlay};
|
|
@@ -23,3 +23,9 @@ export declare const VariantCardListStyle: import("styled-components").StyledCom
|
|
|
23
23
|
export declare const VariantCardGridStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
24
24
|
export declare const StyledHeaderRightIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
25
25
|
export declare const StyledFooterForNonModal: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
26
|
+
export declare const SKUIDBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
27
|
+
export declare const EllipsedBodyTiny: import("styled-components").StyledComponent<"div", any, {
|
|
28
|
+
numberOfLines?: number | undefined;
|
|
29
|
+
color?: string | undefined;
|
|
30
|
+
}, never>;
|
|
31
|
+
export declare const ProductSubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{
|
|
1
|
+
import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{BodyTiny as t}from"../TypographyStyle.js";import{ScreenName as o}from"./modal.js";const n=e.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
background-color: white;
|
|
4
4
|
height: ${e=>e.renderWithoutModal?"90%":"75vh"};
|
|
5
5
|
flex-direction: column;
|
|
6
|
-
`,
|
|
6
|
+
`,r=e.div`
|
|
7
7
|
overflow-y: scroll;
|
|
8
8
|
overflow-x: hidden;
|
|
9
9
|
|
|
@@ -13,10 +13,10 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
::-webkit-scrollbar-thumb {
|
|
16
|
-
background-color: ${e=>e.screenName!==
|
|
16
|
+
background-color: ${e=>e.screenName!==o.RearrangeProducts?"#888":"#fff"};
|
|
17
17
|
border-radius: 8px;
|
|
18
18
|
}
|
|
19
|
-
`,
|
|
19
|
+
`,d=e.div`
|
|
20
20
|
height: 64px;
|
|
21
21
|
background-color: ${e=>e.isDisabled?"#F0F0F0":e.isActive?i.background.positive.light:"white"};
|
|
22
22
|
border-bottom: 1px solid #e0e0e0;
|
|
@@ -30,17 +30,17 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
30
30
|
cursor: pointer;
|
|
31
31
|
background-color: ${i.surface.hovered};
|
|
32
32
|
}
|
|
33
|
-
`,
|
|
33
|
+
`,p=e.div`
|
|
34
34
|
display: flex;
|
|
35
35
|
flex-direction: row;
|
|
36
36
|
justify-content: center;
|
|
37
37
|
align-items: center;
|
|
38
38
|
column-gap: 18px;
|
|
39
|
-
`,
|
|
39
|
+
`,l=e.div`
|
|
40
40
|
display: flex;
|
|
41
41
|
flex-direction: column;
|
|
42
42
|
justify-content: center;
|
|
43
|
-
`,
|
|
43
|
+
`,a=e.div`
|
|
44
44
|
display: flex;
|
|
45
45
|
flex-direction: row;
|
|
46
46
|
max-height: 32px;
|
|
@@ -60,7 +60,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
60
60
|
padding: 12px 16px;
|
|
61
61
|
border-bottom: 1px solid #e0e0e0;
|
|
62
62
|
align-items: center;
|
|
63
|
-
`,
|
|
63
|
+
`,s=e.div`
|
|
64
64
|
min-height: 64px;
|
|
65
65
|
background-color: ${e=>e.isActive?i.background.positive.light:"white"};
|
|
66
66
|
border-bottom: 1px solid #e0e0e0;
|
|
@@ -75,7 +75,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
75
75
|
cursor: pointer;
|
|
76
76
|
background-color: ${i.surface.hovered};
|
|
77
77
|
}
|
|
78
|
-
`,
|
|
78
|
+
`,x=e.div`
|
|
79
79
|
display: flex;
|
|
80
80
|
flex-direction: row;
|
|
81
81
|
max-height: 32px;
|
|
@@ -87,10 +87,10 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
87
87
|
position: sticky;
|
|
88
88
|
top: 0;
|
|
89
89
|
z-index: 10;
|
|
90
|
-
`,
|
|
90
|
+
`,g=e.div`
|
|
91
91
|
display: flex;
|
|
92
92
|
flex-direction: column;
|
|
93
|
-
`,
|
|
93
|
+
`,f=e.div`
|
|
94
94
|
min-height: 72px;
|
|
95
95
|
background: white;
|
|
96
96
|
padding: 12px 16px;
|
|
@@ -111,7 +111,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
111
111
|
flex-direction: column;
|
|
112
112
|
gap: 2px;
|
|
113
113
|
}
|
|
114
|
-
`,
|
|
114
|
+
`,h=e.div`
|
|
115
115
|
height: 72px;
|
|
116
116
|
width: 72px;
|
|
117
117
|
display: flex;
|
|
@@ -134,4 +134,21 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
134
134
|
justify-content: space-between;
|
|
135
135
|
margin-top: auto;
|
|
136
136
|
width: 100%;
|
|
137
|
-
|
|
137
|
+
`,m=e.div`
|
|
138
|
+
width: fit-content;
|
|
139
|
+
background: ${i.background.brandLight};
|
|
140
|
+
padding: 2px 6px;
|
|
141
|
+
border-radius: 14px;
|
|
142
|
+
`,b=e(t)`
|
|
143
|
+
white-space: nowrap;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
text-overflow: ellipsis;
|
|
146
|
+
max-width: 196px;
|
|
147
|
+
display: block;
|
|
148
|
+
color: ${i.background.inverseLight};
|
|
149
|
+
`,y=e.div`
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-direction: row;
|
|
152
|
+
align-items: center;
|
|
153
|
+
gap: 5px;
|
|
154
|
+
`;export{l as CollectionCardDetailStyle,p as CollectionCardInfoStyle,d as CollectionCardStyle,g as CollectionNameHolder,n as ContainerStyle,b as EllipsedBodyTiny,s as ProductCardStyle,c as ProductScreenCollectionCardStyle,a as ProductScreenHeader,y as ProductSubTitle,m as SKUIDBadge,r as ScrollContainerStyle,x as SelectedScreenHeader,u as StyledFooterForNonModal,h as VariantCardGridStyle,f as VariantCardListStyle};
|