4
0
forked from crowetic/commerce

update add item to cart hook

This commit is contained in:
Greg Hoskin 2021-04-17 19:01:46 -05:00
parent 7e0d126531
commit d489f59171
2 changed files with 37 additions and 30 deletions

View File

@ -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()

View File

@ -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
} }