summaryrefslogtreecommitdiff
path: root/src-migrate/modules/product/PromoCard.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/product/PromoCard.tsx')
-rw-r--r--src-migrate/modules/product/PromoCard.tsx117
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