hasting-swatchcart-module 1.0.20 → 1.0.21

package/dist/cdn/main.js

@@ -30855,23 +30855,32 @@ const R4 = (e) => /* @__PURE__ */ x.jsx(
 }, ox = ({
   isOpen: e,
   onClose: t
-}) => /* @__PURE__ */ x.jsx(P4, { isOpen: e, onClose: t, width: 320, children: /* @__PURE__ */ x.jsxs("div", { children: [
-  /* @__PURE__ */ x.jsxs("div", { className: "text-sm font-medium p-[var(--sm-padding)] border-b border-[var(--border)] leading-[20px]", children: [
-    /* @__PURE__ */ x.jsx("p", { className: "mb-4", children: "You've reached your maximum number of swatches!" }),
-    /* @__PURE__ */ x.jsx("p", { children: "You can remove an existing swatch if you’d like to add a new one." })
-  ] }),
-  /* @__PURE__ */ x.jsx("div", { className: "p-[var(--sm-padding)] w-full", children: /* @__PURE__ */ x.jsx(
-    "button",
-    {
-      className: `\r
-        w-full block py-3 rounded-full\r
-        bg-[var(--main-accent-color)] text-white font-bold capitalize\r
+}) => /* @__PURE__ */ x.jsx(
+  P4,
+  {
+    isOpen: e,
+    onClose: t,
+    width: 320,
+    title: "Swatch Limit",
+    children: /* @__PURE__ */ x.jsxs("div", { children: [
+      /* @__PURE__ */ x.jsxs("div", { className: "text-sm font-medium p-[var(--sm-padding)] border-b border-[var(--border)] leading-[20px]", children: [
+        /* @__PURE__ */ x.jsx("p", { className: "mb-4", children: "You've reached your maximum number of swatches!" }),
+        /* @__PURE__ */ x.jsx("p", { children: "If you'd like to add another swatch please remove an exsiting swach from your cart" })
+      ] }),
+      /* @__PURE__ */ x.jsx("div", { className: "p-[var(--sm-padding)] w-full", children: /* @__PURE__ */ x.jsx(
+        "button",
+        {
+          className: `
+        w-full block py-3 rounded-full
+        bg-[var(--main-accent-color)] text-white font-bold capitalize
           `,
-      onClick: t,
-      children: "OK"
-    }
-  ) })
-] }) }), L4 = ({
+          onClick: t,
+          children: "OK"
+        }
+      ) })
+    ] })
+  }
+), L4 = ({
   containerStyles: e = "flex-1 min-h-0 overflow-y-auto p-[var(--padding)] sm:p-[var(--sm-padding)] ",
   gridStyles: t = "grid grid-cols-1 gap-[8px] sm:grid-cols-3",
   desktopColumnsCount: n = 3

package/dist/main.cjs

@@ -139,9 +139,9 @@ ${String(i).trim()}
         `,children:m.jsx(OA,{})})]},e.assetId),m.jsxs("div",{className:"mt-3 flex flex-col",children:[m.jsxs("span",{className:"mb-1 text-xs font-semibold leading-[14px]",children:[e.metadata?.label||e.label," "]}),m.jsxs("span",{className:"text-[10px] font-medium leading-[12px]",children:[e.parentName," "]})]})]})},RA=({isOpen:e,onClose:t,title:n="Message",width:r,height:a,children:s})=>{const i=M.useRef(null);return M.useEffect(()=>{const o=l=>{i.current&&!i.current.contains(l.target)&&t()};return e&&document.addEventListener("mousedown",o),()=>{document.removeEventListener("mousedown",o)}},[e,t]),e?Yt.createPortal(m.jsx("div",{className:"fixed inset-0 z-9999 flex items-center justify-center bg-black/40 p-4",children:m.jsxs("div",{ref:i,className:`\r
           bg-white rounded-2xl shadow-xl flex flex-col overflow-hidden\r
           max-w-[90vw] max-h-[90vh]\r
-        `,style:{width:r||"auto",height:a||"auto"},children:[m.jsxs("div",{className:"flex items-center justify-between p-[var(--sm-padding)] border-b border-[var(--border)]",children:[m.jsx("span",{className:"text-base font-semibold text-[var(--text)]",children:n}),m.jsx("button",{onClick:t,className:"flex justify-center items-center p-1 rounded-full bg-[var(--border)] hover:bg-gray-100 transition [&_svg_path]:stroke-[var(--svg-dark)] w-[30px] h-[30px]",children:m.jsx(lr,{className:"text-[var(--text)] ",width:10,hanging:10})})]}),m.jsx("div",{className:"flex flex-col gap-3 text-[var(--text-muted)]",children:s})]})}),document.body):null},bf=({isOpen:e,onClose:t})=>m.jsx(RA,{isOpen:e,onClose:t,width:320,children:m.jsxs("div",{children:[m.jsxs("div",{className:"text-sm font-medium p-[var(--sm-padding)] border-b border-[var(--border)] leading-[20px]",children:[m.jsx("p",{className:"mb-4",children:"You've reached your maximum number of swatches!"}),m.jsx("p",{children:"You can remove an existing swatch if you’d like to add a new one."})]}),m.jsx("div",{className:"p-[var(--sm-padding)] w-full",children:m.jsx("button",{className:`\r
-        w-full block py-3 rounded-full\r
-        bg-[var(--main-accent-color)] text-white font-bold capitalize\r
+        `,style:{width:r||"auto",height:a||"auto"},children:[m.jsxs("div",{className:"flex items-center justify-between p-[var(--sm-padding)] border-b border-[var(--border)]",children:[m.jsx("span",{className:"text-base font-semibold text-[var(--text)]",children:n}),m.jsx("button",{onClick:t,className:"flex justify-center items-center p-1 rounded-full bg-[var(--border)] hover:bg-gray-100 transition [&_svg_path]:stroke-[var(--svg-dark)] w-[30px] h-[30px]",children:m.jsx(lr,{className:"text-[var(--text)] ",width:10,hanging:10})})]}),m.jsx("div",{className:"flex flex-col gap-3 text-[var(--text-muted)]",children:s})]})}),document.body):null},bf=({isOpen:e,onClose:t})=>m.jsx(RA,{isOpen:e,onClose:t,width:320,title:"Swatch Limit",children:m.jsxs("div",{children:[m.jsxs("div",{className:"text-sm font-medium p-[var(--sm-padding)] border-b border-[var(--border)] leading-[20px]",children:[m.jsx("p",{className:"mb-4",children:"You've reached your maximum number of swatches!"}),m.jsx("p",{children:"If you'd like to add another swatch please remove an exsiting swach from your cart"})]}),m.jsx("div",{className:"p-[var(--sm-padding)] w-full",children:m.jsx("button",{className:`
+        w-full block py-3 rounded-full
+        bg-[var(--main-accent-color)] text-white font-bold capitalize
           `,onClick:t,children:"OK"})})]})}),LA=({containerStyles:e="flex-1 min-h-0 overflow-y-auto p-[var(--padding)] sm:p-[var(--sm-padding)] ",gridStyles:t="grid grid-cols-1 gap-[8px] sm:grid-cols-3",desktopColumnsCount:n=3})=>{const r=Pe(),a=M.useRef(null),s=oe(ur),i=oe(Tn),o=oe(na),l=oe(yn),[c,d]=M.useState(!1),f=M.useMemo(()=>l.flatMap(F=>F.items),[l]),p=M.useMemo(()=>s.filter(F=>{const K=i.Finish.length===0||i.Finish.some($=>F.metadata?.Finish===$||F.metadata?.Material===$),W=i.Color.length===0||F.metadata?.Color&&i.Color.some($=>F.metadata?.Color?.split(",").map(B=>B.trim()).includes($)),H=F.metadata?.Look,Q=!i.Look||i.Look.length===0||i.Look.some($=>H&&H.includes($));return K&&W&&Q}),[i,s]),h=typeof window<"u"?window.matchMedia("(min-width: 640px)").matches:!1,y=h?n:1,g=Math.ceil(p.length/y),S=h?300:200,E=gf({count:g,getScrollElement:()=>a.current,estimateSize:()=>S,overscan:24,measureElement:F=>F?.getBoundingClientRect().height}),x=E.getVirtualItems(),I=E.getTotalSize(),k=x[0]?.index??0,P=x[x.length-1]?.index??-1,w=k*y,L=Math.min((P+1)*y,p.length),R=p.slice(w,L),z=x[0]?.start??0,G=I-(x[x.length-1]?.end??0),q=F=>{if(!o)return;const K=l.find(Q=>o.assetId===Q.assetId),W=Q=>Q.metadata?.label===F.metadata?.label&&Q.parentName===F.parentName,H=f.some(W);if(!H&&f.length>=5&&d(!0),H){const Q=f.filter(ue=>!W(ue)),B={assetId:l.find(ue=>ue.items.some(N=>N.metadata?.label===F.metadata?.label&&N.parentName===F.parentName))?.assetId||o.assetId,name:o.name,items:Q};r(rs(B)),r(as(B))}else if(f.length<5){const Q={...F,count:1},$=K?[...K.items,Q]:[Q],B={assetId:o.assetId,name:o.name,items:$};r(rs(B)),r(as(B))}};return m.jsxs("div",{ref:a,className:e,children:[m.jsx(bf,{isOpen:c,onClose:()=>d(!1)}),m.jsx("div",{style:{height:z},"aria-hidden":!0}),m.jsx("div",{className:t,children:R.map((F,K)=>{const W=w+K,H=`${F.metadata?.label||W}/${F.parentName}`;return(W+1)%y===0||W===p.length-1?m.jsx("div",{ref:E.measureElement,children:m.jsx(Qr,{val:F,onClick:q})},H):m.jsx(Qr,{val:F,onClick:q},H)})}),m.jsx("div",{style:{height:G},"aria-hidden":!0})]})},PA=()=>{const e=Pe(),t=oe(na);M.useEffect(()=>()=>{e(bh())},[]);const n=()=>{e(Th())};return m.jsxs("div",{className:"flex h-full flex-col",children:[m.jsx("header",{className:"flex shrink-0 items-center justify-between border-b border-[var(--border)] p-[var(--sm-padding)]",children:m.jsxs("div",{className:"flex items-center gap-2",children:[m.jsx("button",{className:"[&_svg_path]:stroke-[var(--main-accent-color)] cursor-pointer",onClick:n,children:m.jsx(Vs,{})}),m.jsx("h2",{className:"m-0 text-base font-medium leading-[1.6]",children:t?.name})]})}),m.jsxs("div",{className:"flex min-h-0 flex-1 flex-col",children:[m.jsx("div",{className:"shrink-0",children:m.jsx(TA,{})}),m.jsx(LA,{containerStyles:"flex-1 min-h-0 overflow-y-auto overscroll-contain p-[var(--sm-padding)]",gridStyles:"grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9",desktopColumnsCount:6}),m.jsx(rf,{})]})]})},DA=({onSendData:e})=>{const t=oe(Dh),n=oe(na);return m.jsx(m.Fragment,{children:t?m.jsx(vp,{onSendData:e}):n?m.jsx(PA,{}):m.jsx(lA,{})})},Gr={SWATCH:"swatch",CART:"cart"},MA="_overlay_1ngc4_1",FA="_panel_1ngc4_10",BA="_enter_1ngc4_38",HA="_exit_1ngc4_42",zn={overlay:MA,panel:FA,enter:BA,exit:HA},Ef=({children:e,isOpen:t,setIsOpen:n})=>{const r=M.useRef(null),a=M.useRef(null),s=()=>n(!1);return M.useLayoutEffect(()=>{t&&typeof document<"u"&&(a.current=document.activeElement)},[t]),M.useEffect(()=>{t?r.current?.focus():a.current?.focus?.()},[t]),M.useEffect(()=>{if(!t)return;const i=o=>{o.key==="Escape"&&s()};return window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i)},[t]),M.useEffect(()=>{if(!t)return;const i=document.documentElement,o=document.body,l=i.style.overflow,c=o.style.overflow;return i.style.overflow="hidden",o.style.overflow="hidden",()=>{i.style.overflow=l,o.style.overflow=c}},[t]),t?Yt.createPortal(m.jsx("div",{className:xt(zn.overlay),onMouseDown:s,onTouchStart:s,children:m.jsx("div",{ref:r,tabIndex:-1,className:ke(zn.panel,zn.right,t?zn.enter:zn.exit,"bg-[var(--sidebar-bg)]"),onMouseDown:i=>i.stopPropagation(),onTouchStart:i=>i.stopPropagation(),children:e})}),document.body):null};class UA{static getCartPreparedOption(t){return t?.length?t.map(n=>({...n,count:1})):[]}}const jA=()=>m.jsx("div",{className:["relative w-10 h-10 rounded-sm aspect-square overflow-hidden","border border-solid border-[var(--border)] bg-[var(--sidebar-b)] sm:w-16 sm:h-16"].join(" "),"aria-hidden":!0}),zA=({selectedMaterials:e,containerStyles:t="p-[var(--sm-padding)] border-t border-solid border-[var(--border)] shrink-0 shadow-[0_-2px_10px_rgba(40,40,40,0.10)]"})=>{const n=Pe(),r=s=>{n(ta({selectedMaterial:s}))},a=Math.max(0,Re-e.length);return m.jsxs("div",{className:t,children:[m.jsxs("div",{className:"flex justify-between items-center mb-3",children:[m.jsxs("div",{className:"relative w-30",children:[m.jsx("div",{className:"",children:"Swatches list"}),m.jsx("span",{className:"absolute top-0 right-[-6px] font-medium text-[var(--main-accent-color)] text-[8px] leading-none",children:"Free"})]}),m.jsxs("div",{children:[e.length,"/",Re," Selected"]})]}),m.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.map((s,i)=>{const o=s.metadata;return m.jsx(nf,{val:s,onDelete:r},`${o?.label||i}/${s.parentName}`)}),Array.from({length:a}).map((s,i)=>m.jsx(jA,{},`mock-${i}`))]})]})},WA=()=>{const e=oe(ws)??[];return m.jsx(zA,{selectedMaterials:e})},VA=({containerStyles:e="flex-1 min-h-0 overflow-y-auto p-[var(--sm-padding)]",gridStyles:t="grid grid-cols-2 gap-[var(--sm-padding)] sm:grid-cols-3 ",desktopColumnsCount:n=3})=>{const r=En.useDispatch(),a=M.useRef(null),s=oe(ur),i=oe(Tn),[o,l]=M.useState(!1),c=M.useMemo(()=>s.filter(z=>{const G=i.Finish.length===0||i.Finish.some(W=>z.metadata?.Finish===W||z.metadata?.Material===W),q=i.Color.length===0||z.metadata?.Color&&i.Color.some(W=>z.metadata?.Color?.split(",").map(H=>H.trim()).includes(W)),F=z.metadata?.Look,K=!i.Look||i.Look.length===0||i.Look.some(W=>F&&F.includes(W));return G&&q&&K}),[i,s]),d=typeof window<"u"?window.matchMedia("(min-width: 640px)").matches:!1,f=d?n:1,p=Math.ceil(c.length/f),h=d?300:200,y=gf({count:p,getScrollElement:()=>a.current,estimateSize:()=>h,overscan:24,measureElement:z=>z?.getBoundingClientRect().height}),g=y.getVirtualItems(),S=y.getTotalSize(),E=g[0]?.index??0,x=g[g.length-1]?.index??-1,I=E*f,k=Math.min((x+1)*f,c.length),P=c.slice(I,k),w=g[0]?.start??0,L=S-(g[g.length-1]?.end??0),R=z=>{r(ta({selectedMaterial:z,limitCb:()=>l(!0)}))};return m.jsxs("div",{ref:a,className:e,children:[m.jsx(bf,{isOpen:o,onClose:()=>l(!1)}),m.jsx("div",{style:{height:w},"aria-hidden":!0}),m.jsx("div",{className:t,children:P.map((z,G)=>{const q=I+G,F=`${z.metadata?.label||q}/${z.parentName}`;return(q+1)%f===0||q===c.length-1?m.jsx("div",{ref:y.measureElement,children:m.jsx(Qr,{val:z,onClick:R})},F):m.jsx(Qr,{val:z,onClick:R},F)})}),m.jsx("div",{style:{height:L},"aria-hidden":!0})]})},YA=({isOpen:e,onToggleSidebar:t,onSetActiveTab:n})=>{const r=Pe(),a=oe(ws)??[],s=oe(Yu),i=()=>{const o=UA.getCartPreparedOption(a);o&&r(Ch(o)),n(Gr.CART)};return m.jsxs(Ef,{isOpen:e,setIsOpen:t,children:[m.jsxs("header",{className:"flex p-[var(--sm-padding)] justify-between items-center border-b border-solid border-[var(--border)]",children:[m.jsx("h2",{className:"m-0 text-[16px] leading-[1.6] font-medium",children:"Order free swatches"}),m.jsx("button",{className:`flex justify-center items-center w-[30px] h-[30px] bg-[var(--background-grey)]\r
               border-none cursor-pointer rounded-full\r
               [&_svg_path]:stroke-[var(--svg-dark)]`,onClick:t,children:m.jsx(lr,{width:10,height:10})})]}),m.jsxs("div",{className:"flex flex-col h-full min-h-0 relative",children:[s&&m.jsx(tf,{}),m.jsx(hf,{containerStyles:"flex justify-between items-center shrink-0 p-[var(--sm-padding)] border-b border-solid border-[var(--border)]",selectStyles:"min-w-[auto] max-w-[154px] sm:max-w-[auto] sm:min-w-[250px]"}),m.jsx(mf,{}),m.jsx(VA,{}),m.jsx(WA,{}),m.jsx("div",{className:"p-[var(--sm-padding)] border-t border-solid border-[var(--border)] shrink-0",children:m.jsx("button",{className:"w-full bg-[var(--main-accent-color)] text-white py-3 rounded-full font-bold cursor-pointer",onClick:i,children:"ADD SWATCHES TO CART"})})]})]})},Kr=e=>e.cart.items,Tf=Ge.createSelector(Kr,e=>e.reduce((t,n)=>t+n.count,0)),qA=Ge.createSelector(Tf,e=>Math.max(0,Re-e)),XA=Ge.createSelector(qA,e=>e>0),QA=({onSetActiveTab:e,onToggleSidebar:t})=>{const n=oe(Tf);return m.jsxs("header",{className:"flex MaterialMultiProductList justify-between items-center border-b border-solid border-[var(--border)] p-[var(--sm-padding)]",children:[m.jsxs("div",{className:"flex items-center flex-row  gap-[4px]",children:[m.jsxs("div",{className:"flex items-center gap-2",children:[m.jsx("button",{className:"[&_svg_path]:stroke-[var(--main-accent-color)] cursor-pointer",onClick:()=>e&&e(Gr.SWATCH),children:m.jsx(Vs,{})}),m.jsx("h2",{className:"m-0 text-base leading-[1.6] font-medium ",children:"Your cart"})]}),n>=Re?m.jsxs(m.Fragment,{children:[m.jsxs("span",{className:"text-[var(--main-accent-color)] hidden text-xs sm:block",children:["(",Re,") You reached maximum amount of swatches"]}),m.jsxs("span",{className:"text-[var(--main-accent-color)] block sm:hidden",children:["(",Re,") Max"]})]}):null]}),m.jsx("button",{className:`flex justify-center items-center w-[30px] h-[30px] bg-[var(--background-grey)]\r