@pradip1995/segment-product-card 0.3.4 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.4",
+  "version": "0.3.7",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
     "next": ">=15"
   },
   "dependencies": {
-    "@pradip1995/segment-primitives": "^0.3.0",
+    "@pradip1995/segment-primitives": "^0.3.2",
     "@pradip1995/segment-tokens": "^0.3.2"
   },
   "devDependencies": {

package/src/beauty-product-card.tsx

@@ -11,6 +11,7 @@ type Props = {
   countryCode?: string
   rating?: { rating?: number }
   showWishlist?: boolean
+  wishlistProductIds?: string[]
 }
 
 function productSubtitle(product: HttpTypes.StoreProduct) {
@@ -27,6 +28,7 @@ export default function BeautyProductCard({
   countryCode: countryCodeProp,
   rating,
   showWishlist = true,
+  wishlistProductIds,
 }: Props) {
   const variant = product.variants?.[0]
   const price = variant?.calculated_price?.calculated_amount
@@ -35,7 +37,6 @@ export default function BeautyProductCard({
   const countryCode =
     countryCodeProp?.toLowerCase() ??
     region?.countries?.[0]?.iso_2?.toLowerCase() ??
-    process.env.NEXT_PUBLIC_DEFAULT_REGION?.toLowerCase() ??
     "in"
 
   const discountPct =
@@ -72,7 +73,11 @@ export default function BeautyProductCard({
           ) : null}
 
           {showWishlist && product.id ? (
-            <ProductCardActions product={product} countryCode={countryCode} />
+            <ProductCardActions
+              product={product}
+              countryCode={countryCode}
+              wishlistProductIds={wishlistProductIds}
+            />
           ) : null}
         </div>
 

package/src/default-product-card.tsx

@@ -11,6 +11,7 @@ type Props = {
   countryCode?: string
   rating?: { rating?: number }
   showWishlist?: boolean
+  wishlistProductIds?: string[]
 }
 
 export default function DefaultProductCard({
@@ -19,6 +20,7 @@ export default function DefaultProductCard({
   countryCode: countryCodeProp,
   rating,
   showWishlist = true,
+  wishlistProductIds,
 }: Props) {
   const variant = product.variants?.[0]
   const price = variant?.calculated_price?.calculated_amount
@@ -27,7 +29,6 @@ export default function DefaultProductCard({
   const countryCode =
     countryCodeProp?.toLowerCase() ??
     region?.countries?.[0]?.iso_2?.toLowerCase() ??
-    process.env.NEXT_PUBLIC_DEFAULT_REGION?.toLowerCase() ??
     "in"
 
   const discountPct =
@@ -53,7 +54,11 @@ export default function DefaultProductCard({
           )}
 
           {showWishlist && product.id ? (
-            <ProductCardActions product={product} countryCode={countryCode} />
+            <ProductCardActions
+              product={product}
+              countryCode={countryCode}
+              wishlistProductIds={wishlistProductIds}
+            />
           ) : null}
         </div>
 

package/src/product-card-actions.tsx

@@ -14,6 +14,7 @@ import QuickAddPanel from "./quick-add-panel"
 type Props = {
   product: HttpTypes.StoreProduct
   countryCode: string
+  wishlistProductIds?: string[]
 }
 
 function findVariantForOptions(
@@ -35,7 +36,7 @@ function findVariantForOptions(
   })
 }
 
-export default function ProductCardActions({ product, countryCode }: Props) {
+export default function ProductCardActions({ product, countryCode, wishlistProductIds }: Props) {
   const router = useRouter()
   const [wishlisted, setWishlisted] = useState(false)
   const [wishlistLoading, setWishlistLoading] = useState(false)
@@ -50,10 +51,16 @@ export default function ProductCardActions({ product, countryCode }: Props) {
 
   useEffect(() => {
     if (!product.id) return
+
+    if (wishlistProductIds !== undefined) {
+      setWishlisted(wishlistProductIds.includes(product.id))
+      return
+    }
+
     getWishlistProductIds()
       .then((ids) => setWishlisted(ids.includes(product.id!)))
       .catch(() => {})
-  }, [product.id])
+  }, [product.id, wishlistProductIds])
 
   useEffect(() => {
     if (!showQuickAdd) return

package/src/product-rail-variants.tsx

@@ -29,15 +29,23 @@ function ProductRailGrid({
   products,
   region,
   countryCode,
+  wishlistProductIds,
 }: {
   products: HttpTypes.StoreProduct[]
   region?: HttpTypes.StoreRegion
   countryCode?: string
+  wishlistProductIds?: string[]
 }) {
   return (
     <div className="product-rail__grid grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
       {products.map((p) => (
-        <ProductCard key={p.id} product={p} region={region} countryCode={countryCode} />
+        <ProductCard
+          key={p.id}
+          product={p}
+          region={region}
+          countryCode={countryCode}
+          wishlistProductIds={wishlistProductIds}
+        />
       ))}
     </div>
   )
@@ -47,10 +55,12 @@ function ProductRailFeatured({
   products,
   region,
   countryCode,
+  wishlistProductIds,
 }: {
   products: HttpTypes.StoreProduct[]
   region?: HttpTypes.StoreRegion
   countryCode?: string
+  wishlistProductIds?: string[]
 }) {
   const [featured, ...rest] = products
   if (!featured) return null
@@ -58,11 +68,22 @@ function ProductRailFeatured({
   return (
     <div className="product-rail__featured">
       <div className="product-rail__featured-main">
-        <ProductCard product={featured} region={region} countryCode={countryCode} />
+        <ProductCard
+          product={featured}
+          region={region}
+          countryCode={countryCode}
+          wishlistProductIds={wishlistProductIds}
+        />
       </div>
       <div className="product-rail__featured-side">
         {rest.slice(0, 3).map((p) => (
-          <ProductCard key={p.id} product={p} region={region} countryCode={countryCode} />
+          <ProductCard
+            key={p.id}
+            product={p}
+            region={region}
+            countryCode={countryCode}
+            wishlistProductIds={wishlistProductIds}
+          />
         ))}
       </div>
     </div>
@@ -78,6 +99,7 @@ export function ProductRailByVariant({
   title,
   viewAllLink,
   href,
+  wishlistProductIds,
 }: {
   variant: ProductRailVariant
   products: HttpTypes.StoreProduct[]
@@ -87,16 +109,33 @@ export function ProductRailByVariant({
   title: string
   viewAllLink: string
   href?: string
+  wishlistProductIds?: string[]
 }) {
   return (
     <>
       <ProductRailHeader title={title} viewAllLink={viewAllLink} href={href} />
       {variant === "carousel" ? (
-        <ProductScroll products={products} region={region} ratings={ratings} countryCode={countryCode} />
+        <ProductScroll
+          products={products}
+          region={region}
+          ratings={ratings}
+          countryCode={countryCode}
+          wishlistProductIds={wishlistProductIds}
+        />
       ) : variant === "featured" ? (
-        <ProductRailFeatured products={products} region={region} countryCode={countryCode} />
+        <ProductRailFeatured
+          products={products}
+          region={region}
+          countryCode={countryCode}
+          wishlistProductIds={wishlistProductIds}
+        />
       ) : (
-        <ProductRailGrid products={products} region={region} countryCode={countryCode} />
+        <ProductRailGrid
+          products={products}
+          region={region}
+          countryCode={countryCode}
+          wishlistProductIds={wishlistProductIds}
+        />
       )}
     </>
   )

package/src/product-scroll.tsx

@@ -9,9 +9,16 @@ type ProductScrollProps = {
   region?: HttpTypes.StoreRegion | null
   ratings?: Array<{ product_id?: string; rating?: number }>
   countryCode?: string
+  wishlistProductIds?: string[]
 }
 
-export default function ProductScroll({ products, region, ratings, countryCode }: ProductScrollProps) {
+export default function ProductScroll({
+  products,
+  region,
+  ratings,
+  countryCode,
+  wishlistProductIds,
+}: ProductScrollProps) {
   const viewportRef = useRef<HTMLDivElement>(null)
 
   const scroll = (direction: "prev" | "next") => {
@@ -51,6 +58,7 @@ export default function ProductScroll({ products, region, ratings, countryCode }
                 region={region ?? undefined}
                 countryCode={countryCode}
                 rating={ratings?.find((r) => r.product_id === product.id)}
+                wishlistProductIds={wishlistProductIds}
               />
             </div>
           ))}

package/src/segment.tsx

@@ -14,12 +14,12 @@ type Props = {
   rating?: { rating?: number }
   showWishlist?: boolean
   variant?: ProductCardVariant
+  wishlistProductIds?: string[]
 }
 
 function resolveProductCardVariant(variant?: ProductCardVariant): ProductCardVariant {
   if (variant === "beauty" || variant === "default") return variant
-  const envVariant = process.env.NEXT_PUBLIC_PRODUCT_CARD_VARIANT?.toLowerCase()
-  return envVariant === "beauty" ? "beauty" : "default"
+  return "default"
 }
 
 export default function ProductCard({ variant, ...props }: Props) {