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')

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