Skip to content

Conversation

@artursantiago
Copy link
Collaborator

@artursantiago artursantiago commented Aug 11, 2025

What’s the purpose of this pull request?

  • Add a new Placed by filter to My Account → Orders, enabling users to search and select a shopper before applying filters.
  • Implement the feature with mock data, preparing for a future API integration.

How it works?

  • New facet in the Filters panel (between Status and Order date):
    • Autocomplete input using mock shoppers.
    • Type to filter by name/email (case-insensitive).
    • Selecting a shopper makes the input read-only and shows a clear X inside the field.
    • Clear X removes the selection and restores search mode.
    • If the user types but doesn’t select and blurs, the input auto-clears.
  • Selected shopper appears as a tag inside the filter panel; Clear All removes it.
  • Clicking View Results rebuilds the URL and reloads the page with:
    • purchaseAgentId= when selected

How to test it?

Starters Deploy Preview

References

SFS-2702

Figma

Desktop Mobile
image
image
image image
image image

@artursantiago artursantiago requested a review from a team as a code owner August 11, 2025 16:48
@artursantiago artursantiago requested review from eduardoformiga, hellofanny and icaroov and removed request for a team August 11, 2025 16:48
@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 11, 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.

Copy link
Member

@eduardoformiga eduardoformiga left a comment

Choose a reason for hiding this comment

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

Good job! I left a couple of comments, but most of them are non-blocking, just reminders for future integrations.

import type { SelectedFacet } from 'src/sdk/search/useMyAccountFilter'

type Shopper = {
purchase_agent_id: string
Copy link
Member

Choose a reason for hiding this comment

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

🎗️ It will come as userId from the shopper entity, and we'll send it as purchase_agent_id to the OMS API. We don't need to change the mock, just to remember afterward.

Comment on lines +66 to +69
const selectedId = useMemo(
() => selected.find((f) => f.key === 'purchaseAgentId')?.value,
[selected]
)
Copy link
Member

Choose a reason for hiding this comment

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

just 1 so far, after we can select multiple.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes, i have done as in the figma for now

Comment on lines 87 to 94
const filtered = useMemo(() => {
const q = query.trim().toLowerCase()
if (!q) return mockShoppers
return mockShoppers.filter(
(s) =>
s.name.toLowerCase().includes(q) || s.email.toLowerCase().includes(q)
)
}, [query])
Copy link
Member

Choose a reason for hiding this comment

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

🎗️ reminder: replace this with the API call afterward.
We're deciding on how to filter shoppers already (using wildcard and firstName, lastName, but in this task let's keep the mock 😉


const placedByTag = purchaseAgentId && (
<div key={`placed-by-${purchaseAgentId}`} data-fs-list-orders-selected-tag>
<span>Placed by: {purchaseAgentId}</span>
Copy link
Member

Choose a reason for hiding this comment

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

🎗️ will be the name instead of purchaseAgentId in the future.

@eduardoformiga eduardoformiga merged commit 1c9b557 into main Aug 14, 2025
7 of 8 checks passed
@eduardoformiga eduardoformiga deleted the feat/order-list-placed-by-filter branch August 14, 2025 14:15
lariciamota pushed a commit that referenced this pull request Oct 30, 2025
## 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants