Adding Features APO

components/product/ProductCard/ProductCard.tsx

@@ -4,8 +4,6 @@ import Link from 'next/link'
 import type { Product } from '@commerce/types'
 import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
-import frameworkConfig from '@framework/config.json'
-const isWishlistEnabled = !!frameworkConfig.features.wishlist
 import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
@@ -13,6 +11,7 @@ interface Props {
   product: Product
   variant?: 'slim' | 'simple'
   imgProps?: Omit<ImageProps, 'src'>
+  wishlist?: boolean
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
@@ -22,6 +21,7 @@ const ProductCard: FC<Props> = ({
   product,
   variant,
   imgProps,
+  wishlist = false,
   ...props
 }) => (
   <Link href={`/product/${product.slug}`} {...props}>
@@ -59,7 +59,7 @@ const ProductCard: FC<Props> = ({
                 {product.price.currencyCode}
               </span>
             </div>
-            {isWishlistEnabled && (
+            {wishlist && (
               <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}

components/product/ProductView/ProductView.tsx

@@ -13,15 +13,16 @@ import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 
 import { getVariant, SelectedOptions } from '../helpers'
-// import WishlistButton from '@components/wishlist/WishlistButton'
+import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
   className?: string
   children?: any
   product: Product
+  wishlist?: boolean
 }
 
-const ProductView: FC<Props> = ({ product }) => {
+const ProductView: FC<Props> = ({ product, wishlist = false }) => {
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
@@ -151,11 +152,13 @@ const ProductView: FC<Props> = ({ product }) => {
             </Button>
           </div>
         </div>
-        {/* <WishlistButton
+        {wishlist && (
-          className={s.wishlistButton}
+          <WishlistButton
-          productId={product.id}
+            className={s.wishlistButton}
-          variant={product.variants[0]!}
+            productId={product.id}
-        /> */}
+            variant={product.variants[0]!}
+          />
+        )}
       </div>
     </Container>
   )

framework/bigcommerce/config.json

@@ -1,5 +1,5 @@
 {
   "features": {
-    "wishlist": false
+    "wishlist": true
   }
 }

framework/commerce/types.ts

@@ -2,6 +2,10 @@ import type { Wishlist as BCWishlist } from '@framework/api/wishlist'
 import type { Customer as BCCustomer } from '@framework/api/customers'
 import type { SearchProductsData as BCSearchProductsData } from '@framework/api/catalog/products'
 
+export type CommerceProviderConfig = {
+  features: Record<string, boolean>
+}
+
 export type Discount = {
   // The value of the discount, can be an amount or percentage
   value: number

framework/commerce/utils/features.ts

@@ -0,0 +1,37 @@
+import commerceProviderConfig from '@framework/config.json'
+import type { CommerceProviderConfig } from '../types'
+import memo from 'lodash.memoize'
+
+type FeaturesAPI = {
+  isEnabled: (desideredFeature: string) => boolean
+}
+
+function isFeatureEnabled(config: CommerceProviderConfig) {
+  const features = config.features
+  return (desideredFeature: string) =>
+    Object.keys(features)
+      .filter((k) => features[k])
+      .includes(desideredFeature)
+}
+
+function boostrap(): FeaturesAPI {
+  const basis = {
+    isEnabled: () => false,
+  }
+
+  if (!commerceProviderConfig) {
+    console.log('No config.json found - Please add a config.json')
+    return basis
+  }
+
+  if (commerceProviderConfig.features) {
+    return {
+      ...basis,
+      isEnabled: memo(isFeatureEnabled(commerceProviderConfig)),
+    }
+  }
+
+  return basis
+}
+
+export default boostrap()

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@reach/portal": "^0.11.2",
+    "@types/lodash.memoize": "^4.1.6",
     "@vercel/fetch": "^6.1.0",
     "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
@@ -32,6 +33,7 @@
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",
     "lodash.debounce": "^4.0.8",
+    "lodash.memoize": "^4.1.2",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
     "next": "^10.0.7-canary.3",

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

yarn.lock

@@ -1060,6 +1060,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.memoize@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.memoize/-/lodash.memoize-4.1.6.tgz#3221f981790a415cab1a239f25c17efd8b604c23"
+  integrity sha512-mYxjKiKzRadRJVClLKxS4wb3Iy9kzwJ1CkbyKiadVxejnswnRByyofmPMscFKscmYpl36BEEhCMPuWhA1R/1ZQ==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash.random@^3.2.6":
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.6.tgz#64b08abad168dca39c778ed40cce75b2f9e168eb"
@@ -4232,6 +4239,11 @@ lodash.isstring@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
   integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
 
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+
 lodash.once@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"