Merged in Feature/all-promotion (pull request #202)

Feature/all promotion

Approved-by: trisusilo

2 files changed, 35 insertions, 18 deletions

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 6ded6373..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">
@@ -100,13 +103,14 @@ const CartItem = ({ item, editable = true }: Props) => {
 
 CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
   const image = item?.image || item?.parent?.image
+  const imageProgram = item?.image_program ? item.image_program[0] : item?.parent?.image;
 
-  return (
+  return (  
     <>
       {item.cart_type === 'promotion' && (
         <div className={style.image}>
-          {image && <Image src={image} alt={item.name} width={128} height={128} />}
-          {!image && <div className={style.noImage}>No Image</div>}
+          {imageProgram && <Image src={imageProgram} alt={item.name} width={128} height={128} />}
+          {!imageProgram && <div className={style.noImage}>No Image</div>}
         </div>
       )}
 
@@ -153,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