Implement submit on checkout

components/checkout/PaymentMethodView/PaymentMethodView.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import cn from 'classnames'
 
-import useCheckout from '@framework/checkout/use-checkout'
+import useAddCard from '@framework/customer/card/use-add-item'
 import { Button, Text } from '@components/ui'
 import { useUI } from '@components/ui/context'
 import SidebarLayout from '@components/common/SidebarLayout'
@@ -24,12 +24,12 @@ interface Form extends HTMLFormElement {
 
 const PaymentMethodView: FC = () => {
   const { setSidebarView } = useUI()
-  const [, {addPayment}] = useCheckout()
+  const addCard = useAddCard()
 
   async function handleSubmit(event: React.ChangeEvent<Form>) {
     event.preventDefault();
 
-    await addPayment({
+    await addCard({
       cardHolder: event.target.cardHolder.value,
       cardNumber: event.target.cardNumber.value,
       cardExpireDate: event.target.cardExpireDate.value,

components/checkout/ShippingView/ShippingView.tsx

@@ -4,7 +4,7 @@ import cn from 'classnames'
 import Button from '@components/ui/Button'
 import { useUI } from '@components/ui/context'
 import SidebarLayout from '@components/common/SidebarLayout'
-import useCheckout from '@framework/checkout/use-checkout'
+import useAddAddress from '@framework/customer/address/use-add-item'
 
 import s from './ShippingView.module.css'
 
@@ -24,7 +24,7 @@ interface Form extends HTMLFormElement {
 
 const PaymentMethodView: FC = () => {
   const { setSidebarView } = useUI()
-  const [, {addAddress}] = useCheckout()
+  const addAddress = useAddAddress()
 
   async function handleSubmit(event: React.ChangeEvent<Form>) {
     event.preventDefault();

framework/commerce/checkout/use-checkout.ts

@@ -6,7 +6,7 @@ import Cookies from 'js-cookie'
 import { useHook, useSWRHook } from '../utils/use-hook'
 import { Provider, useCommerce } from '..'
 
-export type UseGetCheckout<
+export type UseCheckout<
   H extends SWRHook<GetCheckoutHook<any>> = SWRHook<GetCheckoutHook>
 > = ReturnType<H['useHook']>
 
@@ -18,9 +18,9 @@ export const fetcher: HookFetcherFn<GetCheckoutHook> = async ({
   return cartId ? await fetch(options) : null
 }
 
-const fn = (provider: Provider) => provider.checkout?.useGetCheckout!
+const fn = (provider: Provider) => provider.checkout?.useCheckout!
 
-const useGetCheckout: UseGetCheckout = (input) => {
+const useCheckout: UseCheckout = (input) => {
   const hook = useHook(fn)
   const { cartCookie } = useCommerce()
   const fetcherFn = hook.fetcher ?? fetcher
@@ -31,4 +31,4 @@ const useGetCheckout: UseGetCheckout = (input) => {
   return useSWRHook({ ...hook, fetcher: wrapper })(input)
 }
 
-export default useGetCheckout
+export default useCheckout

framework/commerce/checkout/use-checkout.tsx

@@ -1,19 +0,0 @@
-import useGetCheckout from "./use-get-checkout"
-import useSubmitCheckout from "./use-submit-checkout";
-import useAddPayment from "../customer/card/use-add-item"
-import useAddShipping from "../customer/address/use-add-item"
-
-export type UseCheckout = any;
-
-function useCheckout(): UseCheckout {
-  const state = useGetCheckout()
-  const actions = {
-    submit: useSubmitCheckout(),
-    addPayment: useAddPayment(),
-    addShipping: useAddShipping()
-  }
-
-  return {...state, ...actions}
-}
-
-export default useCheckout

framework/commerce/index.tsx

@@ -31,9 +31,8 @@ export type Provider = CommerceConfig & {
     useRemoveItem?: MutationHook<Cart.RemoveItemHook>
   }
   checkout?: {
+    useCheckout?: SWRHook<Checkout.GetCheckoutHook>
     useSubmitCheckout?: MutationHook<Checkout.SubmitCheckoutHook>
-    useGetCheckout?: SWRHook<Checkout.GetCheckoutHook>
-    useCheckout?: any;
   }
   wishlist?: {
     useWishlist?: SWRHook<Wishlist.GetWishlistHook>

framework/ordercloud/checkout/index.ts

@@ -1,2 +1,2 @@
-export { default as useCheckout } from './use-submit-checkout'
-export { default as useGetCheckout } from './use-get-checkout'
+export { default as useSubmitCheckout } from './use-submit-checkout'
+export { default as useCheckout } from './use-checkout'

framework/ordercloud/checkout/use-checkout.tsx

@@ -1,6 +1,41 @@
+import type { GetCheckoutHook } from '@commerce/types/checkout'
+
+import { useMemo } from 'react'
+import { SWRHook } from '@commerce/utils/types'
 import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+import useSubmitCheckout from './use-submit-checkout'
 
-export default useCheckout as UseCheckout
+export default useCheckout as UseCheckout<typeof handler>
 
-export const handler = useCheckout
+export const handler: SWRHook<GetCheckoutHook> = {
+  fetchOptions: {
+    url: '/api/checkout',
+    method: 'GET',
+  },
+  useHook: ({ useData }) =>
+    function useHook(input) {
+      const submit = useSubmitCheckout();
+      const response = useData({
+        swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
+      })
 
+      return useMemo(
+        () =>
+          Object.create(response, {
+            isEmpty: {
+              get() {
+                return (response.data?.lineItems?.length ?? 0) <= 0
+              },
+              enumerable: true,
+            },
+            submit: {
+              get() {
+                return submit
+              },
+              enumerable: true,
+            },
+          }),
+        [response, submit]
+      )
+    },
+}

framework/ordercloud/checkout/use-get-checkout.tsx

@@ -1,33 +0,0 @@
-import type { GetCheckoutHook } from '@commerce/types/checkout'
-
-import { useMemo } from 'react'
-import { SWRHook } from '@commerce/utils/types'
-import useGetCheckout, { UseGetCheckout } from '@commerce/checkout/use-get-checkout'
-
-export default useGetCheckout as UseGetCheckout<typeof handler>
-
-export const handler: SWRHook<GetCheckoutHook> = {
-  fetchOptions: {
-    url: '/api/checkout',
-    method: 'GET',
-  },
-  useHook: ({ useData }) =>
-    function useHook(input) {
-      const response = useData({
-        swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
-      })
-
-      return useMemo(
-        () =>
-          Object.create(response, {
-            isEmpty: {
-              get() {
-                return (response.data?.lineItems?.length ?? 0) <= 0
-              },
-              enumerable: true,
-            },
-          }),
-        [response]
-      )
-    },
-}

framework/ordercloud/provider.ts

@@ -12,7 +12,6 @@ import { handler as useSignup } from './auth/use-signup'
 
 import { handler as useCheckout } from './checkout/use-checkout'
 import { handler as useSubmitCheckout } from './checkout/use-submit-checkout'
-import { handler as useGetCheckout } from './checkout/use-get-checkout'
 
 import { handler as useCards } from './customer/card/use-cards'
 import { handler as useAddCardItem } from './customer/card/use-add-item'
@@ -40,7 +39,6 @@ export const ordercloudProvider = {
   checkout: {
     useCheckout,
     useSubmitCheckout,
-    useGetCheckout,
   },
   customer: {
     useCustomer,