saleor: shall the cart appear!

components/common/UserNav/UserNav.tsx

@@ -18,7 +18,8 @@ const countItem = (count: number, item: LineItem) => count + item.quantity
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
-  const { data: customer } = useCustomer()
+  let customer;
+  // const { data: customer } = useCustomer()
   const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
   const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
 

framework/saleor/cart/use-cart.tsx

@@ -30,14 +30,15 @@ export const handler: SWRHook<
           checkoutId: getCheckoutId().checkoutToken,
         },
       })
-      checkout = data.node
+
+      checkout = data;
     }
 
     if (checkout?.completedAt || !checkoutId) {
       checkout = await checkoutCreate(fetch)
     }
 
-    return checkoutToCart({ checkout })
+    return checkoutToCart(checkout);
   },
   useHook: ({ useData }) => (input) => {
     const response = useData({

framework/saleor/types.ts

@@ -1,10 +1,10 @@
 import * as Core from '@commerce/types'
-import { CheckoutLineItem } from './schema'
+import { CheckoutLine } from './schema'
 
 export type SaleorCheckout = {
   id: string
   webUrl: string
-  lineItems: CheckoutLineItem[]
+  lineItems: CheckoutLine[]
 }
 
 export type Cart = Core.Cart & {

framework/saleor/utils/checkout-to-cart.ts

@@ -2,11 +2,10 @@ import { Cart } from '../types'
 import { CommerceError } from '@commerce/utils/errors'
 
 import {
-  CheckoutLineItemsAddPayload,
-  CheckoutLineItemsRemovePayload,
-  CheckoutLineItemsUpdatePayload,
-  CheckoutCreatePayload,
-  CheckoutUserError,
+  CheckoutLinesAdd,
+  CheckoutLinesUpdate,
+  CheckoutCreate,
+  CheckoutError,
   Checkout,
   Maybe,
 } from '../schema'
@@ -16,14 +15,13 @@ import throwUserErrors from './throw-user-errors'
 
 export type CheckoutQuery = {
   checkout: Checkout
-  checkoutUserErrors?: Array<CheckoutUserError>
+  errors?: Array<CheckoutError>
 }
 
 export type CheckoutPayload =
-  | CheckoutLineItemsAddPayload
-  | CheckoutLineItemsUpdatePayload
-  | CheckoutLineItemsRemovePayload
-  | CheckoutCreatePayload
+  | CheckoutLinesAdd
+  | CheckoutLinesUpdate
+  | CheckoutCreate
   | CheckoutQuery
 
 const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
@@ -34,7 +32,7 @@ const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
   }
 
   const checkout = checkoutPayload?.checkout
-  throwUserErrors(checkoutPayload?.checkoutUserErrors)
+  throwUserErrors(checkoutPayload?.errors)
 
   if (!checkout) {
     throw new CommerceError({

framework/saleor/utils/mutations/checkout-line-item-update.ts

@@ -2,15 +2,15 @@ import { checkoutDetailsFragment } from '../queries/get-checkout-query'
 
 const checkoutLineItemUpdateMutation = /* GraphQL */ `
   mutation checkoutLineItemUpdate($checkoutId: ID!, $lineItems: [CheckoutLineItemUpdateInput!]!) {
-    checkoutLineItemsUpdate(checkoutId: $checkoutId, lineItems: $lineItems) {
-      checkoutUserErrors {
+    checkoutLinesUpdate(checkoutId: $checkoutId, lineItems: $lineItems) {
+      errors {
         code
         field
         message
       }
-      # checkout {
-      #   ${checkoutDetailsFragment}
-      # }
+      checkout {
+        ${checkoutDetailsFragment}
+      }
     }
   }
 `

framework/saleor/utils/normalize.ts

@@ -3,12 +3,7 @@ import { Product } from '@commerce/types'
 import {
   Product as SaleorProduct,
   Checkout,
-  CheckoutLineItemEdge,
-  SelectedOption,
-  ImageConnection,
-  ProductVariantConnection,
-  MoneyV2,
-  ProductOption,
+  CheckoutLine,
   Money,
 } from '../schema'
 
@@ -111,49 +106,46 @@ export function normalizeProduct(productNode: SaleorProduct): Product {
 }
 
 export function normalizeCart(checkout: Checkout): Cart {
+  const lines = checkout.lines as CheckoutLine[]; 
+  const lineItems: LineItem[] = lines.length > 0 ? lines?.map<LineItem>(normalizeLineItem) : [];
+
   return {
     id: checkout.id,
     customerId: '',
     email: '',
-    createdAt: checkout.createdAt,
+    createdAt: checkout.created,
     currency: {
-      code: checkout.totalPriceV2?.currencyCode,
+      code: checkout.totalPrice?.currency!
     },
-    taxesIncluded: checkout.taxesIncluded,
-    lineItems: checkout.lineItems?.edges.map(normalizeLineItem),
-    lineItemsSubtotalPrice: +checkout.subtotalPriceV2?.amount,
-    subtotalPrice: +checkout.subtotalPriceV2?.amount,
-    totalPrice: checkout.totalPriceV2?.amount,
+    taxesIncluded: false,
+    lineItems, 
+    lineItemsSubtotalPrice: 0, 
+    subtotalPrice: 0, 
+    totalPrice: checkout.totalPrice?.gross.amount!,
     discounts: [],
   }
 }
 
-function normalizeLineItem({
-  node: { id, title, variant, quantity, ...rest },
-}: CheckoutLineItemEdge): LineItem {
+function normalizeLineItem({ id, variant, quantity }: CheckoutLine): LineItem {
   return {
     id,
     variantId: String(variant?.id),
     productId: String(variant?.id),
-    name: `${title}`,
+    name: `${variant.name}`,
     quantity,
     variant: {
       id: String(variant?.id),
       sku: variant?.sku ?? '',
-      name: variant?.title!,
+      name: variant?.name!,
       image: {
-        url: variant?.image?.originalSrc ?? '/product-img-placeholder.svg',
+        url: variant?.media![0].url ?? '/product-img-placeholder.svg',
       },
-      requiresShipping: variant?.requiresShipping ?? false,
-      price: variant?.priceV2?.amount,
-      listPrice: variant?.compareAtPriceV2?.amount,
+      requiresShipping: false,
+      price: variant?.pricing?.price?.gross.amount!,
+      listPrice: 0 
     },
-    path: String(variant?.product?.handle),
+    path: String(variant?.product?.slug),
     discounts: [],
-    options: [
-      {
-        value: variant?.title,
-      },
-    ],
+    options: [ ],
   }
 }

framework/saleor/utils/queries/get-checkout-query.ts

@@ -1,6 +1,37 @@
 export const checkoutDetailsFragment = `
   id
   token
+  created
+
+  lines {
+    id
+    variant {
+      id
+      name
+      sku
+      product {
+        slug
+      }
+      media {
+        url
+      }
+      pricing {
+        price {
+          gross {
+            amount
+          }
+        }
+        
+      }
+    }
+    quantity
+    totalPrice {
+      currency
+      gross {
+        amount
+      }
+    }
+  }
 `
 
 const getCheckoutQuery = /* GraphQL */ `