Updates to wishlist feature

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

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>

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>

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

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'
 

next.config.js

@@ -6,6 +6,9 @@ module.exports = {
     locales: ['en-US', 'es'],
     defaultLocale: 'en-US',
   },
+  env: {
+    WISHLIST_ENABLED: false,
+  },
   rewrites() {
     return [
       {

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"

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>

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

pages/search.tsx

@@ -34,6 +34,7 @@ import {
   getDesignerPath,
   useSearchMeta,
 } from '@lib/search'
+import { Product } from '@commerce/types'
 
 export async function getStaticProps({
   preview,