Implement custom checkout (#487)

* Implement custom checkout core

* Fix elements on core

* Add files to providers

* Adapt providers

* Update types

* Update shopify file

* Format files

framework/bigcommerce/api/endpoints/checkout/index.ts

@@ -2,13 +2,13 @@ import { GetAPISchema, createEndpoint } from '@commerce/api'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 import type { CheckoutSchema } from '../../../types/checkout'
 import type { BigcommerceAPI } from '../..'
-import checkout from './checkout'
+import submitCheckout from './submit-checkout'
 
 export type CheckoutAPI = GetAPISchema<BigcommerceAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,

framework/bigcommerce/api/endpoints/checkout/submit-checkout.ts

@@ -5,7 +5,7 @@ import { uuid } from 'uuidv4'
 
 const fullCheckout = true
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -87,4 +87,4 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
   res.end()
 }
 
-export default checkout
+export default submitCheckout

framework/bigcommerce/api/endpoints/customer/address.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/bigcommerce/api/endpoints/customer/card.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/bigcommerce/checkout/use-checkout.tsx

@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@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) => ({}),
+}

framework/bigcommerce/customer/address/use-add-item.tsx

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

framework/bigcommerce/customer/card/use-add-item.tsx

@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

framework/commerce/api/endpoints/checkout.ts

@@ -1,25 +1,39 @@
 import type { CheckoutSchema } from '../../types/checkout'
+import type { GetAPISchema } from '..'
+
 import { CommerceAPIError } from '../utils/errors'
 import isAllowedOperation from '../utils/is-allowed-operation'
-import type { GetAPISchema } from '..'
 
 const checkoutEndpoint: GetAPISchema<
   any,
   CheckoutSchema
 >['endpoint']['handler'] = async (ctx) => {
-  const { req, res, handlers } = ctx
+  const { req, res, handlers, config } = ctx
 
   if (
     !isAllowedOperation(req, res, {
-      GET: handlers['checkout'],
+      GET: handlers['getCheckout'],
+      POST: handlers['submitCheckout'],
     })
   ) {
     return
   }
 
+  const { cookies } = req
+  const cartId = cookies[config.cartCookie]
+
   try {
-    const body = null
-    return await handlers['checkout']({ ...ctx, body })
+    // Create checkout
+    if (req.method === 'GET') {
+      const body = { ...req.body, cartId }
+      return await handlers['getCheckout']?.({ ...ctx, body })
+    }
+
+    // Create checkout
+    if (req.method === 'POST') {
+      const body = { ...req.body, cartId }
+      return await handlers['submitCheckout']({ ...ctx, body })
+    }
   } catch (error) {
     console.error(error)
 

framework/commerce/api/endpoints/customer/address.ts

@@ -0,0 +1,65 @@
+import type { CustomerAddressSchema } from '../../../types/customer/address'
+import type { GetAPISchema } from '../..'
+
+import { CommerceAPIError } from '../../utils/errors'
+import isAllowedOperation from '../../utils/is-allowed-operation'
+
+const customerShippingEndpoint: GetAPISchema<
+  any,
+  CustomerAddressSchema
+>['endpoint']['handler'] = async (ctx) => {
+  const { req, res, handlers, config } = ctx
+
+  if (
+    !isAllowedOperation(req, res, {
+      GET: handlers['getAddresses'],
+      POST: handlers['addItem'],
+      PUT: handlers['updateItem'],
+      DELETE: handlers['removeItem'],
+    })
+  ) {
+    return
+  }
+
+  const { cookies } = req
+
+  // Cart id might be usefull for anonymous shopping
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    // Return customer addresses
+    if (req.method === 'GET') {
+      const body = { cartId }
+      return await handlers['getAddresses']({ ...ctx, body })
+    }
+
+    // Create or add an item to customer addresses list
+    if (req.method === 'POST') {
+      const body = { ...req.body, cartId }
+      return await handlers['addItem']({ ...ctx, body })
+    }
+
+    // Update item in customer addresses list
+    if (req.method === 'PUT') {
+      const body = { ...req.body, cartId }
+      return await handlers['updateItem']({ ...ctx, body })
+    }
+
+    // Remove an item from customer addresses list
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, cartId }
+      return await handlers['removeItem']({ ...ctx, body })
+    }
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof CommerceAPIError
+        ? 'An unexpected error ocurred with the Commerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export default customerShippingEndpoint

framework/commerce/api/endpoints/customer/card.ts

@@ -0,0 +1,65 @@
+import type { CustomerCardSchema } from '../../../types/customer/card'
+import type { GetAPISchema } from '../..'
+
+import { CommerceAPIError } from '../../utils/errors'
+import isAllowedOperation from '../../utils/is-allowed-operation'
+
+const customerCardEndpoint: GetAPISchema<
+  any,
+  CustomerCardSchema
+>['endpoint']['handler'] = async (ctx) => {
+  const { req, res, handlers, config } = ctx
+
+  if (
+    !isAllowedOperation(req, res, {
+      GET: handlers['getCards'],
+      POST: handlers['addItem'],
+      PUT: handlers['updateItem'],
+      DELETE: handlers['removeItem'],
+    })
+  ) {
+    return
+  }
+
+  const { cookies } = req
+
+  // Cart id might be usefull for anonymous shopping
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    // Create or add a card
+    if (req.method === 'GET') {
+      const body = { ...req.body }
+      return await handlers['getCards']({ ...ctx, body })
+    }
+
+    // Create or add an item to customer cards
+    if (req.method === 'POST') {
+      const body = { ...req.body, cartId }
+      return await handlers['addItem']({ ...ctx, body })
+    }
+
+    // Update item in customer cards
+    if (req.method === 'PUT') {
+      const body = { ...req.body, cartId }
+      return await handlers['updateItem']({ ...ctx, body })
+    }
+
+    // Remove an item from customer cards
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, cartId }
+      return await handlers['removeItem']({ ...ctx, body })
+    }
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof CommerceAPIError
+        ? 'An unexpected error ocurred with the Commerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export default customerCardEndpoint

framework/commerce/api/endpoints/customer/index.ts

@@ -1,7 +1,8 @@
-import type { CustomerSchema } from '../../types/customer'
-import { CommerceAPIError } from '../utils/errors'
-import isAllowedOperation from '../utils/is-allowed-operation'
-import type { GetAPISchema } from '..'
+import type { CustomerSchema } from '../../../types/customer'
+import type { GetAPISchema } from '../..'
+
+import { CommerceAPIError } from '../../utils/errors'
+import isAllowedOperation from '../../utils/is-allowed-operation'
 
 const customerEndpoint: GetAPISchema<
   any,

framework/commerce/api/index.ts

@@ -9,6 +9,8 @@ import type { SignupSchema } from '../types/signup'
 import type { ProductsSchema } from '../types/product'
 import type { WishlistSchema } from '../types/wishlist'
 import type { CheckoutSchema } from '../types/checkout'
+import type { CustomerCardSchema } from '../types/customer/card'
+import type { CustomerAddressSchema } from '../types/customer/address'
 import {
   defaultOperations,
   OPERATIONS,
@@ -25,6 +27,8 @@ export type APISchemas =
   | ProductsSchema
   | WishlistSchema
   | CheckoutSchema
+  | CustomerCardSchema
+  | CustomerAddressSchema
 
 export type GetAPISchema<
   C extends CommerceAPI<any>,

framework/commerce/checkout/use-checkout.ts

@@ -0,0 +1,34 @@
+import type { SWRHook, HookFetcherFn } from '../utils/types'
+import type { GetCheckoutHook } from '../types/checkout'
+
+import Cookies from 'js-cookie'
+
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { Provider, useCommerce } from '..'
+
+export type UseCheckout<
+  H extends SWRHook<GetCheckoutHook<any>> = SWRHook<GetCheckoutHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<GetCheckoutHook> = async ({
+  options,
+  input: { cartId },
+  fetch,
+}) => {
+  return cartId ? await fetch(options) : null
+}
+
+const fn = (provider: Provider) => provider.checkout?.useCheckout!
+
+const useCheckout: UseCheckout = (input) => {
+  const hook = useHook(fn)
+  const { cartCookie } = useCommerce()
+  const fetcherFn = hook.fetcher ?? fetcher
+  const wrapper: typeof fetcher = (context) => {
+    context.input.cartId = Cookies.get(cartCookie)
+    return fetcherFn(context)
+  }
+  return useSWRHook({ ...hook, fetcher: wrapper })(input)
+}
+
+export default useCheckout

framework/commerce/checkout/use-submit-checkout.tsx

@@ -0,0 +1,23 @@
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { SubmitCheckoutHook } from '../types/checkout'
+import type { Provider } from '..'
+
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+
+export type UseSubmitCheckout<
+  H extends MutationHook<
+    SubmitCheckoutHook<any>
+  > = MutationHook<SubmitCheckoutHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<SubmitCheckoutHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.checkout?.useSubmitCheckout!
+
+const useSubmitCheckout: UseSubmitCheckout = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useSubmitCheckout

framework/commerce/customer/address/use-add-item.tsx

@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { AddItemHook } from '../../types/customer/address'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseAddItem<
+  H extends MutationHook<AddItemHook<any>> = MutationHook<AddItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<AddItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.address?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useAddItem

framework/commerce/customer/address/use-addresses.tsx

@@ -0,0 +1,34 @@
+import type { SWRHook, HookFetcherFn } from '../../utils/types'
+import type { GetAddressesHook } from '../../types/customer/address'
+
+import Cookies from 'js-cookie'
+
+import { useHook, useSWRHook } from '../../utils/use-hook'
+import { Provider, useCommerce } from '../..'
+
+export type UseAddresses<
+  H extends SWRHook<GetAddressesHook<any>> = SWRHook<GetAddressesHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<GetAddressesHook> = async ({
+  options,
+  input: { cartId },
+  fetch,
+}) => {
+  return cartId ? await fetch(options) : null
+}
+
+const fn = (provider: Provider) => provider.customer?.address?.useAddresses!
+
+const useAddresses: UseAddresses = (input) => {
+  const hook = useHook(fn)
+  const { cartCookie } = useCommerce()
+  const fetcherFn = hook.fetcher ?? fetcher
+  const wrapper: typeof fetcher = (context) => {
+    context.input.cartId = Cookies.get(cartCookie)
+    return fetcherFn(context)
+  }
+  return useSWRHook({ ...hook, fetcher: wrapper })(input)
+}
+
+export default useAddresses

framework/commerce/customer/address/use-remove-item.tsx

@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { RemoveItemHook } from '../../types/customer/address'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseRemoveItem<
+  H extends MutationHook<RemoveItemHook<any>> = MutationHook<RemoveItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<RemoveItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.address?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useRemoveItem

framework/commerce/customer/address/use-update-item.tsx

@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { UpdateItemHook } from '../../types/customer/address'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseUpdateItem<
+  H extends MutationHook<UpdateItemHook<any>> = MutationHook<UpdateItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<UpdateItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.address?.useUpdateItem!
+
+const useUpdateItem: UseUpdateItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useUpdateItem

framework/commerce/customer/card/use-add-item.tsx

@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { AddItemHook } from '../../types/customer/card'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseAddItem<
+  H extends MutationHook<AddItemHook<any>> = MutationHook<AddItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<AddItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.card?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useAddItem

framework/commerce/customer/card/use-cards.tsx

@@ -0,0 +1,34 @@
+import type { SWRHook, HookFetcherFn } from '../../utils/types'
+import type { GetCardsHook } from '../../types/customer/card'
+
+import Cookies from 'js-cookie'
+
+import { useHook, useSWRHook } from '../../utils/use-hook'
+import { Provider, useCommerce } from '../..'
+
+export type UseCards<
+  H extends SWRHook<GetCardsHook<any>> = SWRHook<GetCardsHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<GetCardsHook> = async ({
+  options,
+  input: { cartId },
+  fetch,
+}) => {
+  return cartId ? await fetch(options) : null
+}
+
+const fn = (provider: Provider) => provider.customer?.card?.useCards!
+
+const useCards: UseCards = (input) => {
+  const hook = useHook(fn)
+  const { cartCookie } = useCommerce()
+  const fetcherFn = hook.fetcher ?? fetcher
+  const wrapper: typeof fetcher = (context) => {
+    context.input.cartId = Cookies.get(cartCookie)
+    return fetcherFn(context)
+  }
+  return useSWRHook({ ...hook, fetcher: wrapper })(input)
+}
+
+export default useCards

framework/commerce/customer/card/use-remove-item.tsx

@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { RemoveItemHook } from '../../types/customer/card'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseRemoveItem<
+  H extends MutationHook<RemoveItemHook<any>> = MutationHook<RemoveItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<RemoveItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.card?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useRemoveItem

framework/commerce/customer/card/use-update-item.tsx

@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { UpdateItemHook } from '../../types/customer/card'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseUpdateItem<
+  H extends MutationHook<UpdateItemHook<any>> = MutationHook<UpdateItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<UpdateItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider?.customer?.card?.useUpdateItem!
+
+const useUpdateItem: UseUpdateItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useUpdateItem

framework/commerce/index.tsx

@@ -15,6 +15,7 @@ import type {
   Signup,
   Login,
   Logout,
+  Checkout,
 } from '@commerce/types'
 
 import type { Fetcher, SWRHook, MutationHook } from './utils/types'
@@ -29,6 +30,10 @@ export type Provider = CommerceConfig & {
     useUpdateItem?: MutationHook<Cart.UpdateItemHook>
     useRemoveItem?: MutationHook<Cart.RemoveItemHook>
   }
+  checkout?: {
+    useCheckout?: SWRHook<Checkout.GetCheckoutHook>
+    useSubmitCheckout?: MutationHook<Checkout.SubmitCheckoutHook>
+  }
   wishlist?: {
     useWishlist?: SWRHook<Wishlist.GetWishlistHook>
     useAddItem?: MutationHook<Wishlist.AddItemHook>
@@ -36,6 +41,18 @@ export type Provider = CommerceConfig & {
   }
   customer?: {
     useCustomer?: SWRHook<Customer.CustomerHook>
+    card?: {
+      useCards?: SWRHook<Customer.Card.GetCardsHook>
+      useAddItem?: MutationHook<Customer.Card.AddItemHook>
+      useUpdateItem?: MutationHook<Customer.Card.UpdateItemHook>
+      useRemoveItem?: MutationHook<Customer.Card.RemoveItemHook>
+    }
+    address?: {
+      useAddresses?: SWRHook<Customer.Address.GetAddressesHook>
+      useAddItem?: MutationHook<Customer.Address.AddItemHook>
+      useUpdateItem?: MutationHook<Customer.Address.UpdateItemHook>
+      useRemoveItem?: MutationHook<Customer.Address.RemoveItemHook>
+    }
   }
   products?: {
     useSearch?: SWRHook<Product.SearchProductsHook>

framework/commerce/types/checkout.ts

@@ -1,10 +1,57 @@
-export type CheckoutSchema = {
+import type { UseSubmitCheckout } from '../checkout/use-submit-checkout'
+import type { Address } from './customer/address'
+import type { Card } from './customer/card'
+
+// Index
+export type Checkout = unknown;
+
+export type CheckoutTypes = {
+  card?: Card
+  address?: Address
+  checkout?: Checkout
+  hasPayment?: boolean
+  hasShipping?: boolean
+}
+
+export type SubmitCheckoutHook<T extends CheckoutTypes = CheckoutTypes> = {
+  data: T
+  input?: T
+  fetcherInput: T
+  body: { item: T }
+  actionInput: T
+}
+
+export type GetCheckoutHook<T extends CheckoutTypes = CheckoutTypes> = {
+  data: T['checkout'] | null
+  input: {}
+  fetcherInput: { cartId?: string }
+  swrState: { isEmpty: boolean }
+  mutations: { submit: UseSubmitCheckout }
+}
+
+export type CheckoutHooks<T extends CheckoutTypes = CheckoutTypes> = {
+  submitCheckout: SubmitCheckoutHook<T>
+  getCheckout: GetCheckoutHook<T>
+}
+
+export type GetCheckoutHandler<T extends CheckoutTypes = CheckoutTypes> =
+  GetCheckoutHook<T> & {
+    body: { cartId: string }
+  }
+
+export type SubmitCheckoutHandler<T extends CheckoutTypes = CheckoutTypes> =
+  SubmitCheckoutHook<T> & {
+    body: { cartId: string }
+  }
+
+export type CheckoutHandlers<T extends CheckoutTypes = CheckoutTypes> = {
+  getCheckout?: GetCheckoutHandler<T>
+  submitCheckout: SubmitCheckoutHandler<T>
+}
+
+export type CheckoutSchema<T extends CheckoutTypes = CheckoutTypes> = {
   endpoint: {
     options: {}
-    handlers: {
-      checkout: {
-        data: null
-      }
-    }
+    handlers: CheckoutHandlers<T>
   }
 }

framework/commerce/types/customer/address.ts

@@ -0,0 +1,93 @@
+export interface Address {
+  id: string;
+  mask: string;
+}
+
+export interface AddressFields {
+  type: string;
+  firstName: string;
+  lastName: string;
+  company: string;
+  streetNumber: string;
+  apartments: string;
+  zipCode: string;
+  city: string;
+  country: string;
+}
+
+export type CustomerAddressTypes = {
+  address?: Address;
+  fields: AddressFields;
+}
+
+export type GetAddressesHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address'] | null
+  input: {}
+  fetcherInput: { cartId?: string }
+  swrState: { isEmpty: boolean }
+}
+
+export type AddItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address']
+  input?: T['fields']
+  fetcherInput: T['fields']
+  body: { item: T['fields'] }
+  actionInput: T['fields']
+}
+
+export type UpdateItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address'] | null
+  input: { item?: T['fields']; wait?: number }
+  fetcherInput: { itemId: string; item: T['fields'] }
+  body: { itemId: string; item: T['fields'] }
+  actionInput: T['fields'] & { id: string }
+}
+
+export type RemoveItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address'] | null
+  input: { item?: T['fields'] }
+  fetcherInput: { itemId: string }
+  body: { itemId: string }
+  actionInput: { id: string }
+}
+
+export type CustomerAddressHooks<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  getAddresses: GetAddressesHook<T>
+  addItem: AddItemHook<T>
+  updateItem: UpdateItemHook<T>
+  removeItem: RemoveItemHook<T>
+}
+
+export type AddresssHandler<T extends CustomerAddressTypes = CustomerAddressTypes> = GetAddressesHook<T> & {
+  body: { cartId?: string }
+}
+
+export type AddItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> = AddItemHook<T> & {
+  body: { cartId: string }
+}
+
+export type UpdateItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> =
+  UpdateItemHook<T> & {
+    data: T['address']
+    body: { cartId: string }
+  }
+
+export type RemoveItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> =
+  RemoveItemHook<T> & {
+    body: { cartId: string }
+  }
+
+
+export type CustomerAddressHandlers<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  getAddresses: GetAddressesHook<T>
+  addItem: AddItemHandler<T>
+  updateItem: UpdateItemHandler<T>
+  removeItem: RemoveItemHandler<T>
+}
+
+export type CustomerAddressSchema<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  endpoint: {
+    options: {}
+    handlers: CustomerAddressHandlers<T>
+  }
+}

framework/commerce/types/customer/card.ts

@@ -0,0 +1,96 @@
+export interface Card {
+  id: string;
+  mask: string;
+  provider: string;
+}
+
+export interface CardFields {
+  cardHolder: string;
+  cardNumber: string;
+  cardExpireDate: string;
+  cardCvc: string;
+  firstName: string;
+  lastName: string;
+  company: string;
+  streetNumber: string;
+  zipCode: string;
+  city: string;
+  country: string;
+}
+
+export type CustomerCardTypes = {
+  card?: Card;
+  fields: CardFields;
+}
+
+export type GetCardsHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card'] | null
+  input: {}
+  fetcherInput: { cartId?: string }
+  swrState: { isEmpty: boolean }
+}
+
+export type AddItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card']
+  input?: T['fields']
+  fetcherInput: T['fields']
+  body: { item: T['fields'] }
+  actionInput: T['fields']
+}
+
+export type UpdateItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card'] | null
+  input: { item?: T['fields']; wait?: number }
+  fetcherInput: { itemId: string; item: T['fields'] }
+  body: { itemId: string; item: T['fields'] }
+  actionInput: T['fields'] & { id: string }
+}
+
+export type RemoveItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card'] | null
+  input: { item?: T['fields'] }
+  fetcherInput: { itemId: string }
+  body: { itemId: string }
+  actionInput: { id: string }
+}
+
+export type CustomerCardHooks<T extends CustomerCardTypes = CustomerCardTypes> = {
+  getCards: GetCardsHook<T>
+  addItem: AddItemHook<T>
+  updateItem: UpdateItemHook<T>
+  removeItem: RemoveItemHook<T>
+}
+
+export type CardsHandler<T extends CustomerCardTypes = CustomerCardTypes> = GetCardsHook<T> & {
+  body: { cartId?: string }
+}
+
+export type AddItemHandler<T extends CustomerCardTypes = CustomerCardTypes> = AddItemHook<T> & {
+  body: { cartId: string }
+}
+
+export type UpdateItemHandler<T extends CustomerCardTypes = CustomerCardTypes> =
+  UpdateItemHook<T> & {
+    data: T['card']
+    body: { cartId: string }
+  }
+
+export type RemoveItemHandler<T extends CustomerCardTypes = CustomerCardTypes> =
+  RemoveItemHook<T> & {
+    body: { cartId: string }
+  }
+
+
+export type CustomerCardHandlers<T extends CustomerCardTypes = CustomerCardTypes> = {
+  getCards: GetCardsHook<T>
+  addItem: AddItemHandler<T>
+  updateItem: UpdateItemHandler<T>
+  removeItem: RemoveItemHandler<T>
+}
+
+export type CustomerCardSchema<T extends CustomerCardTypes = CustomerCardTypes> = {
+  endpoint: {
+    options: {}
+    handlers: CustomerCardHandlers<T>
+  }
+}

framework/commerce/types/customer/index.ts

@@ -1,3 +1,6 @@
+export * as Card from "./card"
+export * as Address from "./address"
+
 // TODO: define this type
 export type Customer = any
 

framework/commerce/utils/types.ts

@@ -87,6 +87,8 @@ export type HookSchemaBase = {
 export type SWRHookSchemaBase = HookSchemaBase & {
   // Custom state added to the response object of SWR
   swrState?: {}
+  // Instances of MutationSchemaBase that the hook returns for better DX
+  mutations?: Record<string, ReturnType<MutationHook<any>['useHook']>>
 }
 
 export type MutationSchemaBase = HookSchemaBase & {
@@ -102,7 +104,7 @@ export type SWRHook<H extends SWRHookSchemaBase> = {
     context: SWRHookContext<H>
   ): HookFunction<
     H['input'] & { swrOptions?: SwrOptions<H['data'], H['fetcherInput']> },
-    ResponseState<H['data']> & H['swrState']
+    ResponseState<H['data']> & H['swrState'] & H['mutations']
   >
   fetchOptions: HookFetcherOptions
   fetcher?: HookFetcherFn<H>

framework/local/api/endpoints/customer/address.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/local/api/endpoints/customer/card.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/local/checkout/use-checkout.tsx

@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@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) => ({}),
+}

framework/local/customer/address/use-add-item.tsx

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

framework/local/customer/card/use-add-item.tsx

@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

framework/saleor/api/endpoints/checkout/index.ts

@@ -6,11 +6,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
-  req,
-  res,
-  config,
-}) => {
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({ req, res, config }) => {
   try {
     const html = `
       <!DOCTYPE html>
@@ -47,7 +43,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
   }
 }
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,

framework/saleor/api/endpoints/customer.ts

@@ -1 +0,0 @@
-export default function (_commerce: any) {}

framework/saleor/api/endpoints/customer/address.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/saleor/api/endpoints/customer/card.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/saleor/api/endpoints/customer/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/saleor/checkout/use-checkout.tsx

@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@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) => ({}),
+}

framework/saleor/customer/address/use-add-item.tsx

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

framework/saleor/customer/card/use-add-item.tsx

@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

framework/shopify/api/endpoints/checkout/index.ts

@@ -2,13 +2,13 @@ import { GetAPISchema, createEndpoint } from '@commerce/api'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 import type { CheckoutSchema } from '../../../types/checkout'
 import type { ShopifyAPI } from '../..'
-import checkout from './checkout'
+import submitCheckout from './submit-checkout'
 
 export type CheckoutAPI = GetAPISchema<ShopifyAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,

framework/shopify/api/endpoints/checkout/submit-checkout.ts

@@ -6,7 +6,7 @@ import {
 import associateCustomerWithCheckoutMutation from '../../../utils/mutations/associate-customer-with-checkout'
 import type { CheckoutEndpoint } from '.'
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -35,4 +35,4 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
   }
 }
 
-export default checkout
+export default submitCheckout

framework/shopify/api/endpoints/customer.ts

@@ -1 +0,0 @@
-export default function (_commerce: any) {}

framework/shopify/api/endpoints/customer/address.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/shopify/api/endpoints/customer/card.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/shopify/api/endpoints/customer/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/shopify/checkout/use-checkout.tsx

@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@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) => ({}),
+}

framework/shopify/customer/address/use-add-item.tsx

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

framework/shopify/customer/card/use-add-item.tsx

@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

framework/swell/api/endpoints/checkout/index.ts

@@ -3,7 +3,7 @@ import { CheckoutSchema } from '@commerce/types/checkout'
 import { SWELL_CHECKOUT_URL_COOKIE } from '../../../const'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -17,7 +17,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
     res.redirect('/cart')
   }
 }
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
 export type CheckoutEndpoint = CheckoutAPI['endpoint']

framework/swell/api/endpoints/customer.ts

@@ -1 +0,0 @@
-export default function (_commerce: any) {}

framework/swell/api/endpoints/customer/address.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/swell/api/endpoints/customer/card.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/swell/api/endpoints/customer/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/swell/checkout/use-checkout.tsx

@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@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) => ({}),
+}

framework/swell/customer/address/use-add-item.tsx

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

framework/swell/customer/card/use-add-item.tsx

@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}

framework/vendure/api/endpoints/checkout/index.ts

@@ -3,7 +3,7 @@ import { CommerceAPI, createEndpoint, GetAPISchema } from '@commerce/api'
 import { CheckoutSchema } from '@commerce/types/checkout'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -48,7 +48,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,

framework/vendure/api/endpoints/customer/address.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/vendure/api/endpoints/customer/card.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/vendure/checkout/use-checkout.tsx

@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@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) => ({}),
+}

framework/vendure/customer/address/use-add-item.tsx

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

framework/vendure/customer/card/use-add-item.tsx

@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}