Normalizing Cart Responses

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -12,6 +12,7 @@ import s from './CartSidebarView.module.css'
 const CartSidebarView: FC = () => {
   const { closeSidebar } = useUI()
   const { data, isEmpty } = useCart()
+
   const { price: subTotal } = usePrice(
     data && {
       amount: data.base_amount,

components/common/Layout/Layout.tsx

@@ -7,13 +7,12 @@ import { useUI } from '@components/ui/context'
 import { Navbar, Footer } from '@components/common'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
-import { CartSidebarView } from '@components/cart'
+import CartSidebarView from '@components/cart/CartSidebarView'
 
 import LoginView from '@components/auth/LoginView'
 import { CommerceProvider } from '@framework'
 import type { Page } from '@framework/api/operations/get-all-pages'
 
-
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
     <LoadingDots />
@@ -28,10 +27,12 @@ const SignUpView = dynamic(
   () => import('@components/auth/SignUpView'),
   dynamicProps
 )
+
 const ForgotPassword = dynamic(
   () => import('@components/auth/ForgotPassword'),
   dynamicProps
 )
+
 const FeatureBar = dynamic(
   () => import('@components/common/FeatureBar'),
   dynamicProps

components/product/helpers.ts

@@ -3,11 +3,6 @@ export type SelectedOptions = {
   color: string | null
 }
 
-export type ProductOption = {
-  displayName: string
-  values: any
-}
-
 export function getVariant(product: Product, opts: SelectedOptions) {
   const variant = product.variants.find((variant) => {
     return Object.entries(opts).every(([key, value]) =>

framework/bigcommerce/cart/use-cart.tsx

@@ -2,6 +2,7 @@ import type { HookFetcher } from '@commerce/utils/types'
 import type { SwrOptions } from '@commerce/utils/use-data'
 import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
 import type { Cart } from '../api/cart'
+import { normalizeCart } from '../lib/normalize'
 
 const defaultOpts = {
   url: '/api/bigcommerce/cart',
@@ -39,7 +40,7 @@ export function extendHook(
       set: (x) => x,
     })
 
-    return response
+    return normalizeCart(response)
   }
 
   useCart.extend = extendHook

framework/bigcommerce/lib/normalize.ts

@@ -1,6 +1,6 @@
 import { Product as BCProduct } from '@framework/schema'
 
-function productOptionNormalize({
+function normalizeProductOption({
   node: {
     entityId,
     values: { edges },
@@ -9,7 +9,7 @@ function productOptionNormalize({
 }: any) {
   return {
     id: entityId,
-    values: edges.map(({ node }: any) => node),
+    values: edges?.map(({ node }: any) => node),
     ...rest,
   }
 }
@@ -45,16 +45,18 @@ export function normalizeProduct(productNode: BCProduct): Product {
       ? variants.edges.map(
           ({ node: { entityId, productOptions, ...rest } }: any) => ({
             id: entityId,
-            options: productOptions.edges.map(productOptionNormalize),
+            options: productOptions?.edges
+              ? productOptions.edges.map(normalizeProductOption)
+              : [],
             ...rest,
           })
         )
       : [],
     options: productOptions.edges
-      ? productOptions.edges.map(productOptionNormalize)
+      ? productOptions?.edges.map(normalizeProductOption)
       : [],
     brand: {
-      id: brand?.entityId,
+      id: brand?.entityId ? brand?.entityId : null,
       ...brand,
     },
     price: {
@@ -64,3 +66,13 @@ export function normalizeProduct(productNode: BCProduct): Product {
     ...rest,
   }
 }
+
+export function normalizeCart({ data, ...rest }: any) {
+  return {
+    ...rest,
+    data: {
+      products: data?.line_items?.physical_items ?? [],
+      ...data,
+    },
+  }
+}

framework/commerce/cart/use-cart.tsx

@@ -9,7 +9,7 @@ export type CartResponse<Result> = responseInterface<Result, Error> & {
 }
 
 export type CartInput = {
-  cartId: string | undefined
+  cartId: Cart['id']
 }
 
 export default function useCart<Result>(

framework/types.d.ts

@@ -42,7 +42,10 @@ interface ProductPrice {
 }
 
 interface Cart extends Entity {
-  id: string
+  id: string | undefined
+  currency: { code: string }
+  taxIncluded?: boolean
+  totalAmmount: number | string
   products: Pick<Product, 'id' | 'name' | 'prices'>[]
 }
 

pages/cart.tsx

@@ -22,23 +22,34 @@ export async function getStaticProps({
 
 export default function Cart() {
   const { data, isEmpty } = useCart()
-  const { price: subTotal } = usePrice(
+  const loading = !data
-    data && {
-      amount: data.base_amount,
-      currencyCode: data.currency.code,
-    }
-  )
-  const { price: total } = usePrice(
-    data && {
-      amount: data.cart_amount,
-      currencyCode: data.currency.code,
-    }
-  )
 
-  const items = data?.line_items.physical_items ?? []
+  if (loading) {
+    // Load skeleton
+    return <div>Loading</div>
+  }
 
-  const error = null
+  console.log('Cart Data', data)
-  const success = null
+
+  // const { price: subTotal } = usePrice(
+  //   data && {
+  //     amount: data.base_amount,
+  //     currencyCode: data.currency.code,
+  //   }
+  // )
+  // const { price: total } = usePrice(
+  //   data && {
+  //     amount: data.cart_amount,
+  //     currencyCode: data.currency.code,
+  //   }
+  // )
+
+  // const items = data?.line_items.physical_items ?? []
+
+  // const error = null
+  // const success = null
+
+  return <div>hola</div>
 
   return (
     <div className="grid lg:grid-cols-12">