Merged in CR/UI (pull request #101)

CR/UI

6 files changed, 45 insertions, 30 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 511fcdba..c78757a0 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -168,6 +168,16 @@ const Checkout = () => {
       setExpedisi(dataExpedisi)
     }
     loadExpedisi()
+
+    const handlePopState = () => {
+      router.push('/shop/cart')
+    }
+
+    window.onpopstate = handlePopState
+
+    return () => {
+      window.onpopstate = null
+    }
     // voucher()
   }, [])
 
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 701750b2..ab4943eb 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -25,6 +25,7 @@ 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()
@@ -418,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>
             )}
@@ -447,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'>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 70ac1cbc..ef2c0002 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -21,6 +21,7 @@ import ImageNext from 'next/image'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
 import Breadcrumb from './Breadcrumb'
 import useAuth from '@/core/hooks/useAuth'
+import { sellingProductFormat } from '@/core/utils/formatValue'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -62,7 +63,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
     price: getLowestPrice(),
     stock: product.stockTotal,
     weight: product.weight,
-    hasProgram: false
+    hasProgram: false,
+    qtySold: product.qtySold
   })
 
   const variantOptions = product.variants?.map((variant) => {
@@ -105,7 +107,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         stock: variant.stock,
         weight: variant.weight,
         hasProgram: variant.hasProgram,
-        isFlashsale: variant.isFlashsale
+        isFlashsale: variant.isFlashsale,
+        qtySold: variant.qtySold
       }
 
       setActiveVariant(newActiveVariant)
@@ -245,7 +248,9 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           </button>
         </div>
         <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
-
+        {product?.qtySold > 0 && (
+          <div className='text-gray_r-9'>{sellingProductFormat(activeVariant?.qtySold) + ' Terjual'}</div>
+        )}
         {product.variants.length > 1 &&
           activeVariant.price.priceDiscount > 0 &&
           !selectedVariant && (
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 3b96ac32..c60e4f87 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,6 +1,7 @@
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
+import { sellingProductFormat } from '@/core/utils/formatValue'
 import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import ImageNext from 'next/image'
@@ -82,9 +83,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`mb-3 !text-gray_r-12 leading-6 block ${
-              simpleTitle ? 'line-clamp-2 h-12' : 'line-clamp-3 h-[64px]'
-            }`}
+            className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
             title={product?.name}
           >
             {product?.name}
@@ -123,12 +122,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             </div>
           )}
 
-          {product?.stockTotal > 0 && (
-            <div className='flex gap-x-1'>
-              <div className='badge-solid-red'>Ready Stock</div>
-              <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
-            </div>
-          )}
+          <div className='flex w-full items-center gap-x-1 '>
+            {product?.stockTotal > 0 && <div className='badge-solid-red'>Ready Stock</div>}
+            {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
+            {product?.qtySold > 0 && <div className='text-gray_r-9 text-sm'>{sellingProductFormat(product?.qtySold) + ' Terjual'}</div>}
+          </div>
         </div>
       </div>
     )
@@ -186,9 +184,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`mb-3 !text-gray_r-12 leading-6 ${
-              simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
-            }`}
+            className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
           >
             {product?.name}
           </Link>
@@ -229,12 +225,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             </div>
           )}
 
-          {product?.stockTotal > 0 && (
-            <div className='flex gap-x-1'>
-              <div className='badge-solid-red'>Ready Stock</div>
-              <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
-            </div>
-          )}
+          <div className='flex w-full items-center gap-x-1 '>
+            {product?.stockTotal > 0 && <div className='badge-solid-red'>Ready Stock</div>}
+            {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
+            {product?.qtySold > 0 && <div className='text-gray_r-9 text-sm'>{sellingProductFormat(product?.qtySold) + ' Terjual'}</div>}
+          </div>
         </div>
       </div>
     )
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index 14eef0ba..69738b33 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -15,7 +15,7 @@ const orderOptions = [
 const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
   const { query } = router
-  const [order, setOrder] = useState(query?.orderBy)
+  const [order, setOrder] = useState(query?.orderBy || 'popular')
   const [brand, setBrand] = useState(query?.brand)
   const [category, setCategory] = useState(query?.category)
   const [priceFrom, setPriceFrom] = useState(query?.priceFrom)
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index fd75d587..9d59b305 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -23,8 +23,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const { page = 1 } = query
   const [q, setQ] = useState(query?.q || '*')
   const [limit, setLimit] = useState(query?.limit || 30)
+  const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular')
   if (defaultBrand) query.brand = defaultBrand.toLowerCase()
-  const { productSearch } = useProductSearch({ query: { ...query, q, limit } })
+  const { productSearch } = useProductSearch({ query: { ...query, q, limit, orderBy } })
   const [products, setProducts] = useState(null)
   const [spellings, setSpellings] = useState(null)
   const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null)
@@ -70,11 +71,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const brands = []
   for (
     let i = 0;
-    i < productSearch.data?.facetCounts?.facetFields?.manufactureName.length;
+    i < productSearch.data?.facetCounts?.facetFields?.manufactureNameS.length;
     i += 2
   ) {
-    const brand = productSearch.data?.facetCounts?.facetFields?.manufactureName[i]
-    const qty = productSearch.data?.facetCounts?.facetFields?.manufactureName[i + 1]
+    const brand = productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i]
+    const qty = productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i + 1]
     if (qty > 0) {
       brands.push({ brand, qty })
     }
@@ -303,10 +304,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                   <select
                     name='urutan'
                     className='form-input mt-2'
-                    value={router.query?.orderBy || ''}
+                    value={orderBy}
                     onChange={(e) => handleOrderBy(e)}
                   >
-                    <option value=''>Urutkan</option>
                     {orderOptions.map((option, index) => (
                       <option key={index} value={option.value}>
                         {' '}