From c9366090153e8aba3a673b2b77cbc8acc24e59a5 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 15 Dec 2023 17:15:32 +0700
Subject: Update promotion program feature

---
 src-migrate/modules/cart/components/CartDetail.tsx |  76 +++++++++++++++
 .../modules/cart/components/CartItemAction.tsx     | 104 +++++++++++++++++++++
 .../modules/cart/components/CartItemSelect.tsx     |  45 +++++++++
 3 files changed, 225 insertions(+)
 create mode 100644 src-migrate/modules/cart/components/CartDetail.tsx
 create mode 100644 src-migrate/modules/cart/components/CartItemAction.tsx
 create mode 100644 src-migrate/modules/cart/components/CartItemSelect.tsx

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/CartDetail.tsx b/src-migrate/modules/cart/components/CartDetail.tsx
new file mode 100644
index 00000000..734c61d3
--- /dev/null
+++ b/src-migrate/modules/cart/components/CartDetail.tsx
@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo } from 'react'
+import { getAuth } from '~/common/libs/auth'
+import { useCartStore } from '../stores/useCartStore'
+import CartItem from '../ui/CartItem'
+import style from '../styles/CartDetail.module.css'
+import CartSummary from '../ui/CartSummary'
+import { Button, Tooltip } from '@chakra-ui/react'
+
+const CartDetail = () => {
+  const auth = getAuth()
+
+  const { loadCart, cart, summary } = useCartStore()
+
+  useEffect(() => {
+    if (typeof auth === 'object' && !cart) loadCart(auth.id)
+  }, [auth, loadCart, cart])
+
+  const hasSelectedPromo = useMemo(() => {
+    if (!cart) return false
+    for (const item of cart.products) {
+      if (item.cart_type === 'promotion' && item.selected) return true
+    }
+    return false
+  }, [cart])
+
+  const hasSelected = useMemo(() => {
+    if (!cart) return false
+    for (const item of cart.products) {
+      if (item.selected) return true
+    }
+    return false
+  }, [cart])
+
+  return (
+    <div className={style.wrapper}>
+      <div className='w-full md:w-3/4'>
+        {/* <div className='border border-gray-300 rounded-lg p-4 md:p-6'> */}
+        <div className=''>
+          <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
+          <div className='grid grid-cols-1 gap-y-4'>
+            {!cart && <CartItem.Skeleton count={5} height='120px' />}
+          </div>
+          <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
+            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
+          </div>
+        </div>
+      </div>
+
+      <div className='w-full md:w-1/4 pl-6'>
+        <div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'>
+          <CartSummary {...summary} isLoaded={!!cart} />
+          <div className='grid grid-cols-2 gap-x-3 mt-6'>
+            <Tooltip label={hasSelectedPromo ? 'Barang promo tidak dapat dibuat quotation' : ''}>
+              <Button
+                colorScheme='yellow'
+                w='full'
+                isDisabled={hasSelectedPromo || !hasSelected}>
+                Quotation
+              </Button>
+            </Tooltip>
+            <Tooltip label={hasSelected ? '' : 'Tidak ada item yang dipilih'}>
+              <Button
+                colorScheme='red'
+                w='full'
+                isDisabled={!hasSelected}>
+                Checkout
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CartDetail
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/CartItemAction.tsx b/src-migrate/modules/cart/components/CartItemAction.tsx
new file mode 100644
index 00000000..742d1a39
--- /dev/null
+++ b/src-migrate/modules/cart/components/CartItemAction.tsx
@@ -0,0 +1,104 @@
+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'
+
+import style from '../styles/CartItemAction.module.css'
+
+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
diff --git a/src-migrate/modules/cart/components/CartItemSelect.tsx b/src-migrate/modules/cart/components/CartItemSelect.tsx
new file mode 100644
index 00000000..f44b0d7e
--- /dev/null
+++ b/src-migrate/modules/cart/components/CartItemSelect.tsx
@@ -0,0 +1,45 @@
+import { Checkbox, Spinner } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import { getAuth } from '~/common/libs/auth'
+import { CartItem } from '~/common/types/cart'
+import { upsertUserCart } from '~/services/cart'
+import { useCartStore } from '../stores/useCartStore'
+
+type Props = {
+  item: CartItem
+}
+
+const CartItemSelect = ({ item }: Props) => {
+  const auth = getAuth()
+  const { loadCart } = useCartStore()
+
+  const [isLoad, setIsLoad] = useState<boolean>(false)
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (typeof auth !== 'object') return
+
+    setIsLoad(true)
+    await upsertUserCart(auth.id, item.cart_type, item.id, item.quantity, e.target.checked)
+    await loadCart(auth.id)
+    setIsLoad(false)
+  }
+
+  return (
+    <div className='w-5 my-auto'>
+      {isLoad && (
+        <Spinner className='my-auto' size='sm' />
+      )}
+      {!isLoad && (
+        <Checkbox
+          borderColor='gray.600'
+          colorScheme='red'
+          size='lg'
+          isChecked={item.selected}
+          onChange={handleChange}
+        />
+      )}
+    </div>
+  )
+}
+
+export default CartItemSelect
\ No newline at end of file
-- 
cgit v1.2.3


From 89f32128f37d99b490de7590e2116a9cfd853f89 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 22 Dec 2023 17:33:46 +0700
Subject: Update promotion program feature

---
 src-migrate/modules/cart/components/CartDetail.tsx |  76 --------------
 .../modules/cart/components/CartItemAction.tsx     | 104 --------------------
 .../modules/cart/components/CartItemSelect.tsx     |  45 ---------
 src-migrate/modules/cart/components/Detail.tsx     |  84 ++++++++++++++++
 src-migrate/modules/cart/components/Item.tsx       | 109 +++++++++++++++++++++
 src-migrate/modules/cart/components/ItemAction.tsx | 105 ++++++++++++++++++++
 src-migrate/modules/cart/components/ItemPromo.tsx  |  41 ++++++++
 src-migrate/modules/cart/components/ItemSelect.tsx |  47 +++++++++
 src-migrate/modules/cart/components/Summary.tsx    |  75 ++++++++++++++
 9 files changed, 461 insertions(+), 225 deletions(-)
 delete mode 100644 src-migrate/modules/cart/components/CartDetail.tsx
 delete mode 100644 src-migrate/modules/cart/components/CartItemAction.tsx
 delete mode 100644 src-migrate/modules/cart/components/CartItemSelect.tsx
 create mode 100644 src-migrate/modules/cart/components/Detail.tsx
 create mode 100644 src-migrate/modules/cart/components/Item.tsx
 create mode 100644 src-migrate/modules/cart/components/ItemAction.tsx
 create mode 100644 src-migrate/modules/cart/components/ItemPromo.tsx
 create mode 100644 src-migrate/modules/cart/components/ItemSelect.tsx
 create mode 100644 src-migrate/modules/cart/components/Summary.tsx

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/CartDetail.tsx b/src-migrate/modules/cart/components/CartDetail.tsx
deleted file mode 100644
index 734c61d3..00000000
--- a/src-migrate/modules/cart/components/CartDetail.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useEffect, useMemo } from 'react'
-import { getAuth } from '~/common/libs/auth'
-import { useCartStore } from '../stores/useCartStore'
-import CartItem from '../ui/CartItem'
-import style from '../styles/CartDetail.module.css'
-import CartSummary from '../ui/CartSummary'
-import { Button, Tooltip } from '@chakra-ui/react'
-
-const CartDetail = () => {
-  const auth = getAuth()
-
-  const { loadCart, cart, summary } = useCartStore()
-
-  useEffect(() => {
-    if (typeof auth === 'object' && !cart) loadCart(auth.id)
-  }, [auth, loadCart, cart])
-
-  const hasSelectedPromo = useMemo(() => {
-    if (!cart) return false
-    for (const item of cart.products) {
-      if (item.cart_type === 'promotion' && item.selected) return true
-    }
-    return false
-  }, [cart])
-
-  const hasSelected = useMemo(() => {
-    if (!cart) return false
-    for (const item of cart.products) {
-      if (item.selected) return true
-    }
-    return false
-  }, [cart])
-
-  return (
-    <div className={style.wrapper}>
-      <div className='w-full md:w-3/4'>
-        {/* <div className='border border-gray-300 rounded-lg p-4 md:p-6'> */}
-        <div className=''>
-          <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
-          <div className='grid grid-cols-1 gap-y-4'>
-            {!cart && <CartItem.Skeleton count={5} height='120px' />}
-          </div>
-          <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
-            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
-          </div>
-        </div>
-      </div>
-
-      <div className='w-full md:w-1/4 pl-6'>
-        <div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'>
-          <CartSummary {...summary} isLoaded={!!cart} />
-          <div className='grid grid-cols-2 gap-x-3 mt-6'>
-            <Tooltip label={hasSelectedPromo ? 'Barang promo tidak dapat dibuat quotation' : ''}>
-              <Button
-                colorScheme='yellow'
-                w='full'
-                isDisabled={hasSelectedPromo || !hasSelected}>
-                Quotation
-              </Button>
-            </Tooltip>
-            <Tooltip label={hasSelected ? '' : 'Tidak ada item yang dipilih'}>
-              <Button
-                colorScheme='red'
-                w='full'
-                isDisabled={!hasSelected}>
-                Checkout
-              </Button>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CartDetail
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/CartItemAction.tsx b/src-migrate/modules/cart/components/CartItemAction.tsx
deleted file mode 100644
index 742d1a39..00000000
--- a/src-migrate/modules/cart/components/CartItemAction.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-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'
-
-import style from '../styles/CartItemAction.module.css'
-
-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
diff --git a/src-migrate/modules/cart/components/CartItemSelect.tsx b/src-migrate/modules/cart/components/CartItemSelect.tsx
deleted file mode 100644
index f44b0d7e..00000000
--- a/src-migrate/modules/cart/components/CartItemSelect.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Checkbox, Spinner } from '@chakra-ui/react'
-import React, { useState } from 'react'
-import { getAuth } from '~/common/libs/auth'
-import { CartItem } from '~/common/types/cart'
-import { upsertUserCart } from '~/services/cart'
-import { useCartStore } from '../stores/useCartStore'
-
-type Props = {
-  item: CartItem
-}
-
-const CartItemSelect = ({ item }: Props) => {
-  const auth = getAuth()
-  const { loadCart } = useCartStore()
-
-  const [isLoad, setIsLoad] = useState<boolean>(false)
-
-  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (typeof auth !== 'object') return
-
-    setIsLoad(true)
-    await upsertUserCart(auth.id, item.cart_type, item.id, item.quantity, e.target.checked)
-    await loadCart(auth.id)
-    setIsLoad(false)
-  }
-
-  return (
-    <div className='w-5 my-auto'>
-      {isLoad && (
-        <Spinner className='my-auto' size='sm' />
-      )}
-      {!isLoad && (
-        <Checkbox
-          borderColor='gray.600'
-          colorScheme='red'
-          size='lg'
-          isChecked={item.selected}
-          onChange={handleChange}
-        />
-      )}
-    </div>
-  )
-}
-
-export default CartItemSelect
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/Detail.tsx b/src-migrate/modules/cart/components/Detail.tsx
new file mode 100644
index 00000000..c9de086b
--- /dev/null
+++ b/src-migrate/modules/cart/components/Detail.tsx
@@ -0,0 +1,84 @@
+import style from '../styles/detail.module.css'
+
+import React, { useEffect, useMemo } from 'react'
+import Link from 'next/link'
+import { Button, Tooltip } from '@chakra-ui/react'
+
+import { getAuth } from '~/common/libs/auth'
+import { useCartStore } from '../stores/useCartStore'
+
+import CartItem from './Item'
+import CartSummary from './Summary'
+
+const CartDetail = () => {
+  const auth = getAuth()
+
+  const { loadCart, cart, summary } = useCartStore()
+
+  useEffect(() => {
+    if (typeof auth === 'object' && !cart) loadCart(auth.id)
+  }, [auth, loadCart, cart])
+
+  const hasSelectedPromo = useMemo(() => {
+    if (!cart) return false
+    for (const item of cart.products) {
+      if (item.cart_type === 'promotion' && item.selected) return true
+    }
+    return false
+  }, [cart])
+
+  const hasSelected = useMemo(() => {
+    if (!cart) return false
+    for (const item of cart.products) {
+      if (item.selected) return true
+    }
+    return false
+  }, [cart])
+
+  return (
+    <div className={style.wrapper}>
+      <div className='w-full md:w-3/4'>
+        {/* <div className='border border-gray-300 rounded-lg p-4 md:p-6'> */}
+        <div className=''>
+          <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
+          <div className='grid grid-cols-1 gap-y-4'>
+            {!cart && <CartItem.Skeleton count={5} height='120px' />}
+          </div>
+          <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
+            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
+          </div>
+        </div>
+      </div>
+
+      <div className='w-full md:w-1/4 md:pl-6 mt-6 md:mt-0'>
+        <div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'>
+          <CartSummary {...summary} isLoaded={!!cart} />
+          <div className='grid grid-cols-2 gap-x-3 mt-6'>
+            <Tooltip label={hasSelectedPromo ? 'Barang promo tidak dapat dibuat quotation' : ''}>
+              <Button
+                colorScheme='yellow'
+                w='full'
+                isDisabled={hasSelectedPromo || !hasSelected}
+              >
+                Quotation
+              </Button>
+            </Tooltip>
+            <Tooltip label={hasSelected ? '' : 'Tidak ada item yang dipilih'}>
+              <Button
+                colorScheme='red'
+                w='full'
+                isDisabled={!hasSelected}
+                as={Link}
+                href='/shop/checkout'
+              >
+                Checkout
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CartDetail
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
new file mode 100644
index 00000000..92beda86
--- /dev/null
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -0,0 +1,109 @@
+import style from '../styles/item.module.css'
+
+import Image from 'next/image'
+import React from 'react'
+import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
+
+import formatCurrency from '~/common/libs/formatCurrency'
+import { CartItem as CartItemProps } from '~/common/types/cart'
+
+import CartItemPromo from './ItemPromo'
+import CartItemAction from './ItemAction'
+import CartItemSelect from './ItemSelect'
+import { PROMO_CATEGORY } from '~/constants/promotion'
+import { InfoIcon } from 'lucide-react'
+
+type Props = {
+  item: CartItemProps
+  editable?: boolean
+}
+
+const CartItem = ({ item, editable = true }: Props) => {
+  const image = item?.image || item?.parent?.image
+
+  return (
+    <div className={style.wrapper}>
+      {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}>
+              <div className={style.badgeType}>
+                Paket {PROMO_CATEGORY[item.promotion_type?.value].alias}
+                <InfoIcon size={14} />
+              </div>
+            </Tooltip>
+          )}
+          <div className='w-2' />
+          <div>
+            Selamat! Pembelian anda lebih hemat {' '}
+            <span className={style.savingAmt}>
+              Rp {formatCurrency((item.package_price || 0) - item.subtotal)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className={style.mainProdWrapper}>
+        {editable && <CartItemSelect item={item} />}
+        <div className='w-4' />
+        <div className={style.image}>
+          {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          {!image && <div className={style.noImage}>No Image</div>}
+        </div>
+
+        <div className={style.details}>
+          <div className={style.name}>{item.name}</div>
+          <div className='mt-2 flex justify-between w-full'>
+            <div className='flex flex-col gap-y-1'>
+              {item.cart_type === 'promotion' && (
+                <div className={style.discPriceSection}>
+                  <span className={style.priceBefore}>
+                    Rp {formatCurrency((item.package_price || 0))}
+                  </span>
+                  <span className={style.price}>
+                    Rp {formatCurrency(item.subtotal)}
+                  </span>
+                </div>
+              )}
+
+              {item.cart_type === 'product' && (
+                <>
+                  <div className={style.price}>
+                    Rp {formatCurrency(item.price.price)}
+                  </div>
+                  <div>{item.code}</div>
+                </>
+              )}
+
+              <div>
+                {item.weight} Kg
+              </div>
+            </div>
+
+            {editable && <CartItemAction item={item} />}
+            {!editable && <div className={style.quantity}>{item.quantity}</div>}
+          </div>
+        </div>
+
+      </div>
+
+      <div className="flex flex-col">
+        {item.products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
+        {item.free_products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
+      </div>
+    </div>
+  )
+}
+
+CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: number }) {
+  return Array.from({ length: props.count }).map((_, index) => (
+    <Skeleton key={index}
+      height='100px'
+      width='100%'
+      rounded='md'
+      {...props}
+    />
+  ))
+}
+
+export default CartItem
\ No newline at end of file
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
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
new file mode 100644
index 00000000..951d4d6a
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -0,0 +1,41 @@
+import style from '../styles/item-promo.module.css'
+
+import Image from 'next/image'
+import React from 'react'
+
+import { CartProduct } from '~/common/types/cart'
+
+
+type Props = {
+  product: CartProduct
+}
+
+const CartItemPromo = ({ product }: Props) => {
+  return (
+    <div key={product.id} className={style.wrapper}>
+      <div className={style.imageWrapper}>
+        {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} className={style.image} />}
+      </div>
+
+      <div className={style.details}>
+        <div className={style.name}>{product.display_name}</div>
+        <div className='flex'>
+          <div className="flex flex-col">
+            <div className={style.code}>{product.code}</div>
+            <div>
+              <span className={style.weightLabel}>Berat Barang: </span>
+              <span>{product.package_weight} Kg</span>
+            </div>
+          </div>
+
+          <div className={style.quantity}>
+            {product.qty}
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default CartItemPromo
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
new file mode 100644
index 00000000..96e7c713
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -0,0 +1,47 @@
+import { Checkbox, Spinner } from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+import { getAuth } from '~/common/libs/auth'
+import { CartItem } from '~/common/types/cart'
+import { upsertUserCart } from '~/services/cart'
+
+import { useCartStore } from '../stores/useCartStore'
+
+type Props = {
+  item: CartItem
+}
+
+const CartItemSelect = ({ item }: Props) => {
+  const auth = getAuth()
+  const { loadCart } = useCartStore()
+
+  const [isLoad, setIsLoad] = useState<boolean>(false)
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (typeof auth !== 'object') return
+
+    setIsLoad(true)
+    await upsertUserCart(auth.id, item.cart_type, item.id, item.quantity, e.target.checked)
+    await loadCart(auth.id)
+    setIsLoad(false)
+  }
+
+  return (
+    <div className='w-5 my-auto'>
+      {isLoad && (
+        <Spinner className='my-auto' size='sm' />
+      )}
+      {!isLoad && (
+        <Checkbox
+          borderColor='gray.600'
+          colorScheme='red'
+          size='lg'
+          isChecked={item.selected}
+          onChange={handleChange}
+        />
+      )}
+    </div>
+  )
+}
+
+export default CartItemSelect
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
new file mode 100644
index 00000000..a835bca9
--- /dev/null
+++ b/src-migrate/modules/cart/components/Summary.tsx
@@ -0,0 +1,75 @@
+import style from '../styles/summary.module.css'
+
+import React from 'react'
+import formatCurrency from '~/common/libs/formatCurrency'
+import clsxm from '~/common/libs/clsxm'
+import { Skeleton } from '@chakra-ui/react'
+import _ from 'lodash'
+
+type Props = {
+  total?: number
+  discount?: number
+  subtotal?: number
+  tax?: number
+  shipping?: number
+  grandTotal?: number
+  isLoaded: boolean
+}
+
+const CartSummary = ({
+  total,
+  discount,
+  subtotal,
+  tax,
+  shipping,
+  grandTotal,
+  isLoaded = false,
+}: Props) => {
+  return (
+    <>
+      <div className='text-h-sm font-medium'>Ringkasan Pesanan</div>
+
+      <div className="h-6" />
+
+      <div className='flex flex-col gap-y-3'>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Total Belanja</span>
+          <span className={style.value}>Rp {formatCurrency(subtotal || 0)}</span>
+        </Skeleton>
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Total Diskon</span>
+          <span className={clsxm(style.value, style.discount)}>- Rp {formatCurrency(discount || 0)}</span>
+        </Skeleton>
+
+        <div className={style.divider} />
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Subtotal</span>
+          <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
+        </Skeleton>
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Tax 11%</span>
+          <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
+        </Skeleton>
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Biaya Kirim</span>
+          <span className={style.value}>Rp {formatCurrency(shipping || 0)}</span>
+        </Skeleton>
+
+        <div className={style.divider} />
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={clsxm(style.label, style.grandTotal)}>
+            Grand Total
+          </span>
+          <span className={style.value}>Rp {formatCurrency(grandTotal || 0)}</span>
+        </Skeleton>
+      </div>
+    </>
+  )
+}
+
+export default CartSummary
\ No newline at end of file
-- 
cgit v1.2.3


From 67398e6f10d6f7729d8f1ace7005ef13d32c5ddd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 4 Jan 2024 10:05:25 +0700
Subject: Update promotion program feature

---
 src-migrate/modules/cart/components/Detail.tsx    | 1 -
 src-migrate/modules/cart/components/Item.tsx      | 9 +++++----
 src-migrate/modules/cart/components/ItemPromo.tsx | 3 +--
 3 files changed, 6 insertions(+), 7 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Detail.tsx b/src-migrate/modules/cart/components/Detail.tsx
index c9de086b..ccb0bb4d 100644
--- a/src-migrate/modules/cart/components/Detail.tsx
+++ b/src-migrate/modules/cart/components/Detail.tsx
@@ -38,7 +38,6 @@ const CartDetail = () => {
   return (
     <div className={style.wrapper}>
       <div className='w-full md:w-3/4'>
-        {/* <div className='border border-gray-300 rounded-lg p-4 md:p-6'> */}
         <div className=''>
           <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
           <div className='grid grid-cols-1 gap-y-4'>
diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 92beda86..baf48bb6 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -3,6 +3,9 @@ import style from '../styles/item.module.css'
 import Image from 'next/image'
 import React from 'react'
 import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
+import { InfoIcon } from 'lucide-react'
+
+import { PROMO_CATEGORY } from '~/constants/promotion'
 
 import formatCurrency from '~/common/libs/formatCurrency'
 import { CartItem as CartItemProps } from '~/common/types/cart'
@@ -10,8 +13,6 @@ import { CartItem as CartItemProps } from '~/common/types/cart'
 import CartItemPromo from './ItemPromo'
 import CartItemAction from './ItemAction'
 import CartItemSelect from './ItemSelect'
-import { PROMO_CATEGORY } from '~/constants/promotion'
-import { InfoIcon } from 'lucide-react'
 
 type Props = {
   item: CartItemProps
@@ -37,7 +38,7 @@ const CartItem = ({ item, editable = true }: Props) => {
           <div>
             Selamat! Pembelian anda lebih hemat {' '}
             <span className={style.savingAmt}>
-              Rp {formatCurrency((item.package_price || 0) - item.subtotal)}
+              Rp{formatCurrency((item.package_price || 0) * item.quantity - item.subtotal)}
             </span>
           </div>
         </div>
@@ -61,7 +62,7 @@ const CartItem = ({ item, editable = true }: Props) => {
                     Rp {formatCurrency((item.package_price || 0))}
                   </span>
                   <span className={style.price}>
-                    Rp {formatCurrency(item.subtotal)}
+                    Rp {formatCurrency(item.price.price)}
                   </span>
                 </div>
               )}
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
index 951d4d6a..bb286e8b 100644
--- a/src-migrate/modules/cart/components/ItemPromo.tsx
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -5,7 +5,6 @@ import React from 'react'
 
 import { CartProduct } from '~/common/types/cart'
 
-
 type Props = {
   product: CartProduct
 }
@@ -19,7 +18,7 @@ const CartItemPromo = ({ product }: Props) => {
 
       <div className={style.details}>
         <div className={style.name}>{product.display_name}</div>
-        <div className='flex'>
+        <div className='flex w-full'>
           <div className="flex flex-col">
             <div className={style.code}>{product.code}</div>
             <div>
-- 
cgit v1.2.3


From ee0b5893ac039ab05fe8247647364a923d707da3 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 5 Jan 2024 09:30:08 +0700
Subject: Fixing UI cart page

---
 src-migrate/modules/cart/components/Detail.tsx     | 83 ----------------------
 src-migrate/modules/cart/components/ItemSelect.tsx |  3 +-
 2 files changed, 2 insertions(+), 84 deletions(-)
 delete mode 100644 src-migrate/modules/cart/components/Detail.tsx

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Detail.tsx b/src-migrate/modules/cart/components/Detail.tsx
deleted file mode 100644
index ccb0bb4d..00000000
--- a/src-migrate/modules/cart/components/Detail.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import style from '../styles/detail.module.css'
-
-import React, { useEffect, useMemo } from 'react'
-import Link from 'next/link'
-import { Button, Tooltip } from '@chakra-ui/react'
-
-import { getAuth } from '~/common/libs/auth'
-import { useCartStore } from '../stores/useCartStore'
-
-import CartItem from './Item'
-import CartSummary from './Summary'
-
-const CartDetail = () => {
-  const auth = getAuth()
-
-  const { loadCart, cart, summary } = useCartStore()
-
-  useEffect(() => {
-    if (typeof auth === 'object' && !cart) loadCart(auth.id)
-  }, [auth, loadCart, cart])
-
-  const hasSelectedPromo = useMemo(() => {
-    if (!cart) return false
-    for (const item of cart.products) {
-      if (item.cart_type === 'promotion' && item.selected) return true
-    }
-    return false
-  }, [cart])
-
-  const hasSelected = useMemo(() => {
-    if (!cart) return false
-    for (const item of cart.products) {
-      if (item.selected) return true
-    }
-    return false
-  }, [cart])
-
-  return (
-    <div className={style.wrapper}>
-      <div className='w-full md:w-3/4'>
-        <div className=''>
-          <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
-          <div className='grid grid-cols-1 gap-y-4'>
-            {!cart && <CartItem.Skeleton count={5} height='120px' />}
-          </div>
-          <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
-            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
-          </div>
-        </div>
-      </div>
-
-      <div className='w-full md:w-1/4 md:pl-6 mt-6 md:mt-0'>
-        <div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'>
-          <CartSummary {...summary} isLoaded={!!cart} />
-          <div className='grid grid-cols-2 gap-x-3 mt-6'>
-            <Tooltip label={hasSelectedPromo ? 'Barang promo tidak dapat dibuat quotation' : ''}>
-              <Button
-                colorScheme='yellow'
-                w='full'
-                isDisabled={hasSelectedPromo || !hasSelected}
-              >
-                Quotation
-              </Button>
-            </Tooltip>
-            <Tooltip label={hasSelected ? '' : 'Tidak ada item yang dipilih'}>
-              <Button
-                colorScheme='red'
-                w='full'
-                isDisabled={!hasSelected}
-                as={Link}
-                href='/shop/checkout'
-              >
-                Checkout
-              </Button>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CartDetail
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
index 96e7c713..10d7493a 100644
--- a/src-migrate/modules/cart/components/ItemSelect.tsx
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -27,10 +27,11 @@ const CartItemSelect = ({ item }: Props) => {
   }
 
   return (
-    <div className='w-5 my-auto'>
+    <div className='w-6 my-auto'>
       {isLoad && (
         <Spinner className='my-auto' size='sm' />
       )}
+
       {!isLoad && (
         <Checkbox
           borderColor='gray.600'
-- 
cgit v1.2.3


From fb14d51cccd4c5c3c8aed57bcaee920a2e6f3355 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 12 Jan 2024 15:18:00 +0700
Subject: Fix go to quotation button in cart page

---
 src-migrate/modules/cart/components/Detail.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Detail.tsx b/src-migrate/modules/cart/components/Detail.tsx
index ccb0bb4d..99fe4c91 100644
--- a/src-migrate/modules/cart/components/Detail.tsx
+++ b/src-migrate/modules/cart/components/Detail.tsx
@@ -58,6 +58,8 @@ const CartDetail = () => {
                 colorScheme='yellow'
                 w='full'
                 isDisabled={hasSelectedPromo || !hasSelected}
+                as={Link}
+                href='/shop/quotation'
               >
                 Quotation
               </Button>
-- 
cgit v1.2.3


From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 13 Jan 2024 10:35:22 +0700
Subject: Refactor src migrate folder

---
 src-migrate/modules/cart/components/Item.tsx       | 4 ++--
 src-migrate/modules/cart/components/ItemAction.tsx | 4 ++--
 src-migrate/modules/cart/components/ItemPromo.tsx  | 2 +-
 src-migrate/modules/cart/components/ItemSelect.tsx | 4 ++--
 src-migrate/modules/cart/components/Summary.tsx    | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index baf48bb6..08823d19 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -7,8 +7,8 @@ import { InfoIcon } from 'lucide-react'
 
 import { PROMO_CATEGORY } from '~/constants/promotion'
 
-import formatCurrency from '~/common/libs/formatCurrency'
-import { CartItem as CartItemProps } from '~/common/types/cart'
+import formatCurrency from '~/libs/formatCurrency'
+import { CartItem as CartItemProps } from '~/types/cart'
 
 import CartItemPromo from './ItemPromo'
 import CartItemAction from './ItemAction'
diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx
index 3e264aef..859c758c 100644
--- a/src-migrate/modules/cart/components/ItemAction.tsx
+++ b/src-migrate/modules/cart/components/ItemAction.tsx
@@ -5,8 +5,8 @@ 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 { CartItem } from '~/types/cart'
+import { getAuth } from '~/libs/auth'
 import { deleteUserCart, upsertUserCart } from '~/services/cart'
 
 import { useDebounce } from 'usehooks-ts'
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
index bb286e8b..bc507578 100644
--- a/src-migrate/modules/cart/components/ItemPromo.tsx
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -3,7 +3,7 @@ import style from '../styles/item-promo.module.css'
 import Image from 'next/image'
 import React from 'react'
 
-import { CartProduct } from '~/common/types/cart'
+import { CartProduct } from '~/types/cart'
 
 type Props = {
   product: CartProduct
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
index 10d7493a..1d8886a2 100644
--- a/src-migrate/modules/cart/components/ItemSelect.tsx
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -1,8 +1,8 @@
 import { Checkbox, Spinner } from '@chakra-ui/react'
 import React, { useState } from 'react'
 
-import { getAuth } from '~/common/libs/auth'
-import { CartItem } from '~/common/types/cart'
+import { getAuth } from '~/libs/auth'
+import { CartItem } from '~/types/cart'
 import { upsertUserCart } from '~/services/cart'
 
 import { useCartStore } from '../stores/useCartStore'
diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
index a835bca9..2e55c8df 100644
--- a/src-migrate/modules/cart/components/Summary.tsx
+++ b/src-migrate/modules/cart/components/Summary.tsx
@@ -1,8 +1,8 @@
 import style from '../styles/summary.module.css'
 
 import React from 'react'
-import formatCurrency from '~/common/libs/formatCurrency'
-import clsxm from '~/common/libs/clsxm'
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
 import { Skeleton } from '@chakra-ui/react'
 import _ from 'lodash'
 
-- 
cgit v1.2.3


From fb80b92d502437160e45b237b380071ab102c838 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 22 Jan 2024 10:41:53 +0700
Subject: Update disable checkout when has product price 0 and fix filter brand

---
 src-migrate/modules/cart/components/Detail.tsx | 85 --------------------------
 src-migrate/modules/cart/components/Item.tsx   |  3 +-
 2 files changed, 2 insertions(+), 86 deletions(-)
 delete mode 100644 src-migrate/modules/cart/components/Detail.tsx

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Detail.tsx b/src-migrate/modules/cart/components/Detail.tsx
deleted file mode 100644
index b1532729..00000000
--- a/src-migrate/modules/cart/components/Detail.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import style from '../styles/detail.module.css'
-
-import React, { useEffect, useMemo } from 'react'
-import Link from 'next/link'
-import { Button, Tooltip } from '@chakra-ui/react'
-
-import { getAuth } from '~/libs/auth'
-import { useCartStore } from '../stores/useCartStore'
-
-import CartItem from './Item'
-import CartSummary from './Summary'
-
-const CartDetail = () => {
-  const auth = getAuth()
-
-  const { loadCart, cart, summary } = useCartStore()
-
-  useEffect(() => {
-    if (typeof auth === 'object' && !cart) loadCart(auth.id)
-  }, [auth, loadCart, cart])
-
-  const hasSelectedPromo = useMemo(() => {
-    if (!cart) return false
-    for (const item of cart.products) {
-      if (item.cart_type === 'promotion' && item.selected) return true
-    }
-    return false
-  }, [cart])
-
-  const hasSelected = useMemo(() => {
-    if (!cart) return false
-    for (const item of cart.products) {
-      if (item.selected) return true
-    }
-    return false
-  }, [cart])
-
-  return (
-    <div className={style.wrapper}>
-      <div className='w-full md:w-3/4'>
-        <div className=''>
-          <div className='text-h-lg font-semibold mb-6'>Keranjang Belanja</div>
-          <div className='grid grid-cols-1 gap-y-4'>
-            {!cart && <CartItem.Skeleton count={5} height='120px' />}
-          </div>
-          <div className='flex flex-col gap-y-8 border-t border-gray-300 pt-8'>
-            {cart?.products.map((item) => <CartItem key={item.id} item={item} />)}
-          </div>
-        </div>
-      </div>
-
-      <div className='w-full md:w-1/4 md:pl-6 mt-6 md:mt-0'>
-        <div className='border border-gray-300 p-4 rounded-md sticky top-[180px]'>
-          <CartSummary {...summary} isLoaded={!!cart} />
-          <div className='grid grid-cols-2 gap-x-3 mt-6'>
-            <Tooltip label={hasSelectedPromo ? 'Barang promo tidak dapat dibuat quotation' : ''}>
-              <Button
-                colorScheme='yellow'
-                w='full'
-                isDisabled={hasSelectedPromo || !hasSelected}
-                as={Link}
-                href='/shop/quotation'
-              >
-                Quotation
-              </Button>
-            </Tooltip>
-            <Tooltip label={hasSelected ? '' : 'Tidak ada item yang dipilih'}>
-              <Button
-                colorScheme='red'
-                w='full'
-                isDisabled={!hasSelected}
-                as={Link}
-                href='/shop/checkout'
-              >
-                Checkout
-              </Button>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CartDetail
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 08823d19..48e568e0 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -70,7 +70,8 @@ const CartItem = ({ item, editable = true }: Props) => {
               {item.cart_type === 'product' && (
                 <>
                   <div className={style.price}>
-                    Rp {formatCurrency(item.price.price)}
+                    {item.price.price > 0 && `Rp ${formatCurrency(item.price.price)}`}
+                    {item.price.price === 0 && '-'}
                   </div>
                   <div>{item.code}</div>
                 </>
-- 
cgit v1.2.3


From 1170c52c8dc532f7447d0f10093bd3531767f57e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 19 Feb 2024 13:16:08 +0700
Subject: Add link to product on cart item

---
 src-migrate/modules/cart/components/Item.tsx      | 56 +++++++++++++++++++----
 src-migrate/modules/cart/components/ItemPromo.tsx | 12 +++--
 2 files changed, 54 insertions(+), 14 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 48e568e0..7a4c22cc 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -1,17 +1,18 @@
 import style from '../styles/item.module.css'
 
-import Image from 'next/image'
-import React from 'react'
 import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
 import { InfoIcon } from 'lucide-react'
+import Image from 'next/image'
 
 import { PROMO_CATEGORY } from '~/constants/promotion'
 
 import formatCurrency from '~/libs/formatCurrency'
 import { CartItem as CartItemProps } from '~/types/cart'
 
-import CartItemPromo from './ItemPromo'
+import Link from 'next/link'
+import { createSlug } from '~/libs/slug'
 import CartItemAction from './ItemAction'
+import CartItemPromo from './ItemPromo'
 import CartItemSelect from './ItemSelect'
 
 type Props = {
@@ -20,8 +21,6 @@ type Props = {
 }
 
 const CartItem = ({ item, editable = true }: Props) => {
-  const image = item?.image || item?.parent?.image
-
   return (
     <div className={style.wrapper}>
       {item.cart_type === 'promotion' && (
@@ -47,13 +46,12 @@ const CartItem = ({ item, editable = true }: Props) => {
       <div className={style.mainProdWrapper}>
         {editable && <CartItemSelect item={item} />}
         <div className='w-4' />
-        <div className={style.image}>
-          {image && <Image src={image} alt={item.name} width={128} height={128} />}
-          {!image && <div className={style.noImage}>No Image</div>}
-        </div>
+
+        <CartItem.Image item={item} />
 
         <div className={style.details}>
-          <div className={style.name}>{item.name}</div>
+          <CartItem.Name item={item} />
+
           <div className='mt-2 flex justify-between w-full'>
             <div className='flex flex-col gap-y-1'>
               {item.cart_type === 'promotion' && (
@@ -97,6 +95,44 @@ const CartItem = ({ item, editable = true }: Props) => {
   )
 }
 
+CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
+  const image = item?.image || item?.parent?.image
+
+  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>}
+        </div>
+      )}
+
+      {item.cart_type === 'product' && (
+        <Link href={createSlug('/shop/product/', item.name, item.id.toString())} className={style.image}>
+          {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          {!image && <div className={style.noImage}>No Image</div>}
+        </Link>
+      )}
+    </>
+  )
+}
+
+CartItem.Name = function CartItemName({ item }: { item: CartItemProps }) {
+  return (
+    <>
+      {item.cart_type === 'promotion' && (
+        <div className={style.name}>{item.name}</div>
+      )}
+
+      {item.cart_type === 'product' && (
+        <Link href={createSlug('/shop/product/', item.name, item.id.toString())} className={style.name}>
+          {item.name}
+        </Link>
+      )}
+    </>
+  )
+}
+
 CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: number }) {
   return Array.from({ length: props.count }).map((_, index) => (
     <Skeleton key={index}
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
index bc507578..d355c82a 100644
--- a/src-migrate/modules/cart/components/ItemPromo.tsx
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -1,7 +1,8 @@
 import style from '../styles/item-promo.module.css'
 
 import Image from 'next/image'
-import React from 'react'
+import Link from 'next/link'
+import { createSlug } from '~/libs/slug'
 
 import { CartProduct } from '~/types/cart'
 
@@ -12,12 +13,15 @@ type Props = {
 const CartItemPromo = ({ product }: Props) => {
   return (
     <div key={product.id} className={style.wrapper}>
-      <div className={style.imageWrapper}>
+      <Link href={createSlug('/shop/product/', product.name, product.id.toString())} className={style.imageWrapper}>
         {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} className={style.image} />}
-      </div>
+      </Link>
 
       <div className={style.details}>
-        <div className={style.name}>{product.display_name}</div>
+        <Link href={createSlug('/shop/product/', product.name, product.id.toString())} className={style.name}>
+          {product.display_name}
+        </Link>
+
         <div className='flex w-full'>
           <div className="flex flex-col">
             <div className={style.code}>{product.code}</div>
-- 
cgit v1.2.3


From 410cc16690f97e59b6a93b4196a2c13caf498b4d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 19 Feb 2024 13:28:11 +0700
Subject: Add discount price on cart item

---
 src-migrate/modules/cart/components/Item.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 7a4c22cc..8a6f8822 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -66,15 +66,21 @@ const CartItem = ({ item, editable = true }: Props) => {
               )}
 
               {item.cart_type === 'product' && (
-                <>
+                <div className={style.discPriceSection}>
+                  {item.price.discount_percentage > 0 && (
+                    <span className={style.priceBefore}>
+                      Rp {formatCurrency((item.price.price || 0))}
+                    </span>
+                  )}
+                  
                   <div className={style.price}>
-                    {item.price.price > 0 && `Rp ${formatCurrency(item.price.price)}`}
-                    {item.price.price === 0 && '-'}
+                    {item.price.price_discount > 0 && `Rp ${formatCurrency(item.price.price_discount)}`}
+                    {item.price.price_discount === 0 && '-'}
                   </div>
-                  <div>{item.code}</div>
-                </>
+                </div>
               )}
 
+              <div>{item.cart_type === 'product' && item.code}</div>
               <div>
                 {item.weight} Kg
               </div>
-- 
cgit v1.2.3


From 95f49f1de12ae612957b60ed53cf5993b9b7ef1e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 19 Feb 2024 16:07:25 +0700
Subject: Add promotion program smooth animation

---
 src-migrate/modules/cart/components/Item.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 8a6f8822..ba7f7cdf 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -72,7 +72,7 @@ const CartItem = ({ item, editable = true }: Props) => {
                       Rp {formatCurrency((item.price.price || 0))}
                     </span>
                   )}
-                  
+
                   <div className={style.price}>
                     {item.price.price_discount > 0 && `Rp ${formatCurrency(item.price.price_discount)}`}
                     {item.price.price_discount === 0 && '-'}
@@ -81,9 +81,7 @@ const CartItem = ({ item, editable = true }: Props) => {
               )}
 
               <div>{item.cart_type === 'product' && item.code}</div>
-              <div>
-                {item.weight} Kg
-              </div>
+              <div>{item.weight} Kg</div>
             </div>
 
             {editable && <CartItemAction item={item} />}
-- 
cgit v1.2.3


From 30da2d088793cabfb3c5b21d4560df53187e7047 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 16:30:43 +0700
Subject: Fix item url in cart item

---
 src-migrate/modules/cart/components/Item.tsx      | 10 ++++++++--
 src-migrate/modules/cart/components/ItemPromo.tsx |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index ba7f7cdf..d2bbdbdd 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -112,7 +112,10 @@ CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
       )}
 
       {item.cart_type === 'product' && (
-        <Link href={createSlug('/shop/product/', item.name, item.id.toString())} className={style.image}>
+        <Link
+          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
+          className={style.image}
+        >
           {image && <Image src={image} alt={item.name} width={128} height={128} />}
           {!image && <div className={style.noImage}>No Image</div>}
         </Link>
@@ -129,7 +132,10 @@ CartItem.Name = function CartItemName({ item }: { item: CartItemProps }) {
       )}
 
       {item.cart_type === 'product' && (
-        <Link href={createSlug('/shop/product/', item.name, item.id.toString())} className={style.name}>
+        <Link
+          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
+          className={style.name}
+        >
           {item.name}
         </Link>
       )}
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
index d355c82a..878e17ac 100644
--- a/src-migrate/modules/cart/components/ItemPromo.tsx
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -13,12 +13,12 @@ type Props = {
 const CartItemPromo = ({ product }: Props) => {
   return (
     <div key={product.id} className={style.wrapper}>
-      <Link href={createSlug('/shop/product/', product.name, product.id.toString())} className={style.imageWrapper}>
+      <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.imageWrapper}>
         {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} className={style.image} />}
       </Link>
 
       <div className={style.details}>
-        <Link href={createSlug('/shop/product/', product.name, product.id.toString())} className={style.name}>
+        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.name}>
           {product.display_name}
         </Link>
 
-- 
cgit v1.2.3


From ab61908296a05d303cb9c0d019b5a92002e03972 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 21 Feb 2024 09:12:40 +0700
Subject: Fix weight on cart

---
 src-migrate/modules/cart/components/Item.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index d2bbdbdd..6ded6373 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -3,14 +3,13 @@ import style from '../styles/item.module.css'
 import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
 import { InfoIcon } from 'lucide-react'
 import Image from 'next/image'
+import Link from 'next/link'
 
 import { PROMO_CATEGORY } from '~/constants/promotion'
-
 import formatCurrency from '~/libs/formatCurrency'
+import { createSlug } from '~/libs/slug'
 import { CartItem as CartItemProps } from '~/types/cart'
 
-import Link from 'next/link'
-import { createSlug } from '~/libs/slug'
 import CartItemAction from './ItemAction'
 import CartItemPromo from './ItemPromo'
 import CartItemSelect from './ItemSelect'
@@ -81,7 +80,7 @@ const CartItem = ({ item, editable = true }: Props) => {
               )}
 
               <div>{item.cart_type === 'product' && item.code}</div>
-              <div>{item.weight} Kg</div>
+              <div>{Math.round(item.weight * 10) / 10} Kg</div>
             </div>
 
             {editable && <CartItemAction item={item} />}
-- 
cgit v1.2.3


From a698514b32353d8f6386ce8ba8c20941ab65f569 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 26 Feb 2024 15:12:12 +0700
Subject: Add qty append on upsert cart api

---
 src-migrate/modules/cart/components/ItemSelect.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
index 1d8886a2..b904a1de 100644
--- a/src-migrate/modules/cart/components/ItemSelect.tsx
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -21,7 +21,13 @@ const CartItemSelect = ({ item }: Props) => {
     if (typeof auth !== 'object') return
 
     setIsLoad(true)
-    await upsertUserCart(auth.id, item.cart_type, item.id, item.quantity, e.target.checked)
+    await upsertUserCart({
+      userId: auth.id,
+      type: item.cart_type,
+      id: item.id,
+      qty: item.quantity,
+      selected: e.target.checked
+    })
     await loadCart(auth.id)
     setIsLoad(false)
   }
-- 
cgit v1.2.3


From 7a4d2462d05b2cc0e9c66551f1e2c16d4abace2f Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 26 Feb 2024 15:16:28 +0700
Subject: Update upsert user cart

---
 src-migrate/modules/cart/components/ItemAction.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx
index 859c758c..e73d507b 100644
--- a/src-migrate/modules/cart/components/ItemAction.tsx
+++ b/src-migrate/modules/cart/components/ItemAction.tsx
@@ -51,7 +51,13 @@ const CartItemAction = ({ item }: Props) => {
       if (typeof auth !== 'object' || isNaN(debounceQty)) return
 
       setIsLoadQuantity(true)
-      await upsertUserCart(auth.id, item.cart_type, item.id, debounceQty, item.selected)
+      await upsertUserCart({
+        userId: auth.id,
+        type: item.cart_type,
+        id: item.id,
+        qty: debounceQty,
+        selected: item.selected,
+      })
       await loadCart(auth.id)
       setIsLoadQuantity(false)
     }
-- 
cgit v1.2.3


From 5d207f5bc60a0ed5d4adfd9eabd7f6459ccc2d84 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Fri, 8 Mar 2024 10:19:23 +0700
Subject: CR - Keranjang Mobile : informasi harga

---
 src-migrate/modules/cart/components/Summary.tsx | 110 +++++++++++++-----------
 1 file changed, 61 insertions(+), 49 deletions(-)

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
index 2e55c8df..1e76d4fa 100644
--- a/src-migrate/modules/cart/components/Summary.tsx
+++ b/src-migrate/modules/cart/components/Summary.tsx
@@ -1,20 +1,20 @@
-import style from '../styles/summary.module.css'
+import style from '../styles/summary.module.css';
 
-import React from 'react'
-import formatCurrency from '~/libs/formatCurrency'
-import clsxm from '~/libs/clsxm'
-import { Skeleton } from '@chakra-ui/react'
-import _ from 'lodash'
+import React from 'react';
+import formatCurrency from '~/libs/formatCurrency';
+import clsxm from '~/libs/clsxm';
+import { Skeleton } from '@chakra-ui/react';
+import _ from 'lodash';
 
 type Props = {
-  total?: number
-  discount?: number
-  subtotal?: number
-  tax?: number
-  shipping?: number
-  grandTotal?: number
-  isLoaded: boolean
-}
+  total?: number;
+  discount?: number;
+  subtotal?: number;
+  tax?: number;
+  shipping?: number;
+  grandTotal?: number;
+  isLoaded: boolean;
+};
 
 const CartSummary = ({
   total,
@@ -27,49 +27,61 @@ const CartSummary = ({
 }: Props) => {
   return (
     <>
-      <div className='text-h-sm font-medium'>Ringkasan Pesanan</div>
-
-      <div className="h-6" />
+      <div className='text-h-sm font-medium hidden md:block'>
+        Ringkasan Pesanan
+      </div>
 
-      <div className='flex flex-col gap-y-3'>
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={style.label}>Total Belanja</span>
-          <span className={style.value}>Rp {formatCurrency(subtotal || 0)}</span>
-        </Skeleton>
+      <div className='h-6' />
 
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={style.label}>Total Diskon</span>
-          <span className={clsxm(style.value, style.discount)}>- Rp {formatCurrency(discount || 0)}</span>
-        </Skeleton>
+      <div className='hidden md:block'>
+        <div className='flex flex-col gap-y-3'>
+          <Skeleton isLoaded={isLoaded} className={style.line}>
+            <span className={style.label}>Total Belanja</span>
+            <span className={style.value}>
+              Rp {formatCurrency(subtotal || 0)}
+            </span>
+          </Skeleton>
 
-        <div className={style.divider} />
+          <Skeleton isLoaded={isLoaded} className={style.line}>
+            <span className={style.label}>Total Diskon</span>
+            <span className={clsxm(style.value, style.discount)}>
+              - Rp {formatCurrency(discount || 0)}
+            </span>
+          </Skeleton>
 
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={style.label}>Subtotal</span>
-          <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
-        </Skeleton>
+          <div className={style.divider} />
 
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={style.label}>Tax 11%</span>
-          <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
-        </Skeleton>
+          <Skeleton isLoaded={isLoaded} className={style.line}>
+            <span className={style.label}>Subtotal</span>
+            <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
+          </Skeleton>
 
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={style.label}>Biaya Kirim</span>
-          <span className={style.value}>Rp {formatCurrency(shipping || 0)}</span>
-        </Skeleton>
+          <Skeleton isLoaded={isLoaded} className={style.line}>
+            <span className={style.label}>Tax 11%</span>
+            <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
+          </Skeleton>
 
-        <div className={style.divider} />
+          <Skeleton isLoaded={isLoaded} className={style.line}>
+            <span className={style.label}>Biaya Kirim</span>
+            <span className={style.value}>
+              Rp {formatCurrency(shipping || 0)}
+            </span>
+          </Skeleton>
 
-        <Skeleton isLoaded={isLoaded} className={style.line}>
-          <span className={clsxm(style.label, style.grandTotal)}>
-            Grand Total
-          </span>
-          <span className={style.value}>Rp {formatCurrency(grandTotal || 0)}</span>
-        </Skeleton>
+          <div className={style.divider} />
+        </div>
       </div>
+
+      <Skeleton isLoaded={isLoaded} className={style.line}>
+        <span className={clsxm(style.label, style.grandTotal)}>
+          Grand Total
+        </span>
+        <span className={style.value}>
+          Rp {formatCurrency(grandTotal || 0)}
+        </span>
+      </Skeleton>
     </>
-  )
-}
+  );
+};
 
-export default CartSummary
\ No newline at end of file
+export default CartSummary;
-- 
cgit v1.2.3


From 9a52d9f835e2f30480142c6197fdf14b3fee5ead Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 12 Mar 2024 09:17:01 +0700
Subject: feedback kerajang di mobile

---
 .../modules/cart/components/CartSummaryMobile.tsx  | 111 +++++++++++++++++++++
 src-migrate/modules/cart/components/Summary.tsx    | 110 +++++++++-----------
 2 files changed, 160 insertions(+), 61 deletions(-)
 create mode 100644 src-migrate/modules/cart/components/CartSummaryMobile.tsx

(limited to 'src-migrate/modules/cart/components')

diff --git a/src-migrate/modules/cart/components/CartSummaryMobile.tsx b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
new file mode 100644
index 00000000..d9f72e0e
--- /dev/null
+++ b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
@@ -0,0 +1,111 @@
+import style from '../styles/summary.module.css';
+
+import React, { useState } from 'react';
+import formatCurrency from '~/libs/formatCurrency';
+import clsxm from '~/libs/clsxm';
+import { Button, Skeleton } from '@chakra-ui/react';
+import _ from 'lodash';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import useDevice from '@/core/hooks/useDevice';
+
+type Props = {
+  total?: number;
+  discount?: number;
+  subtotal?: number;
+  tax?: number;
+  shipping?: number;
+  grandTotal?: number;
+  isLoaded: boolean;
+};
+
+const CartSummaryMobile = ({
+  total,
+  discount,
+  subtotal,
+  tax,
+  shipping,
+  grandTotal,
+  isLoaded = false,
+}: Props) => {
+  const [showPopup, setShowPopup] = useState(false);
+  return (
+    <>
+      <BottomPopup
+        className=' !h-[35%]'
+        title='Ringkasan Pensanan'
+        active={showPopup}
+        close={() => setShowPopup(false)}
+      >
+        <div className='mt-4'>
+          <div className='flex flex-col gap-y-3'>
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Total Belanja</span>
+              <span className={style.value}>
+                Rp {formatCurrency(subtotal || 0)}
+              </span>
+            </Skeleton>
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Total Diskon</span>
+              <span className={clsxm(style.value, style.discount)}>
+                - Rp {formatCurrency(discount || 0)}
+              </span>
+            </Skeleton>
+
+            <div className={style.divider} />
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Subtotal</span>
+              <span className={style.value}>
+                Rp {formatCurrency(total || 0)}
+              </span>
+            </Skeleton>
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Tax 11%</span>
+              <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
+            </Skeleton>
+
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={style.label}>Biaya Kirim</span>
+              <span className={style.value}>
+                Rp {formatCurrency(shipping || 0)}
+              </span>
+            </Skeleton>
+
+            <div className={style.divider} />
+            <Skeleton isLoaded={isLoaded} className={style.line}>
+              <span className={clsxm(style.label, style.grandTotal)}>
+                Grand Total
+              </span>
+              <span className={style.value}>
+                Rp {formatCurrency(grandTotal || 0)}
+              </span>
+            </Skeleton>
+          </div>
+        </div>
+      </BottomPopup>
+      <div className='flex flex-col gap-y-3'>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={clsxm(style.label, style.grandTotal)}>
+            Grand Total
+          </span>
+          <button
+            onClick={() => setShowPopup(true)}
+            className='bg-gray-300 w-6 h-6 items-center justify-center cursor-pointer hover:bg-red-400 md:hidden '
+          >
+            <ChevronDownIcon className='h-6 w-6 text-white' />
+          </button>
+        </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.value}>
+            Rp {formatCurrency(grandTotal || 0)}
+          </span>
+        </Skeleton>
+      </div>
+    </>
+  );
+};
+
+export default CartSummaryMobile;
diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
index 1e76d4fa..2e55c8df 100644
--- a/src-migrate/modules/cart/components/Summary.tsx
+++ b/src-migrate/modules/cart/components/Summary.tsx
@@ -1,20 +1,20 @@
-import style from '../styles/summary.module.css';
+import style from '../styles/summary.module.css'
 
-import React from 'react';
-import formatCurrency from '~/libs/formatCurrency';
-import clsxm from '~/libs/clsxm';
-import { Skeleton } from '@chakra-ui/react';
-import _ from 'lodash';
+import React from 'react'
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/libs/clsxm'
+import { Skeleton } from '@chakra-ui/react'
+import _ from 'lodash'
 
 type Props = {
-  total?: number;
-  discount?: number;
-  subtotal?: number;
-  tax?: number;
-  shipping?: number;
-  grandTotal?: number;
-  isLoaded: boolean;
-};
+  total?: number
+  discount?: number
+  subtotal?: number
+  tax?: number
+  shipping?: number
+  grandTotal?: number
+  isLoaded: boolean
+}
 
 const CartSummary = ({
   total,
@@ -27,61 +27,49 @@ const CartSummary = ({
 }: Props) => {
   return (
     <>
-      <div className='text-h-sm font-medium hidden md:block'>
-        Ringkasan Pesanan
-      </div>
+      <div className='text-h-sm font-medium'>Ringkasan Pesanan</div>
 
-      <div className='h-6' />
+      <div className="h-6" />
 
-      <div className='hidden md:block'>
-        <div className='flex flex-col gap-y-3'>
-          <Skeleton isLoaded={isLoaded} className={style.line}>
-            <span className={style.label}>Total Belanja</span>
-            <span className={style.value}>
-              Rp {formatCurrency(subtotal || 0)}
-            </span>
-          </Skeleton>
+      <div className='flex flex-col gap-y-3'>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Total Belanja</span>
+          <span className={style.value}>Rp {formatCurrency(subtotal || 0)}</span>
+        </Skeleton>
 
-          <Skeleton isLoaded={isLoaded} className={style.line}>
-            <span className={style.label}>Total Diskon</span>
-            <span className={clsxm(style.value, style.discount)}>
-              - Rp {formatCurrency(discount || 0)}
-            </span>
-          </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Total Diskon</span>
+          <span className={clsxm(style.value, style.discount)}>- Rp {formatCurrency(discount || 0)}</span>
+        </Skeleton>
 
-          <div className={style.divider} />
+        <div className={style.divider} />
 
-          <Skeleton isLoaded={isLoaded} className={style.line}>
-            <span className={style.label}>Subtotal</span>
-            <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
-          </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Subtotal</span>
+          <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
+        </Skeleton>
 
-          <Skeleton isLoaded={isLoaded} className={style.line}>
-            <span className={style.label}>Tax 11%</span>
-            <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
-          </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Tax 11%</span>
+          <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
+        </Skeleton>
 
-          <Skeleton isLoaded={isLoaded} className={style.line}>
-            <span className={style.label}>Biaya Kirim</span>
-            <span className={style.value}>
-              Rp {formatCurrency(shipping || 0)}
-            </span>
-          </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Biaya Kirim</span>
+          <span className={style.value}>Rp {formatCurrency(shipping || 0)}</span>
+        </Skeleton>
 
-          <div className={style.divider} />
-        </div>
-      </div>
+        <div className={style.divider} />
 
-      <Skeleton isLoaded={isLoaded} className={style.line}>
-        <span className={clsxm(style.label, style.grandTotal)}>
-          Grand Total
-        </span>
-        <span className={style.value}>
-          Rp {formatCurrency(grandTotal || 0)}
-        </span>
-      </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={clsxm(style.label, style.grandTotal)}>
+            Grand Total
+          </span>
+          <span className={style.value}>Rp {formatCurrency(grandTotal || 0)}</span>
+        </Skeleton>
+      </div>
     </>
-  );
-};
+  )
+}
 
-export default CartSummary;
+export default CartSummary
\ No newline at end of file
-- 
cgit v1.2.3