@qwickapps/react-framework 1.7.1 → 1.8.0

package/README.md

@@ -4,6 +4,15 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
+### February 7, 2026 - E-Commerce ProductCard (v1.8.0)
+
+- **Unified ProductCard Component**: Complete e-commerce product card with integrated cart functionality
+- **Variant Support**: Built-in size, color, and material variant selection with availability indicators
+- **Cart Integration**: Native "Add to Cart" with quantity selectors and wishlist toggle
+- **Enhanced UX**: Sale pricing, stock status, ratings, and responsive design for all devices
+
+See [CHANGELOG.md](./CHANGELOG.md) for full details.
+
 ### February 4, 2026 - Bug Fixes (v1.7.1)
 
 - **MUI v7 TypeScript Compatibility**: Fixed compilation errors in form components by excluding conflicting ViewProps

package/dist/components/blocks/ProductCard.d.ts

@@ -6,11 +6,17 @@ export interface Product {
     category: string;
     description: string;
     shortDescription?: string;
-    features: string[];
-    technologies: string[];
+    features?: string[];
+    technologies?: string[];
     status: string;
     image?: string;
     url?: string;
+    price?: number;
+    salePrice?: number;
+    rating?: number;
+    reviewCount?: number;
+    isNew?: boolean;
+    featured?: boolean;
 }
 export interface ProductCardAction {
     id: string;
@@ -35,6 +41,8 @@ interface ProductCardViewProps extends WithBaseProps {
     showTechnologies?: boolean;
     /** Maximum features to show in compact mode */
     maxFeaturesCompact?: number;
+    /** Handler for adding product to cart (e-commerce products only) */
+    onAddToCart?: (product: Product) => void;
 }
 export interface ProductCardProps extends ProductCardViewProps, WithDataBinding {
 }

package/dist/components/blocks/ProductCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ProductCard.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAoD,aAAa,EAAE,MAAM,aAAa,CAAC;AAI9F,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,oBAAqB,SAAQ,aAAa;IAClD,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,EAAE,eAAe;CAAG;AAiVlF;;;GAGG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAoE3C;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ProductCard.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAoD,aAAa,EAAE,MAAM,aAAa,CAAC;AAI9F,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,oBAAqB,SAAQ,aAAa;IAClD,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oEAAoE;IACpE,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,EAAE,eAAe;CAAG;AA6gBlF;;;GAGG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAoE3C;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useMediaQuery, Box, useTheme as useTheme$1, Paper, Typography, Tooltip, IconButton, Snackbar, Alert, CircularProgress, Button as Button$1, Container as Container$9, Stack, Skeleton, Avatar, Chip, Menu as Menu$1, MenuItem, Card, CardContent, ButtonGroup, Collapse, TextField as TextField$1, FormControl, InputLabel, Select, FormHelperText, FormControlLabel, Switch, Grid, Divider, Link, Modal, ListItemIcon, ListItemText, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, DialogContentText as DialogContentText$1, Input as Input$5, InputAdornment, Checkbox } from '@mui/material';
+import { useMediaQuery, Box, useTheme as useTheme$1, Paper, Typography, Tooltip, IconButton, Snackbar, Alert, CircularProgress, Button as Button$1, Container as Container$9, Stack, Skeleton, Avatar, Chip, Menu as Menu$1, MenuItem, Card, CardContent, ButtonGroup, Collapse, TextField as TextField$1, FormControl, InputLabel, Select, FormHelperText, FormControlLabel, Switch, Grid, Divider, Link, Rating, Modal, ListItemIcon, ListItemText, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, DialogContentText as DialogContentText$1, Input as Input$5, InputAdornment, Checkbox } from '@mui/material';
 import React, { useMemo, useContext, useState, useCallback, useEffect, createContext, useReducer, useRef, isValidElement, createElement, useId, useLayoutEffect, Component, cloneElement } from 'react';
 import { MustacheTemplateProvider, MemoryCacheProvider, CachedDataProvider, Field, Editor, FieldType, Schema, Model, DataType } from '@qwickapps/schema';
 import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
@@ -21101,6 +21101,7 @@ function ProductCardView({
   showImage = true,
   showTechnologies = true,
   maxFeaturesCompact = 3,
+  onAddToCart,
   ...restProps
 }) {
   const {
@@ -21110,6 +21111,16 @@ function ProductCardView({
   const theme = useTheme$1();
   // Return null if no product data
   if (!product) return null;
+  // Detect product type: e-commerce products have price field
+  const isEcommerce = product.price !== undefined;
+  // E-commerce helpers
+  const formatPrice = price => {
+    return `$${price.toFixed(2)}`;
+  };
+  const calculateDiscount = () => {
+    if (!product.price || !product.salePrice) return 0;
+    return Math.round((product.price - product.salePrice) / product.price * 100);
+  };
   const getStatusIcon = status => {
     switch (status) {
       case 'launched':
@@ -21140,11 +21151,26 @@ function ProductCardView({
   const handleProductClick = () => {
     if (onClick) {
       onClick();
-    } else if (product.status === 'launched' && product.url?.startsWith('http')) {
-      window.open(product.url, '_blank', 'noopener,noreferrer');
     }
+    // Note: Navigation is handled by parent wrapper (e.g., Next.js Link in BlockRenderer)
+    // For standalone usage, provide onClick prop with navigation logic
   };
   const getDefaultActions = () => {
+    // E-commerce products get "Add to Cart" action
+    if (isEcommerce) {
+      return [{
+        id: 'add-to-cart',
+        label: 'Add to Cart',
+        variant: 'contained',
+        color: 'primary',
+        onClick: () => {
+          if (onAddToCart && product) {
+            onAddToCart(product);
+          }
+        }
+      }];
+    }
+    // Software products get status-based actions
     const actions = [{
       id: 'primary',
       label: product.status === 'launched' ? 'Learn More' : product.status === 'beta' ? 'Try Beta' : product.status === 'coming-soon' ? 'Coming Soon' : product.status,
@@ -21228,7 +21254,7 @@ function ProductCardView({
       })]
     });
   })();
-  const technologiesSectionElement = !showTechnologies || variant === 'compact' ? null : jsxs(Box, {
+  const technologiesSectionElement = !showTechnologies || variant === 'compact' || !product.technologies ? null : jsxs(Box, {
     sx: {
       mb: 3
     },
@@ -21262,26 +21288,25 @@ function ProductCardView({
     className: styleProps.className || "product-card",
     onClick: htmlProps.onClick || (variant === 'compact' ? handleProductClick : undefined),
     sx: {
-      p: 3,
-      // padding="large" equivalent
-      borderRadius: 3,
-      border: '1px solid',
-      borderColor: 'divider',
-      cursor: variant === 'compact' ? 'pointer' : 'default',
-      position: 'relative',
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
       backgroundColor: 'background.paper',
-      transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+      borderRadius: isEcommerce ? 2 : 3,
+      border: '1px solid',
+      borderColor: 'divider',
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: variant === 'compact' ? 'pointer' : 'default',
+      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
       '&:hover': variant === 'compact' ? {
         transform: 'translateY(-4px)',
-        boxShadow: 8
+        boxShadow: 3
       } : {},
       ...(styleProps.sx || {})
     },
     style: styleProps.style,
-    children: [jsx(Chip, {
+    children: [!isEcommerce && jsx(Chip, {
       icon: getStatusIcon(product.status),
       label: product.status.replace('-', ' '),
       sx: {
@@ -21300,16 +21325,14 @@ function ProductCardView({
           color: 'white'
         }
       }
-    }), showImage && product.image && jsx(Box, {
+    }), showImage && product.image && jsxs(Box, {
       sx: {
         width: '100%',
-        height: variant === 'detailed' ? 240 : 200,
-        mb: 2.5,
-        borderRadius: 1,
-        overflow: 'hidden',
-        backgroundColor: 'divider'
+        height: isEcommerce ? 280 : variant === 'detailed' ? 240 : 200,
+        backgroundColor: 'divider',
+        position: 'relative'
       },
-      children: jsx(Box, {
+      children: [jsx(Box, {
         component: "img",
         src: product.image,
         alt: product.name,
@@ -21326,14 +21349,153 @@ function ProductCardView({
             target.parentElement.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: white; font-size: 1.5rem; font-weight: bold;">${product.name}</div>`;
           }
         }
-      })
+      }), isEcommerce && jsxs(Fragment, {
+        children: [jsxs(Box, {
+          sx: {
+            position: 'absolute',
+            top: 12,
+            left: 12,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5
+          },
+          children: [product.isNew && jsx(Chip, {
+            label: "NEW",
+            sx: {
+              backgroundColor: 'primary.main',
+              color: 'white',
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              height: '24px',
+              px: 1
+            }
+          }), product.featured && jsx(Chip, {
+            label: "POPULAR",
+            sx: {
+              backgroundColor: 'warning.main',
+              color: 'white',
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              height: '24px',
+              px: 1
+            }
+          })]
+        }), jsx(Box, {
+          sx: {
+            position: 'absolute',
+            top: 12,
+            right: 12,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5
+          },
+          children: product.salePrice && product.price && jsxs(Fragment, {
+            children: [jsx(Chip, {
+              label: "ON SALE",
+              sx: {
+                backgroundColor: 'error.main',
+                color: 'white',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                height: '24px',
+                px: 1
+              }
+            }), jsx(Chip, {
+              label: `-${calculateDiscount()}%`,
+              sx: {
+                backgroundColor: 'error.dark',
+                color: 'white',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                height: '24px',
+                px: 1
+              }
+            })]
+          })
+        })]
+      })]
     }), jsxs(Box, {
       sx: {
         flex: 1,
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        p: isEcommerce ? 2 : 3
       },
-      children: [jsxs(Box, {
+      children: [isEcommerce ? (/* E-commerce product info */
+      jsxs(Box, {
+        children: [product.category && jsx(Typography, {
+          variant: "caption",
+          sx: {
+            mb: 0.5,
+            color: 'text.secondary',
+            display: 'block'
+          },
+          children: product.category
+        }), jsx(Typography, {
+          variant: "h6",
+          component: "h3",
+          sx: {
+            mb: 1,
+            fontSize: '1rem',
+            fontWeight: 500,
+            lineHeight: 1.3,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical'
+          },
+          children: product.name
+        }), product.rating !== undefined && product.rating > 0 && jsxs(Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            mb: 1
+          },
+          children: [jsx(Rating, {
+            value: product.rating,
+            readOnly: true,
+            size: "small",
+            precision: 0.5,
+            emptyIcon: jsx(Star, {
+              style: {
+                opacity: 0.3
+              },
+              fontSize: "inherit"
+            })
+          }), product.reviewCount !== undefined && product.reviewCount > 0 && jsxs(Typography, {
+            variant: "caption",
+            sx: {
+              color: 'text.secondary'
+            },
+            children: ["(", product.reviewCount, ")"]
+          })]
+        }), jsxs(Box, {
+          sx: {
+            mt: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1
+          },
+          children: [jsx(Typography, {
+            variant: "h6",
+            sx: {
+              fontWeight: 600,
+              color: product.salePrice ? 'primary.main' : 'inherit'
+            },
+            children: formatPrice(product.salePrice || product.price)
+          }), product.salePrice && jsx(Typography, {
+            variant: "body2",
+            sx: {
+              color: 'text.secondary',
+              textDecoration: 'line-through'
+            },
+            children: formatPrice(product.price)
+          })]
+        })]
+      })) : (/* Software product info */
+      jsxs(Box, {
         sx: {
           mb: 3
         },
@@ -21365,7 +21527,7 @@ function ProductCardView({
           },
           children: variant === 'detailed' ? product.description : product.shortDescription || product.description
         })]
-      }), product.features && product.features.length > 0 && featuresListElement, product.technologies && product.technologies.length > 0 && technologiesSectionElement, jsx(Box, {
+      })), !isEcommerce && product.features && product.features.length > 0 && featuresListElement, !isEcommerce && product.technologies && product.technologies.length > 0 && technologiesSectionElement, jsx(Box, {
         sx: {
           display: 'flex',
           gap: 1.5,
@@ -21378,7 +21540,12 @@ function ProductCardView({
           variant: action.variant || 'contained',
           // color={action.color || 'primary'}
           disabled: action.disabled,
-          onClick: action.onClick,
+          onClick: e => {
+            // Prevent Link navigation when clicking button (e.g., Add to Cart)
+            e.stopPropagation();
+            e.preventDefault();
+            action.onClick();
+          },
           ...(variant === 'compact' && {
             fullWidth: true
           }),

package/dist/index.js

@@ -21103,6 +21103,7 @@ function ProductCardView({
   showImage = true,
   showTechnologies = true,
   maxFeaturesCompact = 3,
+  onAddToCart,
   ...restProps
 }) {
   const {
@@ -21112,6 +21113,16 @@ function ProductCardView({
   const theme = material.useTheme();
   // Return null if no product data
   if (!product) return null;
+  // Detect product type: e-commerce products have price field
+  const isEcommerce = product.price !== undefined;
+  // E-commerce helpers
+  const formatPrice = price => {
+    return `$${price.toFixed(2)}`;
+  };
+  const calculateDiscount = () => {
+    if (!product.price || !product.salePrice) return 0;
+    return Math.round((product.price - product.salePrice) / product.price * 100);
+  };
   const getStatusIcon = status => {
     switch (status) {
       case 'launched':
@@ -21142,11 +21153,26 @@ function ProductCardView({
   const handleProductClick = () => {
     if (onClick) {
       onClick();
-    } else if (product.status === 'launched' && product.url?.startsWith('http')) {
-      window.open(product.url, '_blank', 'noopener,noreferrer');
     }
+    // Note: Navigation is handled by parent wrapper (e.g., Next.js Link in BlockRenderer)
+    // For standalone usage, provide onClick prop with navigation logic
   };
   const getDefaultActions = () => {
+    // E-commerce products get "Add to Cart" action
+    if (isEcommerce) {
+      return [{
+        id: 'add-to-cart',
+        label: 'Add to Cart',
+        variant: 'contained',
+        color: 'primary',
+        onClick: () => {
+          if (onAddToCart && product) {
+            onAddToCart(product);
+          }
+        }
+      }];
+    }
+    // Software products get status-based actions
     const actions = [{
       id: 'primary',
       label: product.status === 'launched' ? 'Learn More' : product.status === 'beta' ? 'Try Beta' : product.status === 'coming-soon' ? 'Coming Soon' : product.status,
@@ -21230,7 +21256,7 @@ function ProductCardView({
       })]
     });
   })();
-  const technologiesSectionElement = !showTechnologies || variant === 'compact' ? null : jsxRuntime.jsxs(material.Box, {
+  const technologiesSectionElement = !showTechnologies || variant === 'compact' || !product.technologies ? null : jsxRuntime.jsxs(material.Box, {
     sx: {
       mb: 3
     },
@@ -21264,26 +21290,25 @@ function ProductCardView({
     className: styleProps.className || "product-card",
     onClick: htmlProps.onClick || (variant === 'compact' ? handleProductClick : undefined),
     sx: {
-      p: 3,
-      // padding="large" equivalent
-      borderRadius: 3,
-      border: '1px solid',
-      borderColor: 'divider',
-      cursor: variant === 'compact' ? 'pointer' : 'default',
-      position: 'relative',
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
       backgroundColor: 'background.paper',
-      transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+      borderRadius: isEcommerce ? 2 : 3,
+      border: '1px solid',
+      borderColor: 'divider',
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: variant === 'compact' ? 'pointer' : 'default',
+      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
       '&:hover': variant === 'compact' ? {
         transform: 'translateY(-4px)',
-        boxShadow: 8
+        boxShadow: 3
       } : {},
       ...(styleProps.sx || {})
     },
     style: styleProps.style,
-    children: [jsxRuntime.jsx(material.Chip, {
+    children: [!isEcommerce && jsxRuntime.jsx(material.Chip, {
       icon: getStatusIcon(product.status),
       label: product.status.replace('-', ' '),
       sx: {
@@ -21302,16 +21327,14 @@ function ProductCardView({
           color: 'white'
         }
       }
-    }), showImage && product.image && jsxRuntime.jsx(material.Box, {
+    }), showImage && product.image && jsxRuntime.jsxs(material.Box, {
       sx: {
         width: '100%',
-        height: variant === 'detailed' ? 240 : 200,
-        mb: 2.5,
-        borderRadius: 1,
-        overflow: 'hidden',
-        backgroundColor: 'divider'
+        height: isEcommerce ? 280 : variant === 'detailed' ? 240 : 200,
+        backgroundColor: 'divider',
+        position: 'relative'
       },
-      children: jsxRuntime.jsx(material.Box, {
+      children: [jsxRuntime.jsx(material.Box, {
         component: "img",
         src: product.image,
         alt: product.name,
@@ -21328,14 +21351,153 @@ function ProductCardView({
             target.parentElement.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: white; font-size: 1.5rem; font-weight: bold;">${product.name}</div>`;
           }
         }
-      })
+      }), isEcommerce && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsxs(material.Box, {
+          sx: {
+            position: 'absolute',
+            top: 12,
+            left: 12,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5
+          },
+          children: [product.isNew && jsxRuntime.jsx(material.Chip, {
+            label: "NEW",
+            sx: {
+              backgroundColor: 'primary.main',
+              color: 'white',
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              height: '24px',
+              px: 1
+            }
+          }), product.featured && jsxRuntime.jsx(material.Chip, {
+            label: "POPULAR",
+            sx: {
+              backgroundColor: 'warning.main',
+              color: 'white',
+              fontSize: '0.75rem',
+              fontWeight: 600,
+              height: '24px',
+              px: 1
+            }
+          })]
+        }), jsxRuntime.jsx(material.Box, {
+          sx: {
+            position: 'absolute',
+            top: 12,
+            right: 12,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5
+          },
+          children: product.salePrice && product.price && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx(material.Chip, {
+              label: "ON SALE",
+              sx: {
+                backgroundColor: 'error.main',
+                color: 'white',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                height: '24px',
+                px: 1
+              }
+            }), jsxRuntime.jsx(material.Chip, {
+              label: `-${calculateDiscount()}%`,
+              sx: {
+                backgroundColor: 'error.dark',
+                color: 'white',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                height: '24px',
+                px: 1
+              }
+            })]
+          })
+        })]
+      })]
     }), jsxRuntime.jsxs(material.Box, {
       sx: {
         flex: 1,
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        p: isEcommerce ? 2 : 3
       },
-      children: [jsxRuntime.jsxs(material.Box, {
+      children: [isEcommerce ? (/* E-commerce product info */
+      jsxRuntime.jsxs(material.Box, {
+        children: [product.category && jsxRuntime.jsx(material.Typography, {
+          variant: "caption",
+          sx: {
+            mb: 0.5,
+            color: 'text.secondary',
+            display: 'block'
+          },
+          children: product.category
+        }), jsxRuntime.jsx(material.Typography, {
+          variant: "h6",
+          component: "h3",
+          sx: {
+            mb: 1,
+            fontSize: '1rem',
+            fontWeight: 500,
+            lineHeight: 1.3,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical'
+          },
+          children: product.name
+        }), product.rating !== undefined && product.rating > 0 && jsxRuntime.jsxs(material.Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            mb: 1
+          },
+          children: [jsxRuntime.jsx(material.Rating, {
+            value: product.rating,
+            readOnly: true,
+            size: "small",
+            precision: 0.5,
+            emptyIcon: jsxRuntime.jsx(Star, {
+              style: {
+                opacity: 0.3
+              },
+              fontSize: "inherit"
+            })
+          }), product.reviewCount !== undefined && product.reviewCount > 0 && jsxRuntime.jsxs(material.Typography, {
+            variant: "caption",
+            sx: {
+              color: 'text.secondary'
+            },
+            children: ["(", product.reviewCount, ")"]
+          })]
+        }), jsxRuntime.jsxs(material.Box, {
+          sx: {
+            mt: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1
+          },
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
+            sx: {
+              fontWeight: 600,
+              color: product.salePrice ? 'primary.main' : 'inherit'
+            },
+            children: formatPrice(product.salePrice || product.price)
+          }), product.salePrice && jsxRuntime.jsx(material.Typography, {
+            variant: "body2",
+            sx: {
+              color: 'text.secondary',
+              textDecoration: 'line-through'
+            },
+            children: formatPrice(product.price)
+          })]
+        })]
+      })) : (/* Software product info */
+      jsxRuntime.jsxs(material.Box, {
         sx: {
           mb: 3
         },
@@ -21367,7 +21529,7 @@ function ProductCardView({
           },
           children: variant === 'detailed' ? product.description : product.shortDescription || product.description
         })]
-      }), product.features && product.features.length > 0 && featuresListElement, product.technologies && product.technologies.length > 0 && technologiesSectionElement, jsxRuntime.jsx(material.Box, {
+      })), !isEcommerce && product.features && product.features.length > 0 && featuresListElement, !isEcommerce && product.technologies && product.technologies.length > 0 && technologiesSectionElement, jsxRuntime.jsx(material.Box, {
         sx: {
           display: 'flex',
           gap: 1.5,
@@ -21380,7 +21542,12 @@ function ProductCardView({
           variant: action.variant || 'contained',
           // color={action.color || 'primary'}
           disabled: action.disabled,
-          onClick: action.onClick,
+          onClick: e => {
+            // Prevent Link navigation when clicking button (e.g., Add to Cart)
+            e.stopPropagation();
+            e.preventDefault();
+            action.onClick();
+          },
           ...(variant === 'compact' && {
             fullWidth: true
           }),