Merged in Feature/iman-unchek-cart (pull request #165)

Feature/iman unchek cart

3 files changed, 75 insertions, 26 deletions

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index a382279f..74180fc9 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -17,12 +17,14 @@ import CartItemSelect from './ItemSelect'
 type Props = {
   item: CartItemProps
   editable?: boolean
+  pilihSemuaCart?: boolean 
 }
 
-const CartItem = ({ item, editable = true }: Props) => {
+const CartItem = ({ item, editable = true, pilihSemuaCart }: Props) => {
+
   return (
     <div className={style.wrapper}>
-      {item.cart_type === 'promotion' && (
+      {item.cart_type === 'promotion' && (  
         <div className={style.header}>
           {item.promotion_type?.value && (
             <Tooltip label={PROMO_CATEGORY[item.promotion_type?.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
@@ -43,7 +45,9 @@ const CartItem = ({ item, editable = true }: Props) => {
       )}
 
       <div className={style.mainProdWrapper}>
-        {editable && <CartItemSelect item={item} />}
+        {editable && (
+          <CartItemSelect item={item} itemSelected={pilihSemuaCart} />
+        )}
         <div className='w-4' />
 
         <CartItem.Image item={item} />
@@ -87,7 +91,6 @@ const CartItem = ({ item, editable = true }: Props) => {
             {!editable && <div className={style.quantity}>{item.quantity}</div>}
           </div>
         </div>
-
       </div>
 
       <div className="flex flex-col">
@@ -154,4 +157,4 @@ CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: nu
   ))
 }
 
-export default CartItem
\ No newline at end of file
+export default CartItem
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
index b904a1de..6b6b8f2b 100644
--- a/src-migrate/modules/cart/components/ItemSelect.tsx
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -1,5 +1,5 @@
 import { Checkbox, Spinner } from '@chakra-ui/react'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 import { getAuth } from '~/libs/auth'
 import { CartItem } from '~/types/cart'
@@ -9,15 +9,17 @@ import { useCartStore } from '../stores/useCartStore'
 
 type Props = {
   item: CartItem
+  itemSelected?: boolean
 }
 
-const CartItemSelect = ({ item }: Props) => {
+const CartItemSelect = ({ item, itemSelected }: Props) => {
   const auth = getAuth()
   const { loadCart } = useCartStore()
 
   const [isLoad, setIsLoad] = useState<boolean>(false)
+  const [isChecked, setIsChecked] = useState<boolean>(itemSelected ?? true)
 
-  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = async (isChecked: boolean) => {
     if (typeof auth !== 'object') return
 
     setIsLoad(true)
@@ -26,29 +28,40 @@ const CartItemSelect = ({ item }: Props) => {
       type: item.cart_type,
       id: item.id,
       qty: item.quantity,
-      selected: e.target.checked
+      selected: isChecked,
     })
     await loadCart(auth.id)
     setIsLoad(false)
   }
 
+  useEffect(() => {
+    if (typeof itemSelected === 'boolean') {
+      setIsChecked(itemSelected)
+      handleChange(itemSelected)
+    }
+  }, [itemSelected])
+
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = e.target
+    setIsChecked(checked)
+    handleChange(checked)
+  }
+
   return (
     <div className='w-6 my-auto'>
-      {isLoad && (
-        <Spinner className='my-auto' size='sm' />
-      )}
+      {isLoad && <Spinner className='my-auto' size='sm' />}
 
       {!isLoad && (
         <Checkbox
           borderColor='gray.600'
           colorScheme='red'
           size='lg'
-          isChecked={item.selected}
-          onChange={handleChange}
+          isChecked={isChecked}
+          onChange={handleCheckboxChange}
         />
       )}
     </div>
   )
 }
 
-export default CartItemSelect
\ No newline at end of file
+export default CartItemSelect
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index d89707d2..1f89c7a3 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -1,9 +1,10 @@
 import style from './cart.module.css';
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
-import { Button, Tooltip } from '@chakra-ui/react';
-
+import { Button, Checkbox, Toast, Tooltip } from '@chakra-ui/react';
+import { toast } from 'react-hot-toast';
+import { useRouter } from 'next/router';
 import { getAuth } from '~/libs/auth';
 import { useCartStore } from '~/modules/cart/stores/useCartStore';
 
@@ -15,8 +16,12 @@ import CartSummaryMobile from '~/modules/cart/components/CartSummaryMobile';
 import Image from '~/components/ui/image';
 
 const CartPage = () => {
+  const router = useRouter();
   const auth = getAuth();
   const [isStepApproval, setIsStepApproval] = React.useState(false);
+  const [isSelectedAll, setIsSelectedAll] = useState<boolean>(false);
+  const [isButtonChek, setIsButtonChek] = useState<boolean>(false);
+  const [buttonSelectNow, setButtonSelectNow] = useState<boolean>(true);
 
   const { loadCart, cart, summary } = useCartStore();
 
@@ -27,8 +32,9 @@ const CartPage = () => {
       loadCart(auth.id);
       setIsStepApproval(auth?.feature?.soApproval);
     }
-  }, [auth, loadCart, cart]);
-
+  }, [auth, loadCart, cart, isButtonChek, ]);
+  
+  
   const hasSelectedPromo = useMemo(() => {
     if (!cart) return false;
     for (const item of cart.products) {
@@ -52,11 +58,39 @@ const CartPage = () => {
     }
     return false;
   }, [cart]);
+  
+  const handleCheckout = (()=>{
+      router.push('/shop/checkout');
+  })
+
+  const handleQuotation = (()=>{
+    if(hasSelectedPromo || !hasSelected){
+      toast.error('Maaf, Barang promo tidak dapat dibuat quotation');
+    }else{
+      router.push('/shop/quotation');
+    }
+  })
+
+  const handleChange = (()=>{
+    setButtonSelectNow(!buttonSelectNow)
+    setIsSelectedAll(!isSelectedAll)
+    setIsButtonChek(!isButtonChek)
+  })
 
   return (
     <>
       <div className={style['title']}>Keranjang Belanja</div>
-
+        <div className='flex items-center object-center mt-2'>
+          <Checkbox
+            borderColor='gray.600'
+            colorScheme='red'
+            size='lg'
+            isChecked={isButtonChek}
+            onChange={handleChange}
+          /> <p className='p-2 text-caption-2'>
+              {buttonSelectNow? "Select all" : "Unchek all" } 
+            </p> 
+        </div>
       <div className='h-6' />
 
       <div className={style['content']}>
@@ -67,8 +101,9 @@ const CartPage = () => {
 
           <div className={style['items']}>
             {cart?.products.map((item) => (
-              <CartItem key={item.id} item={item} />
+              <CartItem key={item.id} item={item} pilihSemuaCart={isSelectedAll}  />
             ))}
+            
 
             {cart?.products?.length === 0 && (
               <div className='flex flex-col items-center'>
@@ -121,8 +156,7 @@ const CartPage = () => {
                   colorScheme='yellow'
                   w='full'
                   isDisabled={hasSelectedPromo || !hasSelected}
-                  as={Link}
-                  href='/shop/quotation'
+                  onClick={handleQuotation}
                 >
                   Quotation
                 </Button>
@@ -138,8 +172,7 @@ const CartPage = () => {
                     colorScheme='red'
                     w='full'
                     isDisabled={!hasSelected || hasSelectNoPrice}
-                    as={Link}
-                    href='/shop/checkout'
+                    onClick={handleCheckout}
                   >
                     Checkout
                   </Button>