feat: create review and ratings section structure (#2663)

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

Establish the initial structure for the Review & Ratings section,
enabling new components to branch from this foundation, thereby
facilitating their testing and preview.

## How it works?

- **Directory Creation**: A new directory has been created at
`packages/core/src/components/sections/ReviewAndRatings`, following the
Overridable section structure.

- **Support Files**: Files have been added to
`packages/core/src/components/plugins/overrides` and
`packages/core/src/components/customizations/src/components` to support
overrides.

- **Product Page Integration**: The section has been integrated into the
product page rendering component located at
`packages/core/src/pages/[slug]/p.tsx`.

- **CMS Configuration**: An entry for the Review and Ratings section has
been added to the CMS JSON file at
`packages/core/cms/faststore/sections.json`. Currently, only a `title`
property is included; additional properties will be incorporated as new
components are developed.

<!--- Tell us the role of the new feature, or component, in its context.
Provide details about what you have implemented and screenshots if
applicable. --->

## How to test it

You can access the preview link and open any pdp. It already should be
able to show the reviews sections with the title `Reviews`.
If the title doesn't appear you can run `yarn cms-sync` in the
`start.store`
[branch](vtex-sites/starter.store#686)

<!--- Describe the steps with bullet points. Is there any external link
that can be used to better test it or an example? --->

### Starters Deploy Preview


[Preview](https://starter-git-feat-preview-review-ratings-section-vtex.vercel.app/)

<!--- Add a link to a deploy preview from `starter.store` with this
branch being used. --->

<!--- Tip: You can get an installable version of this branch from the
CodeSandbox generated when this PR is created. --->


## References

[Jira Task: SFS-2084](https://vtex-dev.atlassian.net/browse/SFS-2084)

packages/core/cms/faststore/sections.json

@@ -964,6 +964,21 @@
       }
     }
   },
+  {
+    "name": "ReviewsAndRatings",
+    "schema": {
+      "title": "Reviews And Ratings",
+      "description": "A section to display product reviews and ratings",
+      "type": "object",
+      "properties": {
+        "title": {
+          "title": "Title",
+          "type": "string",
+          "default": "Reviews"
+        }
+      }
+    }
+  },
   {
     "name": "CrossSellingShelf",
     "requiredScopes": ["pdp", "custom"],

packages/core/index.ts

@@ -16,6 +16,7 @@ export { default as AlertSection } from './src/components/sections/Alert'
 export { default as BannerTextSection } from './src/components/sections/BannerText'
 export { default as BreadcrumbSection } from './src/components/sections/Breadcrumb'
 export { default as CrossSellingShelfSection } from './src/components/sections/CrossSellingShelf'
+export { default as ReviewsAndRatingsSection } from './src/components/sections/ReviewsAndRatings'
 export { default as EmptyState } from './src/components/sections/EmptyState'
 export { default as HeroSection } from './src/components/sections/Hero'
 export { default as NavbarSection } from './src/components/sections/Navbar'

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

@@ -0,0 +1,6 @@
+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
+} as const

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

@@ -0,0 +1,16 @@
+import { override } from 'src/customizations/src/components/overrides/ReviewsAndRatings'
+import { override as overridePlugin } from 'src/plugins/overrides/ReviewsAndRatings'
+import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
+import ReviewsAndRatings from '.'
+
+/**
+ * This component exists to support overrides 1.0
+ *
+ * This allows users to override the default ReviewsAndRatings section present in the Headless CMS
+ */
+export const OverriddenDefaultReviewsAndRatings = getOverriddenSection({
+  ...(overridePlugin as SectionOverrideDefinitionV1<'ReviewsAndRatings'>),
+  ...(override as SectionOverrideDefinitionV1<'ReviewsAndRatings'>),
+  Section: ReviewsAndRatings,
+})

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

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+
+import ReviewsAndRatings 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
+}
+const ReviewsAndRatingsSection = ({ title }: Props) => {
+  return (
+    <Section
+      id="reviews-and-ratings"
+      className={`${styles.section} section-reviews-and-ratings layout__section`}
+    >
+      <ReviewsAndRatings title={title} />
+    </Section>
+  )
+}
+
+const OverridableReviewsAndRatings = getOverridableSection<
+  typeof ReviewsAndRatingsSection
+>(
+  'ReviewsAndRatings',
+  ReviewsAndRatingsSection,
+  ReviewsAndRatingsDefaultComponents
+)
+
+export default OverridableReviewsAndRatings

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

@@ -0,0 +1 @@
+export { default } from './ReviewsAndRatings'

packages/core/src/components/sections/ReviewsAndRatings/section.module.scss

@@ -0,0 +1,6 @@
+@layer components {
+  .section {
+    // TODO: Ajustar esses componentes para a nova section ReviewsAndRatings
+    // @import '@faststore/ui/src/components/atoms/Ratings/styles';
+  }
+}

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

@@ -0,0 +1,13 @@
+export type ReviewsAndRatingsProps = {
+  title: string
+}
+
+function ReviewsAndRatings({ title, ...otherProps }: ReviewsAndRatingsProps) {
+  return (
+    <>
+      <h2 className="text__title-section layout__content">{title}</h2>
+    </>
+  )
+}
+
+export default ReviewsAndRatings

packages/core/src/components/ui/ReviewsAndRatings/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ReviewsAndRatings'
+export type { ReviewsAndRatingsProps } from './ReviewsAndRatings'

packages/core/src/customizations/src/components/overrides/ReviewsAndRatings.tsx

@@ -0,0 +1,11 @@
+// This is an example of how it can be used on the starter.
+
+import type { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'ReviewsAndRatings' as const
+
+const override: SectionOverride = {
+  section: SECTION,
+}
+
+export { override }

packages/core/src/pages/[slug]/p.tsx

@@ -1,5 +1,5 @@
 import { isNotFoundError } from '@faststore/api'
-import type { Locator } from '@vtex/client-cms'
+import type { Locator, Section } from '@vtex/client-cms'
 import deepmerge from 'deepmerge'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 import { BreadcrumbJsonLd, NextSeo, ProductJsonLd } from 'next-seo'
@@ -17,6 +17,7 @@ import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNew
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
 import { OverriddenDefaultCrossSellingShelf as CrossSellingShelf } from 'src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf'
+import { OverriddenDefaultReviewsAndRatings as ReviewsAndRatings } from 'src/components/sections/ReviewsAndRatings/OverriddenDefaultReviewsAndRatings'
 import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
 import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
 import { OverriddenDefaultProductDetails as ProductDetails } from 'src/components/sections/ProductDetails/OverriddenDefaultProductDetails'
@@ -59,6 +60,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ProductShelf,
   ProductTiles,
   CrossSellingShelf,
+  ReviewsAndRatings,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

packages/core/src/plugins/overrides/ReviewsAndRatings.tsx

@@ -0,0 +1,3 @@
+// This is an example of how it can be used on the plugins.
+
+export { override } from 'src/customizations/src/components/overrides/ReviewsAndRatings'

packages/core/src/typings/overrides.ts

@@ -52,6 +52,7 @@ import type Alert from '../components/sections/Alert'
 import type Breadcrumb from '../components/sections/Breadcrumb'
 import type BannerText from '../components/sections/BannerText'
 import type CrossSellingShelf from '../components/sections/CrossSellingShelf'
+import type ReviewsAndRatings from '../components/sections/ReviewsAndRatings'
 import type EmptyState from '../components/sections/EmptyState'
 import type Hero from '../components/sections/Hero'
 import type ProductShelf from '../components/sections/ProductShelf'
@@ -356,6 +357,11 @@ export type SectionsOverrides = {
       >
     }
   }
+  ReviewsAndRatings: {
+    Section: typeof ReviewsAndRatings
+    // TODO: Add components
+    components: {}
+  }
   RegionBar: {
     Section: typeof RegionBar
     components: {