1 files changed, 5 insertions, 4 deletions
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 4e8a7dd5..e1719998 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -9,12 +9,14 @@ import { IPromotion } from '~/types/promotion'
 import { useModalStore } from "../stores/useModalStore"
 import ProductPromoCard from './Card'
 import ProductPromoModal from "./Modal"
+import { IProductDetail } from '~/types/product';
 
 type Props = {
   productId: number;
+  product: IProductDetail;
 }
 
-const ProductPromoSection = ({ productId }: Props) => {
+const ProductPromoSection = ({ product, 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[] }
@@ -23,14 +25,13 @@ const ProductPromoSection = ({ productId }: Props) => {
   const promotions = promotionsQuery.data
 
   const { openModal } = useModalStore()
-
   return (
     <SmoothRender
       isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
       height='450px'
       duration='700ms'
     >
-      <ProductPromoModal />
+      <ProductPromoModal product={product}/>
 
       {promotions?.data && promotions?.data.length > 0 && (
         <div className={style.titleWrapper}>
@@ -50,7 +51,7 @@ const ProductPromoSection = ({ productId }: Props) => {
       >
         {promotions?.data.map((promotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
-            <ProductPromoCard promotion={promotion}  />
+            <ProductPromoCard product={product} promotion={promotion}  />
           </div>
         ))}
       </Skeleton>