@caseparts-org/caseblocks 0.0.206 → 0.0.208

package/dist/molecules/Availability/Availability.js

@@ -1,36 +1,67 @@
-import { jsx as n } from "react/jsx-runtime";
-import { c as o } from "../../clsx-OuTLNxxd.js";
-import { Text as s } from "../../atoms/Text/Text.js";
-import { Link as c } from "../../atoms/Link/Link.js";
-import '../../assets/Availability.css';const m = "_availability_jaqg4_1", _ = "_availabilityLink_jaqg4_4", y = "_available_jaqg4_8", f = "_limited_jaqg4_11", d = "_unavailable_jaqg4_14", a = {
-  availability: m,
-  availabilityLink: _,
-  available: y,
-  limited: f,
-  unavailable: d
+import { jsx as l, jsxs as s, Fragment as p } from "react/jsx-runtime";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { Text as t } from "../../atoms/Text/Text.js";
+import { Tooltip as f } from "../../atoms/Tooltip/Tooltip.js";
+import '../../assets/Availability.css';const b = "_availability_9rzvh_1", z = "_tooltipContent_9rzvh_5", g = "_available_9rzvh_18", w = "_limited_9rzvh_21", C = "_discontinued_9rzvh_24", c = {
+  availability: b,
+  tooltipContent: z,
+  available: g,
+  "in-stock": "_in-stock_9rzvh_18",
+  limited: w,
+  discontinued: C
 };
-function p({
+function T({
   availId: i,
-  availDescription: l,
-  contactHref: v,
-  contactLinkBehavior: r,
-  availClassName: t
+  availDescription: e,
+  availClassName: d,
+  enableTooltip: r = !1,
+  inventory: a
 }) {
-  const e = r === "new-tab";
-  if (i === "contact")
-    return /* @__PURE__ */ n(
-      c,
-      {
-        target: e ? "_blank" : void 0,
-        rel: e ? "noopener noreferrer" : void 0,
-        className: o(a.availabilityLink, t),
-        href: v,
-        children: l
-      }
-    );
-  const b = i === "available" ? a.available : i === "limited" ? a.limited : a.unavailable;
-  return /* @__PURE__ */ n(s, { size: "xs", className: o(a.availability, b, t), children: l });
+  const o = /* @__PURE__ */ l(t, { size: "xs", className: _(c.availability, c[i], d), children: e });
+  return r && a && i !== "not-found" ? /* @__PURE__ */ l(
+    f,
+    {
+      closeDelay: 0,
+      openDelay: 250,
+      position: "top center",
+      trigger: o,
+      children: /* @__PURE__ */ l(k, { availabilityId: i, inventory: a })
+    }
+  ) : o;
+}
+function k({ availabilityId: i, inventory: e }) {
+  var r, a, o, n, h, u;
+  const d = (((r = e == null ? void 0 : e.MPK) == null ? void 0 : r.Unreserved) ?? 0) + (((a = e == null ? void 0 : e.SEA) == null ? void 0 : a.Unreserved) ?? 0) + (((o = e == null ? void 0 : e.STL) == null ? void 0 : o.Unreserved) ?? 0);
+  if (i === "in-stock" || i === "limited") {
+    const m = i === "in-stock" ? "Additional quantity will be backordered. If you need more than we have at any one warehouse, a CSR will contact you with options." : "Once our stock is depleted, this item will no longer be available.";
+    return /* @__PURE__ */ s("div", { className: c.tooltipContent, children: [
+      /* @__PURE__ */ s(t, { size: "sm", children: [
+        "We currently have (",
+        d,
+        ") in stock across our three warehouses:"
+      ] }),
+      /* @__PURE__ */ s("ul", { children: [
+        /* @__PURE__ */ l("li", { children: /* @__PURE__ */ s(t, { size: "sm", children: [
+          "(",
+          ((n = e == null ? void 0 : e.MPK) == null ? void 0 : n.Unreserved) ?? 0,
+          ") Los Angeles"
+        ] }) }),
+        /* @__PURE__ */ l("li", { children: /* @__PURE__ */ s(t, { size: "sm", children: [
+          "(",
+          ((h = e == null ? void 0 : e.STL) == null ? void 0 : h.Unreserved) ?? 0,
+          ") St. Louis"
+        ] }) }),
+        /* @__PURE__ */ l("li", { children: /* @__PURE__ */ s(t, { size: "sm", children: [
+          "(",
+          ((u = e == null ? void 0 : e.SEA) == null ? void 0 : u.Unreserved) ?? 0,
+          ") Seattle"
+        ] }) })
+      ] }),
+      /* @__PURE__ */ l(t, { size: "sm", children: m })
+    ] });
+  }
+  return i === "available" ? /* @__PURE__ */ l("div", { className: c.tooltipContent, children: /* @__PURE__ */ l(t, { size: "sm", children: "While this part is not currently in stock, we will arrange to get it to you asap, and your CSR will keep you advised of the lead time." }) }) : i === "discontinued" ? /* @__PURE__ */ l("div", { className: c.tooltipContent, children: /* @__PURE__ */ l(t, { size: "sm", children: "Unfortunately, this item is no longer available to purchase." }) }) : /* @__PURE__ */ l(p, {});
 }
 export {
-  p as Availability
+  T as Availability
 };

package/dist/molecules/Availability/Availability.stories.d.ts

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react';
-import { AvailabilityProps, ContactUsLinkBehavior } from './Availability';
+import { AvailabilityProps } from './Availability';
 declare const meta: {
     title: string;
     component: (props: AvailabilityProps) => import("react/jsx-runtime").JSX.Element;
@@ -18,19 +18,18 @@ declare const meta: {
             control: "text";
             description: string;
         };
-        contactHref: {
+        availClassName: {
             control: "text";
             description: string;
         };
-        contactLinkBehavior: {
-            control: {
-                type: "inline-radio";
-            };
-            options: ContactUsLinkBehavior[];
+        enableTooltip: {
+            control: "boolean";
             description: string;
         };
-        availClassName: {
-            control: "text";
+        inventory: {
+            control: {
+                type: "object";
+            };
             description: string;
         };
     };
@@ -39,8 +38,10 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Available: Story;
+export declare const InStock: Story;
 export declare const Limited: Story;
-export declare const Unavailable: Story;
-export declare const ContactSameTab: Story;
-export declare const ContactNewTab: Story;
+export declare const Discontinued: Story;
+export declare const Available: Story;
+export declare const NotFound: Story;
+export declare const InStockWithTooltip: Story;
+export declare const LimitedWithTooltip: Story;

package/dist/molecules/Availability/Availability.stories.js

@@ -1,48 +1,51 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Availability as e } from "./Availability.js";
-const i = (a) => /* @__PURE__ */ t(e, { ...a }), c = {
+import { jsx as i } from "react/jsx-runtime";
+import { Availability as o } from "./Availability.js";
+const a = (e) => /* @__PURE__ */ i(o, { ...e }), t = {
+  MPK: { Unreserved: 5, Available: 5 },
+  SEA: { Unreserved: 3, Available: 3 },
+  STL: { Unreserved: 8, Available: 8 }
+}, r = {
   title: "Case Parts/Molecules/Availability",
-  component: i,
+  component: a,
   parameters: {
     layout: "centered"
   },
   argTypes: {
     availId: {
       control: { type: "select" },
-      options: ["available", "limited", "unavailable", "contact"],
+      options: ["in-stock", "limited", "discontinued", "available", "not-found"],
       description: "Determines variant / rendering mode"
     },
     availDescription: {
       control: "text",
       description: "Displayed text content"
     },
-    contactHref: {
-      control: "text",
-      description: 'Href for the contact link (used only when id === "contact")'
-    },
-    contactLinkBehavior: {
-      control: { type: "inline-radio" },
-      options: ["same-tab", "new-tab"],
-      description: "Whether the contact link opens in the same or new tab"
-    },
     availClassName: {
       control: "text",
       description: "Optional custom className"
+    },
+    enableTooltip: {
+      control: "boolean",
+      description: "Enable tooltip with inventory details"
+    },
+    inventory: {
+      control: { type: "object" },
+      description: "Warehouse inventory data for tooltip"
     }
   },
   args: {
     // Default (can be overridden in each story)
-    availId: "available",
-    availDescription: "Available",
-    contactHref: "/contact",
-    contactLinkBehavior: "same-tab",
-    availClassName: ""
+    availId: "in-stock",
+    availDescription: "In stock",
+    availClassName: "",
+    enableTooltip: !0,
+    inventory: t
   },
   tags: ["autodocs"]
-}, s = {
-  name: "Available",
+}, l = {
+  name: "In Stock",
   args: {
-    availId: "available",
+    availId: "in-stock",
     availDescription: "In stock"
   },
   parameters: {
@@ -52,7 +55,7 @@ const i = (a) => /* @__PURE__ */ t(e, { ...a }), c = {
       }
     }
   }
-}, r = {
+}, c = {
   name: "Limited",
   args: {
     availId: "limited",
@@ -65,11 +68,11 @@ const i = (a) => /* @__PURE__ */ t(e, { ...a }), c = {
       }
     }
   }
-}, l = {
-  name: "Unavailable",
+}, d = {
+  name: "Discontinued",
   args: {
-    availId: "unavailable",
-    availDescription: "Out of stock"
+    availId: "discontinued",
+    availDescription: "Discontinued"
   },
   parameters: {
     docs: {
@@ -78,42 +81,74 @@ const i = (a) => /* @__PURE__ */ t(e, { ...a }), c = {
       }
     }
   }
+}, v = {
+  name: "Available",
+  args: {
+    availId: "available",
+    availDescription: "Available"
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows an alternative availability state."
+      }
+    }
+  }
 }, p = {
-  name: "Contact (Same Tab)",
+  name: "Not Found",
   args: {
-    availId: "contact",
-    availDescription: "Contact us for availability",
-    contactHref: "/contact",
-    contactLinkBehavior: "same-tab"
+    availId: "not-found",
+    availDescription: "Not found"
   },
   parameters: {
     docs: {
       description: {
-        story: "Renders a link opening in the current tab."
+        story: "Shows the not found / error state."
       }
     }
   }
-}, d = {
-  name: "Contact (New Tab)",
+}, m = {
+  name: "In Stock with Tooltip",
   args: {
-    availId: "contact",
-    availDescription: "Contact us (opens new tab)",
-    contactHref: "https://example.com/contact",
-    contactLinkBehavior: "new-tab"
+    availId: "in-stock",
+    availDescription: "In stock",
+    enableTooltip: !0,
+    inventory: t
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shows in-stock state with warehouse inventory tooltip on hover."
+      }
+    }
+  }
+}, y = {
+  name: "Limited with Tooltip",
+  args: {
+    availId: "limited",
+    availDescription: "Limited stock",
+    enableTooltip: !0,
+    inventory: {
+      MPK: { Unreserved: 1, Available: 1 },
+      SEA: { Unreserved: 0, Available: 0 },
+      STL: { Unreserved: 2, Available: 2 }
+    }
   },
   parameters: {
     docs: {
       description: {
-        story: 'Renders a link with target="_blank" and rel="noopener noreferrer".'
+        story: "Shows limited-stock state with low inventory tooltip on hover."
       }
     }
   }
 };
 export {
-  s as Available,
-  d as ContactNewTab,
-  p as ContactSameTab,
-  r as Limited,
-  l as Unavailable,
-  c as default
+  v as Available,
+  d as Discontinued,
+  l as InStock,
+  m as InStockWithTooltip,
+  c as Limited,
+  y as LimitedWithTooltip,
+  p as NotFound,
+  r as default
 };

package/dist/molecules/Cart/Cart.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { AvailabilityId } from '../Availability/Availability';
 export interface CartItem {
     id: string | number;
     itemId: string | undefined;
@@ -13,7 +14,7 @@ export interface CartItem {
     model?: string;
     serial?: string;
     availability?: string;
-    availabilityId?: string;
+    availabilityId?: AvailabilityId;
     custom?: string;
     [key: string]: any;
 }
@@ -30,7 +31,6 @@ export interface ShoppingCartHandle {
     close: () => void;
     toggle: () => void;
 }
-interface CartProps extends CartPropsBase, React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface CartProps extends CartPropsBase, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 export declare const ShoppingCart: React.ForwardRefExoticComponent<CartProps & React.RefAttributes<ShoppingCartHandle>>;
-export {};

package/dist/molecules/Cart/Cart.stories.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import('./Cart').CartProps & React.RefAttributes<import('./Cart').ShoppingCartHandle>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const EmptyCart: Story;
+export declare const LargeCart: Story;
+export declare const SmallCart: Story;

package/dist/molecules/Cart/Cart.stories.js

@@ -1,5 +1,5 @@
-import { jsxs as d, Fragment as c, jsx as o } from "react/jsx-runtime";
-import { useState as s } from "react";
+import { jsxs as d, Fragment as s, jsx as o } from "react/jsx-runtime";
+import { useState as c } from "react";
 import { ShoppingCart as n } from "./Cart.js";
 import { CartSlideInPanel as m } from "./CartSlideInPanel.js";
 const C = {
@@ -39,8 +39,8 @@ function I(a) {
   ).toFixed(2)}`;
 }
 const r = (a) => {
-  const [l, t] = s(!1);
-  return /* @__PURE__ */ d(c, { children: [
+  const [l, t] = c(!1);
+  return /* @__PURE__ */ d(s, { children: [
     /* @__PURE__ */ o(
       n,
       {
@@ -57,8 +57,6 @@ const r = (a) => {
         cart: a.cart,
         subtotal: I(a.cart),
         itemPriceLabel: "List Price",
-        contactHref: "#",
-        contactLinkBehavior: "new-tab",
         onItemDelete: () => alert("Delete"),
         onItemQtyChange: () => alert("Qty Change"),
         onUnitEditClick: () => alert("Edit MMS"),

package/dist/molecules/Cart/CartPart.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ContactUsLinkBehavior } from '../Availability/Availability';
+import { AvailabilityId, Inventory } from '../Availability/Availability';
 export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     imageUrl?: string;
     imageAlt?: string;
@@ -12,10 +12,9 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
     model?: string;
     serial?: string;
     custom?: boolean;
-    availabilityId?: string;
+    availabilityId?: AvailabilityId;
     availability?: string;
-    contactHref?: string;
-    contactLinkBehavior?: ContactUsLinkBehavior;
+    inventory?: Inventory;
     priceLabel?: string;
     price?: string;
     quantity?: number;
@@ -25,4 +24,4 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
     onUnitEditClick?: () => void;
     requiresUnitDetails?: boolean;
 }
-export declare function CartPart({ imageUrl, imageAlt, title, titleHref, onTitleNavigate, partNumber, unit, make, model, serial, custom, availabilityId, availability, contactHref, contactLinkBehavior, priceLabel, price, quantity, maxQuantity, onQuantityChange, onRemove, onUnitEditClick, requiresUnitDetails, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartPart({ imageUrl, imageAlt, title, titleHref, onTitleNavigate, partNumber, unit, make, model, serial, custom, availabilityId, availability, inventory, priceLabel, price, quantity, maxQuantity, onQuantityChange, onRemove, onUnitEditClick, requiresUnitDetails, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Cart/CartPart.js

@@ -1,18 +1,18 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Link as R } from "../../atoms/Link/Link.js";
-import { Text as o } from "../../atoms/Text/Text.js";
-import { Image as T } from "../../atoms/Image/Image.js";
-import { Availability as A } from "../Availability/Availability.js";
-import { Pricing as B } from "../Pricing/Pricing.js";
-import { QuantityInput as D } from "../QuantityInput/QuantityInput.js";
-import { Icon as c } from "../../atoms/Icon/Icon.js";
-import { Tooltip as F } from "../../atoms/Tooltip/Tooltip.js";
-import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { Link as q } from "../../atoms/Link/Link.js";
+import { Text as m } from "../../atoms/Text/Text.js";
+import { Image as v } from "../../atoms/Image/Image.js";
+import { Availability as R } from "../Availability/Availability.js";
+import { Pricing as A } from "../Pricing/Pricing.js";
+import { QuantityInput as B } from "../QuantityInput/QuantityInput.js";
+import { Icon as n } from "../../atoms/Icon/Icon.js";
+import { Tooltip as D } from "../../atoms/Tooltip/Tooltip.js";
+import { c as F } from "../../clsx-OuTLNxxd.js";
 import { s as i } from "../../Cart.module-CqE2A_OG.js";
 function $({
   imageUrl: g,
   imageAlt: I = "Product image",
-  title: n,
+  title: c,
   titleHref: d,
   onTitleNavigate: t,
   partNumber: f,
@@ -22,47 +22,46 @@ function $({
   serial: K,
   custom: x,
   availabilityId: P,
-  availability: h,
-  contactHref: S,
-  contactLinkBehavior: w = "new-tab",
+  availability: u,
+  inventory: S,
   priceLabel: M = "List Price",
-  price: u,
+  price: h,
   quantity: p,
   maxQuantity: l,
   onQuantityChange: b,
   onRemove: y,
-  onUnitEditClick: s,
+  onUnitEditClick: o,
   requiresUnitDetails: j = !1,
-  className: C,
-  ...L
+  className: w,
+  ...C
 }) {
-  function q(r) {
+  function L(r) {
     r.defaultPrevented || r.button === 0 && (r.metaKey || r.altKey || r.ctrlKey || r.shiftKey || r.currentTarget.target && r.currentTarget.target !== "_self" || t == null || t(r));
   }
-  const m = k || [z, N, K].filter(Boolean).join(" / "), v = typeof l == "number" && Number.isFinite(l) ? l : void 0;
-  return /* @__PURE__ */ a("li", { className: _(i.cartItem, C), ...L, children: [
-    /* @__PURE__ */ e(T, { height: 50, width: 50, src: g || "", alt: I, className: i.itemImage }),
+  const s = k || [z, N, K].filter(Boolean).join(" / "), T = typeof l == "number" && Number.isFinite(l) ? l : void 0;
+  return /* @__PURE__ */ a("li", { className: F(i.cartItem, w), ...C, children: [
+    /* @__PURE__ */ e(v, { height: 50, width: 50, src: g || "", alt: I, className: i.itemImage }),
     /* @__PURE__ */ a("div", { children: [
       /* @__PURE__ */ a("div", { className: i.topRow, children: [
         /* @__PURE__ */ a("div", { className: i.itemInfo, children: [
-          /* @__PURE__ */ e(o, { size: "sm", weight: "semibold", children: d ? /* @__PURE__ */ e(R, { href: d, onClick: q, children: n }) : n }),
-          f != null && /* @__PURE__ */ a(o, { size: "sm", children: [
-            /* @__PURE__ */ e(o, { colorToken: "quaternary", size: "xs", children: x ? "Specs " : "Part # " }),
+          /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: d ? /* @__PURE__ */ e(q, { href: d, onClick: L, children: c }) : c }),
+          f != null && /* @__PURE__ */ a(m, { size: "sm", children: [
+            /* @__PURE__ */ e(m, { colorToken: "quaternary", size: "xs", children: x ? "Specs " : "Part # " }),
             f
           ] }),
-          m && s && (j ? /* @__PURE__ */ e(
-            F,
+          s && o && (j ? /* @__PURE__ */ e(
+            D,
             {
               trigger: /* @__PURE__ */ a(
                 "button",
                 {
-                  onClick: s,
+                  onClick: o,
                   className: i.editUnit,
                   "aria-label": "Edit make, model, and serial",
                   type: "button",
                   children: [
-                    /* @__PURE__ */ e(c, { iconKey: "fa-light fa-file-pen", size: "sm" }),
-                    m
+                    /* @__PURE__ */ e(n, { iconKey: "fa-light fa-file-pen", size: "sm" }),
+                    s
                   ]
                 }
               ),
@@ -71,38 +70,38 @@ function $({
           ) : /* @__PURE__ */ a(
             "button",
             {
-              onClick: s,
+              onClick: o,
               className: i.editUnit,
               "aria-label": "Edit make, model, and serial",
               type: "button",
               children: [
-                /* @__PURE__ */ e(c, { iconKey: "fa-light fa-file-pen", size: "sm" }),
-                m
+                /* @__PURE__ */ e(n, { iconKey: "fa-light fa-file-pen", size: "sm" }),
+                s
               ]
             }
           ))
         ] }),
-        y && /* @__PURE__ */ e("button", { onClick: y, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-trash", size: "sm" }) })
+        y && /* @__PURE__ */ e("button", { onClick: y, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-trash", size: "sm" }) })
       ] }),
       /* @__PURE__ */ a("div", { className: i.itemManagement, children: [
         /* @__PURE__ */ a("div", { className: i.purchaseInformation, children: [
-          /* @__PURE__ */ e("div", { className: i.availabilitySlot, children: h && /* @__PURE__ */ e(
-            A,
+          /* @__PURE__ */ e("div", { className: i.availabilitySlot, children: u && /* @__PURE__ */ e(
+            R,
             {
-              availId: P || "",
-              availDescription: h,
-              contactHref: S || "",
-              contactLinkBehavior: w
+              availId: P || "not-found",
+              availDescription: u,
+              enableTooltip: !0,
+              inventory: S
             }
           ) }),
-          /* @__PURE__ */ e("div", { className: i.priceSlot, children: u && /* @__PURE__ */ e(B, { pricingLabel: M, price: u }) })
+          /* @__PURE__ */ e("div", { className: i.priceSlot, children: h && /* @__PURE__ */ e(A, { pricingLabel: M, price: h }) })
         ] }),
         typeof p == "number" && b && /* @__PURE__ */ e("div", { className: i.quantitySlot, children: /* @__PURE__ */ e(
-          D,
+          B,
           {
             quantity: p,
             onQuantityChange: b,
-            max: v,
+            max: T,
             size: "sm"
           }
         ) })

package/dist/molecules/Cart/CartPart.stories.d.ts

@@ -1,5 +1,6 @@
 import { StoryObj } from '@storybook/react-vite';
 import { CartPart } from './CartPart';
+import { Inventory } from '../Availability/Availability';
 declare const meta: {
     title: string;
     component: typeof CartPart;
@@ -18,10 +19,9 @@ declare const meta: {
         model: string;
         serial: string;
         custom: false;
-        availabilityId: string;
+        availabilityId: "in-stock";
         availability: string;
-        contactHref: string;
-        contactLinkBehavior: "new-tab";
+        inventory: Inventory;
         priceLabel: string;
         price: string;
         quantity: number;