refactor(reviews): refactor ReviewForm for more flexible rendering (#2753)

Author: matthewvolk

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

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>

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