Skip to content

feat: add review modal form #2705

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 21 commits into from
Mar 24, 2025
Merged

feat: add review modal form #2705

merged 21 commits into from
Mar 24, 2025

Conversation

@artursantiago
Copy link
Collaborator

@artursantiago artursantiago commented Feb 27, 2025 •
edited
Loading

⚠️ THIS PR DEPENDS ON: ⚠️

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

    • 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

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

References

FEATURE BRANCH
Figma
SFS-2082
SFS-2169

image

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

@artursantiago artursantiago mentioned this pull request Feb 27, 2025
Open
@artursantiago artursantiago force-pushed the feat/add-review-modal-form branch 2 times, most recently from 4094797 to b0bbabc Compare February 27, 2025 18:58
@artursantiago artursantiago marked this pull request as ready for review February 27, 2025 19:19
@artursantiago artursantiago requested a review from a team as a code owner February 27, 2025 19:19
@artursantiago artursantiago requested review from eduardoformiga and hellofanny and removed request for a team February 27, 2025 19:19
@artursantiago artursantiago force-pushed the feat/add-review-modal-form branch 2 times, most recently from f086d3d to ea69a95 Compare March 12, 2025 17:14
@artursantiago
feat: create product thumbnail component
b02410d
@artursantiago
fix: add data-attribute
6487abe
@artursantiago
feat: use children instead of title
c4c9e1a
@artursantiago
style: add spaces to improve readability
6815f62
@artursantiago
feat: remove overflow hidden
5cb36a0
@artursantiago
refactor(ProductThumbnail): move it inside the ReviewModal
bf05bee
@artursantiago
feat(AddReviewModal): create composable AddReviewModal component
385a7ee
@artursantiago
fix: adjust global components
c499dfa
@artursantiago
feat: add create product review types to gql generated
b18feef
@artursantiago
feat: create hook useAddReview
37f27e0
@artursantiago
feat: add addReviewModal cms settings
c3a45d9
@artursantiago
feat: add utils function isUUID
9166248
@artursantiago
feat: create add review modal form
c1ba945
@artursantiago
feat: passing product to add review modal
e8f95de
@artursantiago
feat: add default values to modal
2a5fee0
@artursantiago
feat(ReviewsAndRatings): adjust to use ReviewModal and ProductThumbna…
3c9efe0 
…il inside the packages/core
@artursantiago
feat(ReviewModal): set label props as optional
ac54c87
@artursantiago
fix: review modal imports
637acd2
@artursantiago artursantiago force-pushed the feat/add-review-modal-form branch from ea69a95 to 637acd2 Compare March 14, 2025 15:41
@artursantiago artursantiago mentioned this pull request Mar 18, 2025
Merged
lucasfp13
lucasfp13 reviewed Mar 20, 2025
View reviewed changes
Copy link
Contributor

@lucasfp13 lucasfp13 left a comment

Choose a reason for hiding this comment

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

Raised some discussions, I'm open to talk about them 🤝

hellofanny
hellofanny reviewed Mar 24, 2025
View reviewed changes
packages/core/src/components/reviews/ReviewModal/ReviewModalForm.tsx
// Handle special scrolling for certain fields
if (
firstInvalidField === 'privacyPolicy' ||
firstInvalidField === 'rating'
Copy link
Contributor

@hellofanny hellofanny Mar 24, 2025

Choose a reason for hiding this comment

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

question: out of curiosity when is this scenario? 🤔

Copy link
Collaborator Author

@artursantiago artursantiago Mar 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

In these cases, focusing on the field (when the user doesn't fill the field and click submit)doesn't trigger the native scrolling behavior, so I'm handling it with JavaScript.

hellofanny
hellofanny approved these changes Mar 24, 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

image image

I've submitted a review previously and worked as expected with the success modal. But when I tried again I couldn't submitted so I don't have the print.

I noticed this issue in the textfield label(maybe we could add a white bg in the label). Let's address this issue in another task/PR.
image

@artursantiago artursantiago merged commit 5000d9e into feat/reviews-and-ratings Mar 24, 2025
4 of 6 checks passed
@artursantiago artursantiago deleted the feat/add-review-modal-form branch March 24, 2025 19:06
@hellofanny
Copy link
Contributor

hellofanny commented Mar 24, 2025

I've created a task to address the TextFieldAre issue.

artursantiago added a commit that referenced this pull request Mar 28, 2025
@artursantiago @hellofanny
feat: create review list (#2724)
31313fd 
>⚠️ THIS PR DEPENDS ON:  ⚠️
> - #2705
> - #2713

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

This PR adds the `ReviewList` with its listing functionality, loading
state, filters, and sorting.

## How it works?

- By default, the list will display 6 reviews. If more reviews are
available, a "Load More" button will appear. Clicking it will load 6
additional reviews at a time.
- If there are no reviews for the product, a message will be displayed
along with a button to open the ReviewModal.
- If a filter is applied but no reviews match the selected criteria, a
different message will appear with a button to reset the filters.

## How to test it?

- Test scenarios where reviews exist and where they do not.
- Test cases with more than 6 reviews and fewer than 6 reviews.
- Apply filters that result in no matching reviews.
- Verify that sorting works correctly.

### Starters Deploy Preview

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

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

## References

[JIRA SFS-2072](https://vtex-dev.atlassian.net/browse/SFS-2072)

[Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=130-32955&t=5KOdS0Qx4MBzhrNq-4)
[FEATURE BRANCH](#2676)


![image](https://github.com/user-attachments/assets/87eed9ef-9250-4191-b610-33377e06b8fa)

![image](https://github.com/user-attachments/assets/84ad9ab5-1dd5-4245-8d6e-8aa2f11ddec3)

![image](https://github.com/user-attachments/assets/ec4a4715-7df4-4750-ada4-aeebcc12fbb6)

![image](https://github.com/user-attachments/assets/1fe1c002-333c-4db7-9e41-b6866023e39c)

---------

Co-authored-by: Fanny Chien <[email protected]>
@lemagnetic lemagnetic mentioned this pull request Oct 23, 2025
Merged
matheusps pushed a commit that referenced this pull request Oct 30, 2025
@lemagnetic
fix: add background color to TextareaField label (#3079)
9e5a64d 
## What's the purpose of this pull request?

This PR fixes a visual bug in the TextareaField component where long
text would appear underneath the floating label during scroll, making it
difficult to read. The issue was identified during the review of [PR
#2705](#2705 (review)).

Additionally, comprehensive Storybook documentation was added to
showcase all TextareaField variations and use cases.


https://github.com/user-attachments/assets/a86cd4df-e286-40f4-82b0-271a8bc66a26




## How it works?

**Bug Fix:**
- Added `--fs-textarea-field-label-background-color` CSS variable to
`packages/ui/src/components/molecules/TextareaField/styles.scss`
- Set default value to neutral-0 (white) to prevent text from showing
through the label
- When the textarea content is long and the user scrolls, the label now
has an opaque background, preventing text overlap

## How to test it?

**Test the scroll bug fix:**

From the project root:
```bash
pnpm --filter "@faststore/storybook" dev
```

Or navigate to the storybook package:
```bash
cd packages/storybook
pnpm dev
```

Then:
1. Open http://localhost:6006 in your browser
2. Navigate to **"TextareaField"** → **"LargeText"** story
3. Scroll inside the textarea content
4. Verify that the text no longer appears underneath the label

## References
- **Related Issue:** [PR #2705 - TextareaField label overlap issue
identified](#2705 (review))
- **Task:** [SFS-2385 ](https://vtex-dev.atlassian.net/browse/SFS-2385)
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

@lucasfp13 lucasfp13 lucasfp13 approved these changes

@eduardoformiga eduardoformiga Awaiting requested review from eduardoformiga eduardoformiga 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.

4 participants

@artursantiago @hellofanny @lucasfp13