fix conflicts

components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css

@@ -0,0 +1,23 @@
+.root {
+  @apply py-12 flex flex-col w-full px-6;
+
+  @screen md {
+    @apply flex-row;
+  }
+}
+
+.asideWrapper {
+  @apply pr-3 w-full relative;
+
+  @screen md {
+    @apply w-48;
+  }
+}
+
+.aside {
+  @apply flex flex-row w-full justify-around mb-12;
+
+  @screen md {
+    @apply mb-0 block sticky top-32;
+  }
+}

components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -0,0 +1,66 @@
+import { FC } from 'react'
+import Link from 'next/link'
+import { getCategoryPath, getDesignerPath } from '@utils/search'
+import { Grid } from '@components/ui'
+import { ProductCard } from '@components/product'
+import s from './HomeAllProductsGrid.module.css'
+
+interface Props {
+  categories?: any
+  brands?: any
+  newestProducts?: any
+}
+
+const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
+  return (
+    <div className={s.root}>
+      <div className={s.asideWrapper}>
+        <div className={s.aside}>
+          <ul className="mb-10">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getCategoryPath('')}>
+                <a>All Categories</a>
+              </Link>
+            </li>
+            {categories.map((cat: any) => (
+              <li key={cat.path} className="py-1 text-accents-8">
+                <Link href={getCategoryPath(cat.path)}>
+                  <a>{cat.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <ul className="">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getDesignerPath('')}>
+                <a>All Designers</a>
+              </Link>
+            </li>
+            {brands.flatMap(({ node }: any) => (
+              <li key={node.path} className="py-1 text-accents-8">
+                <Link href={getDesignerPath(node.path)}>
+                  <a>{node.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="flex-1">
+        <Grid layout="normal">
+          {newestProducts.map(({ node }: any) => (
+            <ProductCard
+              key={node.path}
+              product={node}
+              variant="simple"
+              imgWidth={480}
+              imgHeight={480}
+            />
+          ))}
+        </Grid>
+      </div>
+    </div>
+  )
+}
+
+export default Head

components/core/HomeAllProductsGrid/index.ts

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

components/product/ProductCard/ProductCard.tsx

@@ -52,7 +52,7 @@ const ProductCard: FC<Props> = ({
   }
 
   return (
-    <Link href={`product${p.path}`}>
+    <Link href={`/product${p.path}`}>
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >

components/product/ProductSlider/ProductSlider.module.css

@@ -48,7 +48,8 @@
   @apply hidden;
 
   @screen sm {
-    @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
+    @apply block absolute bottom-6 left-1/2;
+    transform: translateX(-50%);
   }
 }
 

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -2,6 +2,7 @@ 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 useRemoveItem from '@lib/bigcommerce/wishlist/use-remove-item'
 import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
 import useCustomer from '@lib/bigcommerce/use-customer'
 import { Heart } from '@components/icons'
@@ -19,19 +20,21 @@ const WishlistButton: FC<Props> = ({
   ...props
 }) => {
   const addItem = useAddItem()
+  const removeItem = useRemoveItem()
   const { data } = useWishlist()
   const { data: customer } = useCustomer()
   const [loading, setLoading] = useState(false)
   const { openModal, setModalView } = useUI()
-  const isInWishlist = data?.items?.some(
+  const itemInWishlist = data?.items?.find(
     (item) =>
       item.product_id === productId &&
       item.variant_id === variant?.node.entityId
   )
 
-  const addToWishlist = async (e: any) => {
+  const handleWishlistChange = async (e: any) => {
     e.preventDefault()
-    setLoading(true)
+
+    if (loading) return
 
     // A login is required before adding an item to the wishlist
     if (!customer) {
@@ -39,11 +42,17 @@ const WishlistButton: FC<Props> = ({
       return openModal()
     }
 
+    setLoading(true)
+
     try {
-      await addItem({
-        productId,
-        variantId: variant?.node.entityId!,
-      })
+      if (itemInWishlist) {
+        await removeItem({ id: itemInWishlist.id! })
+      } else {
+        await addItem({
+          productId,
+          variantId: variant?.node.entityId!,
+        })
+      }
 
       setLoading(false)
     } catch (err) {
@@ -55,9 +64,9 @@ const WishlistButton: FC<Props> = ({
     <button
       {...props}
       className={cn({ 'opacity-50': loading }, className)}
-      onClick={addToWishlist}
+      onClick={handleWishlistChange}
     >
-      <Heart fill={isInWishlist ? 'white' : 'none'} />
+      <Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
     </button>
   )
 }

lib/bigcommerce/api/cart/index.ts

@@ -9,8 +9,6 @@ import addItem from './handlers/add-item'
 import updateItem from './handlers/update-item'
 import removeItem from './handlers/remove-item'
 
-type Body<T> = Partial<T> | undefined
-
 export type ItemBody = {
   productId: number
   variantId: number
@@ -46,14 +44,14 @@ export type Cart = {
 
 export type CartHandlers = {
   getCart: BigcommerceHandler<Cart, { cartId?: string }>
-  addItem: BigcommerceHandler<Cart, { cartId?: string } & Body<AddItemBody>>
+  addItem: BigcommerceHandler<Cart, { cartId?: string } & Partial<AddItemBody>>
   updateItem: BigcommerceHandler<
     Cart,
-    { cartId?: string } & Body<UpdateItemBody>
+    { cartId?: string } & Partial<UpdateItemBody>
   >
   removeItem: BigcommerceHandler<
     Cart,
-    { cartId?: string } & Body<RemoveItemBody>
+    { cartId?: string } & Partial<RemoveItemBody>
   >
 }
 

lib/bigcommerce/api/utils/fetch-store-api.ts

@@ -41,7 +41,7 @@ export default async function fetchStoreApi<T>(
     throw new BigcommerceApiError(msg, res, data)
   }
 
-  if (!isJSON) {
+  if (res.status !== 204 && !isJSON) {
     throw new BigcommerceApiError(
       `Fetch to Bigcommerce API failed, expected JSON content but found: ${contentType}`,
       res

lib/bigcommerce/api/wishlist/handlers/remove-item.ts

@@ -1,20 +1,34 @@
+import getCustomerId from '../../operations/get-customer-id'
+import getCustomerWishlist, {
+  Wishlist,
+} from '../../operations/get-customer-wishlist'
 import type { WishlistHandlers } from '..'
 
 // Return current wishlist info
 const removeItem: WishlistHandlers['removeItem'] = async ({
   res,
-  body: { wishlistId, itemId },
+  body: { customerToken, itemId },
   config,
 }) => {
-  if (!wishlistId || !itemId) {
+  const customerId =
+    customerToken && (await getCustomerId({ customerToken, config }))
+  const { wishlist } =
+    (customerId &&
+      (await getCustomerWishlist({
+        variables: { customerId },
+        config,
+      }))) ||
+    {}
+
+  if (!wishlist || !itemId) {
     return res.status(400).json({
       data: null,
       errors: [{ message: 'Invalid request' }],
     })
   }
 
-  const result = await config.storeApiFetch<{ data: any } | null>(
-    `/v3/wishlists/${wishlistId}/items/${itemId}`,
+  const result = await config.storeApiFetch<{ data: Wishlist } | null>(
+    `/v3/wishlists/${wishlist.id}/items/${itemId}`,
     { method: 'DELETE' }
   )
   const data = result?.data ?? null

lib/bigcommerce/api/wishlist/index.ts

@@ -13,8 +13,6 @@ 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 = {
   productId: number
   variantId: number
@@ -22,7 +20,7 @@ export type ItemBody = {
 
 export type AddItemBody = { item: ItemBody }
 
-export type RemoveItemBody = { wishlistId: string; itemId: string }
+export type RemoveItemBody = { itemId: string }
 
 export type WishlistBody = {
   customer_id: number
@@ -40,19 +38,19 @@ export type WishlistHandlers = {
   getWishlist: BigcommerceHandler<Wishlist, { customerToken?: string }>
   addWishlist: BigcommerceHandler<
     Wishlist,
-    { wishlistId: string } & Body<AddWishlistBody>
+    { wishlistId: string } & Partial<AddWishlistBody>
   >
   updateWishlist: BigcommerceHandler<
     Wishlist,
-    { wishlistId: string } & Body<AddWishlistBody>
+    { wishlistId: string } & Partial<AddWishlistBody>
   >
   addItem: BigcommerceHandler<
     Wishlist,
-    { customerToken?: string } & Body<AddItemBody>
+    { customerToken?: string } & Partial<AddItemBody>
   >
   removeItem: BigcommerceHandler<
     Wishlist,
-    { wishlistId: string } & Body<RemoveItemBody>
+    { customerToken?: string } & Partial<RemoveItemBody>
   >
   removeWishlist: BigcommerceHandler<Wishlist, { wishlistId: string }>
 }
@@ -93,11 +91,8 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
     }
 
     // Remove an item from the wishlist
-    if (req.method === 'DELETE' && wishlistId && itemId) {
-      const body = {
-        wishlistId: wishlistId as string,
-        itemId: itemId as string,
-      }
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, customerToken }
       return await handlers['removeItem']({ req, res, config, body })
     }
 

lib/bigcommerce/cart/use-remove-item.tsx

@@ -26,7 +26,7 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
 }
 
 export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = (item?: any) => {
+  const useRemoveItem = () => {
     const { mutate } = useCart()
     const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(
       defaultOpts,
@@ -35,7 +35,7 @@ export function extendHook(customFetcher: typeof fetcher) {
 
     return useCallback(
       async function removeItem(input: RemoveItemInput) {
-        const data = await fn({ itemId: input.id ?? item?.id })
+        const data = await fn({ itemId: input.id })
         await mutate(data, false)
         return data
       },

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

@@ -45,7 +45,7 @@ export function extendHook(customFetcher: typeof fetcher) {
         await mutate(data, false)
         return data
       },
-      [fn, mutate]
+      [fn, mutate, customer]
     )
   }
 

lib/bigcommerce/wishlist/use-remove-item.tsx

@@ -1,45 +1,55 @@
 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 useWishlistRemoveItem from '@lib/commerce/wishlist/use-remove-item'
 import type { RemoveItemBody } from '../api/wishlist'
+import useCustomer from '../use-customer'
 import useWishlist, { Wishlist } from './use-wishlist'
 
 const defaultOpts = {
-  url: '/api/bigcommerce/wishlists',
+  url: '/api/bigcommerce/wishlist',
   method: 'DELETE',
 }
 
 export type RemoveItemInput = {
-  id: string
+  id: string | number
 }
 
 export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
   options,
-  { wishlistId, itemId },
+  { itemId },
   fetch
 ) => {
   return fetch({
     ...defaultOpts,
     ...options,
-    body: { wishlistId, itemId },
+    body: { itemId },
   })
 }
 
 export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = (wishlistId: string, item?: any) => {
+  const useRemoveItem = () => {
+    const { data: customer } = useCustomer()
     const { mutate } = useWishlist()
-    const fn = useAction<Wishlist | null, RemoveItemBody>(
+    const fn = useWishlistRemoveItem<Wishlist | null, RemoveItemBody>(
       defaultOpts,
       customFetcher
     )
 
     return useCallback(
       async function removeItem(input: RemoveItemInput) {
-        const data = await fn({ wishlistId, itemId: input.id ?? item?.id })
+        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({ itemId: String(input.id) })
         await mutate(data, false)
         return data
       },
-      [fn, mutate]
+      [fn, mutate, customer]
     )
   }
 

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

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

pages/index.tsx

@@ -5,11 +5,10 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import rangeMap from '@lib/range-map'
-import { getCategoryPath, getDesignerPath } from '@utils/search'
 import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
-import Link from 'next/link'
+import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid'
 
 export async function getStaticProps({
   preview,
@@ -129,53 +128,11 @@ export default function Home({
           />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-6">
-        <div className="pr-3 w-48 relative">
-          <div className="sticky top-32">
-            <ul className="mb-10">
-              <li className="py-1 text-base font-bold tracking-wide">
-                <Link href={getCategoryPath('')}>
-                  <a>All Categories</a>
-                </Link>
-              </li>
-              {categories.map((cat) => (
-                <li key={cat.path} className="py-1 text-accents-8">
-                  <Link href={getCategoryPath(cat.path)}>
-                    <a>{cat.name}</a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-            <ul className="">
-              <li className="py-1 text-base font-bold tracking-wide">
-                <Link href={getDesignerPath('')}>
-                  <a>All Designers</a>
-                </Link>
-              </li>
-              {brands.flatMap(({ node }) => (
-                <li key={node.path} className="py-1 text-accents-8">
-                  <Link href={getDesignerPath(node.path)}>
-                    <a>{node.name}</a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-        <div className="flex-1">
-          <Grid layout="normal">
-            {newestProducts.map(({ node }) => (
-              <ProductCard
-                key={node.path}
-                product={node}
-                variant="simple"
-                imgWidth={480}
-                imgHeight={480}
-              />
-            ))}
-          </Grid>
-        </div>
-      </div>
+      <HomeAllProductsGrid
+        categories={categories}
+        brands={brands}
+        newestProducts={newestProducts}
+      />
     </div>
   )
 }