@snowcone-app/ui 0.8.3 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.9.1
+
+### Patch Changes
+
+- [#4074](https://github.com/snowcone-app/snowcone-monorepo/pull/4074) [`8682d87`](https://github.com/snowcone-app/snowcone-monorepo/commit/8682d876466cee5ee80ff05b1401a5679a410007) Thanks [@kevinsproles](https://github.com/kevinsproles)! - A selected size with no scene previews a listed variant that differs only by size. The cart, SKU and price keep the selected size.
+
+- Updated dependencies [[`8682d87`](https://github.com/snowcone-app/snowcone-monorepo/commit/8682d876466cee5ee80ff05b1401a5679a410007)]:
+  - @snowcone-app/sdk@0.24.3
+
+## 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 })
   ] });
 }
 
@@ -6499,10 +6509,9 @@ function RealtimeProvider({
     const product = productContext.product;
     const productId = product.id;
     const placements = product.placements || [];
-    const variantId = (0, import_sdk8.resolveVariantId)(
+    const variantId = (0, import_sdk8.resolvePreviewVariantId)(
       productContext,
-      void 0,
-      void 0
+      (0, import_sdk8.resolveVariantId)(productContext, void 0, void 0)
     );
     const isFirstSend = !configSentRef.current;
     const variantChanged = lastSentVariantIdRef.current !== null && lastSentVariantIdRef.current !== variantId;
@@ -10483,12 +10492,15 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
   const contextRef = (0, import_react46.useRef)(context);
   contextRef.current = context;
   const actualProductId = product?.id || productId || context?.product?.id;
-  const actualGvid = (0, import_react46.useMemo)(() => {
+  const selectedGvid = (0, import_react46.useMemo)(() => {
     return (0, import_sdk10.resolveVariantId)(context, gvid, variantId);
   }, [gvid, variantId, context?.selection, context?.combinations]);
   const actualMockupId = (0, import_react46.useMemo)(() => {
-    return (0, import_sdk10.resolveMockupId)(context, actualGvid, mockupId);
-  }, [mockupId, actualGvid, context]);
+    return (0, import_sdk10.resolveMockupId)(context, selectedGvid, mockupId);
+  }, [mockupId, selectedGvid, context]);
+  const actualGvid = (0, import_react46.useMemo)(() => {
+    return gvid || variantId ? selectedGvid : (0, import_sdk10.resolvePreviewVariantId)(context, selectedGvid, actualMockupId);
+  }, [gvid, variantId, selectedGvid, actualMockupId, context]);
   const unavailable = actualMockupId ? realtimeContext?.unavailableMockups?.get(actualMockupId) ?? null : null;
   const artworkSrc = artwork?.src;
   const selectedArtworkSrc = designContext?.selectedArtwork?.src;