Complete wishlist

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -24,6 +24,7 @@ const WishlistCard: FC<Props> = ({ product }) => {
     baseAmount: product.price?.retailPrice,
     currencyCode: product.price?.currencyCode!,
   })
+
   // @ts-ignore Wishlist is not always enabled
   const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
   const [loading, setLoading] = useState(false)
@@ -36,6 +37,7 @@ const WishlistCard: FC<Props> = ({ product }) => {
 
   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

framework/shopify/cart/use-cart.tsx

@@ -5,7 +5,7 @@ import { GetCartHook } from '../types/cart'
 import { GetCartQueryVariables, QueryRoot } from '../schema'
 import { normalizeCart, getCartQuery, setCheckoutUrlCookie } from '../utils'
 import Cookies from 'js-cookie'
-import { SHOPIFY_CART_ID_COOKIE } from '@framework/const'
+import { SHOPIFY_CART_ID_COOKIE } from '../const'
 
 export default useCommerceCart as UseCart<typeof handler>
 

framework/shopify/utils/normalize.ts

@@ -21,12 +21,15 @@ import { colorMap } from '@lib/colors'
 import { CommerceError } from '@commerce/utils/errors'
 import type { Wishlist } from '@commerce/types/wishlist'
 
-const money = ({ amount, currencyCode }: MoneyV2) => {
+const money = (money?: MoneyV2) => {
+  if (money) {
     return {
-    value: +amount,
-    currencyCode,
+      value: +money.amount,
+      currencyCode: money.currencyCode,
     }
   }
+  return null
+}
 
 const normalizeProductOption = ({
   id,
@@ -206,9 +209,13 @@ export function normalizeWishlist(
           ],
           id,
           variants: variant?.id ? [{ id: variant?.id }] : [],
-          amount: +variant?.priceV2?.amount,
-          baseAmount: +variant?.compareAtPriceV2?.amount,
+          price: {
+            value: +variant?.priceV2?.amount,
             currencyCode: variant?.priceV2?.currencyCode,
+            retailPrice: variant?.compareAtPriceV2
+              ? +variant?.compareAtPriceV2.amount
+              : null,
+          },
         },
       })) ?? [],
   }

framework/shopify/wishlist/use-add-item.tsx

@@ -6,7 +6,6 @@ import type { AddItemHook } from '../types/wishlist'
 
 import {
   getWishlistId,
-  normalizeCart,
   normalizeWishlist,
   throwUserErrors,
   wishlistCreate,
@@ -34,7 +33,7 @@ export const handler: MutationHook<AddItemHook> = {
 
     if (!wishlistId) {
       const cart = await wishlistCreate(fetch, lines)
-      return normalizeCart(cart)
+      return normalizeWishlist(cart)
     } else {
       const { cartLinesAdd } = await fetch<
         CartLinesAddMutation,
@@ -46,9 +45,7 @@ export const handler: MutationHook<AddItemHook> = {
           lines,
         },
       })
-
       throwUserErrors(cartLinesAdd?.userErrors)
-
       return normalizeWishlist(cartLinesAdd?.cart)
     }
   },

framework/shopify/wishlist/use-wishlist.tsx

@@ -4,6 +4,8 @@ import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
 import type { GetWishlistHook } from '../types/wishlist'
 import { getWishlistId, normalizeWishlist, getWishlistQuery } from '../utils'
 import { GetCartQueryVariables, QueryRoot } from '../schema'
+import Cookies from 'js-cookie'
+import { SHOPIFY_WHISLIST_ID_COOKIE } from '../const'
 
 export default useWishlist as UseWishlist<typeof handler>
 
@@ -13,16 +15,17 @@ export const handler: SWRHook<GetWishlistHook> = {
   },
   async fetcher({ input: _input, options, fetch }) {
     const wishListId = getWishlistId()
-
     if (wishListId) {
-      const { cart } = await fetch<QueryRoot, GetCartQueryVariables>({
+      const { cart: wishlist } = await fetch<QueryRoot, GetCartQueryVariables>({
         ...options,
         variables: { cartId: wishListId },
       })
-
-      return normalizeWishlist(cart)
+      if (wishlist) {
+        return normalizeWishlist(wishlist)
+      } else {
+        Cookies.remove(SHOPIFY_WHISLIST_ID_COOKIE)
+      }
     }
-
     return null
   },
   useHook: