feat: reviews and ratings #2676
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 13, 2025
Merged
Guilera
force-pushed
the
feat/reviews-and-ratings
branch
2 times, most recently
from
9c2cebb to
736e0f8
Compare
## What's the purpose of this pull request?
To add the Reviews & Ratings API integration through commerce client
## How it works?
Adds 3 new calls to the client:
- client.commerce.rating (retrieves rating information for a specific
product)
- client.commerce.reviews.list (retrieves all reviews for a specific
product)
- client.commerce.reviews.create (creates a new review for a specific
product)
## How to test it?
Creates a `.ts` file on the root folder of the project and adds the
following code:
```typescript
import { getContextFactory, Options } from "./packages/api/src/platforms/vtex";
const apiOptions = {
platform: 'vtex',
account: 'storeframework',
locale: 'en-US',
environment: 'vtexcommercestable',
channel: '{"salesChannel":"1"}',
showSponsored: false,
} as Options
const apiCtx = getContextFactory(apiOptions)
const commerceApiClient = apiCtx({}).clients.commerce
```
After that you can use the `commerceApiClient` to call the new methods.
To run the file locally use the following command:
```bash
npx tsx
```
## References
[JIRA Task: SFS-2092](https://vtex-dev.atlassian.net/browse/SFS-2092)
[Reviews & Ratings API
Doc](https://developers.vtex.com/docs/api-reference/reviews-and-ratings-api#overview)
## Checklist
**PR Description**
- [ ] Added Rating types
- [ ] Added Reviews types
- [ ] Incremented ProductSearchReviewResult
- [ ] Created adapatObject function on `utils`
- [ ] Created camelToSnakeCase function on `utils`
## What's the purpose of this pull request? To add reviews query resolver on graphQL ## How it works? It defines a few new types and adds a new query resolver called: `reviews` wich retrieves an array of reviews for a specific product. For input we have: - productId (`required`) - after and first for pagination, (both are `optional`) - sort (`optional`) - rating (`optional`)(for filtering) ## How to test it? run the api graphql server locally with the following command: ```bash yarn dev:server ``` and make a query call ## References [JIRA TASK: SFS-2094](https://vtex-dev.atlassian.net/browse/SFS-2094)   ## Checklist <em>You may erase this after checking them all 😉</em> **PR Description** - [ ] Adds graphQL `Reviews` types - [ ] Creates a new query resolver for `Reviews`
>⚠️ THIS PR DEPENDS ON [PR#2647](#2647)⚠️ ## What's the purpose of this pull request? To add a reviews mutation resolver on graphQL for allowing a new review to be created ## How it works? It defines a few new types and adds a new mutation resolver called: `createProductReview` ## How to test it? run the api graphql server locally with the following command: ```bash yarn dev:server ``` and make a query call ## References [JIRA TASK: SFS-2095](https://vtex-dev.atlassian.net/browse/SFS-2095) [API Reviews Docs](https://developers.vtex.com/docs/api-reference/reviews-and-ratings-api#post-/reviews-and-ratings/api/review) ## Checklist <em>You may erase this after checking them all 😉</em> **PR Description** - [ ] Adds graphQL types - [ ] Creates a new mutation resolver for `Reviews`
## What's the purpose of this pull request? To add product rating resolvers on graphQL ## How it works? It defines a new type called: `StoreProductRating` and increments the query resolver for `product` and for `searchResult` It was necessary to adapt the `EnhancedSku` type and also to adds a rating callback to the searchResult's promise resolution ## How to test it? run the api graphql server locally with the following command: ```bash yarn dev:server ``` and make a query call ## References [JIRA Task: SFS-2093](https://vtex-dev.atlassian.net/browse/SFS-2093) ## Checklist <em>You may erase this after checking them all 😉</em> **PR Description** - [ ] Adds graphQL Rating type - [ ] Increments `product` resolver - [ ] Increments `searchResult` resolver
## 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)
## What's the purpose of this pull request? To add rating stars to existing components: - `<ProductCardContent/>` - `<ProductTitle/>` ## How it works? If the feature flag for reviews and ratings, defined at `discovery.config`, it's turned on, then everywhere a `<ProductCard/>` is used then it will display the product star rating ## How to test it? [preview](https://starter-git-feat-basic-rating-display-vtex.vercel.app/) ## References [JIRA TASK: SFS-2063](https://vtex-dev.atlassian.net/browse/SFS-2063) [JIRA TASK: SFS-2065](https://vtex-dev.atlassian.net/browse/SFS-2065)     ## Checklist <em>You may erase this after checking them all 😉</em> **PR Description** - [ ] Displays rating at `Just Arrived` - [ ] Displays rating at `Most Wanted` - [ ] Displays rating at `Deals & Promotions` - [ ] Displays rating at `Product Details` - [ ] Displays rating at `Product Gallery`
Guilera
force-pushed
the
feat/reviews-and-ratings
branch
from
cc15cdd to
33db057
Compare
## What's the purpose of this pull request? To retrieves the rating distribution ## How it works? - increments the api client to retrieves the rating distribution - improves graphQL resolvers with rating distribution >[!IMPORTANT] > The percentage distribution must be in integers. > Here’s the issue: The original percentages might not add up exactly to 100% because, when rounding, small errors can accumulate. >For example, if you have 27.5% and round it to 28%, you’ve added 0.5% more than the actual value. If you repeat this rounding with multiple percentages, you may end up with a total that’s slightly over or under 100%. >If the sum of the percentages is not exactly 100%, the best approach is to adjust the value of the largest percentage > >If the sum is 99%: Distribute the remaining 1% to the most frequent score or to the higher scores > >If the sum is 101%: Reduce the largest percentage by 1% > >This process ensures that the sum of the percentages is always 100%, keeping the distribution as realistic as possible." ## References [FEATURE BRANCH](#2676) [JIRA SFS-2148](https://vtex-dev.atlassian.net/browse/SFS-2148)
## What's the purpose of this pull request? - This pull request adds the new molecule ReviewCard component. ## How does it work? - The ReviewCard will display the following information: - User's name - Verified user (boolean) - Review date - Review title and text - "Read more" and "Read less" options - Tooltip (displayed only for verified users when hovering over the verified icon next to the name) - The card must be **responsive** and rearrange itself for both desktop and mobile/tablet views. - Compose components were utilized to create the **ReviewAuthor** and **ReviewDate** components. - This component will be used in the listing of reviews for a product in the new **Reviews and Ratings** section. ## How to test it? <!--- 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-card-custom-section-vtex.vercel.app/review-and-ratings-playground) <!--- 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-2071](https://vtex-dev.atlassian.net/browse/SFS-2071) [Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=131-64429&t=0rv1XYm6XsgBeDwA-4)   --------- Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Pedro Soares <[email protected]>
hellofanny
reviewed
Feb 20, 2025
| @@ -0,0 +1,143 @@ | |||
| import React, { forwardRef, useEffect, useRef, useState } from 'react' | |||
There was a problem hiding this comment.
🎗️ ask for doc request when merging the review and rating feature.
## What's the purpose of this pull request? **Adds the number of reviews** next to the **Rating** component in the **ProductTitle**. The review count, as well as the rating, should only be visible if the corresponding flag in the **discovery.config** is enabled in the code. ## How it works? The following props have been added to **ProductTitle**: - **reviewsCount?**: The amount of reviews for the product. - **reviewsSectionId?**: The ID of the reviews section to link to. - **noReviewsText?**: Default text for "No reviews yet." - **reviewsCountText?**: Default text for "X reviews." The review count text should be a link to the reviews section, which will be located further down on the product page. This link will receive the section ID through the **reviewsSectionId** prop. The labels for the text can also be customized via props, but by default, they will be "No reviews yet" and "X reviews." ## How to test it? You can access the preview link and open any pdp. It already should be able to show the reviews count for the product. If the count label don't appear you can run `yarn cms-sync` in the `start.store` [branch](vtex-sites/starter.store#685) <!--- 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-product-title-count-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-2064](https://vtex-dev.atlassian.net/browse/SFS-2064) [Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=130-32961&t=sKkz60J8JEjxL8m4-4)   --------- Co-authored-by: gutchenzo <[email protected]> Co-authored-by: Larícia Mota <[email protected]> Co-authored-by: Fanny Chien <[email protected]>
hellofanny
reviewed
Feb 20, 2025
| @@ -26,9 +26,33 @@ export interface ProductTitleProps | |||
| */ | |||
| refNumber?: string | |||
| /** | |||
| * The current value of the rating, a number from 0 to 5. | |||
| * Object containing the rating value and reviews count | |||
There was a problem hiding this comment.
🎗️ ask doc request when merging the review and rating feature.
(updates ProductTitle docs)
lariciamota
reviewed
Feb 20, 2025
| @@ -218,6 +226,15 @@ function ProductDetails({ | |||
| ) | |||
| } | |||
| refNumber={showRefNumber && productId} | |||
| {...(apiConfig.reviewsAndRatings && { | |||
| reviewsAndRating: { | |||
There was a problem hiding this comment.
suggestion: adding the "s" because I think we're using the term "reviews and ratings" everywhere else, right?
Suggested change
| reviewsAndRating: { | |
| reviewsAndRatings: { |
lariciamota
reviewed
Feb 20, 2025
Comment on lines
+98
to
+102
| {reviewsCount === 0 && `(${noReviewsText})`} | ||
| {reviewsCount === 1 && | ||
| `(${reviewsCount} ${singleReviewText})`} | ||
| {reviewsCount > 1 && | ||
| `(${reviewsCount} ${multipleReviewsText})`} |
There was a problem hiding this comment.
Suggested change
| {reviewsCount === 0 && `(${noReviewsText})`} | |
| {reviewsCount === 1 && | |
| `(${reviewsCount} ${singleReviewText})`} | |
| {reviewsCount > 1 && | |
| `(${reviewsCount} ${multipleReviewsText})`} | |
| ( | |
| {reviewsCount === 0 | |
| ? noReviewsText | |
| : `${reviewsCount} ${reviewsCount === 1 ? singleReviewText : multipleReviewsText}`} | |
| ) |
This was referenced Feb 21, 2025
## What's the purpose of this pull request? To add the Rating Summary component ## How it works? The component is responsible for: - display the current average rating of the product - display the number of reviews of the product - display the rating distribution of the product - to have a button to open the modal to write a review (current not integrated, it's just emit an alert. It's depends on another task) >[!IMPORTANT] > If the product has no reviews, the component should display a message saying that there are no reviews yet. Both the text from the button and the text from number of reviews changes when there isn't any review yet. >[!IMPORTANT] > Plural and singular cases for the text label of the rating counter must be handled > [!IMPORTANT] > The component shouldn't be displayed if the product has no reviews and the user is not on desktop ### Starters Deploy Preview [PREVIEW](https://starter-git-feat-rating-summary-vtex.vercel.app/) ## References [FEATURE BRANCH](#2676) [JIRA SFS-2166](https://vtex-dev.atlassian.net/browse/SFS-2166) [JIRA SFS-2167](https://vtex-dev.atlassian.net/browse/SFS-2167) [JIRA SFS-2069](https://vtex-dev.atlassian.net/browse/SFS-2069)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's the purpose of this pull request?
This is a feature branch for Reviews & Ratings
References
JIRA EPIC
API Doc
FIGMA
🔗 Related Package PRs
API
FRONT
🧪 How to Test