From 2a32beb5cdc3c2d0fa84877085136c99114a7936 Mon Sep 17 00:00:00 2001 From: Chloe Date: Thu, 28 Apr 2022 19:09:35 +0700 Subject: [PATCH] Fix typescript errors & normalize cart Signed-off-by: Chloe --- .../bigcommerce/src/cart/use-update-item.tsx | 4 +++- .../src/api/endpoints/cart/add-item.ts | 21 ++++++++++++------- .../src/api/endpoints/cart/get-cart.ts | 9 ++++---- .../src/api/endpoints/cart/remove-item.ts | 6 ++++-- .../src/api/endpoints/cart/update-item.ts | 9 +++++--- .../mutations/update-cart-item-quantity.ts | 2 +- .../src/api/queries/get-anonymous-cart.ts | 4 ++-- .../opencommerce/src/cart/use-add-item.tsx | 3 ++- .../opencommerce/src/cart/use-remove-item.tsx | 11 ++++------ .../opencommerce/src/cart/use-update-item.tsx | 4 ++-- packages/opencommerce/src/types/cart.ts | 8 +++---- packages/opencommerce/src/utils/normalize.ts | 3 ++- site/components/cart/CartItem/CartItem.tsx | 10 ++++++--- .../product/ProductSidebar/ProductSidebar.tsx | 4 ++++ 14 files changed, 59 insertions(+), 39 deletions(-) diff --git a/packages/bigcommerce/src/cart/use-update-item.tsx b/packages/bigcommerce/src/cart/use-update-item.tsx index b15690ed7..0effac320 100644 --- a/packages/bigcommerce/src/cart/use-update-item.tsx +++ b/packages/bigcommerce/src/cart/use-update-item.tsx @@ -5,7 +5,9 @@ import type { HookFetcherContext, } from '@vercel/commerce/utils/types' import { ValidationError } from '@vercel/commerce/utils/errors' -import useUpdateItem, { UseUpdateItem } from '@vercel/commerce/cart/use-update-item' +import useUpdateItem, { + UseUpdateItem, +} from '@vercel/commerce/cart/use-update-item' import type { LineItem, UpdateItemHook } from '@vercel/commerce/types/cart' import { handler as removeItemHandler } from './use-remove-item' import useCart from './use-cart' diff --git a/packages/opencommerce/src/api/endpoints/cart/add-item.ts b/packages/opencommerce/src/api/endpoints/cart/add-item.ts index cc2af828f..c25cc444a 100644 --- a/packages/opencommerce/src/api/endpoints/cart/add-item.ts +++ b/packages/opencommerce/src/api/endpoints/cart/add-item.ts @@ -4,7 +4,6 @@ import addCartItemsMutation from '../../mutations/add-cart-item' import createCartMutation from '../../mutations/create-cart' import type { CartEndpoint } from '.' -import { CreateCartPayload } from '../../../../schema' const addItem: CartEndpoint['handlers']['addItem'] = async ({ res, @@ -37,20 +36,28 @@ const addItem: CartEndpoint['handlers']['addItem'] = async ({ } if (!cartId) { - const { data } = await config.fetch(createCartMutation, { variables }) + const { + data: { createCart }, + } = await config.fetch(createCartMutation, { variables }) res.setHeader('Set-Cookie', [ - getCartCookie(config.cartCookie, data.cart._id, config.cartCookieMaxAge), + getCartCookie( + config.cartCookie, + createCart.cart._id, + config.cartCookieMaxAge + ), getCartCookie( config.anonymousCartTokenCookie, - data.token, + createCart.token, config.cartCookieMaxAge ), ]) - return res.status(200).json({ data: normalizeCart(data.cart) }) + return res.status(200).json({ data: normalizeCart(createCart.cart) }) } - const { data } = await config.fetch(addCartItemsMutation, { + const { + data: { addCartItems }, + } = await config.fetch(addCartItemsMutation, { variables: { input: { items: variables.input.items, @@ -60,7 +67,7 @@ const addItem: CartEndpoint['handlers']['addItem'] = async ({ }, }) - return res.status(200).json({ data: normalizeCart(data.cart) }) + return res.status(200).json({ data: normalizeCart(addCartItems.cart) }) } export default addItem diff --git a/packages/opencommerce/src/api/endpoints/cart/get-cart.ts b/packages/opencommerce/src/api/endpoints/cart/get-cart.ts index a96599e40..fa2a3e8c7 100644 --- a/packages/opencommerce/src/api/endpoints/cart/get-cart.ts +++ b/packages/opencommerce/src/api/endpoints/cart/get-cart.ts @@ -1,6 +1,5 @@ import { normalizeCart } from '../../../utils/normalize' -import getCartCookie from '../../utils/get-cart-cookie' -import getAnonymousCart from '../../queries/get-anonymous-cart' +import getAnonymousCartQuery from '../../queries/get-anonymous-cart' import type { CartEndpoint } from '.' // Return current cart info @@ -11,7 +10,9 @@ const getCart: CartEndpoint['handlers']['getCart'] = async ({ config, }) => { if (cartId && cookies[config.anonymousCartTokenCookie]) { - const { data } = await config.fetch(getAnonymousCart, { + const { + data: { cart: rawAnonymousCart }, + } = await config.fetch(getAnonymousCartQuery, { variables: { cartId, cartToken: cookies[config.anonymousCartTokenCookie], @@ -19,7 +20,7 @@ const getCart: CartEndpoint['handlers']['getCart'] = async ({ }) return res.status(200).json({ - data: normalizeCart(data), + data: normalizeCart(rawAnonymousCart), }) } diff --git a/packages/opencommerce/src/api/endpoints/cart/remove-item.ts b/packages/opencommerce/src/api/endpoints/cart/remove-item.ts index dd20ed931..72511589c 100644 --- a/packages/opencommerce/src/api/endpoints/cart/remove-item.ts +++ b/packages/opencommerce/src/api/endpoints/cart/remove-item.ts @@ -16,7 +16,9 @@ const removeItem: CartEndpoint['handlers']['removeItem'] = async ({ }) } - const { data } = await config.fetch(removeCartItemsMutation, { + const { + data: { removeCartItems }, + } = await config.fetch(removeCartItemsMutation, { variables: { input: { cartId, @@ -31,7 +33,7 @@ const removeItem: CartEndpoint['handlers']['removeItem'] = async ({ getCartCookie(config.cartCookie, cartId, config.cartCookieMaxAge) ) - res.status(200).json({ data: normalizeCart(data.cart) }) + res.status(200).json({ data: normalizeCart(removeCartItems.cart) }) } export default removeItem diff --git a/packages/opencommerce/src/api/endpoints/cart/update-item.ts b/packages/opencommerce/src/api/endpoints/cart/update-item.ts index db14da4cc..ebe44d1c8 100644 --- a/packages/opencommerce/src/api/endpoints/cart/update-item.ts +++ b/packages/opencommerce/src/api/endpoints/cart/update-item.ts @@ -2,6 +2,7 @@ import { normalizeCart } from '../../../utils/normalize' import getCartCookie from '../../utils/get-cart-cookie' import updateCartItemsQuantityMutation from '../../mutations/update-cart-item-quantity' import type { CartEndpoint } from '.' +import { UpdateCartItemsQuantityPayload } from '../../../../schema' const updateItem: CartEndpoint['handlers']['updateItem'] = async ({ res, @@ -16,9 +17,11 @@ const updateItem: CartEndpoint['handlers']['updateItem'] = async ({ }) } - const { data } = await config.fetch(updateCartItemsQuantityMutation, { + const { + data: { updateCartItemsQuantity }, + } = await config.fetch(updateCartItemsQuantityMutation, { variables: { - input: { + updateCartItemsQuantityInput: { cartId, cartToken: cookies[config.anonymousCartTokenCookie], items: [{ cartItemId: itemId, quantity: item.quantity }], @@ -31,7 +34,7 @@ const updateItem: CartEndpoint['handlers']['updateItem'] = async ({ 'Set-Cookie', getCartCookie(config.cartCookie, cartId, config.cartCookieMaxAge) ) - res.status(200).json({ data: normalizeCart(data.cart) }) + res.status(200).json({ data: normalizeCart(updateCartItemsQuantity.cart) }) } export default updateItem diff --git a/packages/opencommerce/src/api/mutations/update-cart-item-quantity.ts b/packages/opencommerce/src/api/mutations/update-cart-item-quantity.ts index 2d74dd1c2..0d49b75b7 100644 --- a/packages/opencommerce/src/api/mutations/update-cart-item-quantity.ts +++ b/packages/opencommerce/src/api/mutations/update-cart-item-quantity.ts @@ -1,6 +1,6 @@ import { cartPayloadFragment } from '../queries/get-cart-query' -const updateCartItemsQuantityMutation = ` +const updateCartItemsQuantityMutation = /* GraphQL */ ` mutation updateCartItemsQuantity($updateCartItemsQuantityInput: UpdateCartItemsQuantityInput!) { updateCartItemsQuantity(input: $updateCartItemsQuantityInput) { cart { diff --git a/packages/opencommerce/src/api/queries/get-anonymous-cart.ts b/packages/opencommerce/src/api/queries/get-anonymous-cart.ts index fdefb93a7..ec0c5c1cc 100644 --- a/packages/opencommerce/src/api/queries/get-anonymous-cart.ts +++ b/packages/opencommerce/src/api/queries/get-anonymous-cart.ts @@ -1,7 +1,7 @@ import { cartQueryFragment } from './get-cart-query' -export const getAnonymousCart = /* GraphQL */ ` - query anonymousCartByCartIdQuery($cartId: ID!, $cartToken: String!) { +export const getAnonymousCart = ` + query anonymousCartByCartIdQuery($cartId: ID!, $cartToken: String!, $itemsAfterCursor: ConnectionCursor) { cart: anonymousCartByCartId(cartId: $cartId, cartToken: $cartToken) { ${cartQueryFragment} } diff --git a/packages/opencommerce/src/cart/use-add-item.tsx b/packages/opencommerce/src/cart/use-add-item.tsx index 684b90794..5496963ff 100644 --- a/packages/opencommerce/src/cart/use-add-item.tsx +++ b/packages/opencommerce/src/cart/use-add-item.tsx @@ -3,11 +3,12 @@ import useAddItem, { UseAddItem } from '@vercel/commerce/cart/use-add-item' import type { AddItemHook } from '@vercel/commerce/types/cart' import { CommerceError } from '@vercel/commerce/utils/errors' import { MutationHook } from '@vercel/commerce/utils/types' +import { CartTypes } from '../types/cart' import useCart from './use-cart' export default useAddItem as UseAddItem -export const handler: MutationHook = { +export const handler: MutationHook> = { fetchOptions: { url: '/api/cart', method: 'POST', diff --git a/packages/opencommerce/src/cart/use-remove-item.tsx b/packages/opencommerce/src/cart/use-remove-item.tsx index f9efd276d..eb68d435b 100644 --- a/packages/opencommerce/src/cart/use-remove-item.tsx +++ b/packages/opencommerce/src/cart/use-remove-item.tsx @@ -1,6 +1,7 @@ import { useCallback } from 'react' import { HookFetcherContext, + MutationHook, MutationHookContext, } from '@vercel/commerce/utils/types' import useRemoveItem, { @@ -24,16 +25,12 @@ export type RemoveItemFn = T extends LineItem export default useRemoveItem as UseRemoveItem -export const handler = { +export const handler: MutationHook = { fetchOptions: { url: '/api/cart', method: 'DELETE', }, - async fetcher({ - input: { itemId }, - options, - fetch, - }: HookFetcherContext) { + async fetcher({ input: { itemId }, options, fetch }) { return await fetch({ ...options, body: { itemId } }) }, useHook: @@ -54,6 +51,6 @@ export const handler = { return data } - return useCallback(removeItem, [fetch, mutate]) + return useCallback(removeItem as RemoveItemFn, [fetch, mutate]) }, } diff --git a/packages/opencommerce/src/cart/use-update-item.tsx b/packages/opencommerce/src/cart/use-update-item.tsx index 566208b0b..8ede20bf3 100644 --- a/packages/opencommerce/src/cart/use-update-item.tsx +++ b/packages/opencommerce/src/cart/use-update-item.tsx @@ -17,14 +17,14 @@ export default useUpdateItem as UseUpdateItem export const handler: MutationHook = { fetchOptions: { - query: '/api/cart', + url: '/api/cart', method: 'PUT', }, async fetcher({ input: { itemId, item }, options, fetch }) { if (Number.isInteger(item.quantity)) { // Also allow the update hook to remove an item if the quantity is lower than 1 if (item.quantity! < 1) { - return removeItemHandler.fetcher({ + return removeItemHandler.fetcher!({ options: removeItemHandler.fetchOptions, input: { itemId }, fetch, diff --git a/packages/opencommerce/src/types/cart.ts b/packages/opencommerce/src/types/cart.ts index c88aee77f..9a4901117 100644 --- a/packages/opencommerce/src/types/cart.ts +++ b/packages/opencommerce/src/types/cart.ts @@ -8,15 +8,13 @@ export type Cart = Core.Cart & { } export type CartItemBody = Core.CartItemBody & { - price: { + price?: { amount: number - currency: string + currencyCode: string } } -export type CartTypes = { - cart: Cart - item: Core.LineItem +export type CartTypes = Core.CartTypes & { itemBody: CartItemBody } diff --git a/packages/opencommerce/src/utils/normalize.ts b/packages/opencommerce/src/utils/normalize.ts index 133881c90..745908a28 100644 --- a/packages/opencommerce/src/utils/normalize.ts +++ b/packages/opencommerce/src/utils/normalize.ts @@ -273,6 +273,7 @@ function normalizeLineItem(cartItemEdge: CartItemEdge): LineItem { optionTitle, variantTitle, quantity, + productSlug, } = cartItem return { @@ -292,7 +293,7 @@ function normalizeLineItem(cartItemEdge: CartItemEdge): LineItem { price: priceWhenAdded?.amount, listPrice: compareAtPrice?.amount ?? 0, }, - path: '', + path: productSlug ?? '', discounts: [], options: [ { diff --git a/site/components/cart/CartItem/CartItem.tsx b/site/components/cart/CartItem/CartItem.tsx index ecd3e39ae..1fd3cfa3b 100644 --- a/site/components/cart/CartItem/CartItem.tsx +++ b/site/components/cart/CartItem/CartItem.tsx @@ -45,13 +45,17 @@ const CartItem = ({ target: { value }, }: ChangeEvent) => { setQuantity(Number(value)) - await updateItem({ quantity: Number(value) }) + await updateItem({ + quantity: Number(value), + variantId: item.variantId, + id: item.id, + }) } const increaseQuantity = async (n = 1) => { const val = Number(quantity) + n setQuantity(val) - await updateItem({ quantity: val }) + await updateItem({ quantity: val, variantId: item.variantId, id: item.id }) } const handleRemove = async () => { @@ -93,7 +97,7 @@ const CartItem = ({ width={150} height={150} src={item.variant.image?.url || placeholderImg} - alt={item.variant.image?.altText || "Product Image"} + alt={item.variant.image?.altText || 'Product Image'} unoptimized /> diff --git a/site/components/product/ProductSidebar/ProductSidebar.tsx b/site/components/product/ProductSidebar/ProductSidebar.tsx index 250aa41bc..58696d6fe 100644 --- a/site/components/product/ProductSidebar/ProductSidebar.tsx +++ b/site/components/product/ProductSidebar/ProductSidebar.tsx @@ -32,6 +32,10 @@ const ProductSidebar: FC = ({ product, className }) => { await addItem({ productId: String(product.id), variantId: String(variant ? variant.id : product.variants[0]?.id), + price: { + amount: product.price.value, + currencyCode: String(product.price.currencyCode), + }, }) openSidebar() setLoading(false)