diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 60ebe5d03..478e5a61c 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -1,15 +1,14 @@ -import React, { FC, ReactNode, Component } from 'react' +import type { FC } from 'react' import cn from 'classnames' import Link from 'next/link' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products' import usePrice from '@lib/bigcommerce/use-price' -import { Heart } from '@components/icons' import { EnhancedImage } from '@components/core' import s from './ProductCard.module.css' +import WishlistButton from '@components/wishlist/WishlistButton' interface Props { className?: string - children?: ReactNode[] | Component[] | any[] product: ProductNode variant?: 'slim' | 'simple' imgWidth: number @@ -25,7 +24,7 @@ const ProductCard: FC = ({ imgHeight, priority, }) => { - const src = p.images.edges?.[0]?.node.urlOriginal! + const src = p.images.edges?.[0]?.node?.urlOriginal! const { price } = usePrice({ amount: p.prices?.price?.value, baseAmount: p.prices?.retailPrice?.value, @@ -65,9 +64,11 @@ const ProductCard: FC = ({ {price} -
- -
+
[0] +} & React.ButtonHTMLAttributes + +const WishlistButton: FC = ({ + productId, + variant, + className, + ...props +}) => { + const addItem = useAddItem() + const { data } = useWishlist() + const { data: customer } = useCustomer() + const [loading, setLoading] = useState(false) + const { openModal, setModalView } = useUI() + const isInWishlist = data?.items?.some( + (item) => + item.product_id === productId && + item.variant_id === variant?.node.entityId + ) + + const addToWishlist = async (e: any) => { + e.preventDefault() + setLoading(true) + + // A login is required before adding an item to the wishlist + if (!customer) { + setModalView('LOGIN_VIEW') + return openModal() + } + + try { + await addItem({ + productId, + variantId: variant?.node.entityId!, + }) + + setLoading(false) + } catch (err) { + setLoading(false) + } + } + + return ( + + ) +} + +export default WishlistButton diff --git a/components/wishlist/WishlistButton/index.ts b/components/wishlist/WishlistButton/index.ts new file mode 100644 index 000000000..66e88074b --- /dev/null +++ b/components/wishlist/WishlistButton/index.ts @@ -0,0 +1 @@ +export { default } from './WishlistButton' diff --git a/lib/bigcommerce/api/operations/get-customer-wishlist.ts b/lib/bigcommerce/api/operations/get-customer-wishlist.ts index dc5f1ced1..093b136f1 100644 --- a/lib/bigcommerce/api/operations/get-customer-wishlist.ts +++ b/lib/bigcommerce/api/operations/get-customer-wishlist.ts @@ -41,7 +41,7 @@ async function getCustomerWishlist({ const { data } = await config.storeApiFetch< RecursivePartial<{ data: Wishlist[] }> - >(`/v3/wishlists/customer_id=${variables.customerId}`) + >(`/v3/wishlists?customer_id=${variables.customerId}`) const wishlists = (data as RecursiveRequired) ?? [] const wishlist = wishlists[0] diff --git a/lib/bigcommerce/api/wishlist/handlers/add-item.ts b/lib/bigcommerce/api/wishlist/handlers/add-item.ts index e8f708454..a02ef4434 100644 --- a/lib/bigcommerce/api/wishlist/handlers/add-item.ts +++ b/lib/bigcommerce/api/wishlist/handlers/add-item.ts @@ -38,11 +38,14 @@ const addItem: WishlistHandlers['addItem'] = async ({ items: [parseWishlistItem(item)], } : { + name: 'Wishlist', customer_id: customerId, items: [parseWishlistItem(item)], + is_public: false, } ), } + const { data } = wishlist ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options) : await config.storeApiFetch('/v3/wishlists', options) diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts index f95c893d7..13cbf60f7 100644 --- a/lib/bigcommerce/api/wishlist/index.ts +++ b/lib/bigcommerce/api/wishlist/index.ts @@ -75,7 +75,7 @@ const wishlistApi: BigcommerceApiHandler = async ( const { wishlistId, itemId, customerId } = req.body // Return current wishlist info - if (req.method === 'GET' && wishlistId) { + if (req.method === 'GET') { const body = { customerToken } return await handlers['getWishlist']({ req, res, config, body }) }