@faststore/core 3.75.1 → 3.77.1

package/.turbo/turbo-build.log

@@ -1,23 +1,23 @@
 
-> @faststore/core@3.75.0 prebuild /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 prebuild /home/runner/work/faststore/faststore/packages/core
 > na run partytown && na run generate
 
 
-> @faststore/core@3.75.0 partytown /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 partytown /home/runner/work/faststore/faststore/packages/core
 > partytown copylib ./public/~partytown
 
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 
-> @faststore/core@3.75.0 generate /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 generate /home/runner/work/faststore/faststore/packages/core
 > na run generate:schema && na run generate:codegen && na run format:generated
 
 
-> @faststore/core@3.75.0 generate:schema /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 generate:schema /home/runner/work/faststore/faststore/packages/core
 > tsx src/server/generator/generateGraphQLSchemaFile.ts
 
 Schema GraphQL file generated successfully
 
-> @faststore/core@3.75.0 generate:codegen /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 generate:codegen /home/runner/work/faststore/faststore/packages/core
 > graphql-codegen
 
 [STARTED] Parse Configuration
@@ -37,11 +37,11 @@ Running lifecycle hook "afterStart" scripts...
 [CLI] Loading Documents
 [CLI] Generating output
 
-> @faststore/core@3.75.0 format:generated /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 format:generated /home/runner/work/faststore/faststore/packages/core
 > prettier --write "@generated/**/*.{ts,js,tsx,jsx,json}" --loglevel error
 
 
-> @faststore/core@3.75.0 build /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 build /home/runner/work/faststore/faststore/packages/core
 > next build
 
 ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
@@ -89,8 +89,8 @@ Route (pages)                              Size     First Load JS
 ├   └ css/b7bba8fce075688b.css             4.2 kB
 ├ λ /account/404                           2.13 kB         138 kB
 ├   └ css/5347dbc8b71de47d.css             4.25 kB
-├ λ /account/orders                        8.91 kB         145 kB
-├   └ css/3d41485722b4e3f5.css             12.1 kB
+├ λ /account/orders                        10.1 kB         146 kB
+├   └ css/38e3a4a55b13b062.css             12.7 kB
 ├ λ /account/orders/[id]                   12.1 kB         148 kB
 ├   └ css/70353bf19c496790.css             12.6 kB
 ├ λ /account/profile                       1.79 kB         138 kB
@@ -110,7 +110,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-807b0f81cbc129f0.js   45.4 kB
   ├ chunks/main-f658704b53a96ab1.js        33.1 kB
   ├ chunks/pages/_app-36fb57bc394108e6.js  23.6 kB
-  ├ chunks/webpack-3154bd2292a6ff53.js     3.81 kB
+  ├ chunks/webpack-b6bad1900f53d6e6.js     3.81 kB
   └ css/0a57ee6c7a57788c.css               3.49 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,14 +1,15 @@
 
-> @faststore/core@3.75.0 test /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.76.0 test /home/runner/work/faststore/faststore/packages/core
 > jest
 
-PASS test/server/cms/global.test.ts (26.209 s)
-PASS test/utils/multipleTemplates.test.ts (26.471 s)
+PASS test/server/cms/global.test.ts (26.87 s)
+PASS test/utils/multipleTemplates.test.ts (26.954 s)
 PASS test/server/cms/index.test.ts
-PASS test/server/index.test.ts (29.832 s)
+PASS test/server/index.test.ts (31.076 s)
+A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        31.094 s
+Time:        32.61 s
 Ran all test suites.

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.77.1](https://github.com/vtex/faststore/compare/v3.77.0...v3.77.1) (2025-08-20)
+
+### Bug Fixes
+
+- use ? operator to get dateRangeFacet ([#2996](https://github.com/vtex/faststore/issues/2996)) ([e67d63d](https://github.com/vtex/faststore/commit/e67d63d1624aba4a5baf880d525487ff482db0c7))
+
+# [3.76.0](https://github.com/vtex/faststore/compare/v3.75.1...v3.76.0) (2025-08-14)
+
+### Features
+
+- order list placed by filter-SFS-2702 ([#2988](https://github.com/vtex/faststore/issues/2988)) ([1c9b557](https://github.com/vtex/faststore/commit/1c9b557a3fd2310ca4d1ffb7fd4135f60a44109d))
+
 ## [3.75.1](https://github.com/vtex/faststore/compare/v3.75.0...v3.75.1) (2025-08-08)
 
 **Note:** Version bump only for package @faststore/core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.75.1",
+  "version": "3.77.1",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -108,5 +108,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "7214b5421dd81cb06903c4f6d202493039085a76"
+  "gitHead": "e711a9315d715e7a1a28b599f9a733e7327ab21a"
 }

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetPlacedBy/MyAccountFilterFacetPlacedBy.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Input, IconButton, Icon, Loader } from '@faststore/ui'
+import type { SelectedFacet } from 'src/sdk/search/useMyAccountFilter'
+import useShopperSuggestions from 'src/sdk/account/useShopperSuggestions'
+import type { Shopper } from 'src/sdk/account/useShopperSuggestions'
+
+export interface MyAccountFilterFacetPlacedByProps {
+  /**
+   * Current selected facets from filter context
+   */
+  selected: SelectedFacet[]
+  /**
+   * Dispatch from filter context
+   */
+  dispatch: (action: { type: 'toggleFacet' | 'setFacet'; payload: any }) => void
+}
+
+function MyAccountFilterFacetPlacedBy({
+  selected,
+  dispatch,
+}: MyAccountFilterFacetPlacedByProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [query, setQuery] = useState('')
+  const [selectedShopper, setSelectedShopper] = useState<Shopper | null>(null)
+  const [isOpen, setIsOpen] = useState(false)
+
+  // Use the new hook for shoppers suggestions
+  const { data, isLoading, findShopperById } = useShopperSuggestions(query)
+
+  // Get the filtered shoppers from hook data
+  const filteredShoppers = data?.shoppers || []
+
+  const selectedId = useMemo(
+    () => selected.find((f) => f.key === 'purchaseAgentId')?.value,
+    [selected]
+  )
+
+  const clearAll = () => {
+    setQuery('')
+    setSelectedShopper(null)
+    if (inputRef.current) inputRef.current.value = ''
+  }
+
+  useEffect(() => {
+    if (selectedId && !selectedShopper) {
+      const found = findShopperById(selectedId)
+      if (found) setSelectedShopper(found)
+    } else if (!selectedId) {
+      clearAll()
+    }
+  }, [selectedId, selectedShopper])
+
+  function handleSearchOnChange(value: string) {
+    setQuery(value)
+    setIsOpen(true)
+  }
+
+  const isSearchEmpty = useMemo(
+    () => !isLoading && query && filteredShoppers.length === 0,
+    [isLoading, query, filteredShoppers]
+  )
+
+  function handleSelect(shopper: Shopper) {
+    setSelectedShopper(shopper)
+    setIsOpen(false)
+    dispatch({
+      type: 'setFacet',
+      payload: {
+        facet: { key: 'purchaseAgentId', value: shopper.purchase_agent_id },
+        unique: true,
+      },
+    })
+  }
+
+  function handleClearTag() {
+    if (selectedShopper) {
+      // Using toggleFacet here removes the purchaseAgentId from selected facets
+      // because toggleFacet will remove the facet if it already exists in the selected facets
+      dispatch({
+        type: 'toggleFacet',
+        payload: {
+          key: 'purchaseAgentId',
+          value: selectedShopper.purchase_agent_id,
+        },
+      })
+    }
+    clearAll()
+  }
+
+  return (
+    <div data-fs-list-orders-filters-placed-by>
+      <div data-fs-list-orders-filters-placed-by-input>
+        <Input
+          id="placed-by-input"
+          placeholder="Enter the shopper's name..."
+          ref={inputRef}
+          value={selectedShopper ? selectedShopper.name : query}
+          readOnly={Boolean(selectedShopper)}
+          onFocus={() => {
+            if (!selectedShopper) setIsOpen(true)
+          }}
+          onChange={(e) => {
+            if (selectedShopper) return
+            handleSearchOnChange(e.target.value)
+          }}
+          onBlur={() => {
+            // delay close to allow click selection
+            setTimeout(() => {
+              setIsOpen(false)
+              if (!selectedShopper) {
+                setQuery('')
+                if (inputRef.current) inputRef.current.value = ''
+              }
+            }, 100)
+          }}
+          type="text"
+          inputMode="text"
+        />
+        {isLoading && (
+          <div data-fs-list-orders-filters-placed-by-loader>
+            <Loader />
+          </div>
+        )}
+        {selectedShopper && (
+          <IconButton
+            size="small"
+            aria-label="Clear shopper"
+            data-fs-list-orders-filters-placed-by-clear
+            icon={<Icon name="X" />}
+            onClick={handleClearTag}
+          />
+        )}
+      </div>
+
+      {isOpen && isSearchEmpty && (
+        <div
+          data-fs-list-orders-filters-placed-by-dropdown
+          data-fs-list-orders-filters-placed-by-empty
+          aria-label="No shoppers found with query"
+        >
+          <p>No shoppers found with "{query}"</p>
+        </div>
+      )}
+
+      {isOpen && filteredShoppers.length > 0 && (
+        <div
+          data-fs-list-orders-filters-placed-by-dropdown
+          aria-label="Shopper selection dropdown"
+        >
+          <ul>
+            {filteredShoppers.map((s) => (
+              <li key={s.purchase_agent_id}>
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => handleSelect(s)}
+                  data-fs-list-orders-filters-placed-by-option
+                >
+                  <span data-fs-list-orders-filters-placed-by-option-name>
+                    {s.name}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default MyAccountFilterFacetPlacedBy

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetPlacedBy/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MyAccountFilterFacetPlacedBy'
+export type { MyAccountFilterFacetPlacedByProps } from './MyAccountFilterFacetPlacedBy'

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetPlacedBy/styles.scss

@@ -0,0 +1,96 @@
+[data-fs-list-orders-filters-placed-by] {
+  --fs-list-orders-filters-placed-by-dropdown-bkg                               : var(--fs-color-neutral-0);
+  --fs-list-orders-filters-placed-by-dropdown-border                            : 1px solid var(--fs-border-color-light);
+  --fs-list-orders-filters-placed-by-dropdown-radius                            : var(--fs-border-radius);
+  --fs-list-orders-filters-placed-by-option-padding                             : var(--fs-spacing-2) var(--fs-spacing-3);
+  --fs-list-orders-filters-placed-by-selected-height                            : var(--fs-control-height);
+  --fs-list-orders-filters-placed-by-selected-padding                           : 0 var(--fs-spacing-3);
+  --fs-list-orders-filters-placed-by-selected-border                            : var(--fs-input-border-width) solid var(--fs-input-border-color);
+  --fs-list-orders-filters-placed-by-selected-radius                            : var(--fs-input-border-radius);
+  --fs-list-orders-filters-placed-by-empty-text-color                           : var(--fs-color-text-light);
+  --fs-list-orders-filters-placed-by-loader-size                                : 1.25rem;
+  --fs-list-orders-filters-placed-by-dropdown-shadow                            : 0 2px 8px rgb(0 0 0 / 10%);
+
+  position: relative;
+
+  // Clear icon inside input when actionable
+  [data-fs-list-orders-filters-placed-by-input] {
+    position: relative;
+
+    [data-fs-input] {
+      width: 100%;
+    }
+
+    [data-fs-icon-button] {
+      position: absolute;
+      top: 50%;
+      right: var(--fs-spacing-2);
+      transform: translateY(-50%);
+    }
+
+    [data-fs-list-orders-filters-placed-by-loader] {
+      position: absolute;
+      top: 50%;
+      right: var(--fs-spacing-2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transform: translateY(-50%);
+
+      [data-fs-loader] {
+        width: var(--fs-list-orders-filters-placed-by-loader-size);
+        height: var(--fs-list-orders-filters-placed-by-loader-size);
+      }
+    }
+  }
+
+  [data-fs-list-orders-filters-placed-by-dropdown] {
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+    margin-top: var(--fs-spacing-1);
+    background: var(--fs-list-orders-filters-placed-by-dropdown-bkg);
+    border: var(--fs-list-orders-filters-placed-by-dropdown-border);
+    border-radius: var(--fs-list-orders-filters-placed-by-dropdown-radius);
+    box-shadow: var(--fs-list-orders-filters-placed-by-dropdown-shadow);
+
+    &[data-fs-list-orders-filters-placed-by-empty] {
+      padding: var(--fs-spacing-3);
+
+      p {
+        margin: 0;
+        font-size: var(--fs-text-size-body);
+        font-style: italic;
+        color: var(--fs-list-orders-filters-placed-by-empty-text-color);
+        text-align: center;
+      }
+    }
+
+    ul {
+      max-height: 220px;
+      padding: 0;
+      margin: 0;
+      overflow: auto;
+      list-style: none;
+    }
+
+    [data-fs-list-orders-filters-placed-by-option] {
+      display: flex;
+      justify-content: flex-start;
+      width: 100%;
+      padding: var(--fs-list-orders-filters-placed-by-option-padding);
+      text-align: left;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+
+      &:hover, &:focus {
+        background: var(--fs-color-neutral-bkg);
+      }
+
+      [data-fs-list-orders-filters-placed-by-option-name] {
+        font-weight: var(--fs-text-weight-regular);
+      }
+    }
+  }
+}

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterSlider.tsx

@@ -13,6 +13,7 @@ import type {
   useMyAccountFilter,
 } from 'src/sdk/search/useMyAccountFilter'
 import FilterFacetDateRange from './MyAccountFilterFacetDateRange'
+import FilterFacetPlacedBy from './MyAccountFilterFacetPlacedBy'
 import styles from './section.module.scss'
 
 export interface FilterSliderProps {
@@ -91,6 +92,10 @@ function MyAccountFilterSlider({
             : [value]
         }
 
+        if (key === 'purchaseAgentId') {
+          acc['purchaseAgentId'] = value
+        }
+
         return acc
       },
       {} as Record<string, string | string[]>
@@ -132,23 +137,20 @@ function MyAccountFilterSlider({
       applyBtnProps={{
         variant: 'primary',
         onClick: () => {
-          const dateRangeFacet = dateRangeInputRef.current?.getDataRangeFacet()
-
-          const selectedFacets = [
-            ...selected,
-            dateRangeFacet.value.from.trim()
-              ? {
-                  key: 'dateInitial',
-                  value: dateRangeFacet.value.from,
-                }
-              : undefined,
-            dateRangeFacet.value.to.trim()
-              ? {
-                  key: 'dateFinal',
-                  value: dateRangeFacet.value.to,
-                }
-              : undefined,
-          ].filter(Boolean)
+          const dateRangeFacet =
+            dateRangeInputRef.current?.getDataRangeFacet?.()
+          const dateFrom = dateRangeFacet?.value?.from?.trim?.()
+          const dateTo = dateRangeFacet?.value?.to?.trim?.()
+
+          const dateFacets = []
+          if (dateFrom) {
+            dateFacets.push({ key: 'dateInitial', value: dateFrom })
+          }
+          if (dateTo) {
+            dateFacets.push({ key: 'dateFinal', value: dateTo })
+          }
+
+          const selectedFacets = [...selected, ...dateFacets]
 
           handleFilterChange({
             selectedFacets,
@@ -197,6 +199,9 @@ function MyAccountFilterSlider({
                   ))}
                 </UIFilterFacetBoolean>
               )}
+              {type === 'StoreFacetPlacedBy' && isExpanded && (
+                <FilterFacetPlacedBy selected={selected} dispatch={dispatch} />
+              )}
               {type === 'StoreFacetRange' && isExpanded && (
                 <FilterFacetDateRange
                   ref={dateRangeInputRef}

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/section.module.scss

@@ -1,5 +1,6 @@
 .section {
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
   @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
   @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
   @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
@@ -16,6 +17,7 @@
   @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
   @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
   @import "./MyAccountFilterFacetDateRange/styles.scss";
+  @import "./MyAccountFilterFacetPlacedBy/styles.scss";
 
   [data-fs-badge] {
     display: none;

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrders.tsx

@@ -39,6 +39,7 @@ export type MyAccountListOrdersProps = {
     dateFinal: string
     text: string
     clientEmail: string
+    purchaseAgentId?: string
   }
 }
 
@@ -73,6 +74,11 @@ function getSelectedFacets({
         key: 'dateFinal',
         value: String(value),
       })
+    } else if (filter === 'purchaseAgentId' && value) {
+      acc.push({
+        key: 'purchaseAgentId',
+        value: String(value),
+      })
     }
 
     return acc
@@ -96,6 +102,11 @@ function getAllFacets({
         value: status.toLowerCase(),
       })),
     },
+    {
+      __typename: 'StoreFacetPlacedBy',
+      key: 'purchaseAgentId',
+      label: 'Placed by',
+    } as any,
     {
       __typename: 'StoreFacetRange',
       key: 'dateRange',
@@ -233,6 +244,7 @@ export default function MyAccountListOrders({
             status: filters.status,
             dateInitial: filters.dateInitial,
             dateFinal: filters.dateFinal,
+            purchaseAgentId: filters.purchaseAgentId,
           }}
           onClearAll={() => {
             window.location.href = '/account/orders'
@@ -247,6 +259,8 @@ export default function MyAccountListOrders({
             } else if (key === 'dateInitial' || key === 'dateFinal') {
               delete updatedFilters.dateInitial
               delete updatedFilters.dateFinal
+            } else if (key === 'purchaseAgentId') {
+              delete updatedFilters.purchaseAgentId
             } else {
               delete updatedFilters[key]
             }
@@ -258,6 +272,8 @@ export default function MyAccountListOrders({
             } else if (key === 'dateInitial' || key === 'dateFinal') {
               delete updatedFilters.dateInitial
               delete updatedFilters.dateFinal
+            } else if (key === 'purchaseAgentId') {
+              delete updatedFilters.purchaseAgentId
             } else {
               delete updatedFilters[key]
             }

package/src/components/account/orders/MyAccountListOrders/MyAccountSelectedTags/MyAccountSelectedTags.tsx

@@ -7,10 +7,11 @@ type MyAccountSelectedTagsProps = {
     status?: string[]
     dateInitial?: string
     dateFinal?: string
+    purchaseAgentId?: string
   }
   onClearAll: () => void
   onRemoveFilter: (
-    key: 'status' | 'dateInitial' | 'dateFinal',
+    key: 'status' | 'dateInitial' | 'dateFinal' | 'purchaseAgentId',
     value: string
   ) => void
 }
@@ -40,7 +41,7 @@ function Tags({
   onRemoveFilter,
 }: Pick<MyAccountSelectedTagsProps, 'filters' | 'onRemoveFilter'>) {
   const { locale } = useSession()
-  const { dateInitial, dateFinal, status } = filters
+  const { dateInitial, dateFinal, status, purchaseAgentId } = filters
   const formattedDateInitial = dateInitial
     ? formatFilterDate(dateInitial, locale)
     : ''
@@ -85,8 +86,21 @@ function Tags({
     </div>
   ))
 
+  const placedByTag = purchaseAgentId && (
+    <div key={`placed-by-${purchaseAgentId}`} data-fs-list-orders-selected-tag>
+      <span>Placed by: {purchaseAgentId}</span>
+      <button
+        data-fs-list-orders-selected-tag-clear
+        onClick={() => onRemoveFilter('purchaseAgentId', purchaseAgentId)}
+      >
+        &times;
+      </button>
+    </div>
+  )
+
   return (
     <>
+      {placedByTag}
       {dateTag}
       {statusTags}
     </>
@@ -100,7 +114,10 @@ function MyAccountSelectedTags({
 }: MyAccountSelectedTagsProps) {
   const hasFilters = Object.entries(filters).some(
     ([key, values]) =>
-      (key === 'status' || key === 'dateInitial' || key === 'dateFinal') &&
+      (key === 'status' ||
+        key === 'dateInitial' ||
+        key === 'dateFinal' ||
+        key === 'purchaseAgentId') &&
       values &&
       (Array.isArray(values) ? values.length > 0 : true)
   )

package/src/pages/account/orders/index.tsx

@@ -46,6 +46,7 @@ type ListOrdersPageProps = {
     dateFinal: string
     text: string
     clientEmail: string
+    purchaseAgentId?: string
   }
 } & MyAccountProps
 
@@ -171,6 +172,10 @@ export const getServerSideProps: GetServerSideProps<
   const dateFinal = (context.query.dateFinal as string | undefined) || ''
   const text = (context.query.text as string | undefined) || ''
   const clientEmail = (context.query.clientEmail as string | undefined) || ''
+  // TODO: Integration: ensure `purchaseAgentId` is mapped to `purchase_agent_id`
+  // when calling the OMS API. Keep camelCase across the frontend.
+  const purchaseAgentId =
+    (context.query.purchaseAgentId as string | undefined) || ''
 
   // Map labels from FastStore status to API status
   const groupedStatus = groupOrderStatusByLabel()
@@ -246,6 +251,7 @@ export const getServerSideProps: GetServerSideProps<
         dateFinal,
         text,
         clientEmail,
+        purchaseAgentId,
       },
       isRepresentative,
     },