1 files changed, 85 insertions, 0 deletions
diff --git a/src-migrate/modules/cart/components/Detail.tsx b/src-migrate/modules/cart/components/Detail.tsx
new file mode 100644
index 00000000..b1532729
--- /dev/null
+++ b/src-migrate/modules/cart/components/Detail.tsx
@@ -0,0 +1,85 @@
+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