hasting-swatchcart-module 0.0.2 → 0.0.3

package/dist/src/features/swatches/ui/Filters/MaterialsFilter.js

@@ -0,0 +1,47 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useState as u, useEffect as f } from "react";
+import { useAppDispatch as h, useAppSelector as r } from "../../../../app/store/store.js";
+import { MultiSelect as d } from "../../../../shared/ui/MultiSelect/MultiSelect.js";
+import { getMaterialSelectStateFilters as M, getAllMaterialValues as g } from "../../model/selectors.js";
+import { setMaterialSelect as F } from "../../model/swatchesSlice.js";
+const v = () => {
+  const i = h(), o = r(M), a = r(g), [s, n] = u([]);
+  f(() => {
+    if (a?.length) {
+      const e = [
+        ...new Set(
+          a.map(
+            (t) => t.metadata?.Finish || t.metadata?.Material
+          )
+        )
+      ].filter(Boolean).map((t) => {
+        const p = a.filter(
+          (l) => l.metadata?.Finish === t || l.metadata?.Material === t
+        ).length;
+        return {
+          value: t,
+          label: t,
+          count: p
+        };
+      });
+      e?.length && n(e);
+    }
+  }, [a]);
+  const m = (e, t) => {
+    i(F({ filterName: e, values: t }));
+  };
+  return /* @__PURE__ */ c(
+    d,
+    {
+      options: s,
+      values: o.Finish,
+      onValueChange: (e) => m("Finish", e),
+      placeholder: "Material",
+      className: "max-w-[100px] sm:max-w-[auto] sm:min-w-[160px]",
+      dropdownWidth: "w-80"
+    }
+  );
+};
+export {
+  v as MaterialsFilter
+};

package/dist/src/features/swatches/ui/Filters/index.js

@@ -0,0 +1,12 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { MaterialsFilter as i } from "./MaterialsFilter.js";
+import { ColorsFilter as s } from "./ColorsFilter.js";
+import { LooksFilter as e } from "./LooksFilter.js";
+const f = ({ containerStyles: o }) => /* @__PURE__ */ t("div", { className: o, children: [
+  /* @__PURE__ */ r(i, {}),
+  /* @__PURE__ */ r(s, {}),
+  /* @__PURE__ */ r(e, {})
+] });
+export {
+  f as Filters
+};

package/dist/src/features/swatches/ui/HexGridZoom/HexGridZoom.js

@@ -0,0 +1,50 @@
+import { jsxs as a, Fragment as m, jsx as o } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { AttributeHelper as s } from "../../lib/AttributeHelper.js";
+import { Dialog as p, DialogContent as u, DialogHeader as f, DialogTitle as g } from "../../../../shared/ui/Dialog/Dialog.js";
+const w = ({ item: e }) => {
+  const [r, h] = l(null), [n, i] = l(!1), d = "#f2f1f1", t = s.getHexColor(e);
+  return /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: "group relative w-full h-full aspect-video overflow-hidden shadow-sm group cursor-pointer rounded-sm",
+        style: { backgroundColor: t || d }
+      }
+    ),
+    /* @__PURE__ */ o(
+      p,
+      {
+        open: !!n,
+        onOpenChange: () => {
+          i(!1);
+        },
+        children: /* @__PURE__ */ a(
+          u,
+          {
+            className: "sm:max-w-5xl",
+            onClick: (c) => c.stopPropagation(),
+            children: [
+              /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(g, { className: "sr-only", children: "Hex Color" }) }),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "w-full aspect-video rounded",
+                  style: { backgroundColor: r || "transparent" }
+                }
+              ),
+              t && /* @__PURE__ */ a("span", { className: "text-white mt-2 block", children: [
+                " ",
+                (e?.metadata?.Material || e?.metadata?.Material) && `${e.metadata?.Material} | `,
+                s.getAttributeLabel(e)
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  w as HexGridZoom
+};

package/dist/src/features/swatches/ui/ImageGridZoom/ImageGridZoom.js

@@ -0,0 +1,45 @@
+import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { AttributeHelper as s } from "../../lib/AttributeHelper.js";
+import { Dialog as g, DialogContent as p, DialogHeader as h, DialogTitle as u } from "../../../../shared/ui/Dialog/Dialog.js";
+const b = ({ item: a }) => {
+  const [n, f] = r(""), [i, m] = r(!1), l = s.getImage(a), t = s.getValueLabel(a);
+  return /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ e("div", { className: "group relative w-full h-full aspect-video overflow-hidden shadow-sm group cursor-pointer rounded-sm", children: l && /* @__PURE__ */ e(
+      "img",
+      {
+        src: l,
+        alt: t,
+        className: "w-full h-full object-cover",
+        loading: "lazy"
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      g,
+      {
+        open: !!i,
+        onOpenChange: () => {
+          m(!1);
+        },
+        children: /* @__PURE__ */ o(
+          p,
+          {
+            className: "sm:max-w-5xl",
+            onClick: (c) => c.stopPropagation(),
+            children: [
+              /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(u, { className: "sr-only", children: "Image Zoom" }) }),
+              /* @__PURE__ */ e("img", { src: n, alt: "Zoomed", className: "w-full h-auto" }),
+              /* @__PURE__ */ o("span", { className: "text-white mt-2 block", children: [
+                (a?.metadata?.Finish || a?.metadata?.Material) && `${a.metadata?.Finish || a.metadata?.Material} | `,
+                t
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  b as ImageGridZoom
+};

package/dist/src/features/swatches/ui/MaterialList/index.js

@@ -0,0 +1,39 @@
+import { jsxs as V, jsx as n } from "react/jsx-runtime";
+import { useRef as F, useMemo as N } from "react";
+import { useVirtualizer as b } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { useAppSelector as f } from "../../../../app/store/store.js";
+import { getAllMaterialValues as j, getMaterialSelectStateFilters as A } from "../../model/selectors.js";
+import { MaterialListItem as w } from "../MaterialListItem/MaterialListItem.js";
+const G = ({
+  containerStyles: x = "flex-1 min-h-0 overflow-y-auto p-[var(--padding)] sm:p-[var(--sm-padding)]",
+  gridStyles: k = "grid grid-cols-1 gap-[8px] sm:grid-cols-3",
+  desktopColumnsCount: M = 3
+}) => {
+  const m = F(null), h = f(j), e = f(A), a = N(() => h.filter((t) => {
+    const d = e.Finish.length === 0 || e.Finish.some(
+      (s) => t.metadata?.Finish === s || t.metadata?.Material === s
+    ), i = e.Color.length === 0 || t.metadata?.Color && e.Color.some(
+      (s) => t.metadata?.Color?.split(",").map((O) => O.trim()).includes(s)
+    ), r = t.metadata?.Look, g = !e.Look || e.Look.length === 0 || e.Look.some(
+      (s) => r && r.includes(s)
+    );
+    return d && i && g;
+  }), [e, h]), u = typeof window < "u" ? window.matchMedia("(min-width: 640px)").matches : !1, l = u ? M : 1, v = Math.ceil(a.length / l), R = u ? 300 : 200, c = b({
+    count: v,
+    getScrollElement: () => m.current,
+    estimateSize: () => R,
+    overscan: 24,
+    measureElement: (t) => t?.getBoundingClientRect().height
+  }), o = c.getVirtualItems(), S = c.getTotalSize(), I = o[0]?.index ?? 0, z = o[o.length - 1]?.index ?? -1, p = I * l, C = Math.min((z + 1) * l, a.length), L = a.slice(p, C), y = o[0]?.start ?? 0, E = S - (o[o.length - 1]?.end ?? 0);
+  return /* @__PURE__ */ V("div", { ref: m, className: x, children: [
+    /* @__PURE__ */ n("div", { style: { height: y }, "aria-hidden": !0 }),
+    /* @__PURE__ */ n("div", { className: k, children: L.map((t, d) => {
+      const i = p + d, r = `${t.metadata.label || i}/${t.parentName}`;
+      return (i + 1) % l === 0 || i === a.length - 1 ? /* @__PURE__ */ n("div", { ref: c.measureElement, children: /* @__PURE__ */ n(w, { val: t }) }, r) : /* @__PURE__ */ n(w, { val: t }, r);
+    }) }),
+    /* @__PURE__ */ n("div", { style: { height: E }, "aria-hidden": !0 })
+  ] });
+};
+export {
+  G as MaterialList
+};

package/dist/src/features/swatches/ui/MaterialListItem/MaterialListItem.js

@@ -0,0 +1,51 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { AttributeHelper as c } from "../../lib/AttributeHelper.js";
+import { ImageGridZoom as d } from "../ImageGridZoom/ImageGridZoom.js";
+import { HexGridZoom as l } from "../HexGridZoom/HexGridZoom.js";
+import { useAppDispatch as p, useAppSelector as f } from "../../../../app/store/store.js";
+import { setSelectedMaterials as h } from "../../model/swatchesSlice.js";
+import { getSelectedMaterials as b } from "../../model/selectors.js";
+import { CheckMarkIconSVG as u } from "../../../../app/assets/svg/CheckMarkIconSVG.js";
+const j = ({ val: e }) => {
+  const a = p(), m = f(b), n = (r) => {
+    a(h({ selectedMaterial: r }));
+  }, i = e && e.assetId ? e.assetId : "false", o = m.find(
+    (r) => r.assetId === i && r.parentName === e.parentName
+  );
+  return /* @__PURE__ */ t("div", { className: "w-31 rounded mb-[20px] sm:w-40", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: () => n(e),
+        className: `w-31 h-31 rounded sm:w-40 sm:h-40 relative aspect-square overflow-hidden transition ${o ? "border-amber-700" : "border-transparent"}`,
+        children: [
+          c.getImage(e) ? /* @__PURE__ */ s(d, { item: e }) : /* @__PURE__ */ s(l, { item: e }),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: `absolute top-0 right-0 m-2 w-[30px] h-[30px] flex justify-center items-center
+            bg-[var(--background-grey)] rounded-2xl
+            border-none pointer-events-none
+            ${o ? "bg-[var(--main-accent-color)]" : ""}`,
+              children: /* @__PURE__ */ s(u, {})
+            }
+          )
+        ]
+      },
+      e.assetId
+    ),
+    /* @__PURE__ */ t("div", { className: "flex flex-col mt-3", children: [
+      /* @__PURE__ */ t("span", { className: "font-normal mb-1", children: [
+        e.metadata.label,
+        " "
+      ] }),
+      /* @__PURE__ */ t("span", { className: "font-medium", children: [
+        e.parentName,
+        " "
+      ] })
+    ] })
+  ] });
+};
+export {
+  j as MaterialListItem
+};

package/dist/src/features/swatches/ui/ProductElement/index.js

@@ -0,0 +1,65 @@
+import { jsxs as L, jsx as c } from "react/jsx-runtime";
+import { useState as u, useEffect as V } from "react";
+import { useAppDispatch as M, useAppSelector as m } from "../../../../app/store/store.js";
+import { MultiSelect as N } from "../../../../shared/ui/MultiSelect/MultiSelect.js";
+import { getProductElementOptions as O, getMaterialSelectStateFilters as w } from "../../model/selectors.js";
+import { uniqueList as x } from "../../../../shared/utils/uniqueList.js";
+import { setMaterialSelect as A, setPanelFilter as p } from "../../model/swatchesSlice.js";
+import { SwatchesServices as d } from "../../lib/SwatchesServices.js";
+const k = ({
+  containerStyles: f,
+  selectStyles: h
+}) => {
+  const l = M(), e = m(O), P = m(w), [g, S] = u(
+    []
+  ), [E, a] = u([]);
+  V(() => {
+    if (!e?.length) return;
+    const o = e.map((r) => {
+      const { Name: t, Label: s } = r.metadata || {};
+      return { value: t, label: s, id: t };
+    });
+    S(o);
+  }, [e]);
+  const F = (o, r) => {
+    if (r.length) {
+      const t = x(r);
+      if (t.length) {
+        const s = e.filter(
+          (i) => t.includes(i.metadata?.Label)
+        );
+        a(t);
+        const b = d.mapFiltersFromValues(
+          s,
+          P
+        ), n = d.getPositiveSelectedFilers(b);
+        n.length && n.forEach((i) => {
+          const { filterName: v, filterKeys: C } = i;
+          l(A({ filterName: v, values: C }));
+        }), l(p({ attributes: s }));
+      } else
+        l(p({ attributes: e }));
+    } else
+      a([]);
+  };
+  return (
+    // <div className='flex justify-between items-center shrink-0 p-[var(--padding)] border-b border-solid border-[var(--border)] sm:p-[var(--sm-padding)]'>
+    /* @__PURE__ */ L("div", { className: f, children: [
+      /* @__PURE__ */ c("span", { children: "Product element" }),
+      /* @__PURE__ */ c(
+        N,
+        {
+          options: g,
+          values: E,
+          onValueChange: (o) => F("PanelElement", o),
+          placeholder: "All product elements",
+          className: h,
+          dropdownWidth: "w-80"
+        }
+      )
+    ] })
+  );
+};
+export {
+  k as ProductElement
+};

package/dist/src/features/swatches/ui/SwatchWrapper/SwatchWrapper.js

@@ -0,0 +1,62 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { ProductElement as m } from "../ProductElement/index.js";
+import { Filters as c } from "../Filters/index.js";
+import { MaterialList as p } from "../MaterialList/index.js";
+import { SwatchesList as f } from "../SwatchesList/SwatchesList.js";
+import { EActiveTab as b } from "../../../../shared/types/activeTab.js";
+import { CloseIconSVG as h } from "../../../../app/assets/svg/CloseIconSVG.js";
+import u from "../../../../shared/ui/CustomSidebar/CustomSidebar.js";
+import { useAppDispatch as g, useAppSelector as a } from "../../../../app/store/store.js";
+import { getSelectedMaterials as v } from "../../model/selectors.js";
+import { CartCervices as x } from "../../../Cart/lib/CartCervices.js";
+import { setCartItems as w } from "../../../Cart/model/cartSlice.js";
+import { getCartItems as C } from "../../../Cart/model/selectors.js";
+const R = ({
+  isOpen: i,
+  onToggleSidebar: o,
+  onSetActiveTab: n
+}) => {
+  const d = g(), l = a(v) ?? [], s = a(C);
+  return /* @__PURE__ */ t(u, { isOpen: i, setIsOpen: o, children: [
+    /* @__PURE__ */ t("header", { className: "flex p-[var(--padding)] justify-between items-center border-b border-solid border-[var(--border)] sm:p-[var(--sm-padding)]", children: [
+      /* @__PURE__ */ r("h2", { className: "m-0 text-[16px] leading-[1.6] font-medium", children: "Order free swatches" }),
+      /* @__PURE__ */ r(
+        "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: o,
+          children: /* @__PURE__ */ r(h, { width: 10, height: 10 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex flex-col h-full min-h-0", children: [
+      /* @__PURE__ */ r(
+        m,
+        {
+          containerStyles: "flex justify-between items-center shrink-0 p-[var(--padding)] border-b border-solid border-[var(--border)] sm:p-[var(--sm-padding)]",
+          selectStyles: "min-w-[auto] max-w-[154px] sm:max-w-[auto] sm:min-w-[250px]"
+        }
+      ),
+      /* @__PURE__ */ r(c, { containerStyles: "shrink-0 flex justify-between items-center gap-2 p-[var(--padding)] border-b border-solid border-[var(--border)] sm:p-[var(--sm-padding)]" }),
+      /* @__PURE__ */ r(p, {}),
+      /* @__PURE__ */ r(f, {}),
+      /* @__PURE__ */ r("div", { className: "p-[var(--padding)] border-t border-solid border-[var(--border)] shrink-0", children: /* @__PURE__ */ r(
+        "button",
+        {
+          className: "w-full bg-[var(--main-accent-color)] text-white py-3 rounded-full font-bold cursor-pointer",
+          onClick: () => {
+            console.log("cartItems", s), console.log("selectedMaterials", s);
+            const e = x.getCartPreparedOption(l);
+            console.log("cartData", e), e && d(w(e)), n(b.CART);
+          },
+          children: "ADD SWATCHES TO CART"
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  R as SwatchWrapper
+};

package/dist/src/features/swatches/ui/Swatches.js

@@ -0,0 +1,51 @@
+import { jsx as e, Fragment as A } from "react/jsx-runtime";
+import { useState as T, useEffect as S } from "react";
+import { useAppDispatch as h } from "../../../app/store/store.js";
+import { setAllMaterialsOptions as u } from "../model/swatchesSlice.js";
+import { SwatchWrapper as v } from "./SwatchWrapper/SwatchWrapper.js";
+import { CartWrapper as b } from "../../Cart/ui/CartWrapper/CartWrapper.js";
+import { EActiveTab as p } from "../../../shared/types/activeTab.js";
+import { EDataInputType as m } from "../../DataAdapter/utils/types.js";
+import { DataAdapterServices as l } from "../../DataAdapter/lib/DataAdapterServices.js";
+const H = ({
+  isOpen: a,
+  uiDataType: c,
+  data: r,
+  onToggleSidebar: o
+  // onSendData,
+}) => {
+  const s = h(), [f, n] = T(p.SWATCH);
+  S(() => {
+    if (r) {
+      if (c === m.UI) {
+        const t = l.getTransformedData({
+          dataType: m.UI,
+          data: r
+        });
+        t && s(u(t));
+      }
+    } else
+      throw new Error("SwatchCart-module: Attributes are important");
+  }, [r]);
+  const i = (t) => {
+    n(t);
+  };
+  return /* @__PURE__ */ e(A, { children: f === p.SWATCH ? /* @__PURE__ */ e(
+    v,
+    {
+      isOpen: a,
+      onToggleSidebar: o,
+      onSetActiveTab: i
+    }
+  ) : /* @__PURE__ */ e(
+    b,
+    {
+      isOpen: a,
+      onToggleSidebar: o,
+      onSetActiveTab: i
+    }
+  ) });
+};
+export {
+  H as Swatches
+};

package/dist/src/features/swatches/ui/SwatchesList/SwatchesList.js

@@ -0,0 +1,67 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useAppDispatch as l, useAppSelector as c } from "../../../../app/store/store.js";
+import { getSelectedMaterials as p } from "../../model/selectors.js";
+import { setSelectedMaterials as h } from "../../model/swatchesSlice.js";
+import { AttributeHelper as b } from "../../lib/AttributeHelper.js";
+import { ImageGridZoom as f } from "../ImageGridZoom/ImageGridZoom.js";
+import { HexGridZoom as g } from "../HexGridZoom/HexGridZoom.js";
+import { CloseIconSVG as v } from "../../../../app/assets/svg/CloseIconSVG.js";
+import { MAX_SLOTS as s } from "../../../../shared/constants/selectedMaterials.js";
+const u = () => /* @__PURE__ */ r(
+  "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
+  }
+), C = ({
+  containerStyles: i = "p-[var(--padding)] border-t border-solid border-[var(--border)] shrink-0 sm:p-[var(--sm-padding)]"
+}) => {
+  const d = l(), a = c(p) ?? [], m = (e) => {
+    d(h({ selectedMaterial: e }));
+  }, n = Math.max(0, s - a.length);
+  return /* @__PURE__ */ t("div", { className: i, children: [
+    /* @__PURE__ */ t("div", { className: "flex justify-between items-center mb-3", children: [
+      /* @__PURE__ */ t("div", { className: "relative w-30", children: [
+        /* @__PURE__ */ r("div", { className: "", children: "Swatches list" }),
+        /* @__PURE__ */ r("span", { className: "absolute top-0 right-[-6px] font-medium text-[var(--main-accent-color)] text-[8px] leading-none", children: "Free" })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        a.length,
+        "/",
+        s,
+        " Selected"
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2", children: [
+      a.map((e, o) => /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: () => m(e),
+          className: `relative w-10 h-10 bg-[var(--sidebar-b)] border border-solid border-[var(--border)] rounded-sm aspect-square overflow-hidden transition\r
+            sm:w-16 sm:h-16`,
+          "aria-label": `Selected swatch ${e.name ?? e.assetId}`,
+          title: "Click to remove",
+          children: [
+            b.getImage(e) ? /* @__PURE__ */ r(f, { item: e }) : /* @__PURE__ */ r(g, { item: e }),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: `absolute top-0 right-0 m-2 w-[16px] h-[16px] flex justify-center items-center\r
+                         bg-[var(--background-grey)] rounded-2xl border-none pointer-events-none`,
+                children: /* @__PURE__ */ r(v, { className: "w-2 h-2 stroke-[var(--svg-dark)]" })
+              }
+            )
+          ]
+        },
+        `${e.metadata.label || o}/${e.parentName}`
+      )),
+      Array.from({ length: n }).map((e, o) => /* @__PURE__ */ r(u, {}, `mock-${o}`))
+    ] })
+  ] });
+};
+export {
+  C as SwatchesList
+};

package/dist/src/features/swatches/utils/constants.js

@@ -0,0 +1,8 @@
+const o = {
+  Finish: "Material",
+  Color: "Color",
+  Look: "Look"
+};
+export {
+  o as FILTER_TO_VALUE_KEY
+};