New changes and initial Features API

components/common/UserNav/UserNav.tsx

@@ -9,6 +9,7 @@ import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
 import { Avatar } from '@components/common'
+import frameworkConfig from '@framework/config.json'
 
 interface Props {
   className?: string
@@ -21,6 +22,7 @@ const UserNav: FC<Props> = ({ className }) => {
   const { data: customer } = useCustomer()
   const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
   const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
+  const isWishlistEnabled = !!frameworkConfig.features.wishlist
 
   return (
     <nav className={cn(s.root, className)}>
@@ -30,13 +32,15 @@ const UserNav: FC<Props> = ({ className }) => {
             <Bag />
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
           </li>
-          <li className={s.item}>
-            <Link href="/wishlist">
-              <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
-                <Heart />
-              </a>
-            </Link>
-          </li>
+          {isWishlistEnabled && (
+            <li className={s.item}>
+              <Link href="/wishlist">
+                <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
+                  <Heart />
+                </a>
+              </Link>
+            </li>
+          )}
           <li className={s.item}>
             {customer ? (
               <DropdownMenu />

components/product/ProductCard/ProductCard.tsx

@@ -3,7 +3,9 @@ import cn from 'classnames'
 import Link from 'next/link'
 import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
-// import WishlistButton from '@components/wishlist/WishlistButton'
+import frameworkConfig from '@framework/config.json'
+const isWishlistEnabled = !!frameworkConfig.features.wishlist
+import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
   className?: string
@@ -56,11 +58,13 @@ const ProductCard: FC<Props> = ({
                 {product.price.currencyCode}
               </span>
             </div>
-            {/* <WishlistButton
+            {isWishlistEnabled && (
+              <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}
                 variant={product.variants[0]}
-              /> */}
+              />
+            )}
           </div>
           <div className={s.imageContainer}>
             {product?.images && (

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -7,7 +7,7 @@ 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 type { Product } from '@framework/types'
 type Props = {
   productId: Product['id']
   variant: ProductVariant

components/wishlist/WishlistButton/index.ts

@@ -0,0 +1 @@
+export { default } from './WishlistButton'

components/wishlist/index.ts

@@ -1 +1,2 @@
 export { default as WishlistCard } from './WishlistCard'
+export { default as WishlistButton } from './WishlistButton'

pages/index.tsx

@@ -1,7 +1,7 @@
 import { Layout } from '@components/common'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
-import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
+// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 
 import { getConfig } from '@framework/api'

pages/orders.tsx

@@ -1,9 +1,9 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/common/get-all-pages'
+import { Bag } from '@components/icons'
 import { Layout } from '@components/common'
 import { Container, Text } from '@components/ui'
-import { Bag } from '@components/icons'
+import { getConfig } from '@framework/api'
+import getAllPages from '@framework/common/get-all-pages'
 
 export async function getStaticProps({
   preview,

tsconfig.json

@@ -26,6 +26,6 @@
       "@framework": ["framework/bigcommerce"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
-  "exclude": ["node_modules", "components/wishlist"]
+  "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
+  "exclude": ["node_modules"]
 }

yarn.lock

@@ -2135,9 +2135,9 @@ camelcase@^6.0.0:
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
 caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001154, caniuse-lite@^1.0.30001173:
-  version "1.0.30001174"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001174.tgz#0f2aca2153fd88ceb07a2bb982fc2acb787623c4"
-  integrity sha512-tqClL/4ThQq6cfFXH3oJL4rifFBeM6gTkphjao5kgwMaW9yn0tKgQLAEfKzDwj6HQWCB/aWo8kTFlSvIN8geEA==
+  version "1.0.30001187"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz"
+  integrity sha512-w7/EP1JRZ9552CyrThUnay2RkZ1DXxKe/Q2swTC4+LElLh9RRYrL1Z+27LlakB8kzY0fSmHw9mc7XYDUKAKWMA==
 
 caseless@~0.12.0:
   version "0.12.0"