@pradip1995/segment-product-card 0.3.6 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/src/beauty-product-card.tsx +9 -3
  3. package/src/default-product-card.tsx +9 -3
  4. package/src/product-card-actions.tsx +9 -2
  5. package/src/product-rail-variants.tsx +45 -6
  6. package/src/product-scroll.tsx +9 -1
  7. package/src/segment.tsx +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pradip1995/segment-product-card",
3
- "version": "0.3.6",
3
+ "version": "0.3.8",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/beauty-product-card.tsx CHANGED
@@ -11,6 +11,7 @@ type Props = {
11
11
  countryCode?: string
12
12
  rating?: { rating?: number }
13
13
  showWishlist?: boolean
14
+ wishlistProductIds?: string[]
14
15
  }
15
16
 
16
17
  function productSubtitle(product: HttpTypes.StoreProduct) {
@@ -27,14 +28,15 @@ export default function BeautyProductCard({
27
28
  countryCode: countryCodeProp,
28
29
  rating,
29
30
  showWishlist = true,
31
+ wishlistProductIds,
30
32
  }: Props) {
31
33
  const variant = product.variants?.[0]
32
34
  const price = variant?.calculated_price?.calculated_amount
33
35
  const originalPrice = variant?.calculated_price?.original_amount
34
36
  const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
35
37
  const countryCode =
36
- countryCodeProp?.toLowerCase() ??
37
- region?.countries?.[0]?.iso_2?.toLowerCase() ??
38
+ countryCodeProp?.toLowerCase() ||
39
+ region?.countries?.[0]?.iso_2?.toLowerCase() ||
38
40
  "in"
39
41
 
40
42
  const discountPct =
@@ -71,7 +73,11 @@ export default function BeautyProductCard({
71
73
  ) : null}
72
74
 
73
75
  {showWishlist && product.id ? (
74
- <ProductCardActions product={product} countryCode={countryCode} />
76
+ <ProductCardActions
77
+ product={product}
78
+ countryCode={countryCode}
79
+ wishlistProductIds={wishlistProductIds}
80
+ />
75
81
  ) : null}
76
82
  </div>
77
83
 
package/src/default-product-card.tsx CHANGED
@@ -11,6 +11,7 @@ type Props = {
11
11
  countryCode?: string
12
12
  rating?: { rating?: number }
13
13
  showWishlist?: boolean
14
+ wishlistProductIds?: string[]
14
15
  }
15
16
 
16
17
  export default function DefaultProductCard({
@@ -19,14 +20,15 @@ export default function DefaultProductCard({
19
20
  countryCode: countryCodeProp,
20
21
  rating,
21
22
  showWishlist = true,
23
+ wishlistProductIds,
22
24
  }: Props) {
23
25
  const variant = product.variants?.[0]
24
26
  const price = variant?.calculated_price?.calculated_amount
25
27
  const originalPrice = variant?.calculated_price?.original_amount
26
28
  const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
27
29
  const countryCode =
28
- countryCodeProp?.toLowerCase() ??
29
- region?.countries?.[0]?.iso_2?.toLowerCase() ??
30
+ countryCodeProp?.toLowerCase() ||
31
+ region?.countries?.[0]?.iso_2?.toLowerCase() ||
30
32
  "in"
31
33
 
32
34
  const discountPct =
@@ -52,7 +54,11 @@ export default function DefaultProductCard({
52
54
  )}
53
55
 
54
56
  {showWishlist && product.id ? (
55
- <ProductCardActions product={product} countryCode={countryCode} />
57
+ <ProductCardActions
58
+ product={product}
59
+ countryCode={countryCode}
60
+ wishlistProductIds={wishlistProductIds}
61
+ />
56
62
  ) : null}
57
63
  </div>
58
64
 
package/src/product-card-actions.tsx CHANGED
@@ -14,6 +14,7 @@ import QuickAddPanel from "./quick-add-panel"
14
14
  type Props = {
15
15
  product: HttpTypes.StoreProduct
16
16
  countryCode: string
17
+ wishlistProductIds?: string[]
17
18
  }
18
19
 
19
20
  function findVariantForOptions(
@@ -35,7 +36,7 @@ function findVariantForOptions(
35
36
  })
36
37
  }
37
38
 
38
- export default function ProductCardActions({ product, countryCode }: Props) {
39
+ export default function ProductCardActions({ product, countryCode, wishlistProductIds }: Props) {
39
40
  const router = useRouter()
40
41
  const [wishlisted, setWishlisted] = useState(false)
41
42
  const [wishlistLoading, setWishlistLoading] = useState(false)
@@ -50,10 +51,16 @@ export default function ProductCardActions({ product, countryCode }: Props) {
50
51
 
51
52
  useEffect(() => {
52
53
  if (!product.id) return
54
+
55
+ if (wishlistProductIds !== undefined) {
56
+ setWishlisted(wishlistProductIds.includes(product.id))
57
+ return
58
+ }
59
+
53
60
  getWishlistProductIds()
54
61
  .then((ids) => setWishlisted(ids.includes(product.id!)))
55
62
  .catch(() => {})
56
- }, [product.id])
63
+ }, [product.id, wishlistProductIds])
57
64
 
58
65
  useEffect(() => {
59
66
  if (!showQuickAdd) return
package/src/product-rail-variants.tsx CHANGED
@@ -29,15 +29,23 @@ function ProductRailGrid({
29
29
  products,
30
30
  region,
31
31
  countryCode,
32
+ wishlistProductIds,
32
33
  }: {
33
34
  products: HttpTypes.StoreProduct[]
34
35
  region?: HttpTypes.StoreRegion
35
36
  countryCode?: string
37
+ wishlistProductIds?: string[]
36
38
  }) {
37
39
  return (
38
40
  <div className="product-rail__grid grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
39
41
  {products.map((p) => (
40
- <ProductCard key={p.id} product={p} region={region} countryCode={countryCode} />
42
+ <ProductCard
43
+ key={p.id}
44
+ product={p}
45
+ region={region}
46
+ countryCode={countryCode}
47
+ wishlistProductIds={wishlistProductIds}
48
+ />
41
49
  ))}
42
50
  </div>
43
51
  )
@@ -47,10 +55,12 @@ function ProductRailFeatured({
47
55
  products,
48
56
  region,
49
57
  countryCode,
58
+ wishlistProductIds,
50
59
  }: {
51
60
  products: HttpTypes.StoreProduct[]
52
61
  region?: HttpTypes.StoreRegion
53
62
  countryCode?: string
63
+ wishlistProductIds?: string[]
54
64
  }) {
55
65
  const [featured, ...rest] = products
56
66
  if (!featured) return null
@@ -58,11 +68,22 @@ function ProductRailFeatured({
58
68
  return (
59
69
  <div className="product-rail__featured">
60
70
  <div className="product-rail__featured-main">
61
- <ProductCard product={featured} region={region} countryCode={countryCode} />
71
+ <ProductCard
72
+ product={featured}
73
+ region={region}
74
+ countryCode={countryCode}
75
+ wishlistProductIds={wishlistProductIds}
76
+ />
62
77
  </div>
63
78
  <div className="product-rail__featured-side">
64
79
  {rest.slice(0, 3).map((p) => (
65
- <ProductCard key={p.id} product={p} region={region} countryCode={countryCode} />
80
+ <ProductCard
81
+ key={p.id}
82
+ product={p}
83
+ region={region}
84
+ countryCode={countryCode}
85
+ wishlistProductIds={wishlistProductIds}
86
+ />
66
87
  ))}
67
88
  </div>
68
89
  </div>
@@ -78,6 +99,7 @@ export function ProductRailByVariant({
78
99
  title,
79
100
  viewAllLink,
80
101
  href,
102
+ wishlistProductIds,
81
103
  }: {
82
104
  variant: ProductRailVariant
83
105
  products: HttpTypes.StoreProduct[]
@@ -87,16 +109,33 @@ export function ProductRailByVariant({
87
109
  title: string
88
110
  viewAllLink: string
89
111
  href?: string
112
+ wishlistProductIds?: string[]
90
113
  }) {
91
114
  return (
92
115
  <>
93
116
  <ProductRailHeader title={title} viewAllLink={viewAllLink} href={href} />
94
117
  {variant === "carousel" ? (
95
- <ProductScroll products={products} region={region} ratings={ratings} countryCode={countryCode} />
118
+ <ProductScroll
119
+ products={products}
120
+ region={region}
121
+ ratings={ratings}
122
+ countryCode={countryCode}
123
+ wishlistProductIds={wishlistProductIds}
124
+ />
96
125
  ) : variant === "featured" ? (
97
- <ProductRailFeatured products={products} region={region} countryCode={countryCode} />
126
+ <ProductRailFeatured
127
+ products={products}
128
+ region={region}
129
+ countryCode={countryCode}
130
+ wishlistProductIds={wishlistProductIds}
131
+ />
98
132
  ) : (
99
- <ProductRailGrid products={products} region={region} countryCode={countryCode} />
133
+ <ProductRailGrid
134
+ products={products}
135
+ region={region}
136
+ countryCode={countryCode}
137
+ wishlistProductIds={wishlistProductIds}
138
+ />
100
139
  )}
101
140
  </>
102
141
  )
package/src/product-scroll.tsx CHANGED
@@ -9,9 +9,16 @@ type ProductScrollProps = {
9
9
  region?: HttpTypes.StoreRegion | null
10
10
  ratings?: Array<{ product_id?: string; rating?: number }>
11
11
  countryCode?: string
12
+ wishlistProductIds?: string[]
12
13
  }
13
14
 
14
- export default function ProductScroll({ products, region, ratings, countryCode }: ProductScrollProps) {
15
+ export default function ProductScroll({
16
+ products,
17
+ region,
18
+ ratings,
19
+ countryCode,
20
+ wishlistProductIds,
21
+ }: ProductScrollProps) {
15
22
  const viewportRef = useRef<HTMLDivElement>(null)
16
23
 
17
24
  const scroll = (direction: "prev" | "next") => {
@@ -51,6 +58,7 @@ export default function ProductScroll({ products, region, ratings, countryCode }
51
58
  region={region ?? undefined}
52
59
  countryCode={countryCode}
53
60
  rating={ratings?.find((r) => r.product_id === product.id)}
61
+ wishlistProductIds={wishlistProductIds}
54
62
  />
55
63
  </div>
56
64
  ))}
package/src/segment.tsx CHANGED
@@ -14,6 +14,7 @@ type Props = {
14
14
  rating?: { rating?: number }
15
15
  showWishlist?: boolean
16
16
  variant?: ProductCardVariant
17
+ wishlistProductIds?: string[]
17
18
  }
18
19
 
19
20
  function resolveProductCardVariant(variant?: ProductCardVariant): ProductCardVariant {