Merged in CR/UI (pull request #104)

CR/UI

1 files changed, 69 insertions, 57 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index aa771eab..11c34009 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -24,6 +24,8 @@ import ColumnsSLA from './ColumnsSLA'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
 import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
 import { Info } from 'lucide-react'
+import Breadcrumb from './Breadcrumb'
+import { sellingProductFormat } from '@/core/utils/formatValue'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -89,38 +91,38 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   }
 
   const updateCart = (variantId, quantity, source) => {
-    let dataUpdate
+    let dataUpdate = {
+      productId: variantId,
+      quantity,
+      selected: true,
+      source: source === 'buy' ? 'buy' : null
+    }
+
     if (product.variants.length > 1) {
       let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
-      dataUpdate = {
-        productId: variantId,
-        quantity,
-        programLineId: product.variants[variantIndex].programActive,
-        selected: true,
-        source: source === 'buy' ? 'buy' : null
-      }
+      dataUpdate['programLineId'] = product.variants[variantIndex].programActive
     } else {
-      dataUpdate = {
-        productId: variantId,
-        quantity,
-        programLineId: promotionActiveId,
-        selected: true,
-        source: source === 'buy' ? 'buy' : null
-      }
+      dataUpdate['programLineId'] = promotionActiveId
     }
+
     updateItemCart(dataUpdate)
   }
 
-  const handleAddToCart = (variantId) => {
-    if (!auth) {
-      router.push(`/login?next=/shop/product/${slug}`)
-      return
-    }
+  const redirectToLogin = (action, variantId, quantity) => {
+    const nextURL = `/shop/product/${slug}?action=${action}&variantId=${variantId}&qty=${quantity}`
+    router.push(`/login?next=${encodeURIComponent(nextURL)}`)
+    return true
+  }
 
+  const handleAddToCart = (variantId) => {
     const quantity = variantQuantityRefs.current[variantId].value
 
     if (!validQuantity(quantity)) return
 
+    if (!auth) {
+      return redirectToLogin('add_to_cart', variantId, quantity)
+    }
+
     let source = 'cart'
     updateCart(variantId, quantity, source)
     setRefreshCart(true)
@@ -140,6 +142,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
     const quantity = variantQuantityRefs.current[variant].value
     if (!validQuantity(quantity)) return
 
+    if (!auth) {
+      return redirectToLogin('buy', variant, quantity)
+    }
+
     let source = 'buy'
     updateCart(variant, quantity, source)
     router.push(`/shop/checkout?source=buy`)
@@ -199,47 +205,49 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
+        <Breadcrumb productId={product.id} productName={product.name} />
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
             <div className='w-5/12'>
               <div className='relative mb-2'>
-                {product?.flashSale?.remainingTime > 0 && lowestPrice?.price.discountPercentage > 0 && (
-                  <div className={`absolute bottom-0 w-full`}>
-                    <div className='absolute bottom-0 w-full h-full'>
-                      <ImageNext
-                        src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'}
-                        width={1000}
-                        height={100}
-                      />
-                    </div>
-                    <div className='relative'>
-                      <div className='flex gap-x-2 items-center p-2'>
-                        <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
-                          <span className='text-lg font-bold'>
-                            {Math.floor(product.lowestPrice.discountPercentage)}%
-                          </span>
-                        </div>
-                        <div
-                          className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
-                        >
-                          <ImageNext
-                            src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
-                            width={17}
-                            height={10}
-                          />
-                          <span className='text-white text-lg font-semibold'>
-                            {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
-                              ? product?.flashSale?.tag
-                              : 'FLASH SALE'}
-                          </span>
-                        </div>
-                        <div>
-                          <CountDown2 initialTime={product.flashSale.remainingTime} />
+                {product?.flashSale?.remainingTime > 0 &&
+                  lowestPrice?.price.discountPercentage > 0 && (
+                    <div className={`absolute bottom-0 w-full`}>
+                      <div className='absolute bottom-0 w-full h-full'>
+                        <ImageNext
+                          src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'}
+                          width={1000}
+                          height={100}
+                        />
+                      </div>
+                      <div className='relative'>
+                        <div className='flex gap-x-2 items-center p-2'>
+                          <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
+                            <span className='text-lg font-bold'>
+                              {Math.floor(product.lowestPrice.discountPercentage)}%
+                            </span>
+                          </div>
+                          <div
+                            className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
+                          >
+                            <ImageNext
+                              src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                              width={17}
+                              height={10}
+                            />
+                            <span className='text-white text-lg font-semibold'>
+                              {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
+                                ? product?.flashSale?.tag
+                                : 'FLASH SALE'}
+                            </span>
+                          </div>
+                          <div>
+                            <CountDown2 initialTime={product.flashSale.remainingTime} />
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                )}
+                  )}
                 <Image
                   src={product.image}
                   alt={product.name}
@@ -390,7 +398,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                   ))}
                 </div>
                 <div className='flex'>
-                  <div className='w-3/4 leading-7 product__description'>
+                  <div className='w-3/4 leading-8 product__description'>
                     <TabContent active={informationTab == 'description'}>
                       <span
                         dangerouslySetInnerHTML={{
@@ -411,7 +419,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
             </div>
           </div>
 
-          <div className='w-[25%]'>
+          <div className='w-[30%]'>
             {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
@@ -440,7 +448,11 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                 )}
               </div>
             )} */}
-
+            {product?.qtySold > 0 && (
+              <div className='text-gray_r-9'>
+                {sellingProductFormat(product?.qtySold) + ' Terjual'}
+              </div>
+            )}
             {lowestPrice?.isFlashsale && lowestPrice?.price.discountPercentage > 0 ? (
               <>
                 <div className='flex gap-x-1 items-center mt-2'>