From 948914e88fa6849ec3be1cd88113dc7febeda577 Mon Sep 17 00:00:00 2001
From: trisusilo48 <tri.susilo@altama.co.id>
Date: Thu, 22 Aug 2024 14:16:57 +0700
Subject: update template detail product

---
 .../product-detail/components/ProductDetail.tsx    | 194 +++++++++++----------
 1 file changed, 101 insertions(+), 93 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index fad35a7d..0997466c 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -1,46 +1,53 @@
-import style from '../styles/product-detail.module.css'
-
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect } from '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 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 AddToWishlist from './AddToWishlist'
-import Breadcrumb from './Breadcrumb'
-import ProductImage from './Image'
-import Information from './Information'
-import PriceAction from './PriceAction'
-import SimilarBottom from './SimilarBottom'
-import SimilarSide from './SimilarSide'
-import VariantList from './VariantList'
-import { getAuth } from '~/libs/auth'
-
-import { gtagProductDetail } from '@/core/utils/googleTag'
+import style from '../styles/product-detail.module.css';
+
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect } from '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 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 AddToWishlist from './AddToWishlist';
+import Breadcrumb from './Breadcrumb';
+import ProductImage from './Image';
+import Information from './Information';
+import PriceAction from './PriceAction';
+import SimilarBottom from './SimilarBottom';
+import SimilarSide from './SimilarSide';
+import VariantList from './VariantList';
+import { getAuth } from '~/libs/auth';
+
+import { gtagProductDetail } from '@/core/utils/googleTag';
 
 type Props = {
-  product: IProductDetail
-}
+  product: IProductDetail;
+};
 
-const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST
+const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
 
 const ProductDetail = ({ product }: Props) => {
-  const { isDesktop, isMobile } = useDevice()
-  const router = useRouter()
-  const auth = getAuth()
-  const { setAskAdminUrl, askAdminUrl, activeVariantId, setIsApproval, isApproval } = useProductDetail()
+  const { isDesktop, isMobile } = useDevice();
+  const router = useRouter();
+  const auth = getAuth();
+  const {
+    setAskAdminUrl,
+    askAdminUrl,
+    activeVariantId,
+    setIsApproval,
+    isApproval,
+    setSelectedVariant,
+  } = useProductDetail();
 
   useEffect(() => {
     gtagProductDetail(product);
-  },[product])
+  }, [product]);
 
   useEffect(() => {
     const createdAskUrl = whatsappUrl({
@@ -48,76 +55,43 @@ const ProductDetail = ({ product }: Props) => {
       payload: {
         manufacture: product.manufacture.name,
         productName: product.name,
-        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath
+        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath,
       },
-      fallbackUrl: router.asPath
-    })
+      fallbackUrl: router.asPath,
+    });
 
-    setAskAdminUrl(createdAskUrl)
-  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl])
+    setAskAdminUrl(createdAskUrl);
+  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]);
 
   useEffect(() => {
     if (typeof auth === 'object') {
       setIsApproval(auth?.feature?.soApproval);
     }
+    setSelectedVariant(product?.variants[0])
   }, []);
 
   return (
     <>
       <div className='md:flex md:flex-wrap'>
-        <div className="w-full mb-4 md:mb-0 px-4 md:px-0">
+        <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
           <Breadcrumb id={product.id} name={product.name} />
         </div>
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
           <div className='md:flex md:flex-wrap'>
-            <div className="md:w-4/12">
+            <div className='md:w-4/12'>
               <ProductImage product={product} />
             </div>
 
             <div className='md:w-8/12 px-4 md:pl-6'>
               <div className='h-6 md:h-0' />
 
-              <h1 className={style['title']}>
-                {product.name}
-              </h1>
+              <h1 className={style['title']}>{product.name}</h1>
 
               <div className='h-6 md:h-8' />
 
               <Information product={product} />
 
               <div className='h-6' />
-
-              <div className="flex gap-x-5">
-                <Button
-                  as={Link}
-                  href={askAdminUrl}
-                  variant='link'
-                  target='_blank'
-                  colorScheme='gray'
-                  leftIcon={<MessageCircleIcon size={18} />}
-                >
-                  Ask Admin
-                </Button>
-
-                <AddToWishlist productId={product.id} />
-
-                <RWebShare
-                  data={{
-                    text: 'Check out this product',
-                    title: `${product.name} - Indoteknik.com`,
-                    url: SELF_HOST + router.asPath
-                  }}
-                >
-                  <Button
-                    variant='link'
-                    colorScheme='gray'
-                    leftIcon={<Share2Icon size={18} />}
-                  >
-                    Share
-                  </Button>
-                </RWebShare>
-              </div>
-
             </div>
           </div>
 
@@ -129,7 +103,9 @@ const ProductDetail = ({ product }: Props) => {
             )}
 
             <div className='h-4 md:h-10' />
-            {!!activeVariantId && !isApproval && <ProductPromoSection productId={activeVariantId} />}
+            {!!activeVariantId && !isApproval && (
+              <ProductPromoSection productId={activeVariantId} />
+            )}
 
             <div className={style['section-card']}>
               <h2 className={style['heading']}>
@@ -142,27 +118,61 @@ const ProductDetail = ({ product }: Props) => {
             <div className='h-0 md:h-6' />
 
             <div className={style['section-card']}>
-              <h2 className={style['heading']}>
-                Informasi Produk
-              </h2>
+              <h2 className={style['heading']}>Informasi Produk</h2>
               <div className='h-4' />
               <div
                 className={style['description']}
-                dangerouslySetInnerHTML={{ __html: !product.description || product.description == '<p><br></p>' ? 'Belum ada deskripsi' : product.description }}
+                dangerouslySetInnerHTML={{
+                  __html:
+                    !product.description || product.description == '<p><br></p>'
+                      ? 'Belum ada deskripsi'
+                      : product.description,
+                }}
               />
             </div>
           </div>
         </div>
 
         {isDesktop && (
-          <div className="md:w-3/12">
+          <div className='md:w-3/12'>
             <PriceAction product={product} />
+            <div className='flex gap-x-5 items-center justify-center'>
+              <Button
+                as={Link}
+                href={askAdminUrl}
+                variant='link'
+                target='_blank'
+                colorScheme='gray'
+                leftIcon={<MessageCircleIcon size={18} />}
+              >
+                Ask Admin
+              </Button>
+
+              <span>|</span>
+
+              <AddToWishlist productId={product.id} />
+
+              <span>|</span>
+
+              <RWebShare
+                data={{
+                  text: 'Check out this product',
+                  title: `${product.name} - Indoteknik.com`,
+                  url: SELF_HOST + router.asPath,
+                }}
+              >
+                <Button
+                  variant='link'
+                  colorScheme='gray'
+                  leftIcon={<Share2Icon size={18} />}
+                >
+                  Share
+                </Button>
+              </RWebShare>
+            </div>
 
             <div className='h-6' />
-
-            <div className={style['heading']}>
-              Produk Serupa
-            </div>
+            <div className={style['heading']}>Produk Serupa</div>
 
             <div className='h-4' />
 
@@ -171,9 +181,7 @@ const ProductDetail = ({ product }: Props) => {
         )}
 
         <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
-          <div className={style['heading']}>
-            Kamu Mungkin Juga Suka
-          </div>
+          <div className={style['heading']}>Kamu Mungkin Juga Suka</div>
 
           <div className='h-6' />
 
@@ -185,7 +193,7 @@ const ProductDetail = ({ product }: Props) => {
         <div className='h-6 md:h-0' />
       </div>
     </>
-  )
-}
+  );
+};
 
-export default ProductDetail
\ No newline at end of file
+export default ProductDetail;
-- 
cgit v1.2.3