Make wishlist's useRemoveItem call in WishlistCard consistent with WishlistButton (#578)

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -11,14 +11,16 @@ import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
 import useAddItem from '@framework/cart/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
+import { Wishlist } from '@commerce/types/wishlist'
 
 interface Props {
-  product: Product
+  item: Wishlist
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
 
-const WishlistCard: FC<Props> = ({ product }) => {
+const WishlistCard: FC<Props> = ({ item }) => {
+  const product: Product = item.product
   const { price } = usePrice({
     amount: product.price?.value,
     baseAmount: product.price?.retailPrice,
@@ -40,7 +42,7 @@ const WishlistCard: FC<Props> = ({ product }) => {
     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: product.id! })
+      await removeItem({ id: item.id! })
     } catch (error) {
       setRemoving(false)
     }

pages/wishlist.tsx

@@ -69,7 +69,7 @@ export default function Wishlist() {
               {data &&
                 // @ts-ignore Shopify - Fix this types
                 data.items?.map((item) => (
-                  <WishlistCard key={item.id} product={item.product! as any} />
+                  <WishlistCard key={item.id} item={item!} />
                 ))}
             </div>
           )}