Added wishlist button component

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -0,0 +1,65 @@
+import React, { FC, useState } from 'react'
+import cn from 'classnames'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
+import useAddItem from '@lib/bigcommerce/wishlist/use-add-item'
+import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
+import useCustomer from '@lib/bigcommerce/use-customer'
+import { Heart } from '@components/icons'
+import { useUI } from '@components/ui/context'
+
+type Props = {
+  productId: number
+  variant: NonNullable<ProductNode['variants']['edges']>[0]
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const WishlistButton: FC<Props> = ({
+  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 (
+    <button
+      {...props}
+      className={cn({ 'opacity-50': loading }, className)}
+      onClick={addToWishlist}
+    >
+      <Heart fill={isInWishlist ? 'white' : 'none'} />
+    </button>
+  )
+}
+
+export default WishlistButton