From 49289ecb76511fa1f59f7eb610ed97a6b5f661ba Mon Sep 17 00:00:00 2001 From: goncy Date: Wed, 15 Sep 2021 10:16:14 -0300 Subject: [PATCH] Implement submit on checkout --- .../PaymentMethodView/PaymentMethodView.tsx | 6 +-- .../checkout/ShippingView/ShippingView.tsx | 4 +- .../{use-get-checkout.ts => use-checkout.ts} | 8 ++-- framework/commerce/checkout/use-checkout.tsx | 19 --------- framework/commerce/index.tsx | 3 +- framework/ordercloud/checkout/index.ts | 4 +- .../ordercloud/checkout/use-checkout.tsx | 39 ++++++++++++++++++- .../ordercloud/checkout/use-get-checkout.tsx | 33 ---------------- framework/ordercloud/provider.ts | 2 - 9 files changed, 49 insertions(+), 69 deletions(-) rename framework/commerce/checkout/{use-get-checkout.ts => use-checkout.ts} (81%) delete mode 100644 framework/commerce/checkout/use-checkout.tsx delete mode 100644 framework/ordercloud/checkout/use-get-checkout.tsx diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx index 93486a694..dfa452e58 100644 --- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx +++ b/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
) { event.preventDefault(); - await addPayment({ + await addCard({ cardHolder: event.target.cardHolder.value, cardNumber: event.target.cardNumber.value, cardExpireDate: event.target.cardExpireDate.value, diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx index 6cd6ae662..696172b61 100644 --- a/components/checkout/ShippingView/ShippingView.tsx +++ b/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) { event.preventDefault(); diff --git a/framework/commerce/checkout/use-get-checkout.ts b/framework/commerce/checkout/use-checkout.ts similarity index 81% rename from framework/commerce/checkout/use-get-checkout.ts rename to framework/commerce/checkout/use-checkout.ts index df11a8052..0fe74cb28 100644 --- a/framework/commerce/checkout/use-get-checkout.ts +++ b/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> = SWRHook > = ReturnType @@ -18,9 +18,9 @@ export const fetcher: HookFetcherFn = 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 diff --git a/framework/commerce/checkout/use-checkout.tsx b/framework/commerce/checkout/use-checkout.tsx deleted file mode 100644 index 09c4e6243..000000000 --- a/framework/commerce/checkout/use-checkout.tsx +++ /dev/null @@ -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 diff --git a/framework/commerce/index.tsx b/framework/commerce/index.tsx index e3997b01d..46a4a2081 100644 --- a/framework/commerce/index.tsx +++ b/framework/commerce/index.tsx @@ -31,9 +31,8 @@ export type Provider = CommerceConfig & { useRemoveItem?: MutationHook } checkout?: { + useCheckout?: SWRHook useSubmitCheckout?: MutationHook - useGetCheckout?: SWRHook - useCheckout?: any; } wishlist?: { useWishlist?: SWRHook diff --git a/framework/ordercloud/checkout/index.ts b/framework/ordercloud/checkout/index.ts index ee73127e0..306621059 100644 --- a/framework/ordercloud/checkout/index.ts +++ b/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' diff --git a/framework/ordercloud/checkout/use-checkout.tsx b/framework/ordercloud/checkout/use-checkout.tsx index 08f047416..6ce13dbb6 100644 --- a/framework/ordercloud/checkout/use-checkout.tsx +++ b/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 -export const handler = useCheckout +export const handler: SWRHook = { + 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] + ) + }, +} diff --git a/framework/ordercloud/checkout/use-get-checkout.tsx b/framework/ordercloud/checkout/use-get-checkout.tsx deleted file mode 100644 index a14670be2..000000000 --- a/framework/ordercloud/checkout/use-get-checkout.tsx +++ /dev/null @@ -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 - -export const handler: SWRHook = { - 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] - ) - }, -} diff --git a/framework/ordercloud/provider.ts b/framework/ordercloud/provider.ts index b8a79b0f9..337eed657 100644 --- a/framework/ordercloud/provider.ts +++ b/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,