mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
Create checkout on add to cart
This commit is contained in:
@@ -29,16 +29,18 @@ export const handler: MutationHook<AddItemHook> = {
|
||||
|
||||
return data
|
||||
},
|
||||
useHook: ({ fetch }) => () => {
|
||||
const { mutate } = useCart()
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() => {
|
||||
const { mutate } = useCart()
|
||||
|
||||
return useCallback(
|
||||
async function addItem(input) {
|
||||
const data = await fetch({ input })
|
||||
await mutate(data, false)
|
||||
return data
|
||||
},
|
||||
[fetch, mutate]
|
||||
)
|
||||
},
|
||||
return useCallback(
|
||||
async function addItem(input) {
|
||||
const data = await fetch({ input })
|
||||
await mutate(data, false)
|
||||
return data
|
||||
},
|
||||
[fetch, mutate]
|
||||
)
|
||||
},
|
||||
}
|
||||
|
@@ -9,6 +9,7 @@ import {
|
||||
checkoutLineItemAddMutation,
|
||||
getCheckoutId,
|
||||
checkoutToCart,
|
||||
checkoutCreate,
|
||||
} from '../utils'
|
||||
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
||||
|
||||
@@ -28,13 +29,20 @@ export const handler: MutationHook<AddItemHook> = {
|
||||
})
|
||||
}
|
||||
|
||||
let checkoutId = getCheckoutId()
|
||||
|
||||
if (!checkoutId) {
|
||||
const checkout = await checkoutCreate(fetch)
|
||||
checkoutId = checkout.id
|
||||
}
|
||||
|
||||
const { checkoutLineItemsAdd } = await fetch<
|
||||
Mutation,
|
||||
MutationCheckoutLineItemsAddArgs
|
||||
>({
|
||||
...options,
|
||||
variables: {
|
||||
checkoutId: getCheckoutId(),
|
||||
checkoutId,
|
||||
lineItems: [
|
||||
{
|
||||
variantId: item.variantId,
|
||||
@@ -46,16 +54,18 @@ export const handler: MutationHook<AddItemHook> = {
|
||||
|
||||
return checkoutToCart(checkoutLineItemsAdd)
|
||||
},
|
||||
useHook: ({ fetch }) => () => {
|
||||
const { mutate } = useCart()
|
||||
useHook:
|
||||
({ fetch }) =>
|
||||
() => {
|
||||
const { mutate } = useCart()
|
||||
|
||||
return useCallback(
|
||||
async function addItem(input) {
|
||||
const data = await fetch({ input })
|
||||
await mutate(data, false)
|
||||
return data
|
||||
},
|
||||
[fetch, mutate]
|
||||
)
|
||||
},
|
||||
return useCallback(
|
||||
async function addItem(input) {
|
||||
const data = await fetch({ input })
|
||||
await mutate(data, false)
|
||||
return data
|
||||
},
|
||||
[fetch, mutate]
|
||||
)
|
||||
},
|
||||
}
|
||||
|
@@ -6,52 +6,43 @@ import { checkoutCreate, checkoutToCart } from '../utils'
|
||||
import getCheckoutQuery from '../utils/queries/get-checkout-query'
|
||||
import { GetCartHook } from '../types/cart'
|
||||
|
||||
import {
|
||||
GetCheckoutQuery,
|
||||
GetCheckoutQueryVariables,
|
||||
CheckoutDetailsFragment,
|
||||
} from '../schema'
|
||||
|
||||
export default useCommerceCart as UseCart<typeof handler>
|
||||
|
||||
export const handler: SWRHook<GetCartHook> = {
|
||||
fetchOptions: {
|
||||
query: getCheckoutQuery,
|
||||
},
|
||||
async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
|
||||
let checkout
|
||||
|
||||
if (checkoutId) {
|
||||
const data = await fetch({
|
||||
async fetcher({ input: { cartId }, options, fetch }) {
|
||||
if (cartId) {
|
||||
const { node } = await fetch({
|
||||
...options,
|
||||
variables: {
|
||||
checkoutId: checkoutId,
|
||||
checkoutId: cartId,
|
||||
},
|
||||
})
|
||||
checkout = data.node
|
||||
return checkoutToCart({
|
||||
checkout: node?.completedAt ? await checkoutCreate(fetch) : node,
|
||||
})
|
||||
}
|
||||
|
||||
if (checkout?.completedAt || !checkoutId) {
|
||||
checkout = await checkoutCreate(fetch)
|
||||
}
|
||||
|
||||
return checkoutToCart({ checkout })
|
||||
return null
|
||||
},
|
||||
useHook: ({ useData }) => (input) => {
|
||||
const response = useData({
|
||||
swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
|
||||
})
|
||||
return useMemo(
|
||||
() =>
|
||||
Object.create(response, {
|
||||
isEmpty: {
|
||||
get() {
|
||||
return (response.data?.lineItems.length ?? 0) <= 0
|
||||
useHook:
|
||||
({ useData }) =>
|
||||
(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,
|
||||
},
|
||||
enumerable: true,
|
||||
},
|
||||
}),
|
||||
[response]
|
||||
)
|
||||
},
|
||||
}),
|
||||
[response]
|
||||
)
|
||||
},
|
||||
}
|
||||
|
@@ -7,11 +7,9 @@ import {
|
||||
} from '../const'
|
||||
|
||||
import checkoutCreateMutation from './mutations/checkout-create'
|
||||
import { CheckoutCreatePayload } from '../schema'
|
||||
import { Checkout } from '../schema'
|
||||
|
||||
export const checkoutCreate = async (
|
||||
fetch: any
|
||||
): Promise<CheckoutCreatePayload> => {
|
||||
export const checkoutCreate = async (fetch: any): Promise<Checkout> => {
|
||||
const data = await fetch({
|
||||
query: checkoutCreateMutation,
|
||||
})
|
||||
|
@@ -23,8 +23,8 @@
|
||||
"@components/*": ["components/*"],
|
||||
"@commerce": ["framework/commerce"],
|
||||
"@commerce/*": ["framework/commerce/*"],
|
||||
"@framework": ["framework/local"],
|
||||
"@framework/*": ["framework/local/*"]
|
||||
"@framework": ["framework/shopify"],
|
||||
"@framework/*": ["framework/shopify/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
|
||||
|
Reference in New Issue
Block a user