feat(reviews): conditionally enable reviews functionality based on store setting

matthewvolk · matthewvolk · commit d6498f3319c5 · 2025-12-09T09:45:43.000-06:00
diff --git a/.changeset/tiny-parts-call.md b/.changeset/tiny-parts-call.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Conditionally enable storefront reviews functionality based on `site.settings.reviews.enabled`. The storefront logic when this setting is enabled/disabled matches exactly the logic of Stencil + Cornerstone.
diff --git a/core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts b/core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts
@@ -21,6 +21,9 @@ const BrandPageQuery = graphql(`
             productComparisonsEnabled
           }
         }
+        reviews {
+          enabled
+        }
       }
     }
   }
diff --git a/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx
@@ -103,6 +103,8 @@ export default async function Brand(props: Props) {
     return notFound();
   }
 
+  const reviewsEnabled = settings?.reviews.enabled ?? false;
+
   const productComparisonsEnabled =
     settings?.storefront.catalog?.productComparisonsEnabled ?? false;
 
@@ -141,6 +143,7 @@ export default async function Brand(props: Props) {
         : undefined,
       price: pricesTransformer(product.prices, format),
       subtitle: product.brand?.name ?? undefined,
+      rating: product.reviewSummary.averageRating,
     }));
   });
 
@@ -220,6 +223,7 @@ export default async function Brand(props: Props) {
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
       removeLabel={t('Compare.remove')}
       resetFiltersLabel={t('FacetedSearch.resetFilters')}
+      reviewsEnabled={reviewsEnabled}
       showCompare={productComparisonsEnabled}
       sortDefaultValue="featured"
       sortLabel={t('Search.title')}
diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts b/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts
@@ -40,6 +40,9 @@ const CategoryPageQuery = graphql(
               productComparisonsEnabled
             }
           }
+          reviews {
+            enabled
+          }
         }
       }
     }
diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
@@ -113,6 +113,8 @@ export default async function Category(props: Props) {
     href: path ?? '#',
   }));
 
+  const reviewsEnabled = settings?.reviews.enabled ?? false;
+
   const productComparisonsEnabled =
     settings?.storefront.catalog?.productComparisonsEnabled ?? false;
 
@@ -154,6 +156,7 @@ export default async function Category(props: Props) {
         : undefined,
       price: pricesTransformer(product.prices, format),
       subtitle: product.brand?.name ?? undefined,
+      rating: product.reviewSummary.averageRating,
     }));
   });
 
@@ -256,6 +259,7 @@ export default async function Category(props: Props) {
         rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
         removeLabel={t('Compare.remove')}
         resetFiltersLabel={t('FacetedSearch.resetFilters')}
+        reviewsEnabled={reviewsEnabled}
         showCompare={productComparisonsEnabled}
         sortDefaultValue="featured"
         sortLabel={t('SortBy.sortBy')}
diff --git a/core/app/[locale]/(default)/(faceted)/search/page-data.ts b/core/app/[locale]/(default)/(faceted)/search/page-data.ts
@@ -13,6 +13,9 @@ const SearchPageQuery = graphql(`
             productComparisonsEnabled
           }
         }
+        reviews {
+          enabled
+        }
       }
     }
   }
diff --git a/core/app/[locale]/(default)/(faceted)/search/page.tsx b/core/app/[locale]/(default)/(faceted)/search/page.tsx
@@ -78,6 +78,8 @@ export default async function Search(props: Props) {
 
   const { settings } = await getSearchPageData();
 
+  const reviewsEnabled = settings?.reviews.enabled ?? false;
+
   const productComparisonsEnabled =
     settings?.storefront.catalog?.productComparisonsEnabled ?? false;
 
@@ -126,6 +128,7 @@ export default async function Search(props: Props) {
         : undefined,
       price: pricesTransformer(product.prices, format),
       subtitle: product.brand?.name ?? undefined,
+      rating: product.reviewSummary.averageRating,
     }));
   });
 
@@ -252,6 +255,7 @@ export default async function Search(props: Props) {
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
       removeLabel={t('Compare.remove')}
       resetFiltersLabel={t('FacetedSearch.resetFilters')}
+      reviewsEnabled={reviewsEnabled}
       showCompare={productComparisonsEnabled}
       sortDefaultValue="featured"
       sortLabel={t('SortBy.sortBy')}
diff --git a/core/app/[locale]/(default)/product/[slug]/page-data.ts b/core/app/[locale]/(default)/product/[slug]/page-data.ts
@@ -170,6 +170,11 @@ const ProductQuery = graphql(
   `
     query ProductQuery($entityId: Int!) {
       site {
+        settings {
+          reviews {
+            enabled
+          }
+        }
         product(entityId: $entityId) {
           entityId
           name
@@ -198,7 +203,7 @@ export const getProduct = cache(async (entityId: number, customerAccessToken?: s
     fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
   });
 
-  return data.site.product;
+  return data.site;
 });
 
 const StreamableProductQuery = graphql(
diff --git a/core/app/[locale]/(default)/product/[slug]/page.tsx b/core/app/[locale]/(default)/product/[slug]/page.tsx
@@ -77,7 +77,9 @@ export default async function Product({ params, searchParams }: Props) {
 
   const productId = Number(slug);
 
-  const baseProduct = await getProduct(productId, customerAccessToken);
+  const { product: baseProduct, settings } = await getProduct(productId, customerAccessToken);
+
+  const reviewsEnabled = settings?.reviews.enabled ?? false;
 
   if (!baseProduct) {
     return notFound();
@@ -364,6 +366,7 @@ export default async function Product({ params, searchParams }: Props) {
             href: baseProduct.path,
             images: streamableImages,
             price: streamablePrices,
+            reviewsEnabled,
             subtitle: baseProduct.brand?.name,
             rating: baseProduct.reviewSummary.averageRating,
             accordions: streameableAccordions,
@@ -387,12 +390,14 @@ export default async function Product({ params, searchParams }: Props) {
         title={t('RelatedProducts.title')}
       />
 
-      <Reviews
-        productId={productId}
-        searchParams={searchParams}
-        streamableImages={streamableImages}
-        streamableProduct={streamableProduct}
-      />
+      {reviewsEnabled && (
+        <Reviews
+          productId={productId}
+          searchParams={searchParams}
+          streamableImages={streamableImages}
+          streamableProduct={streamableProduct}
+        />
+      )}
 
       <Stream
         fallback={null}
diff --git a/core/vibes/soul/primitives/product-card/index.tsx b/core/vibes/soul/primitives/product-card/index.tsx
@@ -6,6 +6,8 @@ import * as Skeleton from '@/vibes/soul/primitives/skeleton';
 import { Image } from '~/components/image';
 import { Link } from '~/components/link';
 
+import { Rating } from '../rating';
+
 import { Compare } from './compare';
 
 export interface Product {
@@ -29,6 +31,7 @@ export interface ProductCardProps {
   compareLabel?: string;
   compareParamName?: string;
   product: Product;
+  reviewsEnabled?: boolean;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -52,7 +55,8 @@ export interface ProductCardProps {
  * ```
  */
 export function ProductCard({
-  product: { id, title, subtitle, badge, price, image, href },
+  product: { id, title, subtitle, badge, price, image, href, rating },
+  reviewsEnabled = false,
   colorScheme = 'light',
   className,
   showCompare = false,
@@ -147,6 +151,9 @@ export function ProductCard({
               </span>
             )}
             {price != null && <PriceLabel colorScheme={colorScheme} price={price} />}
+            {reviewsEnabled && typeof rating === 'number' && rating > 0 && (
+              <Rating rating={rating} />
+            )}
           </div>
         </div>
         {href !== '#' && (
diff --git a/core/vibes/soul/sections/product-detail/index.tsx b/core/vibes/soul/sections/product-detail/index.tsx
@@ -20,6 +20,7 @@ interface ProductDetailProduct {
   subtitle?: string;
   badge?: string;
   rating?: Streamable<number | null>;
+  reviewsEnabled?: boolean;
   summary?: Streamable<string>;
   description?: Streamable<string | ReactNode | null>;
   accordions?: Streamable<
@@ -108,11 +109,13 @@ export function ProductDetail<F extends Field>({
                   <h1 className="mb-3 mt-2 font-[family-name:var(--product-detail-title-font-family,var(--font-family-heading))] text-2xl font-medium leading-none @xl:mb-4 @xl:text-3xl @4xl:text-4xl">
                     {product.title}
                   </h1>
-                  <div className="group/product-rating">
-                    <Stream fallback={<RatingSkeleton />} value={product.rating}>
-                      {(rating) => <Rating rating={rating ?? 0} />}
-                    </Stream>
-                  </div>
+                  {product.reviewsEnabled && (
+                    <div className="group/product-rating">
+                      <Stream fallback={<RatingSkeleton />} value={product.rating}>
+                        {(rating) => <Rating rating={rating ?? 0} />}
+                      </Stream>
+                    </div>
+                  )}
                   <div className="group/product-price">
                     <Stream fallback={<PriceLabelSkeleton />} value={product.price}>
                       {(price) => (
diff --git a/core/vibes/soul/sections/product-list/index.tsx b/core/vibes/soul/sections/product-list/index.tsx
@@ -11,6 +11,7 @@ import * as Skeleton from '@/vibes/soul/primitives/skeleton';
 
 interface ProductListProps {
   products: Streamable<Product[]>;
+  reviewsEnabled?: boolean;
   compareProducts?: Streamable<Product[]>;
   className?: string;
   colorScheme?: 'light' | 'dark';
@@ -45,6 +46,7 @@ interface ProductListProps {
  */
 export function ProductList({
   products: streamableProducts,
+  reviewsEnabled,
   className,
   colorScheme = 'light',
   aspectRatio = '5:6',
@@ -107,6 +109,7 @@ export function ProductList({
                     imageSizes="(min-width: 80rem) 20vw, (min-width: 64rem) 25vw, (min-width: 42rem) 33vw, (min-width: 24rem) 50vw, 100vw"
                     key={product.id}
                     product={product}
+                    reviewsEnabled={reviewsEnabled}
                     showCompare={showCompare}
                   />
                 ))}
diff --git a/core/vibes/soul/sections/products-list-section/index.tsx b/core/vibes/soul/sections/products-list-section/index.tsx
@@ -30,6 +30,7 @@ interface Props {
   filterLabel?: string;
   filtersPanelTitle?: Streamable<string>;
   resetFiltersLabel?: Streamable<string>;
+  reviewsEnabled?: boolean;
   rangeFilterApplyLabel?: Streamable<string>;
   sortLabel?: Streamable<string | null>;
   sortPlaceholder?: Streamable<string | null>;
@@ -49,6 +50,7 @@ export function ProductsListSection({
   title = 'Products',
   totalCount,
   products,
+  reviewsEnabled,
   compareProducts,
   sortOptions: streamableSortOptions,
   sortDefaultValue,
@@ -171,6 +173,7 @@ export function ProductsListSection({
               placeholderCount={placeholderCount}
               products={products}
               removeLabel={removeLabel}
+              reviewsEnabled={reviewsEnabled}
               showCompare={showCompare}
             />
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@bigcommerce/catalyst-core": minor
 +---
++
 +Conditionally enable storefront reviews functionality based on `site.settings.reviews.enabled`. The storefront logic when this setting is enabled/disabled matches exactly the logic of Stencil + Cornerstone.
Original file line number	Diff line number	Diff line change
@@ -21,6 +21,9 @@ const BrandPageQuery = graphql(`
`21`	`21`	`productComparisonsEnabled`
`22`	`22`	`}`
`23`	`23`	`}`
	`24`	`+ reviews {`
	`25`	`+ enabled`
	`26`	`+ }`
`24`	`27`	`}`
`25`	`28`	`}`
`26`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,9 @@ const CategoryPageQuery = graphql(`
`40`	`40`	`productComparisonsEnabled`
`41`	`41`	`}`
`42`	`42`	`}`
	`43`	`+ reviews {`
	`44`	`+ enabled`
	`45`	`+ }`
`43`	`46`	`}`
`44`	`47`	`}`
`45`	`48`	`}`
Original file line number	Diff line number	Diff line change
@@ -13,6 +13,9 @@ const SearchPageQuery = graphql(`
`13`	`13`	`productComparisonsEnabled`
`14`	`14`	`}`
`15`	`15`	`}`
	`16`	`+ reviews {`
	`17`	`+ enabled`
	`18`	`+ }`
`16`	`19`	`}`
`17`	`20`	`}`
`18`	`21`	`}`