Adding Features APO

pages/index.tsx

@@ -8,6 +8,7 @@ import { getConfig } from '@framework/api'
 import getAllProducts from '@framework/product/get-all-products'
 import getSiteInfo from '@framework/common/get-site-info'
 import getAllPages from '@framework/common/get-all-pages'
+import Features from '@commerce/utils/features'
 
 export async function getStaticProps({
   preview,
@@ -23,6 +24,7 @@ export async function getStaticProps({
 
   const { categories, brands } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
+  const isWishlistEnabled = Features.isEnabled('wishlist')
 
   return {
     props: {
@@ -30,6 +32,9 @@ export async function getStaticProps({
       categories,
       brands,
       pages,
+      commerceFeatures: {
+        wishlist: isWishlistEnabled,
+      },
     },
     revalidate: 14400,
   }
@@ -39,6 +44,7 @@ export default function Home({
   products,
   brands,
   categories,
+  commerceFeatures,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
@@ -51,6 +57,7 @@ export default function Home({
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
             }}
+            wishlist={commerceFeatures.wishlist}
           />
         ))}
       </Grid>
@@ -64,6 +71,7 @@ export default function Home({
               width: 320,
               height: 320,
             }}
+            wishlist={commerceFeatures.wishlist}
           />
         ))}
       </Marquee>
@@ -86,6 +94,7 @@ export default function Home({
               width: i === 0 ? 1080 : 540,
               height: i === 0 ? 1080 : 540,
             }}
+            wishlist={commerceFeatures.wishlist}
           />
         ))}
       </Grid>
@@ -99,6 +108,7 @@ export default function Home({
               width: 320,
               height: 320,
             }}
+            wishlist={commerceFeatures.wishlist}
           />
         ))}
       </Marquee>

pages/product/[slug].tsx

@@ -11,14 +11,15 @@ import { getConfig } from '@framework/api'
 import getProduct from '@framework/product/get-product'
 import getAllPages from '@framework/common/get-all-pages'
 import getAllProductPaths from '@framework/product/get-all-product-paths'
+import Features from '@commerce/utils/features'
 
 export async function getStaticProps({
   params,
   locale,
   preview,
 }: GetStaticPropsContext<{ slug: string }>) {
+  const isWishlistEnabled = Features.isEnabled('wishlist')
   const config = getConfig({ locale })
-
   const { pages } = await getAllPages({ config, preview })
   const { product } = await getProduct({
     variables: { slug: params!.slug },
@@ -31,7 +32,13 @@ export async function getStaticProps({
   }
 
   return {
-    props: { pages, product },
+    props: {
+      pages,
+      product,
+      commerceFeatures: {
+        wishlist: isWishlistEnabled,
+      },
+    },
     revalidate: 200,
   }
 }
@@ -55,13 +62,17 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
 
 export default function Slug({
   product,
+  commerceFeatures,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
 
   return router.isFallback ? (
     <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
   ) : (
-    <ProductView product={product as any} />
+    <ProductView
+      product={product as any}
+      wishlist={commerceFeatures.wishlist}
+    />
   )
 }