Merge pull request #87 from KieIO/config-cookie

Config cookie
2025-07-22 12:24:18 +00:00 · 2021-10-19 11:10:54 +07:00
parent 300755a579 caed23e64c
commit 461ee218fe
25 changed files with 591 additions and 333 deletions
--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -306,9 +306,52 @@ export type MutationResetPasswordArgs = {
  password: Scalars['String']
 }

+export type ActiveOrderCustomerFragment = Pick<Order, 'id'> & {
+  customer?: Maybe<Pick<Customer, 'id' | 'emailAddress' | 'firstName' | 'lastName'>>;
+  lines: Array<Pick<OrderLine, 'id'>>;
+};
+
+export type SetCustomerForOrderMutationVariables = Exact<{
+  input: CreateCustomerInput;
+}>;
+
+export type SetCustomerForOrderMutation = { __typename?: 'Mutation' } & {
+  setCustomerForOrder:
+  | ({ __typename: 'ActiveOrderCustomerFragment' } & Pick<ActiveOrderCustomerFragment, 'customer', 'lines'>)
+  | ({ __typename: 'AlreadyLoggedInError' } & Pick<
+    AlreadyLoggedInError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'EmailAddressConflictError' } & Pick<
+    EmailAddressConflictError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NoActiveOrderError' } & Pick<
+    NoActiveOrderError,
+    'errorCode' | 'message'
+  >)
+}
+
+export type SetCustomerForOrderMutation = { __typename?: 'Mutation' } & {
+  setCustomerForOrder:
+  | ({ __typename: 'ActiveOrderCustomerFragment' } & Pick<ActiveOrderCustomerFragment, 'customer', 'lines'>)
+  | ({ __typename: 'AlreadyLoggedInError' } & Pick<
+    AlreadyLoggedInError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'EmailAddressConflictError' } & Pick<
+    EmailAddressConflictError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NoActiveOrderError' } & Pick<
+    NoActiveOrderError,
+    'errorCode' | 'message'
+  >)
+}
+
 export type Address = Node & {
  updateCustomerAddress:
-  | { 
+  | {
    __typename?: 'Address'
    id: Scalars['ID']
  }
@@ -1471,7 +1514,7 @@ export type CustomerListOptions = {

 export type Customer = Node & {
  updateCustomer:
-  | { 
+  | {
    __typename?: 'Customer'
    id: Scalars['ID']
  }
@@ -1482,7 +1525,7 @@ export type Customer = Node & {
  title?: Maybe<Scalars['String']>
  firstName: Scalars['String']
  lastName: Scalars['String']
-  phoneNumber?:  Maybe<Scalars['String']>
+  phoneNumber?: Maybe<Scalars['String']>
  emailAddress: Scalars['String']
  addresses?: Maybe<Array<Address>>
  orders: OrderList
@@ -3017,56 +3060,56 @@ export type CartFragment = { __typename?: 'Order' } & Pick<
  | 'totalWithTax'
  | 'currencyCode'
 > & {
-    customer?: Maybe<{ __typename?: 'Customer' } & Pick<Customer, 'id'>>
-    lines: Array<
-      { __typename?: 'OrderLine' } & Pick<
-        OrderLine,
+  customer?: Maybe<{ __typename?: 'Customer' } & Pick<Customer, 'id'>>
+  lines: Array<
+    { __typename?: 'OrderLine' } & Pick<
+      OrderLine,
+      | 'id'
+      | 'quantity'
+      | 'linePriceWithTax'
+      | 'discountedLinePriceWithTax'
+      | 'unitPriceWithTax'
+      | 'discountedUnitPriceWithTax'
+    > & {
+      featuredAsset?: Maybe<
+        { __typename?: 'Asset' } & Pick<Asset, 'id' | 'preview'>
+      >
+      discounts: Array<
+        { __typename?: 'Discount' } & Pick<
+          Discount,
+          'description' | 'amount'
+        >
+      >
+      productVariant: { __typename?: 'ProductVariant' } & Pick<
+        ProductVariant,
        | 'id'
-        | 'quantity'
-        | 'linePriceWithTax'
-        | 'discountedLinePriceWithTax'
-        | 'unitPriceWithTax'
-        | 'discountedUnitPriceWithTax'
-      > & {
-          featuredAsset?: Maybe<
-            { __typename?: 'Asset' } & Pick<Asset, 'id' | 'preview'>
-          >
-          discounts: Array<
-            { __typename?: 'Discount' } & Pick<
-              Discount,
-              'description' | 'amount'
-            >
-          >
-          productVariant: { __typename?: 'ProductVariant' } & Pick<
-            ProductVariant,
-            | 'id'
-            | 'name'
-            | 'sku'
-            | 'price'
-            | 'priceWithTax'
-            | 'stockLevel'
-            | 'productId'
-          > & { product: { __typename?: 'Product' } & Pick<Product, 'slug'> }
-        }
-    >
-  }
+        | 'name'
+        | 'sku'
+        | 'price'
+        | 'priceWithTax'
+        | 'stockLevel'
+        | 'productId'
+      > & { product: { __typename?: 'Product' } & Pick<Product, 'slug'> }
+    }
+  >
+}

 export type SearchResultFragment = { __typename?: 'SearchResult' } & Pick<
  SearchResult,
  'productId' | 'sku' | 'productName' | 'description' | 'slug' | 'sku' | 'currencyCode'
-  | 'productAsset' | 'price' | 'priceWithTax' | 'currencyCode' 
+  | 'productAsset' | 'price' | 'priceWithTax' | 'currencyCode'
  | 'collectionIds' | 'productVariantId' | 'facetValueIds' | "productVariantName"
 > & {
-    productAsset?: Maybe<
-      { __typename?: 'SearchResultAsset' } & Pick<
-        SearchResultAsset,
-        'id' | 'preview'
-      >
+  productAsset?: Maybe<
+    { __typename?: 'SearchResultAsset' } & Pick<
+      SearchResultAsset,
+      'id' | 'preview'
    >
-    priceWithTax:
-      | ({ __typename?: 'PriceRange' } & Pick<PriceRange, 'min' | 'max'>)
-      | ({ __typename?: 'SinglePrice' } & Pick<SinglePrice, 'value'>)
-  }
+  >
+  priceWithTax:
+  | ({ __typename?: 'PriceRange' } & Pick<PriceRange, 'min' | 'max'>)
+  | ({ __typename?: 'SinglePrice' } & Pick<SinglePrice, 'value'>)
+}

 export type AddItemToOrderMutationVariables = Exact<{
  variantId: Scalars['ID']
@@ -3075,23 +3118,23 @@ export type AddItemToOrderMutationVariables = Exact<{

 export type AddItemToOrderMutation = { __typename?: 'Mutation' } & {
  addItemToOrder:
-    | ({ __typename: 'Order' } & CartFragment)
-    | ({ __typename: 'OrderModificationError' } & Pick<
-        OrderModificationError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'OrderLimitError' } & Pick<
-        OrderLimitError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'NegativeQuantityError' } & Pick<
-        NegativeQuantityError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'InsufficientStockError' } & Pick<
-        InsufficientStockError,
-        'errorCode' | 'message'
-      >)
+  | ({ __typename: 'Order' } & CartFragment)
+  | ({ __typename: 'OrderModificationError' } & Pick<
+    OrderModificationError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'OrderLimitError' } & Pick<
+    OrderLimitError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NegativeQuantityError' } & Pick<
+    NegativeQuantityError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'InsufficientStockError' } & Pick<
+    InsufficientStockError,
+    'errorCode' | 'message'
+  >)
 }

 export type AdjustOrderLineMutationVariables = Exact<{
@@ -3101,23 +3144,23 @@ export type AdjustOrderLineMutationVariables = Exact<{

 export type AdjustOrderLineMutation = { __typename?: 'Mutation' } & {
  adjustOrderLine:
-    | ({ __typename: 'Order' } & CartFragment)
-    | ({ __typename: 'OrderModificationError' } & Pick<
-        OrderModificationError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'OrderLimitError' } & Pick<
-        OrderLimitError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'NegativeQuantityError' } & Pick<
-        NegativeQuantityError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'InsufficientStockError' } & Pick<
-        InsufficientStockError,
-        'errorCode' | 'message'
-      >)
+  | ({ __typename: 'Order' } & CartFragment)
+  | ({ __typename: 'OrderModificationError' } & Pick<
+    OrderModificationError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'OrderLimitError' } & Pick<
+    OrderLimitError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NegativeQuantityError' } & Pick<
+    NegativeQuantityError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'InsufficientStockError' } & Pick<
+    InsufficientStockError,
+    'errorCode' | 'message'
+  >)
 }

 export type LoginMutationVariables = Exact<{
@@ -3127,49 +3170,49 @@ export type LoginMutationVariables = Exact<{

 export type LoginMutation = { __typename?: 'Mutation' } & {
  login:
-    | ({ __typename: 'CurrentUser' } & Pick<CurrentUser, 'id'>)
-    | ({ __typename: 'InvalidCredentialsError' } & Pick<
-        InvalidCredentialsError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'NotVerifiedError' } & Pick<
-        NotVerifiedError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'NativeAuthStrategyError' } & Pick<
-        NativeAuthStrategyError,
-        'errorCode' | 'message'
-      >)
+  | ({ __typename: 'CurrentUser' } & Pick<CurrentUser, 'id'>)
+  | ({ __typename: 'InvalidCredentialsError' } & Pick<
+    InvalidCredentialsError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NotVerifiedError' } & Pick<
+    NotVerifiedError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NativeAuthStrategyError' } & Pick<
+    NativeAuthStrategyError,
+    'errorCode' | 'message'
+  >)
 }

 export type ResetPasswordMutation = { __typename?: 'Mutation' } & {
  resetPassword:
-    | ({ __typename: 'CurrentUser' } & Pick<CurrentUser, 'id'>)
-    | ({ __typename: 'PasswordResetTokenInvalidError' } & Pick<
-        PasswordResetTokenInvalidError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'PasswordResetTokenExpiredError' } & Pick<
-        PasswordResetTokenExpiredError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'NativeAuthStrategyError' } & Pick<
-        NativeAuthStrategyError,
-        'errorCode' | 'message'
-      >)
+  | ({ __typename: 'CurrentUser' } & Pick<CurrentUser, 'id'>)
+  | ({ __typename: 'PasswordResetTokenInvalidError' } & Pick<
+    PasswordResetTokenInvalidError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'PasswordResetTokenExpiredError' } & Pick<
+    PasswordResetTokenExpiredError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NativeAuthStrategyError' } & Pick<
+    NativeAuthStrategyError,
+    'errorCode' | 'message'
+  >)
 }

 export type SignupMutation = { __typename?: 'Mutation' } & {
  registerCustomerAccount:
-    | ({ __typename: 'Success' } & Pick<Success, 'success'>)
-    | ({ __typename: 'MissingPasswordError' } & Pick<
-        MissingPasswordError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'NativeAuthStrategyError' } & Pick<
-        NativeAuthStrategyError,
-        'errorCode' | 'message'
-      >)
+  | ({ __typename: 'Success' } & Pick<Success, 'success'>)
+  | ({ __typename: 'MissingPasswordError' } & Pick<
+    MissingPasswordError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NativeAuthStrategyError' } & Pick<
+    NativeAuthStrategyError,
+    'errorCode' | 'message'
+  >)
 }

 export type VerifyCustomerAccountVariables = Exact<{
@@ -3179,27 +3222,27 @@ export type VerifyCustomerAccountVariables = Exact<{

 export type VerifyCustomerAccountMutation = { __typename?: 'Mutation' } & {
  verifyCustomerAccount:
-    | ({ __typename: 'CurrentUser' } & Pick<CurrentUser, 'id'>)
-    | ({ __typename: 'VerificationTokenInvalidError' } & Pick<
-      VerificationTokenInvalidError,
-      'errorCode' | 'message'
-    >)
-    | ({ __typename: 'VerificationTokenExpiredError' } & Pick<
-      VerificationTokenExpiredError,
-      'errorCode' | 'message'
-    >)
-    | ({ __typename: 'MissingPasswordError' } & Pick<
-      MissingPasswordError,
-      'errorCode' | 'message'
-    >)
-    | ({ __typename: 'PasswordAlreadySetError' } & Pick<
-      PasswordAlreadySetError,
-      'errorCode' | 'message'
-    >)
-    | ({ __typename: 'NativeAuthStrategyError' } & Pick<
-      NativeAuthStrategyError,
-      'errorCode' | 'message'
-    >)
+  | ({ __typename: 'CurrentUser' } & Pick<CurrentUser, 'id'>)
+  | ({ __typename: 'VerificationTokenInvalidError' } & Pick<
+    VerificationTokenInvalidError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'VerificationTokenExpiredError' } & Pick<
+    VerificationTokenExpiredError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'MissingPasswordError' } & Pick<
+    MissingPasswordError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'PasswordAlreadySetError' } & Pick<
+    PasswordAlreadySetError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NativeAuthStrategyError' } & Pick<
+    NativeAuthStrategyError,
+    'errorCode' | 'message'
+  >)
 }

 export type LogoutMutationVariables = Exact<{ [key: string]: never }>
@@ -3214,11 +3257,11 @@ export type RemoveOrderLineMutationVariables = Exact<{

 export type RemoveOrderLineMutation = { __typename?: 'Mutation' } & {
  removeOrderLine:
-    | ({ __typename: 'Order' } & CartFragment)
-    | ({ __typename: 'OrderModificationError' } & Pick<
-        OrderModificationError,
-        'errorCode' | 'message'
-      >)
+  | ({ __typename: 'Order' } & CartFragment)
+  | ({ __typename: 'OrderModificationError' } & Pick<
+    OrderModificationError,
+    'errorCode' | 'message'
+  >)
 }

 export type SignupMutationVariables = Exact<{
@@ -3228,15 +3271,15 @@ export type SignupMutationVariables = Exact<{

 export type RequestPasswordReset = { __typename?: 'Mutation' } & {
  requestPasswordReset:
-    | ({ __typename: 'Success' } & Pick<Success, 'success'>)
-    | ({ __typename: 'MissingPasswordError' } & Pick<
-        MissingPasswordError,
-        'errorCode' | 'message'
-      >)
-    | ({ __typename: 'NativeAuthStrategyError' } & Pick<
-        NativeAuthStrategyError,
-        'errorCode' | 'message'
-      >)
+  | ({ __typename: 'Success' } & Pick<Success, 'success'>)
+  | ({ __typename: 'MissingPasswordError' } & Pick<
+    MissingPasswordError,
+    'errorCode' | 'message'
+  >)
+  | ({ __typename: 'NativeAuthStrategyError' } & Pick<
+    NativeAuthStrategyError,
+    'errorCode' | 'message'
+  >)
 }


@@ -3248,7 +3291,7 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
    { __typename?: 'Customer' } & Pick<
      Customer,
      Favorite,
-      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber'|  'orders'
+      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber' | 'orders'
    >
  >
 }
@@ -3267,7 +3310,7 @@ export type FavoriteList = PaginatedList & {
  totalItems: Int!
 }

-type Favorite = Node &  {
+type Favorite = Node & {
  id: ID!
  createdAt: DateTime!
  updatedAt: DateTime!
@@ -3277,7 +3320,7 @@ type Favorite = Node &  {



-type FavouriteOption =  Customer & {
+type FavouriteOption = Customer & {
  favorites(options: FavoriteListOptions): FavoriteList!
 }

@@ -3308,13 +3351,13 @@ export type GetAllFacetsQuery = { __typename?: 'Query' } & {
      { __typename?: 'Facet' } & Pick<
        Facet,
        'id' | 'name' | 'code' | 'values'
-      > 
+      >
      & {
-          parent?: Maybe<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
-          children?: Maybe<
-            Array<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
-          >
-        }
+        parent?: Maybe<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
+        children?: Maybe<
+          Array<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
+        >
+      }
    >,
    'totalItems'
  }
@@ -3327,11 +3370,11 @@ export type GetAllCollectionsQuery = { __typename?: 'Query' } & {
        Collection,
        'id' | 'name' | 'slug'
      > & {
-          parent?: Maybe<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
-          children?: Maybe<
-            Array<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
-          >
-        }
+        parent?: Maybe<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
+        children?: Maybe<
+          Array<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
+        >
+      }
    >,
    'totalItems'
  }
@@ -3352,15 +3395,15 @@ export type GetCollectionsQuery = { __typename?: 'Query' } & {
        Collection,
        'id' | 'name' | 'description' | 'slug'
      > & {
-          productVariants: { __typename?: 'ProductVariantList' } & Pick<
-            ProductVariantList,
-            'totalItems'
-          >
-          parent?: Maybe<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
-          children?: Maybe<
-            Array<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
-          >
-        }
+        productVariants: { __typename?: 'ProductVariantList' } & Pick<
+          ProductVariantList,
+          'totalItems'
+        >
+        parent?: Maybe<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
+        children?: Maybe<
+          Array<{ __typename?: 'Collection' } & Pick<Collection, 'id'>>
+        >
+      }
    >
  }
 }
@@ -3375,60 +3418,60 @@ export type GetProductQuery = { __typename?: 'Query' } & {
      Product,
      'id' | 'name' | 'slug' | 'description'
    > & {
-        assets: Array<
-          { __typename?: 'Asset' } & Pick<Asset, 'id' | 'preview' | 'name'>
-        >
-        variants: Array<
-          { __typename?: 'ProductVariant' } & Pick<
-            ProductVariant,
-            'id' | 'priceWithTax' | 'currencyCode' | 'price' | "name"
-          > & {
-              options: Array<
-                { __typename?: 'ProductOption' } & Pick<
-                  ProductOption,
-                  'id' | 'name' | 'code' | 'groupId'
-                > & {
-                    group: { __typename?: 'ProductOptionGroup' } & Pick<
-                      ProductOptionGroup,
-                      'id'
-                    > & {
-                        options: Array<
-                          { __typename?: 'ProductOption' } & Pick<
-                            ProductOption,
-                            'name'
-                          >
-                        >
-                      }
-                  }
-              >
-            }
-        >
-        optionGroups: Array<
-          { __typename?: 'ProductOptionGroup' } & Pick<
-            ProductOptionGroup,
-            'id' | 'code' | 'name'
-          > & {
-              options: Array<
-                { __typename?: 'ProductOption' } & Pick<
-                  ProductOption,
-                  'id' | 'name'
+      assets: Array<
+        { __typename?: 'Asset' } & Pick<Asset, 'id' | 'preview' | 'name'>
+      >
+      variants: Array<
+        { __typename?: 'ProductVariant' } & Pick<
+          ProductVariant,
+          'id' | 'priceWithTax' | 'currencyCode' | 'price' | "name"
+        > & {
+          options: Array<
+            { __typename?: 'ProductOption' } & Pick<
+              ProductOption,
+              'id' | 'name' | 'code' | 'groupId'
+            > & {
+              group: { __typename?: 'ProductOptionGroup' } & Pick<
+                ProductOptionGroup,
+                'id'
+              > & {
+                options: Array<
+                  { __typename?: 'ProductOption' } & Pick<
+                    ProductOption,
+                    'name'
+                  >
                >
-              >
+              }
            }
-        >
-        facetValues: Array<
-          { __typename?: 'FacetValue' } & Pick<
-            FacetValue,
-            'id'
          >
-        >
-        collections: Array<
-          { __typename?: 'Collection' } & Pick<
-            Collection,
-            'id'|"name"
+        }
+      >
+      optionGroups: Array<
+        { __typename?: 'ProductOptionGroup' } & Pick<
+          ProductOptionGroup,
+          'id' | 'code' | 'name'
+        > & {
+          options: Array<
+            { __typename?: 'ProductOption' } & Pick<
+              ProductOption,
+              'id' | 'name'
+            >
          >
+        }
+      >
+      facetValues: Array<
+        { __typename?: 'FacetValue' } & Pick<
+          FacetValue,
+          'id'
        >
-      }
+      >
+      collections: Array<
+        { __typename?: 'Collection' } & Pick<
+          Collection,
+          'id' | "name"
+        >
+      >
+    }
  >
 }

--- a/framework/vendure/utils/mutations/set-customer-order-mutation.ts
+++ b/framework/vendure/utils/mutations/set-customer-order-mutation.ts
@@ -0,0 +1,24 @@
+export const setCustomerForOrderMutation = /* GraphQL */ `
+mutation setCustomerForOrder($input: CreateCustomerInput!) {
+  setCustomerForOrder(input: $input) {
+    __typename
+    ... on Order {
+      id
+      createdAt
+      updatedAt
+      code
+      customer {
+        id
+        firstName
+        lastName
+        emailAddress
+        phoneNumber
+      }
+    }
+    ... on ErrorResult {
+      errorCode
+      message
+    }
+  }
+}
+`
--- a/package.json
+++ b/package.json
@@ -2,8 +2,9 @@
  "name": "nextjs-commerce",
  "version": "1.0.0",
  "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' PORT=3005 next dev",
+    "dev": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
    "dev-windows": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
+    "dev-macos": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
    "build": "next build",
    "start": "PORT=3005 next start",
    "analyze": "BUNDLE_ANALYZE=both yarn build",
--- a/pages/checkout.tsx
+++ b/pages/checkout.tsx
@@ -4,7 +4,8 @@ import { CheckoutPage } from 'src/components/modules/checkout';
 export default function Checkout() {
  return (
    <>
-        <CheckoutPage/>
+      <CheckoutPage />
+
    </>
  )
 }
--- a/src/components/common/Layout/LayoutContent/LayoutContent.tsx
+++ b/src/components/common/Layout/LayoutContent/LayoutContent.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useMessage } from 'src/components/contexts'
-import { useModalCommon } from 'src/components/hooks'
 import { FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
 import { CartDrawer, Footer, MessageCommon, ScrollToTop } from '../..'
 import Header from '../../Header/Header'
--- a/src/components/common/LayoutCheckout/LayoutCheckout.tsx
+++ b/src/components/common/LayoutCheckout/LayoutCheckout.tsx
@@ -1,3 +1,4 @@
+import { MessageProvider } from 'src/components/contexts'
 import s from './LayoutCheckout.module.scss'

 interface Props {
@@ -6,14 +7,18 @@ interface Props {

 const LayoutCheckout = ({ children }: Props) => {
    return (
-        <div className={s.layoutCheckout}>
-            <main>{children}</main>
-            <footer className={s.footer}>
-                <div>
-                    © 2021 Online Grocery
+        <>
+            <MessageProvider>
+                <div className={s.layoutCheckout}>
+                    <main>{children}</main>
+                    <footer className={s.footer}>
+                        <div>
+                            © 2021 Online Grocery
+                        </div>
+                    </footer>
                </div>
-            </footer>
-        </div>
+            </MessageProvider>
+        </>
    )
 }

--- a/src/components/common/MessageCommon/MessageCommon.tsx
+++ b/src/components/common/MessageCommon/MessageCommon.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react'
+import React, { memo } from 'react'
 import s from './MessageCommon.module.scss'
 import MessageItem, { MessageItemProps } from './MessageItem/MessageItem'

--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
@@ -17,11 +17,11 @@ interface Props {
  onSwitch: () => void
 }

-const DisplayingErrorMessagesSchema = Yup.object().shape({
-  email: Yup.string().email('Your email was wrong').required('Required'),
+const displayingErrorMessagesSchema = Yup.object().shape({
+  email: Yup.string().email(LANGUAGE.MESSAGE.INVALID_EMAIL).required(LANGUAGE.MESSAGE.REQUIRED),
  password: Yup.string()
    .max(30, 'Password is too long')
-    .required('Required'),
+    .required(LANGUAGE.MESSAGE.REQUIRED),
 })

 const FormLogin = ({ onSwitch, isHide }: Props) => {
@@ -56,7 +56,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
              password: '',
              email: '',
            }}
-            validationSchema={DisplayingErrorMessagesSchema}
+            validationSchema={displayingErrorMessagesSchema}
            onSubmit={onLogin}
            
          >
--- a/src/components/contexts/Message/MessageContext.tsx
+++ b/src/components/contexts/Message/MessageContext.tsx
@@ -6,7 +6,7 @@ export type MessageContextType = {
  removeMessage: (id: number) => void
  showMessageSuccess: (content: string, timeout?: number) => void
  showMessageInfo: (content: string, timeout?: number) => void
-  showMessageError: (content: string, timeout?: number) => void
+  showMessageError: (content?: string, timeout?: number) => void
  showMessageWarning: (content: string, timeout?: number) => void
 }
 export const DEFAULT_MESSAGE_CONTEXT: MessageContextType = {
--- a/src/components/contexts/Message/MessageProvider.tsx
+++ b/src/components/contexts/Message/MessageProvider.tsx
@@ -1,5 +1,6 @@
-import { ReactNode, useCallback, useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { MessageItemProps } from 'src/components/common/MessageCommon/MessageItem/MessageItem'
+import { LANGUAGE } from 'src/utils/language.utils'
 import { MessageContext } from './MessageContext'

 type Props = {
@@ -33,8 +34,8 @@ export function MessageProvider({ children }: Props) {
    createNewMessage(content, timeout, 'info')
  }

-  const showMessageError = (content: string, timeout?: number) => {
-    createNewMessage(content, timeout, 'error')
+  const showMessageError = (content?: string, timeout?: number) => {
+    createNewMessage(content || LANGUAGE.MESSAGE.ERROR, timeout, 'error')
  }

  const showMessageWarning = (content: string, timeout?: number) => {
--- a/src/components/hooks/cart/useGetActiveOrder.tsx
+++ b/src/components/hooks/cart/useGetActiveOrder.tsx
@@ -1,4 +1,3 @@
-import { Cart } from '@commerce/types/cart'
 import { ActiveOrderQuery } from '@framework/schema'
 import { cartFragment } from '@framework/utils/fragments/cart-fragment'
 import { normalizeCart } from '@framework/utils/normalize'
--- a/src/components/hooks/order/index.ts
+++ b/src/components/hooks/order/index.ts
@@ -0,0 +1,2 @@
+export { default as useSetCustomerForOrder } from './useSetCustomerForOrder'
+
--- a/src/components/hooks/order/useSetCustomerForOrder.tsx
+++ b/src/components/hooks/order/useSetCustomerForOrder.tsx
@@ -0,0 +1,42 @@
+import { CreateCustomerInput, SetCustomerForOrderMutation } from '@framework/schema'
+import { setCustomerForOrderMutation } from '@framework/utils/mutations/set-customer-order-mutation'
+import { useState } from 'react'
+import { CommonError } from 'src/domains/interfaces/CommonError'
+import rawFetcher from 'src/utils/rawFetcher'
+import { useGetActiveOrder } from '../cart'
+
+
+const useSetCustomerForOrder = () => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<CommonError | null>(null)
+  const { mutate } = useGetActiveOrder()
+
+  const setCustomerForOrder = (input: CreateCustomerInput,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+  ) => {
+    setError(null)
+    setLoading(true)
+    rawFetcher<SetCustomerForOrderMutation>({
+      query: setCustomerForOrderMutation,
+      variables: { input },
+    })
+      .then(({ data }) => {
+        if (data.setCustomerForOrder.__typename === 'ActiveOrderCustomerFragment') {
+          fCallBack(true)
+          mutate()
+        } else {
+          fCallBack(false, data.setCustomerForOrder.message)
+        }
+
+      })
+      .catch((error) => {
+        setError(error)
+        fCallBack(false, error.message)
+      })
+      .finally(() => setLoading(false))
+  }
+
+  return { loading, setCustomerForOrder, error }
+}
+
+export default useSetCustomerForOrder
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import { Logo } from 'src/components/common'
+import { ButtonCommon, Logo } from 'src/components/common'
 import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
+import { useAddProductToCart, useGetActiveOrder } from 'src/components/hooks/cart'
 import { removeItem } from 'src/utils/funtion.utils'
 import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
@@ -8,43 +9,43 @@ import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
 import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
 import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
 interface CheckoutInfoProps {
-  onViewCart:()=>void
+  onViewCart: () => void
 }

-const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
+const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
  const [active, setActive] = useState(1)
  const [done, setDone] = useState<number[]>([])
  const [info, setInfo] = useState<CheckOutForm>({})

-  const onEdit = (id:number) => {
-		setActive(id)
-    setDone(removeItem<number>(done,id))
-	}
+  const onEdit = (id: number) => {
+    setActive(id)
+    setDone(removeItem<number>(done, id))
+  }

-  const onConfirm = (id:number,formInfo:CheckOutForm) => {
-		if(id+1>formList.length){
-			console.log({...info,...formInfo})
-		}else{
-      if(done.length>0){
-        for (let i = id+1; i <= formList.length; i++) {
-          if(!done.includes(i)){
+  const onConfirm = (id: number, formInfo: CheckOutForm) => {
+    if (id + 1 > formList.length) {
+      console.log({ ...info, ...formInfo })
+    } else {
+      if (done.length > 0) {
+        for (let i = id + 1; i <= formList.length; i++) {
+          if (!done.includes(i)) {
            setActive(i)
          }
        }
-      }else{
-        setActive(id+1)
+      } else {
+        setActive(id + 1)
      }
-      setDone([...done,id])
-		}
-		setInfo({...info,...formInfo})
-	}
+      setDone([...done, id])
+    }
+    setInfo({ ...info, ...formInfo })
+  }

-  const getNote = (id:number) => {
+  const getNote = (id: number) => {
    switch (id) {
      case 1:
        return `${info.name}, ${info.email}`
-        case 2:
-          return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, `
+      case 2:
+        return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, `
      default:
        return ""
    }
@@ -54,21 +55,37 @@ const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
    {
      id: 1,
      title: 'Customer Information',
-      form: <CustomerInfoForm onConfirm={onConfirm} id={1}/>,
+      form: <CustomerInfoForm onConfirm={onConfirm} id={1} />,
    },
    {
      id: 2,
      title: 'Shipping Information',
-      form: <ShippingInfoForm onConfirm={onConfirm} id={2}/>,
+      form: <ShippingInfoForm onConfirm={onConfirm} id={2} />,
    },
    {
      id: 3,
      title: 'Payment Information',
-      form: <PaymentInfoForm onConfirm={onConfirm} id={3}/>,
+      form: <PaymentInfoForm onConfirm={onConfirm} id={3} />,
    },
  ]
+
+  // TODO: remove
+  const { addProduct } = useAddProductToCart()
+
+  const createOrder = () => {
+    addProduct({ variantId: "63", quantity: 1 }, handleAddToCartCallback)
+  }
+  const handleAddToCartCallback = (isSuccess: boolean, message?: string) => {
+    // console.log("after create order: ", isSuccess, message)
+
+  }
+
+  const {order} = useGetActiveOrder()
+
  return (
    <div className={s.warpper}>
+      <ButtonCommon onClick={createOrder}>test create order</ButtonCommon>
+      <ButtonCommon onClick={createOrder}>test get active order</ButtonCommon>
      <div className={s.title}>
        <Logo />
        <div className={s.viewCart} onClick={onViewCart}>View cart</div>
@@ -76,7 +93,7 @@ const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
      {formList.map((item) => {
        let note = getNote(item.id)
        return <CheckoutCollapse
-					key={item.title}
+          key={item.title}
          id={item.id}
          visible={item.id === active}
          title={item.title}
--- a/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss
@@ -0,0 +1,6 @@
+@import "../../../../../../styles/utilities";
+
+.chekoutNotePolicy {
+    @apply caption;
+    margin-bottom: 1.6rem;
+}
--- a/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx
@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import React, { memo } from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
+import s from './ChekoutNotePolicy.module.scss'
+
+const ChekoutNotePolicy = memo(() => {
+  return (
+    <div className={s.chekoutNotePolicy}>
+      By clicking continue you agree to Casper's{' '}
+      {
+        <Link href={ROUTE.TERM_CONDITION}>
+          <a>
+            <strong>terms and conditions</strong>
+          </a>
+        </Link>
+      }{' '}
+      and{' '}
+      {
+        <Link href={ROUTE.PRIVACY_POLICY}>
+          <a>
+            <strong>privacy policy </strong>
+          </a>
+        </Link>
+      }
+      .
+    </div>
+  )
+})
+
+ChekoutNotePolicy.displayName = 'ChekoutNotePolicy'
+export default ChekoutNotePolicy
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
@@ -10,15 +10,8 @@
    .bottom{
        margin-top: 2.4rem;
        @apply flex justify-between items-center;
-        .note{
-            font-size: 1.2rem;
-            line-height: 2rem;
-        }
        @screen sm-only {
            @apply flex-col items-start;
-            .button {
-                padding-top: 2rem;
-            }
        }

    }
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
@@ -1,55 +1,117 @@
-import Link from 'next/link'
+import { Form, Formik } from 'formik'
 import React, { useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
-import InputCommon from 'src/components/common/InputCommon/InputCommon'
-import { CheckOutForm } from 'src/utils/types.utils'
+import { ButtonCommon, InputFiledInForm } from 'src/components/common'
+import { useMessage } from 'src/components/contexts'
+import { useSetCustomerForOrder } from 'src/components/hooks/order'
+import { LANGUAGE } from 'src/utils/language.utils'
+import { CustomInputCommon } from 'src/utils/type.utils'
+import * as Yup from 'yup'
+import ChekoutNotePolicy from '../ChekoutNotePolicy/ChekoutNotePolicy'
 import s from './CustomerInfoForm.module.scss'
-interface CustomerInfoFormProps {
-  onConfirm?: (id: number, formInfo: CheckOutForm) => void
-  id: number
+interface Props {
+  isHide: boolean
+  onSwitch: () => void
 }

-const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
-  const nameRef = useRef<React.ElementRef<typeof InputCommon>>(null)
-  const emailRef = useRef<React.ElementRef<typeof InputCommon>>(null)
+const displayingErrorMessagesSchema = Yup.object().shape({
+  firstName: Yup.string().required(LANGUAGE.MESSAGE.REQUIRED),
+  lastName: Yup.string().required(LANGUAGE.MESSAGE.REQUIRED),
+  emailAddress: Yup.string().email(LANGUAGE.MESSAGE.INVALID_EMAIL).required(LANGUAGE.MESSAGE.REQUIRED),
+})
+
+const CustomerInfoForm = ({ onSwitch, isHide }: Props) => {
+  const firstNameRef = useRef<CustomInputCommon>(null)
+  const emailRef = useRef<CustomInputCommon>(null)
+  const { setCustomerForOrder, loading } = useSetCustomerForOrder()
+  const { showMessageError } = useMessage()
+
+  const handleSubmit = (values: { firstName: string, lastName: string, emailAddress: string }) => {
+    console.log('on submit: ', values)
+    const { firstName, lastName, emailAddress } = values
+    setCustomerForOrder({ firstName, lastName, emailAddress }, onSubmitCalBack)
+    // onConfirm &&
+    //   onConfirm(id, {
+    //     name: nameRef?.current?.getValue().toString(),
+    //     email: emailRef.current?.getValue().toString(),
+    //   })
+  }
+  const onSubmitCalBack = (isSuccess: boolean, msg?: string) => {
+    // TODO:
+    console.log("result: ", isSuccess, msg)
+    if (isSuccess) {
+
+    } else {
+      console.log("error here")
+      showMessageError(msg)
+    }

-  const handleConfirmClick = () => {
-    onConfirm &&
-      onConfirm(id, {
-        name: nameRef?.current?.getValue().toString(),
-        email: emailRef.current?.getValue().toString(),
-      })
  }

  return (
-    <div className={s.warpper}>
+    <section className={s.warpper}>
      <div className={s.body}>
-        <Inputcommon type="text" placeholder="Full Name" ref={nameRef} />
-        <Inputcommon type="text" placeholder="Email Address" ref={emailRef} />
+        <Formik
+          initialValues={{
+            firstName: '',
+            lastName: '',
+            emailAddress: '',
+          }}
+          validationSchema={displayingErrorMessagesSchema}
+          onSubmit={handleSubmit}
+
+        >
+          {({ errors, touched, isValid, submitForm }) => (
+            <Form className="u-form">
+              <div className="body">
+                <div className="line">
+                  <InputFiledInForm
+                    name="firstName"
+                    placeholder="First name"
+                    ref={firstNameRef}
+                    error={
+                      touched.firstName && errors.firstName
+                        ? errors.firstName.toString()
+                        : ''
+                    }
+                    isShowIconSuccess={touched.firstName && !errors.firstName}
+                  />
+
+                  <InputFiledInForm
+                    name="lastName"
+                    placeholder="Last name"
+                    error={
+                      touched.lastName && errors.lastName
+                        ? errors.lastName.toString()
+                        : ''
+                    }
+                    isShowIconSuccess={touched.lastName && !errors.lastName}
+                  />
+                </div>
+                <InputFiledInForm
+                  name="emailAddress"
+                  placeholder="Email Address"
+                  ref={emailRef}
+                  error={
+                    touched.emailAddress && errors.emailAddress
+                      ? errors.emailAddress.toString()
+                      : ''
+                  }
+                  isShowIconSuccess={touched.emailAddress && !errors.emailAddress}
+                  onEnter={isValid ? submitForm : undefined}
+
+                />
+              </div>
+              <div className={s.bottom}>
+                <ChekoutNotePolicy />
+                <ButtonCommon HTMLType='submit' loading={loading} size="large">
+                  Continue to Shipping
+                </ButtonCommon>
+              </div>
+            </Form>
+          )}
+        </Formik>
      </div>
-      <div className={s.bottom}>
-        <div className={s.note}>
-          By clicking continue you agree to Casper's{' '}
-          {
-            <Link href="#">
-              <strong>terms and conditions</strong>
-            </Link>
-          }{' '}
-          and{' '}
-          {
-            <Link href="#">
-              <strong>privacy policy </strong>
-            </Link>
-          }
-          .
-        </div>
-        <div className={s.button}>
-          <ButtonCommon onClick={handleConfirmClick}>
-            Continue to Shipping
-          </ButtonCommon>
-        </div>
-      </div>
-    </div>
+    </section>
  )
 }

--- a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
@@ -14,9 +14,11 @@ interface ShippingInfoFormProps {
 const option = [
  {
    name: 'Hồ Chí Minh',
+    value: 'Hồ Chí Minh',
  },
  {
    name: 'Hà Nội',
+    value: 'Hà Nội',
  },
 ]

--- a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
+++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
@@ -1,5 +1,7 @@
 import classNames from 'classnames'
 import React, { useState } from 'react'
+import { MessageCommon } from 'src/components/common'
+import { useMessage } from 'src/components/contexts'
 import IconHide from 'src/components/icons/IconHide'
 import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
 import { CheckoutBill, CheckoutInfo } from '..'
@@ -8,7 +10,9 @@ interface CheckoutPageProps {
 }

 const CheckoutPage = ({}: CheckoutPageProps) => {
+    const { messages, removeMessage } = useMessage()
    const [isShow, setIsShow] = useState(false)
+
    const onClose = () => {
        setIsShow(false)
    }
@@ -17,6 +21,7 @@ const CheckoutPage = ({}: CheckoutPageProps) => {
    }
    return (
        <div className={s.warrper}>
+            <MessageCommon messages={messages} onRemove={removeMessage} />
            <div className={s.left}><CheckoutInfo onViewCart = {onViewCart}/></div>
            <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
            <div className={classNames({ [s.mobile] :true,[s.isShow]: isShow})}>
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -201,7 +201,7 @@
                }
            }
            .line {
-                @apply flex justify-between items-center;
+                @apply flex justify-between items-start;
                > div {
                    flex: 1;
                    &:not(:last-child) {
--- a/src/utils/fetcher.ts
+++ b/src/utils/fetcher.ts
@@ -1,4 +1,4 @@
-import { request } from 'graphql-request'
+import { GraphQLClient } from 'graphql-request'
 import { RequestDocument, Variables } from 'graphql-request/dist/types'
 import { LOCAL_STORAGE_KEY } from './constanst.utils'

@@ -12,11 +12,15 @@ interface QueryOptions {
 const fetcher = async <T>(options: QueryOptions): Promise<T> => {
  const { query, variables } = options
  const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN)
-  const res = await request<T>(
-    process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string,
+  const graphQLClient = new GraphQLClient(process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, {
+    credentials: 'include',
+    mode: 'cors',
+    headers: token ? { Authorization: 'Bearer ' + token } : {},
+  })
+
+  const res = await graphQLClient.request<T>(
    query,
    variables,
-    token ? { Authorization: 'Bearer ' + token } : {}
  )

  return res
--- a/src/utils/language.utils.ts
+++ b/src/utils/language.utils.ts
@@ -11,6 +11,9 @@ export const LANGUAGE = {
        SEARCH: 'Search',
    },
    MESSAGE: {
-        ERROR: 'Something went wrong! Please try again!'
+        ERROR: 'Something went wrong! Please try again!',
+        INVALID_EMAIL: 'Your email was wrong',
+        REQUIRED: 'Required',
+
    }
 }
--- a/src/utils/rawFetcher.ts
+++ b/src/utils/rawFetcher.ts
@@ -1,7 +1,6 @@
-import { rawRequest } from 'graphql-request'
+import { GraphQLClient } from 'graphql-request'
 import { RequestDocument, Variables } from 'graphql-request/dist/types'
 import { LOCAL_STORAGE_KEY } from './constanst.utils'
-
 interface QueryOptions {
  query: RequestDocument
  variables?: Variables
@@ -16,15 +15,20 @@ const rawFetcher = <T>({
 }: QueryOptions): Promise<{ data: T; headers: any }> => {
  onLoad(true)
  const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN)
-  return rawRequest<T>(
-    process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string,
+
+  const graphQLClient = new GraphQLClient(process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, {
+    credentials: 'include',
+    mode: 'cors',
+    headers: token ? { Authorization: 'Bearer ' + token } : {},
+  })
+
+  return graphQLClient.rawRequest<T>(
    query as string,
    variables,
-    token ? { Authorization: 'Bearer ' + token } : {}
-  )
-    .then(({ data, headers }) => {
-      return { data, headers }
-    })
+      )
+  .then(({ data, headers }) => {
+    return { data, headers }
+  })
    .finally(() => onLoad(false))
 }

--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -72,4 +72,18 @@ export type PromiseWithKey = {
    keyResult?: string,
 }

-export type SelectedOptions = Record<string, string | null>
+// ref https://www.vendure.io/docs/typescript-api/orders/order-state/
+export type OrderState = | 'Created'
+    | 'AddingItems'
+    | 'ArrangingPayment'
+    | 'PaymentAuthorized'
+    | 'PaymentSettled'
+    | 'PartiallyShipped'
+    | 'Shipped'
+    | 'PartiallyDelivered'
+    | 'Delivered'
+    | 'Modifying'
+    | 'ArrangingAdditionalPayment'
+    | 'Cancelled'
+
+export type SelectedOptions = Record<string, string | null>
				`@@ -0,0 +1,2 @@`
				`export { default as useSetCustomerForOrder } from './useSetCustomerForOrder'`