Merge branch 'promotion-program' into feature/all-promotion

1 files changed, 17 insertions, 13 deletions

diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index b6753be7..4e8a7dd5 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -1,31 +1,35 @@
 import style from "../styles/section.module.css"
 
-import React from 'react'
-import { useQuery } from 'react-query'
 import { Button, Skeleton } from '@chakra-ui/react'
+import { useQuery } from 'react-query'
 
-import ProductPromoCard from './Card'
+import SmoothRender from "~/components/ui/smooth-render"
+import clsxm from "~/libs/clsxm"
 import { IPromotion } from '~/types/promotion'
-import ProductPromoModal from "./Modal"
 import { useModalStore } from "../stores/useModalStore"
-import clsxm from "~/libs/clsxm"
+import ProductPromoCard from './Card'
+import ProductPromoModal from "./Modal"
 
 type Props = {
-  productId: number
+  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 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 (
-    <div className='w-full'>
+    <SmoothRender
+      isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
+      height='450px'
+      duration='700ms'
+    >
       <ProductPromoModal />
 
       {promotions?.data && promotions?.data.length > 0 && (
@@ -46,11 +50,11 @@ const ProductPromoSection = ({ productId }: Props) => {
       >
         {promotions?.data.map((promotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard promotion={promotion} />
+            <ProductPromoCard promotion={promotion}  />
           </div>
         ))}
       </Skeleton>
-    </div>
+    </SmoothRender>
   )
 }