@pradip1995/segment-product-card 0.3.19 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,6 @@
     "./product-scroll": "./src/product-scroll.tsx",
     "./product-rail-variants": "./src/product-rail-variants.tsx"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
@@ -37,5 +33,9 @@
     "@types/react": "^19",
     "react": "19.0.3",
     "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
   }
-}
+}

package/src/motion-product-card.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import Image from "next/image"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import type { HttpTypes } from "@medusajs/types"
+
+type Props = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  countryCode?: string
+  rating?: { rating?: number }
+  showWishlist?: boolean
+  wishlistProductIds?: string[]
+}
+
+export default function MotionProductCard({
+  product,
+  region,
+  countryCode: countryCodeProp,
+  rating,
+  showWishlist = true,
+  wishlistProductIds,
+}: 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() ||
+    "in"
+
+  // Get color options for swatches
+  const colorOption = product.options?.find((opt: any) => opt.title?.toLowerCase() === 'color' || opt.title?.toLowerCase() === 'colour')
+  const colorValues = colorOption?.values?.map((v: any) => v.value) || []
+
+  return (
+    <article
+      data-product-card-id={product.id}
+      className="product-card group/card flex flex-col w-full h-full relative font-sans"
+    >
+      <LocalizedLink href={`/products/${product.handle}`} className="flex flex-col h-full relative">
+        <div className="product-card__media relative aspect-[3/4] bg-[#F6F6F6] overflow-hidden group/media">
+          {product.thumbnail?.trim() ? (
+            <>
+              <Image
+                src={product.thumbnail.trim()}
+                alt={product.title || ""}
+                fill
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
+                className={`object-cover transition-all duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)] ${
+                  product.images && product.images.length > 1 
+                    ? 'group-hover/media:opacity-0' 
+                    : 'group-hover/media:scale-105'
+                }`}
+                loading="lazy"
+              />
+              {product.images && product.images.length > 1 && (
+                <Image
+                  src={product.images[1].url.trim()}
+                  alt={product.title || ""}
+                  fill
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
+                  className="absolute inset-0 object-cover opacity-0 scale-100 group-hover/media:opacity-100 group-hover/media:scale-105 transition-all duration-[800ms] ease-[cubic-bezier(0.16,1,0.3,1)]"
+                  loading="lazy"
+                />
+              )}
+            </>
+          ) : (
+            <div className="w-full h-full bg-[#F6F6F6]" />
+          )}
+
+          {/* Quick view floating circle */}
+          <div className="absolute top-3 right-3 z-10 opacity-0 group-hover/media:opacity-100 transition-all duration-300 pointer-events-none translate-y-1 group-hover/media:translate-y-0">
+            <div className="w-14 h-14 rounded-full bg-white text-gray-900 flex items-center justify-center text-[10px] uppercase font-bold tracking-widest text-center leading-[1.1] shadow-[0_4px_15px_rgba(0,0,0,0.1)] pointer-events-auto cursor-pointer hover:bg-gray-50 hover:scale-105 transition-transform">
+              Quick<br/>view
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-4 flex flex-col min-w-0">
+          <h3 className="text-sm font-medium text-gray-900 group-hover/card:underline transition-all">
+            {product.title}
+          </h3>
+
+          {price != null ? (
+            <div className="mt-1 text-sm text-gray-600">
+              <span>{formatPrice(price, currency)}</span>
+            </div>
+          ) : null}
+
+          {/* Color Swatches */}
+          {colorValues.length > 0 && (
+            <div className="mt-2 flex items-center space-x-1.5">
+              {colorValues.map((color: string, idx: number) => (
+                <div 
+                  key={idx}
+                  className="w-[14px] h-[14px] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+                  style={{ backgroundColor: color.toLowerCase() }}
+                  title={color}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </LocalizedLink>
+    </article>
+  )
+}

package/src/product-card-actions.tsx

@@ -10,6 +10,7 @@ import {
 } from "@pradip1995/commerce-core/client/actions/wishlist"
 import type { HttpTypes } from "@medusajs/types"
 import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
+import LoginRequiredModal from "@pradip1995/segment-login-popup/required"
 import QuickAddPanel from "./quick-add-panel"
 
 type Props = {
@@ -46,6 +47,7 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
   const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})
   const [quantity, setQuantity] = useState(1)
   const [error, setError] = useState<string | null>(null)
+  const [loginRequired, setLoginRequired] = useState(false)
 
   const variants = product.variants ?? []
   const hasMultipleVariants = variants.length > 1
@@ -112,7 +114,7 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
       }
 
       if (result.error?.toLowerCase().includes("login")) {
-        router.push(`/${countryCode}/account`)
+        setLoginRequired(true)
         return
       }
 
@@ -173,7 +175,7 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
 
   return (
     <>
-      <div className="product-card__actions" onClick={stopCardNav}>
+      <div className="product-card__actions absolute bottom-3.5 right-3.5 z-30 opacity-0 group-hover/media:opacity-100 transition-opacity duration-300 pointer-events-none group-hover/media:pointer-events-auto" onClick={stopCardNav}>
         <button
           type="button"
           className={`product-card__wishlist-btn${wishlisted ? " product-card__wishlist-btn--active" : ""}${
@@ -231,6 +233,13 @@ export default function ProductCardActions({ product, countryCode, wishlistProdu
         </div>
       ) : null}
 
+      <LoginRequiredModal
+        isOpen={loginRequired}
+        onClose={() => setLoginRequired(false)}
+        countryCode={countryCode}
+        message="Please log in to save items to your wishlist."
+      />
+
       {showQuickAdd ? (
         <QuickAddPanel
           product={product}

package/src/resolve-product-images.ts

@@ -3,18 +3,24 @@ import { resolveMediaUrl } from "@pradip1995/segment-primitives/resolve-media-ur
 
 export function resolveProductCardImages(product: HttpTypes.StoreProduct) {
   const gallery =
-    product.images
-      ?.map((image) => resolveMediaUrl(image.url))
-      .filter((url): url is string => !!url) ?? []
+    (product.images as { url?: string | null }[] | undefined)
+      ?.map((image: { url?: string | null }) => resolveMediaUrl(image.url) || image.url?.trim())
+      .filter((url: string | undefined): url is string => Boolean(url)) ?? []
 
-  const variantImages = (product.variants ?? [])
-    .map((variant) => resolveMediaUrl((variant as { thumbnail?: string | null }).thumbnail))
-    .filter((url): url is string => !!url)
+  const variantImages = ((product.variants as { thumbnail?: string | null }[] | undefined) ?? [])
+    .map((variant: { thumbnail?: string | null }) => {
+      const raw = variant.thumbnail
+      return resolveMediaUrl(raw) || raw?.trim()
+    })
+    .filter((url: string | undefined): url is string => Boolean(url))
 
-  const images = [...gallery, ...variantImages]
-  const thumbnail = resolveMediaUrl(product.thumbnail) || ""
+  const rawThumb = product.thumbnail?.trim() || ""
+  const thumbnail = resolveMediaUrl(rawThumb) || rawThumb
+
+  const images = Array.from(new Set([thumbnail, ...gallery, ...variantImages].filter((url: string): url is string => Boolean(url))))
+  
   const primary = thumbnail || images[0] || ""
-  const hover = [...new Set(images)].find((url) => url && url !== primary) || ""
+  const hover = images.find((url: string) => Boolean(url) && url !== primary) || ""
 
   return { primary, hover }
 }

package/src/segment.css

@@ -53,8 +53,9 @@
 }
 
 .beauty-product-card .product-card__actions {
-  top: 0.5rem;
-  right: 0.5rem;
+  bottom: 0.875rem;
+  top: auto;
+  right: 0.875rem;
 }
 
 .beauty-product-card .product-card__wishlist-btn,
@@ -275,8 +276,9 @@
 }
 
 .jewelry-product-card .product-card__actions {
-  top: 0.5rem;
-  right: 0.5rem;
+  bottom: 0.875rem;
+  top: auto;
+  right: 0.875rem;
 }
 
 .jewelry-product-card .product-card__wishlist-btn {
@@ -406,3 +408,31 @@
     pointer-events: auto;
   }
 }
+
+/* Shop product card (Motion style) */
+
+.shop-product-card .product-card__actions {
+  bottom: 0.875rem;
+  top: auto;
+  right: 0.875rem;
+}
+
+.shop-product-card .product-card__wishlist-btn {
+  width: 2.125rem;
+  height: 2.125rem;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.shop-product-card .product-card__wishlist-btn--active {
+  background: var(--color-brand-accent-muted, #f4eff8);
+}
+
+.shop-product-card .product-card__cart-btn {
+  display: none; /* Hide the cart icon since shop card uses the Quick View circle */
+}
+
+.shop-product-card .product-card__quick-add-wrap {
+  display: none; /* Hide the quick add bar at the bottom, triggered by the blue circle instead */
+}

package/src/segment.tsx

@@ -5,8 +5,10 @@ import type { HttpTypes } from "@medusajs/types"
 import BeautyProductCard from "./beauty-product-card"
 import DefaultProductCard from "./default-product-card"
 import JewelryProductCard from "./jewelry-product-card"
+import MotionProductCard from "./motion-product-card"
+import ShopProductCard from "./shop-product-card"
 
-export type ProductCardVariant = "default" | "beauty" | "jewelry"
+export type ProductCardVariant = "default" | "beauty" | "jewelry" | "motion" | "shop"
 
 type Props = {
   product: HttpTypes.StoreProduct
@@ -19,12 +21,21 @@ type Props = {
 }
 
 function resolveProductCardVariant(variant?: ProductCardVariant): ProductCardVariant {
-  if (variant === "beauty" || variant === "default" || variant === "jewelry") return variant
+  if (
+    variant === "beauty" ||
+    variant === "default" ||
+    variant === "jewelry" ||
+    variant === "motion" ||
+    variant === "shop"
+  )
+    return variant
   return "default"
 }
 
 export default function ProductCard({ variant, ...props }: Props) {
   const layout = resolveProductCardVariant(variant)
+  if (layout === "shop") return <ShopProductCard {...props} />
+  if (layout === "motion") return <MotionProductCard {...props} />
   if (layout === "beauty") return <BeautyProductCard {...props} />
   if (layout === "jewelry") return <JewelryProductCard {...props} />
   return <DefaultProductCard {...props} />

package/src/shop-product-card.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import { useState } from "react"
+import Image from "next/image"
+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"
+import { resolveProductCardImages } from "./resolve-product-images"
+
+type Props = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  countryCode?: string
+  rating?: { rating?: number }
+  showWishlist?: boolean
+  wishlistProductIds?: string[]
+}
+
+type OptionWithValue = { value?: string | null }
+type OptionItem = { title?: string | null; values?: OptionWithValue[] | null }
+
+export default function ShopProductCard({
+  product,
+  region,
+  countryCode: countryCodeProp,
+  wishlistProductIds,
+}: Props) {
+  const variant = product.variants?.[0]
+  const price = variant?.calculated_price?.calculated_amount
+  const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
+  const countryCode =
+    countryCodeProp?.toLowerCase() ||
+    region?.countries?.[0]?.iso_2?.toLowerCase() ||
+    "in"
+
+  const { primary, hover } = resolveProductCardImages(product)
+  const [mainImgSrc, setMainImgSrc] = useState(primary)
+  const [hoverImgSrc, setHoverImgSrc] = useState(hover)
+
+  // Extract color options dynamically from product options
+  const colorOption = (product.options as OptionItem[] | undefined)?.find(
+    (opt) => opt.title?.toLowerCase() === "color" || opt.title?.toLowerCase() === "colour"
+  )
+  const rawColorValues: string[] = colorOption?.values
+    ?.map((v: OptionWithValue) => v.value)
+    .filter((val: string | null | undefined): val is string => Boolean(val)) || []
+
+  // Fallback to variant options if no top-level color options exist
+  const variantColors: string[] = Array.from(
+    new Set(
+      (product.variants ?? [])
+        .flatMap((v: unknown) => (v as { options?: OptionWithValue[] }).options?.map((o: OptionWithValue) => o.value))
+        .filter((val: string | null | undefined): val is string => Boolean(val))
+    )
+  )
+  const colorValues: string[] = rawColorValues.length > 0 ? rawColorValues : variantColors
+
+  const [selectedColor, setSelectedColor] = useState<string | null>(
+    colorValues.length > 0 ? (colorValues[0] as string) : null
+  )
+
+  const originalPrice = variant?.calculated_price?.original_amount
+  const discountPct =
+    originalPrice && price && originalPrice > price
+      ? Math.round(((originalPrice - price) / originalPrice) * 100)
+      : 0
+      
+  const isBestSelling = product.tags?.some(
+    (tag: any) => tag.value?.toLowerCase() === "best selling" || tag.value?.toLowerCase() === "bestseller"
+  )
+
+  return (
+    <article
+      data-product-card-id={product.id}
+      className="product-card group/card flex flex-col w-full h-full relative font-sans"
+    >
+      <LocalizedLink href={`/products/${product.handle}`} className="flex flex-col h-full relative group/link">
+        <div className="product-card__media relative aspect-[3/4] bg-[#F4F4F4] overflow-hidden group/media rounded-none">
+          {/* TAGS */}
+          <div className="absolute top-0 right-0 z-30 flex flex-col items-end">
+            {discountPct > 0 && (
+              <span className="bg-[#E23B00] text-white text-[10px] font-bold tracking-widest px-2 py-1 uppercase leading-none">
+                Save {discountPct}%
+              </span>
+            )}
+            {isBestSelling && !discountPct && (
+              <span className="bg-[#3B63EB] text-white text-[10px] font-bold tracking-widest px-2 py-1 uppercase leading-none">
+                Best Selling
+              </span>
+            )}
+          </div>
+
+          {mainImgSrc ? (
+            <>
+              <Image
+                src={mainImgSrc}
+                alt={product.title || ""}
+                fill
+                unoptimized
+                onError={() => setMainImgSrc("")}
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                className={`object-cover transition-all duration-[700ms] ease-[cubic-bezier(0.16,1,0.3,1)] ${
+                  hoverImgSrc
+                    ? "group-hover/media:opacity-0 group-hover/media:scale-105"
+                    : "group-hover/media:scale-105"
+                }`}
+                loading="lazy"
+              />
+              {hoverImgSrc ? (
+                <Image
+                  src={hoverImgSrc}
+                  alt={product.title || ""}
+                  fill
+                  unoptimized
+                  onError={() => setHoverImgSrc("")}
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                  className="absolute inset-0 object-cover opacity-0 scale-100 group-hover/media:opacity-100 group-hover/media:scale-105 transition-all duration-[700ms] ease-[cubic-bezier(0.16,1,0.3,1)]"
+                  loading="lazy"
+                />
+              ) : null}
+            </>
+          ) : (
+            <div className="w-full h-full bg-[#F4F4F4] flex items-center justify-center text-xs text-gray-400 font-medium">
+              No Image
+            </div>
+          )}
+
+          {/* Floating Royal Blue "Quick View" Circle Button (on image hover) */}
+          <div className="absolute top-3.5 right-3.5 z-20 opacity-0 group-hover/media:opacity-100 transition-all duration-300 pointer-events-none translate-y-1 group-hover/media:translate-y-0">
+            <div
+              className="w-[54px] h-[54px] rounded-full bg-[#2563EB] text-[#FFFFFF] flex items-center justify-center text-[11px] font-medium tracking-normal text-center leading-[1.15] shadow-lg pointer-events-auto cursor-pointer hover:bg-[#1d4ed8] hover:scale-105 transition-transform"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                const cardEl = (e.currentTarget as HTMLElement).closest("[data-product-card-id]")
+                const quickAddBtn = cardEl?.querySelector(".product-card__quick-add") as HTMLButtonElement | null
+                if (quickAddBtn) {
+                  quickAddBtn.click()
+                }
+              }}
+            >
+              Quick<br />view
+            </div>
+          </div>
+
+          {/* ProductCardActions handles Cart and Wishlist actions */}
+          {product.id ? (
+            <ProductCardActions
+              product={product}
+              countryCode={countryCode}
+              wishlistProductIds={wishlistProductIds}
+            />
+          ) : null}
+        </div>
+
+        <div className="mt-3 flex flex-col min-w-0">
+          <h3 className="text-[15px] font-normal text-[#111111] group-hover/link:underline transition-all line-clamp-1 leading-snug">
+            {product.title}
+          </h3>
+
+          {price != null ? (
+            <div className="mt-1 text-sm text-[#555555]">
+              <span>{formatPrice(price, currency)}</span>
+            </div>
+          ) : null}
+
+          {/* Dynamic Color Swatches below price */}
+          {colorValues.length > 0 && (
+            <div className="mt-2.5 flex items-center gap-1.5">
+              {colorValues.map((color: string, idx: number) => {
+                const isSelected = selectedColor === color
+                const lowerColor = color.toLowerCase()
+                const isWhite = lowerColor === "#ffffff" || lowerColor === "white"
+                return (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      setSelectedColor(color)
+                    }}
+                    className={`w-4 h-4 transition-all relative rounded-none ${
+                      isWhite ? "border border-gray-300" : ""
+                    } ${
+                      isSelected
+                        ? "ring-1 ring-black ring-offset-1 scale-110 z-10"
+                        : "hover:scale-105 opacity-90 hover:opacity-100"
+                    }`}
+                    style={{ backgroundColor: lowerColor }}
+                    title={color}
+                    aria-label={`Select ${color} color`}
+                  />
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </LocalizedLink>
+    </article>
+  )
+}