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

Author: matthewvolk

.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.

core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts

@@ -21,6 +21,9 @@ const BrandPageQuery = graphql(`
             productComparisonsEnabled
           }
         }
+        display {
+          showProductRating
+        }
         reviews {
           enabled
         }

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;
@@ -223,7 +223,7 @@ export default async function Brand(props: Props) {
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
       removeLabel={t('Compare.remove')}
       resetFiltersLabel={t('FacetedSearch.resetFilters')}
-      reviewsEnabled={reviewsEnabled}
+      reviewsEnabled={showRating}
       showCompare={productComparisonsEnabled}
       sortDefaultValue="featured"
       sortLabel={t('Search.title')}

core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts

@@ -40,6 +40,9 @@ const CategoryPageQuery = graphql(
               productComparisonsEnabled
             }
           }
+          display {
+            showProductRating
+          }
           reviews {
             enabled
           }

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;
@@ -259,7 +259,7 @@ export default async function Category(props: Props) {
         rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
         removeLabel={t('Compare.remove')}
         resetFiltersLabel={t('FacetedSearch.resetFilters')}
-        reviewsEnabled={reviewsEnabled}
+        reviewsEnabled={showRating}
         showCompare={productComparisonsEnabled}
         sortDefaultValue="featured"
         sortLabel={t('SortBy.sortBy')}

core/app/[locale]/(default)/(faceted)/search/page-data.ts

@@ -13,6 +13,9 @@ const SearchPageQuery = graphql(`
             productComparisonsEnabled
           }
         }
+        display {
+          showProductRating
+        }
         reviews {
           enabled
         }

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;
@@ -255,7 +255,7 @@ export default async function Search(props: Props) {
       rangeFilterApplyLabel={t('FacetedSearch.Range.apply')}
       removeLabel={t('Compare.remove')}
       resetFiltersLabel={t('FacetedSearch.resetFilters')}
-      reviewsEnabled={reviewsEnabled}
+      reviewsEnabled={showRating}
       showCompare={productComparisonsEnabled}
       sortDefaultValue="featured"
       sortLabel={t('SortBy.sortBy')}

core/app/[locale]/(default)/product/[slug]/page-data.ts

@@ -174,6 +174,9 @@ const ProductQuery = graphql(
           reviews {
             enabled
           }
+          display {
+            showProductRating
+          }
         }
         product(entityId: $entityId) {
           entityId

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';
@@ -79,7 +80,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();
@@ -339,6 +341,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}>
@@ -367,6 +384,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,
@@ -375,7 +393,9 @@ export default async function Product({ params, searchParams }: Props) {
             stockLevelMessage: streamableStockLevelMessage,
           }}
           quantityLabel={t('ProductDetails.quantity')}
+          reviewFormAction={submitReview}
           thumbnailLabel={t('ProductDetails.thumbnail')}
+          user={streamableUser}
         />
       </ProductAnalyticsProvider>
 
@@ -390,7 +410,7 @@ export default async function Product({ params, searchParams }: Props) {
         title={t('RelatedProducts.title')}
       />
 
-      {reviewsEnabled && (
+      {showRating && (
         <Reviews
           productId={productId}
           searchParams={searchParams}

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 { ProductDetailForm, ProductDetailFormAction } from './product-detail-form';
 import { Field } from './schema';
@@ -21,6 +23,7 @@ interface ProductDetailProduct {
   badge?: string;
   rating?: Streamable<number | null>;
   reviewsEnabled?: boolean;
+  showRating?: boolean;
   summary?: Streamable<string>;
   description?: Streamable<string | ReactNode | null>;
   accordions?: Streamable<
@@ -49,6 +52,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
@@ -81,6 +93,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">
@@ -110,6 +131,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} />}