diff options
Diffstat (limited to 'src-migrate/modules/product/PromoCard.tsx')
| -rw-r--r-- | src-migrate/modules/product/PromoCard.tsx | 117 |
1 files changed, 0 insertions, 117 deletions
diff --git a/src-migrate/modules/product/PromoCard.tsx b/src-migrate/modules/product/PromoCard.tsx deleted file mode 100644 index 8bb48155..00000000 --- a/src-migrate/modules/product/PromoCard.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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
\ No newline at end of file |
