feat: Add dropzone and upload file dropdown#3110
Draft
Conversation
## What's the purpose of this pull request? Build our default image loader. ## How it works? - When the FastStore image component is used, the `faststoreLoader` is used. - When the Next image component is used directly, the `customImageLoader` is used. - Both have the same behavior when handling images from VTEX (from the file manager/cms and product images) -- they add to the URL the info regarding size, quality and aspect, since those VTEX services already handles optimizations. - The difference between those loaders is regarding external images -- the one used for Next images uses the Next optimizations, and the FastStore one doesn't. It won't be necessary to use a feature flag like `enableVtexAssetsLoader`. ## 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 PR: vtex-sites/faststoreqa.store#881 ## References - [Jira task](https://vtex-dev.atlassian.net/browse/SFS-2878) - [Slack thread](https://vtex.slack.com/archives/C03L3CRCDC4/p1761334946034969)
## What's the purpose of this pull request? Atts.
## 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)
## What's the purpose of this pull request? Revert changes from - #2988 since the approach to filter shopper changes to use text field instead of selected filter in the drawer. ## details remove purchaseAgentId filter and related components from `MyAccountListOrders`. This update removes the purchaseAgentId filter and its associated components from the MyAccountListOrders section. The changes include: - Deleting the MyAccountFilterFacetPlacedBy component and its styles. - Adjusting the MyAccountListOrders and MyAccountSelectedTags components to eliminate references to purchaseAgentId. - Cleaning up related styles and imports to streamline the codebase. These modifications aim to simplify the order filtering process and improve overall maintainability.
## What's the purpose of this pull request? From a current Next.js's known issue ([discussion#44013](vercel/next.js#44013)), these changes aim to add an experimental custom hook to handle scroll restoration when navigating back from PDPs to PLPs. https://github.com/user-attachments/assets/9a452081-4c65-4a83-8c16-9775f97d226d Along with this experimental hook, some adjustments needed to be made to correct the behavior of related components, such as `Sentinel`. While the Next.js experimental `scrollRestoration` flag is not working as it should, we are proposing this FastStore's experimental scroll restoration alternative. ## How it works? While navigating through PLPs and loading more pages, when users navigate to a PDP and navigate back the scroll should be restored to the last position before the navigation. ### Starters Deploy Preview vtex-sites/faststoreqa.store#878 ## References #2054
## What's the purpose of this pull request? Merge the changes from main
## What's the purpose of this pull request? By using the direction property users will be able to use RTL or LTR layouts.
## What's the purpose of this pull request? With these changes, if merchants remove the footer logo the entire footer component will not be hid anymore, it will throw a console error but the component should be displayed with no logo.
#3077) ## What's the purpose of this pull request? This PR fixes the `border-radius` of the Slider thumb in Firefox. The current CSS rule for Mozilla uses an inexistent variable, making the browser render a square instead of a circle: <img width="1028" height="181" alt="image" src="https://github.com/user-attachments/assets/50c08d79-a6a9-4d31-b2e7-5ef9e287080f" /> ## How it works? The `--fs-slider-thumb-radius` variable is replaced by `--fs-slider-thumb-border-radius`, the one that is defined in the default thumb variables. ## How to test it? - Use the `Local Install Instructions` from the [CodeSandbox CI](https://ci.codesandbox.io/status/vtex/faststore/pr/3077) to add this version in the `package.json` of a store. - Import the `Slider` atom (and styles) in a component following the docs: https://developers.vtex.com/docs/guides/faststore/atoms-slider - Run the store in development mode and browse it in Mozilla Firefox. ### Starters Deploy Preview I'm unable to generate a preview link but here's a screenshot from localhost: <img width="1287" height="617" alt="image" src="https://github.com/user-attachments/assets/f0a5a5e9-d657-41db-9415-303b5d17fefd" /> ## Checklist **PR Title and Commit Messages** - [x] PR title and commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification - Available prefixes: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `ci` and `test` **PR Description** - [ ] Added a label according to the PR goal - `breaking change`, `bug`, `contributing`, `performance`, `documentation`.. _(No permissions. It's a bug though.)_ **Dependencies** - [N/A] Committed the `pnpm-lock.yaml` file when there were changes to the packages **Documentation** - [x] PR description - [N/A] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request)
icaroov
requested review from
gabpaladino and
renatomaurovtex
and removed request for
a team
icaroov
changed the title
|
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. |
) ## What's the purpose of this pull request? Adds a new "Pending Approval" filter to the MyAccount orders page, allowing users to quickly filter orders that require their approval. ## How it works? - New toggle filter: Added "Pending Approval" as the first filter option in the orders filter slider - Toggle switch: Users can turn on/off the filter to show only pending approval orders - URL integration: Filter state is reflected in the URL (?pendingApproval=true) - Selected tag: When active, shows "Pending my approval" tag below the search bar ## How to test it? - Go to /account/orders - Open filter slider and verify "Pending Approval" is the first option - Toggle the switch and click "Apply" - Check URL - should include ?pendingApproval=true - Verify tag appears - "Pending my approval" tag should show below search bar - Test removal - click "×" on tag or "Clear All" to remove filter - Test direct URL - navigate to /account/orders?pendingApproval=true and verify filter is active ## Starter deploy preview vtex-sites/b2bfaststoredev.store#358 ## References [SFS-2618](https://vtex-dev.atlassian.net/browse/SFS-2618) | List | Filter | | - | - | |  |  | [SFS-2618]: https://vtex-dev.atlassian.net/browse/SFS-2618?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ [SFS-2618]: https://vtex-dev.atlassian.net/browse/SFS-2618?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Artur Santiago <artur.santiago@cubos.io>
) ## What's the purpose of this pull request? Fix a bug that occurs when regionalized and `isSessionReady` is sent in the' validateSession' and' validateCart' mutations. ## How does it work? It removes the `isSessionReady` from the session sent to the `setRegion` method. <img width="1909" height="916" alt="Screenshot 2025-11-11 at 16 22 55" src="https://github.com/user-attachments/assets/468cc987-a2ee-432f-b306-399bfd32e891" />
## What's the purpose of this pull request? This PR aims to fix the build in the dev branch.
…d template generation
…parsing implementation
- Updated `useFileUpload` to use `FileRejection` type for better type safety. - Introduced `UploadFileDropdown` component with improved CSV file handling using `useCSVParser` hook. - Simplified error handling and template generation for CSV uploads. - Added lazy loading for `UploadFileDropdown` in `SearchInput` component.
This PR refers to the creation of the Quick Order Drawer, a new component developed for the Quick Order By File functionality. The main advantage of the Quick Order functionality is the ability to add products directly to the cart from the search, which significantly reduces the number of clicks and browsing time. <!--- Considering the context, what is the problem we'll solve? Where in VTEX's big picture our issue fits in? Write a tweet about the context and the problem itself. ---> <!--- Tell us the role of the new feature, or component, in its context. Provide details about what you have implemented and screenshots if applicable. ---> Creating the Quick Order Drawer layout according to Figma. <img width="1912" height="966" alt="image (3)" src="https://github.com/user-attachments/assets/65a66428-8db2-45f4-86f5-c28f4236a2e4" /> <!--- Describe the steps with bullet points. Is there any external link that can be used to better test it or an example? ---> • The user uploads the file in the Quick Order interface. • After the upload is completed, the Search button becomes enabled. • The user clicks the Search button to start processing. • The system begins processing the file data. • The Dropdown enters a loading state. • Even while loading, the Dropdown can be closed without interrupting the processing. • Once processing is finished, the system automatically opens the Quick Order Drawer. <!--- 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. ---> [Figma](https://www.figma.com/design/0c3DOaXs6rS25LyDWi7uap/Cubos-%C2%B7-FastStore-Features-(H2-2024)?node-id=1-23&node-type=canvas&t=EiFoKx4kFwgKhNEP-0) <!--- Spread the knowledge: is there any content you used to create this PR that is worth sharing? ---> <!--- Extra tip: adding references to related issues or mentioning people important to this PR may be good for the documentation and reviewing process ---> <em>You may erase this after checking them all 😉</em> **PR Title and Commit Messages** - [x] PR title and commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification - Available prefixes: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `ci` and `test` **PR Description** - [ ] Added a label according to the PR goal - `breaking change`, `bug`, `contributing`, `performance`, `documentation`.. **Dependencies** - [ ] Committed the `pnpm-lock.yaml` file when there were changes to the packages **Documentation** - [x] PR description - [ ] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> * **New Features** * Added Quick Order Drawer component enabling streamlined product ordering with header, product selection table, quantity adjustments, and checkout from a side panel. * **Documentation** * Added Storybook examples demonstrating Quick Order Drawer with multiple configuration scenarios. * **Chores** * Updated TypeScript React type definitions to latest compatible versions. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: renato <renato.neto@cubos.io> Co-authored-by: Bruna Santos <brunassdev@gmail.com> Co-authored-by: Arthur Andrade <arthurfelandrade@gmail.com>
Tasks [https://vtex-dev.atlassian.net/jira/software/projects/BE/boards/2868?selectedIssue=BE-69](https://vtex-dev.atlassian.net/jira/software/projects/BE/boards/2868?selectedIssue=BE-69) [BE-70](https://vtex-dev.atlassian.net/jira/software/projects/BE/boards/2868?selectedIssue=BE-70) Here's the completed PR description in English: - Introduced `FileUploadCard` for file selection and upload functionality, including drag-and-drop support. - Added `FileUploadStatus` to display upload progress and error handling. - Updated index files to export new components and types. - Enhanced `SearchInputField` to include an attachment button that triggers the file upload card. - Added styles for both new components to ensure proper UI integration. This PR introduces a new file upload feature that allows users to perform bulk searches by uploading CSV files. The feature provides a modern, user-friendly interface with drag-and-drop support, real-time upload status tracking, and comprehensive error handling to guide users through the file upload process. - **File Selection**: Users can either click "Select file" button or drag-and-drop files into the dropzone - **Drag & Drop**: Visual feedback with border color and background changes when dragging files - **File Input**: Hidden file input that's always present in the DOM to ensure file picker works in all states - **Download Template**: Provides a CSV template download option for users who need guidance on file format - **Validation**: Only accepts CSV files (`.csv` extension) - **States**: Manages upload states (uploading, completed, error) with appropriate UI updates Displays the current status of the uploaded file with three distinct states: 1. **Uploading State** - Shows spinning CircleNotch icon - Displays "Uploading your file..." message - Shows filename 2. **Completed State** - Shows Table icon in green background - Displays filename and file size - Shows "Search" button to proceed with the uploaded file 3. **Error State** - Shows WarningOctagon icon in red background - Special styling: light pink background (#FDF6F5) with red border (#FFDFD9) - Displays error title and description in two lines - Shows two action buttons: "Download template" and "Select file" The component handles six different error scenarios: - **Unsupported**: Wrong file type (non-CSV files) - **Unreadable**: File can't be parsed or is corrupted - **Invalid Structure**: Missing headers or incorrect columns - **Empty**: File has no data - **Too Large**: File exceeds size limit - **Unexpected**: Generic error for unknown issues - Added attachment icon button to `SearchInputField` component - Clicking the attachment button toggles the `FileUploadCard` visibility - Card appears as a dropdown below the search input - Smooth animations for show/hide transitions - **File validation**: Automatically checks file type on selection/drop - **Error recovery**: Users can easily select a new file or download template when errors occur - **Responsive design**: Components adapt to container width - **Accessibility**: Proper ARIA labels and keyboard navigation support - **Visual feedback**: Icons, colors, and animations provide clear status indication 1. Navigate to a page with the search input 2. Click the attachment icon button (Paperclip icon) 3. The FileUploadCard should appear below the search input 4. Click "Select file" or drag-and-drop a CSV file 5. Observe the uploading state with spinning icon 6. After 2 seconds, see the completed state with "Search" button 7. Click the X button to remove the file and return to initial state 1. Open the FileUploadCard 2. Drag a CSV file over the dropzone 3. Observe the visual feedback (border and background color change) 4. Drop the file to upload 1. Open the FileUploadCard 2. Select or drop a non-CSV file (e.g., .txt, .pdf, .xlsx) 3. Observe error state with red icon and pink background 4. Read error message: "Unsupported file type." / "Upload a CSV or use the template provided." 5. Click "Download template" to get a sample CSV 6. Click "Select file" to try uploading again 1. Upload a file successfully 2. Click the X button in the top-right of the file status 3. Component should return to initial dropzone state <!-- Add your deploy preview link here --> - [Phosphor Icons](https://phosphoricons.com/) - Icon library used for UI elements - [Conventional Commits](https://www.conventionalcommits.org/) - Commit message format <em>You may erase this after checking them all 😉</em> **PR Title and Commit Messages** - [ ] PR title and commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification - Available prefixes: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `ci` and `test` **PR Description** - [ ] Added a label according to the PR goal - `breaking change`, `bug`, `contributing`, `performance`, `documentation`.. **Dependencies** - [ ] Committed the `pnpm-lock.yaml` file when there were changes to the packages **Documentation** - [ ] PR description [BE-70]: https://vtex-dev.atlassian.net/browse/BE-70?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ <!-- This is an auto-generated comment: release notes by coderabbit.ai --> * **New Features** * File upload card component enabling file selection via drag-and-drop or file picker with status indicators * File upload status component displaying upload progress, success, and error states with customizable error handling * Attachment button in search input for quick file upload access * **Chores** * Added component styling and Storybook demonstrations <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Bruna Santos <brunassdev@gmail.com> Co-authored-by: Arthur Andrade <arthurfelandrade@gmail.com>
ataideverton
force-pushed
the
feat/BE-71
branch
from
78b8a2f to
763cf2d
Compare
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
17 participants
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 pull request introduces a bulk product search feature via file upload in the search input, enabling users to upload CSV or Excel files containing SKU and Quantity information. The main changes include adding a reusable
Dropzonecomponent, extending the search input to support file uploads, and implementing a modal dropdown for uploading and parsing files. This enhances the user experience for bulk product operations and improves code modularity.The entire journey will be completed in subsequent PRs.
How it works?
Component and API enhancements:
Dropzonecomponent to the UI library, exposing its props and state for use in other components. (packages/components/src/molecules/Dropzone/Dropzone.tsx,packages/components/src/molecules/Dropzone/index.ts,packages/components/src/index.ts)Dependency updates:
react-dropzoneandxlsxlibraries to support file upload and parsing functionality. (packages/components/package.json,packages/core/package.json)How to test it?
Starters Deploy Preview
References
Checklist
You may erase this after checking them all 😉
PR Title and Commit Messages
feat,fix,chore,docs,style,refactor,ciandtestPR Description
breaking change,bug,contributing,performance,documentation..Dependencies
pnpm-lock.yamlfile when there were changes to the packagesDocumentation
@Mariana-Caetanoto review and update (Or submit a doc request)