feat: Criaçao do Quick Order Drawer #3140

giurigaud · 2025-12-02T21:25:44Z

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?

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

Starters Deploy Preview

References

Figma

Checklist

You may erase this after checking them all 😉

PR Title and Commit Messages

PR title and commit messages follow the Conventional Commits 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
For documentation changes, ping @Mariana-Caetano to review and update (Or submit a doc request)

codesandbox-ci · 2025-12-03T15:29:55Z

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

Consider improving the PR description to make the code review easier and to support the documentation of the implemented components/code.

ArthurTriis1 · 2025-12-05T14:12:24Z

Pode mudar o nome do PR para que a funcionalidade desenvolvida seja referenciada?

ArthurTriis1 · 2025-12-05T14:32:59Z

packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerFooter.tsx

+}
+
+const QuickOrderDrawerFooter = ({ formatter }: QuickOrderDrawerFooterProps) => {
+  const [loading, _setLoading] = useState(false)


Esse estado parece nunca estar mudando

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 · 2025-12-05T14:33:45Z

packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerProducts.tsx

+  columns,
+  formatter,
+}: QuickOrderDrawerProductsProps) => {
+  const [loading, _setLoading] = useState(false)


Aqui também

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 · 2025-12-05T14:38:12Z

No storybook esse componente só parece ter o tamanho total quando a tela fica em tamanho mobile, pode averiguar?

ArthurTriis1

Deixei alguns pontos ao longo do PR

lariciamota · 2025-12-23T13:58:28Z

packages/ui/src/components/organisms/QuickOrderDrawer/styles.scss

+        [data-fs-badge-wrapper] {
+          background-color: var(--fs-qod-badge-success-bkg-color);
+
+          /* border-color: var(--fs-badge-success-border-color); */


Suggested change

/* border-color: var(--fs-badge-success-border-color); */

lariciamota · 2025-12-23T13:58:35Z

packages/ui/src/components/organisms/QuickOrderDrawer/styles.scss

+        [data-fs-badge-wrapper] {
+          background-color: var(--fs-qod-badge-warning-bkg-color);
+
+          /* border-color: var(--fs-badge-success-border-color); */


Suggested change

/* border-color: var(--fs-badge-success-border-color); */

lariciamota · 2025-12-23T15:03:21Z

packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawer.tsx

+}
+
+const QuickOrderDrawer = ({
+  testId = 'fs-qod',


Suggested change

testId = 'fs-qod',

testId = 'fs-quick-order-drawer',

lariciamota · 2025-12-23T15:10:35Z

packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawer.tsx

+        size="partial"
+        direction="rightSide"


sugestão: receber como props size/direction tb, pode ter esses valores como default, mas pode ser interessante permitir a customização simples desses valores através do CMS

Suggested change

size="partial"

direction="rightSide"

size={size}

direction={direction}

lariciamota · 2025-12-23T15:16:32Z

packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerFooter.tsx

+  const { itemsCount, totalPrice } = useQuickOrderDrawer()
+
+  return (
+    <div data-fs-qod-footer>


Mudar os data attr que têm qod para quick-order-drawer mesmo (nesse e nos outros arquivos)

lariciamota · 2025-12-23T15:17:21Z

packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerFooter.tsx

+  return (
+    <div data-fs-qod-footer>
+      <div data-fs-qod-footer-price-container>
+        <span>{itemsCount} items</span>


Adicionar as mensagens hard coded para receber como props para poder serem configuradas via CMS. Nesse arquivo tem essa, a do aria-label e do add to cart, por exemplo.

lariciamota · 2025-12-23T16:56:32Z

packages/components/src/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.tsx

+
+export interface VariationProductColumn {
+  name: string
+


Suggested change

lariciamota · 2025-12-23T16:59:22Z

packages/components/src/organisms/QuickOrderDrawer/provider/QuickOrderDrawerProvider.tsx

+    if (onAddToCartCallback) {
+      onAddToCartCallback(productsToAdd, totalPrice, itemsCount)
+    } else {
+      console.log('Adding to cart:', {


Não entendi esse console.log

Tb n! Removi kk

lariciamota · 2025-12-23T17:02:55Z

packages/components/src/organisms/QuickOrderDrawer/QuickOrderDrawerProducts.tsx

+                  >
+                    <TableCell data-fs-qod-cell="product" align="left">
+                      <div data-fs-qod-table-cell-img-container>
+                        <img


Algum motivo para não usar nosso componente Image?

giurigaud requested a review from a team as a code owner December 2, 2025 21:25

giurigaud requested review from lariciamota and lemagnetic and removed request for a team December 2, 2025 21:25

giurigaud changed the title ~~Be 72~~ BE-72 Dec 2, 2025

giurigaud changed the title ~~BE-72~~ feat: BE-72 Dec 2, 2025

icaroov approved these changes Dec 3, 2025

View reviewed changes

renato-macedo and others added 3 commits December 3, 2025 12:26

wip: add quick order drawer

a28a638

feat: add storybook and drawer usestate

69e3764

fix: storybook

9cee8be

giurigaud force-pushed the BE-72 branch from 098018c to 9cee8be Compare December 3, 2025 15:27

raabelo reviewed Dec 3, 2025

View reviewed changes

raabelo approved these changes Dec 3, 2025

View reviewed changes

ArthurTriis1 reviewed Dec 5, 2025

View reviewed changes

ArthurTriis1 requested changes Dec 5, 2025

View reviewed changes

giurigaud changed the title ~~feat: BE-72~~ feat: Criaçao do Quick Order Drawer Dec 10, 2025

fix:width size

a2e75e9

ArthurTriis1 approved these changes Dec 12, 2025

View reviewed changes

lariciamota requested changes Dec 23, 2025

View reviewed changes

feat: Criaçao do Quick Order Drawer #3140

Are you sure you want to change the base?

feat: Criaçao do Quick Order Drawer #3140

Conversation

giurigaud commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's the purpose of this pull request?

How it works?

How to test it?

Starters Deploy Preview

References

Checklist

Uh oh!

codesandbox-ci bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

raabelo left a comment

Choose a reason for hiding this comment

Uh oh!

ArthurTriis1 commented Dec 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArthurTriis1 commented Dec 5, 2025

Uh oh!

ArthurTriis1 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

giurigaud commented Dec 2, 2025 •

edited

Loading

codesandbox-ci bot commented Dec 3, 2025 •

edited

Loading