3 files changed, 58 insertions, 0 deletions
diff --git a/src/lib/cart/api/CartApi.js b/src/lib/cart/api/CartApi.js
new file mode 100644
index 00000000..9a5b5053
--- /dev/null
+++ b/src/lib/cart/api/CartApi.js
@@ -0,0 +1,11 @@
+import odooApi from "@/core/api/odooApi"
+
+const CartApi = async ({ variantIds }) => {
+  if (variantIds) {
+    const dataCart = await odooApi('GET', `/api/v1/product_variant/${variantIds}`)
+    return dataCart
+  }
+  return null
+}
+
+export default CartApi
+\ No newline at end of file
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
new file mode 100644
index 00000000..5f9ae1c0
--- /dev/null
+++ b/src/lib/cart/components/Cart.jsx
@@ -0,0 +1,30 @@
+import Link from "@/core/components/elements/Link/Link"
+import useCart from "../hooks/useCart"
+import Image from "@/core/components/elements/Image/Image"
+
+const Cart = () => {
+  const { cart } = useCart()
+  
+  return (
+    <div className="p-4">
+      <div className="flex justify-between mb-4">
+        <h1 className="font-semibold">Daftar Produk Belanja</h1>
+        <Link href="/">Cari Produk Lain</Link>
+      </div>
+      <div className="flex flex-col gap-y-4">
+        { cart.data?.map((product) => (
+          <div key={product.id} className="flex">
+            <div className="w-4/12">
+              <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md" />
+            </div>
+            <div className="flex-1 px-2">
+              <div>{ product?.parent?.name }</div>
+            </div>
+          </div>
+        )) }
+      </div>
+    </div>
+  )
+}
+
+export default Cart
+\ No newline at end of file
diff --git a/src/lib/cart/hooks/useCart.js b/src/lib/cart/hooks/useCart.js
new file mode 100644
index 00000000..44931b8a
--- /dev/null
+++ b/src/lib/cart/hooks/useCart.js
@@ -0,0 +1,17 @@
+import { getCart } from "@/core/utils/cart"
+import { useQuery } from "react-query"
+import _ from "lodash"
+import CartApi from "../api/CartApi"
+
+const useCart = () => {
+  const cart = getCart()
+  const variantIds = _.keys(cart).join(',')
+  const fetchCart = async () => CartApi({ variantIds })
+  const { data, isLoading } = useQuery('cart', fetchCart)
+
+  return {
+    cart: { data, isLoading }
+  }
+}
+
+export default useCart
+\ No newline at end of file