forked from crowetic/commerce
update add item to cart hook
This commit is contained in:
parent
7e0d126531
commit
d489f59171
@ -3,7 +3,6 @@ import { CommerceError } from '@commerce/utils/errors'
|
|||||||
import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
|
import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
|
||||||
import useCart from './use-cart'
|
import useCart from './use-cart'
|
||||||
import { Cart, CartItemBody } from '../types'
|
import { Cart, CartItemBody } from '../types'
|
||||||
import { checkoutLineItemAddMutation, getCheckoutId } from '../utils'
|
|
||||||
import { checkoutToCart } from './utils'
|
import { checkoutToCart } from './utils'
|
||||||
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
||||||
import { useCallback } from 'react'
|
import { useCallback } from 'react'
|
||||||
@ -12,7 +11,8 @@ export default useAddItem as UseAddItem<typeof handler>
|
|||||||
|
|
||||||
export const handler: MutationHook<Cart, {}, CartItemBody> = {
|
export const handler: MutationHook<Cart, {}, CartItemBody> = {
|
||||||
fetchOptions: {
|
fetchOptions: {
|
||||||
query: checkoutLineItemAddMutation,
|
query: 'cart',
|
||||||
|
method: 'addItem',
|
||||||
},
|
},
|
||||||
async fetcher({ input: item, options, fetch }) {
|
async fetcher({ input: item, options, fetch }) {
|
||||||
if (
|
if (
|
||||||
@ -26,18 +26,13 @@ export const handler: MutationHook<Cart, {}, CartItemBody> = {
|
|||||||
const response = await fetch<Mutation, MutationCheckoutLineItemsAddArgs>({
|
const response = await fetch<Mutation, MutationCheckoutLineItemsAddArgs>({
|
||||||
...options,
|
...options,
|
||||||
variables: {
|
variables: {
|
||||||
checkoutId: getCheckoutId(),
|
product_id: item.productId,
|
||||||
lineItems: [
|
quantity: item.quantity,
|
||||||
{
|
|
||||||
variantId: item.variantId,
|
|
||||||
quantity: item.quantity ?? 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
// TODO: Fix this Cart type here
|
// TODO: Fix this Cart type here
|
||||||
return checkoutToCart(checkoutLineItemsAdd) as any
|
return checkoutToCart(response) as any
|
||||||
},
|
},
|
||||||
useHook: ({ fetch }) => () => {
|
useHook: ({ fetch }) => () => {
|
||||||
const { mutate } = useCart()
|
const { mutate } = useCart()
|
||||||
|
@ -29,6 +29,7 @@ const normalizeProductOption = ({
|
|||||||
}: ProductOption) => {
|
}: ProductOption) => {
|
||||||
let returnValues = values.map((value) => {
|
let returnValues = values.map((value) => {
|
||||||
let output: any = {
|
let output: any = {
|
||||||
|
displayName,
|
||||||
label: value.name,
|
label: value.name,
|
||||||
}
|
}
|
||||||
if (displayName === 'Color') {
|
if (displayName === 'Color') {
|
||||||
@ -39,7 +40,6 @@ const normalizeProductOption = ({
|
|||||||
}
|
}
|
||||||
return output
|
return output
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
__typename: 'MultipleChoiceOption',
|
__typename: 'MultipleChoiceOption',
|
||||||
id,
|
id,
|
||||||
@ -69,38 +69,49 @@ const normalizeProductImages = (images) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const normalizeProductVariants = (variants) => {
|
const normalizeProductVariants = (variants) => {
|
||||||
return variants?.map(({ id, name, values, price, sku }) => ({
|
return variants?.map(({ id, name, values, price, sku }) => {
|
||||||
id,
|
const options = values.map((option: SelectedOption) => {
|
||||||
name,
|
return normalizeProductOption({
|
||||||
sku: sku ?? id,
|
|
||||||
price: price ?? null,
|
|
||||||
listPrice: price ?? null,
|
|
||||||
// requiresShipping: true,
|
|
||||||
options: values.map(({ name, value }: SelectedOption) =>
|
|
||||||
normalizeProductOption({
|
|
||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
values: value ? [value] : [],
|
values: option ? [option] : [],
|
||||||
})
|
})
|
||||||
),
|
})
|
||||||
}))
|
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
sku: sku ?? id,
|
||||||
|
price: price ?? null,
|
||||||
|
listPrice: price ?? null,
|
||||||
|
// requiresShipping: true,
|
||||||
|
options,
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function normalizeProduct(productNode: SwellProduct): Product {
|
export function normalizeProduct(productNode: SwellProduct): Product {
|
||||||
const { images, options, slug, price } = productNode
|
const { images, options, slug, price } = productNode
|
||||||
|
const productOptions = options
|
||||||
const productOptions = options.map((o) => normalizeProductOption(o))
|
? options.map((o) => normalizeProductOption(o))
|
||||||
|
: []
|
||||||
const productVariants = normalizeProductVariants(
|
const productVariants = normalizeProductVariants(
|
||||||
options.filter((option) => option.variant)
|
options.filter((option) => option.variant)
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// ProductView.tsx assumes the existence of at least one product variant
|
||||||
|
const emptyVariants = [{ options: [{ id: 123 }] }]
|
||||||
const productImages = normalizeProductImages(images)
|
const productImages = normalizeProductImages(images)
|
||||||
|
|
||||||
const product = {
|
const product = {
|
||||||
...productNode,
|
...productNode,
|
||||||
vendor: 'our brands',
|
vendor: 'our brands',
|
||||||
path: `/${slug}`,
|
path: `/${slug}`,
|
||||||
images: productImages ?? [],
|
images: productImages,
|
||||||
variants: productVariants,
|
variants:
|
||||||
|
productVariants && productVariants.length
|
||||||
|
? productVariants
|
||||||
|
: emptyVariants,
|
||||||
options: productOptions,
|
options: productOptions,
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,18 +150,18 @@ function normalizeLineItem({
|
|||||||
variant,
|
variant,
|
||||||
quantity,
|
quantity,
|
||||||
}: CheckoutLineItemEdge): LineItem {
|
}: CheckoutLineItemEdge): LineItem {
|
||||||
return {
|
const item = {
|
||||||
id,
|
id,
|
||||||
variantId: String(variant?.id),
|
variantId: String(variant?.id),
|
||||||
productId: String(product?.id),
|
productId: String(product?.id),
|
||||||
name: product.name,
|
name: product?.name ?? '',
|
||||||
quantity,
|
quantity,
|
||||||
variant: {
|
variant: {
|
||||||
id: String(variant?.id),
|
id: String(variant?.id),
|
||||||
sku: variant?.sku ?? '',
|
sku: variant?.sku ?? '',
|
||||||
name: variant?.name!,
|
name: variant?.name!,
|
||||||
image: {
|
image: {
|
||||||
url: product.images ? product?.images[0].file.url : '',
|
url: product && product.images ? product?.images[0].file.url : '',
|
||||||
},
|
},
|
||||||
requiresShipping: false,
|
requiresShipping: false,
|
||||||
price: price,
|
price: price,
|
||||||
@ -164,4 +175,5 @@ function normalizeLineItem({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
return item
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user