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