From a8607f24cd215129527418dc6b81748baa1faae4 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Mon, 22 Feb 2021 19:06:03 -0500
Subject: [PATCH] Updates to wishlist feature

---
 components/common/Layout/Layout.tsx                   | 5 ++---
 components/product/ProductCard/ProductCard.tsx        | 4 ++--
 components/product/ProductView/ProductView.tsx        | 4 ++--
 components/wishlist/WishlistButton/WishlistButton.tsx | 5 +++--
 framework/commerce/utils/features.ts                  | 2 +-
 next.config.js                                        | 3 +++
 package.json                                          | 1 +
 pages/index.tsx                                       | 8 ++++----
 pages/product/[slug].tsx                              | 2 +-
 pages/search.tsx                                      | 1 +
 10 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
index f4376bbf3..82e045474 100644
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@@ -58,11 +58,10 @@ const Layout: FC<Props> = ({
   } = useUI()
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
-  const isWishlistEnabled = commerceFeatures.wishlist
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
-        <Navbar wishlist={isWishlistEnabled} />
+        <Navbar wishlist={!!process.env.WISHLIST_ENABLED} />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
 
@@ -73,7 +72,7 @@ const Layout: FC<Props> = ({
         </Modal>
 
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView wishlist={isWishlistEnabled} />
+          <CartSidebarView wishlist={!!process.env.WISHLIST_ENABLED} />
         </Sidebar>
 
         <FeatureBar
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index a9eaf8568..52ce129dd 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -59,11 +59,11 @@ const ProductCard: FC<Props> = ({
                 {product.price.currencyCode}
               </span>
             </div>
-            {wishlist && (
+            {process.env.WISHLIST_ENABLED && (
               <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}
-                variant={product.variants[0]}
+                variant={product.variants[0] as any}
               />
             )}
           </div>
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index c502303c4..e666e1a08 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -152,11 +152,11 @@ const ProductView: FC<Props> = ({ product, wishlist = false }) => {
             </Button>
           </div>
         </div>
-        {wishlist && (
+        {process.env.WISHLIST_ENABLED && (
           <WishlistButton
             className={s.wishlistButton}
             productId={product.id}
-            variant={product.variants[0]!}
+            variant={product.variants[0]! as any}
           />
         )}
       </div>
diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx
index 0c4c20194..e22215363 100644
--- a/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/components/wishlist/WishlistButton/WishlistButton.tsx
@@ -7,7 +7,7 @@ import type { Product, ProductVariant } from '@commerce/types'
 import useCustomer from '@framework/customer/use-customer'
 import useAddItem from '@framework/wishlist/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
-import useWishlist from '@framework/wishlist/use-add-item'
+import useWishlist from '@framework/wishlist/use-wishlist'
 
 type Props = {
   productId: Product['id']
@@ -28,7 +28,8 @@ const WishlistButton: FC<Props> = ({
   const [loading, setLoading] = useState(false)
 
   const itemInWishlist = data?.items?.find(
-    (item) => item.product_id === productId && item.variant_id === variant.id
+    (item) =>
+      item.product_id === productId && (item.variant_id as any) === variant.id
   )
 
   const handleWishlistChange = async (e: any) => {
diff --git a/framework/commerce/utils/features.ts b/framework/commerce/utils/features.ts
index d84321967..98a53ed54 100644
--- a/framework/commerce/utils/features.ts
+++ b/framework/commerce/utils/features.ts
@@ -1,4 +1,4 @@
-import commerceProviderConfig from '@framework/config.json'
+import commerceProviderConfig from '../config.json'
 import type { CommerceProviderConfig } from '../types'
 import memo from 'lodash.memoize'
 
diff --git a/next.config.js b/next.config.js
index e732ef78a..939031884 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,6 +6,9 @@ module.exports = {
     locales: ['en-US', 'es'],
     defaultLocale: 'en-US',
   },
+  env: {
+    WISHLIST_ENABLED: false,
+  },
   rewrites() {
     return [
       {
diff --git a/package.json b/package.json
index 2d8e32772..d1bfbb574 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "generate": "graphql-codegen",
     "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
   },
+  "sideEffects": false,
   "license": "MIT",
   "engines": {
     "node": "12.x"
diff --git a/pages/index.tsx b/pages/index.tsx
index acb1474be..c4fb68252 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -57,7 +57,7 @@ export default function Home({
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
             }}
-            wishlist={commerceFeatures.wishlist}
+            wishlist={!!process.env.WISHLIST_ENABLED}
           />
         ))}
       </Grid>
@@ -71,7 +71,7 @@ export default function Home({
               width: 320,
               height: 320,
             }}
-            wishlist={commerceFeatures.wishlist}
+            wishlist={!!process.env.WISHLIST_ENABLED}
           />
         ))}
       </Marquee>
@@ -94,7 +94,7 @@ export default function Home({
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
             }}
-            wishlist={commerceFeatures.wishlist}
+            wishlist={!!process.env.WISHLIST_ENABLED}
           />
         ))}
       </Grid>
@@ -108,7 +108,7 @@ export default function Home({
               width: 320,
               height: 320,
             }}
-            wishlist={commerceFeatures.wishlist}
+            wishlist={!!process.env.WISHLIST_ENABLED}
           />
         ))}
       </Marquee>
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index a705c001b..90da202b2 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -71,7 +71,7 @@ export default function Slug({
   ) : (
     <ProductView
       product={product as any}
-      wishlist={commerceFeatures.wishlist}
+      wishlist={!!process.env.WISHLIST_ENABLED}
     />
   )
 }
diff --git a/pages/search.tsx b/pages/search.tsx
index c9958a9f8..d62ce22d4 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -34,6 +34,7 @@ import {
   getDesignerPath,
   useSearchMeta,
 } from '@lib/search'
+import { Product } from '@commerce/types'
 
 export async function getStaticProps({
   preview,