From e7fc93f9c752568148459024699c82955a0213dd Mon Sep 17 00:00:00 2001
From: Tomek Niezgoda <1410097+tniezg@users.noreply.github.com>
Date: Wed, 24 Nov 2021 13:15:22 +0100
Subject: [PATCH] Make wishlist's useRemoveItem call in WishlistCard consistent
 with WishlistButton (#578)

---
 components/wishlist/WishlistCard/WishlistCard.tsx | 8 +++++---
 pages/wishlist.tsx                                | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
index 45139a6d1..ee1403bf4 100644
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/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)
     }
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index 93f1c96d3..389e7aaab 100644
--- a/pages/wishlist.tsx
+++ b/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>
           )}