@pagamio/frontend-commons-lib 0.8.336 → 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

@@ -1,17 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HiOutlineShoppingCart, HiOutlineViewGrid } from 'react-icons/hi';
+import { HiOutlineAdjustments, HiOutlineShoppingCart } from 'react-icons/hi';
 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,7 +42,19 @@ export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, bas
         }
         return (_jsx("a", { href: productUrl, className: className, tabIndex: tabIndex, "aria-label": ariaLabel, children: children }));
     };
-    return (_jsxs("div", { className: cn('group relative flex flex-col overflow-hidden bg-background transition-shadow duration-200', 'rounded-lg sm:rounded-xl', 'hover:shadow-lg', featured ? 'border-2 border-foreground shadow-md' : 'border border-border shadow-sm'), children: [_jsxs(LinkWrapper, { className: "relative block aspect-[4/3] 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" }) }) })), !hasStock && !isBackorderable && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40", children: _jsx("span", { className: "rounded-full bg-white/90 px-3 py-1 text-[11px] font-bold uppercase tracking-wide text-foreground sm:px-4 sm:py-1.5 sm:text-xs", children: "Out of Stock" }) })), !hasStock && isBackorderable && (_jsx("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-warning px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white sm:left-3 sm:top-3 sm:px-2.5 sm:py-1", children: "Backorder" })), featured && hasStock && (_jsx("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-foreground px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white sm:left-3 sm:top-3 sm:px-2.5 sm:py-1", children: "Popular" }))] }), _jsxs("div", { className: "flex flex-1 flex-col p-1.5 sm:p-2", children: [_jsx(LinkWrapper, { children: _jsx("h3", { className: "line-clamp-2 text-xs font-medium leading-snug text-foreground transition-colors hover:text-primary", children: product.name }) }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "mt-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-1", children: [_jsx("span", { className: "text-xs font-bold text-foreground sm:text-sm", children: priceDisplay }), hasVariants && (_jsxs("span", { className: "text-[10px] font-medium text-muted-foreground", children: [product.variants.length, " opt"] }))] }), isLowStock && _jsxs("p", { className: "mt-0.5 text-[10px] font-medium text-warning", children: ["Only ", product.totalStock, " left"] })] }), _jsx("button", { type: "button", disabled: hasVariants ? !hasStock && !isBackorderable : !canAddToCart || isAddingToCart, onClick: (e) => {
+    const ctaDisabled = hasVariants ? !hasStock && !isBackorderable : !canAddToCart || !!isAddingToCart;
+    const ctaLabel = hasVariants
+        ? !hasStock && !isBackorderable
+            ? 'Out of Stock'
+            : 'Options'
+        : isAddingToCart
+            ? 'Adding…'
+            : 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();
                             if (hasVariants) {
@@ -53,13 +68,9 @@ export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, bas
                             else if (onAddToCart && canAddToCart) {
                                 onAddToCart(product);
                             }
-                        }, className: cn('mt-1.5 flex h-7 w-full items-center justify-center gap-1 rounded-md text-[11px] font-medium transition-colors sm:h-8', hasVariants
-                            ? hasStock || isBackorderable
-                                ? 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80'
-                                : 'cursor-not-allowed bg-muted text-muted-foreground'
-                            : canAddToCart && !isAddingToCart
-                                ? isBackorderable && !hasStock
-                                    ? 'bg-warning text-white hover:bg-warning/90'
-                                    : 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80'
-                                : 'cursor-not-allowed bg-muted text-muted-foreground'), children: hasVariants ? (_jsxs(_Fragment, { children: [_jsx(HiOutlineViewGrid, { className: "h-3.5 w-3.5" }), _jsx("span", { children: !hasStock && !isBackorderable ? 'Out of Stock' : 'Options' })] })) : isAddingToCart ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-background/30 border-t-background" }), _jsx("span", { children: "Adding..." })] })) : (_jsxs(_Fragment, { children: [_jsx(HiOutlineShoppingCart, { className: "h-3.5 w-3.5" }), _jsx("span", { children: !storeId ? 'Select Store' : hasStock ? 'Add' : isBackorderable ? 'Backorder' : 'Sold Out' })] })) })] })] }));
+                        }, title: hasVariants ? `Choose · ${product.variants.length} options` : undefined, className: cn('mt-auto inline-flex w-full items-center justify-center gap-1 whitespace-nowrap rounded-md px-2 py-1.5 text-xs font-semibold transition-colors', 'disabled:cursor-not-allowed disabled:opacity-50', hasVariants
+                            ? 'border border-primary text-primary hover:bg-primary hover:text-primary-foreground'
+                            : isBackorderable && !hasStock
+                                ? 'bg-warning text-white hover:bg-warning/90'
+                                : 'bg-primary text-primary-foreground hover:bg-primary/90'), children: [isAddingToCart ? (_jsx("span", { className: "h-3.5 w-3.5 shrink-0 animate-spin rounded-full border-2 border-current/30 border-t-current" })) : hasVariants ? (_jsx(HiOutlineAdjustments, { className: "h-3.5 w-3.5 shrink-0" })) : (_jsx(HiOutlineShoppingCart, { className: "h-3.5 w-3.5 shrink-0" })), _jsx("span", { className: "truncate", children: ctaLabel })] })] })] }));
 }

package/lib/components/ecommerce/ProductGrid.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import EmptyState from '../ui/EmptyState';
 import { ProductCard } from './ProductCard';
 import { ProductCardSkeleton } from './ProductCardSkeleton';
-const GRID_CLASSES = 'grid grid-cols-2 gap-1.5 sm:grid-cols-4 sm:gap-2 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8 2xl:grid-cols-10';
+const GRID_CLASSES = 'grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5';
 export function ProductGrid({ products, isLoading, onAddToCart, addingProductId, storeId, emptyMessage = 'No products found', basePath, linkSuffix, skeletonCount = 24, currency, renderLink, onNavigate, }) {
     if (isLoading) {
         return (_jsx("div", { className: GRID_CLASSES, children: Array.from({ length: skeletonCount }, (_, i) => (_jsx(ProductCardSkeleton, {}, i))) }));

package/lib/components/ui/Card.d.ts

@@ -31,7 +31,7 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement | HTMLAnchorElement>
     /** Renders the card as a clickable <a> element */
     href?: string;
 };
-export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
 export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/lib/styles.css

@@ -1142,6 +1142,9 @@ video {
 .grid {
   display: grid;
 }
+.contents {
+  display: contents;
+}
 .hidden {
   display: none;
 }
@@ -1315,6 +1318,9 @@ video {
 .min-h-9 {
   min-height: 2.25rem;
 }
+.min-h-\[2\.5rem\] {
+  min-height: 2.5rem;
+}
 .min-h-\[200px\] {
   min-height: 200px;
 }
@@ -2300,6 +2306,9 @@ video {
 .border-t-background {
   border-top-color: hsl(var(--background));
 }
+.border-t-current {
+  border-top-color: currentColor;
+}
 .\!bg-transparent {
   background-color: transparent !important;
 }
@@ -4443,9 +4452,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
-.hover\:text-primary:hover {
-  color: hsl(var(--primary));
-}
 .hover\:text-primary-700:hover {
   --tw-text-opacity: 1;
   color: rgb(23 14 49 / var(--tw-text-opacity, 1));
@@ -4817,9 +4823,6 @@ video {
   --tw-scale-y: .95;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.active\:bg-foreground\/80:active {
-  background-color: hsl(var(--foreground) / 0.8);
-}
 .enabled\:hover\:bg-gray-100:hover:enabled {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -4875,6 +4878,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
+.group:hover .group-hover\:text-primary {
+  color: hsl(var(--primary));
+}
 .group:focus .group-focus\:outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -6461,8 +6467,8 @@ video {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .sm\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .sm\:flex-row {
@@ -6567,11 +6573,6 @@ video {
     padding-bottom: 0.25rem;
   }
 
-  .sm\:py-1\.5 {
-    padding-top: 0.375rem;
-    padding-bottom: 0.375rem;
-  }
-
   .sm\:py-3 {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
@@ -6736,8 +6737,8 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .md\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .md\:flex-row {
@@ -6942,10 +6943,6 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .lg\:grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -6993,8 +6990,8 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .xl\:grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
+  .xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
   .xl\:px-24 {
@@ -7011,10 +7008,6 @@ video {
   .\32xl\:hidden {
     display: none;
   }
-
-  .\32xl\:grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
 }
 .rtl\:before\:-translate-x-5:where([dir="rtl"], [dir="rtl"] *)::before {
   content: var(--tw-content);

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.336",
+  "version": "0.8.338",
   "publishConfig": {
     "access": "public",
     "provenance": false