3 files changed, 24 insertions, 12 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 2f73d124..79e7bb45 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -11,8 +11,10 @@ import { updateItemCart } from '@/core/utils/cart'
 import useVariantPrice from '@/lib/variant/hooks/useVariantPrice'
 import useProductPrice from '../../hooks/useProductPrice'
 import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton'
+import { useRouter } from 'next/router'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
+  const router = useRouter()
   const { productPrice } = useProductPrice({ id: product.id })
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
 
@@ -41,6 +43,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     toast.success('Berhasil menambahkan ke keranjang')
   }
 
+  const handleBuy = (variantId) => {
+    const quantity = variantQuantityRefs.current[variantId].value
+    if (!validQuantity(quantity)) return
+    router.push(`/shop/checkout?productId=${variantId}&quantity=${quantity}`)
+  }
+
   const variantSectionRef = useRef(null)
   const goToVariantSection = () => {
     if (variantSectionRef.current) {
@@ -193,7 +201,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                       >
                         Keranjang
                       </button>
-                      <button type='button' className='flex-1 py-2 btn-solid-red'>
+                      <button
+                        type='button'
+                        onClick={() => handleBuy(variant.id)}
+                        className='flex-1 py-2 btn-solid-red'
+                      >
                         Beli
                       </button>
                     </td>
@@ -264,7 +276,9 @@ const VariantPrice = ({ id }) => {
       {variantPrice?.data?.priceExcludeAfterDiscount > 0 ? (
         currencyFormat(variantPrice?.data?.priceExcludeAfterDiscount)
       ) : (
-        <a href='https://wa.me/' className='text-red_r-11'>Call for price</a>
+        <a href='https://wa.me/' className='text-red_r-11'>
+          Call for price
+        </a>
       )}
     </>
   )
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index b5d7c974..b00d68a4 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -41,11 +41,6 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     }
   )
 
-  const [open, setOpen] = useState(1)
-
-  const handleOpen = (value) => {
-    setOpen(open === value ? 0 : value)
-  }
   const orderOptions = [
     { value: 'price-asc', label: 'Harga Terendah' },
     { value: 'price-desc', label: 'Harga Tertinggi' },
@@ -69,13 +64,10 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     }
   }, [query, products, productSearch])
 
-  if (productSearch.isLoading) {
-    return <ProductSearchSkeleton />
-  }
-
   return (
     <>
       <MobileView>
+        {productSearch.isLoading && <ProductSearchSkeleton />}
         <div className='p-4'>
           <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1>
 
@@ -178,6 +170,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                   <select
                     name='urutan'
                     className='form-input mt-2'
+                    value={router.query?.orderBy || ''}
                     onChange={(e) => handleOrderBy(e)}
                   >
                     <option value=''>Urutkan</option>
@@ -191,6 +184,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 </div>
               </div>
             </div>
+            {productSearch.isLoading && <ProductSearchSkeleton />}
             <div className='grid grid-cols-5 gap-x-3 gap-y-6'>
               {products &&
                 products.map((product) => <ProductCard product={product} key={product.id} />)}
diff --git a/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx b/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx
index fa1e175d..3447df79 100644
--- a/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx
+++ b/src/lib/product/components/Skeleton/ProductSearchSkeleton.jsx
@@ -1,7 +1,11 @@
 import ProductCardSkeleton from '@/core/components/elements/Skeleton/ProductCardSkeleton'
 
 const ProductSearchSkeleton = () => (
-  <div className='p-4 grid grid-cols-2 gap-4'>
+  <div className='p-4 grid grid-cols-2 md:grid-cols-5 gap-4'>
+    <ProductCardSkeleton />
+    <ProductCardSkeleton />
+    <ProductCardSkeleton />
+    <ProductCardSkeleton />
     <ProductCardSkeleton />
     <ProductCardSkeleton />
     <ProductCardSkeleton />