Merge branch 'master' into arzafran/responsive-bottom-grid

README.md

@@ -1 +1,7 @@
 # Next.js Commerce
+
+## Features
+
+## Todo
+
+## Contribute

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: #ffffff;
   --secondary-2: #f1f3f5;
   --hover: rgba(255, 255, 255, 0.075);
   --hover-1: rgba(255, 255, 255, 0.15);

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"

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>
@@ -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" />

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;
 }

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>

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
 }

components/core/Layout/Layout.tsx

@@ -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)}>

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;

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 {

components/product/ProductCard/ProductCard.tsx

@@ -1,19 +1,18 @@
-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
-  imgHeight: number
+  imgWidth: number | string
+  imgHeight: number | string
   priority?: boolean
 }
 
@@ -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

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 {

components/ui/Sidebar/Sidebar.tsx

@@ -62,7 +62,7 @@ const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
                   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>

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

components/wishlist/WishlistButton/index.ts

@@ -0,0 +1 @@
+export { default } from './WishlistButton'

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

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),
       }),
     }
   )

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

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

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

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,
+})

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,39 @@ 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)],
+          }
+        : {
+            name: 'Wishlist',
+            customer_id: customerId,
+            items: [parseWishlistItem(item)],
+            is_public: false,
+          }
+    ),
   }
-  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 })
 }

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 })

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 }
+    if (req.method === 'GET') {
+      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 })
     }
 

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) {

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

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']>

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
       },

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
   }

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
 }
 

lib/commerce/wishlist/use-add-item.tsx

@@ -0,0 +1,5 @@
+import useAction from '../utils/use-action'
+
+const useAddItem = useAction
+
+export default useAddItem

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>
+}

pages/api/bigcommerce/wishlist.ts

@@ -0,0 +1,3 @@
+import wishlistApi from '@lib/bigcommerce/api/wishlist'
+
+export default wishlistApi()

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
           />
         ))}