From 191bb96a0f9fbc249dfa160af02e4de6a94631a6 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Fri, 23 Oct 2020 19:47:10 -0300
Subject: [PATCH 01/10] general improvements

---
 components/core/Layout/Layout.tsx                     |  4 ++--
 components/product/ProductCard/ProductCard.module.css |  1 +
 components/ui/Hero/Hero.tsx                           | 10 +++++-----
 components/ui/Sidebar/Sidebar.tsx                     |  2 +-
 pages/index.tsx                                       |  8 ++++----
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 74c5a4069..eec034267 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -43,9 +43,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
             { 'shadow-magical': hasScrolled }
           )}
         >
-          <Container>
+          <div className="px-4">
             <Navbar />
-          </Container>
+          </div>
         </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 9246c2f7c..d151ad8d2 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -83,6 +83,7 @@
 .simple {
   & .squareBg {
     @apply bg-accents-0 !important;
+    background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   }
 
   & .productTitle {
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index ad600ec83..8a063b664 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -9,20 +9,20 @@ interface Props {
 
 const Hero: FC<Props> = ({ headline, description }) => {
   return (
-    <Container>
-      <div className="mx-auto grid grid-cols-2 bg-black py-32">
+    <div className="mx-auto grid grid-cols-2 bg-black py-32">
+      <Container>
         <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
           {headline}
         </h2>
         <div className="flex flex-col justify-between">
           <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
-          <a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
+          <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
             <span>Read it here</span>
             <RightArrow width="20" heigh="20" className="ml-1" />
           </a>
         </div>
-      </div>
-    </Container>
+      </Container>
+    </div>
   )
 }
 
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 9d25c8465..090d972b7 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveFrom="translate-x-0"
                   leaveTo="translate-x-full"
                 >
-                  <div className="h-full w-screen max-w-md">
+                  <div className="h-full md:w-screen md:max-w-md">
                     <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
                       {children}
                     </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index a2591773a..f96b8e940 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -94,10 +94,10 @@ export default function Home({
           <ProductCard key={node.path} product={node} variant="slim" />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-12">
-        <div className="pr-3 w-48 relative">
-          <div className="sticky top-32">
-            <ul className="mb-10">
+      <div className="py-12 flex flex-col md:flex-row w-full px-12">
+        <div className="pr-3 md:w-48 relative">
+          <div className="flex flex-row mb-8 md:mb-0 md:flex-col justify-between md:sticky md:top-32">
+            <ul className="md:mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
                 All Categories
               </li>

From 1dfff92072ab2704fd2b80cb74105a83882bc400 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Mon, 26 Oct 2020 09:56:24 -0300
Subject: [PATCH 02/10] fix cookie consent on mobile

---
 components/core/Layout/Layout.tsx | 7 +++----
 yarn.lock                         | 5 -----
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 3c186580b..85da7e847 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -61,9 +61,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
             { 'shadow-magical': hasScrolled }
           )}
         >
-          <div className="px-4">
+          <Container>
             <Navbar />
-          </div>
+          </Container>
         </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
@@ -77,8 +77,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
           {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
         <Featurebar
-          title="This site uses cookies to improve your experience."
-          description="By clicking, you agree to our Privacy Policy."
+          title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
           action={
             <Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
diff --git a/yarn.lock b/yarn.lock
index 77e61f7c5..fb90e1970 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5435,11 +5435,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
-
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"

From ce4df2f1c6aa922f64b7ceb83580ac5c3dfc6283 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Mon, 26 Oct 2020 09:56:47 -0300
Subject: [PATCH 03/10] make description optional on featurebar

---
 components/core/Featurebar/Featurebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 6d5b88a0f..a243590b1 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -6,7 +6,7 @@ import s from './Featurebar.module.css'
 interface Props {
   className?: string
   title: string
-  description: string
+  description?: string
   hide?: boolean
   action?: React.ReactNode
 }

From d46e32d0b978ff47507fe42f56ec0490bf35f5d5 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Mon, 26 Oct 2020 14:52:41 -0300
Subject: [PATCH 04/10] fix ima

---
 components/product/ProductCard/ProductCard.tsx | 4 ++--
 pages/index.tsx                                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 60ebe5d03..924585bc1 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -12,8 +12,8 @@ interface Props {
   children?: ReactNode[] | Component[] | any[]
   product: ProductNode
   variant?: 'slim' | 'simple'
-  imgWidth: number
-  imgHeight: number
+  imgWidth: number | string
+  imgHeight: number | string
   priority?: boolean
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 44a93c1d7..5304f691e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -80,8 +80,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? 1600 : 820}
-            imgHeight={i === 0 ? 1600 : 820}
+            imgWidth={i === 0 ? '65vw' : '30vw'}
+            imgHeight={i === 0 ? '45vw' : '22vw'}
             priority
           />
         ))}

From bf71d1d41a0b868cae82ab35efb1a050b8aa67a8 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 26 Oct 2020 15:23:19 -0500
Subject: [PATCH 05/10] Updated wishlist hooks, added more, updated API.

---
 lib/bigcommerce/api/cart/handlers/add-item.ts |  4 +-
 .../api/cart/handlers/update-item.ts          |  4 +-
 .../api/operations/get-all-pages.ts           |  2 +-
 .../api/operations/get-customer-id.ts         | 34 +++++++++++++
 .../api/operations/get-customer-wishlist.ts   | 51 +++++++++++++++++++
 lib/bigcommerce/api/utils/parse-item.ts       | 10 ++--
 .../api/wishlist/handlers/add-item.ts         | 41 +++++++++++----
 .../api/wishlist/handlers/get-wishlist.ts     | 25 +++++++--
 lib/bigcommerce/api/wishlist/index.ts         | 33 +++++-------
 lib/bigcommerce/cart/use-add-item.tsx         |  2 +-
 lib/bigcommerce/cart/use-cart.tsx             | 10 ++--
 lib/bigcommerce/schema.d.ts                   |  6 +++
 lib/bigcommerce/wishlist/use-add-item.tsx     | 25 ++++++---
 lib/bigcommerce/wishlist/use-wishlist.tsx     | 50 +++++++++++-------
 lib/commerce/cart/use-cart.tsx                |  2 +-
 lib/commerce/wishlist/use-add-item.tsx        |  5 ++
 lib/commerce/wishlist/use-wishlist.tsx        | 17 +++++++
 pages/api/bigcommerce/wishlist.ts             |  3 ++
 18 files changed, 250 insertions(+), 74 deletions(-)
 create mode 100644 lib/bigcommerce/api/operations/get-customer-id.ts
 create mode 100644 lib/bigcommerce/api/operations/get-customer-wishlist.ts
 create mode 100644 lib/commerce/wishlist/use-add-item.tsx
 create mode 100644 lib/commerce/wishlist/use-wishlist.tsx
 create mode 100644 pages/api/bigcommerce/wishlist.ts

diff --git a/lib/bigcommerce/api/cart/handlers/add-item.ts b/lib/bigcommerce/api/cart/handlers/add-item.ts
index f5475fb08..c37abeb63 100644
--- a/lib/bigcommerce/api/cart/handlers/add-item.ts
+++ b/lib/bigcommerce/api/cart/handlers/add-item.ts
@@ -1,4 +1,4 @@
-import parseItem from '../../utils/parse-item'
+import { parseCartItem } from '../../utils/parse-item'
 import getCartCookie from '../../utils/get-cart-cookie'
 import type { CartHandlers } from '..'
 
@@ -19,7 +19,7 @@ const addItem: CartHandlers['addItem'] = async ({
   const options = {
     method: 'POST',
     body: JSON.stringify({
-      line_items: [parseItem(item)],
+      line_items: [parseCartItem(item)],
     }),
   }
   const { data } = cartId
diff --git a/lib/bigcommerce/api/cart/handlers/update-item.ts b/lib/bigcommerce/api/cart/handlers/update-item.ts
index 0a9fcaca7..c64c111df 100644
--- a/lib/bigcommerce/api/cart/handlers/update-item.ts
+++ b/lib/bigcommerce/api/cart/handlers/update-item.ts
@@ -1,4 +1,4 @@
-import parseItem from '../../utils/parse-item'
+import { parseCartItem } from '../../utils/parse-item'
 import getCartCookie from '../../utils/get-cart-cookie'
 import type { CartHandlers } from '..'
 
@@ -20,7 +20,7 @@ const updateItem: CartHandlers['updateItem'] = async ({
     {
       method: 'PUT',
       body: JSON.stringify({
-        line_item: parseItem(item),
+        line_item: parseCartItem(item),
       }),
     }
   )
diff --git a/lib/bigcommerce/api/operations/get-all-pages.ts b/lib/bigcommerce/api/operations/get-all-pages.ts
index 5aa5bde2d..9fe83f2a1 100644
--- a/lib/bigcommerce/api/operations/get-all-pages.ts
+++ b/lib/bigcommerce/api/operations/get-all-pages.ts
@@ -13,7 +13,7 @@ async function getAllPages(opts?: {
   preview?: boolean
 }): Promise<GetAllPagesResult>
 
-async function getAllPages<T extends { pages: any[] }, V = any>(opts: {
+async function getAllPages<T extends { pages: any[] }>(opts: {
   url: string
   config?: BigcommerceConfig
   preview?: boolean
diff --git a/lib/bigcommerce/api/operations/get-customer-id.ts b/lib/bigcommerce/api/operations/get-customer-id.ts
new file mode 100644
index 000000000..6cabb3ff1
--- /dev/null
+++ b/lib/bigcommerce/api/operations/get-customer-id.ts
@@ -0,0 +1,34 @@
+import { GetCustomerIdQuery } from '@lib/bigcommerce/schema'
+import { BigcommerceConfig, getConfig } from '..'
+
+export const getCustomerIdQuery = /* GraphQL */ `
+  query getCustomerId {
+    customer {
+      entityId
+    }
+  }
+`
+
+async function getCustomerId({
+  customerToken,
+  config,
+}: {
+  customerToken: string
+  config?: BigcommerceConfig
+}): Promise<number | undefined> {
+  config = getConfig(config)
+
+  const { data } = await config.fetch<GetCustomerIdQuery>(
+    getCustomerIdQuery,
+    undefined,
+    {
+      headers: {
+        cookie: `${config.customerCookie}=${customerToken}`,
+      },
+    }
+  )
+
+  return data?.customer?.entityId
+}
+
+export default getCustomerId
diff --git a/lib/bigcommerce/api/operations/get-customer-wishlist.ts b/lib/bigcommerce/api/operations/get-customer-wishlist.ts
new file mode 100644
index 000000000..dc5f1ced1
--- /dev/null
+++ b/lib/bigcommerce/api/operations/get-customer-wishlist.ts
@@ -0,0 +1,51 @@
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import { BigcommerceConfig, getConfig } from '..'
+import { definitions } from '../definitions/wishlist'
+
+export type Wishlist = definitions['wishlist_Full']
+
+export type GetCustomerWishlistResult<
+  T extends { wishlist?: any } = { wishlist?: Wishlist }
+> = T
+
+export type GetCustomerWishlistVariables = {
+  customerId: number
+}
+
+async function getCustomerWishlist(opts: {
+  variables: GetCustomerWishlistVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetCustomerWishlistResult>
+
+async function getCustomerWishlist<
+  T extends { wishlist?: any },
+  V = any
+>(opts: {
+  url: string
+  variables: V
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetCustomerWishlistResult<T>>
+
+async function getCustomerWishlist({
+  config,
+  variables,
+}: {
+  url?: string
+  variables: GetCustomerWishlistVariables
+  config?: BigcommerceConfig
+  preview?: boolean
+}): Promise<GetCustomerWishlistResult> {
+  config = getConfig(config)
+
+  const { data } = await config.storeApiFetch<
+    RecursivePartial<{ data: Wishlist[] }>
+  >(`/v3/wishlists/customer_id=${variables.customerId}`)
+  const wishlists = (data as RecursiveRequired<typeof data>) ?? []
+  const wishlist = wishlists[0]
+
+  return { wishlist }
+}
+
+export default getCustomerWishlist
diff --git a/lib/bigcommerce/api/utils/parse-item.ts b/lib/bigcommerce/api/utils/parse-item.ts
index 02c27bea8..2a2c87dde 100644
--- a/lib/bigcommerce/api/utils/parse-item.ts
+++ b/lib/bigcommerce/api/utils/parse-item.ts
@@ -1,9 +1,13 @@
+import type { ItemBody as WishlistItemBody } from '../wishlist'
 import type { ItemBody } from '../cart'
 
-const parseItem = (item: ItemBody) => ({
-  quantity: item.quantity,
+export const parseWishlistItem = (item: WishlistItemBody) => ({
   product_id: item.productId,
   variant_id: item.variantId,
 })
 
-export default parseItem
+export const parseCartItem = (item: ItemBody) => ({
+  quantity: item.quantity,
+  product_id: item.productId,
+  variant_id: item.variantId,
+})
diff --git a/lib/bigcommerce/api/wishlist/handlers/add-item.ts b/lib/bigcommerce/api/wishlist/handlers/add-item.ts
index d6678031f..e8f708454 100644
--- a/lib/bigcommerce/api/wishlist/handlers/add-item.ts
+++ b/lib/bigcommerce/api/wishlist/handlers/add-item.ts
@@ -1,9 +1,12 @@
 import type { WishlistHandlers } from '..'
+import getCustomerId from '../../operations/get-customer-id'
+import getCustomerWishlist from '../../operations/get-customer-wishlist'
+import { parseWishlistItem } from '../../utils/parse-item'
 
-// Return current wishlist info
+// Returns the wishlist of the signed customer
 const addItem: WishlistHandlers['addItem'] = async ({
   res,
-  body: { wishlistId, item },
+  body: { customerToken, item },
   config,
 }) => {
   if (!item) {
@@ -13,16 +16,36 @@ const addItem: WishlistHandlers['addItem'] = async ({
     })
   }
 
+  const customerId =
+    customerToken && (await getCustomerId({ customerToken, config }))
+
+  if (!customerId) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const { wishlist } = await getCustomerWishlist({
+    variables: { customerId },
+    config,
+  })
   const options = {
     method: 'POST',
-    body: JSON.stringify({
-      items: [item],
-    }),
+    body: JSON.stringify(
+      wishlist
+        ? {
+            items: [parseWishlistItem(item)],
+          }
+        : {
+            customer_id: customerId,
+            items: [parseWishlistItem(item)],
+          }
+    ),
   }
-  const { data } = await config.storeApiFetch(
-    `/v3/wishlists/${wishlistId}/items`,
-    options
-  )
+  const { data } = wishlist
+    ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options)
+    : await config.storeApiFetch('/v3/wishlists', options)
 
   res.status(200).json({ data })
 }
diff --git a/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts b/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts
index 5d0aa19c5..a77cf4467 100644
--- a/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts
+++ b/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts
@@ -1,17 +1,32 @@
+import getCustomerId from '../../operations/get-customer-id'
 import type { Wishlist, WishlistHandlers } from '..'
+import getCustomerWishlist from '../../operations/get-customer-wishlist'
 
 // Return wishlist info
 const getWishlist: WishlistHandlers['getWishlist'] = async ({
   res,
-  body: { wishlistId },
+  body: { customerToken },
   config,
 }) => {
   let result: { data?: Wishlist } = {}
 
-  try {
-    result = await config.storeApiFetch(`/v3/wishlists/${wishlistId}`)
-  } catch (error) {
-    throw error
+  if (customerToken) {
+    const customerId =
+      customerToken && (await getCustomerId({ customerToken, config }))
+
+    if (!customerId) {
+      // If the customerToken is invalid, then this request is too
+      return res.status(404).json({
+        data: null,
+        errors: [{ message: 'Wishlist not found' }],
+      })
+    }
+
+    const { wishlist } = await getCustomerWishlist({
+      variables: { customerId },
+      config,
+    })
+    result = { data: wishlist }
   }
 
   res.status(200).json({ data: result.data ?? null })
diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts
index 3bcba106b..f95c893d7 100644
--- a/lib/bigcommerce/api/wishlist/index.ts
+++ b/lib/bigcommerce/api/wishlist/index.ts
@@ -11,15 +11,16 @@ import removeItem from './handlers/remove-item'
 import updateWishlist from './handlers/update-wishlist'
 import removeWishlist from './handlers/remove-wishlist'
 import addWishlist from './handlers/add-wishlist'
+import { definitions } from '../definitions/wishlist'
 
 type Body<T> = Partial<T> | undefined
 
 export type ItemBody = {
-  product_id: number
-  variant_id: number
+  productId: number
+  variantId: number
 }
 
-export type AddItemBody = { wishlistId: string; item: ItemBody }
+export type AddItemBody = { item: ItemBody }
 
 export type RemoveItemBody = { wishlistId: string; itemId: string }
 
@@ -32,21 +33,11 @@ export type WishlistBody = {
 
 export type AddWishlistBody = { wishlist: WishlistBody }
 
-// TODO: this type should match:
-// https://developer.bigcommerce.com/api-reference/store-management/wishlists/wishlists/wishlistsbyidget
-export type Wishlist = {
-  id: string
-  customer_id: number
-  name: string
-  is_public: boolean
-  token: string
-  items: any[]
-  // TODO: add missing fields
-}
+export type Wishlist = definitions['wishlist_Full']
 
 export type WishlistHandlers = {
   getAllWishlists: BigcommerceHandler<Wishlist[], { customerId?: string }>
-  getWishlist: BigcommerceHandler<Wishlist, { wishlistId?: string }>
+  getWishlist: BigcommerceHandler<Wishlist, { customerToken?: string }>
   addWishlist: BigcommerceHandler<
     Wishlist,
     { wishlistId: string } & Body<AddWishlistBody>
@@ -57,7 +48,7 @@ export type WishlistHandlers = {
   >
   addItem: BigcommerceHandler<
     Wishlist,
-    { wishlistId: string } & Body<AddItemBody>
+    { customerToken?: string } & Body<AddItemBody>
   >
   removeItem: BigcommerceHandler<
     Wishlist,
@@ -77,17 +68,21 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
 ) => {
   if (!isAllowedMethod(req, res, METHODS)) return
 
+  const { cookies } = req
+  const customerToken = cookies[config.customerCookie]
+
   try {
     const { wishlistId, itemId, customerId } = req.body
+
     // Return current wishlist info
     if (req.method === 'GET' && wishlistId) {
-      const body = { wishlistId: wishlistId as string }
+      const body = { customerToken }
       return await handlers['getWishlist']({ req, res, config, body })
     }
 
     // Add an item to the wishlist
-    if (req.method === 'POST' && wishlistId) {
-      const body = { ...req.body, wishlistId }
+    if (req.method === 'POST') {
+      const body = { ...req.body, customerToken }
       return await handlers['addItem']({ req, res, config, body })
     }
 
diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx
index 36fbec7d2..19caca508 100644
--- a/lib/bigcommerce/cart/use-add-item.tsx
+++ b/lib/bigcommerce/cart/use-add-item.tsx
@@ -36,7 +36,7 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
 export function extendHook(customFetcher: typeof fetcher) {
   const useAddItem = () => {
     const { mutate } = useCart()
-    const fn = useCartAddItem<Cart, AddItemBody>(defaultOpts, customFetcher)
+    const fn = useCartAddItem(defaultOpts, customFetcher)
 
     return useCallback(
       async function addItem(input: AddItemInput) {
diff --git a/lib/bigcommerce/cart/use-cart.tsx b/lib/bigcommerce/cart/use-cart.tsx
index ce0800ca3..b12362d5c 100644
--- a/lib/bigcommerce/cart/use-cart.tsx
+++ b/lib/bigcommerce/cart/use-cart.tsx
@@ -23,23 +23,23 @@ export function extendHook(
   swrOptions?: SwrOptions<Cart | null, CartInput>
 ) {
   const useCart = () => {
-    const cart = useCommerceCart(defaultOpts, [], customFetcher, {
+    const response = useCommerceCart(defaultOpts, [], customFetcher, {
       revalidateOnFocus: false,
       ...swrOptions,
     })
 
     // Uses a getter to only calculate the prop when required
-    // cart.data is also a getter and it's better to not trigger it early
-    Object.defineProperty(cart, 'isEmpty', {
+    // response.data is also a getter and it's better to not trigger it early
+    Object.defineProperty(response, 'isEmpty', {
       get() {
-        return Object.values(cart.data?.line_items ?? {}).every(
+        return Object.values(response.data?.line_items ?? {}).every(
           (items) => !items.length
         )
       },
       set: (x) => x,
     })
 
-    return cart
+    return response
   }
 
   useCart.extend = extendHook
diff --git a/lib/bigcommerce/schema.d.ts b/lib/bigcommerce/schema.d.ts
index 69cff1ea6..aaafbe312 100644
--- a/lib/bigcommerce/schema.d.ts
+++ b/lib/bigcommerce/schema.d.ts
@@ -1886,6 +1886,12 @@ export type GetAllProductsQuery = { __typename?: 'Query' } & {
   }
 }
 
+export type GetCustomerIdQueryVariables = Exact<{ [key: string]: never }>
+
+export type GetCustomerIdQuery = { __typename?: 'Query' } & {
+  customer?: Maybe<{ __typename?: 'Customer' } & Pick<Customer, 'entityId'>>
+}
+
 export type GetProductQueryVariables = Exact<{
   hasLocale?: Maybe<Scalars['Boolean']>
   locale?: Maybe<Scalars['String']>
diff --git a/lib/bigcommerce/wishlist/use-add-item.tsx b/lib/bigcommerce/wishlist/use-add-item.tsx
index 9bbbe009e..60ea09c7f 100644
--- a/lib/bigcommerce/wishlist/use-add-item.tsx
+++ b/lib/bigcommerce/wishlist/use-add-item.tsx
@@ -1,7 +1,9 @@
 import { useCallback } from 'react'
 import { HookFetcher } from '@lib/commerce/utils/types'
-import useAction from '@lib/commerce/utils/use-action'
+import { CommerceError } from '@lib/commerce/utils/errors'
+import useWishlistAddItem from '@lib/commerce/wishlist/use-add-item'
 import type { ItemBody, AddItemBody } from '../api/wishlist'
+import useCustomer from '../use-customer'
 import useWishlist, { Wishlist } from './use-wishlist'
 
 const defaultOpts = {
@@ -13,24 +15,33 @@ export type AddItemInput = ItemBody
 
 export const fetcher: HookFetcher<Wishlist, AddItemBody> = (
   options,
-  { wishlistId, item },
+  { item },
   fetch
 ) => {
+  // TODO: add validations before doing the fetch
   return fetch({
     ...defaultOpts,
     ...options,
-    body: { wishlistId, item },
+    body: { item },
   })
 }
 
 export function extendHook(customFetcher: typeof fetcher) {
-  const useAddItem = (wishlistId: string) => {
-    const { mutate } = useWishlist(wishlistId)
-    const fn = useAction<Wishlist, AddItemBody>(defaultOpts, customFetcher)
+  const useAddItem = () => {
+    const { data: customer } = useCustomer()
+    const { mutate } = useWishlist()
+    const fn = useWishlistAddItem(defaultOpts, customFetcher)
 
     return useCallback(
       async function addItem(input: AddItemInput) {
-        const data = await fn({ wishlistId, item: input })
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        const data = await fn({ item: input })
         await mutate(data, false)
         return data
       },
diff --git a/lib/bigcommerce/wishlist/use-wishlist.tsx b/lib/bigcommerce/wishlist/use-wishlist.tsx
index d60660c05..438901de0 100644
--- a/lib/bigcommerce/wishlist/use-wishlist.tsx
+++ b/lib/bigcommerce/wishlist/use-wishlist.tsx
@@ -1,36 +1,48 @@
 import { HookFetcher } from '@lib/commerce/utils/types'
-import useData from '@lib/commerce/utils/use-data'
+import { SwrOptions } from '@lib/commerce/utils/use-data'
+import useCommerceWishlist from '@lib/commerce/wishlist/use-wishlist'
 import type { Wishlist } from '../api/wishlist'
+import useCustomer from '../use-customer'
 
 const defaultOpts = {
-  url: '/api/bigcommerce/wishlists',
+  url: '/api/bigcommerce/wishlist',
   method: 'GET',
 }
 
 export type { Wishlist }
 
-export type WishlistInput = {
-  wishlistId: string | undefined
-}
-
-export const fetcher: HookFetcher<Wishlist | null, WishlistInput> = (
+export const fetcher: HookFetcher<Wishlist | null, { customerId?: number }> = (
   options,
-  { wishlistId },
+  { customerId },
   fetch
 ) => {
-  return fetch({
-    ...defaultOpts,
-    ...options,
-    body: { wishlistId },
-  })
+  return customerId ? fetch({ ...defaultOpts, ...options }) : null
 }
 
-export function extendHook(customFetcher: typeof fetcher) {
-  const useWishlists = (wishlistId: string) => {
-    const fetchFn: typeof fetcher = (options, input, fetch) => {
-      return customFetcher(options, input, fetch)
-    }
-    const response = useData(defaultOpts, [['wishlistId', wishlistId]], fetchFn)
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: SwrOptions<Wishlist | null, { customerId?: number }>
+) {
+  const useWishlists = () => {
+    const { data: customer } = useCustomer()
+    const response = useCommerceWishlist(
+      defaultOpts,
+      [['customerId', customer?.entityId]],
+      customFetcher,
+      {
+        revalidateOnFocus: false,
+        ...swrOptions,
+      }
+    )
+
+    // Uses a getter to only calculate the prop when required
+    // response.data is also a getter and it's better to not trigger it early
+    Object.defineProperty(response, 'isEmpty', {
+      get() {
+        return (response.data?.items?.length || 0) > 0
+      },
+      set: (x) => x,
+    })
 
     return response
   }
diff --git a/lib/commerce/cart/use-cart.tsx b/lib/commerce/cart/use-cart.tsx
index 6649b20d0..8aefc3e68 100644
--- a/lib/commerce/cart/use-cart.tsx
+++ b/lib/commerce/cart/use-cart.tsx
@@ -4,7 +4,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
 import useData, { SwrOptions } from '../utils/use-data'
 import { useCommerce } from '..'
 
-export type CartResponse<C> = responseInterface<C, Error> & {
+export type CartResponse<Result> = responseInterface<Result, Error> & {
   isEmpty: boolean
 }
 
diff --git a/lib/commerce/wishlist/use-add-item.tsx b/lib/commerce/wishlist/use-add-item.tsx
new file mode 100644
index 000000000..f6c069f2b
--- /dev/null
+++ b/lib/commerce/wishlist/use-add-item.tsx
@@ -0,0 +1,5 @@
+import useAction from '../utils/use-action'
+
+const useAddItem = useAction
+
+export default useAddItem
diff --git a/lib/commerce/wishlist/use-wishlist.tsx b/lib/commerce/wishlist/use-wishlist.tsx
new file mode 100644
index 000000000..7b2981412
--- /dev/null
+++ b/lib/commerce/wishlist/use-wishlist.tsx
@@ -0,0 +1,17 @@
+import type { responseInterface } from 'swr'
+import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
+import useData, { SwrOptions } from '../utils/use-data'
+
+export type WishlistResponse<Result> = responseInterface<Result, Error> & {
+  isEmpty: boolean
+}
+
+export default function useWishlist<Result, Input = null>(
+  options: HookFetcherOptions,
+  input: HookInput,
+  fetcherFn: HookFetcher<Result, Input>,
+  swrOptions?: SwrOptions<Result, Input>
+) {
+  const response = useData(options, input, fetcherFn, swrOptions)
+  return Object.assign(response, { isEmpty: true }) as WishlistResponse<Result>
+}
diff --git a/pages/api/bigcommerce/wishlist.ts b/pages/api/bigcommerce/wishlist.ts
new file mode 100644
index 000000000..cfc3e00d0
--- /dev/null
+++ b/pages/api/bigcommerce/wishlist.ts
@@ -0,0 +1,3 @@
+import wishlistApi from '@lib/bigcommerce/api/wishlist'
+
+export default wishlistApi()

From ada8fa59beb4865f979812e0ad6882c1710083d9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 26 Oct 2020 17:33:43 -0300
Subject: [PATCH 06/10] Changes night mode

---
 assets/base.css                                     | 12 ++++++------
 components/auth/SignUpView.tsx                      |  2 +-
 .../cart/CartSidebarView/CartSidebarView.module.css | 13 +++++++++++++
 components/cart/CartSidebarView/CartSidebarView.tsx | 11 ++++++-----
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 7d0df28bf..cd0c5e593 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1,13 +1,13 @@
 :root {
-  --primary: white;
+  --primary: #ffffff;
   --primary-2: #f1f3f5;
-  --secondary: black;
+  --secondary: #000000;
   --secondary-2: #111;
 
   --selection: var(--cyan);
 
-  --text-base: black;
-  --text-primary: black;
+  --text-base: #000000;
+  --text-primary: #000000;
   --text-secondary: white;
 
   --hover: rgba(0, 0, 0, 0.075);
@@ -38,9 +38,9 @@
 }
 
 [data-theme='dark'] {
-  --primary: black;
+  --primary: #000000;
   --primary-2: #111;
-  --secondary: white;
+  --secondary: #000000;
   --secondary-2: #f1f3f5;
   --hover: rgba(255, 255, 255, 0.075);
   --hover-1: rgba(255, 255, 255, 0.15);
diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx
index f79ec5eb9..88763a3ff 100644
--- a/components/auth/SignUpView.tsx
+++ b/components/auth/SignUpView.tsx
@@ -59,7 +59,7 @@ const SignUpView: FC<Props> = () => {
   }, [handleValidation])
 
   return (
-    <div className="w-96 flex flex-col justify-between p-3">
+    <div className="w-80 flex flex-col justify-between p-3">
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css
index c3a2af639..9b94021ad 100644
--- a/components/cart/CartSidebarView/CartSidebarView.module.css
+++ b/components/cart/CartSidebarView/CartSidebarView.module.css
@@ -1,2 +1,15 @@
 .root {
+  @apply h-full flex flex-col;
+}
+
+.root.empty {
+  @apply bg-secondary text-secondary;
+}
+
+.root.success {
+  @apply bg-green text-white;
+}
+
+.root.error {
+  @apply bg-red text-white;
 }
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 7440a8d81..fdee9eecb 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -7,6 +7,7 @@ import { useUI } from '@components/ui/context'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import usePrice from '@lib/bigcommerce/use-price'
 import CartItem from '../CartItem'
+import s from './CartSidebarView.module.css'
 
 const CartSidebarView: FC = () => {
   const { data, isEmpty } = useCart()
@@ -32,10 +33,10 @@ const CartSidebarView: FC = () => {
 
   return (
     <div
-      className={cn('h-full flex flex-col', {
-        'bg-secondary text-secondary': isEmpty,
-        'bg-red text-white': error,
-        'bg-green text-white': success,
+      className={cn(s.root, {
+        [s.empty]: error,
+        [s.empty]: success,
+        [s.empty]: isEmpty,
       })}
     >
       <header className="px-4 pt-6 pb-4 sm:px-6">
@@ -56,7 +57,7 @@ const CartSidebarView: FC = () => {
       </header>
 
       {isEmpty ? (
-        <div className="flex-1 px-4 flex flex-col justify-center items-center ">
+        <div className="flex-1 px-4 flex flex-col justify-center items-center">
           <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
             <Bag className="absolute" />
           </span>

From 64f928f55c3f6760fddba050ec24a51939f59059 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 26 Oct 2020 17:49:31 -0300
Subject: [PATCH 07/10] Vars

---
 assets/base.css                            | 2 +-
 components/core/UserNav/UserNav.module.css | 2 +-
 components/ui/Button/Button.module.css     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index cd0c5e593..7be74ba3d 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -40,7 +40,7 @@
 [data-theme='dark'] {
   --primary: #000000;
   --primary-2: #111;
-  --secondary: #000000;
+  --secondary: #ffffff;
   --secondary-2: #f1f3f5;
   --hover: rgba(255, 255, 255, 0.075);
   --hover-1: rgba(255, 255, 255, 0.15);
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 8b8fa8c14..a319e3dac 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -7,7 +7,7 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none text-primary;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
 
   &:hover {
     @apply text-accents-6 transition scale-110 duration-100;
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index a08549ac6..df2be8802 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center border border-transparent items-center;
+  @apply bg-secondary text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6  transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 border border-transparent items-center;
 }
 
 .root:hover {

From f6beae6e386109db6310fb6314dcf38debf80558 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 26 Oct 2020 18:54:26 -0300
Subject: [PATCH 08/10] Changes night mode

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 5df149b06..a586199d2 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,7 @@
 # Next.js Commerce
+
+## Features
+
+## Todo
+
+## Contribute

From c2954d8e88c3f3af7a272c4dc525f83ae600e3f6 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 26 Oct 2020 17:11:51 -0500
Subject: [PATCH 09/10] Use password and email types for inputs

---
 components/auth/LoginView.tsx  | 4 ++--
 components/auth/SignUpView.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx
index b9cb4cb63..f41a128f5 100644
--- a/components/auth/LoginView.tsx
+++ b/components/auth/LoginView.tsx
@@ -70,8 +70,8 @@ const LoginView: FC<Props> = () => {
             </a>
           </div>
         )}
-        <Input placeholder="Email" onChange={setEmail} />
-        <Input placeholder="Password" onChange={setPassword} />
+        <Input type="email" placeholder="Email" onChange={setEmail} />
+        <Input type="password" placeholder="Password" onChange={setPassword} />
 
         <Button
           variant="slim"
diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx
index f79ec5eb9..758f3de4b 100644
--- a/components/auth/SignUpView.tsx
+++ b/components/auth/SignUpView.tsx
@@ -69,8 +69,8 @@ const SignUpView: FC<Props> = () => {
         )}
         <Input placeholder="First Name" onChange={setFirstName} />
         <Input placeholder="Last Name" onChange={setLastName} />
-        <Input placeholder="Email" onChange={setEmail} />
-        <Input placeholder="Password" onChange={setPassword} />
+        <Input type="email" placeholder="Email" onChange={setEmail} />
+        <Input type="password" placeholder="Password" onChange={setPassword} />
         <span className="text-accents-8">
           <span className="inline-block align-middle ">
             <Info width="15" height="15" />

From e91a6791d5fcdf44ee35f3c7ae6304ba119d854b Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 26 Oct 2020 17:13:34 -0500
Subject: [PATCH 10/10] Added wishlist button component

---
 .../product/ProductCard/ProductCard.tsx       | 15 +++--
 .../WishlistButton/WishlistButton.tsx         | 65 +++++++++++++++++++
 components/wishlist/WishlistButton/index.ts   |  1 +
 .../api/operations/get-customer-wishlist.ts   |  2 +-
 .../api/wishlist/handlers/add-item.ts         |  3 +
 lib/bigcommerce/api/wishlist/index.ts         |  2 +-
 6 files changed, 79 insertions(+), 9 deletions(-)
 create mode 100644 components/wishlist/WishlistButton/WishlistButton.tsx
 create mode 100644 components/wishlist/WishlistButton/index.ts

diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 60ebe5d03..478e5a61c 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -1,15 +1,14 @@
-import React, { FC, ReactNode, Component } from 'react'
+import type { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import usePrice from '@lib/bigcommerce/use-price'
-import { Heart } from '@components/icons'
 import { EnhancedImage } from '@components/core'
 import s from './ProductCard.module.css'
+import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
   className?: string
-  children?: ReactNode[] | Component[] | any[]
   product: ProductNode
   variant?: 'slim' | 'simple'
   imgWidth: number
@@ -25,7 +24,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = p.images.edges?.[0]?.node.urlOriginal!
+  const src = p.images.edges?.[0]?.node?.urlOriginal!
   const { price } = usePrice({
     amount: p.prices?.price?.value,
     baseAmount: p.prices?.retailPrice?.value,
@@ -65,9 +64,11 @@ const ProductCard: FC<Props> = ({
             </h3>
             <span className={s.productPrice}>{price}</span>
           </div>
-          <div className={s.wishlistButton}>
-            <Heart />
-          </div>
+          <WishlistButton
+            className={s.wishlistButton}
+            productId={p.entityId}
+            variant={p.variants.edges?.[0]!}
+          />
         </div>
         <div className={cn(s.imageContainer)}>
           <EnhancedImage
diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx
new file mode 100644
index 000000000..ef19c4dd4
--- /dev/null
+++ b/components/wishlist/WishlistButton/WishlistButton.tsx
@@ -0,0 +1,65 @@
+import React, { FC, useState } from 'react'
+import cn from 'classnames'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
+import useAddItem from '@lib/bigcommerce/wishlist/use-add-item'
+import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
+import useCustomer from '@lib/bigcommerce/use-customer'
+import { Heart } from '@components/icons'
+import { useUI } from '@components/ui/context'
+
+type Props = {
+  productId: number
+  variant: NonNullable<ProductNode['variants']['edges']>[0]
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const WishlistButton: FC<Props> = ({
+  productId,
+  variant,
+  className,
+  ...props
+}) => {
+  const addItem = useAddItem()
+  const { data } = useWishlist()
+  const { data: customer } = useCustomer()
+  const [loading, setLoading] = useState(false)
+  const { openModal, setModalView } = useUI()
+  const isInWishlist = data?.items?.some(
+    (item) =>
+      item.product_id === productId &&
+      item.variant_id === variant?.node.entityId
+  )
+
+  const addToWishlist = async (e: any) => {
+    e.preventDefault()
+    setLoading(true)
+
+    // A login is required before adding an item to the wishlist
+    if (!customer) {
+      setModalView('LOGIN_VIEW')
+      return openModal()
+    }
+
+    try {
+      await addItem({
+        productId,
+        variantId: variant?.node.entityId!,
+      })
+
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <button
+      {...props}
+      className={cn({ 'opacity-50': loading }, className)}
+      onClick={addToWishlist}
+    >
+      <Heart fill={isInWishlist ? 'white' : 'none'} />
+    </button>
+  )
+}
+
+export default WishlistButton
diff --git a/components/wishlist/WishlistButton/index.ts b/components/wishlist/WishlistButton/index.ts
new file mode 100644
index 000000000..66e88074b
--- /dev/null
+++ b/components/wishlist/WishlistButton/index.ts
@@ -0,0 +1 @@
+export { default } from './WishlistButton'
diff --git a/lib/bigcommerce/api/operations/get-customer-wishlist.ts b/lib/bigcommerce/api/operations/get-customer-wishlist.ts
index dc5f1ced1..093b136f1 100644
--- a/lib/bigcommerce/api/operations/get-customer-wishlist.ts
+++ b/lib/bigcommerce/api/operations/get-customer-wishlist.ts
@@ -41,7 +41,7 @@ async function getCustomerWishlist({
 
   const { data } = await config.storeApiFetch<
     RecursivePartial<{ data: Wishlist[] }>
-  >(`/v3/wishlists/customer_id=${variables.customerId}`)
+  >(`/v3/wishlists?customer_id=${variables.customerId}`)
   const wishlists = (data as RecursiveRequired<typeof data>) ?? []
   const wishlist = wishlists[0]
 
diff --git a/lib/bigcommerce/api/wishlist/handlers/add-item.ts b/lib/bigcommerce/api/wishlist/handlers/add-item.ts
index e8f708454..a02ef4434 100644
--- a/lib/bigcommerce/api/wishlist/handlers/add-item.ts
+++ b/lib/bigcommerce/api/wishlist/handlers/add-item.ts
@@ -38,11 +38,14 @@ const addItem: WishlistHandlers['addItem'] = async ({
             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)
diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts
index f95c893d7..13cbf60f7 100644
--- a/lib/bigcommerce/api/wishlist/index.ts
+++ b/lib/bigcommerce/api/wishlist/index.ts
@@ -75,7 +75,7 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
     const { wishlistId, itemId, customerId } = req.body
 
     // Return current wishlist info
-    if (req.method === 'GET' && wishlistId) {
+    if (req.method === 'GET') {
       const body = { customerToken }
       return await handlers['getWishlist']({ req, res, config, body })
     }