Update promotion program feature

1 files changed, 105 insertions, 0 deletions

diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx
new file mode 100644
index 00000000..3e264aef
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemAction.tsx
@@ -0,0 +1,105 @@
+import style from '../styles/item-action.module.css'
+
+import React, { useEffect, useState } from 'react'
+
+import { Spinner, Tooltip } from '@chakra-ui/react'
+import { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react'
+
+import { CartItem } from '~/common/types/cart'
+import { getAuth } from '~/common/libs/auth'
+import { deleteUserCart, upsertUserCart } from '~/services/cart'
+
+import { useDebounce } from 'usehooks-ts'
+import { useCartStore } from '../stores/useCartStore'
+
+
+type Props = {
+  item: CartItem
+}
+
+const CartItemAction = ({ item }: Props) => {
+  const auth = getAuth()
+
+  const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false)
+  const [isLoadQuantity, setIsLoadQuantity] = useState<boolean>(false)
+
+  const [quantity, setQuantity] = useState<number>(item.quantity)
+
+  const { loadCart } = useCartStore()
+
+  const limitQty = item.limit_qty?.transaction || 0
+
+  const handleDelete = async () => {
+    if (typeof auth !== 'object') return
+
+    setIsLoadDelete(true)
+    await deleteUserCart(auth.id, [item.cart_id])
+    await loadCart(auth.id)
+    setIsLoadDelete(false)
+  }
+
+  const decreaseQty = () => { setQuantity((quantity) => quantity -= 1) }
+  const increaseQty = () => { setQuantity((quantity) => quantity += 1) }
+  const debounceQty = useDebounce(quantity, 1000)
+  useEffect(() => {
+    if (isNaN(debounceQty)) setQuantity(1)
+    if (limitQty > 0 && debounceQty > limitQty) setQuantity(limitQty)
+  }, [debounceQty, limitQty])
+
+  useEffect(() => {
+    const updateCart = async () => {
+      if (typeof auth !== 'object' || isNaN(debounceQty)) return
+
+      setIsLoadQuantity(true)
+      await upsertUserCart(auth.id, item.cart_type, item.id, debounceQty, item.selected)
+      await loadCart(auth.id)
+      setIsLoadQuantity(false)
+    }
+    updateCart()
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debounceQty])
+
+  return (
+    <div className={style.actionSection}>
+      <button className={style.deleteButton} onClick={handleDelete} disabled={isLoadDelete}>
+        {isLoadDelete && <Spinner size='xs' />}
+        {!isLoadDelete && <Trash2Icon size={16} />}
+      </button>
+
+      <div className={style.quantitySection}>
+        {isLoadQuantity && (
+          <div className={style.quantityLoading}>
+            <Spinner size='sm' />
+          </div>
+        )}
+
+        <button
+          className={style.quantityControl}
+          onClick={decreaseQty}
+          disabled={quantity <= 1}
+        >
+          <MinusIcon size={16} />
+        </button>
+
+        <input
+          type='number'
+          className={style.quantity.toString()}
+          onChange={(e) => setQuantity(parseInt(e.target.value))}
+          value={quantity}
+        />
+
+        <Tooltip label={limitQty > 0 ? `Max. ${limitQty}` : ''}>
+          <button
+            className={style.quantityControl}
+            onClick={increaseQty}
+            disabled={limitQty > 0 && quantity >= limitQty}
+          >
+            <PlusIcon size={16} />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default CartItemAction
\ No newline at end of file