@pradip1995/segment-product-card 0.3.23 → 0.3.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.23",
+  "version": "0.3.25",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -20,12 +20,12 @@
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
-    "@pradip1995/segment-animation-login-popup": "*",
     "next": ">=15",
     "react": ">=19",
     "react-dom": ">=19"
   },
   "dependencies": {
+    "@pradip1995/segment-login-popup": "^0.1.3",
     "@pradip1995/segment-primitives": "^0.4.2",
     "@pradip1995/segment-tokens": "^0.3.7"
   },
@@ -36,11 +36,11 @@
     "@types/react-dom": "^19",
     "next": ">=15",
     "react": "19.0.3",
-    "typescript": "^5.7.2",
-    "@pradip1995/segment-animation-login-popup": "0.1.1"
+    "typescript": "^5.7.2"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "test": "node --experimental-strip-types --test src/*.test.ts"
   }
 }

package/src/beauty-product-card.tsx

@@ -61,7 +61,7 @@ export default function BeautyProductCard({
         href={`/products/${product.handle}`}
         className="beauty-product-card__link flex flex-col h-full"
       >
-        <div className="beauty-product-card__media relative aspect-square bg-[var(--color-surface-muted)] overflow-hidden">
+        <div className="beauty-product-card__media group/media relative aspect-square bg-[var(--color-surface-muted)] overflow-hidden">
           {product.thumbnail?.trim() ? (
             <Image
               src={product.thumbnail.trim()}

package/src/default-product-card.tsx

@@ -43,7 +43,7 @@ export default function DefaultProductCard({
       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">
+        <div className="product-card__media group/media relative aspect-[3/4] bg-surface-muted overflow-hidden rounded-lg">
           {product.thumbnail?.trim() ? (
             <Image
               src={product.thumbnail.trim()}

package/src/jewelry-product-card.tsx

@@ -11,6 +11,7 @@ type Props = {
   product: HttpTypes.StoreProduct
   region?: HttpTypes.StoreRegion
   countryCode?: string
+  showWishlist?: boolean
   wishlistProductIds?: string[]
 }
 
@@ -18,6 +19,7 @@ export default function JewelryProductCard({
   product,
   region,
   countryCode: countryCodeProp,
+  showWishlist = true,
   wishlistProductIds,
 }: Props) {
   const variant = product.variants?.[0]
@@ -40,7 +42,7 @@ export default function JewelryProductCard({
         className="jewelry-product-card__link flex flex-col h-full"
       >
         <div
-          className={`jewelry-product-card__media relative aspect-square overflow-hidden rounded-2xl bg-[var(--color-surface-muted)]${
+          className={`jewelry-product-card__media group/media relative aspect-square overflow-hidden rounded-2xl bg-[var(--color-surface-muted)]${
             hover ? " jewelry-product-card__media--has-hover" : ""
           }`}
         >
@@ -70,11 +72,12 @@ export default function JewelryProductCard({
             <div className="jewelry-product-card__placeholder w-full h-full" />
           )}
 
-          {product.id ? (
+          {showWishlist && product.id ? (
             <ProductCardActions
               product={product}
               countryCode={countryCode}
               wishlistProductIds={wishlistProductIds}
+              showWishlist={showWishlist}
             />
           ) : null}
         </div>

package/src/product-card-actions-class.test.ts

@@ -0,0 +1,67 @@
+import { describe, it } from "node:test"
+import assert from "node:assert/strict"
+import {
+  productCardActionsClass,
+  productCardWishlistClass,
+} from "./product-card-actions-class.ts"
+
+const WISHLIST_CASES = [
+  {
+    name: "wishlist wrap is visible without hover",
+    wantIncludes: ["product-card__wishlist-wrap", "top-3.5", "right-3.5", "pointer-events-auto"],
+    wantExcludes: ["opacity-0", "group-hover/media"],
+  },
+]
+
+const CART_CASES = [
+  {
+    name: "hover hides cart actions until named media group hover",
+    visibility: "hover" as const,
+    wantIncludes: [
+      "opacity-0",
+      "group-hover/media:opacity-100",
+      "group-hover/media:pointer-events-auto",
+    ],
+    wantExcludes: ["top-3.5"],
+  },
+  {
+    name: "always keeps cart actions visible",
+    visibility: "always" as const,
+    wantIncludes: ["top-3.5", "right-3.5", "pointer-events-auto"],
+    wantExcludes: ["opacity-0", "group-hover/media"],
+  },
+  {
+    name: "unknown visibility falls back to hover",
+    visibility: undefined,
+    wantIncludes: ["opacity-0", "group-hover/media:opacity-100"],
+    wantExcludes: ["top-3.5"],
+  },
+]
+
+describe("productCardWishlistClass", () => {
+  for (const tc of WISHLIST_CASES) {
+    it(tc.name, () => {
+      const className = productCardWishlistClass()
+      for (const snippet of tc.wantIncludes) {
+        assert.match(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+      for (const snippet of tc.wantExcludes) {
+        assert.doesNotMatch(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+    })
+  }
+})
+
+describe("productCardActionsClass", () => {
+  for (const tc of CART_CASES) {
+    it(tc.name, () => {
+      const className = productCardActionsClass(tc.visibility)
+      for (const snippet of tc.wantIncludes) {
+        assert.match(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+      for (const snippet of tc.wantExcludes) {
+        assert.doesNotMatch(className, new RegExp(snippet.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")))
+      }
+    })
+  }
+})

package/src/product-card-actions-class.ts

@@ -0,0 +1,16 @@
+export type ProductCardActionsVisibility = "hover" | "always"
+
+export function productCardWishlistClass(): string {
+  return "product-card__wishlist-wrap absolute top-3.5 right-3.5 z-30 pointer-events-auto"
+}
+
+export function productCardActionsClass(
+  visibility?: ProductCardActionsVisibility
+): string {
+  const mode = visibility === "always" ? "always" : "hover"
+  const base = "product-card__actions absolute z-30"
+  if (mode === "always") {
+    return `${base} top-3.5 right-3.5 pointer-events-auto`
+  }
+  return `${base} bottom-3.5 right-3.5 opacity-0 group-hover/media:opacity-100 transition-opacity duration-300 pointer-events-none group-hover/media:pointer-events-auto`
+}

package/src/product-card-actions.tsx

@@ -10,14 +10,20 @@ 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-animation-login-popup/required"
+import LoginRequiredModal from "@pradip1995/segment-login-popup/required"
 import QuickAddPanel from "./quick-add-panel"
+import {
+  productCardActionsClass,
+  productCardWishlistClass,
+  type ProductCardActionsVisibility,
+} from "./product-card-actions-class"
 
 type Props = {
   product: HttpTypes.StoreProduct
   countryCode: string
   wishlistProductIds?: string[]
   showWishlist?: boolean
+  actionsVisible?: ProductCardActionsVisibility
 }
 
 function findVariantForOptions(
@@ -44,6 +50,7 @@ export default function ProductCardActions({
   countryCode,
   wishlistProductIds,
   showWishlist = true,
+  actionsVisible = "hover",
 }: Props) {
   const router = useRouter()
   const [wishlisted, setWishlisted] = useState(false)
@@ -181,8 +188,8 @@ export default function ProductCardActions({
 
   return (
     <>
-      <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}>
-        {showWishlist ? (
+      {showWishlist ? (
+        <div className={productCardWishlistClass()} onClick={stopCardNav}>
           <button
             type="button"
             className={`product-card__wishlist-btn${wishlisted ? " product-card__wishlist-btn--active" : ""}${
@@ -200,8 +207,10 @@ export default function ProductCardActions({
               <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>
-        ) : null}
+        </div>
+      ) : null}
 
+      <div className={productCardActionsClass(actionsVisible)} onClick={stopCardNav}>
         <button
           type="button"
           className="product-card__cart-btn"

package/src/resolve-product-images.ts

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

package/src/segment.css

@@ -58,6 +58,11 @@
   right: 0.875rem;
 }
 
+.beauty-product-card .product-card__wishlist-wrap {
+  top: 0.625rem;
+  right: 0.625rem;
+}
+
 .beauty-product-card .product-card__wishlist-btn,
 .beauty-product-card .product-card__cart-btn {
   width: 2.125rem;
@@ -304,10 +309,22 @@
   background: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-surface-alt) 100%);
 }
 
+.product-card__wishlist-wrap {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 30;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.jewelry-product-card .product-card__wishlist-wrap {
+  top: 0.75rem;
+  right: 0.75rem;
+}
+
 .jewelry-product-card .product-card__actions {
-  bottom: 0.875rem;
-  top: auto;
-  right: 0.875rem;
+  display: none;
 }
 
 .jewelry-product-card .product-card__wishlist-btn {

package/src/segment.tsx

@@ -5,10 +5,8 @@ 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" | "motion" | "shop"
+export type ProductCardVariant = "default" | "beauty" | "jewelry"
 
 type Props = {
   product: HttpTypes.StoreProduct
@@ -21,21 +19,12 @@ type Props = {
 }
 
 function resolveProductCardVariant(variant?: ProductCardVariant): ProductCardVariant {
-  if (
-    variant === "beauty" ||
-    variant === "default" ||
-    variant === "jewelry" ||
-    variant === "motion" ||
-    variant === "shop"
-  )
-    return variant
+  if (variant === "beauty" || variant === "default" || variant === "jewelry") 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} />