Update promotion program feature

1 files changed, 117 insertions, 0 deletions

diff --git a/src-migrate/modules/product/PromoCard.tsx b/src-migrate/modules/product/PromoCard.tsx
new file mode 100644
index 00000000..8bb48155
--- /dev/null
+++ b/src-migrate/modules/product/PromoCard.tsx
@@ -0,0 +1,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
\ No newline at end of file