From 89f32128f37d99b490de7590e2116a9cfd853f89 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 22 Dec 2023 17:33:46 +0700
Subject: Update promotion program feature

---
 .../modules/product-promo/components/Section.tsx   | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src-migrate/modules/product-promo/components/Section.tsx

(limited to 'src-migrate/modules/product-promo/components/Section.tsx')

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
new file mode 100644
index 00000000..47e1de29
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -0,0 +1,50 @@
+import style from "../styles/section.module.css"
+
+import React from 'react'
+import { useQuery } from 'react-query'
+import { Button, Skeleton } from '@chakra-ui/react'
+
+import ProductPromoCard from './Card'
+import { IPromotion } from '~/common/types/promotion'
+import ProductPromoModal from "./Modal"
+import { useModalStore } from "../stores/useModalStore"
+
+type Props = {
+  productId: number
+}
+
+const ProductPromoSection = ({ productId }: Props) => {
+  const promotionsQuery = useQuery(
+    `promotions-highlight:${productId}`,
+    async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] },
+  )
+
+  const promotions = promotionsQuery.data
+
+  const { openModal } = useModalStore()
+
+  return (
+    <div className='w-full'>
+      <ProductPromoModal />
+
+      {promotions?.data && promotions?.data.length > 0 && (
+        <div className={style.titleWrapper}>
+          <span className={style.title}>Promo Tersedia</span>
+          <Button colorScheme="yellow" type='button' onClick={() => openModal(productId)}>
+            Lihat Semua
+          </Button>
+        </div>
+      )}
+
+      <Skeleton isLoaded={promotionsQuery.isSuccess} className="flex gap-x-4 overflow-x-auto min-h-[340px] px-4 md:px-0">
+        {promotions?.data.map((promotion) => (
+          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
+            <ProductPromoCard promotion={promotion} />
+          </div>
+        ))}
+      </Skeleton>
+    </div>
+  )
+}
+
+export default ProductPromoSection
\ No newline at end of file
-- 
cgit v1.2.3