Wishlist

README.md

@@ -42,57 +42,6 @@ Additionally, we need to ensure feature parity (not all providers have e.g. wish
 
 People actively working on this project: @okbel & @lfades.
 
-## Troubleshoot
-
-<details>
-<summary>I already own a BigCommerce store. What should I do?</summary>
-<br>
-First thing you do is: <b>set your environment variables</b>
-<br>
-<br>
-.env.local
-
-```sh
-BIGCOMMERCE_STOREFRONT_API_URL=<>
-BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
-BIGCOMMERCE_STORE_API_URL=<>
-BIGCOMMERCE_STORE_API_TOKEN=<>
-BIGCOMMERCE_STORE_API_CLIENT_ID=<>
-```
-
-If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.
-
-1. Install Vercel CLI: `npm i -g vercel`
-2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link`
-3. Download your environment variables: `vercel env pull .env.local`
-
-Next, you're free to customize the starter. More updates coming soon. Stay tuned.
-
-</details>
-
-<details>
-<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
-<br>
-After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
-<br>
-<br>
-BigCommerce team has been notified and they plan to add more detailed about this subject.
-</details>
-
-## Contribute
-
-Our commitment to Open Source can be found [here](https://vercel.com/oss).
-
-1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
-2. Create a new branch `git checkout -b MY_BRANCH_NAME`
-3. Install yarn: `npm install -g yarn`
-4. Install the dependencies: `yarn`
-5. Duplicate `.env.template` and rename it to `.env.local`.
-6. Add proper store values to `.env.local`.
-7. Run `yarn dev` to build and watch for code changes
-8. The development branch is `canary` (this is the branch pull requests should be made against).
-   On a release, `canary` branch is rebased into `master`.
-
 ## Framework
 
 Framework is where the data comes from. It contains mostly hooks and functions.
@@ -132,3 +81,70 @@ import { useUI } from '@components/ui'
 import { useCustomer } from '@framework/customer'
 import { useAddItem, useWishlist, useRemoveItem } from '@framework/wishlist'
 ```
+
+## Config
+
+### Features
+
+In order to make the UI entirely functional, we need to specify which features certain providers do not **provide**.
+
+**Disabling wishlist:**
+
+```
+{
+  "features": {
+    "wishlist": false
+  }
+}
+```
+
+## Contribute
+
+Our commitment to Open Source can be found [here](https://vercel.com/oss).
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Create a new branch `git checkout -b MY_BRANCH_NAME`
+3. Install yarn: `npm install -g yarn`
+4. Install the dependencies: `yarn`
+5. Duplicate `.env.template` and rename it to `.env.local`.
+6. Add proper store values to `.env.local`.
+7. Run `yarn dev` to build and watch for code changes
+8. The development branch is `canary` (this is the branch pull requests should be made against).
+   On a release, `canary` branch is rebased into `master`.
+
+## Troubleshoot
+
+<details>
+<summary>I already own a BigCommerce store. What should I do?</summary>
+<br>
+First thing you do is: <b>set your environment variables</b>
+<br>
+<br>
+.env.local
+
+```sh
+BIGCOMMERCE_STOREFRONT_API_URL=<>
+BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
+BIGCOMMERCE_STORE_API_URL=<>
+BIGCOMMERCE_STORE_API_TOKEN=<>
+BIGCOMMERCE_STORE_API_CLIENT_ID=<>
+```
+
+If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.
+
+1. Install Vercel CLI: `npm i -g vercel`
+2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link`
+3. Download your environment variables: `vercel env pull .env.local`
+
+Next, you're free to customize the starter. More updates coming soon. Stay tuned.
+
+</details>
+
+<details>
+<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
+<br>
+After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
+<br>
+<br>
+BigCommerce team has been notified and they plan to add more detailed about this subject.
+</details>

framework/bigcommerce/config.json

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

framework/bigcommerce/product/use-search.tsx

@@ -1,4 +1,4 @@
-import useSearch, { UseSearch } from '@commerce/products/use-search'
+import useSearch, { UseSearch } from '@commerce/cart/products/use-search'
 import type { BigcommerceProvider } from '..'
 
 export default useSearch as UseSearch<BigcommerceProvider>

framework/commerce/cart/products/use-search.tsx

@@ -1,13 +1,13 @@
-import type { SearchProductsData } from '../types'
+import type { SearchProductsData } from '../../types'
 import type {
   Prop,
   HookFetcherFn,
   UseHookInput,
   UseHookResponse,
-} from '../utils/types'
+} from '../../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
+import defaultFetcher from '../../utils/default-fetcher'
-import useData from '../utils/use-data'
+import useData from '../../utils/use-data'
-import { Provider, useCommerce } from '..'
+import { Provider, useCommerce } from '../..'
 import { BigcommerceProvider } from '@framework'
 
 export type UseSearchHandler<P extends Provider> = Prop<

framework/commerce/config.json

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

framework/commerce/types.ts

@@ -148,3 +148,10 @@ export interface RemoveCartItemBody {
 export interface RemoveCartItemHandlerBody extends Partial<RemoveCartItemBody> {
   cartId?: string
 }
+
+// Features API
+type Features = 'wishlist' | 'checkout'
+
+export interface FrameworkConfig {
+  features: Record<Features, boolean>
+}

pages/_app.tsx

@@ -1,12 +1,11 @@
 import '@assets/main.css'
-import 'keen-slider/keen-slider.min.css'
 import '@assets/chrome-bug.css'
+import 'keen-slider/keen-slider.min.css'
 
 import { FC, useEffect } from 'react'
 import type { AppProps } from 'next/app'
-
-import { ManagedUIContext } from '@components/ui/context'
 import { Head } from '@components/common'
+import { ManagedUIContext } from '@components/ui/context'
 
 const Noop: FC = ({ children }) => <>{children}</>
 

pages/wishlist.tsx

@@ -1,28 +1,43 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
+
-import getAllPages from '@framework/common/get-all-pages'
-import useWishlist from '@framework/wishlist/use-wishlist'
-import { Layout } from '@components/common'
 import { Heart } from '@components/icons'
+import { Layout } from '@components/common'
 import { Text, Container } from '@components/ui'
-import { WishlistCard } from '@components/wishlist'
 import { defaultPageProps } from '@lib/defaults'
+import { getConfig } from '@framework/api'
 import { useCustomer } from '@framework/customer'
+import { WishlistCard } from '@components/wishlist'
+import useWishlist from '@framework/wishlist/use-wishlist'
+import getAllPages from '@framework/common/get-all-pages'
+import frameworkConfig from '@framework/config.json'
 
 export async function getStaticProps({
   preview,
   locale,
 }: GetStaticPropsContext) {
+  // Disabling page if Feature is not available
+  if (!frameworkConfig.features.wishlist) {
+    return {
+      notFound: true,
+    }
+  }
+
   const config = getConfig({ locale })
   const { pages } = await getAllPages({ config, preview })
   return {
-    props: { ...defaultPageProps, pages },
+    props: {
+      pages,
+      ...defaultPageProps,
+    },
   }
 }
 
 export default function Wishlist() {
   const { data: customer } = useCustomer()
   const { data, isLoading, isEmpty } = useWishlist()
+  const router = useRouter()
 
   return (
     <Container>