Wishlist Fix

packages/bigcommerce/src/api/endpoints/wishlist/add-item.ts

@@ -3,7 +3,6 @@ import { parseWishlistItem } from '../../utils/parse-item'
 import getCustomerId from '../../utils/get-customer-id'
 import type { WishlistEndpoint } from '.'
 
-// Return wishlist info
 const addItem: WishlistEndpoint['handlers']['addItem'] = async ({
   res,
   body: { customerToken, item },
@@ -17,41 +16,52 @@ const addItem: WishlistEndpoint['handlers']['addItem'] = async ({
     })
   }
 
-  const customerId =
-    customerToken && (await getCustomerId({ customerToken, config }))
+  try {
+    const customerId =
+      customerToken && (await getCustomerId({ customerToken, config }))
 
-  if (!customerId) {
-    return res.status(400).json({
+    if (!customerId) {
+      throw new Error('Invalid request. No CustomerId')
+    }
+
+    let { wishlist } = await commerce.getCustomerWishlist({
+      variables: { customerId },
+      config,
+    })
+
+    if (!wishlist) {
+      // If user has no wishlist, then let's create one with new item
+      const { data } = await config.storeApiFetch('/v3/wishlists', {
+        method: 'POST',
+        body: JSON.stringify({
+          name: 'Next.js Commerce Wishlist',
+          is_public: false,
+          customer_id: Number(customerId),
+          items: [parseWishlistItem(item)],
+        }),
+      })
+      return res.status(200).json(data)
+    }
+
+    // Existing Wishlist, let's add Item to Wishlist
+    const { data } = await config.storeApiFetch(
+      `/v3/wishlists/${wishlist.id}/items`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          items: [parseWishlistItem(item)],
+        }),
+      }
+    )
+
+    // Returns Wishlist
+    return res.status(200).json(data)
+  } catch (err: any) {
+    res.status(500).json({
       data: null,
-      errors: [{ message: 'Invalid request' }],
+      errors: [{ message: err.message }],
     })
   }
-
-  const { wishlist } = await commerce.getCustomerWishlist({
-    variables: { customerId },
-    config,
-  })
-  const options = {
-    method: 'POST',
-    body: JSON.stringify(
-      wishlist
-        ? {
-            items: [parseWishlistItem(item)],
-          }
-        : {
-            name: 'Wishlist',
-            customer_id: customerId,
-            items: [parseWishlistItem(item)],
-            is_public: false,
-          }
-    ),
-  }
-
-  const { data } = wishlist
-    ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options)
-    : await config.storeApiFetch('/v3/wishlists', options)
-
-  res.status(200).json({ data })
 }
 
 export default addItem

packages/bigcommerce/src/api/index.ts

@@ -38,9 +38,9 @@ export interface BigcommerceConfig extends CommerceAPIConfig {
   storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
 }
 
-const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
+const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL // GraphAPI
 const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
-const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL
+const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL // REST API
 const STORE_API_TOKEN = process.env.BIGCOMMERCE_STORE_API_TOKEN
 const STORE_API_CLIENT_ID = process.env.BIGCOMMERCE_STORE_API_CLIENT_ID
 const STORE_CHANNEL_ID = process.env.BIGCOMMERCE_CHANNEL_ID

packages/bigcommerce/src/api/operations/get-customer-wishlist.ts

@@ -44,6 +44,7 @@ export default function getCustomerWishlistOperation({
     const { data = [] } = await config.storeApiFetch<
       RecursivePartial<{ data: Wishlist[] }>
     >(`/v3/wishlists?customer_id=${variables.customerId}`)
+
     const wishlist = data[0]
 
     if (includeProducts && wishlist?.items?.length) {

packages/bigcommerce/src/wishlist/use-wishlist.tsx

@@ -1,11 +1,13 @@
 import { useMemo } from 'react'
 import { SWRHook } from '@vercel/commerce/utils/types'
-import useWishlist, { UseWishlist } from '@vercel/commerce/wishlist/use-wishlist'
-import type { GetWishlistHook } from '../types/wishlist'
+import useWishlist, {
+  UseWishlist,
+} from '@vercel/commerce/wishlist/use-wishlist'
 import useCustomer from '../customer/use-customer'
 
-export default useWishlist as UseWishlist<typeof handler>
+import type { GetWishlistHook } from '../types/wishlist'
 
+export default useWishlist as UseWishlist<typeof handler>
 export const handler: SWRHook<GetWishlistHook> = {
   fetchOptions: {
     url: '/api/wishlist',