From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src/lib/cart/components/Cart.jsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/lib/cart/components/Cart.jsx

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
new file mode 100644
index 00000000..5f9ae1c0
--- /dev/null
+++ b/src/lib/cart/components/Cart.jsx
@@ -0,0 +1,30 @@
+import Link from "@/core/components/elements/Link/Link"
+import useCart from "../hooks/useCart"
+import Image from "@/core/components/elements/Image/Image"
+
+const Cart = () => {
+  const { cart } = useCart()
+  
+  return (
+    <div className="p-4">
+      <div className="flex justify-between mb-4">
+        <h1 className="font-semibold">Daftar Produk Belanja</h1>
+        <Link href="/">Cari Produk Lain</Link>
+      </div>
+      <div className="flex flex-col gap-y-4">
+        { cart.data?.map((product) => (
+          <div key={product.id} className="flex">
+            <div className="w-4/12">
+              <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md" />
+            </div>
+            <div className="flex-1 px-2">
+              <div>{ product?.parent?.name }</div>
+            </div>
+          </div>
+        )) }
+      </div>
+    </div>
+  )
+}
+
+export default Cart
\ No newline at end of file
-- 
cgit v1.2.3


From d22df6bd30b8ed4bcfa938dcbbedc5fc376c2304 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 10:49:35 +0700
Subject: cart refactor

---
 src/lib/cart/components/Cart.jsx | 200 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 190 insertions(+), 10 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 5f9ae1c0..3dd54429 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -1,28 +1,208 @@
 import Link from "@/core/components/elements/Link/Link"
 import useCart from "../hooks/useCart"
 import Image from "@/core/components/elements/Image/Image"
+import currencyFormat from "@/core/utils/currencyFormat"
+import { useEffect, useState } from "react"
+import { getItemCart, updateItemCart } from "@/core/utils/cart"
+import { CheckIcon, RectangleGroupIcon } from "@heroicons/react/24/outline"
+import { createSlug } from "@/core/utils/slug"
+import { useRouter } from "next/router"
 
 const Cart = () => {
-  const { cart } = useCart()
+  const router = useRouter()
+  const [ products, setProducts ] = useState(null)
+  const { cart } = useCart({ enabled: !products })
+
+  const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0)
+  const [ totalTaxAmount, setTotalTaxAmount ] = useState(0)
+  const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0)
+
+  useEffect(() => {
+    if (cart.data && !products) {
+      const productsWithQuantity = cart.data.map((product) => {
+        const productInCart = getItemCart({ productId: product.id })
+        if (!productInCart) return
+        return {
+          ...product,
+          quantity: productInCart.quantity,
+          selected: productInCart.selected
+        }
+      })
+      setProducts(productsWithQuantity)
+    }
+  }, [cart, products])
+
+  useEffect(() => {
+    if (!products) return 
+
+    let calculateTotalPriceBeforeTax = 0
+    let calculateTotalTaxAmount = 0
+    let calculateTotalDiscountAmount = 0
+    for (const product of products) {
+      if (product.quantity == '') continue
+      updateItemCart({
+        productId: product.id,
+        quantity: product.quantity,
+        selected: product.selected
+      })
+      
+      if (!product.selected) continue
+      let priceBeforeTax = product.price.price / 1.11 
+      calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity
+      calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity
+      calculateTotalDiscountAmount += (product.price.price - product.price.priceDiscount) * product.quantity
+    }
+    setTotalPriceBeforeTax(calculateTotalPriceBeforeTax)
+    setTotalTaxAmount(calculateTotalTaxAmount)
+    setTotalDiscountAmount(calculateTotalDiscountAmount)
+  }, [products])
+
+  const updateQuantity = (value, productId, operation = '') => {
+    let productIndex = products.findIndex((product) => product.id == productId)
+    if (productIndex < 0) return
+
+    let productsToUpdate = products
+    let quantity = productsToUpdate[productIndex].quantity
+    if (value != '' && isNaN(parseInt(value))) return
+    value = value != '' ? parseInt(value) : ''
+    switch (operation) {
+      case 'PLUS':
+        quantity += value
+        break
+      case 'MINUS':
+        if ((quantity - value) < 1) return
+        quantity -= value
+        break
+      case 'BLUR':
+        if (value != '') return
+        quantity = 1
+        break
+      default:
+        quantity = value
+        break
+    }
+    productsToUpdate[productIndex].quantity = quantity
+    setProducts([ ...productsToUpdate ])
+  }
+
+  const toggleSelected = (productId) => {
+    let productIndex = products.findIndex((product) => product.id == productId)
+    if (productIndex < 0) return
+
+    let productsToUpdate = products
+    productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected
+    setProducts([ ...productsToUpdate ])
+  }
+
+  const selectedProduct = () => {
+    if (!products) return []
+    return products.filter((product) => product.selected == true)
+  }
   
   return (
-    <div className="p-4">
-      <div className="flex justify-between mb-4">
+    <div className="pt-6">
+      <div className="flex justify-between mb-4 px-4">
         <h1 className="font-semibold">Daftar Produk Belanja</h1>
         <Link href="/">Cari Produk Lain</Link>
       </div>
-      <div className="flex flex-col gap-y-4">
-        { cart.data?.map((product) => (
+      <div className="flex flex-col gap-y-4 px-4">
+        { products?.map((product) => (
           <div key={product.id} className="flex">
-            <div className="w-4/12">
-              <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md" />
-            </div>
-            <div className="flex-1 px-2">
-              <div>{ product?.parent?.name }</div>
+            <button
+              type="button" 
+              className="flex items-center mr-2"
+              onClick={() => toggleSelected(product.id)}
+            >
+              { !product.selected && (
+                <div className="w-5 h-5 border border-gray_r-11 rounded" />
+              ) }
+              { product.selected && (
+                <CheckIcon className="border bg-red_r-10 w-5 text-white" /> 
+              ) }
+            </button>
+            <Link 
+              href={createSlug('/shop/product/', product.parent.name, product.parent.id)} 
+              className="w-3/12 flex-shrink-0"
+            >
+              <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-40 w-full rounded-md" />
+            </Link>
+            <div className="flex-1 px-2 text-caption-1">
+              <Link 
+                href={createSlug('/shop/product/', product.parent.name, product.parent.id)} 
+                className="line-clamp-2 leading-6 !text-gray_r-12 font-normal"
+              >
+                { product?.parent?.name }
+              </Link>
+              <div className="text-gray_r-11 mt-1">{ product.code }</div>
+              { product?.price?.discountPercentage > 0 && (
+                <div className="flex gap-x-1 items-center mt-3">
+                  <div className="text-gray_r-11 line-through text-caption-2">
+                    {currencyFormat(product?.price?.price)}
+                  </div>
+                  <div className="badge-solid-red">
+                    {product?.price?.discountPercentage}%
+                  </div>
+                </div>
+              ) }
+              <div className="font-normal mt-1">
+                { currencyFormat(product?.price?.priceDiscount) }
+              </div>
+              <div className="flex justify-between items-center mt-1">
+                <div className="text-red_r-11 font-medium">
+                  { currencyFormat(product?.price?.priceDiscount * product.quantity) }
+                </div>
+                <div className="flex gap-x-2">
+                  <button 
+                    type="button" 
+                    className="btn-light px-2 py-1"
+                    onClick={() => updateQuantity(1, product.id, 'MINUS')}
+                  >
+                    -
+                  </button>
+                  <input 
+                    className="form-input w-10 border-0 border-b rounded-none py-1 px-0 text-center" 
+                    value={product.quantity} 
+                    onChange={(e) => updateQuantity(e.target.value, product.id)}
+                    onBlur={(e) => updateQuantity(e.target.value, product.id, 'BLUR')}
+                  />
+                  <button 
+                    type="button" 
+                    className="btn-light px-2 py-1"
+                    onClick={() => updateQuantity(1, product.id, 'PLUS')}
+                  >
+                    +
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
         )) }
       </div>
+      <div className="sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white">
+        <div className="flex justify-between mb-4">
+          <div className="text-gray_r-11">
+            Total: <span className="text-red_r-11 font-semibold">{ currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) }</span>
+          </div>
+        </div>
+        <div className="flex gap-x-3">
+          <button 
+            type="button" 
+            className="btn-yellow flex-1"
+            disabled={selectedProduct().length == 0}
+            onClick={() => router.push('/shop/quotation')}
+          >
+            Quotation
+          </button>
+          <button 
+            type="button" 
+            className="btn-solid-red flex-1"
+            disabled={selectedProduct().length == 0}
+            onClick={() => router.push('/shop/checkout')}
+          >
+            Checkout
+          </button>
+        </div>
+      </div>
     </div>
   )
 }
-- 
cgit v1.2.3


From 525166e62b793b351d1a6be2421c0a33b22f7b7b Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 11:35:25 +0700
Subject: cart refactor

---
 src/lib/cart/components/Cart.jsx | 77 ++++++++++++++++++++++++++++++++--------
 1 file changed, 63 insertions(+), 14 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 3dd54429..69b4ded4 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -3,10 +3,12 @@ import useCart from "../hooks/useCart"
 import Image from "@/core/components/elements/Image/Image"
 import currencyFormat from "@/core/utils/currencyFormat"
 import { useEffect, useState } from "react"
-import { getItemCart, updateItemCart } from "@/core/utils/cart"
-import { CheckIcon, RectangleGroupIcon } from "@heroicons/react/24/outline"
+import { deleteItemCart, getItemCart, updateItemCart } from "@/core/utils/cart"
+import { CheckIcon, RectangleGroupIcon, TrashIcon } from "@heroicons/react/24/outline"
 import { createSlug } from "@/core/utils/slug"
 import { useRouter } from "next/router"
+import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
+import { toast } from "react-hot-toast"
 
 const Cart = () => {
   const router = useRouter()
@@ -17,6 +19,8 @@ const Cart = () => {
   const [ totalTaxAmount, setTotalTaxAmount ] = useState(0)
   const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0)
 
+  const [ deleteConfirmation, setDeleteConfirmation ] = useState(null)
+
   useEffect(() => {
     if (cart.data && !products) {
       const productsWithQuantity = cart.data.map((product) => {
@@ -98,6 +102,14 @@ const Cart = () => {
     if (!products) return []
     return products.filter((product) => product.selected == true)
   }
+
+  const deleteProduct = (productId) => {
+    const productsToUpdate = products.filter((product) => product.id != productId)
+    deleteItemCart({ productId })
+    setDeleteConfirmation(null)
+    setProducts([...productsToUpdate])
+    toast.success('Berhasil menghapus barang dari keranjang')
+  }
   
   return (
     <div className="pt-6">
@@ -105,35 +117,38 @@ const Cart = () => {
         <h1 className="font-semibold">Daftar Produk Belanja</h1>
         <Link href="/">Cari Produk Lain</Link>
       </div>
+
       <div className="flex flex-col gap-y-4 px-4">
         { products?.map((product) => (
-          <div key={product.id} className="flex">
+          <div key={product?.id} className="flex">
             <button
               type="button" 
               className="flex items-center mr-2"
               onClick={() => toggleSelected(product.id)}
             >
-              { !product.selected && (
+              { !product?.selected && (
                 <div className="w-5 h-5 border border-gray_r-11 rounded" />
               ) }
-              { product.selected && (
+              { product?.selected && (
                 <CheckIcon className="border bg-red_r-10 w-5 text-white" /> 
               ) }
             </button>
             <Link 
-              href={createSlug('/shop/product/', product.parent.name, product.parent.id)} 
+              href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
               className="w-3/12 flex-shrink-0"
             >
               <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-40 w-full rounded-md" />
             </Link>
             <div className="flex-1 px-2 text-caption-1">
               <Link 
-                href={createSlug('/shop/product/', product.parent.name, product.parent.id)} 
+                href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
                 className="line-clamp-2 leading-6 !text-gray_r-12 font-normal"
               >
                 { product?.parent?.name }
               </Link>
-              <div className="text-gray_r-11 mt-1">{ product.code }</div>
+              <div className="text-gray_r-11 mt-1">
+                { product?.code } {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
+              </div>
               { product?.price?.discountPercentage > 0 && (
                 <div className="flex gap-x-1 items-center mt-3">
                   <div className="text-gray_r-11 line-through text-caption-2">
@@ -149,35 +164,43 @@ const Cart = () => {
               </div>
               <div className="flex justify-between items-center mt-1">
                 <div className="text-red_r-11 font-medium">
-                  { currencyFormat(product?.price?.priceDiscount * product.quantity) }
+                  { currencyFormat(product?.price?.priceDiscount * product?.quantity) }
                 </div>
                 <div className="flex gap-x-2">
                   <button 
                     type="button" 
                     className="btn-light px-2 py-1"
-                    onClick={() => updateQuantity(1, product.id, 'MINUS')}
+                    onClick={() => updateQuantity(1, product?.id, 'MINUS')}
                   >
                     -
                   </button>
                   <input 
                     className="form-input w-10 border-0 border-b rounded-none py-1 px-0 text-center" 
-                    value={product.quantity} 
-                    onChange={(e) => updateQuantity(e.target.value, product.id)}
-                    onBlur={(e) => updateQuantity(e.target.value, product.id, 'BLUR')}
+                    type="number"
+                    value={product?.quantity} 
+                    onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                    onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
                   />
                   <button 
                     type="button" 
                     className="btn-light px-2 py-1"
-                    onClick={() => updateQuantity(1, product.id, 'PLUS')}
+                    onClick={() => updateQuantity(1, product?.id, 'PLUS')}
                   >
                     +
                   </button>
+                  <button 
+                    className="btn-red p-1" 
+                    onClick={() => setDeleteConfirmation(product)}
+                  >
+                    <TrashIcon className="w-4" />
+                  </button>
                 </div>
               </div>
             </div>
           </div>
         )) }
       </div>
+
       <div className="sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white">
         <div className="flex justify-between mb-4">
           <div className="text-gray_r-11">
@@ -203,6 +226,32 @@ const Cart = () => {
           </button>
         </div>
       </div>
+
+      <BottomPopup
+        active={deleteConfirmation}
+        close={() => setDeleteConfirmation(null)}
+        title="Hapus dari Keranjang"
+      >
+        <div className="leading-7 text-gray_r-12/80">
+          Apakah anda yakin menghapus barang <span className="underline">{deleteConfirmation?.name}</span> dari keranjang?
+        </div>
+        <div className="flex mt-6 mb-2 gap-x-4">
+          <button 
+            className="btn-light flex-1" 
+            type="button"
+            onClick={() => setDeleteConfirmation(null)}
+          >
+            Batal
+          </button>
+          <button 
+            className="btn-solid-red flex-1" 
+            type="button"
+            onClick={() => deleteProduct(deleteConfirmation?.id)}
+          >
+            Ya, Hapus
+          </button>
+        </div>
+      </BottomPopup>
     </div>
   )
 }
-- 
cgit v1.2.3


From 58ab91f8a99a79e0dbae33cf71830e4d1646e264 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 12:00:29 +0700
Subject: cart refactor

---
 src/lib/cart/components/Cart.jsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 69b4ded4..0b6ea768 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -204,7 +204,10 @@ const Cart = () => {
       <div className="sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white">
         <div className="flex justify-between mb-4">
           <div className="text-gray_r-11">
-            Total: <span className="text-red_r-11 font-semibold">{ currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) }</span>
+            Total: 
+            <span className="text-red_r-11 font-semibold">
+              { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : ' - ' }
+            </span>
           </div>
         </div>
         <div className="flex gap-x-3">
@@ -235,20 +238,20 @@ const Cart = () => {
         <div className="leading-7 text-gray_r-12/80">
           Apakah anda yakin menghapus barang <span className="underline">{deleteConfirmation?.name}</span> dari keranjang?
         </div>
-        <div className="flex mt-6 mb-2 gap-x-4">
+        <div className="flex mt-6 gap-x-4">
           <button 
-            className="btn-light flex-1" 
+            className="btn-solid-red flex-1" 
             type="button"
-            onClick={() => setDeleteConfirmation(null)}
+            onClick={() => deleteProduct(deleteConfirmation?.id)}
           >
-            Batal
+            Ya, Hapus
           </button>
           <button 
-            className="btn-solid-red flex-1" 
+            className="btn-light flex-1" 
             type="button"
-            onClick={() => deleteProduct(deleteConfirmation?.id)}
+            onClick={() => setDeleteConfirmation(null)}
           >
-            Ya, Hapus
+            Batal
           </button>
         </div>
       </BottomPopup>
-- 
cgit v1.2.3


From fdefe7cfe899125a9bd553b542976eed0de919c1 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 13:09:22 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 0b6ea768..4b9dd41f 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -166,11 +166,12 @@ const Cart = () => {
                 <div className="text-red_r-11 font-medium">
                   { currencyFormat(product?.price?.priceDiscount * product?.quantity) }
                 </div>
-                <div className="flex gap-x-2">
+                <div className="flex gap-x-1">
                   <button 
                     type="button" 
                     className="btn-light px-2 py-1"
                     onClick={() => updateQuantity(1, product?.id, 'MINUS')}
+                    disabled={product?.quantity == 1}
                   >
                     -
                   </button>
@@ -189,7 +190,7 @@ const Cart = () => {
                     +
                   </button>
                   <button 
-                    className="btn-red p-1" 
+                    className="btn-red p-1 ml-1" 
                     onClick={() => setDeleteConfirmation(product)}
                   >
                     <TrashIcon className="w-4" />
-- 
cgit v1.2.3


From e33a330786ffbfcd774de00dc697c6dff47faf27 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 14:20:44 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 4b9dd41f..bb1f21f6 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -9,6 +9,7 @@ import { createSlug } from "@/core/utils/slug"
 import { useRouter } from "next/router"
 import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
 import { toast } from "react-hot-toast"
+import Spinner from "@/core/components/elements/Spinner/Spinner"
 
 const Cart = () => {
   const router = useRouter()
@@ -119,6 +120,11 @@ const Cart = () => {
       </div>
 
       <div className="flex flex-col gap-y-4 px-4">
+        { cart.isLoading && (
+          <div className="flex justify-center my-4">
+            <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+          </div>
+        ) }
         { products?.map((product) => (
           <div key={product?.id} className="flex">
             <button
-- 
cgit v1.2.3


From 3f2ff1475676ba47a841796e39e7d17d627e5356 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 14:46:24 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index bb1f21f6..e7606582 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -141,7 +141,7 @@ const Cart = () => {
             </button>
             <Link 
               href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
-              className="w-3/12 flex-shrink-0"
+              className="w-[30%] flex-shrink-0"
             >
               <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-40 w-full rounded-md" />
             </Link>
@@ -182,7 +182,7 @@ const Cart = () => {
                     -
                   </button>
                   <input 
-                    className="form-input w-10 border-0 border-b rounded-none py-1 px-0 text-center" 
+                    className="form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center" 
                     type="number"
                     value={product?.quantity} 
                     onChange={(e) => updateQuantity(e.target.value, product?.id)}
@@ -213,7 +213,7 @@ const Cart = () => {
           <div className="text-gray_r-11">
             Total: 
             <span className="text-red_r-11 font-semibold">
-              { selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : ' - ' }
+              &nbsp;{ selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : '-' }
             </span>
           </div>
         </div>
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/cart/components/Cart.jsx | 216 ++++++++++++++++++++-------------------
 1 file changed, 110 insertions(+), 106 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index e7606582..df74bed6 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -1,26 +1,26 @@
-import Link from "@/core/components/elements/Link/Link"
-import useCart from "../hooks/useCart"
-import Image from "@/core/components/elements/Image/Image"
-import currencyFormat from "@/core/utils/currencyFormat"
-import { useEffect, useState } from "react"
-import { deleteItemCart, getItemCart, updateItemCart } from "@/core/utils/cart"
-import { CheckIcon, RectangleGroupIcon, TrashIcon } from "@heroicons/react/24/outline"
-import { createSlug } from "@/core/utils/slug"
-import { useRouter } from "next/router"
-import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
-import { toast } from "react-hot-toast"
-import Spinner from "@/core/components/elements/Spinner/Spinner"
+import Link from '@/core/components/elements/Link/Link'
+import useCart from '../hooks/useCart'
+import Image from '@/core/components/elements/Image/Image'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { useEffect, useState } from 'react'
+import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { CheckIcon, RectangleGroupIcon, TrashIcon } from '@heroicons/react/24/outline'
+import { createSlug } from '@/core/utils/slug'
+import { useRouter } from 'next/router'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { toast } from 'react-hot-toast'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
 
 const Cart = () => {
   const router = useRouter()
-  const [ products, setProducts ] = useState(null)
+  const [products, setProducts] = useState(null)
   const { cart } = useCart({ enabled: !products })
 
-  const [ totalPriceBeforeTax, setTotalPriceBeforeTax ] = useState(0)
-  const [ totalTaxAmount, setTotalTaxAmount ] = useState(0)
-  const [ totalDiscountAmount, setTotalDiscountAmount ] = useState(0)
+  const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
+  const [totalTaxAmount, setTotalTaxAmount] = useState(0)
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
 
-  const [ deleteConfirmation, setDeleteConfirmation ] = useState(null)
+  const [deleteConfirmation, setDeleteConfirmation] = useState(null)
 
   useEffect(() => {
     if (cart.data && !products) {
@@ -38,7 +38,7 @@ const Cart = () => {
   }, [cart, products])
 
   useEffect(() => {
-    if (!products) return 
+    if (!products) return
 
     let calculateTotalPriceBeforeTax = 0
     let calculateTotalTaxAmount = 0
@@ -50,12 +50,13 @@ const Cart = () => {
         quantity: product.quantity,
         selected: product.selected
       })
-      
+
       if (!product.selected) continue
-      let priceBeforeTax = product.price.price / 1.11 
+      let priceBeforeTax = product.price.price / 1.11
       calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity
       calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity
-      calculateTotalDiscountAmount += (product.price.price - product.price.priceDiscount) * product.quantity
+      calculateTotalDiscountAmount +=
+        (product.price.price - product.price.priceDiscount) * product.quantity
     }
     setTotalPriceBeforeTax(calculateTotalPriceBeforeTax)
     setTotalTaxAmount(calculateTotalTaxAmount)
@@ -75,7 +76,7 @@ const Cart = () => {
         quantity += value
         break
       case 'MINUS':
-        if ((quantity - value) < 1) return
+        if (quantity - value < 1) return
         quantity -= value
         break
       case 'BLUR':
@@ -87,7 +88,7 @@ const Cart = () => {
         break
     }
     productsToUpdate[productIndex].quantity = quantity
-    setProducts([ ...productsToUpdate ])
+    setProducts([...productsToUpdate])
   }
 
   const toggleSelected = (productId) => {
@@ -96,7 +97,7 @@ const Cart = () => {
 
     let productsToUpdate = products
     productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected
-    setProducts([ ...productsToUpdate ])
+    setProducts([...productsToUpdate])
   }
 
   const selectedProduct = () => {
@@ -111,124 +112,126 @@ const Cart = () => {
     setProducts([...productsToUpdate])
     toast.success('Berhasil menghapus barang dari keranjang')
   }
-  
+
   return (
-    <div className="pt-6">
-      <div className="flex justify-between mb-4 px-4">
-        <h1 className="font-semibold">Daftar Produk Belanja</h1>
-        <Link href="/">Cari Produk Lain</Link>
+    <div className='pt-6'>
+      <div className='flex justify-between mb-4 px-4'>
+        <h1 className='font-semibold'>Daftar Produk Belanja</h1>
+        <Link href='/'>Cari Produk Lain</Link>
       </div>
 
-      <div className="flex flex-col gap-y-4 px-4">
-        { cart.isLoading && (
-          <div className="flex justify-center my-4">
-            <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
+      <div className='flex flex-col gap-y-4 px-4'>
+        {cart.isLoading && (
+          <div className='flex justify-center my-4'>
+            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
           </div>
-        ) }
-        { products?.map((product) => (
-          <div key={product?.id} className="flex">
+        )}
+        {products?.map((product) => (
+          <div key={product?.id} className='flex'>
             <button
-              type="button" 
-              className="flex items-center mr-2"
+              type='button'
+              className='flex items-center mr-2'
               onClick={() => toggleSelected(product.id)}
             >
-              { !product?.selected && (
-                <div className="w-5 h-5 border border-gray_r-11 rounded" />
-              ) }
-              { product?.selected && (
-                <CheckIcon className="border bg-red_r-10 w-5 text-white" /> 
-              ) }
+              {!product?.selected && <div className='w-5 h-5 border border-gray_r-11 rounded' />}
+              {product?.selected && <CheckIcon className='border bg-red_r-10 w-5 text-white' />}
             </button>
-            <Link 
-              href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
-              className="w-[30%] flex-shrink-0"
+            <Link
+              href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
+              className='w-[30%] flex-shrink-0'
             >
-              <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-40 w-full rounded-md" />
+              <Image
+                src={product?.parent?.image}
+                alt={product?.name}
+                className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+              />
             </Link>
-            <div className="flex-1 px-2 text-caption-1">
-              <Link 
-                href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)} 
-                className="line-clamp-2 leading-6 !text-gray_r-12 font-normal"
+            <div className='flex-1 px-2 text-caption-1'>
+              <Link
+                href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
+                className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
               >
-                { product?.parent?.name }
+                {product?.parent?.name}
               </Link>
-              <div className="text-gray_r-11 mt-1">
-                { product?.code } {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
+              <div className='text-gray_r-11 mt-1'>
+                {product?.code}{' '}
+                {product?.attributes.length > 0 ? `| ${product?.attributes.join(', ')}` : ''}
               </div>
-              { product?.price?.discountPercentage > 0 && (
-                <div className="flex gap-x-1 items-center mt-3">
-                  <div className="text-gray_r-11 line-through text-caption-2">
+              {product?.price?.discountPercentage > 0 && (
+                <div className='flex gap-x-1 items-center mt-3'>
+                  <div className='text-gray_r-11 line-through text-caption-2'>
                     {currencyFormat(product?.price?.price)}
                   </div>
-                  <div className="badge-solid-red">
-                    {product?.price?.discountPercentage}%
-                  </div>
+                  <div className='badge-solid-red'>{product?.price?.discountPercentage}%</div>
                 </div>
-              ) }
-              <div className="font-normal mt-1">
-                { currencyFormat(product?.price?.priceDiscount) }
+              )}
+              <div className='font-normal mt-1'>
+                {currencyFormat(product?.price?.priceDiscount)}
               </div>
-              <div className="flex justify-between items-center mt-1">
-                <div className="text-red_r-11 font-medium">
-                  { currencyFormat(product?.price?.priceDiscount * product?.quantity) }
+              <div className='flex justify-between items-center mt-1'>
+                <div className='text-red_r-11 font-medium'>
+                  {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                 </div>
-                <div className="flex gap-x-1">
-                  <button 
-                    type="button" 
-                    className="btn-light px-2 py-1"
+                <div className='flex gap-x-1'>
+                  <button
+                    type='button'
+                    className='btn-light px-2 py-1'
                     onClick={() => updateQuantity(1, product?.id, 'MINUS')}
                     disabled={product?.quantity == 1}
                   >
                     -
                   </button>
-                  <input 
-                    className="form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center" 
-                    type="number"
-                    value={product?.quantity} 
+                  <input
+                    className='form-input w-6 border-0 border-b rounded-none py-1 px-0 text-center'
+                    type='number'
+                    value={product?.quantity}
                     onChange={(e) => updateQuantity(e.target.value, product?.id)}
                     onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
                   />
-                  <button 
-                    type="button" 
-                    className="btn-light px-2 py-1"
+                  <button
+                    type='button'
+                    className='btn-light px-2 py-1'
                     onClick={() => updateQuantity(1, product?.id, 'PLUS')}
                   >
                     +
                   </button>
-                  <button 
-                    className="btn-red p-1 ml-1" 
+                  <button
+                    className='btn-red p-1 ml-1'
                     onClick={() => setDeleteConfirmation(product)}
                   >
-                    <TrashIcon className="w-4" />
+                    <TrashIcon className='w-4' />
                   </button>
                 </div>
               </div>
             </div>
           </div>
-        )) }
+        ))}
       </div>
 
-      <div className="sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white">
-        <div className="flex justify-between mb-4">
-          <div className="text-gray_r-11">
-            Total: 
-            <span className="text-red_r-11 font-semibold">
-              &nbsp;{ selectedProduct().length > 0 ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount) : '-' }
+      <div className='sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white'>
+        <div className='flex justify-between mb-4'>
+          <div className='text-gray_r-11'>
+            Total:
+            <span className='text-red_r-11 font-semibold'>
+              &nbsp;
+              {selectedProduct().length > 0
+                ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
+                : '-'}
             </span>
           </div>
         </div>
-        <div className="flex gap-x-3">
-          <button 
-            type="button" 
-            className="btn-yellow flex-1"
+        <div className='flex gap-x-3'>
+          <button
+            type='button'
+            className='btn-yellow flex-1'
             disabled={selectedProduct().length == 0}
             onClick={() => router.push('/shop/quotation')}
           >
             Quotation
           </button>
-          <button 
-            type="button" 
-            className="btn-solid-red flex-1"
+          <button
+            type='button'
+            className='btn-solid-red flex-1'
             disabled={selectedProduct().length == 0}
             onClick={() => router.push('/shop/checkout')}
           >
@@ -240,22 +243,23 @@ const Cart = () => {
       <BottomPopup
         active={deleteConfirmation}
         close={() => setDeleteConfirmation(null)}
-        title="Hapus dari Keranjang"
+        title='Hapus dari Keranjang'
       >
-        <div className="leading-7 text-gray_r-12/80">
-          Apakah anda yakin menghapus barang <span className="underline">{deleteConfirmation?.name}</span> dari keranjang?
+        <div className='leading-7 text-gray_r-12/80'>
+          Apakah anda yakin menghapus barang{' '}
+          <span className='underline'>{deleteConfirmation?.name}</span> dari keranjang?
         </div>
-        <div className="flex mt-6 gap-x-4">
-          <button 
-            className="btn-solid-red flex-1" 
-            type="button"
+        <div className='flex mt-6 gap-x-4'>
+          <button
+            className='btn-solid-red flex-1'
+            type='button'
             onClick={() => deleteProduct(deleteConfirmation?.id)}
           >
             Ya, Hapus
           </button>
-          <button 
-            className="btn-light flex-1" 
-            type="button"
+          <button
+            className='btn-light flex-1'
+            type='button'
             onClick={() => setDeleteConfirmation(null)}
           >
             Batal
@@ -266,4 +270,4 @@ const Cart = () => {
   )
 }
 
-export default Cart
\ No newline at end of file
+export default Cart
-- 
cgit v1.2.3


From 7265295454801c1d921385a4b67fb3780b46771e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 14:00:00 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index df74bed6..2d94ac0b 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -10,6 +10,7 @@ import { useRouter } from 'next/router'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { toast } from 'react-hot-toast'
 import Spinner from '@/core/components/elements/Spinner/Spinner'
+import Alert from '@/core/components/elements/Alert/Alert'
 
 const Cart = () => {
   const router = useRouter()
@@ -126,6 +127,13 @@ const Cart = () => {
             <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
           </div>
         )}
+
+        {!cart.isLoading && !products && (
+          <Alert className='text-center my-2' type='info'>
+            Keranjang belanja anda masih kosong
+          </Alert>
+        )}
+
         {products?.map((product) => (
           <div key={product?.id} className='flex'>
             <button
-- 
cgit v1.2.3


From 321e0c09be4b26d72b470407217262d10c88089d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 22:57:48 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx | 70 ++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 35 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 2d94ac0b..af2bec78 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -103,7 +103,7 @@ const Cart = () => {
 
   const selectedProduct = () => {
     if (!products) return []
-    return products.filter((product) => product.selected == true)
+    return products?.filter((product) => product.selected == true)
   }
 
   const deleteProduct = (productId) => {
@@ -115,27 +115,27 @@ const Cart = () => {
   }
 
   return (
-    <div className='pt-6'>
+    <div className='pt-4'>
       <div className='flex justify-between mb-4 px-4'>
         <h1 className='font-semibold'>Daftar Produk Belanja</h1>
         <Link href='/'>Cari Produk Lain</Link>
       </div>
 
-      <div className='flex flex-col gap-y-4 px-4'>
+      <div className='flex flex-col gap-y-4 h-screen'>
         {cart.isLoading && (
           <div className='flex justify-center my-4'>
             <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
           </div>
         )}
 
-        {!cart.isLoading && !products && (
-          <Alert className='text-center my-2' type='info'>
+        {!cart.isLoading && (!products || products?.length == 0) && (
+          <Alert className='text-center my-2 mx-4' type='info'>
             Keranjang belanja anda masih kosong
           </Alert>
         )}
 
         {products?.map((product) => (
-          <div key={product?.id} className='flex'>
+          <div key={product?.id} className='flex mx-4'>
             <button
               type='button'
               className='flex items-center mr-2'
@@ -214,37 +214,37 @@ const Cart = () => {
             </div>
           </div>
         ))}
-      </div>
 
-      <div className='sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white'>
-        <div className='flex justify-between mb-4'>
-          <div className='text-gray_r-11'>
-            Total:
-            <span className='text-red_r-11 font-semibold'>
-              &nbsp;
-              {selectedProduct().length > 0
-                ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
-                : '-'}
-            </span>
+        <div className='sticky bottom-0 left-0 w-full p-4 mt-auto border-t border-gray_r-6 bg-white'>
+          <div className='flex justify-between mb-4'>
+            <div className='text-gray_r-11'>
+              Total:
+              <span className='text-red_r-11 font-semibold'>
+                &nbsp;
+                {selectedProduct().length > 0
+                  ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
+                  : '-'}
+              </span>
+            </div>
+          </div>
+          <div className='flex gap-x-3'>
+            <button
+              type='button'
+              className='btn-yellow flex-1'
+              disabled={selectedProduct().length == 0}
+              onClick={() => router.push('/shop/quotation')}
+            >
+              Quotation
+            </button>
+            <button
+              type='button'
+              className='btn-solid-red flex-1'
+              disabled={selectedProduct().length == 0}
+              onClick={() => router.push('/shop/checkout')}
+            >
+              Checkout
+            </button>
           </div>
-        </div>
-        <div className='flex gap-x-3'>
-          <button
-            type='button'
-            className='btn-yellow flex-1'
-            disabled={selectedProduct().length == 0}
-            onClick={() => router.push('/shop/quotation')}
-          >
-            Quotation
-          </button>
-          <button
-            type='button'
-            className='btn-solid-red flex-1'
-            disabled={selectedProduct().length == 0}
-            onClick={() => router.push('/shop/checkout')}
-          >
-            Checkout
-          </button>
         </div>
       </div>
 
-- 
cgit v1.2.3


From 32f684cc40e66239451fcaa93ae2971b4bd86026 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:05:10 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index af2bec78..d0408ddf 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -129,9 +129,11 @@ const Cart = () => {
         )}
 
         {!cart.isLoading && (!products || products?.length == 0) && (
-          <Alert className='text-center my-2 mx-4' type='info'>
-            Keranjang belanja anda masih kosong
-          </Alert>
+          <div className='px-4'>
+            <Alert className='text-center my-2' type='info'>
+              Keranjang belanja anda masih kosong
+            </Alert>
+          </div>
         )}
 
         {products?.map((product) => (
@@ -154,7 +156,7 @@ const Cart = () => {
                 className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
               />
             </Link>
-            <div className='flex-1 px-2 text-caption-1'>
+            <div className='flex-1 px-2 text-caption-2'>
               <Link
                 href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
                 className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
-- 
cgit v1.2.3


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/lib/cart/components/Cart.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/lib/cart/components/Cart.jsx')

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index d0408ddf..6a503c0a 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -130,14 +130,20 @@ const Cart = () => {
 
         {!cart.isLoading && (!products || products?.length == 0) && (
           <div className='px-4'>
-            <Alert className='text-center my-2' type='info'>
+            <Alert
+              className='text-center my-2'
+              type='info'
+            >
               Keranjang belanja anda masih kosong
             </Alert>
           </div>
         )}
 
         {products?.map((product) => (
-          <div key={product?.id} className='flex mx-4'>
+          <div
+            key={product?.id}
+            className='flex mx-4'
+          >
             <button
               type='button'
               className='flex items-center mr-2'
-- 
cgit v1.2.3

