@pradip1995/segment-product-card 0.2.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pradip1995/segment-product-card",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts",
+    "./product-scroll": "./src/product-scroll.tsx"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.2.0",
+    "@pradip1995/segment-tokens": "0.2.0"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,10 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "product-card",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+}
+
+export default manifest

package/src/product-card-actions.tsx

@@ -0,0 +1,225 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import { useRouter } from "next/navigation"
+import { addToCart } from "@pradip1995/commerce-core/client/actions/cart"
+import {
+  addToWishlist,
+  getWishlistProductIds,
+  removeFromWishlist,
+} from "@pradip1995/commerce-core/client/actions/wishlist"
+import type { HttpTypes } from "@medusajs/types"
+import QuickAddPanel from "./quick-add-panel"
+
+type Props = {
+  product: HttpTypes.StoreProduct
+  countryCode: string
+}
+
+function findVariantForOptions(
+  product: HttpTypes.StoreProduct,
+  selectedOptions: Record<string, string>
+) {
+  return product.variants?.find((variant) => {
+    const variantOptions =
+      variant.options?.reduce(
+        (acc, option) => {
+          if (option.option_id) acc[option.option_id] = option.value ?? ""
+          return acc
+        },
+        {} as Record<string, string>
+      ) ?? {}
+    return Object.entries(selectedOptions).every(
+      ([optionId, value]) => variantOptions[optionId] === value
+    )
+  })
+}
+
+export default function ProductCardActions({ product, countryCode }: Props) {
+  const router = useRouter()
+  const [wishlisted, setWishlisted] = useState(false)
+  const [wishlistLoading, setWishlistLoading] = useState(false)
+  const [isAdding, setIsAdding] = useState(false)
+  const [showQuickAdd, setShowQuickAdd] = useState(false)
+  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})
+  const [quantity, setQuantity] = useState(1)
+  const [error, setError] = useState<string | null>(null)
+
+  const variants = product.variants ?? []
+  const hasMultipleVariants = variants.length > 1
+
+  useEffect(() => {
+    if (!product.id) return
+    getWishlistProductIds()
+      .then((ids) => setWishlisted(ids.includes(product.id!)))
+      .catch(() => {})
+  }, [product.id])
+
+  useEffect(() => {
+    if (!showQuickAdd) return
+    const onOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (!target.closest(`[data-product-card-id="${product.id}"]`)) {
+        setShowQuickAdd(false)
+      }
+    }
+    document.addEventListener("mousedown", onOutside)
+    return () => document.removeEventListener("mousedown", onOutside)
+  }, [showQuickAdd, product.id])
+
+  const selectedVariant = useMemo(() => {
+    if (!hasMultipleVariants) return variants[0]
+    if (Object.keys(selectedOptions).length === 0) return undefined
+    return findVariantForOptions(product, selectedOptions)
+  }, [hasMultipleVariants, product, selectedOptions, variants])
+
+  const stopCardNav = (event: React.MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  const handleWishlistToggle = async (event: React.MouseEvent) => {
+    stopCardNav(event)
+    if (!product.id || wishlistLoading) return
+
+    setWishlistLoading(true)
+    try {
+      const result = wishlisted
+        ? await removeFromWishlist(product.id)
+        : await addToWishlist(product.id)
+
+      if (result.success) {
+        setWishlisted(!wishlisted)
+        router.refresh()
+        return
+      }
+
+      if (result.error?.toLowerCase().includes("login")) {
+        router.push(`/${countryCode}/account`)
+        return
+      }
+
+      setError(result.error || "Could not update wishlist")
+    } finally {
+      setWishlistLoading(false)
+    }
+  }
+
+  const addVariantToCart = async (variantId: string, qty: number) => {
+    setIsAdding(true)
+    setError(null)
+    try {
+      await addToCart({ variantId, quantity: qty, countryCode })
+      window.dispatchEvent(new CustomEvent("cart:item-added", { detail: { message: "Added to cart" } }))
+      setShowQuickAdd(false)
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not add to cart")
+    } finally {
+      setIsAdding(false)
+    }
+  }
+
+  const handleQuickAdd = async (event: React.MouseEvent) => {
+    stopCardNav(event)
+    setError(null)
+
+    if (variants.length === 0) return
+
+    if (!hasMultipleVariants) {
+      const variant = variants[0]
+      if (!variant?.id) return
+      await addVariantToCart(variant.id, 1)
+      return
+    }
+
+    setShowQuickAdd(true)
+  }
+
+  const handleQuickAddSubmit = async (event: React.MouseEvent) => {
+    stopCardNav(event)
+    if (!selectedVariant?.id) {
+      setError("Please select all options")
+      return
+    }
+    await addVariantToCart(selectedVariant.id, quantity)
+  }
+
+  return (
+    <>
+      <div className="product-card__actions" onClick={stopCardNav}>
+        <button
+          type="button"
+          className={`product-card__wishlist-btn${wishlisted ? " product-card__wishlist-btn--active" : ""}${
+            wishlistLoading ? " product-card__wishlist-btn--loading" : ""
+          }`}
+          onClick={handleWishlistToggle}
+          disabled={wishlistLoading}
+          aria-label={wishlisted ? "Remove from wishlist" : "Add to wishlist"}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            className="product-card__wishlist-icon"
+            aria-hidden
+          >
+            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+          </svg>
+        </button>
+
+        <button
+          type="button"
+          className="product-card__cart-btn"
+          onClick={handleQuickAdd}
+          disabled={isAdding}
+          aria-label={isAdding ? "Adding to cart" : "Add to cart"}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="product-card__cart-icon"
+            aria-hidden
+          >
+            <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <path d="M16 10a4 4 0 0 1-8 0" />
+          </svg>
+        </button>
+      </div>
+
+      {!showQuickAdd ? (
+        <div className="product-card__quick-add-wrap" onClick={stopCardNav}>
+          <button
+            type="button"
+            onClick={handleQuickAdd}
+            disabled={isAdding}
+            className="product-card__quick-add"
+          >
+            <span className="product-card__quick-add-label">
+              {isAdding ? "Adding…" : "Quick add"}
+            </span>
+          </button>
+        </div>
+      ) : null}
+
+      {showQuickAdd ? (
+        <QuickAddPanel
+          product={product}
+          selectedOptions={selectedOptions}
+          setOptionValue={(optionId, value) =>
+            setSelectedOptions((prev) => ({ ...prev, [optionId]: value }))
+          }
+          quantity={quantity}
+          setQuantity={setQuantity}
+          isAdding={isAdding}
+          error={error}
+          onClose={() => setShowQuickAdd(false)}
+          onSubmit={handleQuickAddSubmit}
+        />
+      ) : null}
+    </>
+  )
+}

package/src/product-scroll.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { useRef } from "react"
+import ProductCard from "./segment"
+import type { HttpTypes } from "@medusajs/types"
+
+type ProductScrollProps = {
+  products: HttpTypes.StoreProduct[]
+  region?: HttpTypes.StoreRegion | null
+  ratings?: Array<{ product_id?: string; rating?: number }>
+  countryCode?: string
+}
+
+export default function ProductScroll({ products, region, ratings, countryCode }: ProductScrollProps) {
+  const viewportRef = useRef<HTMLDivElement>(null)
+
+  const scroll = (direction: "prev" | "next") => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+    const amount = Math.max(viewport.clientWidth * 0.85, 280)
+    viewport.scrollBy({
+      left: direction === "next" ? amount : -amount,
+      behavior: "smooth",
+    })
+  }
+
+  if (products.length === 0) return null
+
+  return (
+    <div className="product-scroll bestsellers-carousel">
+      <button
+        type="button"
+        className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--prev bestsellers-carousel__nav--prev"
+        onClick={() => scroll("prev")}
+        aria-label="Previous products"
+      >
+        ‹
+      </button>
+      <div
+        ref={viewportRef}
+        className="product-scroll__viewport bestsellers-carousel__viewport"
+      >
+        <div className="product-scroll__track bestsellers-carousel__track">
+          {products.map((product) => (
+            <div
+              key={product.id}
+              className="product-scroll__slide bestsellers-carousel__slide"
+            >
+              <ProductCard
+                product={product}
+                region={region ?? undefined}
+                countryCode={countryCode}
+                rating={ratings?.find((r) => r.product_id === product.id)}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <button
+        type="button"
+        className="product-scroll__nav bestsellers-carousel__nav product-scroll__nav--next bestsellers-carousel__nav--next"
+        onClick={() => scroll("next")}
+        aria-label="Next products"
+      >
+        ›
+      </button>
+    </div>
+  )
+}

package/src/quick-add-panel.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import type { HttpTypes } from "@medusajs/types"
+
+type Props = {
+  product: HttpTypes.StoreProduct
+  selectedOptions: Record<string, string>
+  setOptionValue: (optionId: string, value: string) => void
+  quantity: number
+  setQuantity: (quantity: number) => void
+  isAdding: boolean
+  error: string | null
+  onClose: () => void
+  onSubmit: (event: React.MouseEvent) => void
+}
+
+export default function QuickAddPanel({
+  product,
+  selectedOptions,
+  setOptionValue,
+  quantity,
+  setQuantity,
+  isAdding,
+  error,
+  onClose,
+  onSubmit,
+}: Props) {
+  return (
+    <div
+      className="product-card__quick-add-panel"
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+      }}
+    >
+      <div className="quick-add">
+        <div className="quick-add__head">
+          <h4 className="quick-add__title">Select options</h4>
+          <button type="button" onClick={onClose} className="quick-add__close" aria-label="Close">
+            ×
+          </button>
+        </div>
+
+        <div className="quick-add__body">
+          {(product.options ?? []).map((option) => (
+            <div key={option.id} className="quick-add__option-group">
+              <p className="quick-add__option-label">{option.title}</p>
+              <div className="quick-add__option-values">
+                {(option.values ?? []).map((value) => {
+                  const isActive = selectedOptions[option.id!] === value.value
+                  return (
+                    <button
+                      key={value.id ?? value.value}
+                      type="button"
+                      className={`quick-add__option-btn${isActive ? " quick-add__option-btn--active" : ""}`}
+                      onClick={() => setOptionValue(option.id!, value.value ?? "")}
+                    >
+                      {value.value}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          ))}
+
+          <div className="quick-add__qty-wrap">
+            <div className="quick-add__qty">
+              <button
+                type="button"
+                onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                disabled={quantity <= 1}
+                className="quick-add__qty-btn"
+                aria-label="Decrease quantity"
+              >
+                −
+              </button>
+              <span className="quick-add__qty-value">{quantity}</span>
+              <button
+                type="button"
+                onClick={() => setQuantity(quantity + 1)}
+                className="quick-add__qty-btn"
+                aria-label="Increase quantity"
+              >
+                +
+              </button>
+            </div>
+          </div>
+
+          {error ? <p className="quick-add__error">{error}</p> : null}
+
+          <button
+            type="button"
+            className="quick-add__cta"
+            onClick={onSubmit}
+            disabled={isAdding}
+          >
+            {isAdding ? "Adding…" : "Add to bag"}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/segment.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import type { HttpTypes } from "@medusajs/types"
+import ProductCardActions from "./product-card-actions"
+
+type Props = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  countryCode?: string
+  rating?: { rating?: number }
+  showWishlist?: boolean
+}
+
+export default function ProductCard({
+  product,
+  region,
+  countryCode: countryCodeProp,
+  rating,
+  showWishlist = true,
+}: Props) {
+  const variant = product.variants?.[0]
+  const price = variant?.calculated_price?.calculated_amount
+  const originalPrice = variant?.calculated_price?.original_amount
+  const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
+  const countryCode =
+    countryCodeProp?.toLowerCase() ??
+    region?.countries?.[0]?.iso_2?.toLowerCase() ??
+    process.env.NEXT_PUBLIC_DEFAULT_REGION?.toLowerCase() ??
+    "in"
+
+  const discountPct =
+    originalPrice && price && originalPrice > price
+      ? Math.round(((originalPrice - price) / originalPrice) * 100)
+      : null
+
+  return (
+    <article
+      data-product-card-id={product.id}
+      className="product-card group flex flex-col w-full h-full relative"
+    >
+      <LocalizedLink href={`/products/${product.handle}`} className="product-card__link flex flex-col h-full">
+        <div className="product-card__media relative aspect-[3/4] bg-surface-muted overflow-hidden rounded-lg">
+          {product.thumbnail ? (
+            <img
+              src={product.thumbnail}
+              alt={product.title || ""}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            />
+          ) : (
+            <div className="w-full h-full bg-surface-muted" />
+          )}
+
+          {showWishlist && product.id ? (
+            <ProductCardActions product={product} countryCode={countryCode} />
+          ) : null}
+        </div>
+
+        <div className="product-card__info mt-3 flex flex-col gap-1 min-w-0">
+          <h3 className="product-card__title text-sm font-medium text-heading group-hover:text-brand-accent transition-colors line-clamp-2">
+            {product.title}
+          </h3>
+
+          {rating?.rating != null && rating.rating > 0 ? (
+            <p className="product-card__rating text-xs text-muted">★ {rating.rating.toFixed(1)}</p>
+          ) : null}
+
+          {price != null ? (
+            <div className="product-card__prices">
+              <span className="product-card__price">{formatPrice(price, currency)}</span>
+              {originalPrice && price && originalPrice > price ? (
+                <>
+                  <span className="product-card__compare">{formatPrice(originalPrice, currency)}</span>
+                  {discountPct != null ? (
+                    <span className="product-card__discount">{discountPct}% OFF</span>
+                  ) : null}
+                </>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </LocalizedLink>
+    </article>
+  )
+}