1 files changed, 31 insertions, 3 deletions
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 5b8a4690..46b2b811 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -14,18 +14,25 @@ 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 = () => {
   const router = useRouter()
   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)
 
   const [deleteConfirmation, setDeleteConfirmation] = useState(null)
 
+  const [productRecomendation, setProductRecomendation] = useState(null);
+
   useEffect(() => {
     if (cart.data && !products) {
       const productsWithQuantity = cart.data.map((product) => {
@@ -67,6 +74,16 @@ const Cart = () => {
     setTotalDiscountAmount(calculateTotalDiscountAmount)
   }, [products])
 
+  useEffect(() => {
+    const LoadProductSImilar = async () => {
+      const productLoad = await productSearchApi({ query: `q=${products?.[0].parent.name}&limit=10` })
+
+      setProductRecomendation(productLoad);
+
+    }
+    if(products?.length > 0) LoadProductSImilar()
+  },[products])
+
   const updateQuantity = (value, productId, operation = '') => {
     let productIndex = products.findIndex((product) => product.id == productId)
     if (productIndex < 0) return
@@ -284,8 +301,8 @@ const Cart = () => {
       </MobileView>
 
       <DesktopView>
-        <div className='container mx-auto py-10 flex'>
-          <div className='w-9/12 border border-gray_r-6 rounded bg-white p-4 pt-6'>
+        <div className='container mx-auto py-10 grid grid-cols-12'>
+          <div className='col-span-9 border border-gray_r-6 rounded bg-white p-4 pt-6'>
             <h1 className='text-title-sm font-semibold mb-6'>Daftar Produk Belanja</h1>
 
             <table className='table-cart'>
@@ -414,7 +431,7 @@ const Cart = () => {
             </div>
           </div>
 
-          <div className='w-3/12 pl-4'>
+          <div className='col-span-3 pl-4'>
             <div className='sticky top-32 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'>
@@ -448,7 +465,18 @@ const Cart = () => {
               </div>
             </div>
           </div>
+
+          <div className='col-span-9 pt-2 pb-6 mt-6'>
+          <h1 className='text-title-sm font-semibold mb-6'>Product Yang Mungkin Kamu Suka</h1>
+            <div className='grid grid-cols-5 gap-x-3 gap-y-6'>
+              {productRecomendation &&
+                productRecomendation.response.products.map((product) => (
+                  <ProductCard product={product} key={product.id} />
+                ))}
+            </div>
+          </div>
         </div>
+       
       </DesktopView>
     </>
   )