@shopify/shop-minis-react 0.0.2 → 0.0.4

package/src/components/commerce/product-card.tsx

@@ -0,0 +1,427 @@
+import * as React from 'react'
+
+import {cva, type VariantProps} from 'class-variance-authority'
+import {Slot as SlotPrimitive} from 'radix-ui'
+
+import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
+import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
+import {formatMoney} from '../../lib/formatMoney'
+import {cn} from '../../lib/utils'
+import {
+  type Product,
+  type ProductVariant,
+} from '../../types/minisSDK.generated.d'
+import {Badge} from '../ui/badge'
+import {Button} from '../ui/button'
+import {Icon, type LucideIconName} from '../ui/icon'
+import {Touchable} from '../ui/touchable'
+
+const productCardVariants = cva(
+  'relative overflow-hidden rounded-xl border border-gray-200',
+  {
+    variants: {
+      variant: {
+        default: '',
+        priceOverlay: '',
+        compact: '',
+      },
+      touchable: {
+        true: 'cursor-pointer',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      touchable: true,
+    },
+  }
+)
+
+// Primitive components (building blocks)
+export interface ProductCardRootProps
+  extends React.ComponentProps<'div'>,
+    VariantProps<typeof productCardVariants> {
+  variant?: 'default' | 'priceOverlay' | 'compact'
+  touchable?: boolean
+  asChild?: boolean
+  onPress?: () => void
+}
+
+function ProductCardRoot({
+  className,
+  variant,
+  touchable = true,
+  asChild = false,
+  onPress,
+  ...props
+}: ProductCardRootProps) {
+  const Comp = asChild ? SlotPrimitive.Slot : 'div'
+
+  const content = (
+    <Comp
+      className={cn(
+        productCardVariants({variant, touchable}),
+        'border-0',
+        className
+      )}
+      {...props}
+    />
+  )
+
+  if (touchable && onPress) {
+    return (
+      <Touchable onPress={onPress} asChild>
+        {content}
+      </Touchable>
+    )
+  }
+
+  return content
+}
+
+function ProductCardImageContainer({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & {
+  variant?: 'default' | 'priceOverlay' | 'compact'
+}) {
+  return (
+    <div
+      data-slot="product-card-image-container"
+      className={cn(
+        'relative overflow-hidden rounded-xl border border-gray-200',
+        'w-full aspect-square',
+        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ProductCardImage({
+  className,
+  src,
+  alt,
+  ...props
+}: React.ComponentProps<'img'> & {
+  src?: string
+  alt?: string
+}) {
+  return (
+    <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+      {src ? (
+        <img
+          data-slot="product-card-image"
+          src={src}
+          alt={alt}
+          className={cn('w-full h-full object-cover', className)}
+          {...props}
+        />
+      ) : (
+        <div className="text-gray-400 text-sm">No Image</div>
+      )}
+    </div>
+  )
+}
+
+function ProductCardBadge({
+  className,
+  position = 'bottom-left',
+  children,
+  ...props
+}: React.ComponentProps<typeof Badge> & {
+  position?: 'top-left' | 'bottom-left'
+}) {
+  return (
+    <div
+      className={cn(
+        'absolute z-10',
+        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'
+      )}
+    >
+      <Badge
+        className={cn('bg-black/50 text-white rounded', className)}
+        {...props}
+      >
+        {children}
+      </Badge>
+    </div>
+  )
+}
+
+function ProductCardFavoriteButton({
+  className,
+  onPress,
+  filled = false,
+  icon = 'Heart',
+  ...props
+}: React.ComponentProps<'div'> & {
+  onPress?: () => void
+  filled?: boolean
+  icon?: LucideIconName
+}) {
+  return (
+    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
+      <Touchable onPress={onPress} asChild>
+        <Button
+          variant="secondary"
+          size="icon"
+          className={cn(
+            'h-8 w-8 rounded-full border-0 shadow-sm',
+            filled ? 'bg-primary' : 'bg-grayscale-l6/60 backdrop-blur-sm'
+          )}
+        >
+          <Icon name={icon} filled={filled} className="h-4 w-4 text-white" />
+        </Button>
+      </Touchable>
+    </div>
+  )
+}
+
+function ProductCardInfo({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & {
+  variant?: 'default' | 'priceOverlay' | 'compact'
+}) {
+  if (variant !== 'default') {
+    return null
+  }
+
+  return (
+    <div
+      data-slot="product-card-info"
+      className={cn('px-1 pt-2 pb-0 space-y-1', className)}
+      {...props}
+    />
+  )
+}
+
+function ProductCardTitle({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'h3'>) {
+  return (
+    <h3
+      data-slot="product-card-title"
+      className={cn(
+        'text-sm font-medium leading-tight text-gray-900',
+        'truncate overflow-hidden whitespace-nowrap text-ellipsis',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+function ProductCardPrice({className, ...props}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="product-card-price"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ProductCardCurrentPrice({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="product-card-current-price"
+      className={cn('text-sm font-semibold text-gray-900', className)}
+      {...props}
+    />
+  )
+}
+
+function ProductCardOriginalPrice({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="product-card-original-price"
+      className={cn('text-sm text-gray-500 line-through', className)}
+      {...props}
+    />
+  )
+}
+
+export interface ProductCardProps {
+  product: Product
+  selectedProductVariant?: ProductVariant
+  variant?: 'default' | 'priceOverlay' | 'compact'
+  touchable?: boolean
+  badgeText?: string
+  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  onFavoriteToggled?: (isFavorited: boolean) => void
+  sectionId?: string
+}
+
+// Composed ProductCard component
+function ProductCard({
+  product,
+  selectedProductVariant,
+  variant = 'default',
+  touchable = true,
+  badgeText,
+  badgeVariant = 'secondary',
+  onFavoriteToggled,
+}: ProductCardProps) {
+  const {navigateToProduct} = useShopNavigation()
+  const {saveProduct, unsaveProduct} = useSavedProductsActions()
+
+  const {
+    id,
+    title,
+    featuredImage,
+    price,
+    compareAtPrice,
+    isFavorited,
+    defaultVariantId,
+    shop,
+  } = product
+
+  // Use selected variant data if available
+  const displayImage = selectedProductVariant?.image || featuredImage
+  const displayPrice = selectedProductVariant?.price || price
+  const displayCompareAtPrice =
+    selectedProductVariant?.compareAtPrice || compareAtPrice
+
+  // Local state for optimistic UI updates
+  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)
+
+  const currencyCode = displayPrice?.currencyCode
+  const amount = displayPrice?.amount
+  const imageUrl = displayImage?.url
+  const imageAltText = displayImage?.altText || title
+  const compareAtPriceAmount = displayCompareAtPrice?.amount
+  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount
+
+  const handlePress = React.useCallback(() => {
+    if (!touchable) return
+
+    navigateToProduct({
+      productId: id,
+    })
+  }, [navigateToProduct, id, touchable])
+
+  const handleFavoritePress = React.useCallback(async () => {
+    const previousState = isFavoritedLocal
+
+    // Optimistic update
+    setIsFavoritedLocal(!previousState)
+    onFavoriteToggled?.(!previousState)
+
+    try {
+      if (previousState) {
+        await unsaveProduct({
+          productId: id,
+          shopId: shop.id,
+          productVariantId: selectedProductVariant?.id || defaultVariantId,
+        })
+      } else {
+        await saveProduct({
+          productId: id,
+          shopId: shop.id,
+          productVariantId: selectedProductVariant?.id || defaultVariantId,
+        })
+      }
+    } catch (error) {
+      // Revert optimistic update on error
+      setIsFavoritedLocal(previousState)
+      onFavoriteToggled?.(previousState)
+    }
+  }, [
+    isFavoritedLocal,
+    id,
+    shop.id,
+    selectedProductVariant?.id,
+    defaultVariantId,
+    saveProduct,
+    unsaveProduct,
+    onFavoriteToggled,
+  ])
+
+  return (
+    <ProductCardRoot
+      variant={variant}
+      touchable={touchable}
+      onPress={handlePress}
+    >
+      <ProductCardImageContainer variant={variant}>
+        <ProductCardImage src={imageUrl} alt={imageAltText} />
+
+        {/* Price overlay badge for priceOverlay variant */}
+        {variant === 'priceOverlay' && currencyCode && amount && (
+          <ProductCardBadge position="top-left">
+            {formatMoney(amount, currencyCode)}
+          </ProductCardBadge>
+        )}
+
+        {/* Custom badge */}
+        {badgeText && (
+          <ProductCardBadge position="bottom-left" variant={badgeVariant}>
+            {badgeText}
+          </ProductCardBadge>
+        )}
+
+        {/* Favorite button */}
+        <ProductCardFavoriteButton
+          filled={isFavoritedLocal}
+          onPress={handleFavoritePress}
+        />
+      </ProductCardImageContainer>
+
+      {/* Product info for default variant */}
+      <ProductCardInfo variant={variant}>
+        <ProductCardTitle>{title}</ProductCardTitle>
+
+        <ProductCardPrice>
+          {hasDiscount ? (
+            <>
+              <ProductCardCurrentPrice>
+                {formatMoney(amount, currencyCode)}
+              </ProductCardCurrentPrice>
+              <ProductCardOriginalPrice>
+                {formatMoney(
+                  compareAtPriceAmount,
+                  displayCompareAtPrice?.currencyCode || currencyCode
+                )}
+              </ProductCardOriginalPrice>
+            </>
+          ) : (
+            <ProductCardCurrentPrice>
+              {formatMoney(amount, currencyCode)}
+            </ProductCardCurrentPrice>
+          )}
+        </ProductCardPrice>
+      </ProductCardInfo>
+    </ProductCardRoot>
+  )
+}
+
+export {
+  // Composed component
+  ProductCard,
+  // Primitive components for custom composition
+  ProductCardRoot,
+  ProductCardImageContainer,
+  ProductCardImage,
+  ProductCardBadge,
+  ProductCardFavoriteButton,
+  ProductCardInfo,
+  ProductCardTitle,
+  ProductCardPrice,
+  ProductCardCurrentPrice,
+  ProductCardOriginalPrice,
+}