@enadhq/enad-react-sdk 1.0.2 → 1.2.0

package/dist/client/cart/components/cart-drawer.mjs

@@ -1,311 +1,277 @@
 "use client";
+import { useCart } from "../hooks/useCart.mjs";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Price } from "../../storefront/components/price.mjs";
+import { QuantityPicker } from "../../storefront/product/quantity-picker.mjs";
+import { useCallback, useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useCallback } from "react";
-import Link from "next/link";
-import { useCart } from "../../cart/hooks/useCart";
-import { useIcon } from "../../icons/icon-context";
-import { Button } from "../../ui/button";
+//#region src/client/cart/components/cart-drawer.tsx
 function CartLoadingSkeleton() {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-6", "aria-busy": "true", "aria-label": "Loading cart items", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4 animate-pulse", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius)" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 bg-(--enad-border-color) rounded-(--enad-border-radius)" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-1/3 bg-(--enad-border-color) rounded-(--enad-border-radius)" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-1/4 bg-(--enad-border-color) rounded-(--enad-border-radius)" })
-    ] })
-  ] }, i)) });
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-6",
+		"aria-busy": "true",
+		"aria-label": "Loading cart items",
+		children: [
+			1,
+			2,
+			3
+		].map((i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4 animate-pulse",
+			children: [/* @__PURE__ */ jsx("div", { className: "w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius)" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 bg-(--enad-border-color) rounded-(--enad-border-radius)" }),
+					/* @__PURE__ */ jsx("div", { className: "h-4 w-1/3 bg-(--enad-border-color) rounded-(--enad-border-radius)" }),
+					/* @__PURE__ */ jsx("div", { className: "h-4 w-1/4 bg-(--enad-border-color) rounded-(--enad-border-radius)" })
+				]
+			})]
+		}, i))
+	});
 }
-function CartEmptyState({
-  message,
-  onClose,
-  buttonLabel
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-(--enad-text-muted-color) mb-4", children: message }),
-    /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "outline", children: buttonLabel })
-  ] });
+function CartEmptyState({ message, onClose, buttonLabel }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-full text-center",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-(--enad-text-muted-color) mb-4",
+			children: message
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			variant: "outlined",
+			children: buttonLabel
+		})]
+	});
 }
 function CartItemImage({ imageUrl, alt }) {
-  return /* @__PURE__ */ jsx("div", { className: "relative w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius) overflow-hidden", children: imageUrl ? /* @__PURE__ */ jsx("img", { src: imageUrl, alt, className: "object-cover" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-(--enad-border-color)" }) });
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-24 h-24 flex-shrink-0 bg-(--enad-border-color) rounded-(--enad-border-radius) overflow-hidden",
+		children: imageUrl ? /* @__PURE__ */ jsx("img", {
+			src: imageUrl,
+			alt,
+			className: "object-cover"
+		}) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-(--enad-border-color)" })
+	});
 }
-function CartItemDetails({
-  item,
-  onClose,
-  onUpdateQuantity,
-  onRemove,
-  formatPrice
-}) {
-  const MinusIcon = useIcon("minus");
-  const PlusIcon = useIcon("plus");
-  const TrashIcon = useIcon("trash");
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-w-0 justify-between flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ jsx(
-        Link,
-        {
-          href: `/products/${item.productSlug || item.productVariantId}`,
-          className: "font-medium text-sm text-(--enad-link-color) hover:text-(--enad-link-hover-color) transition-colors",
-          onClick: onClose,
-          children: item.displayName
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "h-5 w-5 flex-shrink-0",
-          onClick: () => onRemove(item.id),
-          "aria-label": `Remove ${item.displayName}`,
-          children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-(--enad-text-muted-color) mb-1", children: formatPrice(item.unitPrice.amount) }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center gap-2",
-          role: "group",
-          "aria-label": `Quantity for ${item.displayName}`,
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "icon",
-                className: "h-5 w-5 bg-transparent active:scale-90 transition-transform duration-75 motion-reduce:transform-none",
-                onClick: () => onUpdateQuantity(item.id, item.quantity - 1),
-                disabled: item.quantity <= 1,
-                "aria-label": "Decrease quantity",
-                children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "text-sm font-medium w-8 text-center text-(--enad-text-primary-color)",
-                "aria-live": "polite",
-                children: item.quantity
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "icon",
-                className: "h-5 w-5 bg-transparent active:scale-90 transition-transform duration-75 motion-reduce:transform-none",
-                onClick: () => onUpdateQuantity(item.id, item.quantity + 1),
-                "aria-label": "Increase quantity",
-                children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3" })
-              }
-            )
-          ]
-        }
-      )
-    ] })
-  ] });
+function CartItemDetails({ item, currencyCode, onClose, onUpdateQuantity, onRemove }) {
+	const TrashIcon = useIcon("trash");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 min-w-0 justify-between flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between gap-2 mb-2",
+			children: [/* @__PURE__ */ jsx("a", {
+				href: `/products/${item.productSlug || item.productVariantId}`,
+				className: "font-medium text-sm text-(--enad-link-color) hover:text-(--enad-link-hover-color) transition-colors",
+				onClick: onClose,
+				children: item.displayName
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "plain",
+				size: "icon",
+				className: "h-5 w-5 flex-shrink-0",
+				onClick: () => onRemove(item.id),
+				"aria-label": `Remove ${item.displayName}`,
+				children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Price, {
+			amount: item.unitPrice.amount / 100,
+			currency: currencyCode,
+			className: "text-sm text-(--enad-text-muted-color) mb-1"
+		}), /* @__PURE__ */ jsx(QuantityPicker, {
+			value: item.quantity,
+			onChange: (qty) => onUpdateQuantity(item.id, qty),
+			size: "sm"
+		})] })]
+	});
 }
-function CartItemRow({
-  item,
-  onClose,
-  onUpdateQuantity,
-  onRemove,
-  formatPrice
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex gap-4", role: "listitem", children: [
-    /* @__PURE__ */ jsx(CartItemImage, { imageUrl: item.imageUrl, alt: item.displayName }),
-    /* @__PURE__ */ jsx(
-      CartItemDetails,
-      {
-        item,
-        onClose,
-        onUpdateQuantity,
-        onRemove,
-        formatPrice
-      }
-    )
-  ] });
+function CartItemRow({ item, currencyCode, onClose, onUpdateQuantity, onRemove }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-4",
+		role: "listitem",
+		children: [/* @__PURE__ */ jsx(CartItemImage, {
+			imageUrl: item.imageUrl,
+			alt: item.displayName
+		}), /* @__PURE__ */ jsx(CartItemDetails, {
+			item,
+			currencyCode,
+			onClose,
+			onUpdateQuantity,
+			onRemove
+		})]
+	});
 }
-function CartTotals({
-  totals,
-  formatPrice,
-  labels
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-(--enad-text-muted-color)", children: labels.subtotal }),
-      /* @__PURE__ */ jsx("span", { className: "text-(--enad-text-primary-color)", children: formatPrice(totals.subtotal.amount) })
-    ] }),
-    totals.discount.amount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-(--enad-text-muted-color)", children: labels.discount }),
-      /* @__PURE__ */ jsxs("span", { className: "text-(--enad-success-color)", children: [
-        "-",
-        formatPrice(totals.discount.amount)
-      ] })
-    ] }),
-    totals.tax.amount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-(--enad-text-muted-color)", children: labels.tax }),
-      /* @__PURE__ */ jsx("span", { className: "text-(--enad-text-primary-color)", children: formatPrice(totals.tax.amount) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-lg font-bold pt-4 border-t border-(--enad-border-color)", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-(--enad-text-primary-color)", children: labels.total }),
-      /* @__PURE__ */ jsx("span", { className: "text-(--enad-text-primary-color)", children: formatPrice(totals.total.amount) })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { className: "w-full py-6 text-sm font-medium uppercase tracking-wider", size: "lg", children: labels.proceedToCheckout })
-  ] });
+function CartTotals({ totals, currencyCode, labels }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "p-6 space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-muted-color)",
+					children: labels.subtotal
+				}), /* @__PURE__ */ jsx(Price, {
+					amount: totals.subtotal.amount / 100,
+					currency: currencyCode
+				})]
+			}),
+			totals.discount.amount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-muted-color)",
+					children: labels.discount
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-(--enad-success-color)",
+					children: ["-", /* @__PURE__ */ jsx(Price, {
+						amount: totals.discount.amount / 100,
+						currency: currencyCode
+					})]
+				})]
+			}),
+			totals.tax.amount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-muted-color)",
+					children: labels.tax
+				}), /* @__PURE__ */ jsx(Price, {
+					amount: totals.tax.amount / 100,
+					currency: currencyCode
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-lg font-bold pt-4 border-t border-(--enad-border-color)",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-(--enad-text-primary-color)",
+					children: labels.total
+				}), /* @__PURE__ */ jsx(Price, {
+					amount: totals.total.amount / 100,
+					currency: currencyCode
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				className: "w-full py-6 text-sm font-medium uppercase tracking-wider",
+				size: "lg",
+				children: labels.proceedToCheckout
+			})
+		]
+	});
 }
 function useCartDrawer(isOpen, onClose) {
-  const drawerRef = useRef(null);
-  const closeButtonRef = useRef(null);
-  const { cart, isLoading, removeItem, updateItem } = useCart();
-  useEffect(() => {
-    if (isOpen) {
-      const timer = setTimeout(() => closeButtonRef.current?.focus(), 100);
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        onClose();
-      }
-    },
-    [onClose]
-  );
-  const formatPrice = (amount) => {
-    return `${(amount / 100).toFixed(2)} ${cart?.currencyCode || "SEK"}`;
-  };
-  const handleUpdateQuantity = (itemId, newQuantity) => {
-    updateItem({ itemId, quantity: newQuantity });
-  };
-  const handleRemoveItem = (itemId) => {
-    removeItem({ itemId });
-  };
-  return {
-    drawerRef,
-    closeButtonRef,
-    cart,
-    isLoading,
-    items: cart?.items || [],
-    totals: cart?.totals,
-    handleKeyDown,
-    formatPrice,
-    handleUpdateQuantity,
-    handleRemoveItem
-  };
+	const drawerRef = useRef(null);
+	const closeButtonRef = useRef(null);
+	const { cart, isLoading, removeItem, updateItem } = useCart();
+	useEffect(() => {
+		if (isOpen) {
+			const timer = setTimeout(() => closeButtonRef.current?.focus(), 100);
+			return () => clearTimeout(timer);
+		}
+	}, [isOpen]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Escape") {
+			e.stopPropagation();
+			onClose();
+		}
+	}, [onClose]);
+	const handleUpdateQuantity = (itemId, newQuantity) => {
+		updateItem({
+			itemId,
+			quantity: newQuantity
+		});
+	};
+	const handleRemoveItem = (itemId) => {
+		removeItem({ itemId });
+	};
+	return {
+		drawerRef,
+		closeButtonRef,
+		cart,
+		isLoading,
+		items: cart?.items || [],
+		totals: cart?.totals,
+		currencyCode: cart?.currencyCode || "SEK",
+		handleKeyDown,
+		handleUpdateQuantity,
+		handleRemoveItem
+	};
 }
-function CartContent({
-  isLoading,
-  items,
-  emptyCartMessage,
-  continueShopping,
-  onClose,
-  onUpdateQuantity,
-  onRemove,
-  formatPrice
-}) {
-  if (isLoading) return /* @__PURE__ */ jsx(CartLoadingSkeleton, {});
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx(CartEmptyState, { message: emptyCartMessage, onClose, buttonLabel: continueShopping });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "space-y-6", role: "list", "aria-label": "Cart items", children: items.map((item) => /* @__PURE__ */ jsx(
-    CartItemRow,
-    {
-      item,
-      onClose,
-      onUpdateQuantity,
-      onRemove,
-      formatPrice
-    },
-    item.id
-  )) });
+function CartContent({ isLoading, items, currencyCode, emptyCartMessage, continueShopping, onClose, onUpdateQuantity, onRemove }) {
+	if (isLoading) return /* @__PURE__ */ jsx(CartLoadingSkeleton, {});
+	if (items.length === 0) return /* @__PURE__ */ jsx(CartEmptyState, {
+		message: emptyCartMessage,
+		onClose,
+		buttonLabel: continueShopping
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-6",
+		role: "list",
+		"aria-label": "Cart items",
+		children: items.map((item) => /* @__PURE__ */ jsx(CartItemRow, {
+			item,
+			currencyCode,
+			onClose,
+			onUpdateQuantity,
+			onRemove
+		}, item.id))
+	});
 }
 function CartDrawer({ isOpen, onClose, className, labels = {} }) {
-  const CloseIcon = useIcon("close");
-  const {
-    title = "Shopping Cart",
-    emptyCartMessage = "Your cart is empty",
-    continueShopping = "Continue Shopping",
-    subtotal = "Subtotal",
-    discount = "Discount",
-    tax = "Tax",
-    total = "Total",
-    proceedToCheckout = "Proceed to Checkout"
-  } = labels;
-  const {
-    drawerRef,
-    closeButtonRef,
-    isLoading,
-    items,
-    totals,
-    handleKeyDown,
-    formatPrice,
-    handleUpdateQuantity,
-    handleRemoveItem
-  } = useCartDrawer(isOpen, onClose);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `fixed font-enad inset-0 bg-black/60 backdrop-blur-sm z-50 transition-opacity duration-300 motion-reduce:transition-none ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`,
-        onClick: onClose,
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: drawerRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": title,
-        onKeyDown: handleKeyDown,
-        className: `fixed top-0 right-0 h-full w-full md:w-[480px] bg-(--enad-surface) z-50 transform transition-transform duration-300 ease-in-out motion-reduce:transition-none ${isOpen ? "translate-x-0" : "translate-x-full"} ${className ?? ""}`,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-6", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-xl font-heading font-bold tracking-wider uppercase text-(--enad-text-primary-color)", children: title }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                ref: closeButtonRef,
-                variant: "ghost",
-                size: "icon",
-                onClick: onClose,
-                "aria-label": "Close cart",
-                children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsx(
-            CartContent,
-            {
-              isLoading,
-              items,
-              emptyCartMessage,
-              continueShopping,
-              onClose,
-              onUpdateQuantity: handleUpdateQuantity,
-              onRemove: handleRemoveItem,
-              formatPrice
-            }
-          ) }),
-          items.length > 0 && totals && /* @__PURE__ */ jsx(
-            CartTotals,
-            {
-              totals,
-              formatPrice,
-              labels: { subtotal, discount, tax, total, proceedToCheckout }
-            }
-          )
-        ] })
-      }
-    )
-  ] });
+	const CloseIcon = useIcon("close");
+	const { title = "Shopping Cart", emptyCartMessage = "Your cart is empty", continueShopping = "Continue Shopping", subtotal = "Subtotal", discount = "Discount", tax = "Tax", total = "Total", proceedToCheckout = "Proceed to Checkout" } = labels;
+	const { drawerRef, closeButtonRef, isLoading, items, totals, currencyCode, handleKeyDown, handleUpdateQuantity, handleRemoveItem } = useCartDrawer(isOpen, onClose);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: `fixed font-enad inset-0 bg-black/60 backdrop-blur-sm z-50 transition-opacity duration-300 motion-reduce:transition-none ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`,
+		onClick: onClose,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsx("div", {
+		ref: drawerRef,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": title,
+		onKeyDown: handleKeyDown,
+		className: `fixed top-0 right-0 h-full w-full md:w-[480px] bg-(--enad-surface) z-50 transform transition-transform duration-300 ease-in-out motion-reduce:transition-none ${isOpen ? "translate-x-0" : "translate-x-full"} ${className ?? ""}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col h-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-xl font-heading font-bold tracking-wider uppercase text-(--enad-text-primary-color)",
+						children: title
+					}), /* @__PURE__ */ jsx(Button, {
+						ref: closeButtonRef,
+						variant: "plain",
+						size: "icon",
+						onClick: onClose,
+						"aria-label": "Close cart",
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto p-6",
+					children: /* @__PURE__ */ jsx(CartContent, {
+						isLoading,
+						items,
+						currencyCode,
+						emptyCartMessage,
+						continueShopping,
+						onClose,
+						onUpdateQuantity: handleUpdateQuantity,
+						onRemove: handleRemoveItem
+					})
+				}),
+				items.length > 0 && totals && /* @__PURE__ */ jsx(CartTotals, {
+					totals,
+					currencyCode,
+					labels: {
+						subtotal,
+						discount,
+						tax,
+						total,
+						proceedToCheckout
+					}
+				})
+			]
+		})
+	})] });
 }
-export {
-  CartDrawer
-};
+//#endregion
+export { CartDrawer };
+
 //# sourceMappingURL=cart-drawer.mjs.map