From ee48dfcc1dd4c6e00fa4c0fd7ad8b6e158154ac9 Mon Sep 17 00:00:00 2001
From: Matthew Volk <matt.volk@bigcommerce.com>
Date: Mon, 8 Dec 2025 14:12:40 -0600
Subject: [PATCH] refactor(reviews): refactor ReviewForm for more flexible
 rendering

---
 .changeset/metal-chicken-share.md                |  5 +++++
 core/vibes/soul/sections/reviews/index.tsx       | 14 +++++++++++---
 core/vibes/soul/sections/reviews/review-form.tsx | 10 +++-------
 3 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/metal-chicken-share.md

diff --git a/.changeset/metal-chicken-share.md b/.changeset/metal-chicken-share.md
new file mode 100644
index 0000000000..4812678b13
--- /dev/null
+++ b/.changeset/metal-chicken-share.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Refactor the `ReviewForm` to accept `trigger` prop instead of `formButtonLabel` for flexible rendering.
diff --git a/core/vibes/soul/sections/reviews/index.tsx b/core/vibes/soul/sections/reviews/index.tsx
index 740b5a3d91..f8be6fa6e4 100644
--- a/core/vibes/soul/sections/reviews/index.tsx
+++ b/core/vibes/soul/sections/reviews/index.tsx
@@ -1,4 +1,5 @@
 import { Stream, Streamable } from '@/vibes/soul/lib/streamable';
+import { Button } from '@/vibes/soul/primitives/button';
 import { CursorPagination, CursorPaginationInfo } from '@/vibes/soul/primitives/cursor-pagination';
 import { Rating } from '@/vibes/soul/primitives/rating';
 import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
@@ -67,7 +68,6 @@ export function Reviews({
           return (
             <ReviewsEmptyState
               action={action}
-              formButtonLabel={formButtonLabel}
               formEmailLabel={formEmailLabel}
               formModalTitle={formModalTitle}
               formNameLabel={formNameLabel}
@@ -124,7 +124,6 @@ export function Reviews({
                 </Stream>
                 <ReviewForm
                   action={action}
-                  formButtonLabel={formButtonLabel}
                   formEmailLabel={formEmailLabel}
                   formModalTitle={formModalTitle}
                   formNameLabel={formNameLabel}
@@ -136,6 +135,11 @@ export function Reviews({
                   streamableImages={streamableImages}
                   streamableProduct={streamableProduct}
                   streamableUser={streamableUser}
+                  trigger={
+                    <Button className="mx-auto mt-8" size="small" variant="tertiary">
+                      {formButtonLabel}
+                    </Button>
+                  }
                 />
               </>
             }
@@ -225,7 +229,6 @@ export function ReviewsEmptyState({
         <p className="text-center">{message}</p>
         <ReviewForm
           action={action}
-          formButtonLabel={formButtonLabel}
           formEmailLabel={formEmailLabel}
           formModalTitle={formModalTitle}
           formNameLabel={formNameLabel}
@@ -237,6 +240,11 @@ export function ReviewsEmptyState({
           streamableImages={streamableImages}
           streamableProduct={streamableProduct}
           streamableUser={streamableUser}
+          trigger={
+            <Button className="mx-auto mt-8" size="small" variant="tertiary">
+              {formButtonLabel}
+            </Button>
+          }
         />
       </div>
     </StickySidebarLayout>
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index 16e5e2720c..894725e505 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -27,7 +27,7 @@ export type SubmitReviewAction = Action<
 interface Props {
   productId: number;
   action: SubmitReviewAction;
-  formButtonLabel?: string;
+  trigger: React.ReactNode;
   formModalTitle?: string;
   formSubmitLabel?: string;
   formRatingLabel?: string;
@@ -43,7 +43,7 @@ interface Props {
 export const ReviewForm = ({
   productId,
   action,
-  formButtonLabel = 'Write a review',
+  trigger,
   formModalTitle = 'Write a review',
   formSubmitLabel = 'Submit',
   formRatingLabel = 'Rating',
@@ -107,11 +107,7 @@ export const ReviewForm = ({
       isOpen={isOpen}
       setOpen={setIsOpen}
       title={formModalTitle}
-      trigger={
-        <Button className="mx-auto mt-8" size="small" variant="tertiary">
-          {formButtonLabel}
-        </Button>
-      }
+      trigger={trigger}
     >
       <div className="flex flex-col gap-6 md:flex-row md:gap-8">
         <div className="shrink-0 md:w-48">