@pagamio/frontend-commons-lib 0.8.337 → 0.8.338

package/lib/components/ecommerce/ProductCard.d.ts

@@ -18,4 +18,4 @@ export interface ProductCardProps {
     }) => React.ReactNode;
     onNavigate?: (productUrl: string) => void;
 }
-export declare function ProductCard({ product, onAddToCart, isAddingToCart, storeId, basePath, featured, linkSuffix, currency, renderLink, onNavigate, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard({ product, onAddToCart, isAddingToCart, basePath, featured, linkSuffix, currency, renderLink, onNavigate, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/ProductCard.js

@@ -4,14 +4,17 @@ import { cn } from '../../helpers/utils';
 import { formatPrice } from '../../helpers/utils';
 import ImageComponent from '../ui/ImageComponent';
 const LOW_STOCK_THRESHOLD = 5;
-export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, basePath = '/shop', featured = false, linkSuffix, currency = 'ZAR', renderLink, onNavigate, }) {
+export function ProductCard({ product, onAddToCart, isAddingToCart, basePath = '/shop', featured = false, linkSuffix, currency = 'ZAR', renderLink, onNavigate, }) {
     // Non-stock products (services / fees / digital goods) have no
     // StockItem rows by design — they're always available
     const isNonStock = product.isStockItem === false;
     const hasStock = isNonStock || product.totalStock > 0;
     const isLowStock = !isNonStock && hasStock && product.totalStock <= LOW_STOCK_THRESHOLD;
     const isBackorderable = product.allowBackorders === true;
-    const canAddToCart = (hasStock || isBackorderable) && !!storeId;
+    // `storeId` is informational only — the backend auto-picks a fulfillment
+    // store when one isn't explicitly supplied. The CTA stays enabled as
+    // long as the product has stock (or is back-orderable).
+    const canAddToCart = hasStock || isBackorderable;
     const hasVariants = product.variants && product.variants.length > 0;
     const priceDisplay = (() => {
         if (!hasVariants) {
@@ -39,8 +42,6 @@ export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, bas
         }
         return (_jsx("a", { href: productUrl, className: className, tabIndex: tabIndex, "aria-label": ariaLabel, children: children }));
     };
-    // CTA state — kept identical to the previous behaviour so production code
-    // paths (backorder, select-store, sold-out, adding spinner) still work.
     const ctaDisabled = hasVariants ? !hasStock && !isBackorderable : !canAddToCart || !!isAddingToCart;
     const ctaLabel = hasVariants
         ? !hasStock && !isBackorderable
@@ -48,13 +49,11 @@ export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, bas
             : 'Options'
         : isAddingToCart
             ? 'Adding…'
-            : !storeId
-                ? 'Select Store'
-                : hasStock
-                    ? 'Add to cart'
-                    : isBackorderable
-                        ? 'Backorder'
-                        : 'Sold Out';
+            : hasStock
+                ? 'Add to cart'
+                : isBackorderable
+                    ? 'Backorder'
+                    : 'Sold Out';
     return (_jsxs("article", { className: cn('group flex h-full flex-col overflow-hidden bg-background', 'rounded-lg border', 'hover:shadow-md', featured ? 'border-foreground shadow-md' : 'border-border'), children: [_jsxs(LinkWrapper, { className: "relative block aspect-square w-full overflow-hidden bg-muted", tabIndex: -1, ariaLabel: `View ${product.name}`, children: [product.imageUrl ? (_jsx(ImageComponent, { src: product.imageUrl, alt: product.name, fill: true, className: "object-cover", sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground", children: _jsx("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) })), featured && hasStock && (_jsx("span", { className: "absolute left-2 top-2 z-10 rounded-md bg-foreground px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-background", children: "Popular" })), !hasStock && isBackorderable && (_jsx("span", { className: "absolute left-2 top-2 z-10 rounded-md bg-warning px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white", children: "Backorder" })), !hasStock && !isBackorderable && (_jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-black/40 text-[11px] font-bold uppercase tracking-wide text-white", children: "Out of stock" }))] }), _jsxs("section", { className: "flex flex-1 flex-col gap-1 p-3", children: [_jsxs(LinkWrapper, { className: "contents", children: [_jsx("span", { className: "text-base font-bold leading-none text-foreground", children: priceDisplay }), _jsx("span", { className: "line-clamp-2 min-h-[2.5rem] text-sm leading-snug text-foreground transition-colors group-hover:text-primary", children: product.name })] }), isLowStock && _jsxs("span", { className: "text-[10px] font-medium text-warning", children: ["Only ", product.totalStock, " left"] }), _jsxs("button", { type: "button", disabled: ctaDisabled, onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.337",
+  "version": "0.8.338",
   "publishConfig": {
     "access": "public",
     "provenance": false