Cart Implementation

- Add to cart
 - Update cart
 - Delete cart
 - Remove cart item
 - Cart and cart item normalization

framework/elasticpath/cart/use-add-item.tsx

@@ -1,17 +1,30 @@
+import { useCallback } from 'react'
+
 import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
 import { MutationHook } from '@commerce/utils/types'
+import useCart from './use-cart'
+import epClient from '../utils/ep-client'
+import normalizeCart from '../utils/normalize-cart'
 
 export default useAddItem as UseAddItem<typeof handler>
 export const handler: MutationHook<any> = {
   fetchOptions: {
     query: '',
   },
-  async fetcher({ input, options, fetch }) {},
+  async fetcher({ input, options, fetch }) {
-  useHook:
+    return epClient.Cart().AddProduct(input.productId);
-    ({ fetch }) =>
+  },
-    () => {
+  useHook: ({ fetch }) => () => {
-      return async function addItem() {
+    const { mutate } = useCart()
-        return {}
+
-      }
+    return useCallback(
-    },
+      async function addItem(input) {
-}
+        const data = await fetch({ input })
+        const cartData = normalizeCart(data, await epClient.Cart().Items());
+        await mutate(cartData, true)
+        return cartData
+      },
+      [fetch, mutate]
+    )
+  },
+}

framework/elasticpath/cart/use-cart.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react'
 import { SWRHook } from '@commerce/utils/types'
 import useCart, { UseCart } from '@commerce/cart/use-cart'
+import epClient from '../utils/ep-client'
+import normalizeCart from '../utils/normalize-cart'
 
 export default useCart as UseCart<typeof handler>
 
@@ -8,35 +10,27 @@ export const handler: SWRHook<any> = {
   fetchOptions: {
     query: '',
   },
-  async fetcher() {
+  async fetcher({fetch}) {
-    return {
+    const {data:cartData} = await epClient.Cart().Get();
-      id: '',
+    const {data:cartItems} = await epClient.Cart().Items();
-      createdAt: '',
+    return normalizeCart(cartData, cartItems);
-      currency: { code: '' },
-      taxesIncluded: '',
-      lineItems: [],
-      lineItemsSubtotalPrice: '',
-      subtotalPrice: 0,
-      totalPrice: 0,
-    }
   },
-  useHook:
+  useHook: ({ useData }) => (input) => {
-    ({ useData }) =>
+    const response = useData({
-    (input) => {
+      swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
-      return useMemo(
+    })
-        () =>
+    console.log("checking data..", epClient.Cart());
-          Object.create(
+    return useMemo(
-            {},
+      () =>
-            {
+        Object.create(response, {
-              isEmpty: {
+          isEmpty: {
-                get() {
+            get() {
-                  return true
+              return (response.data?.lineItems.length ?? 0) <= 0
-                },
+            },
-                enumerable: true,
+            enumerable: true,
-              },
+          },
-            }
+        }),
-          ),
+      [response]
-        []
+    )
-      )
     },
 }

framework/elasticpath/cart/use-remove-item.tsx

@@ -1,5 +1,10 @@
+import { useCallback } from 'react'
+
 import { MutationHook } from '@commerce/utils/types'
 import useRemoveItem, { UseRemoveItem } from '@commerce/cart/use-remove-item'
+import useCart from './use-cart'
+import epClient from '../utils/ep-client'
+import normalizeCart from '../utils/normalize-cart'
 
 export default useRemoveItem as UseRemoveItem<typeof handler>
 
@@ -7,12 +12,20 @@ export const handler: MutationHook<any> = {
   fetchOptions: {
     query: '',
   },
-  async fetcher({ input, options, fetch }) {},
+  async fetcher({ input }) {
-  useHook:
+    return epClient.Cart().RemoveItem(input.id);
-    ({ fetch }) =>
+  },
-    () => {
+  useHook: ({ fetch }) => () => {
-      return async function removeItem(input) {
+    const { mutate } = useCart()
-        return {}
+
-      }
+    return useCallback(
-    },
+      async function addItem(input) {
+        const data = await fetch({ input })
+        const cartData = normalizeCart(data, await epClient.Cart().Items());
+        await mutate(cartData, true)
+        return cartData
+      },
+      [fetch, mutate]
+    )
+  },
 }

framework/elasticpath/cart/use-update-item.tsx

@@ -1,5 +1,9 @@
 import { MutationHook } from '@commerce/utils/types'
 import useUpdateItem, { UseUpdateItem } from '@commerce/cart/use-update-item'
+import epClient from '../utils/ep-client'
+import normalizeCart from '../utils/normalize-cart'
+import { useCallback } from 'react'
+import useCart from './use-cart'
 
 export default useUpdateItem as UseUpdateItem<any>
 
@@ -7,12 +11,27 @@ export const handler: MutationHook<any> = {
   fetchOptions: {
     query: '',
   },
-  async fetcher({ input, options, fetch }) {},
+  async fetcher({input}) {
-  useHook:
+    return epClient.Cart().UpdateItem(input.id, input.quantity);
-    ({ fetch }) =>
+  },
-    () => {
+  useHook: ({ fetch }) => (ctx) => {
-      return async function addItem() {
+    console.log(ctx);
-        return {}
+    const { mutate } = useCart()
-      }
+
-    },
+    return useCallback(
+      async function addItem(input) {
+        const cartItemsRes = await fetch({ 
+          input: {
+            ...ctx.item,
+            ...input
+          }
+        });
+        const {data:cartObj} = await epClient.Cart().Get();
+        const cartData = normalizeCart(cartObj, cartItemsRes.data);
+        await mutate(cartData, false);
+        return cartData
+      },
+      [fetch, mutate]
+    )
+  }
 }

framework/elasticpath/utils/normalize-cart.js

@@ -0,0 +1,50 @@
+const normalizeLineItem = ({
+  id, 
+  name, 
+  quantity, 
+  product_id:productId,
+  sku,
+  image,
+  value,
+  unit_price
+}) => {
+  const item = {
+    id,
+    variantId: productId,
+    productId,
+    name,
+    quantity,
+    variant: {
+      id: productId,
+      sku,
+      name,
+      image: {
+        url: image.href || '/',
+      },
+      requiresShipping: false,
+      price: (unit_price.amount/100),
+      listPrice: (unit_price.amount/100),
+    },
+    path: '',
+    discounts: [],
+    options: [],
+  }
+  return item
+}
+
+const normalizeCart = async (cart, lineItems) => {
+  const {with_tax, without_tax} = cart.meta?.display_price;
+
+  return {
+    id: cart.id,
+    createdAt: cart.meta.timestamps.created_at,
+    currency: { code: with_tax.currency },
+    taxesIncluded: '',
+    lineItems: lineItems?.map(normalizeLineItem) ?? [],
+    lineItemsSubtotalPrice: cart.meta?.display_price.without_tax || 0,
+    subtotalPrice: (without_tax.amount/100) || 0,
+    totalPrice: (with_tax.amount/100) || 0,
+  };
+}
+
+export default normalizeCart;