updates

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

components/common/UserNav/UserNav.tsx

@@ -30,7 +30,7 @@ const UserNav: FC<Props> = ({ className }) => {
             <Bag />
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
           </li>
-          {process.env.WISHLIST_ENABLED && (
+          {process.env.COMMERCE_WISHLIST_ENABLED && (
             <li className={s.item}>
               <Link href="/wishlist">
                 <a onClick={closeSidebarIfPresent} aria-label="Wishlist">

components/product/ProductCard/ProductCard.tsx

@@ -57,7 +57,7 @@ const ProductCard: FC<Props> = ({
                 {product.price.currencyCode}
               </span>
             </div>
-            {process.env.WISHLIST_ENABLED && (
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
               <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}

components/product/ProductView/ProductView.tsx

@@ -151,7 +151,7 @@ const ProductView: FC<Props> = ({ product }) => {
             </Button>
           </div>
         </div>
-        {process.env.WISHLIST_ENABLED && (
+        {process.env.COMMERCE_WISHLIST_ENABLED && (
           <WishlistButton
             className={s.wishlistButton}
             productId={product.id}

framework/bigcommerce/auth/use-login.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useLogin, { UseLogin } from '@commerce/use-login'
+import useLogin, { UseLogin } from '@commerce/auth/use-login'
 import type { LoginBody } from '../api/customers/login'
 import useCustomer from '../customer/use-customer'
 

framework/bigcommerce/auth/use-logout.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
-import useLogout, { UseLogout } from '@commerce/use-logout'
+import useLogout, { UseLogout } from '@commerce/auth/use-logout'
 import useCustomer from '../customer/use-customer'
 
 export default useLogout as UseLogout<typeof handler>

framework/bigcommerce/auth/use-signup.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useSignup, { UseSignup } from '@commerce/use-signup'
+import useSignup, { UseSignup } from '@commerce/auth/use-signup'
 import type { SignupBody } from '../api/customers/signup'
 import useCustomer from '../customer/use-customer'
 

framework/bigcommerce/next.config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  images: {
+    domains: ['cdn11.bigcommerce.com'],
+  },
+  i18n: {
+    locales: ['en-US', 'es'],
+    defaultLocale: 'en-US',
+  },
+  rewrites() {
+    return [
+      {
+        source: '/checkout',
+        destination: '/api/bigcommerce/checkout',
+      },
+      // The logout is also an action so this route is not required, but it's also another way
+      // you can allow a logout!
+      {
+        source: '/logout',
+        destination: '/api/bigcommerce/customers/logout?redirect_to=/',
+      },
+      // Rewrites for /search
+      {
+        source: '/search/designers/:name',
+        destination: '/search',
+      },
+      {
+        source: '/search/designers/:name/:category',
+        destination: '/search',
+      },
+      {
+        // This rewrite will also handle `/search/designers`
+        source: '/search/:category',
+        destination: '/search',
+      },
+    ]
+  },
+}

framework/bigcommerce/product/use-price.tsx

@@ -1,2 +1,2 @@
-export * from '@commerce/use-price'
+export * from '@commerce/product/use-price'
-export { default } from '@commerce/use-price'
+export { default } from '@commerce/product/use-price'

framework/commerce/auth/use-login.tsx

@@ -1,7 +1,7 @@
-import { useHook, useMutationHook } from './utils/use-hook'
+import { useHook, useMutationHook } from '../utils/use-hook'
-import { mutationFetcher } from './utils/default-fetcher'
+import { mutationFetcher } from '../utils/default-fetcher'
-import type { MutationHook, HookFetcherFn } from './utils/types'
+import type { MutationHook, HookFetcherFn } from '../utils/types'
-import type { Provider } from '.'
+import type { Provider } from '..'
 
 export type UseLogin<
   H extends MutationHook<any, any, any> = MutationHook<null, {}, {}>

framework/commerce/auth/use-logout.tsx

@@ -1,7 +1,7 @@
-import { useHook, useMutationHook } from './utils/use-hook'
+import { useHook, useMutationHook } from '../utils/use-hook'
-import { mutationFetcher } from './utils/default-fetcher'
+import { mutationFetcher } from '../utils/default-fetcher'
-import type { HookFetcherFn, MutationHook } from './utils/types'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
-import type { Provider } from '.'
+import type { Provider } from '..'
 
 export type UseLogout<
   H extends MutationHook<any, any, any> = MutationHook<null>

framework/commerce/auth/use-signup.tsx

@@ -1,7 +1,7 @@
-import { useHook, useMutationHook } from './utils/use-hook'
+import { useHook, useMutationHook } from '../utils/use-hook'
-import { mutationFetcher } from './utils/default-fetcher'
+import { mutationFetcher } from '../utils/default-fetcher'
-import type { HookFetcherFn, MutationHook } from './utils/types'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
-import type { Provider } from '.'
+import type { Provider } from '..'
 
 export type UseSignup<
   H extends MutationHook<any, any, any> = MutationHook<null>

framework/commerce/config.json

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

framework/commerce/product/use-price.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useCommerce } from '.'
+import { useCommerce } from '..'
 
 export function formatPrice({
   amount,

framework/commerce/types.ts

@@ -2,8 +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 Features = 'wishlist' | 'checkout' | string
+
 export type CommerceProviderConfig = {
-  features: Record<string, boolean>
+  features: Record<Features, boolean>
 }
 
 export type Discount = {

framework/commerce/utils/bootstrap.js

@@ -0,0 +1,11 @@
+module.exports = ({ features }) => {
+  let output = {
+    env: {},
+  }
+  if (!!Object.keys(features).length) {
+    Object.keys(features).map(
+      (r) => (output.env[`COMMERCE_${r.toUpperCase()}_ENABLED`] = features[r])
+    )
+  }
+  return output
+}

framework/commerce/utils/features.ts

@@ -14,6 +14,16 @@ function isFeatureEnabled(config: CommerceProviderConfig) {
       .includes(desideredFeature)
 }
 
+export function toEnvConfig(
+  configMap: CommerceProviderConfig['features']
+): Map<string, boolean> {
+  let toEnvConfigMap = new Map<string, boolean>()
+  Object.keys(configMap).map((r) =>
+    toEnvConfigMap.set(`${r.toUpperCase()}_ENABLED`, configMap[r])
+  )
+  return toEnvConfigMap
+}
+
 function boostrap(): FeaturesAPI {
   const basis = {
     isEnabled: () => false,

next.config.js

@@ -1,40 +1,6 @@
-module.exports = {
+const providerConfig = require('./framework/bigcommerce/config.json')
-  images: {
+const providerNextConfig = require('./framework/bigcommerce/next.config')
-    domains: ['cdn11.bigcommerce.com'],
+const bootstrap = require('./framework/commerce/utils/bootstrap')
-  },
+const d = require('deepmerge')
-  i18n: {
+
-    locales: ['en-US', 'es'],
+module.exports = d(providerNextConfig, bootstrap(providerConfig))
-    defaultLocale: 'en-US',
-  },
-  env: {
-    WISHLIST_ENABLED: false,
-  },
-  rewrites() {
-    return [
-      {
-        source: '/checkout',
-        destination: '/api/bigcommerce/checkout',
-      },
-      // The logout is also an action so this route is not required, but it's also another way
-      // you can allow a logout!
-      {
-        source: '/logout',
-        destination: '/api/bigcommerce/customers/logout?redirect_to=/',
-      },
-      // Rewrites for /search
-      {
-        source: '/search/designers/:name',
-        destination: '/search',
-      },
-      {
-        source: '/search/designers/:name/:category',
-        destination: '/search',
-      },
-      {
-        // This rewrite will also handle `/search/designers`
-        source: '/search/:category',
-        destination: '/search',
-      },
-    ]
-  },
-}

package.json

@@ -66,6 +66,7 @@
     "@types/lodash.throttle": "^4.1.6",
     "@types/node": "^14.14.16",
     "@types/react": "^17.0.0",
+    "deepmerge": "^4.2.2",
     "graphql": "^15.4.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",

pages/wishlist.tsx

@@ -17,7 +17,7 @@ export async function getStaticProps({
   locale,
 }: GetStaticPropsContext) {
   // Disabling page if Feature is not available
-  if (!process.env.WISHLIST_ENABLED) {
+  if (!process.env.COMMERCE_WISHLIST_ENABLED) {
     return {
       notFound: true,
     }

yarn.lock

@@ -2532,6 +2532,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"