From c620355448b4066f47cdc6a5e97670610e039de0 Mon Sep 17 00:00:00 2001 From: okbel Date: Thu, 18 Feb 2021 12:59:18 -0300 Subject: [PATCH] Adding Features APO --- .../product/ProductCard/ProductCard.tsx | 6 +-- .../product/ProductView/ProductView.tsx | 17 +++++---- framework/bigcommerce/config.json | 2 +- framework/commerce/types.ts | 4 ++ framework/commerce/utils/features.ts | 37 +++++++++++++++++++ package.json | 2 + pages/index.tsx | 10 +++++ pages/product/[slug].tsx | 17 +++++++-- yarn.lock | 12 ++++++ 9 files changed, 93 insertions(+), 14 deletions(-) create mode 100644 framework/commerce/utils/features.ts diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 46cd708fc..a9eaf8568 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -4,8 +4,6 @@ import Link from 'next/link' import type { Product } from '@commerce/types' import s from './ProductCard.module.css' import Image, { ImageProps } from 'next/image' -import frameworkConfig from '@framework/config.json' -const isWishlistEnabled = !!frameworkConfig.features.wishlist import WishlistButton from '@components/wishlist/WishlistButton' interface Props { @@ -13,6 +11,7 @@ interface Props { product: Product variant?: 'slim' | 'simple' imgProps?: Omit + wishlist?: boolean } const placeholderImg = '/product-img-placeholder.svg' @@ -22,6 +21,7 @@ const ProductCard: FC = ({ product, variant, imgProps, + wishlist = false, ...props }) => ( @@ -59,7 +59,7 @@ const ProductCard: FC = ({ {product.price.currencyCode} - {isWishlistEnabled && ( + {wishlist && ( = ({ product }) => { +const ProductView: FC = ({ product, wishlist = false }) => { const addItem = useAddItem() const { price } = usePrice({ amount: product.price.value, @@ -151,11 +152,13 @@ const ProductView: FC = ({ product }) => { - {/* */} + {wishlist && ( + + )} ) diff --git a/framework/bigcommerce/config.json b/framework/bigcommerce/config.json index 17ef37e25..a0e7afc5d 100644 --- a/framework/bigcommerce/config.json +++ b/framework/bigcommerce/config.json @@ -1,5 +1,5 @@ { "features": { - "wishlist": false + "wishlist": true } } diff --git a/framework/commerce/types.ts b/framework/commerce/types.ts index bf635c9dc..0ae766095 100644 --- a/framework/commerce/types.ts +++ b/framework/commerce/types.ts @@ -2,6 +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 CommerceProviderConfig = { + features: Record +} + export type Discount = { // The value of the discount, can be an amount or percentage value: number diff --git a/framework/commerce/utils/features.ts b/framework/commerce/utils/features.ts new file mode 100644 index 000000000..d84321967 --- /dev/null +++ b/framework/commerce/utils/features.ts @@ -0,0 +1,37 @@ +import commerceProviderConfig from '@framework/config.json' +import type { CommerceProviderConfig } from '../types' +import memo from 'lodash.memoize' + +type FeaturesAPI = { + isEnabled: (desideredFeature: string) => boolean +} + +function isFeatureEnabled(config: CommerceProviderConfig) { + const features = config.features + return (desideredFeature: string) => + Object.keys(features) + .filter((k) => features[k]) + .includes(desideredFeature) +} + +function boostrap(): FeaturesAPI { + const basis = { + isEnabled: () => false, + } + + if (!commerceProviderConfig) { + console.log('No config.json found - Please add a config.json') + return basis + } + + if (commerceProviderConfig.features) { + return { + ...basis, + isEnabled: memo(isFeatureEnabled(commerceProviderConfig)), + } + } + + return basis +} + +export default boostrap() diff --git a/package.json b/package.json index 268b8d4a5..2d8e32772 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ }, "dependencies": { "@reach/portal": "^0.11.2", + "@types/lodash.memoize": "^4.1.6", "@vercel/fetch": "^6.1.0", "body-scroll-lock": "^3.1.5", "bowser": "^2.11.0", @@ -32,6 +33,7 @@ "js-cookie": "^2.2.1", "keen-slider": "^5.2.4", "lodash.debounce": "^4.0.8", + "lodash.memoize": "^4.1.2", "lodash.random": "^3.2.0", "lodash.throttle": "^4.1.1", "next": "^10.0.7-canary.3", diff --git a/pages/index.tsx b/pages/index.tsx index 3a84112e5..acb1474be 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -8,6 +8,7 @@ import { getConfig } from '@framework/api' import getAllProducts from '@framework/product/get-all-products' import getSiteInfo from '@framework/common/get-site-info' import getAllPages from '@framework/common/get-all-pages' +import Features from '@commerce/utils/features' export async function getStaticProps({ preview, @@ -23,6 +24,7 @@ export async function getStaticProps({ const { categories, brands } = await getSiteInfo({ config, preview }) const { pages } = await getAllPages({ config, preview }) + const isWishlistEnabled = Features.isEnabled('wishlist') return { props: { @@ -30,6 +32,9 @@ export async function getStaticProps({ categories, brands, pages, + commerceFeatures: { + wishlist: isWishlistEnabled, + }, }, revalidate: 14400, } @@ -39,6 +44,7 @@ export default function Home({ products, brands, categories, + commerceFeatures, }: InferGetStaticPropsType) { return ( <> @@ -51,6 +57,7 @@ export default function Home({ width: i === 0 ? 1080 : 540, height: i === 0 ? 1080 : 540, }} + wishlist={commerceFeatures.wishlist} /> ))} @@ -64,6 +71,7 @@ export default function Home({ width: 320, height: 320, }} + wishlist={commerceFeatures.wishlist} /> ))} @@ -86,6 +94,7 @@ export default function Home({ width: i === 0 ? 1080 : 540, height: i === 0 ? 1080 : 540, }} + wishlist={commerceFeatures.wishlist} /> ))} @@ -99,6 +108,7 @@ export default function Home({ width: 320, height: 320, }} + wishlist={commerceFeatures.wishlist} /> ))} diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index 83aeaa54c..a705c001b 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -11,14 +11,15 @@ import { getConfig } from '@framework/api' import getProduct from '@framework/product/get-product' import getAllPages from '@framework/common/get-all-pages' import getAllProductPaths from '@framework/product/get-all-product-paths' +import Features from '@commerce/utils/features' export async function getStaticProps({ params, locale, preview, }: GetStaticPropsContext<{ slug: string }>) { + const isWishlistEnabled = Features.isEnabled('wishlist') const config = getConfig({ locale }) - const { pages } = await getAllPages({ config, preview }) const { product } = await getProduct({ variables: { slug: params!.slug }, @@ -31,7 +32,13 @@ export async function getStaticProps({ } return { - props: { pages, product }, + props: { + pages, + product, + commerceFeatures: { + wishlist: isWishlistEnabled, + }, + }, revalidate: 200, } } @@ -55,13 +62,17 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) { export default function Slug({ product, + commerceFeatures, }: InferGetStaticPropsType) { const router = useRouter() return router.isFallback ? (

Loading...

// TODO (BC) Add Skeleton Views ) : ( - + ) } diff --git a/yarn.lock b/yarn.lock index a3e80eb6c..e7cd08438 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1060,6 +1060,13 @@ dependencies: "@types/lodash" "*" +"@types/lodash.memoize@^4.1.6": + version "4.1.6" + resolved "https://registry.yarnpkg.com/@types/lodash.memoize/-/lodash.memoize-4.1.6.tgz#3221f981790a415cab1a239f25c17efd8b604c23" + integrity sha512-mYxjKiKzRadRJVClLKxS4wb3Iy9kzwJ1CkbyKiadVxejnswnRByyofmPMscFKscmYpl36BEEhCMPuWhA1R/1ZQ== + dependencies: + "@types/lodash" "*" + "@types/lodash.random@^3.2.6": version "3.2.6" resolved "https://registry.yarnpkg.com/@types/lodash.random/-/lodash.random-3.2.6.tgz#64b08abad168dca39c778ed40cce75b2f9e168eb" @@ -4232,6 +4239,11 @@ lodash.isstring@^4.0.1: resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451" integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE= +lodash.memoize@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" + integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= + lodash.once@^4.0.0: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"