fix: declare RatingSummary in section components (#2707)

## What's the purpose of this pull request?

This pull request includes some changes to the `RatingSummary` component
and its integration within the `ReviewsAndRatings` section, like adding
a callback for the create review button, dynamically importing the
`RatingSummary` component, and updating the `ReviewsAndRatings` section
to use the new properties and overrides.

## How it works?

Enhancements to `RatingSummary` component:

* Added `onCreateReviewClick` callback property to `RatingSummaryProps`
to handle create review button clicks.
[[1]](diffhunk://#diff-3842b6542c4617b9089bcfe95aae46869139ddb93e8dcd66334f2e63bea0f669R43-R46)
[[2]](diffhunk://#diff-3842b6542c4617b9089bcfe95aae46869139ddb93e8dcd66334f2e63bea0f669R96)
[[3]](diffhunk://#diff-3842b6542c4617b9089bcfe95aae46869139ddb93e8dcd66334f2e63bea0f669L110-R115)

Integration of `RatingSummary` in `ReviewsAndRatings` section:

* Dynamically imported `RatingSummary` component in
`ReviewsAndRatingsDefaultComponents`.
* Updated `ReviewsAndRatingsSection` to pass new properties
(`ratingSummary`, `addReviewModal`) to `ReviewsAndRatings` component.
* Modified `ReviewsAndRatings` component to accept and use new
properties (`ratingSummary`, `addReviewModal`) and to use the overridden
`RatingSummary` component.
[[1]](diffhunk://#diff-3240d26fcff836d6cf071f404185609676c1bd28d2adaad248e94c88efae1e86R4-R27)
[[2]](diffhunk://#diff-3240d26fcff836d6cf071f404185609676c1bd28d2adaad248e94c88efae1e86L21-R45)

Type definitions update:

* Added `RatingSummaryProps` to overrides type definitions and updated
`SectionsOverrides` to include `RatingSummary` component.
[[1]](diffhunk://#diff-493fb3077e5ff0ebee6d765533eda8dd478cbb7ef439d8fbc526fd9bed7daa7cR45)
[[2]](diffhunk://#diff-493fb3077e5ff0ebee6d765533eda8dd478cbb7ef439d8fbc526fd9bed7daa7cL363-R369)

## How to test it?

- You can check the starter build on the starter preview of the branch
bellow that is already using this changes:
> - #2695

---------

Co-authored-by: Fanny Chien <[email protected]>

Author: artursantiago

packages/components/src/organisms/RatingSummary/RatingSummary.tsx

@@ -40,6 +40,10 @@ export interface RatingSummaryProps extends HTMLAttributes<HTMLDivElement> {
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
+  /**
+   * Callback to be called when the create review button is clicked.
+   */
+  onCreateReviewClick?: () => void
 }
 
 const RatingSummaryHeader = ({
@@ -89,6 +93,7 @@ export const RatingSummary = forwardRef<HTMLDivElement, RatingSummaryProps>(
         } = {},
       } = {},
       testId = 'fs-rating-summary',
+      onCreateReviewClick,
       ...props
     },
     ref
@@ -107,10 +112,7 @@ export const RatingSummary = forwardRef<HTMLDivElement, RatingSummaryProps>(
           singleReviewText={ratingCounterSingleReviewText}
           multipleReviewsText={ratingCounterMultipleReviewsText}
         />
-        <Button
-          variant="secondary"
-          onClick={() => alert('Write a review button clicked!')}
-        >
+        <Button variant="secondary" onClick={onCreateReviewClick}>
           {buttonText}
         </Button>
         {totalCount > 0 && <RatingDistribution distribution={distribution} />}

packages/core/src/components/sections/ReviewsAndRatings/DefaultComponents.ts

@@ -1,6 +1,10 @@
+import dynamic from 'next/dynamic'
+
+const UIRatingSummary = dynamic(() =>
+  /* webpackChunkName: "UIRatingSummary" */
+  import('@faststore/ui').then((module) => module.RatingSummary)
+)
+
 export const ReviewsAndRatingsDefaultComponents = {
-  // TODO: Update this with the components that will be used in ReviewsAndRatings section
-  // Olhar o packages/core/src/components/sections/ProductGallery/DefaultComponents.ts
-  // ou o packages/core/src/components/sections/ProductShelf/DefaultComponents.ts
-  // para se basear
+  RatingSummary: UIRatingSummary,
 } as const

packages/core/src/components/sections/ReviewsAndRatings/ReviewsAndRatings.tsx

@@ -1,21 +1,24 @@
 import { useMemo } from 'react'
 
-import ReviewsAndRatings from '../../ui/ReviewsAndRatings'
+import ReviewsAndRatings, {
+  type ReviewsAndRatingsProps,
+} from '../../ui/ReviewsAndRatings'
 import styles from '../ReviewsAndRatings/section.module.scss'
 import Section from '../Section'
 import { ReviewsAndRatingsDefaultComponents } from './DefaultComponents'
 import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 interface Props {
-  title: string
+  title: ReviewsAndRatingsProps['title']
+  ratingSummary: ReviewsAndRatingsProps['ratingSummary']
 }
-const ReviewsAndRatingsSection = ({ title }: Props) => {
+const ReviewsAndRatingsSection = (props: Props) => {
   return (
     <Section
       id="reviews-and-ratings"
       className={`${styles.section} section-reviews-and-ratings layout__section`}
     >
-      <ReviewsAndRatings title={title} />
+      <ReviewsAndRatings {...props} />
     </Section>
   )
 }

packages/core/src/components/ui/ReviewsAndRatings/ReviewsAndRatings.tsx

@@ -1,13 +1,19 @@
-import { RatingSummary } from '@faststore/ui'
 import { usePDP } from 'src/sdk/overrides/PageProvider'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
+import type { RatingSummaryProps } from '@faststore/components'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 export type ReviewsAndRatingsProps = {
   title: string
+  ratingSummary: {
+    ratingCounter: RatingSummaryProps['textLabels']['ratingCounter']
+    createReviewButton: RatingSummaryProps['textLabels']['createReviewButton']
+  }
 }
 
-function ReviewsAndRatings({ title, ...otherProps }: ReviewsAndRatingsProps) {
+function ReviewsAndRatings({ title, ratingSummary }: ReviewsAndRatingsProps) {
   const context = usePDP()
+  const { RatingSummary } = useOverrideComponents<'ReviewsAndRatings'>()
   const { isDesktop } = useScreenResize()
 
   const rating = context?.data?.product?.rating
@@ -18,7 +24,14 @@ function ReviewsAndRatings({ title, ...otherProps }: ReviewsAndRatingsProps) {
         <h2 className="text__title-section layout__content">{title}</h2>
         <div data-fs-content>
           {(isDesktop || rating?.totalCount > 0) && (
-            <RatingSummary {...rating} {...otherProps} />
+            <RatingSummary.Component
+              {...RatingSummary.props}
+              textLabels={{ ...ratingSummary }}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              {...rating}
+              onCreateReviewClick={() => alert('Create review')}
+            />
           )}
         </div>
       </>

packages/core/src/typings/overrides.ts

@@ -42,6 +42,7 @@ import type {
   SKUMatrixProps,
   SKUMatrixTriggerProps,
   SKUMatrixSidebarProps,
+  RatingSummaryProps,
 } from '@faststore/ui'
 
 import type {
@@ -360,7 +361,12 @@ export type SectionsOverrides = {
   ReviewsAndRatings: {
     Section: typeof ReviewsAndRatings
     // TODO: Add components
-    components: {}
+    components: {
+      RatingSummary: ComponentOverrideDefinition<
+        RatingSummaryProps,
+        RatingSummaryProps
+      >
+    }
   }
   RegionBar: {
     Section: typeof RegionBar