Implementing FeaturesAPI with Wishlist

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -9,7 +9,7 @@ import usePrice from '@framework/product/use-price'
 import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'
 
-const CartSidebarView: FC = () => {
+const CartSidebarView: FC<{ wishlist?: boolean }> = ({ wishlist }) => {
   const { closeSidebar } = useUI()
   const { data, isLoading, isEmpty } = useCart()
 
@@ -48,7 +48,7 @@ const CartSidebarView: FC = () => {
             </button>
           </div>
           <div className="space-y-1">
-            <UserNav className="" />
+            <UserNav wishlist={wishlist} />
           </div>
         </div>
       </header>

components/common/Layout/Layout.tsx

@@ -44,7 +44,11 @@ interface Props {
   }
 }
 
-const Layout: FC<Props> = ({ children, pageProps }) => {
+const Layout: FC<Props> = ({
+  children,
+  pageProps: { commerceFeatures, ...pageProps },
+}) => {
+  console.log(pageProps)
   const {
     displaySidebar,
     displayModal,
@@ -54,11 +58,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   } = useUI()
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
-
+  const isWishlistEnabled = commerceFeatures.wishlist
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
-        <Navbar />
+        <Navbar wishlist={isWishlistEnabled} />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
 
@@ -69,7 +73,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         </Modal>
 
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView />
+          <CartSidebarView wishlist={isWishlistEnabled} />
         </Sidebar>
 
         <FeatureBar

components/common/Navbar/Navbar.tsx

@@ -5,7 +5,7 @@ import { Searchbar, UserNav } from '@components/common'
 import NavbarRoot from './NavbarRoot'
 import s from './Navbar.module.css'
 
-const Navbar: FC = () => (
+const Navbar: FC<{ wishlist?: boolean }> = ({ wishlist }) => (
   <NavbarRoot>
     <Container>
       <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
@@ -33,7 +33,7 @@ const Navbar: FC = () => (
         </div>
 
         <div className="flex justify-end flex-1 space-x-8">
-          <UserNav />
+          <UserNav wishlist={wishlist} />
         </div>
       </div>
 

components/common/UserNav/UserNav.tsx

@@ -9,16 +9,15 @@ import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
 import { Avatar } from '@components/common'
-import Features from '@commerce/utils/features'
 
 interface Props {
   className?: string
+  wishlist?: boolean
 }
 
 const countItem = (count: number, item: LineItem) => count + item.quantity
-const isWishlistEnabled = Features.isEnabled('wishlist')
 
-const UserNav: FC<Props> = ({ className }) => {
+const UserNav: FC<Props> = ({ className, wishlist = false }) => {
   const { data } = useCart()
   const { data: customer } = useCustomer()
   const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
@@ -32,7 +31,7 @@ const UserNav: FC<Props> = ({ className }) => {
             <Bag />
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
           </li>
-          {isWishlistEnabled && (
+          {wishlist && (
             <li className={s.item}>
               <Link href="/wishlist">
                 <a onClick={closeSidebarIfPresent} aria-label="Wishlist">