@pradip1995/segment-product-card 0.3.20 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.20",
+  "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/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/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/shop-product-card.tsx

@@ -44,14 +44,14 @@ export default function ShopProductCard({
   )
   const rawColorValues: string[] = colorOption?.values
     ?.map((v: OptionWithValue) => v.value)
-    .filter((val: string | undefined): val is string => Boolean(val)) || []
+    .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 | undefined): val is string => Boolean(val))
+        .filter((val: string | null | undefined): val is string => Boolean(val))
     )
   )
   const colorValues: string[] = rawColorValues.length > 0 ? rawColorValues : variantColors
@@ -67,7 +67,7 @@ export default function ShopProductCard({
       : 0
       
   const isBestSelling = product.tags?.some(
-    (tag) => tag.value?.toLowerCase() === "best selling" || tag.value?.toLowerCase() === "bestseller"
+    (tag: any) => tag.value?.toLowerCase() === "best selling" || tag.value?.toLowerCase() === "bestseller"
   )
 
   return (