Fix typing error

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

packages/bigcommerce/src/cart/use-update-item.tsx

@@ -5,9 +5,7 @@ import type {
   HookFetcherContext,
 } from '@vercel/commerce/utils/types'
 import { ValidationError } from '@vercel/commerce/utils/errors'
-import useUpdateItem, {
-  UseUpdateItem,
-} from '@vercel/commerce/cart/use-update-item'
+import useUpdateItem, { UseUpdateItem } from '@vercel/commerce/cart/use-update-item'
 import type { LineItem, UpdateItemHook } from '@vercel/commerce/types/cart'
 import { handler as removeItemHandler } from './use-remove-item'
 import useCart from './use-cart'

packages/opencommerce/src/checkout/use-checkout.tsx

@@ -7,6 +7,7 @@ import useCheckout, {
 } from '@vercel/commerce/checkout/use-checkout'
 import useSubmitCheckout from './use-submit-checkout'
 import { useCheckoutContext } from '@components/checkout/context'
+import { AddressFields } from '../types/customer/address'
 import { useCart } from '../cart'
 
 export default useCheckout as UseCheckout<typeof handler>
@@ -25,11 +26,12 @@ export const handler: SWRHook<GetCheckoutHook> = {
           (group) => group?.type === 'shipping'
         )
       const hasShippingMethods =
-        !!shippingTypeMethod?.availableFulfillmentOptions.length
+        !!shippingTypeMethod?.availableFulfillmentOptions?.length
 
       const { addressFields } = useCheckoutContext()
 
-      const { shippingMethod, ...restAddressFields } = addressFields
+      const { shippingMethod, ...restAddressFields } =
+        addressFields as AddressFields
 
       const hasEnteredAddress = Object.values(restAddressFields).some(
         (fieldValue) => !!fieldValue

packages/opencommerce/src/types/cart.ts

@@ -1,9 +1,30 @@
 import * as Core from '@vercel/commerce/types/cart'
-import { Checkout } from '../../schema'
+import {
+  Checkout as CheckoutSchema,
+  FulfillmentOption as FulfillmentOptionSchema,
+  FulfillmentGroup as FulfillmentGroupSchema,
+} from '../../schema'
 import { ProductVariant } from './product'
 
 export * from '@vercel/commerce/types/cart'
 
+type FulfillmentOption = FulfillmentOptionSchema & {
+  fulfillmentMethod?: NonNullable<FulfillmentOptionSchema['fulfillmentMethod']>
+}
+
+export type FulfillmentGroup = {
+  availableFulfillmentOptions: FulfillmentOption[] | null
+  selectedFulfillmentOption: FulfillmentOption | null
+  data: FulfillmentGroupSchema['data']
+  type: string
+  _id: string
+}
+
+export type Checkout = {
+  fulfillmentGroups: FulfillmentGroup[]
+  summary: CheckoutSchema['summary']
+}
+
 export type Cart = Core.Cart & {
   checkout?: Checkout
 }

packages/opencommerce/src/utils/normalize.ts

@@ -18,8 +18,9 @@ import {
   Cart as OCCart,
   CartItemEdge,
   NavigationTreeItem,
+  Checkout as OCCheckout,
 } from '../../schema'
-import { Cart, LineItem } from '../types/cart'
+import { Cart, Checkout, LineItem, FulfillmentGroup } from '../types/cart'
 
 const normalizeProductImages = (images: ImageInfo[], name: string) =>
   images.map((image) => ({
@@ -256,7 +257,32 @@ export function normalizeCart(cart: OCCart): Cart {
     totalPrice: cart.checkout?.summary?.total?.amount ?? 0,
     discounts: [],
     taxesIncluded: !!cart.checkout?.summary?.taxTotal?.amount,
-    checkout: cart.checkout ? cart.checkout : undefined,
+    checkout: cart.checkout ? normalizeCheckout(cart.checkout) : undefined,
+  }
+}
+
+function filterNullValue<T>(
+  items: (T | null | undefined)[] | null | undefined
+): T[] {
+  return items?.filter((item: T | null | undefined): item is T => !!item) ?? []
+}
+
+function normalizeCheckout(checkout: OCCheckout): Checkout {
+  const fulfillmentGroups = filterNullValue(checkout.fulfillmentGroups).map(
+    (group) => ({
+      selectedFulfillmentOption: group.selectedFulfillmentOption,
+      type: group.type,
+      _id: group._id,
+      data: group.data,
+      availableFulfillmentOptions: filterNullValue(
+        group.availableFulfillmentOptions
+      ),
+    })
+  ) as FulfillmentGroup[]
+
+  return {
+    ...checkout,
+    fulfillmentGroups,
   }
 }
 

site/components/checkout/ShippingMethodView/ShippingMethodView.tsx

@@ -4,14 +4,15 @@ import SidebarLayout from '@components/common/SidebarLayout'
 import { useUI } from '@components/ui/context'
 import { Button } from '@components/ui'
 import { useCheckoutContext } from '../context'
-import { Key, ReactChild, ReactFragment, ReactPortal } from 'react'
 
 type FulfillmentGroup = {
   type: string
+  _id: string
+  availableFulfillmentOptions: FulfillmentOption[] | null
 }
 
 type FulfillmentOption = {
-  fulfillmentMethod: {
+  fulfillmentMethod?: {
     _id: string
     displayName: string
   }
@@ -55,7 +56,7 @@ const ShippingMethod = () => {
             Shipping Methods
           </h2>
           <div>
-            {shippingGroup.availableFulfillmentOptions.map(
+            {shippingGroup.availableFulfillmentOptions?.map(
               (option: FulfillmentOption) => (
                 <div
                   className="flex flex-row my-3 items-center justify-between"

site/components/checkout/context.tsx

@@ -16,7 +16,9 @@ export type State = {
 
 type CheckoutContextType = State & {
   setCardFields: (cardFields: CardFields) => void
-  setAddressFields: (addressFields: AddressFields) => void
+  setAddressFields: <T extends AddressFields = AddressFields>(
+    addressFields: T
+  ) => void
   clearCheckoutFields: () => void
 }