Added actions and more stuff to the wishlist page

components/product/ProductView/ProductView.tsx

@@ -14,7 +14,7 @@ import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import {
   getCurrentVariant,
   getProductOptions,
-  ProductOptions,
+  SelectedOptions,
 } from '../helpers'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
@@ -29,7 +29,7 @@ const ProductView: FC<Props> = ({ product }) => {
   const { openSidebar } = useUI()
   const options = getProductOptions(product)
   const [loading, setLoading] = useState(false)
-  const [choices, setChoices] = useState<ProductOptions>({
+  const [choices, setChoices] = useState<SelectedOptions>({
     size: null,
     color: null,
   })

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -1,4 +1,14 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
+import cn from 'classnames'
+import Link from 'next/link'
+import Image from 'next/image'
+import type { WishlistItem } from '@lib/bigcommerce/api/wishlist'
+import usePrice from '@lib/commerce/use-price'
+import useRemoveItem from '@lib/bigcommerce/wishlist/use-remove-item'
+import useAddItem from '@lib/bigcommerce/cart/use-add-item'
+import { useUI } from '@components/ui/context'
+import { Button } from '@components/ui'
+import { HTMLContent } from '@components/core'
 import { Trash } from '@components/icons'
 import s from './WishlistCard.module.css'
 
@@ -6,6 +16,7 @@ interface Props {
   className?: string
   children?: any
   data?: ProductData
+  item: WishlistItem
 }
 
 interface ProductData {
@@ -15,23 +26,83 @@ interface ProductData {
   path: string
 }
 
-const WishlistCard: FC<Props> = ({ className, data }) => {
+const WishlistCard: FC<Props> = ({ className, item }) => {
+  const product = item.product!
+  const { price } = usePrice({
+    amount: product.prices?.price?.value,
+    baseAmount: product.prices?.retailPrice?.value,
+    currencyCode: product.prices?.price?.currencyCode!,
+  })
+  const removeItem = useRemoveItem({ includeProducts: true })
+  const [loading, setLoading] = useState(false)
+  const [removing, setRemoving] = useState(false)
+  const addItem = useAddItem()
+  const { openSidebar } = useUI()
+
+  const handleRemove = async () => {
+    setRemoving(true)
+
+    try {
+      // If this action succeeds then there's no need to do `setRemoving(true)`
+      // because the component will be removed from the view
+      await removeItem({ id: item.id! })
+    } catch (error) {
+      setRemoving(false)
+    }
+  }
+  const addToCart = async () => {
+    setLoading(true)
+    try {
+      await addItem({
+        productId: product.entityId,
+        variantId: product.variants.edges?.[0]?.node.entityId!,
+      })
+      openSidebar()
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+
   return (
-    <div className={s.root}>
-      <div className={`col-span-3 ${s.productBg}`} />
+    <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
+      <div className={`col-span-3 ${s.productBg}`}>
+        <Image
+          src={product.images.edges?.[0]?.node.urlOriginal!}
+          width={400}
+          height={400}
+          alt={product.images.edges?.[0]?.node.altText || 'Product Image'}
+          // The cart item image is already optimized and very small in size
+        />
+      </div>
+
       <div className="col-span-7">
-        <h3 className="text-2xl mb-2">Jacket</h3>
-        <p className="mb-4">
-          Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-        </p>
-        <button className="py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover">
-          Add to cart
-        </button>
+        <h3 className="text-2xl mb-2">
+          <Link href={`/product${product.path}`}>
+            <a>{product.name}</a>
+          </Link>
+        </h3>
+        <div className="mb-4">
+          <HTMLContent html={product.description!} />
+        </div>
+        <Button
+          aria-label="Add to Cart"
+          type="button"
+          className={
+            'py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover'
+          }
+          onClick={addToCart}
+          loading={loading}
+        >
+          Add to Cart
+        </Button>
       </div>
       <div className="col-span-2 flex flex-col justify-between">
-        <div className="flex justify-end font-bold">$ 50.00</div>
+        <div className="flex justify-end font-bold">{price}</div>
         <div className="flex justify-end">
-          <Trash />
+          <button onClick={handleRemove}>
+            <Trash />
+          </button>
         </div>
       </div>
     </div>