mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
Implement submit on checkout
This commit is contained in:
parent
ac1a8be6c3
commit
49289ecb76
@ -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,
|
||||
|
@ -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();
|
||||
|
@ -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
|
@ -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
|
@ -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>
|
||||
|
@ -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'
|
||||
|
@ -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]
|
||||
)
|
||||
},
|
||||
}
|
||||
|
@ -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]
|
||||
)
|
||||
},
|
||||
}
|
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user