diff --git a/README.md b/README.md index 8be54816a..ea6248c51 100644 --- a/README.md +++ b/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 - -
-I already own a BigCommerce store. What should I do? -
-First thing you do is: set your environment variables -
-
-.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. - -
- -
-BigCommerce shows a Coming Soon page and requests a Preview Code -
-After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard. -
-
-BigCommerce team has been notified and they plan to add more detailed about this subject. -
- -## 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 + +
+I already own a BigCommerce store. What should I do? +
+First thing you do is: set your environment variables +
+
+.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. + +
+ +
+BigCommerce shows a Coming Soon page and requests a Preview Code +
+After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard. +
+
+BigCommerce team has been notified and they plan to add more detailed about this subject. +
diff --git a/framework/bigcommerce/config.json b/framework/bigcommerce/config.json new file mode 100644 index 000000000..17ef37e25 --- /dev/null +++ b/framework/bigcommerce/config.json @@ -0,0 +1,5 @@ +{ + "features": { + "wishlist": false + } +} diff --git a/framework/bigcommerce/product/use-search.tsx b/framework/bigcommerce/product/use-search.tsx index 52db6a72d..505630029 100644 --- a/framework/bigcommerce/product/use-search.tsx +++ b/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 diff --git a/framework/commerce/products/use-search.tsx b/framework/commerce/cart/products/use-search.tsx similarity index 85% rename from framework/commerce/products/use-search.tsx rename to framework/commerce/cart/products/use-search.tsx index 1f887f5fe..e43ca301a 100644 --- a/framework/commerce/products/use-search.tsx +++ b/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' -import defaultFetcher from '../utils/default-fetcher' -import useData from '../utils/use-data' -import { Provider, useCommerce } from '..' +} from '../../utils/types' +import defaultFetcher from '../../utils/default-fetcher' +import useData from '../../utils/use-data' +import { Provider, useCommerce } from '../..' import { BigcommerceProvider } from '@framework' export type UseSearchHandler

= Prop< diff --git a/framework/commerce/config.json b/framework/commerce/config.json new file mode 100644 index 000000000..a0e7afc5d --- /dev/null +++ b/framework/commerce/config.json @@ -0,0 +1,5 @@ +{ + "features": { + "wishlist": true + } +} diff --git a/framework/commerce/types.ts b/framework/commerce/types.ts index 41aedb228..c828e74f9 100644 --- a/framework/commerce/types.ts +++ b/framework/commerce/types.ts @@ -148,3 +148,10 @@ export interface RemoveCartItemBody { export interface RemoveCartItemHandlerBody extends Partial { cartId?: string } + +// Features API +type Features = 'wishlist' | 'checkout' + +export interface FrameworkConfig { + features: Record +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 132ce5f18..dae0311b4 100644 --- a/pages/_app.tsx +++ b/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} diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx index a3f25d0e7..a1dd7a5fe 100644 --- a/pages/wishlist.tsx +++ b/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 (