Update promotion program line for smoother animation

2 files changed, 14 insertions, 15 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 4b514944..f569ef46 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -117,8 +117,7 @@ const ProductDetail = ({ product }: Props) => {
             )}
 
             <div className='h-4 md:h-10' />
-            {!!activeVariantId && <ProductPromoSection productId={activeVariantId} />}
-            {!!activeVariantId && !isMobile && <div className='h-6' />}
+            {!!activeVariantId && <ProductPromoSection productId={activeVariantId} height={450} />}
 
             <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 694a3705..5000e737 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -1,32 +1,32 @@
 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 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;
+  height: 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 ProductPromoSection = ({ productId, height = 435 }: 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 (
-    <div className={clsxm('w-full overflow-y-hidden transition-all duration-500 h-0', {
-      'h-[425px]': promotions?.data && promotions?.data.length > 0,
+    <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,
     })}>
       <ProductPromoModal />