multiple changes to fix the wishlist

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -30,7 +30,8 @@ const WishlistButton: FC<Props> = ({
   const itemInWishlist = data?.items?.find(
     // @ts-ignore Wishlist is not always enabled
     (item) =>
-      item.product_id === productId && (item.variant_id as any) === variant.id
+      item.product_id === Number(productId) &&
+      (item.variant_id as any) === Number(variant.id)
   )
 
   const handleWishlistChange = async (e: any) => {

framework/bigcommerce/api/utils/parse-item.ts

@@ -1,6 +1,11 @@
 import type { ItemBody as WishlistItemBody } from '../wishlist'
 import type { CartItemBody, OptionSelections } from '../../types'
 
+type BCWishlistItemBody = {
+  product_id: number
+  variant_id: number
+}
+
 type BCCartItemBody = {
   product_id: number
   variant_id: number
@@ -8,9 +13,11 @@ type BCCartItemBody = {
   option_selections?: OptionSelections
 }
 
-export const parseWishlistItem = (item: WishlistItemBody) => ({
-  product_id: item.productId,
-  variant_id: item.variantId,
+export const parseWishlistItem = (
+  item: WishlistItemBody
+): BCWishlistItemBody => ({
+  product_id: Number(item.productId),
+  variant_id: Number(item.variantId),
 })
 
 export const parseCartItem = (item: CartItemBody): BCCartItemBody => ({

framework/bigcommerce/customer/get-customer-wishlist.ts

@@ -68,14 +68,15 @@ async function getCustomerWishlist({
       const productsById = graphqlData.products.reduce<{
         [k: number]: ProductEdge
       }>((prods, p) => {
-        prods[Number(p.node.entityId)] = p as any
+        prods[Number(p.id)] = p as any
         return prods
       }, {})
       // Populate the wishlist items with the graphql products
       wishlist.items.forEach((item) => {
         const product = item && productsById[item.product_id!]
         if (item && product) {
-          item.product = product.node
+          // @ts-ignore Fix this type when the wishlist type is properly defined
+          item.product = product
         }
       })
     }

framework/bigcommerce/wishlist/use-wishlist.tsx

@@ -18,7 +18,7 @@ export const handler: SWRHook<
     url: '/api/bigcommerce/wishlist',
     method: 'GET',
   },
-  fetcher({ input: { customerId, includeProducts }, options, fetch }) {
+  async fetcher({ input: { customerId, includeProducts }, options, fetch }) {
     if (!customerId) return null
 
     // Use a dummy base as we only care about the relative path
@@ -35,7 +35,7 @@ export const handler: SWRHook<
     const { data: customer } = useCustomer()
     const response = useData({
       input: [
-        ['customerId', (customer as any)?.id],
+        ['customerId', customer?.entityId],
         ['includeProducts', input?.includeProducts],
       ],
       swrOptions: {

framework/shopify/api/index.ts

@@ -8,7 +8,6 @@ import {
 } from '../const'
 
 if (!API_URL) {
-  console.log(process.env)
   throw new Error(
     `The environment variable NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN is missing and it's required to access your store`
   )

package.json

@@ -8,7 +8,6 @@
     "analyze": "BUNDLE_ANALYZE=both yarn build",
     "prettier-fix": "prettier --write .",
     "find:unused": "next-unused",
-    "commerce": "node scripts/commerce.js",
     "generate": "graphql-codegen",
     "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
   },

pages/wishlist.tsx

@@ -1,7 +1,4 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
 import type { GetStaticPropsContext } from 'next'
-
 import { Heart } from '@components/icons'
 import { Layout } from '@components/common'
 import { Text, Container } from '@components/ui'
@@ -36,8 +33,7 @@ export async function getStaticProps({
 export default function Wishlist() {
   const { data: customer } = useCustomer()
   // @ts-ignore Shopify - Fix this types
-  const { data, isLoading, isEmpty } = useWishlist()
-  const router = useRouter()
+  const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
 
   return (
     <Container>
@@ -60,7 +56,7 @@ export default function Wishlist() {
             data &&
             // @ts-ignore Shopify - Fix this types
             data.items?.map((item) => (
-              <WishlistCard key={item.id} product={item as any} />
+              <WishlistCard key={item.id} product={item.product! as any} />
             ))
           )}
         </div>

scripts/commerce.js

@@ -1 +0,0 @@
-console.log('Hello')