fix bug cart and search

2 files changed, 46 insertions, 42 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 46b2b811..49fa46e6 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -14,9 +14,7 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'
 import Alert from '@/core/components/elements/Alert/Alert'
 import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
-import ProductSearch from '@/lib/product/components/ProductSearch'
 import ProductCard from '@/lib/product/components/ProductCard'
-import useProductSearch from '@/lib/product/hooks/useProductSearch'
 import productSearchApi from '@/lib/product/api/productSearchApi'
 
 const Cart = () => {
@@ -24,7 +22,6 @@ const Cart = () => {
   const [products, setProducts] = useState(null)
   const { cart } = useCart({ enabled: !products })
 
-  const {productSearch} = useProductSearch({'query':{'q':products?.[0].parent.name,'limit' : '10'}});
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
   const [totalTaxAmount, setTotalTaxAmount] = useState(0)
   const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
@@ -76,7 +73,8 @@ const Cart = () => {
 
   useEffect(() => {
     const LoadProductSImilar = async () => {
-      const productLoad = await productSearchApi({ query: `q=${products?.[0].parent.name}&limit=10` })
+      const randProductIndex = Math.floor(Math.random() * products.length)
+      const productLoad = await productSearchApi({ query: `q=${products?.[randProductIndex].parent.name}&limit=10` })
 
       setProductRecomendation(productLoad);
 
@@ -432,7 +430,7 @@ const Cart = () => {
           </div>
 
           <div className='col-span-3 pl-4'>
-            <div className='sticky top-32 w-full p-4 rounded border border-gray_r-6 bg-white'>
+            <div className='sticky top-48 w-full p-4 rounded border border-gray_r-6 bg-white'>
               <h1 className='text-title-sm font-semibold mb-6'>Ringkasan Belanja</h1>
               <div className='flex justify-between mb-4'>
                 <div className='text-gray_r-11'>
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 53355e77..ef070dcd 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -1,42 +1,6 @@
 import axios from 'axios'
 import camelcaseObjectDeep from 'camelcase-object-deep'
 
-const productResponseMap = (products) => {
-  return products.map((product) => {
-    let productMapped = {
-      id: product.product_id_i || '',
-      image: product.image_s || '',
-      code: product.default_code_s ||  '',
-      name: product.name_s ||  '',
-      lowestPrice: {
-        price: product.price_f || 0,
-        priceDiscount: product.price_discount_f || 0,
-        discountPercentage: product.discount_f || 0
-      },
-      variantTotal: product.variant_total_i || 0,
-      stockTotal: product.stock_total_f || 0,
-      weight: product.weight_f || 0,
-      manufacture: {},
-      categories: []
-    }
-
-    if (product.manufacture_id_i && product.manufacture_name_s) {
-      productMapped.manufacture = {
-        id: product.manufacture_id_i || '',
-        name: product.manufacture_name_s || ''
-      }
-    }
-
-    productMapped.categories = [
-      {
-        id: product.category_id_i || '',
-        name: product.category_name_s || ''
-      }
-    ]
-    return productMapped
-  })
-}
-
 export default async function handler(req, res) {
   const {
     q = '*',
@@ -75,7 +39,7 @@ export default async function handler(req, res) {
     'indent=true',
     `facet.query=${q}`,
     `q.op=${operation}`,
-    `q=${q}`,
+    `q=${escapeSolrQuery(q)}`,
     `start=${offset}`,
     `rows=${limit}`,
     `sort=product_rating_f DESC ${paramOrderBy}`,
@@ -102,3 +66,45 @@ export default async function handler(req, res) {
     res.status(400).json({ error: error.message })
   }
 }
+
+const escapeSolrQuery = (query) => {
+  const specialChars = /[\]\[{}()"\\]/g
+  const escapedQuery = query.replace(specialChars, '\\$&')
+  return escapedQuery
+}
+
+const productResponseMap = (products) => {
+  return products.map((product) => {
+    let productMapped = {
+      id: product.product_id_i || '',
+      image: product.image_s || '',
+      code: product.default_code_s || '',
+      name: product.name_s || '',
+      lowestPrice: {
+        price: product.price_f || 0,
+        priceDiscount: product.price_discount_f || 0,
+        discountPercentage: product.discount_f || 0
+      },
+      variantTotal: product.variant_total_i || 0,
+      stockTotal: product.stock_total_f || 0,
+      weight: product.weight_f || 0,
+      manufacture: {},
+      categories: []
+    }
+
+    if (product.manufacture_id_i && product.manufacture_name_s) {
+      productMapped.manufacture = {
+        id: product.manufacture_id_i || '',
+        name: product.manufacture_name_s || ''
+      }
+    }
+
+    productMapped.categories = [
+      {
+        id: product.category_id_i || '',
+        name: product.category_name_s || ''
+      }
+    ]
+    return productMapped
+  })
+}