Improve product detail performance

1 files changed, 28 insertions, 4 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index b752a138..d38e0686 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -1,6 +1,6 @@
 import style from '../styles/product-detail.module.css'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import Link from 'next/link'
 import { MessageCircleIcon } from 'lucide-react'
 import { Button } from '@chakra-ui/react'
@@ -15,6 +15,10 @@ import SimilarSide from './SimilarSide'
 import SimilarBottom from './SimilarBottom'
 import useDevice from '@/core/hooks/useDevice'
 import PriceAction from './PriceAction'
+import { whatsappUrl } from '~/libs/whatsappUrl'
+import { useRouter } from 'next/router'
+import { useProductDetail } from '../stores/useProductDetail'
+import ProductPromoSection from '~/modules/product-promo/components/Section'
 
 type Props = {
   product: IProductDetail
@@ -22,6 +26,22 @@ type Props = {
 
 const ProductDetail = ({ product }: Props) => {
   const { isDesktop, isMobile } = useDevice()
+  const router = useRouter()
+  const { setAskAdminUrl, askAdminUrl, activeVariantId } = useProductDetail()
+
+  useEffect(() => {
+    const createdAskUrl = whatsappUrl({
+      template: 'product',
+      payload: {
+        manufacture: product.manufacture.name,
+        productName: product.name,
+        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath
+      },
+      fallbackUrl: router.asPath
+    })
+
+    setAskAdminUrl(createdAskUrl)
+  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl])
 
   return (
     <>
@@ -47,8 +67,9 @@ const ProductDetail = ({ product }: Props) => {
 
               <Button
                 as={Link}
-                href=''
+                href={askAdminUrl}
                 variant='link'
+                target='_blank'
                 colorScheme='red'
                 leftIcon={<MessageCircleIcon size={18} />}
               >
@@ -64,7 +85,10 @@ const ProductDetail = ({ product }: Props) => {
               </div>
             )}
 
-            <div className='h-4 md:h-10'></div>
+            <div className='h-4 md:h-10' />
+            {activeVariantId && (
+              <ProductPromoSection productId={activeVariantId} />
+            )}
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>
@@ -74,7 +98,7 @@ const ProductDetail = ({ product }: Props) => {
               <VariantList variants={product.variants} />
             </div>
 
-            <div className='h-0 md:h-6'></div>
+            <div className='h-0 md:h-6' />
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>