Fix build failed for all providers (#9)

* Update type for cart data

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

* Fix build fails for all providers

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

packages/bigcommerce/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/bigcommerce/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/commerce/src/types/site.ts

@@ -12,11 +12,13 @@ export type Navigation = any
 export type SiteTypes = {
   category: Category
   brand: Brand
+  navigation?: Navigation
 }
 
 export type GetSiteInfoOperation<T extends SiteTypes = SiteTypes> = {
   data: {
     categories: T['category'][]
     brands: T['brand'][]
+    navigation?: T['navigation'][]
   }
 }

packages/commercejs/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/kibocommerce/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/kibocommerce/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/opencommerce/src/api/endpoints/customer/address/update-item.ts

@@ -15,14 +15,14 @@ const updateItem: CustomerAddressEndpoint['handlers']['updateItem'] = async ({
     })
   }
 
-  if (item.shippingMethod) {
+  if (item.shippingMethodId) {
     await fetch(selectFulfillmentOptions, {
       variables: {
         input: {
           cartId,
           cartToken: cookies[anonymousCartTokenCookie],
-          fulfillmentGroupId: item.shippingMethod.fulfillmentGroupId,
+          fulfillmentGroupId: item.fulfillmentGroupId,
-          fulfillmentMethodId: item.shippingMethod.id,
+          fulfillmentMethodId: item.shippingMethodId,
         },
       },
     })

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

@@ -9,6 +9,7 @@ import useSubmitCheckout from './use-submit-checkout'
 import { useCheckoutContext } from '@components/checkout/context'
 import { AddressFields } from '../types/customer/address'
 import { useCart } from '../cart'
+import { FulfillmentGroup } from '../types/cart'
 
 export default useCheckout as UseCheckout<typeof handler>
 
@@ -30,13 +31,20 @@ export const handler: SWRHook<GetCheckoutHook> = {
 
       const { addressFields } = useCheckoutContext()
 
-      const { shippingMethod, ...restAddressFields } =
+      const { shippingMethodId, ...restAddressFields } =
         addressFields as AddressFields
 
       const hasEnteredAddress = Object.values(restAddressFields).some(
         (fieldValue) => !!fieldValue
       )
 
+      const totalAmount =
+        cart?.checkout?.summary.fulfillmentTotal?.displayAmount
+
+      const shippingGroup = cart?.checkout?.fulfillmentGroups.find(
+        (group: FulfillmentGroup) => group?.type === 'shipping'
+      )
+
       const response = useMemo(
         () => ({
           data: {
@@ -44,10 +52,18 @@ export const handler: SWRHook<GetCheckoutHook> = {
             hasPayment: true,
             hasShipping: hasEnteredAddress,
             hasShippingMethods,
-            hasSelectedShippingMethod: !!shippingMethod?.id,
+            hasSelectedShippingMethod: !!shippingMethodId,
+            totalAmount,
+            shippingGroup,
           },
         }),
-        [hasEnteredAddress, hasShippingMethods, shippingMethod]
+        [
+          hasEnteredAddress,
+          hasShippingMethods,
+          shippingMethodId,
+          totalAmount,
+          shippingGroup,
+        ]
       )
 
       return useMemo(

packages/opencommerce/src/customer/address/use-update-item.tsx

@@ -6,6 +6,7 @@ import useUpdateItem, {
 } from '@vercel/commerce/customer/address/use-update-item'
 import { useCheckoutContext } from '@components/checkout/context'
 import { CustomerAddressTypes } from '../../types/customer/address'
+import { useCart } from '../../cart'
 
 export default useUpdateItem as UseUpdateItem<typeof handler>
 
@@ -24,14 +25,21 @@ export const handler: MutationHook<UpdateItemHook<CustomerAddressTypes>> = {
   },
   useHook: ({ fetch }) =>
     function useHook() {
+      const { data: cart } = useCart()
+
       const { setAddressFields, addressFields } = useCheckoutContext()
       return useCallback(
         async function updateItem(input) {
           const { id, ...rest } = input
-          await fetch({ input: { item: rest, itemId: id } })
+          const fulfillmentGroupId =
+            cart?.checkout?.fulfillmentGroups[0]._id || 'groupId'
+          await fetch({
+            input: { item: { ...rest, fulfillmentGroupId }, itemId: id },
+          })
           setAddressFields({
             ...addressFields,
-            shippingMethod: rest.shippingMethod,
+            shippingMethodId: rest.shippingMethodId,
+            fulfillmentGroupId,
           })
           return undefined
         },

packages/opencommerce/src/types/customer/address.ts

@@ -3,10 +3,8 @@ import * as Core from '@vercel/commerce/types/customer/address'
 export * from '@vercel/commerce/types/customer/address'
 
 export type AddressFields = Core.AddressFields & {
-  shippingMethod?: {
+  shippingMethodId?: string
-    id: string
+  fulfillmentGroupId?: string
-    fulfillmentGroupId: string
-  }
 }
 
 export type CustomerAddressTypes = Core.CustomerAddressTypes & {

packages/saleor/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/saleor/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/sfcc/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/sfcc/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/shopify/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/shopify/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/spree/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/spree/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/swell/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/swell/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/vendure/src/checkout/use-submit-checkout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useSubmitCheckout, {
+  UseSubmitCheckout,
+} from '@vercel/commerce/checkout/use-submit-checkout'
+
+export default useSubmitCheckout as UseSubmitCheckout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

packages/vendure/src/customer/address/use-update-item.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@vercel/commerce/utils/types'
+import useUpdateItem, {
+  UseUpdateItem,
+} from '@vercel/commerce/customer/address/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -113,9 +113,7 @@ const CheckoutSidebarView: FC = () => {
           {checkoutData?.hasSelectedShippingMethod ? (
             <li className="flex justify-between py-1">
               <span>Shipping</span>
-              <span>
+              <span>{checkoutData?.totalAmount}</span>
-                {cartData?.checkout?.summary.fulfillmentTotal?.displayAmount}
-              </span>
             </li>
           ) : (
             <li className="flex justify-between py-1">

site/components/checkout/ShippingMethodView/ShippingMethodView.tsx

@@ -3,14 +3,9 @@ import useUpdateUpdateAddress from '@framework/customer/address/use-update-item'
 import SidebarLayout from '@components/common/SidebarLayout'
 import { useUI } from '@components/ui/context'
 import { Button } from '@components/ui'
+import useCheckout from '@framework/checkout/use-checkout'
 import { useCheckoutContext } from '../context'
 
-type FulfillmentGroup = {
-  type: string
-  _id: string
-  availableFulfillmentOptions: FulfillmentOption[] | null
-}
-
 type FulfillmentOption = {
   fulfillmentMethod?: {
     _id: string
@@ -28,9 +23,7 @@ const ShippingMethod = () => {
   const { addressFields } = useCheckoutContext()
 
   const updateShippingMethod = useUpdateUpdateAddress()
-  const shippingGroup = cart?.checkout?.fulfillmentGroups.find(
+  const { data: checkoutData } = useCheckout()
-    (group: FulfillmentGroup) => group?.type === 'shipping'
-  )
 
   const handleSubmit = async (event: React.ChangeEvent<HTMLFormElement>) => {
     event.preventDefault()
@@ -38,17 +31,13 @@ const ShippingMethod = () => {
     await updateShippingMethod({
       id: cart!.id,
       ...addressFields,
-      shippingMethod: {
+      shippingMethodId: event.target.shippingMethod.value,
-        fulfillmentGroupId:
-          cart!.checkout?.fulfillmentGroups[0]?._id ?? 'groupId',
-        id: event.target.shippingMethod.value,
-      },
     })
 
     setSidebarView('CHECKOUT_VIEW')
   }
 
-  return shippingGroup ? (
+  return checkoutData.shippingGroup ? (
     <form className="h-full" onSubmit={handleSubmit}>
       <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
         <div className="px-4 sm:px-6 flex-1">
@@ -56,7 +45,7 @@ const ShippingMethod = () => {
             Shipping Methods
           </h2>
           <div>
-            {shippingGroup.availableFulfillmentOptions?.map(
+            {checkoutData.shippingGroup.availableFulfillmentOptions?.map(
               (option: FulfillmentOption) => (
                 <div
                   className="flex flex-row my-3 items-center justify-between"
@@ -69,7 +58,7 @@ const ShippingMethod = () => {
                       type="radio"
                       value={option?.fulfillmentMethod?._id}
                       defaultChecked={
-                        shippingGroup.selectedFulfillmentOption
+                        checkoutData.shippingGroup.selectedFulfillmentOption
                           ?.fulfillmentMethod?._id ===
                         option?.fulfillmentMethod?._id
                       }

site/components/product/ProductSidebar/ProductSidebar.tsx

@@ -33,8 +33,11 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
       await addItem({
         productId: String(product.id),
         variantId: String(variant ? variant.id : product.variants[0]?.id),
+        // Open Commerce provider only
+        ...({
           variant: variant ?? product.variants[0],
           currencyCode: String(product.price.currencyCode),
+        } as any),
       })
       openSidebar()
       setLoading(false)