fix typescript

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

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

@@ -1,14 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, { UseCheckout } from '@vercel/commerce/checkout/use-checkout'
+export { default } from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

packages/commerce/src/types/checkout.ts

@@ -28,6 +28,20 @@ export interface Checkout {
    * List of items in the checkout.
    */
   lineItems?: LineItem[]
+
+  /**
+   * List of available shipping methods
+   */
+  shippingMethods?: {
+    id: string
+    fee: string
+    name: string
+  }[]
+
+  /**
+   * The unique identifier of the shipping method that the customer has selected.
+   */
+  selectedShippingMethodId?: string
 }
 
 export interface CheckoutBody {

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

@@ -1,14 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, { UseCheckout } from '@vercel/commerce/checkout/use-checkout'
+export { default } from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

packages/opencommerce/src/api/endpoints/checkout/index.ts

@@ -1,10 +1,10 @@
 import { GetAPISchema, createEndpoint } from '@vercel/commerce/api'
 import checkoutEndpoint from '@vercel/commerce/api/endpoints/checkout'
-import type { CheckoutSchema } from '../../../types/checkout'
 import type { OpenCommerceAPI } from '../..'
 
 import submitCheckout from './submit-checkout'
 import getCheckout from './get-checkout'
+import { CheckoutSchema } from '@vercel/commerce/types/checkout'
 
 export type CheckoutAPI = GetAPISchema<OpenCommerceAPI, CheckoutSchema>
 

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

@@ -7,11 +7,11 @@ import useCheckout, {
 import useSubmitCheckout from './use-submit-checkout'
 import { useCheckoutContext } from '@components/checkout/context'
 import { AddressFields } from '../types/customer/address'
-import { GetCheckoutHook } from '../types/checkout'
 import { FulfillmentGroup } from '../types/cart'
 import { API_URL, OPENCOMMERCE_ANONYMOUS_CART_TOKEN_COOKIE } from '../const'
 import getAnonymousCartQuery from '../api/queries/get-anonymous-cart'
 import { normalizeCheckout } from '../utils/normalize'
+import { GetCheckoutHook } from '@vercel/commerce/types/checkout'
 
 export default useCheckout as UseCheckout<typeof handler>
 
@@ -40,23 +40,26 @@ export const handler: SWRHook<GetCheckoutHook> = {
         (group) => group.type === 'shipping'
       )
 
-      const hasShippingMethods =
-        !!shippingTypeFulfillment?.availableFulfillmentOptions?.length
-
       const shippingGroup = checkout.fulfillmentGroups.find(
         (group: FulfillmentGroup) => group?.type === 'shipping'
       )
 
-      const totalDisplayAmount =
+      const shippingAmount =
         checkout.summary.fulfillmentTotal?.displayAmount || '0'
 
       return {
         hasPayment: true,
-        hasShippingMethods,
+        selectedShippingMethodId:
-        shippingGroup,
+          shippingGroup?.selectedFulfillmentOption?.fulfillmentMethod?._id,
+        shippingMethods: shippingGroup?.availableFulfillmentOptions
+          ?.filter((opt) => !!opt.fulfillmentMethod)
+          .map(({ fulfillmentMethod, price }) => ({
+            name: fulfillmentMethod!.displayName,
+            id: fulfillmentMethod!._id,
+            fee: price.displayAmount,
+          })),
         hasShipping: false,
         addressId: 'addressId',
-        totalDisplayAmount,
       }
     }
 
@@ -85,7 +88,7 @@ export const handler: SWRHook<GetCheckoutHook> = {
             data: {
               ...response.data,
               hasShipping: hasEnteredAddress,
-              hasSelectedShippingMethod: !!shippingMethodId,
+              selectedShippingMethodId: shippingMethodId,
             },
             submit: () => submit,
             isEmpty: response.data.lineItems?.length ?? 0,

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

@@ -28,7 +28,6 @@ export const handler: MutationHook<UpdateAddressItemHook> = {
         input: {
           cartId,
           cartToken,
-          fulfillmentGroupId: item.fulfillmentGroupId,
           fulfillmentMethodId: item.shippingMethodId,
         },
       },
@@ -44,15 +43,12 @@ export const handler: MutationHook<UpdateAddressItemHook> = {
       return useCallback(
         async function updateItem(input) {
           const { id, ...rest } = input
-          const fulfillmentGroupId =
-            checkoutData?.shippingGroup?._id || 'groupId'
           await fetch({
-            input: { item: { ...rest, fulfillmentGroupId }, itemId: id },
+            input: { item: { ...rest }, itemId: id },
           })
           setAddressFields({
             ...addressFields,
             shippingMethodId: rest.shippingMethodId,
-            fulfillmentGroupId,
           })
           return null
         },

packages/opencommerce/src/types/checkout.ts

@@ -1,18 +0,0 @@
-export * from '@vercel/commerce/types/checkout'
-
-import {
-  GetCheckoutHook as CoreGetCheckoutHook,
-  Checkout,
-} from '@vercel/commerce/types/checkout'
-import { FulfillmentGroup } from './cart'
-
-export type GetCheckoutHook = Omit<CoreGetCheckoutHook, 'data'> & {
-  data:
-    | (Checkout & {
-        hasShippingMethods?: boolean
-        hasSelectedShippingMethod?: boolean
-        totalDisplayAmount?: string
-        shippingGroup?: FulfillmentGroup
-      })
-    | null
-}

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

@@ -4,7 +4,6 @@ export * from '@vercel/commerce/types/customer/address'
 
 export type AddressFields = Core.AddressFields & {
   shippingMethodId?: string
-  fulfillmentGroupId?: string
 }
 
 export type UpdateAddressItemHook = Omit<

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

@@ -1,14 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, { UseCheckout } from '@vercel/commerce/checkout/use-checkout'
+export { default } from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

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

@@ -1,16 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, {
+export { default } from '@vercel/commerce/checkout/use-checkout'
-  UseCheckout,
-} from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

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

@@ -1,16 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, {
+export { default } from '@vercel/commerce/checkout/use-checkout'
-  UseCheckout,
-} from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

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

@@ -1,19 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, {
+export { default } from '@vercel/commerce/checkout/use-checkout'
-  UseCheckout,
-} from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  // Provide fetchOptions for SWR cache key
-  fetchOptions: {
-    // TODO: Revise url and query
-    url: 'checkout',
-    query: 'show',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

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

@@ -1,16 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, {
+export { default } from '@vercel/commerce/checkout/use-checkout'
-  UseCheckout,
-} from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

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

@@ -1,16 +1,2 @@
-import { SWRHook } from '@vercel/commerce/utils/types'
+export * from '@vercel/commerce/checkout/use-checkout'
-import useCheckout, {
+export { default } from '@vercel/commerce/checkout/use-checkout'
-  UseCheckout,
-} from '@vercel/commerce/checkout/use-checkout'
-
-export default useCheckout as UseCheckout<typeof handler>
-
-export const handler: SWRHook<any> = {
-  fetchOptions: {
-    query: '',
-  },
-  async fetcher({ input, options, fetch }) {},
-  useHook:
-    ({ useData }) =>
-    async (input) => ({}),
-}

site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -74,12 +74,12 @@ const CheckoutSidebarView: FC = () => {
           onClick={() => setSidebarView('SHIPPING_VIEW')}
         />
 
-        {checkoutData?.hasShippingMethods && (
+        {checkoutData?.shippingMethods?.length ? (
           <ShippingMethodWidget
-            isValid={checkoutData?.hasSelectedShippingMethod}
+            isValid={!!checkoutData?.selectedShippingMethodId}
             onClick={() => setSidebarView('SHIPPING_METHOD_VIEW')}
           />
-        )}
+        ) : null}
 
         <ul className={s.lineItemsList}>
           {cartData!.lineItems.map((item: any) => (
@@ -106,10 +106,15 @@ const CheckoutSidebarView: FC = () => {
             <span>Taxes</span>
             <span>Calculated at checkout</span>
           </li>
-          {checkoutData?.hasSelectedShippingMethod ? (
+          {checkoutData?.selectedShippingMethodId ? (
             <li className="flex justify-between py-1">
               <span>Shipping</span>
-              <span>{checkoutData?.totalDisplayAmount}</span>
+              <span>
+                {checkoutData?.shippingMethods?.find(
+                  (method) =>
+                    method.id === checkoutData.selectedShippingMethodId
+                )?.fee ?? 0}
+              </span>
             </li>
           ) : (
             <li className="flex justify-between py-1">

site/components/checkout/ShippingMethodView/ShippingMethodView.tsx

@@ -6,16 +6,6 @@ import { Button } from '@components/ui'
 import useCheckout from '@framework/checkout/use-checkout'
 import { useCheckoutContext } from '../context'
 
-type FulfillmentOption = {
-  fulfillmentMethod?: {
-    _id: string
-    displayName: string
-  }
-  price: {
-    displayAmount: string
-  }
-}
-
 const ShippingMethod = () => {
   const { setSidebarView } = useUI()
 
@@ -31,13 +21,15 @@ const ShippingMethod = () => {
     await updateShippingMethod({
       id: cart!.id,
       ...addressFields,
-      ...(event.target.shippingMethod.value ? {shippingMethodId: event.target.shippingMethod.value} : {})
+      ...(event.target.shippingMethod.value
+        ? { shippingMethodId: event.target.shippingMethod.value }
+        : {}),
     })
 
     setSidebarView('CHECKOUT_VIEW')
   }
 
-  return checkoutData?.shippingGroup ? (
+  return checkoutData?.shippingMethods ? (
     <form className="h-full" onSubmit={handleSubmit}>
       <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
         <div className="px-4 sm:px-6 flex-1">
@@ -45,33 +37,26 @@ const ShippingMethod = () => {
             Shipping Methods
           </h2>
           <div>
-            {checkoutData.shippingGroup.availableFulfillmentOptions?.map(
+            {checkoutData.shippingMethods.map((option) => (
-              (option: FulfillmentOption) => (
+              <div
-                <div
+                className="flex flex-row my-3 items-center justify-between"
-                  className="flex flex-row my-3 items-center justify-between"
+                key={option.id}
-                  key={option?.fulfillmentMethod?._id}
+              >
-                >
+                <fieldset className="flex flex-row items-center">
-                  <fieldset className="flex flex-row items-center">
+                  <input
-                    <input
+                    name="shippingMethod"
-                      name="shippingMethod"
+                    className="bg-black"
-                      className="bg-black"
+                    type="radio"
-                      type="radio"
+                    value={option.id}
-                      value={option?.fulfillmentMethod?._id}
+                    defaultChecked={
-                      defaultChecked={
+                      checkoutData.selectedShippingMethodId === option.id
-                        checkoutData.shippingGroup?.selectedFulfillmentOption
+                    }
-                          ?.fulfillmentMethod?._id ===
+                  />
-                        option?.fulfillmentMethod?._id
+                  <span className="ml-3 text-sm">{option.name}</span>
-                      }
+                </fieldset>
-                    />
+                <span>{option.fee}</span>
-                    <span className="ml-3 text-sm">
+              </div>
-                      {option?.fulfillmentMethod?.displayName ||
+            ))}
-                        'Shipping Method'}
-                    </span>
-                  </fieldset>
-                  <span>{option?.price.displayAmount}</span>
-                </div>
-              )
-            )}
           </div>
         </div>
         <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">