blob: 4d1808c2471dc58f6590c48cdc9db1a4d8af9b26 (
plain)
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
|
import style from '../styles/item.module.css';
import ImageNext from 'next/image';
import { useEffect, useState } from 'react';
import { Tooltip } from '@chakra-ui/react';
import Image from '~/components/ui/image';
import { IProductVariantPromo } from '~/types/promotion';
type Props = {
variant: IProductVariantPromo;
isFree?: boolean;
};
const ProductPromoItem = ({ variant, isFree = false }: Props) => {
const [isSni, setIsSni] = useState(false);
const [isTkdn, setTkdn] = useState(false);
useEffect(() => {
// Lakukan pemanggilan API untuk memeriksa isSni dan isTkdn
const fetchData = async () => {
try {
const responseSni = await fetch('URL_API_SNI');
const dataSni = await responseSni.json();
setIsSni(dataSni && dataSni.sni);
const responseTkdn = await fetch('URL_API_TKDN');
const dataTkdn = await responseTkdn.json();
setTkdn(dataTkdn && dataTkdn.tkdn);
} catch (error) {
console.error('Error fetching data:', error);
setIsSni(false);
setTkdn(false);
}
};
fetchData();
return () => {};
}, []);
return (
<div className={style.item}>
<div className={style.image}>
<div className="relative">
<Image
src={variant.image || '/images/noimage.jpeg'}
alt={variant.display_name}
width={120}
height={120}
quality={100}
/>
<div className="absolute top-0 right-0 flex mt-2">
{!isSni && (
<div className="w-2 h-4 sm:h-6 mr-1">
<ImageNext
src="/images/sni-logo.png"
alt="SNI Logo"
className="object-contain object-top"
width={50}
height={50}
/>
</div>
)}
{!isTkdn && (
<div className="w-4 h-5 sm:h-6 ml-1">
<ImageNext
src="/images/TKDN.png"
alt="TKDN"
className="object-contain object-top"
width={50}
height={50}
/>
</div>
)}
</div>
</div>
<div className={style.quantity}>
{variant.qty} pcs {isFree ? '(free)' : ''}
</div>
</div>
<Tooltip label={variant.display_name} placement="top" fontSize="sm">
<div className={style.name}>{variant.name}</div>
</Tooltip>
</div>
);
};
export default ProductPromoItem;
|
