Merge branch 'release' into development

# Conflicts:
#	src/pages/shop/product/variant/[slug].jsx

1 files changed, 61 insertions, 0 deletions

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..4e8a7dd5
--- /dev/null
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -0,0 +1,61 @@
+import style from "../styles/section.module.css"
+
+import { Button, Skeleton } from '@chakra-ui/react'
+import { useQuery } from 'react-query'
+
+import SmoothRender from "~/components/ui/smooth-render"
+import clsxm from "~/libs/clsxm"
+import { IPromotion } from '~/types/promotion'
+import { useModalStore } from "../stores/useModalStore"
+import ProductPromoCard from './Card'
+import ProductPromoModal from "./Modal"
+
+type Props = {
+  productId: number;
+}
+
+const ProductPromoSection = ({ productId }: Props) => {
+  const promotionsQuery = useQuery({
+    queryKey: [`promotions.highlight`, productId],
+    queryFn: async () => await fetch(`/api/product-variant/${productId}/promotion/highlight`).then((res) => res.json()) as { data: IPromotion[] }
+  })
+
+  const promotions = promotionsQuery.data
+
+  const { openModal } = useModalStore()
+
+  return (
+    <SmoothRender
+      isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
+      height='450px'
+      duration='700ms'
+    >
+      <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={clsxm(
+          "flex gap-x-4 overflow-x-auto px-4 md:px-0", {
+          "min-h-[340px]": promotions?.data && promotions?.data.length > 0
+        })}
+      >
+        {promotions?.data.map((promotion) => (
+          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
+            <ProductPromoCard promotion={promotion}  />
+          </div>
+        ))}
+      </Skeleton>
+    </SmoothRender>
+  )
+}
+
+export default ProductPromoSection
\ No newline at end of file