feat(reviews): conditionally display reviews based on display settings (#2754)

matthewvolk · web-flow · commit 4cbc124f3c63 · 2025-12-11T22:36:28.000Z
diff --git a/.changeset/cute-trees-swim.md b/.changeset/cute-trees-swim.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Conditionally display product ratings in the storefront based on `site.settings.display.showProductRating`. 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
           }
         }
+        display {
+          showProductRating
+        }
         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,7 +103,7 @@ export default async function Brand(props: Props) {
     return notFound();
   }
 
-  const reviewsEnabled = settings?.reviews.enabled ?? false;
+  const showRating = Boolean(settings?.reviews.enabled && settings.display.showProductRating);
 
   const productComparisonsEnabled =
     settings?.storefront.catalog?.productComparisonsEnabled ?? false;
@@ -221,8 +221,8 @@ export default async function Brand(props: Props) {
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
       removeLabel={t('Compare.remove')}
       resetFiltersLabel={t('FacetedSearch.resetFilters')}
-      reviewsEnabled={reviewsEnabled}
       showCompare={productComparisonsEnabled}
+      showRating={showRating}
       sortDefaultValue="featured"
       sortLabel={t('Search.title')}
       sortOptions={[
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
             }
           }
+          display {
+            showProductRating
+          }
           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,7 +113,7 @@ export default async function Category(props: Props) {
     href: path ?? '#',
   }));
 
-  const reviewsEnabled = settings?.reviews.enabled ?? false;
+  const showRating = Boolean(settings?.reviews.enabled && settings.display.showProductRating);
 
   const productComparisonsEnabled =
     settings?.storefront.catalog?.productComparisonsEnabled ?? false;
@@ -257,8 +257,8 @@ export default async function Category(props: Props) {
         rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
         removeLabel={t('Compare.remove')}
         resetFiltersLabel={t('FacetedSearch.resetFilters')}
-        reviewsEnabled={reviewsEnabled}
         showCompare={productComparisonsEnabled}
+        showRating={showRating}
         sortDefaultValue="featured"
         sortLabel={t('SortBy.sortBy')}
         sortOptions={[
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
           }
         }
+        display {
+          showProductRating
+        }
         reviews {
           enabled
         }
diff --git a/core/app/[locale]/(default)/(faceted)/search/page.tsx b/core/app/[locale]/(default)/(faceted)/search/page.tsx
@@ -78,7 +78,7 @@ export default async function Search(props: Props) {
 
   const { settings } = await getSearchPageData();
 
-  const reviewsEnabled = settings?.reviews.enabled ?? false;
+  const showRating = Boolean(settings?.reviews.enabled && settings.display.showProductRating);
 
   const productComparisonsEnabled =
     settings?.storefront.catalog?.productComparisonsEnabled ?? false;
@@ -253,8 +253,8 @@ export default async function Search(props: Props) {
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
       removeLabel={t('Compare.remove')}
       resetFiltersLabel={t('FacetedSearch.resetFilters')}
-      reviewsEnabled={reviewsEnabled}
       showCompare={productComparisonsEnabled}
+      showRating={showRating}
       sortDefaultValue="featured"
       sortLabel={t('SortBy.sortBy')}
       sortOptions={[
diff --git a/core/app/[locale]/(default)/product/[slug]/page-data.ts b/core/app/[locale]/(default)/product/[slug]/page-data.ts
@@ -175,6 +175,9 @@ const ProductQuery = graphql(
           reviews {
             enabled
           }
+          display {
+            showProductRating
+          }
         }
         product(entityId: $entityId) {
           entityId
diff --git a/core/app/[locale]/(default)/product/[slug]/page.tsx b/core/app/[locale]/(default)/product/[slug]/page.tsx
@@ -7,13 +7,14 @@ import { SearchParams } from 'nuqs/server';
 import { Stream, Streamable } from '@/vibes/soul/lib/streamable';
 import { FeaturedProductCarousel } from '@/vibes/soul/sections/featured-product-carousel';
 import { ProductDetail } from '@/vibes/soul/sections/product-detail';
-import { getSessionCustomerAccessToken } from '~/auth';
+import { auth, getSessionCustomerAccessToken } from '~/auth';
 import { pricesTransformer } from '~/data-transformers/prices-transformer';
 import { productCardTransformer } from '~/data-transformers/product-card-transformer';
 import { productOptionsTransformer } from '~/data-transformers/product-options-transformer';
 import { getPreferredCurrencyCode } from '~/lib/currency';
 
 import { addToCart } from './_actions/add-to-cart';
+import { submitReview } from './_actions/submit-review';
 import { ProductAnalyticsProvider } from './_components/product-analytics-provider';
 import { ProductSchema } from './_components/product-schema';
 import { ProductViewed } from './_components/product-viewed';
@@ -80,7 +81,8 @@ export default async function Product({ params, searchParams }: Props) {
 
   const { product: baseProduct, settings } = await getProduct(productId, customerAccessToken);
 
-  const reviewsEnabled = settings?.reviews.enabled ?? false;
+  const reviewsEnabled = Boolean(settings?.reviews.enabled && !settings.display.showProductRating);
+  const showRating = Boolean(settings?.reviews.enabled && settings.display.showProductRating);
 
   if (!baseProduct) {
     return notFound();
@@ -510,6 +512,21 @@ export default async function Product({ params, searchParams }: Props) {
     };
   });
 
+  const streamableUser = Streamable.from(async () => {
+    const session = await auth();
+    const firstName = session?.user?.firstName ?? '';
+    const lastName = session?.user?.lastName ?? '';
+
+    if (!firstName || !lastName) {
+      return { email: session?.user?.email ?? '', name: '' };
+    }
+
+    const lastInitial = lastName.charAt(0).toUpperCase();
+    const obfuscatedName = `${firstName} ${lastInitial}.`;
+
+    return { email: session?.user?.email ?? '', name: obfuscatedName };
+  });
+
   return (
     <>
       <ProductAnalyticsProvider data={streamableAnalyticsData}>
@@ -538,6 +555,7 @@ export default async function Product({ params, searchParams }: Props) {
             images: streamableImages,
             price: streamablePrices,
             reviewsEnabled,
+            showRating,
             subtitle: baseProduct.brand?.name,
             rating: baseProduct.reviewSummary.averageRating,
             accordions: streameableAccordions,
@@ -547,7 +565,9 @@ export default async function Product({ params, searchParams }: Props) {
             backorderDisplayData: streamableBackorderDisplayData,
           }}
           quantityLabel={t('ProductDetails.quantity')}
+          reviewFormAction={submitReview}
           thumbnailLabel={t('ProductDetails.thumbnail')}
+          user={streamableUser}
         />
       </ProductAnalyticsProvider>
 
@@ -562,7 +582,7 @@ export default async function Product({ params, searchParams }: Props) {
         title={t('RelatedProducts.title')}
       />
 
-      {reviewsEnabled && (
+      {showRating && (
         <Reviews
           productId={productId}
           searchParams={searchParams}
diff --git a/core/vibes/soul/primitives/product-card/index.tsx b/core/vibes/soul/primitives/product-card/index.tsx
@@ -32,7 +32,7 @@ export interface ProductCardProps {
   compareLabel?: string;
   compareParamName?: string;
   product: Product;
-  reviewsEnabled?: boolean;
+  showRating?: boolean;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -59,7 +59,7 @@ export interface ProductCardProps {
  */
 export function ProductCard({
   product: { id, title, subtitle, badge, price, image, href, inventoryMessage, rating },
-  reviewsEnabled = false,
+  showRating = false,
   colorScheme = 'light',
   className,
   showCompare = false,
@@ -153,9 +153,7 @@ export function ProductCard({
               </span>
             )}
             {price != null && <PriceLabel colorScheme={colorScheme} price={price} />}
-            {reviewsEnabled && typeof rating === 'number' && rating > 0 && (
-              <Rating rating={rating} />
-            )}
+            {showRating && 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
@@ -2,11 +2,13 @@ import { ReactNode } from 'react';
 
 import { Stream, Streamable } from '@/vibes/soul/lib/streamable';
 import { Accordion, AccordionItem } from '@/vibes/soul/primitives/accordion';
+import { AnimatedUnderline } from '@/vibes/soul/primitives/animated-underline';
 import { Price, PriceLabel } from '@/vibes/soul/primitives/price-label';
 import { Rating } from '@/vibes/soul/primitives/rating';
 import * as Skeleton from '@/vibes/soul/primitives/skeleton';
 import { type Breadcrumb, Breadcrumbs } from '@/vibes/soul/sections/breadcrumbs';
 import { ProductGallery } from '@/vibes/soul/sections/product-detail/product-gallery';
+import { ReviewForm, SubmitReviewAction } from '@/vibes/soul/sections/reviews/review-form';
 
 import {
   BackorderDisplayData,
@@ -26,6 +28,7 @@ interface ProductDetailProduct {
   badge?: string;
   rating?: Streamable<number | null>;
   reviewsEnabled?: boolean;
+  showRating?: boolean;
   summary?: Streamable<string>;
   description?: Streamable<string | ReactNode | null>;
   accordions?: Streamable<
@@ -55,6 +58,15 @@ export interface ProductDetailProps<F extends Field> {
   thumbnailLabel?: string;
   additionalInformationTitle?: string;
   additionalActions?: ReactNode;
+  reviewFormEmailLabel?: string;
+  reviewFormModalTitle?: string;
+  reviewFormNameLabel?: string;
+  reviewFormRatingLabel?: string;
+  reviewFormReviewLabel?: string;
+  reviewFormSubmitLabel?: string;
+  reviewFormTitleLabel?: string;
+  reviewFormAction: SubmitReviewAction;
+  user: Streamable<{ email: string; name: string }>;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -87,6 +99,15 @@ export function ProductDetail<F extends Field>({
   thumbnailLabel,
   additionalInformationTitle = 'Additional information',
   additionalActions,
+  reviewFormEmailLabel,
+  reviewFormModalTitle,
+  reviewFormNameLabel,
+  reviewFormRatingLabel,
+  reviewFormReviewLabel,
+  reviewFormSubmitLabel,
+  reviewFormTitleLabel,
+  reviewFormAction,
+  user,
 }: ProductDetailProps<F>) {
   return (
     <section className="@container">
@@ -116,6 +137,29 @@ export function ProductDetail<F extends Field>({
                     {product.title}
                   </h1>
                   {product.reviewsEnabled && (
+                    <div className="group/product-rating">
+                      <ReviewForm
+                        action={reviewFormAction}
+                        formEmailLabel={reviewFormEmailLabel}
+                        formModalTitle={reviewFormModalTitle}
+                        formNameLabel={reviewFormNameLabel}
+                        formRatingLabel={reviewFormRatingLabel}
+                        formReviewLabel={reviewFormReviewLabel}
+                        formSubmitLabel={reviewFormSubmitLabel}
+                        formTitleLabel={reviewFormTitleLabel}
+                        productId={Number(product.id)}
+                        streamableImages={product.images}
+                        streamableProduct={{ name: product.title }}
+                        streamableUser={user}
+                        trigger={
+                          <AnimatedUnderline className="cursor-pointer">
+                            Write a review
+                          </AnimatedUnderline>
+                        }
+                      />
+                    </div>
+                  )}
+                  {product.showRating && (
                     <div className="group/product-rating">
                       <Stream fallback={<RatingSkeleton />} value={product.rating}>
                         {(rating) => <Rating rating={rating ?? 0} />}
diff --git a/core/vibes/soul/sections/product-list/index.tsx b/core/vibes/soul/sections/product-list/index.tsx
@@ -11,7 +11,7 @@ import * as Skeleton from '@/vibes/soul/primitives/skeleton';
 
 interface ProductListProps {
   products: Streamable<Product[]>;
-  reviewsEnabled?: boolean;
+  showRating?: boolean;
   compareProducts?: Streamable<Product[]>;
   className?: string;
   colorScheme?: 'light' | 'dark';
@@ -46,7 +46,7 @@ interface ProductListProps {
  */
 export function ProductList({
   products: streamableProducts,
-  reviewsEnabled,
+  showRating,
   className,
   colorScheme = 'light',
   aspectRatio = '5:6',
@@ -109,8 +109,8 @@ 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}
+                    showRating={showRating}
                   />
                 ))}
               </div>
diff --git a/core/vibes/soul/sections/products-list-section/index.tsx b/core/vibes/soul/sections/products-list-section/index.tsx
@@ -30,7 +30,7 @@ interface Props {
   filterLabel?: string;
   filtersPanelTitle?: Streamable<string>;
   resetFiltersLabel?: Streamable<string>;
-  reviewsEnabled?: boolean;
+  showRating?: boolean;
   rangeFilterApplyLabel?: Streamable<string>;
   sortLabel?: Streamable<string | null>;
   sortPlaceholder?: Streamable<string | null>;
@@ -50,7 +50,7 @@ export function ProductsListSection({
   title = 'Products',
   totalCount,
   products,
-  reviewsEnabled,
+  showRating,
   compareProducts,
   sortOptions: streamableSortOptions,
   sortDefaultValue,
@@ -173,8 +173,8 @@ export function ProductsListSection({
               placeholderCount={placeholderCount}
               products={products}
               removeLabel={removeLabel}
-              reviewsEnabled={reviewsEnabled}
               showCompare={showCompare}
+              showRating={showRating}
             />
 
             {paginationInfo && <CursorPagination info={paginationInfo} />}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@bigcommerce/catalyst-core": minor
 +---
++
 +Conditionally display product ratings in the storefront based on `site.settings.display.showProductRating`. 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`	`+ display {`
	`30`	`+ showProductRating`
	`31`	`+ }`
`29`	`32`	`reviews {`
`30`	`33`	`enabled`
`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`	`+ display {`
	`49`	`+ showProductRating`
	`50`	`+ }`
`48`	`51`	`reviews {`
`49`	`52`	`enabled`
`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`	`+ display {`
	`22`	`+ showProductRating`
	`23`	`+ }`
`21`	`24`	`reviews {`
`22`	`25`	`enabled`
`23`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -175,6 +175,9 @@ const ProductQuery = graphql(`
`175`	`175`	`reviews {`
`176`	`176`	`enabled`
`177`	`177`	`}`
	`178`	`+ display {`
	`179`	`+ showProductRating`
	`180`	`+ }`
`178`	`181`	`}`
`179`	`182`	`product(entityId: $entityId) {`
`180`	`183`	`entityId`