@snowcone-app/ui 0.8.3 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.9.0
+
+### Minor Changes
+
+- [#2936](https://github.com/snowcone-app/snowcone-monorepo/pull/2936) [`3c37e27`](https://github.com/snowcone-app/snowcone-monorepo/commit/3c37e27da40c8865b4c4bd71ec9454ec7e64bc4c) Thanks [@kevinsproles](https://github.com/kevinsproles)! - `AddToCart` waits for your add and never reports a failure as success. An async `onClick` is awaited: the button shows
+  "Added!" only after it resolves, and a rejection (or throw) shows `errorText` (new prop, default
+  "Couldn't add — try again"), announces the error's message in a `role="alert"`, calls `onError`, and leaves the button
+  enabled to retry. Previously `onClick` was called without awaiting after a fixed simulated delay, so a failed add still
+  said "Added!". The button exposes `data-add-to-cart="idle | adding | added | error"` (type `AddToCartStatus`) for tests.
+  `simulateDelay` now applies only when there is no `onClick` (demos).
+
 ## 0.8.3
 
 ### Patch Changes

package/dist/index.cjs

@@ -4921,6 +4921,7 @@ function AddToCart({
   text = "Add to Bag",
   loadingText = "Adding...",
   successText = "Added!",
+  errorText = "Couldn't add \u2014 try again",
   disabled = false,
   className = "",
   quantity = 1,
@@ -4930,8 +4931,10 @@ function AddToCart({
 }) {
   const context = useProduct();
   const shopContext = useShopOptional();
-  const [loading, setLoading] = (0, import_react15.useState)(false);
-  const [success, setSuccess] = (0, import_react15.useState)(false);
+  const [status, setStatus] = (0, import_react15.useState)("idle");
+  const [errorMessage, setErrorMessage] = (0, import_react15.useState)(null);
+  const loading = status === "adding";
+  const success = status === "added";
   (0, import_react15.useEffect)(() => {
     checkProviders(
       "AddToCart",
@@ -4954,7 +4957,8 @@ function AddToCart({
   const handleClick = async () => {
     if (isDisabled || !product) return;
     try {
-      setLoading(true);
+      setStatus("adding");
+      setErrorMessage(null);
       const cartDetail = (0, import_sdk7.createCartDetail)({
         productId: product.id,
         quantity,
@@ -4965,20 +4969,23 @@ function AddToCart({
       if (!cartDetail) {
         throw new Error("Invalid selection - unable to create cart detail");
       }
-      await (0, import_sdk7.simulateCartOperation)(simulateDelay);
-      onClick?.(cartDetail);
-      setSuccess(true);
+      if (onClick) {
+        await onClick(cartDetail);
+      } else {
+        await (0, import_sdk7.simulateCartOperation)(simulateDelay);
+      }
+      setStatus("added");
       setTimeout(() => {
-        setSuccess(false);
+        setStatus((s) => s === "added" ? "idle" : s);
       }, 2e3);
     } catch (error) {
-      onError?.(error);
-      console.error("Add to cart failed:", error);
-    } finally {
-      setLoading(false);
+      const err = error instanceof Error ? error : new Error(String(error));
+      setStatus("error");
+      setErrorMessage(err.message);
+      onError?.(err);
     }
   };
-  const buttonText = loading ? loadingText : success ? successText : text;
+  const buttonText = loading ? loadingText : success ? successText : status === "error" ? errorText : text;
   const defaultStyles = "w-full bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 rounded-button font-medium transition-colors";
   const buttonClasses = `
     ${defaultStyles}
@@ -4989,6 +4996,7 @@ function AddToCart({
   const getAriaLabel = () => {
     if (loading) return loadingText;
     if (success) return successText;
+    if (status === "error") return `${errorText} - ${product?.name || "product"}`;
     if (!product) return text;
     return `${text} - ${product.name || "product"}`;
   };
@@ -5002,9 +5010,11 @@ function AddToCart({
         onClick: handleClick,
         "aria-label": getAriaLabel(),
         "aria-busy": loading,
+        "data-add-to-cart": status,
         children: buttonText
       }
-    )
+    ),
+    status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "mt-2 text-sm text-destructive", children: errorMessage })
   ] });
 }