prodcut variant

1 files changed, 103 insertions, 43 deletions

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 09b30a44..2f2caa56 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -1,7 +1,6 @@
-
-import { Box, Skeleton, Tooltip } from '@chakra-ui/react';
+import { Box, Button, Skeleton, Tooltip } from '@chakra-ui/react';
 import { HeartIcon } from '@heroicons/react/24/outline';
-import { Info } from 'lucide-react';
+import { Info, MessageCircleIcon, Share2Icon } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-hot-toast';
@@ -22,6 +21,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl';
 import productSimilarApi from '../../api/productSimilarApi';
 import ProductCard from '../ProductCard';
 import ProductSimilar from '../ProductSimilar';
+import { RWebShare } from 'react-web-share';
 
 const ProductDesktopVariant = ({
   product,
@@ -33,6 +33,8 @@ const ProductDesktopVariant = ({
   const auth = useAuth();
   const { slug } = router.query;
 
+  console.log('ini product variant', product);
+
   const [lowestPrice, setLowestPrice] = useState(null);
 
   const [addCartAlert, setAddCartAlert] = useState(false);
@@ -40,6 +42,8 @@ const ProductDesktopVariant = ({
 
   const { setRefreshCart } = useProductCartContext();
 
+  const [quantityInput, setQuantityInput] = useState(1);
+
   const getLowestPrice = useCallback(() => {
     const lowest = product.price;
     /* const lowest = prices.reduce((lowest, price) => {
@@ -160,24 +164,20 @@ const ProductDesktopVariant = ({
               <Image
                 src={product.image + '?variant=True'}
                 alt={product.name}
-                className='h-[430px] object-contain object-center w-full border border-gray_r-4'
+                className='w-full h-[350px]'
               />
             </div>
 
-            <div className='w-7/12 px-4'>
+            <div className='w-7/12 px-6'>
               <h1 className='text-title-md leading-10 font-medium'>
                 {product?.name}
               </h1>
               <div className='mt-10'>
-                <div className='flex p-3'>
-                  <div className='w-4/12 text-gray_r-12/70'>Nomor SKU</div>
-                  <div className='w-8/12'>SKU-{product.id}</div>
-                </div>
                 <div className='flex p-3 bg-gray_r-4'>
-                  <div className='w-4/12 text-gray_r-12/70'>Part Number</div>
-                  <div className='w-8/12'>{product.code || '-'}</div>
+                  <div className='w-4/12 text-gray_r-12/70'>Item Code</div>
+                  <div className='w-8/12'>{product.code}</div>
                 </div>
-                <div className='flex p-3'>
+                <div className='flex p-3 '>
                   <div className='w-4/12 text-gray_r-12/70'>Manufacture</div>
                   <div className='w-8/12'>
                     {product.manufacture?.name ? (
@@ -216,7 +216,7 @@ const ProductDesktopVariant = ({
                   </div>
                 </div>
 
-                <div className='flex p-3'>
+                {/* <div className='flex p-3'>
                   <div className='w-4/12 text-gray_r-12/70'>Stock</div>
                   <div className='w-8/12'>
                     {!product?.sla && <Skeleton width='10%' height='16px' />}
@@ -239,8 +239,9 @@ const ProductDesktopVariant = ({
                       </a>
                     )}
                   </div>
-                </div>
-                <div className='flex p-3 bg-gray_r-4'>
+                </div> */}
+
+                <div className='flex p-3 '>
                   <div className='w-4/12 text-gray_r-12/70'>Berat Barang</div>
                   <div className='w-8/12'>
                     {product?.weight > 0 && <span>{product?.weight} KG</span>}
@@ -266,20 +267,23 @@ const ProductDesktopVariant = ({
             </div>
 
             <div className='p-4 md:p-6 md:bg-gray-50 rounded-xl'>
-              <h2 className='text-h-md md:text-h-lg font-medium'>Informasi Produk</h2>
+              <h2 className='text-h-md md:text-h-lg font-medium'>
+                Informasi Produk
+              </h2>
               <div className='h-4' />
               <div
                 className='leading-relaxed text-gray-700'
                 dangerouslySetInnerHTML={{
                   __html:
-                    !product.parent.description || product.parent.description == '<p><br></p>'
+                    !product.parent.description ||
+                    product.parent.description == '<p><br></p>'
                       ? 'Belum ada deskripsi'
                       : product.parent.description,
                 }}
               />
             </div>
           </div>
-          <div className='w-[25%]'>
+          <div className='w-[33%]'>
             {product?.isFlashsale > 0 &&
             product?.price?.discountPercentage > 0 ? (
               <>
@@ -338,39 +342,95 @@ const ProductDesktopVariant = ({
               </h3>
             )}
             <div className='flex gap-x-3 mt-4'>
-              <input
-                type='number'
-                className='form-input w-16 py-2 text-center bg-gray_r-1'
-                ref={setVariantQuantityRef(product.id)}
-                defaultValue={1}
-              />
-              <button
-                type='button'
+              <div className='relative flex items-center'>
+                <button
+                  type='button'
+                  className='absolute left-0 px-2 py-1 h-full text-gray-500'
+                  onClick={() =>
+                    setQuantityInput(
+                      String(Math.max(1, Number(quantityInput) - 1))
+                    )
+                  }
+                >
+                  -
+                </button>
+                <input
+                  type='number'
+                  id='quantity'
+                  min={1}
+                  value={quantityInput}
+                  onChange={(e) => setQuantityInput(e.target.value)}
+                  className=' w-24 h-10 text-center border border-gray-300 rounded focus:outline-none'
+                />
+                <button
+                  type='button'
+                  className='absolute right-0 px-2 py-1 h-full text-gray-500'
+                  onClick={() =>
+                    setQuantityInput(String(Number(quantityInput) + 1))
+                  }
+                >
+                  +
+                </button>
+              </div>
+            </div>
+            <div className='flex gap-x-3 mt-4'>
+              <Button
                 onClick={() => handleAddToCart(product.id)}
-                className='flex-1 py-2 btn-yellow'
+                className='w-full'
+                colorScheme='yellow'
               >
                 Keranjang
-              </button>
-              <button
-                type='button'
+              </Button>
+              <Button
                 onClick={() => handleBuy(product.id)}
-                className='flex-1 py-2 btn-solid-red'
+                className='w-full'
+                colorScheme='red'
               >
                 Beli
-              </button>
+              </Button>
             </div>
             <div className='flex mt-4'>
-              <button
-                className='flex items-center gap-x-1'
-                onClick={toggleWishlist}
-              >
-                {wishlist.data?.productTotal > 0 ? (
-                  <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
-                ) : (
-                  <HeartIcon className='w-6' />
-                )}
-                Wishlist
-              </button>
+              <div className='flex gap-x-5 items-center justify-center'>
+                <Button
+                  variant='link'
+                  target='_blank'
+                  colorScheme='gray'
+                  leftIcon={<MessageCircleIcon size={18} />}
+                >
+                  Ask Admin
+                </Button>
+
+                <span>|</span>
+
+                <button
+                  className='flex items-center gap-x-1'
+                  onClick={toggleWishlist}
+                >
+                  {wishlist.data?.productTotal > 0 ? (
+                    <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
+                  ) : (
+                    <HeartIcon className='w-6' />
+                  )}
+                  Wishlist
+                </button>
+
+                <span>|</span>
+
+                <RWebShare
+                  data={{
+                    text: 'Check out this product',
+                    title: `${product.name} - Indoteknik.com`,
+                  }}
+                >
+                  <Button
+                    variant='link'
+                    colorScheme='gray'
+                    leftIcon={<Share2Icon size={18} />}
+                  >
+                    Share
+                  </Button>
+                </RWebShare>
+              </div>
             </div>
             <div className='border border-gray_r-6 overflow-auto mt-4'>
               <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>