2 files changed, 14 insertions, 17 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index f569ef46..3b1bdbea 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -1,29 +1,27 @@
 import style from '../styles/product-detail.module.css'
 
-import React, { useEffect } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
-import { MessageCircleIcon, Share2Icon } from 'lucide-react'
 import { Button } from '@chakra-ui/react'
+import { MessageCircleIcon, Share2Icon } from 'lucide-react'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import { RWebShare } from 'react-web-share'
 
-import { IProductDetail } from '~/types/product'
 import useDevice from '@/core/hooks/useDevice'
 import { whatsappUrl } from '~/libs/whatsappUrl'
-
+import ProductPromoSection from '~/modules/product-promo/components/Section'
+import { IProductDetail } from '~/types/product'
 import { useProductDetail } from '../stores/useProductDetail'
-
-import { RWebShare } from 'react-web-share'
+import AddToWishlist from './AddToWishlist'
+import Breadcrumb from './Breadcrumb'
 import ProductImage from './Image'
 import Information from './Information'
-import AddToWishlist from './AddToWishlist'
-import VariantList from './VariantList'
-import SimilarSide from './SimilarSide'
-import SimilarBottom from './SimilarBottom'
 import PriceAction from './PriceAction'
-import ProductPromoSection from '~/modules/product-promo/components/Section'
-import Breadcrumb from './Breadcrumb'
-import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import SimilarBottom from './SimilarBottom'
+import SimilarSide from './SimilarSide'
+import VariantList from './VariantList'
 
 type Props = {
   product: IProductDetail
@@ -117,7 +115,7 @@ const ProductDetail = ({ product }: Props) => {
             )}
 
             <div className='h-4 md:h-10' />
-            {!!activeVariantId && <ProductPromoSection productId={activeVariantId} height={450} />}
+            {!!activeVariantId && <ProductPromoSection productId={activeVariantId} />}
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 5000e737..07a5df7b 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -11,10 +11,9 @@ import ProductPromoModal from "./Modal"
 
 type Props = {
   productId: number;
-  height: number;
 }
 
-const ProductPromoSection = ({ productId, height = 435 }: Props) => {
+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[] }
@@ -26,7 +25,7 @@ const ProductPromoSection = ({ productId, height = 435 }: Props) => {
 
   return (
     <div className={clsxm('w-full overflow-y-hidden transition-all opacity-0 duration-500 h-0', {
-      [`h-[${height}px] opacity-100`]: promotions?.data && promotions?.data.length > 0,
+      'h-[450px] opacity-100': promotions?.data && promotions?.data.length > 0,
     })}>
       <ProductPromoModal />