fix(vendure): Fix issues with custom checkout flow

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

@@ -6,9 +6,9 @@ import { CommerceError } from '@vercel/commerce/utils/errors'
 import type { MutationHook } from '@vercel/commerce/utils/types'
 import { useCallback } from 'react'
 import {
+  AddPaymentToOrderMutation,
   EligiblePaymentMethodsQuery,
-  TransitionOrderToStateResult,
+  TransitionOrderToStateMutation,
-  AddPaymentToOrderResult,
 } from '../../schema'
 import { addPaymentToOrder } from '../utils/mutations/add-payment-to-order'
 import { transitionOrderToState } from '../utils/mutations/transition-order-to-state'
@@ -21,17 +21,20 @@ export const handler: MutationHook<SubmitCheckoutHook> = {
     query: addPaymentToOrder,
   },
   async fetcher({ input: item, options, fetch }) {
-    const transitionResponse = await fetch<TransitionOrderToStateResult>({
+    const transitionResponse = await fetch<TransitionOrderToStateMutation>({
       ...options,
       query: transitionOrderToState,
       variables: {
         state: 'ArrangingPayment',
       },
     })
-    if (transitionResponse.__typename === 'OrderStateTransitionError') {
+    if (
+      transitionResponse.transitionOrderToState?.__typename ===
+      'OrderStateTransitionError'
+    ) {
       throw new CommerceError({
-        code: transitionResponse.errorCode,
+        code: transitionResponse.transitionOrderToState.errorCode,
-        message: transitionResponse.message,
+        message: transitionResponse.transitionOrderToState.message,
       })
     } else {
       const paymentMethodsResponse = await fetch<EligiblePaymentMethodsQuery>({
@@ -47,7 +50,7 @@ export const handler: MutationHook<SubmitCheckoutHook> = {
           message: 'No Eligible payment methods',
         })
       }
-      const paymentResponse = await fetch<AddPaymentToOrderResult>({
+      const paymentResponse = await fetch<AddPaymentToOrderMutation>({
         ...options,
         variables: {
           input: {
@@ -58,20 +61,22 @@ export const handler: MutationHook<SubmitCheckoutHook> = {
           },
         },
       })
-      if (paymentResponse.__typename === 'Order') {
+      const addPaymentToOrderResultType =
+        paymentResponse.addPaymentToOrder.__typename
+      if (addPaymentToOrderResultType === 'Order') {
         return {
           hasPayment: true,
           hasShipping: true,
         }
       } else if (
-        paymentResponse.__typename === 'IneligiblePaymentMethodError' ||
+        addPaymentToOrderResultType === 'IneligiblePaymentMethodError' ||
-        paymentResponse.__typename === 'NoActiveOrderError' ||
+        addPaymentToOrderResultType === 'NoActiveOrderError' ||
-        paymentResponse.__typename === 'OrderPaymentStateError' ||
+        addPaymentToOrderResultType === 'OrderPaymentStateError' ||
-        paymentResponse.__typename === 'OrderStateTransitionError' ||
+        addPaymentToOrderResultType === 'OrderStateTransitionError' ||
-        paymentResponse.__typename === 'PaymentDeclinedError' ||
+        addPaymentToOrderResultType === 'PaymentDeclinedError' ||
-        paymentResponse.__typename === 'PaymentFailedError'
+        addPaymentToOrderResultType === 'PaymentFailedError'
       ) {
-        throw new CommerceError(paymentResponse)
+        throw new CommerceError(paymentResponse.addPaymentToOrder)
       } else {
         throw new CommerceError({
           message: 'Something went wrong with Payment request',

packages/vendure/src/commerce.config.json

@@ -1,6 +1,7 @@
 {
   "provider": "vendure",
   "features": {
-    "wishlist": false
+    "wishlist": false,
+    "customCheckout": true
   }
 }

packages/vendure/src/customer/address/use-addresses.tsx

@@ -15,7 +15,6 @@ export const handler: SWRHook<GetAddressesHook> = {
   },
   useHook: ({ useData }) =>
     function useHook(input) {
-      console.log(input, 'hello')
       const response = useData({
         swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
       })

packages/vendure/src/customer/card/use-add-item.tsx

@@ -8,13 +8,16 @@ import { MutationHook } from '@vercel/commerce/utils/types'
 import { useCallback } from 'react'
 import { setOrderBillingAddress } from '../../utils/mutations/set-order-billing-address'
 import {
-  ActiveOrderResult,
   EligibleShippingMethodsQuery,
   MutationSetOrderBillingAddressArgs,
+  SetCustomerForOrderMutation,
+  SetCustomerForOrderMutationVariables,
+  SetOrderBillingAddressMutation,
   SetOrderShippingMethodResult,
 } from '../../../schema'
 import { eligibleShippingMethods } from '../../utils/queries/eligible-shipping-methods'
 import { setOrderShippingMethod } from '../../utils/mutations/set-order-shipping-method'
+import { setCustomerForOrder } from '../../utils/mutations/set-customer-for-order'
 
 export default useAddItem as UseAddItem<typeof handler>
 
@@ -36,10 +39,30 @@ export const handler: MutationHook<AddItemHook> = {
         countryCode: 'JP',
       },
     }
-    const data = await fetch<ActiveOrderResult>({
+    const data = await fetch<SetOrderBillingAddressMutation>({
       ...options,
       variables,
     })
+    if (
+      data.setOrderBillingAddress.__typename === 'Order' &&
+      !data.setOrderBillingAddress.customer
+    ) {
+      // A Customer must be assigned to the Order before we will be able to
+      // transition to the ArrangingPayment state.
+      await fetch<SetCustomerForOrderMutation>({
+        ...options,
+        query: setCustomerForOrder,
+        variables: {
+          input: {
+            firstName: item.firstName,
+            lastName: item.lastName,
+            // TODO: we need an input for email address
+            // ref: https://github.com/vercel/commerce/issues/616
+            emailAddress: 'guest-customer@test.com',
+          },
+        } as SetCustomerForOrderMutationVariables,
+      })
+    }
     const eligibleMethods = await fetch<EligibleShippingMethodsQuery>({
       ...options,
       query: eligibleShippingMethods,
@@ -56,17 +79,19 @@ export const handler: MutationHook<AddItemHook> = {
       })
     }
 
-    if (data.__typename === 'Order') {
+    if (data.setOrderBillingAddress.__typename === 'Order') {
       // TODO: Not sure what card we should return
       return {
         id: '',
         mask: '',
         provider: '',
       }
-    } else if (data.__typename === 'NoActiveOrderError') {
+    } else if (
+      data.setOrderBillingAddress.__typename === 'NoActiveOrderError'
+    ) {
       throw new CommerceError({
-        code: data.errorCode,
+        code: data.setOrderBillingAddress.errorCode,
-        message: data.message,
+        message: data.setOrderBillingAddress.message,
       })
     }
   },

packages/vendure/src/utils/fragments/cart-fragment.ts

@@ -4,6 +4,7 @@ export const cartFragment = /* GraphQL */ `
   fragment Cart on Order {
     id
     code
+    state
     createdAt
     totalQuantity
     subTotal

packages/vendure/src/utils/mutations/add-payment-to-order.ts

@@ -3,6 +3,7 @@ import { cartFragment } from '../fragments/cart-fragment'
 export const addPaymentToOrder = /* GraphQL */ `
   mutation addPaymentToOrder($input: PaymentInput!) {
     addPaymentToOrder(input: $input) {
+      __typename
       ...Cart
       ... on OrderPaymentStateError {
         errorCode

packages/vendure/src/utils/mutations/set-customer-for-order.ts

@@ -3,7 +3,12 @@ import { cartFragment } from '../fragments/cart-fragment'
 export const setCustomerForOrder = /* GraphQL */ `
   mutation setCustomerForOrder($input: CreateCustomerInput!) {
     setCustomerForOrder(input: $input) {
+      __typename
       ...Cart
+      ... on ErrorResult {
+        errorCode
+        message
+      }
     }
   }
   ${cartFragment}

packages/vendure/src/utils/mutations/set-order-billing-address.ts

@@ -3,6 +3,7 @@ import { cartFragment } from '../../utils/fragments/cart-fragment'
 export const setOrderBillingAddress = /* GraphQL */ `
   mutation setOrderBillingAddress ($input: CreateAddressInput!){
     setOrderBillingAddress(input: $input) {
+      __typename
       ...Cart
       ... on NoActiveOrderError {
         errorCode

packages/vendure/src/utils/mutations/set-order-shipping-address.ts

@@ -3,6 +3,7 @@ import { cartFragment } from '../../utils/fragments/cart-fragment'
 export const setOrderShippingAddress = /* GraphQL */ `
   mutation setOrderShippingAddress($input: CreateAddressInput!) {
     setOrderShippingAddress(input: $input) {
+      __typename
       ...Cart
       ... on NoActiveOrderError {
         errorCode

packages/vendure/src/utils/mutations/set-order-shipping-method.ts

@@ -3,6 +3,7 @@ import { cartFragment } from '../../utils/fragments/cart-fragment'
 export const setOrderShippingMethod = /* GraphQL */ `
   mutation setOrderShippingMethod($shippingMethodId: ID!) {
     setOrderShippingMethod(shippingMethodId: $shippingMethodId) {
+      __typename
       ...Cart
       ... on OrderModificationError {
         errorCode

packages/vendure/src/utils/mutations/transition-order-to-state.ts

@@ -3,10 +3,12 @@ import { cartFragment } from '../fragments/cart-fragment'
 export const transitionOrderToState = /* GraphQL */ `
   mutation transitionOrderToState($state: String!) {
     transitionOrderToState(state: $state) {
+      __typename
       ...Cart
       ... on OrderStateTransitionError {
         errorCode
         message
+        transitionError
       }
     }
   }