feat: Criaçao do Quick Order Drawer#3140
Merged
lariciamota merged 14 commits intovtex:feat/quick-order-by-file-feature-branchfrom Jan 29, 2026
Merged
feat: Criaçao do Quick Order Drawer#3140lariciamota merged 14 commits intovtex:feat/quick-order-by-file-feature-branchfrom
lariciamota merged 14 commits intovtex:feat/quick-order-by-file-feature-branchfrom
Conversation
giurigaud
requested review from
lariciamota and
lemagnetic
and removed request for
a team
icaroov
approved these changes
Dec 3, 2025
|
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. |
raabelo
reviewed
Dec 3, 2025
raabelo
left a comment
raabelo
left a comment
There was a problem hiding this comment.
Consider improving the PR description to make the code review easier and to support the documentation of the implemented components/code.
raabelo
approved these changes
Dec 3, 2025
Contributor
|
Pode mudar o nome do PR para que a funcionalidade desenvolvida seja referenciada? |
ArthurTriis1
reviewed
Dec 5, 2025
| } | ||
|
|
||
| const QuickOrderDrawerFooter = ({ formatter }: QuickOrderDrawerFooterProps) => { | ||
| const [loading, _setLoading] = useState(false) |
Contributor
There was a problem hiding this comment.
Esse estado parece nunca estar mudando
Collaborator
There was a problem hiding this comment.
Eles nao estao mudando ainda pois não há integração. Acredito que a Giu/Renato tenham deixado pronto para quando houver a integraçao.
ArthurTriis1
reviewed
Dec 5, 2025
| columns, | ||
| formatter, | ||
| }: QuickOrderDrawerProductsProps) => { | ||
| const [loading, _setLoading] = useState(false) |
Collaborator
There was a problem hiding this comment.
Eles nao estao mudando ainda pois não há integração. Acredito que a Giu/Renato tenham deixado pronto para quando houver a integraçao.
Contributor
|
No storybook esse componente só parece ter o tamanho total quando a tela fica em tamanho mobile, pode averiguar? |
ArthurTriis1
requested changes
Dec 5, 2025
Contributor
ArthurTriis1
left a comment
ArthurTriis1
left a comment
There was a problem hiding this comment.
Deixei alguns pontos ao longo do PR
ArthurTriis1
approved these changes
Dec 12, 2025
lariciamota
requested changes
Dec 23, 2025
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
📝 WalkthroughWalkthroughA new QuickOrderDrawer component feature is introduced with Header, Footer, and Products sub-components alongside a context provider. The public API surface is reorganized to group component exports with their prop types across atoms, molecules, and organisms, totaling 81 lines added and 66 lines removed. Changes
Sequence DiagramsequenceDiagram
actor User
participant QOD as QuickOrderDrawer
participant Provider as QuickOrderDrawerProvider
participant Header as QuickOrderDrawerHeader
participant Products as QuickOrderDrawerProducts
participant Footer as QuickOrderDrawerFooter
participant Context as Context State
User->>QOD: Open drawer (isOpen=true)
QOD->>Provider: Wrap & Initialize
Provider->>Context: Initialize products, alert, totalPrice
QOD->>Header: Render with title & close
Header->>User: Display title (truncated if needed)
User->>Header: Click close
Header->>QOD: Call onCloseDrawer
QOD->>User: Close drawer
rect rgba(100, 150, 200, 0.5)
User->>Products: Adjust quantity
Products->>Context: onChangeQuantityItem(id, value)
Context->>Provider: Update selectedCount
Provider->>Context: Recalculate totalPrice
Products->>User: Display updated price
end
rect rgba(200, 100, 150, 0.5)
User->>Products: Remove item
Products->>Context: onDelete(id)
Context->>Provider: Remove product from list
Provider->>Context: Recalculate itemsCount & totalPrice
Products->>User: Refresh product table
end
User->>Footer: Review cart summary
Footer->>Context: Read itemsCount & totalPrice
Footer->>User: Display formatted total
User->>Footer: Click "Add to Cart"
Footer->>Context: onAddToCart()
Context->>Provider: Filter & callback with cart data
Provider->>User: Complete cart operation
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Fix all issues with AI agents
In
`@packages/components/src/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.tsx`:
- Around line 124-131: onAddToCart currently builds productsToAdd by filtering
product.selectedCount > 0 and availability === 'available' but still passes
totalPrice and itemsCount that were computed from all products; update
onAddToCart (in QuickOrderDrawerProvider) to compute totals from the filtered
productsToAdd (e.g., reduce productsToAdd to derive filteredTotalPrice and
filteredItemsCount) and pass those filtered values to onAddToCartCallback
instead of the precomputed totalPrice and itemsCount so the callback receives
consistent data.
In `@packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawer.tsx`:
- Around line 25-29: QuickOrderDrawerProps declares a formatter prop that is
never used or forwarded; either remove formatter from QuickOrderDrawerProps or
forward it into the component and into QuickOrderDrawerProvider so children can
access it. Locate the QuickOrderDrawer component and the
QuickOrderDrawerProvider invocation and add the formatter prop to the provider
props (or remove the formatter declaration from QuickOrderDrawerProps and any
related imports/usages) to ensure the prop is consistently used or eliminated.
In
`@packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerFooter.tsx`:
- Around line 20-27: The "Add to Cart" Button in QuickOrderDrawerFooter is
missing an onClick handler; update the QuickOrderDrawerFooter component to
accept an onAddToCart (or onClick) callback prop in its props type and pass that
handler into the Button's onClick attribute (use the existing loading and
itemsCount props to disable/prevent double clicks if needed). Locate the
QuickOrderDrawerFooter component and its props interface, add the onAddToCart:
() => void (or (event) => void) prop, and wire it into the Button component so
clicking "Add to Cart" triggers the provided handler.
In
`@packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerHeader.tsx`:
- Around line 18-21: Rename the misspelled variable titleFormmated to
titleFormatted and update all references to use the corrected name (e.g., the
usage in QuickOrderDrawerHeader where the title value is rendered); ensure the
const declaration and any places that read the variable are changed consistently
to avoid undefined identifier errors.
In
`@packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerProducts.tsx`:
- Around line 107-126: The skeleton rows in QuickOrderDrawerProducts render 4
TableCell elements per TableRow causing a mismatch with the actual table
columns; update the inner mapping that creates TableCell/Skeleton (the
Array.from that currently has length: 4 and the TableCell/Skeleton rendering) to
produce 5 cells to match the table columns (Product, Availability, Price,
Quantity, Delete), and ensure cell keys are unique (use distinct variables like
rowIndex and cellIndex when mapping) for TableRow, TableCell, and Skeleton.
- Around line 52-58: Remove the duplicate local alertMessage state and use the
provider's alertMessage and setAlertMessage from useQuickOrderDrawer() instead
(replace local alertMessage/setAlertMessage usage with the context values), and
address the unused loading setter by either removing the local loading state
entirely or moving loading into QuickOrderDrawerProvider (add loading and
setLoading to the provider and useQuickOrderDrawer() so this component can call
setLoading where needed); update references to loading/_setLoading in this file
to use the chosen source (context or prop) and remove the unused _setLoading
variable.
In `@packages/core/src/components/sections/Navbar/section.module.scss`:
- Line 36: Remove the unnecessary SCSS import of QuickOrderDrawer from the
Navbar component's section.module.scss: delete the line importing
"@faststore/ui/src/components/organisms/QuickOrderDrawer/styles.scss"
(QuickOrderDrawer is already globally imported), ensure there are no remaining
references to QuickOrderDrawer in the Navbar component code (section.module.scss
/ Navbar) and run the build or style lint to confirm styles are no longer
duplicated in the bundle.
🧹 Nitpick comments (9)
packages/ui/src/components/organisms/QuickOrderDrawer/styles.scss (3)
24-24: Additional hardcoded colors found throughout the file.Several places use inline hardcoded colors (
#ffffff,black,green,#f1f8fd,#0366dd) instead of CSS variables or design tokens. This reduces maintainability and theming flexibility.Lines 63, 77:
color: blackandcolor: green
Line 100:background-color:#f1f8fdLines 148, 289-290: `color: `#ffffff,background-color: black,background-color:#0366dd``Also applies to: 62-64, 76-78, 100-100, 147-148, 289-291
55-56: Percentage-based heights may be fragile.Using fixed percentages (
height: 8%,height: 80%,height: 12%) for header, content, and footer assumes the parent container has an explicit height. If the drawer's parent lacks a defined height, these percentages won't compute correctly.Consider using
flex-grow/flex-shrinkormin-height/max-heightconstraints for more robust layout behavior.♻️ Alternative approach using flexbox
[data-fs-quick-order-drawer-header] { - height: 8%; + flex-shrink: 0; padding: ... } [data-fs-quick-order-drawer-content] { - height: 80%; + flex: 1 1 auto; + min-height: 0; padding: ... overflow: auto; } [data-fs-quick-order-drawer-footer] { - height: 12%; + flex-shrink: 0; ... }Also applies to: 90-91, 266-269
10-15: Use design system tokens instead of hardcoded color values for better consistency and theme support.The drawer defines hardcoded colors that should reference the existing design token system. The design tokens
--fs-color-text,--fs-color-text-light,--fs-color-success-bkg, and--fs-border-color-lightare all defined in the base token system and are used consistently throughout the codebase.♻️ Suggested refactor
- --fs-quick-order-drawer-primary-text-color: black; - --fs-quick-order-drawer-secondary-text-color: `#5c5c5c`; - --fs-quick-order-drawer-badge-success-bkg-color: `#aff79e`; - --fs-quick-order-drawer-badge-warning-bkg-color: `#ffdfd9`; - --fs-quick-order-drawer-neutral-border-color: `#ebebeb`; + --fs-quick-order-drawer-primary-text-color: var(--fs-color-text); + --fs-quick-order-drawer-secondary-text-color: var(--fs-color-text-light); + --fs-quick-order-drawer-badge-success-bkg-color: var(--fs-color-success-bkg); + --fs-quick-order-drawer-badge-warning-bkg-color: var(--fs-color-warning-bkg); + --fs-quick-order-drawer-neutral-border-color: var(--fs-border-color-light);Note: If the warning badge color needs a specific shade different from the base token, consider creating a component-level token override instead of a hardcoded value.
packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerFooter.tsx (2)
11-11: Unusedloadingstate.The
loadingstate is initialized but_setLoadingis never used. If loading behavior is intended for future implementation, consider either removing this for now or adding a TODO comment explaining the planned usage.♻️ If loading is not needed yet, simplify
- const [loading, _setLoading] = useState(false) + // TODO: Implement loading state when add-to-cart action is integrated + const loading = false
17-17: Hardcoded strings should be internationalized.The strings "items" and "Add to Cart" are hardcoded. For a component in a VTEX storefront library, these should support internationalization.
Also applies to: 26-26
packages/components/src/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.tsx (2)
59-84: Mock data as default may leak into production usage.
initialProductsdefaults tomockProductscontaining hardcoded demo data. If a consumer forgets to passinitialProducts, they'll see mock products in production. Consider defaulting to an empty array instead.Proposed fix
- initialProducts = mockProducts, + initialProducts = [],Keep
mockProductsonly for Storybook stories by passing it explicitly there.Also applies to: 88-88
34-43: Consider exportingQuickOrderDrawerContextValuefor consumer type safety.The interface is defined but not exported. Consumers using
useQuickOrderDrawermay want to type their variables or pass the context value around.Proposed fix
-interface QuickOrderDrawerContextValue { +export interface QuickOrderDrawerContextValue {packages/storybook/stories/quick-order-drawer.stories.tsx (1)
38-45: Unnecessary React fragment wrapper.The fragment
<>...</>wrapping the children is redundant sinceQuickOrderDraweralready accepts children directly.Proposed fix
<QuickOrderDrawer isOpen={isOpen}> - <> - <QuickOrderDrawerHeader - title="order-file.xlsx" - onCloseDrawer={() => setIsOpen(false)} - /> - <QuickOrderDrawerProducts columns={columns} /> - <QuickOrderDrawerFooter /> - </> + <QuickOrderDrawerHeader + title="order-file.xlsx" + onCloseDrawer={() => setIsOpen(false)} + /> + <QuickOrderDrawerProducts columns={columns} /> + <QuickOrderDrawerFooter /> </QuickOrderDrawer>packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerProducts.tsx (1)
109-122: Shadowedindexvariable in nested loops.The inner
mapcallback shadows the outerindexvariable, which reduces readability and could cause confusion during maintenance.Proposed fix
- {Array.from({ length: 5 }).map((_, index) => { + {Array.from({ length: 5 }).map((_, rowIndex) => { return ( - <TableRow key={`table-row-${index}`}> + <TableRow key={`table-row-${rowIndex}`}> {Array.from({ - length: 4, - }).map((_, index) => { + length: 5, + }).map((_, cellIndex) => { return ( - <TableCell key={`table-cell-${index}`}> + <TableCell key={`table-cell-${rowIndex}-${cellIndex}`}> <span> <Skeleton - key={index} size={{ width: '100%', height: '30px' }} />
lariciamota
reviewed
Jan 28, 2026
Comment on lines
+31
to
+34
| const itemsLabel = labels?.itemsLabel ?? 'items' | ||
| const addToCartLabel = labels?.addToCartLabel ?? 'Add to Cart' | ||
| const addToCartAriaLabel = | ||
| labels?.addToCartAriaLabel ?? `Add ${itemsCount} items to cart` |
Contributor
There was a problem hiding this comment.
Deleta os valores default, decidimos deixar o código da faststore sem esses valores default que deveriam vir do CMS.
Se por acaso estiver precisando desses valores default por enquanto para testes antes da integração, deixa um comentário TODO para fazer essa remoção, por favor.
lariciamota
reviewed
Jan 28, 2026
| }: QuickOrderDrawerProviderProps) => { | ||
| const [products, setProducts] = useState<Product[]>(initialProducts) | ||
| const [alertMessage, setAlertMessage] = useState<string>( | ||
| 'Some of the SKUs are not available. Please adjust the amount before proceeding to the cart.' |
Contributor
There was a problem hiding this comment.
Mensagem para passar pro CMS
lariciamota
reviewed
Jan 28, 2026
Comment on lines
+238
to
+239
| title: 'Invalid quantity!', | ||
| message: `The quantity you entered is outside the range of ${min} to ${maxValue}. The quantity was set to ${quantity}.`, |
Contributor
There was a problem hiding this comment.
Mensagens para passar pro CMS
lariciamota
approved these changes
Jan 29, 2026
- Fix onAddToCart to compute totals from filtered productsToAdd instead of all products - Forward formatter prop from QuickOrderDrawer to QuickOrderDrawerProvider via context - Add onAddToCart onClick handler to QuickOrderDrawerFooter Button - Fix typo: titleFormmated -> titleFormatted in QuickOrderDrawerHeader - Fix skeleton rows to render 5 cells matching table columns - Remove duplicate alertMessage state and use provider context - Remove unnecessary QuickOrderDrawer SCSS import from Navbar
…age component and make labels configurable
- Remove hardcoded alert message from QuickOrderDrawerProvider - Add initialAlertMessage prop to QuickOrderDrawerProvider and QuickOrderDrawer - Remove hardcoded validation messages from QuickOrderDrawerProducts - Add messages prop with invalidQuantityTitle and invalidQuantityMessage - Update storybook with test values for all messages - Export useQuickOrderDrawer in main index - Simplify QuickOrderDrawerFooter by removing unused loading state
lariciamota
merged commit c76b34c
into
vtex:feat/quick-order-by-file-feature-branch
3 checks passed
This was referenced Feb 2, 2026
ArthurTriis1
added a commit
that referenced
this pull request
Feb 10, 2026
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>
This was referenced Feb 11, 2026
ataideverton
pushed a commit
that referenced
this pull request
Feb 23, 2026
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>
ataideverton
pushed a commit
that referenced
this pull request
Feb 23, 2026
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>
ataideverton
pushed a commit
that referenced
this pull request
Feb 23, 2026
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>
ataideverton
pushed a commit
that referenced
this pull request
Feb 24, 2026
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>
ataideverton
pushed a commit
that referenced
this pull request
Feb 24, 2026
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>
ataideverton
pushed a commit
that referenced
this pull request
Mar 4, 2026
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>
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
8 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 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.
How it works?
Creating the Quick Order Drawer layout according to Figma.
How to test it?
Starters Deploy Preview
References
Figma
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)Summary by CodeRabbit
New Features
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.