Create checkout on add to cart

This commit is contained in:
cond0r
2021-08-05 07:39:41 +03:00
parent 8e7b942240
commit 904741b1c5
5 changed files with 65 additions and 64 deletions

View File

@@ -29,16 +29,18 @@ export const handler: MutationHook<AddItemHook> = {
return data return data
}, },
useHook: ({ fetch }) => () => { useHook:
const { mutate } = useCart() ({ fetch }) =>
() => {
const { mutate } = useCart()
return useCallback( return useCallback(
async function addItem(input) { async function addItem(input) {
const data = await fetch({ input }) const data = await fetch({ input })
await mutate(data, false) await mutate(data, false)
return data return data
}, },
[fetch, mutate] [fetch, mutate]
) )
}, },
} }

View File

@@ -9,6 +9,7 @@ import {
checkoutLineItemAddMutation, checkoutLineItemAddMutation,
getCheckoutId, getCheckoutId,
checkoutToCart, checkoutToCart,
checkoutCreate,
} from '../utils' } from '../utils'
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema' 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< const { checkoutLineItemsAdd } = await fetch<
Mutation, Mutation,
MutationCheckoutLineItemsAddArgs MutationCheckoutLineItemsAddArgs
>({ >({
...options, ...options,
variables: { variables: {
checkoutId: getCheckoutId(), checkoutId,
lineItems: [ lineItems: [
{ {
variantId: item.variantId, variantId: item.variantId,
@@ -46,16 +54,18 @@ export const handler: MutationHook<AddItemHook> = {
return checkoutToCart(checkoutLineItemsAdd) return checkoutToCart(checkoutLineItemsAdd)
}, },
useHook: ({ fetch }) => () => { useHook:
const { mutate } = useCart() ({ fetch }) =>
() => {
const { mutate } = useCart()
return useCallback( return useCallback(
async function addItem(input) { async function addItem(input) {
const data = await fetch({ input }) const data = await fetch({ input })
await mutate(data, false) await mutate(data, false)
return data return data
}, },
[fetch, mutate] [fetch, mutate]
) )
}, },
} }

View File

@@ -6,52 +6,43 @@ import { checkoutCreate, checkoutToCart } from '../utils'
import getCheckoutQuery from '../utils/queries/get-checkout-query' import getCheckoutQuery from '../utils/queries/get-checkout-query'
import { GetCartHook } from '../types/cart' import { GetCartHook } from '../types/cart'
import {
GetCheckoutQuery,
GetCheckoutQueryVariables,
CheckoutDetailsFragment,
} from '../schema'
export default useCommerceCart as UseCart<typeof handler> export default useCommerceCart as UseCart<typeof handler>
export const handler: SWRHook<GetCartHook> = { export const handler: SWRHook<GetCartHook> = {
fetchOptions: { fetchOptions: {
query: getCheckoutQuery, query: getCheckoutQuery,
}, },
async fetcher({ input: { cartId: checkoutId }, options, fetch }) { async fetcher({ input: { cartId }, options, fetch }) {
let checkout if (cartId) {
const { node } = await fetch({
if (checkoutId) {
const data = await fetch({
...options, ...options,
variables: { variables: {
checkoutId: checkoutId, checkoutId: cartId,
}, },
}) })
checkout = data.node return checkoutToCart({
checkout: node?.completedAt ? await checkoutCreate(fetch) : node,
})
} }
return null
if (checkout?.completedAt || !checkoutId) {
checkout = await checkoutCreate(fetch)
}
return checkoutToCart({ checkout })
}, },
useHook: ({ useData }) => (input) => { useHook:
const response = useData({ ({ useData }) =>
swrOptions: { revalidateOnFocus: false, ...input?.swrOptions }, (input) => {
}) const response = useData({
return useMemo( swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
() => })
Object.create(response, { return useMemo(
isEmpty: { () =>
get() { Object.create(response, {
return (response.data?.lineItems.length ?? 0) <= 0 isEmpty: {
get() {
return (response.data?.lineItems.length ?? 0) <= 0
},
enumerable: true,
}, },
enumerable: true, }),
}, [response]
}), )
[response] },
)
},
} }

View File

@@ -7,11 +7,9 @@ import {
} from '../const' } from '../const'
import checkoutCreateMutation from './mutations/checkout-create' import checkoutCreateMutation from './mutations/checkout-create'
import { CheckoutCreatePayload } from '../schema' import { Checkout } from '../schema'
export const checkoutCreate = async ( export const checkoutCreate = async (fetch: any): Promise<Checkout> => {
fetch: any
): Promise<CheckoutCreatePayload> => {
const data = await fetch({ const data = await fetch({
query: checkoutCreateMutation, query: checkoutCreateMutation,
}) })

View File

@@ -23,8 +23,8 @@
"@components/*": ["components/*"], "@components/*": ["components/*"],
"@commerce": ["framework/commerce"], "@commerce": ["framework/commerce"],
"@commerce/*": ["framework/commerce/*"], "@commerce/*": ["framework/commerce/*"],
"@framework": ["framework/local"], "@framework": ["framework/shopify"],
"@framework/*": ["framework/local/*"] "@framework/*": ["framework/shopify/*"]
} }
}, },
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"], "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],