1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import React, { useEffect, useMemo, useState } from 'react'
import style from "./PromoCard.module.css"
import { ClockIcon, PlusIcon } from "lucide-react"
import { IProductVariantPromo, IPromotion } from '~/common/types/promotion'
import formatCurrency from '~/common/libs/formatCurrency'
import PromoProduct from './PromoProduct'
import { Skeleton, Spinner } from '@chakra-ui/react'
import clsxm from '~/common/libs/clsxm'
import { useCountdown } from 'usehooks-ts'
type Props = {
promotion: IPromotion
}
const PromoCard = ({ promotion }: Props) => {
// TODO: useCountdown()
const [products, setProducts] = useState<IProductVariantPromo[]>([])
useEffect(() => {
const getProducts = async () => {
const datas = []
for (const product of promotion.products) {
const response = await fetch(`/api/product-variant/${product.product_id}`)
const res = await response.json()
res.data.qty = product.qty
datas.push(res.data)
}
setProducts(datas)
}
getProducts()
}, [promotion.products])
const [freeProducts, setFreeProducts] = useState<IProductVariantPromo[]>([])
useEffect(() => {
const getFreeProducts = async () => {
const datas = []
for (const product of promotion.free_products) {
const response = await fetch(`/api/product-variant/${product.product_id}`)
const res = await response.json()
res.data.qty = product.qty
datas.push(res.data)
}
setFreeProducts(datas)
}
getFreeProducts()
}, [promotion.free_products])
const priceTotal = useMemo(() => {
let total = 0;
[...products, ...freeProducts].forEach((product) => {
total += product.price.price_discount * product.qty
console.log({ product });
})
return total
}, [products, freeProducts])
const countdownClass = {
'text-white': true,
'bg-[#312782]': promotion.type.value === 'bundling',
'bg-[#329E44]': promotion.type.value === 'discount_loading',
'bg-[#FAD147]': promotion.type.value === 'merchandise',
'text-gray-700': promotion.type.value === 'merchandise',
}
return (
<div className={style.card}>
<div className={clsxm(style.countdownSection, countdownClass)}>
<span>
<ClockIcon size={20} />
</span>
<span>Berakhir dalam</span>
<div className={style.countdown}>
<span>00</span>
<span>01</span>
<span>35</span>
</div>
</div>
<div className='px-4 mt-4 text-caption-1'>
<div className={style.title}>{promotion.name}</div>
<Skeleton className={style.productSection} isLoaded={[...products, ...freeProducts].length > 0}>
{products.map((product) => <PromoProduct key={product.id} variant={product} />)}
{freeProducts.map((product) => <PromoProduct key={product.id} variant={product} />)}
</Skeleton>
<div className={style.priceSection}>
<div className={style.priceCol}>
<Skeleton className={style.priceRow} isLoaded={priceTotal > 0}>
<span className={style.basePrice}>Rp{formatCurrency(priceTotal)}</span>
<span>Hemat <span className={style.savingAmt}>Rp {formatCurrency(priceTotal - promotion.price)}</span></span>
</Skeleton>
<div className={style.priceRow}>
<span className={style.price}>Rp{formatCurrency(promotion.price)}</span>
<span className={style.totalItems}>(Total {promotion.total_qty} barang)</span>
</div>
</div>
<div>
<button className={style.addToCartBtn}>
{/* <PlusIcon size={16} /> */}
<Spinner size='xs' mr={1.5} />
Keranjang
</button>
</div>
</div>
</div>
</div>
)
}
export default PromoCard
|
