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

matthewvolk · matthewvolk · commit 5b2edd0d4b2f · 2025-12-11T13:59:54.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
@@ -26,6 +26,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;
 
@@ -219,6 +221,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
@@ -45,6 +45,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;
 
@@ -255,6 +257,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
@@ -18,6 +18,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;
 
@@ -251,6 +253,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
@@ -171,6 +171,11 @@ const ProductQuery = graphql(
   `
     query ProductQuery($entityId: Int!) {
       site {
+        settings {
+          reviews {
+            enabled
+          }
+        }
         product(entityId: $entityId) {
           entityId
           name
@@ -199,7 +204,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 StreamableProductVariantBySkuQuery = graphql(`
diff --git a/core/app/[locale]/(default)/product/[slug]/page.tsx b/core/app/[locale]/(default)/product/[slug]/page.tsx
@@ -78,7 +78,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();
@@ -535,6 +537,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,
@@ -559,12 +562,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 {
@@ -30,6 +32,7 @@ export interface ProductCardProps {
   compareLabel?: string;
   compareParamName?: string;
   product: Product;
+  reviewsEnabled?: boolean;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -55,7 +58,8 @@ export interface ProductCardProps {
  * ```
  */
 export function ProductCard({
-  product: { id, title, subtitle, badge, price, image, href, inventoryMessage },
+  product: { id, title, subtitle, badge, price, image, href, inventoryMessage, rating },
+  reviewsEnabled = false,
   colorScheme = 'light',
   className,
   showCompare = false,
@@ -149,6 +153,9 @@ export function ProductCard({
               </span>
             )}
             {price != null && <PriceLabel colorScheme={colorScheme} price={price} />}
+            {reviewsEnabled && typeof rating === 'number' && rating > 0 && (
+              <Rating rating={rating} />
+            )}
             <span
               className={clsx(
                 'block text-sm font-normal',
diff --git a/core/vibes/soul/sections/product-detail/index.tsx b/core/vibes/soul/sections/product-detail/index.tsx
@@ -25,6 +25,7 @@ interface ProductDetailProduct {
   subtitle?: string;
   badge?: string;
   rating?: Streamable<number | null>;
+  reviewsEnabled?: boolean;
   summary?: Streamable<string>;
   description?: Streamable<string | ReactNode | null>;
   accordions?: Streamable<
@@ -114,11 +115,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
@@ -26,6 +26,9 @@ const BrandPageQuery = graphql(`
`26`	`26`	`productComparisonsEnabled`
`27`	`27`	`}`
`28`	`28`	`}`
	`29`	`+ reviews {`
	`30`	`+ enabled`
	`31`	`+ }`
`29`	`32`	`}`
`30`	`33`	`}`
`31`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,9 @@ const CategoryPageQuery = graphql(`
`45`	`45`	`productComparisonsEnabled`
`46`	`46`	`}`
`47`	`47`	`}`
	`48`	`+ reviews {`
	`49`	`+ enabled`
	`50`	`+ }`
`48`	`51`	`}`
`49`	`52`	`}`
`50`	`53`	`}`
Original file line number	Diff line number	Diff line change
@@ -18,6 +18,9 @@ const SearchPageQuery = graphql(`
`18`	`18`	`productComparisonsEnabled`
`19`	`19`	`}`
`20`	`20`	`}`
	`21`	`+ reviews {`
	`22`	`+ enabled`
	`23`	`+ }`
`21`	`24`	`}`
`22`	`25`	`}`
`23`	`26`	`}`