Skip to content

fix: declare RatingSummary in section components #2707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 6 commits into from
Mar 11, 2025
Merged

fix: declare RatingSummary in section components #2707

merged 6 commits into from
Mar 11, 2025

Conversation

@artursantiago
Copy link
Collaborator

@artursantiago artursantiago commented Feb 27, 2025 •
edited
Loading

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] [2] [3]

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] [2]

Type definitions update:

  • Added RatingSummaryProps to overrides type definitions and updated SectionsOverrides to include RatingSummary component. [1] [2]

How to test it?

  • You can check the starter build on the starter preview of the branch bellow that is already using this changes:

@artursantiago artursantiago mentioned this pull request Feb 27, 2025
Open
@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 27, 2025 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

This was referenced Feb 27, 2025
Merged
Merged
@artursantiago artursantiago marked this pull request as ready for review February 27, 2025 19:25
@artursantiago artursantiago requested a review from a team as a code owner February 27, 2025 19:25
@artursantiago artursantiago requested review from hellofanny, lariciamota and renatamottam and removed request for a team February 27, 2025 19:25
@artursantiago artursantiago mentioned this pull request Mar 7, 2025
Merged
artursantiago and others added 2 commits March 11, 2025 15:09
@artursantiago @hellofanny
refactor: rename prop
1c94faf 
Co-authored-by: Fanny Chien <[email protected]>
@artursantiago @hellofanny
styles: remove comment
e1e1ef6 
Co-authored-by: Fanny Chien <[email protected]>
hellofanny
hellofanny approved these changes Mar 11, 2025
View reviewed changes
Copy link
Contributor

@hellofanny hellofanny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

I notice that was some code related to modalReview, that probably is better to address separately in the next PR.

hellofanny
hellofanny reviewed Mar 11, 2025
View reviewed changes
packages/core/src/typings/overrides.ts
}
ReviewsAndRatings: {
Section: typeof ReviewsAndRatings
// TODO: Add components
Copy link
Contributor

@hellofanny hellofanny Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is because we also need to add ReviewModal right?

@hellofanny hellofanny merged commit 66b0345 into feat/reviews-and-ratings Mar 11, 2025
4 of 6 checks passed
@hellofanny hellofanny deleted the feat/declare-rating-summary-in-section branch March 11, 2025 22:57
hellofanny added a commit that referenced this pull request Mar 13, 2025
@artursantiago @hellofanny @Guilera
feat: add review modal core structure (#2695)
f6cf920 
>⚠️ THIS PR DEPENDS ON:  ⚠️
> - <del>https://github.com/vtex/faststore/pull/2693</del> (PR was
closed because this one will suffice)
> - #2707
## What's the purpose of this pull request?

This PR integrates the `ReviewModal` component in the core package for
the Review and Ratings section.
The actual review form implementation will be handled in a separate PR
to be easy to review.

## How it works?

- Adding schema configuration in sections.json for `ReviewModal`
properties in the Headless CMS
- Creating a new `ReviewModal` component in
packages/core/src/components/reviews that will handle form logic
- Integrating the modal within the ReviewsAndRatings UI with a temporary
trigger button

## How to test it?

- Check `ReviewModal` structure in core package and its types
declarations
- Confirm that CMS-configured content is properly displayed

<!--- 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-add-review-modal-core-structure-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

[FEATURE BRANCH](#2676)

[Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=128-22351&t=zALRZSwDWuF6UrjH-4)
[SFS-2082](https://vtex-dev.atlassian.net/browse/SFS-2082)

[SFS-2082]:
https://vtex-dev.atlassian.net/browse/SFS-2082?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Fanny Chien <[email protected]>
Co-authored-by: Bruno Guilera Gutchenzo <[email protected]>
Co-authored-by: Fanny Chien <[email protected]>
artursantiago added a commit that referenced this pull request Mar 17, 2025
@artursantiago @hellofanny @Guilera
feat: add review modal core structure (#2695)
eb93ffe 
>⚠️ THIS PR DEPENDS ON:  ⚠️
> - <del>https://github.com/vtex/faststore/pull/2693</del> (PR was
closed because this one will suffice)
> - #2707

This PR integrates the `ReviewModal` component in the core package for
the Review and Ratings section.
The actual review form implementation will be handled in a separate PR
to be easy to review.

- Adding schema configuration in sections.json for `ReviewModal`
properties in the Headless CMS
- Creating a new `ReviewModal` component in
packages/core/src/components/reviews that will handle form logic
- Integrating the modal within the ReviewsAndRatings UI with a temporary
trigger button

- Check `ReviewModal` structure in core package and its types
declarations
- Confirm that CMS-configured content is properly displayed

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

[Preview](https://starter-git-feat-add-review-modal-core-structure-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. --->

[FEATURE BRANCH](#2676)

[Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=128-22351&t=zALRZSwDWuF6UrjH-4)
[SFS-2082](https://vtex-dev.atlassian.net/browse/SFS-2082)

[SFS-2082]:
https://vtex-dev.atlassian.net/browse/SFS-2082?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Fanny Chien <[email protected]>
Co-authored-by: Bruno Guilera Gutchenzo <[email protected]>
Co-authored-by: Fanny Chien <[email protected]>
artursantiago added a commit that referenced this pull request Mar 24, 2025
@artursantiago
feat: add review modal form (#2705)
5000d9e 
>⚠️ THIS PR DEPENDS ON:  ⚠️
> - #2707
> - #2695
> - #2700

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

This PR implements the "Add Review" form functionality within the core
package.

> [!NOTE]
> I also made some adjustments to global components (Rating, Textarea,
CheckboxField, InputField). I've included them in this PR for
efficiency, but can move them to separate PRs targeting main if
preferred.

## How it works?

- Review Modal Form:

- Adjust AddReviewModal.tsx in the core package with form handling,
validation, success states, and error management
Integrated 
    - Couldn't focus on checkbox field so I add a scrollIntoView for it
-
![image](https://github.com/user-attachments/assets/2d711653-40c0-4668-92b3-ffae2192b6bb)

  - Add new cms configuration in `sections.json`

- GraphQL Integration:

- Added CreateProductReview mutation to handle the submission of review
data
- Defined appropriate types and integrated mutation documents in GraphQL
schema
- Developed a useAddReview hook that leverages useLazyQuery for handling
review submission

- Global Component Enhancements:

- Rating: Added type="button" attribute so that it doesn't trigger
submit inside form
- CheckboxField: Implemented checkboxRef prop for better form control
and adjusted label sizing
  - Textarea: Adjust label sizing
- InputField: Fixed label positioning when error messages are present by
updating positioning calculation
-
![image](https://github.com/user-attachments/assets/fc20b766-14c0-430e-9e22-ebd63a42a892)


## How to test it?

- Navigate to any product page and click on "Write a Review"
- Test form validation by submitting without required fields
- Verify rating selection works properly
- Submit a complete review and confirm success state appears
- Check error handling:
  - Not logged in
  - Duplicate review

### Starters Deploy Preview


[Preview](https://starter-git-feat-add-review-modal-form-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

[FEATURE BRANCH](#2676)

[Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=128-22351&t=zALRZSwDWuF6UrjH-4)
[SFS-2082](https://vtex-dev.atlassian.net/browse/SFS-2082)
[SFS-2169](https://vtex-dev.atlassian.net/browse/SFS-2169)


![image](https://github.com/user-attachments/assets/bf0d9a2b-1f87-4c4f-857c-6cc897c8a989)


[SFS-2082]:
https://vtex-dev.atlassian.net/browse/SFS-2082?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
artursantiago added a commit that referenced this pull request Mar 25, 2025
@artursantiago @hellofanny @lucasfp13
feat: add filter and sort selects to review and ratings (#2713)
5aa815e 
>⚠️ THIS PR DEPENDS ON:  ⚠️
> - #2707

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

This pull request introduces the reviews filtering and sorting feature
to the `ReviewsAndRatings` section.

## How it works?

New components for filtering and sorting reviews:

*
[`packages/core/src/components/reviews/FilterProductReviews/FilterProductReviews.tsx`](diffhunk://#diff-a2b0bd1e2cdbfbcf09123edfce232730783b1b1137ade37ee1e695fb03455afbR1-R55):
Introduced `FilterProductReviews` component to filter reviews by rating.
*
[`packages/core/src/components/reviews/SortProductReviews/SortProductReviews.tsx`](diffhunk://#diff-c75acab76a9610dd3829f0261b68aff5951f22de317c4a8915c6794fe43d1fddR1-R52):
Introduced `SortProductReviews` component to sort reviews by different
criteria.

Updates to `ReviewList` and `ReviewsAndRatings` sections:

*
[`packages/core/src/components/reviews/ReviewList/ReviewList.tsx`](diffhunk://#diff-28fec2fd4196ed19b480f08cff6c7b8bdd0f40429f986ced88b7b42616366385R1-R54):
Added `ReviewList` component to display reviews with sorting and
filtering options.
*
[`packages/core/src/components/sections/ReviewsAndRatings/ReviewsAndRatings.tsx`](diffhunk://#diff-053f669e6d7dbf149a46ce88aa4b6e46b857eb4791642ae6e1ffd5f110357ee4L3-R22):
Updated `ReviewsAndRatings` section to include the new `ReviewList`
component and handle its props.
[[1]](diffhunk://#diff-053f669e6d7dbf149a46ce88aa4b6e46b857eb4791642ae6e1ffd5f110357ee4L3-R22)
[[2]](diffhunk://#diff-3240d26fcff836d6cf071f404185609676c1bd28d2adaad248e94c88efae1e86L1-R25)
[[3]](diffhunk://#diff-3240d26fcff836d6cf071f404185609676c1bd28d2adaad248e94c88efae1e86R35-R48)

Styling updates:

*
[`packages/core/src/components/sections/ReviewsAndRatings/section.module.scss`](diffhunk://#diff-2a282117ceeb7a5db54e1b28de0fdd683cd8bd3821db36a6b02a8924f058af5bR3-R47):
Updated styles to support the new review list and its header.

## How to test it?

- Open a PDP and see if the selects are displayed correctly
- Confirm that CMS-configured content is properly displayed

<!--- 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-filter-sort-select-cli-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

[FEATURE BRANCH](#2676)

[Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=130-32963&t=esjZ5E67A5FjirJa-4)
[SFS-2171](https://vtex-dev.atlassian.net/browse/SFS-2171)

[SFS-2171]:
https://vtex-dev.atlassian.net/browse/SFS-2171?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Fanny Chien <[email protected]>
Co-authored-by: Lucas Feijó <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hellofanny hellofanny hellofanny approved these changes

@renatamottam renatamottam Awaiting requested review from renatamottam renatamottam is a code owner automatically assigned from vtex/faststore

@lariciamota lariciamota Awaiting requested review from lariciamota lariciamota is a code owner automatically assigned from vtex/faststore

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@artursantiago @hellofanny