diff options
Diffstat (limited to 'src-migrate')
4 files changed, 280 insertions, 37 deletions
diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx index 6ded6373..fed11eb0 100644 --- a/src-migrate/modules/cart/components/Item.tsx +++ b/src-migrate/modules/cart/components/Item.tsx @@ -4,7 +4,8 @@ import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react' import { InfoIcon } from 'lucide-react' import Image from 'next/image' import Link from 'next/link' - +import ImageNext from 'next/image'; +import { useEffect, useState } from 'react'; import { PROMO_CATEGORY } from '~/constants/promotion' import formatCurrency from '~/libs/formatCurrency' import { createSlug } from '~/libs/slug' @@ -20,6 +21,31 @@ type Props = { } const CartItem = ({ item, editable = true }: Props) => { + const [isSni, setIsSni] = useState(false); + const [isTkdn, setTkdn] = useState(false); + + useEffect(() => { + 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.wrapper}> {item.cart_type === 'promotion' && ( @@ -46,7 +72,7 @@ const CartItem = ({ item, editable = true }: Props) => { {editable && <CartItemSelect item={item} />} <div className='w-4' /> - <CartItem.Image item={item} /> + <CartItem.Image item={item} isSni={isSni} isTkdn={isTkdn} /> <div className={style.details}> <CartItem.Name item={item} /> @@ -98,7 +124,7 @@ const CartItem = ({ item, editable = true }: Props) => { ) } -CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) { +CartItem.Image = function CartItemImage({ item, isSni, isTkdn }: { item: CartItemProps, isSni: boolean, isTkdn: boolean }) { const image = item?.image || item?.parent?.image return ( @@ -116,6 +142,31 @@ CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) { className={style.image} > {image && <Image src={image} alt={item.name} width={128} height={128} />} + + <div className="relative top-2 right-4 flex"> + {/* <div className="gambarB mr-1 bg-red-100"> */} + {!isSni && ( + <ImageNext + src="/images/sni-logo.png" + alt="SNI Logo" + className="w-4 h-3 object-contain object-top sm:h-4" + width={50} + height={50} + /> + )} + {/* </div> */} + {/* <div className="gambarC bg-red-500"> */} + {!isTkdn && ( + <ImageNext + src="/images/TKDN.png" + alt="TKDN" + className="w-10 h-5 object-contain object-top ml-1 mr-1 sm:h-10" + width={50} + height={50} + /> + )} + {/* </div> */} + </div> {!image && <div className={style.noImage}>No Image</div>} </Link> )} @@ -153,4 +204,4 @@ CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: nu )) } -export default CartItem
\ No newline at end of file +export default CartItem diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx index 4ddebda5..c3f05176 100644 --- a/src-migrate/modules/product-card/components/ProductCard.tsx +++ b/src-migrate/modules/product-card/components/ProductCard.tsx @@ -1,8 +1,8 @@ import style from '../styles/product-card.module.css' - +import ImageNext from 'next/image'; import clsx from 'clsx' import Link from 'next/link' -import { useMemo } from 'react' +import React, { useEffect, useMemo, useState } from 'react' import Image from '~/components/ui/image' import useUtmSource from '~/hooks/useUtmSource' import clsxm from '~/libs/clsxm' @@ -18,6 +18,46 @@ type Props = { const ProductCard = ({ product, layout = 'vertical' }: Props) => { const utmSource = useUtmSource() + const [isSni, setIsSni] = useState(false); + const [isTkdn, setTkdn] = useState(false); + + useEffect(() => { + // Lakukan pemanggilan API untuk memeriksa isSni + const fetchSniData = async () => { + try { + const response = await fetch('URL_API_SNI'); + const data = await response.json(); + if (data && data.sni) { + setIsSni(true); + } else { + setIsSni(false); + } + } catch (error) { + console.error('Error fetching SNI data:', error); + setIsSni(false); + } + }; + + // Lakukan pemanggilan API untuk memeriksa isTkdn + const fetchTkdnData = async () => { + try { + const response = await fetch('URL_API_TKDN'); + const data = await response.json(); + if (data && data.tkdn) { + setTkdn(true); + } else { + setTkdn(false); + } + } catch (error) { + console.error('Error fetching TKDN data:', error); + setTkdn(false); + } + }; + fetchSniData(); + fetchTkdnData(); + return () => { + }; + }, []); const URL = { product: createSlug('/shop/product/', product.name, product.id.toString()) + `?utm_source=${utmSource}`, @@ -40,6 +80,8 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => { [style['image-h']]: layout === 'horizontal', })}> <Link href={URL.product}> + + <div className="relative"> <Image src={image} alt={product.name} @@ -47,6 +89,32 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => { height={128} className='object-contain object-center h-full w-full' /> + <div className="absolute top-0 right-0 flex mt-2"> + <div className="gambarB "> + {!isSni && ( + <ImageNext + src="/images/sni-logo.png" + alt="SNI Logo" + className="w-3 h-4 object-contain object-top sm:h-4" + width={50} + height={50} + /> + )} + </div> + <div className="gambarC "> + {!isTkdn && ( + <ImageNext + src="/images/TKDN.png" + alt="TKDN" + className="w-5 h-4 object-contain object-top ml-1 mr-1 sm:h-6" + width={50} + height={50} + /> + )} + </div> + </div> + </div> + {product.variant_total > 1 && ( <div className={style['variant-badge']}>{product.variant_total} Varian</div> )} diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index 3d7777f8..1b80efa8 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -1,5 +1,5 @@ import style from '../styles/image.module.css'; - +import ImageNext from 'next/image'; import React, { useEffect, useMemo, useState } from 'react' import { InfoIcon } from 'lucide-react' import { Tooltip } from '@chakra-ui/react' @@ -17,6 +17,47 @@ const Image = ({ product }: Props) => { const [count, setCount] = useState(flashSale?.remaining_time || 0); + const [isSni, setIsSni] = useState(false); + const [isTkdn, setTkdn] = useState(false); + + useEffect(() => { + // Lakukan pemanggilan API untuk memeriksa isSni + const fetchSniData = async () => { + try { + const response = await fetch('URL_API_SNI'); + const data = await response.json(); + if (data && data.sni) { + setIsSni(true); + } else { + setIsSni(false); + } + } catch (error) { + console.error('Error fetching SNI data:', error); + setIsSni(false); + } + }; + + // Lakukan pemanggilan API untuk memeriksa isTkdn + const fetchTkdnData = async () => { + try { + const response = await fetch('URL_API_TKDN'); + const data = await response.json(); + if (data && data.tkdn) { + setTkdn(true); + } else { + setTkdn(false); + } + } catch (error) { + console.error('Error fetching TKDN data:', error); + setTkdn(false); + } + }; + fetchSniData(); + fetchTkdnData(); + return () => { + }; + }, []); + useEffect(() => { let interval: NodeJS.Timeout; @@ -42,15 +83,43 @@ const Image = ({ product }: Props) => { return ( <div className={style['wrapper']}> - <ImageUI - src={image} - alt={product.name} - width={256} - height={256} - className={style['image']} - loading='eager' - priority - /> + {/* <div className="relative"> */} + <ImageUI + src={image} + alt={product.name} + width={256} + height={256} + className={style['image']} + loading='eager' + priority + /> + <div className="absolute top-4 right-10 flex "> + <div className="gambarB "> + {!isSni && ( + <ImageNext + src="/images/sni-logo.png" + alt="SNI Logo" + className="w-12 h-8 object-contain object-top sm:h-6" + width={50} + height={50} + /> + )} + </div> + <div className="gambarC "> + {!isTkdn && ( + <ImageNext + src="/images/TKDN.png" + alt="TKDN" + className="w-16 h-8 object-contain object-top ml-1 mr-1 sm:h-6" + width={50} + height={50} + /> + )} + </div> + </div> + {/* </div> */} + + <div className={style['absolute-info']}> <Tooltip diff --git a/src-migrate/modules/product-promo/components/Item.tsx b/src-migrate/modules/product-promo/components/Item.tsx index b396160f..4d1808c2 100644 --- a/src-migrate/modules/product-promo/components/Item.tsx +++ b/src-migrate/modules/product-promo/components/Item.tsx @@ -1,34 +1,89 @@ -import style from '../styles/item.module.css' +import style from '../styles/item.module.css'; +import ImageNext from 'next/image'; +import { useEffect, useState } from 'react'; +import { Tooltip } from '@chakra-ui/react'; -import { Tooltip } from '@chakra-ui/react' - -import Image from '~/components/ui/image' -import { IProductVariantPromo } from '~/types/promotion' +import Image from '~/components/ui/image'; +import { IProductVariantPromo } from '~/types/promotion'; type Props = { - variant: IProductVariantPromo, - isFree?: boolean -} - -const ProductPromoItem = ({ - variant, - isFree = false -}: 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}> - <Image src={variant.image || '/images/noimage.jpeg'} alt={variant.display_name} width={120} height={120} quality={100} /> + <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 label={variant.display_name} placement="top" fontSize="sm"> + <div className={style.name}>{variant.name}</div> </Tooltip> </div> - ) -} + ); +}; -export default ProductPromoItem
\ No newline at end of file +export default ProductPromoItem; |