@nyris/nyris-webapp 0.3.98 → 0.4.0

package/src/components/PostFilter/PostFilterFindApi.test.tsx

@@ -0,0 +1,249 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import ProductList from 'components/Product/ProductList';
+import { find } from 'services/visualSearch';
+import PostFilterFindApi from './PostFilterFindApi';
+
+let mockResultState: any;
+let mockRequestState: any;
+const mockSetIsFindApiLoading = jest.fn();
+
+jest.mock('components/Accordion', () => {
+  const React = require('react');
+  const Container = ({ children }: any) =>
+    React.createElement('div', null, children);
+  return {
+    AccordionContent: Container,
+    AccordionItem: Container,
+    AccordionTrigger: Container,
+  };
+});
+jest.mock('@nyris/nyris-react-components', () => ({ Icon: () => null }));
+jest.mock('@auth0/auth0-react', () => ({ useAuth0: () => ({}) }));
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (value: string) => value }),
+}));
+jest.mock('stores/result/resultStore', () => ({
+  __esModule: true,
+  default: Object.assign((selector: any) => selector(mockResultState), {
+    getState: () => mockResultState,
+  }),
+}));
+jest.mock('stores/request/requestStore', () => ({
+  __esModule: true,
+  default: Object.assign((selector: any) => selector(mockRequestState), {
+    getState: () => mockRequestState,
+  }),
+}));
+jest.mock('stores/ui/uiStore', () => ({
+  __esModule: true,
+  default: (selector: any) =>
+    selector({ setIsFindApiLoading: mockSetIsFindApiLoading }),
+}));
+jest.mock('stores/scope/scopeStore', () => ({
+  __esModule: true,
+  default: (selector: any) => selector({ filterAttributes: [] }),
+}));
+jest.mock('services/visualSearch', () => ({ find: jest.fn() }));
+jest.mock('services/Feedback', () => ({ trackClick: jest.fn() }));
+jest.mock('hooks/useImageSearch', () => ({
+  useImageSearch: () => ({ singleImageSearch: jest.fn() }),
+}));
+jest.mock('hooks/useEffectiveGroundingResults', () => ({
+  useEffectiveGroundingResults: () => [],
+}));
+jest.mock('components/Product/Product', () => ({
+  __esModule: true,
+  default: ({ dataItem }: any) => (
+    <div data-testid="product">{dataItem.sku}</div>
+  ),
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  window.settings = {
+    algolia: { enabled: false },
+    postFilterOption: true,
+    scopeFilter: false,
+  } as typeof window.settings;
+  mockResultState = {
+    productsFromAlgolia: [],
+    productsFromFindApi: [
+      { sku: '1', filters: { brand: ['Alpha'], color: ['Red'] } },
+      { sku: '2', filters: { brand: ['Alpha'], color: ['Blue'] } },
+      { sku: '3', filters: { brand: ['Beta'], color: ['Red'] } },
+      { sku: '4' },
+    ],
+    postFilterFacets: [
+      { name: 'BRAND', values: [{ value: 'Facet only', count: 99 }] },
+    ],
+    groundingFilterResult: [],
+    showingGroundingFilterResult: false,
+    setFindApiProducts: jest.fn(),
+  };
+  mockRequestState = {
+    postFilterSelections: {},
+    query: 'search',
+    requestImages: [],
+    regions: [],
+    preFilter: {},
+    preFilterList: [],
+    setPostFilterSelections: jest.fn(),
+    togglePostFilterSelection: jest.fn(),
+  };
+  (find as jest.Mock).mockResolvedValue({ results: [] });
+});
+
+test('builds text-search options and counts from product filters, not facets', () => {
+  render(
+    <PostFilterFindApi attribute="brand" label="Brand" searchable={false} />,
+  );
+
+  expect(screen.getByLabelText(/Alpha\s*\(2\)/)).toBeInTheDocument();
+  expect(screen.getByLabelText(/Beta\s*\(1\)/)).toBeInTheDocument();
+  expect(screen.queryByText('Facet only')).not.toBeInTheDocument();
+});
+
+test.each([undefined, false])(
+  'toggles selections locally when API mode is %s',
+  postFilterUseApi => {
+    window.settings.postFilterUseApi = postFilterUseApi;
+    render(
+      <PostFilterFindApi attribute="brand" label="Brand" searchable={false} />,
+    );
+
+    fireEvent.click(screen.getByLabelText(/Alpha\s*\(2\)/));
+
+    expect(mockRequestState.togglePostFilterSelection).toHaveBeenCalledWith(
+      'brand',
+      'Alpha',
+    );
+    expect(find).not.toHaveBeenCalled();
+    expect(mockResultState.setFindApiProducts).not.toHaveBeenCalled();
+    expect(mockSetIsFindApiLoading).not.toHaveBeenCalled();
+  },
+);
+
+test('uses metadata facets and requests filtered results when API mode is enabled', async () => {
+  window.settings.postFilterUseApi = true;
+  render(
+    <PostFilterFindApi attribute="brand" label="Brand" searchable={false} />,
+  );
+
+  expect(screen.queryByText('Alpha')).not.toBeInTheDocument();
+  fireEvent.click(screen.getByLabelText(/Facet only\s*\(99\)/));
+  expect(mockRequestState.setPostFilterSelections).toHaveBeenCalledWith({
+    brand: ['Facet only'],
+  });
+  expect(find).toHaveBeenCalledWith(
+    expect.objectContaining({
+      text: 'search',
+      filters: [{ key: 'BRAND', values: ['Facet only'] }],
+    }),
+  );
+  await waitFor(() => {
+    expect(mockResultState.setFindApiProducts).toHaveBeenCalledWith([]);
+  });
+});
+
+test('does not client-filter server results when API mode is enabled', () => {
+  window.settings.postFilterUseApi = true;
+  mockRequestState.postFilterSelections = { brand: ['Facet only'] };
+  render(<ProductList />);
+
+  expect(screen.getAllByTestId('product')).toHaveLength(4);
+});
+
+test('restores initial results and ignores pending API responses when filters clear', async () => {
+  window.settings.postFilterUseApi = true;
+  const initialResults = mockResultState.productsFromFindApi;
+  mockResultState.initialFindSearchSnapshot = { results: initialResults };
+  mockRequestState.setPostFilterSelections.mockImplementation(
+    (selections: any) => {
+      mockRequestState.postFilterSelections = selections;
+    },
+  );
+  let resolveFind!: (response: any) => void;
+  (find as jest.Mock).mockReturnValue(
+    new Promise(resolve => {
+      resolveFind = resolve;
+    }),
+  );
+  const { rerender } = render(
+    <PostFilterFindApi attribute="brand" label="Brand" searchable={false} />,
+  );
+
+  fireEvent.click(screen.getByLabelText(/Facet only\s*\(99\)/));
+  rerender(
+    <PostFilterFindApi attribute="brand" label="Brand" searchable={false} />,
+  );
+  fireEvent.click(screen.getByLabelText(/Facet only\s*\(99\)/));
+  expect(mockRequestState.postFilterSelections).toEqual({});
+  expect(mockResultState.setFindApiProducts).toHaveBeenCalledWith(
+    initialResults,
+  );
+  expect(mockSetIsFindApiLoading).toHaveBeenLastCalledWith(false);
+
+  await act(async () => {
+    resolveFind({ results: [{ sku: 'stale' }] });
+  });
+  expect(find).toHaveBeenCalledTimes(1);
+  expect(mockResultState.setFindApiProducts).toHaveBeenCalledTimes(1);
+});
+
+test.each([[[]], [['image']]])(
+  'updates counts under other selections with request images %j',
+  requestImages => {
+    mockRequestState.requestImages = requestImages;
+    mockRequestState.query = '';
+    mockRequestState.postFilterSelections = { color: ['Red'] };
+    render(
+      <PostFilterFindApi attribute="brand" label="Brand" searchable={false} />,
+    );
+
+    expect(screen.getByLabelText(/Alpha\s*\(1\)/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Beta\s*\(1\)/)).toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Alpha\s*\(1\)/));
+    expect(mockRequestState.togglePostFilterSelection).toHaveBeenCalledWith(
+      'brand',
+      'Alpha',
+    );
+    expect(find).not.toHaveBeenCalled();
+  },
+);
+
+test('filters existing text-search results and restores them when selections clear', () => {
+  const sourceProducts = mockResultState.productsFromFindApi;
+  const { rerender } = render(<ProductList />);
+  const displayedSkus = () =>
+    screen.queryAllByTestId('product').map(product => product.textContent);
+
+  expect(displayedSkus()).toEqual(['1', '2', '3', '4']);
+
+  mockRequestState.postFilterSelections = { brand: ['Alpha', 'Beta'] };
+  rerender(<ProductList />);
+  expect(displayedSkus()).toEqual(['1', '2', '3']);
+
+  mockRequestState.postFilterSelections = {
+    brand: ['Alpha'],
+    color: ['Red'],
+  };
+  rerender(<ProductList />);
+  expect(displayedSkus()).toEqual(['1']);
+
+  mockRequestState.postFilterSelections = { brand: ['Missing'] };
+  rerender(<ProductList />);
+  expect(displayedSkus()).toEqual([]);
+
+  mockRequestState.postFilterSelections = {};
+  rerender(<ProductList />);
+  expect(displayedSkus()).toEqual(['1', '2', '3', '4']);
+  expect(mockResultState.productsFromFindApi).toBe(sourceProducts);
+  expect(mockResultState.setFindApiProducts).not.toHaveBeenCalled();
+  expect(find).not.toHaveBeenCalled();
+});

package/src/components/PostFilter/PostFilterFindApi.tsx

@@ -6,13 +6,16 @@ import {
 } from 'components/Accordion';
 import { Icon } from '@nyris/nyris-react-components';
 import { useTranslation } from 'react-i18next';
+import { useAuth0 } from '@auth0/auth0-react';
 import { isEmpty } from 'lodash';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
 import useUiStore from 'stores/ui/uiStore';
 import useScopeStore from 'stores/scope/scopeStore';
 import { find } from 'services/visualSearch';
-import { useAuth0 } from '@auth0/auth0-react';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
+import { filterProductsByText } from 'utils/textSearchFilter';
 
 let postFilterRequestCounter = 0;
 
@@ -34,15 +37,26 @@ function PostFilterFindApi({
   isLastVisible?: boolean;
 }) {
   const { user } = useAuth0();
-
   const [itemsLimit, setItemsLimit] = useState(10);
   const [searchInput, setSearchInput] = useState<string>('');
 
+  const productsFromFindApi = useResultStore(
+    state => state.productsFromFindApi,
+  );
+  const groundingFilterResult = useResultStore(
+    state => state.groundingFilterResult,
+  );
+  const showingGroundingFilterResult = useResultStore(
+    state => state.showingGroundingFilterResult,
+  );
   const postFilterFacets = useResultStore(state => state.postFilterFacets);
   const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
   const setPostFilterSelections = useRequestStore(
     state => state.setPostFilterSelections,
   );
+  const togglePostFilterSelection = useRequestStore(
+    state => state.togglePostFilterSelection,
+  );
   const postFilterSelections = useRequestStore(
     state => state.postFilterSelections,
   );
@@ -55,6 +69,9 @@ function PostFilterFindApi({
   const setIsFindApiLoading = useUiStore(state => state.setIsFindApiLoading);
   const { t } = useTranslation();
   const settings = window.settings;
+  const isImageSearch = requestImages?.length > 0;
+  const useApiPostFilters =
+    !settings.algolia?.enabled && settings.postFilterUseApi === true;
 
   const scopeFilterEnabled = settings.scopeFilter;
   const scopeFilterAttributes = useScopeStore(state => state.filterAttributes);
@@ -73,35 +90,86 @@ function PostFilterFindApi({
     );
   }, [scopeFilterEnabled, scopeFilterAttributes]);
 
-  const matchedFacet = useMemo(() => {
-    const facets = Array.isArray(postFilterFacets) ? postFilterFacets : [];
-    return facets.find(
-      (entry: { name?: string }) =>
-        entry.name?.toLocaleLowerCase() === attribute.toLocaleLowerCase(),
+  const productsForFilters = useMemo(() => {
+    if (!isImageSearch) {
+      return productsFromFindApi;
+    }
+
+    let baseProducts = productsFromFindApi;
+
+    if (query?.trim()) {
+      baseProducts = filterProductsByText(query, productsFromFindApi);
+    }
+
+    if (showingGroundingFilterResult && groundingFilterResult?.length > 0) {
+      const grounded = baseProducts.filter((product: any) =>
+        groundingFilterResult.some((result: any) => product.sku === result.sku),
+      );
+      if (grounded.length > 0) {
+        return grounded;
+      }
+    }
+
+    return baseProducts;
+  }, [
+    isImageSearch,
+    productsFromFindApi,
+    query,
+    showingGroundingFilterResult,
+    groundingFilterResult,
+  ]);
+
+  const filteredProductsForCounts = useMemo(() => {
+    const selections = postFilterSelections || {};
+    const activeSelections = Object.entries(selections).filter(
+      ([attr, values]) =>
+        attr !== attribute && Array.isArray(values) && values.length > 0,
     );
-  }, [attribute, postFilterFacets]);
 
-  const preFilterApiKey =
-    preFilterList.find(
-      filter =>
-        filter.key?.toLocaleLowerCase() ===
-        settings.visualSearchFilterKey?.toLocaleLowerCase(),
-    )?.key ?? settings.visualSearchFilterKey;
+    if (!activeSelections.length) {
+      return productsForFilters;
+    }
+
+    return productsForFilters.filter((product: any) =>
+      activeSelections.every(([attr, values]) => {
+        const filterValues = product.filters?.[attr];
+        if (!Array.isArray(filterValues) || filterValues.length === 0) {
+          return false;
+        }
+        return values.some(value => filterValues.includes(value));
+      }),
+    );
+  }, [attribute, postFilterSelections, productsForFilters]);
 
   const valueCounts = useMemo(() => {
     const counts: Record<string, number> = {};
 
-    (matchedFacet?.values || []).forEach(
-      (entry: { value?: string; count?: number }) => {
-        const value = entry?.value;
-        if (value) {
-          counts[value] = entry.count ?? 0;
-        }
-      },
-    );
+    if (useApiPostFilters) {
+      const facet = postFilterFacets?.find(
+        entry =>
+          entry.name?.toLocaleLowerCase() === attribute.toLocaleLowerCase(),
+      );
+      (facet?.values || []).forEach(
+        (entry: { value?: string; count?: number }) => {
+          if (entry.value) {
+            counts[entry.value] = entry.count ?? 0;
+          }
+        },
+      );
+      return counts;
+    }
+
+    filteredProductsForCounts?.forEach((product: any) => {
+      const filterValues = product.filters?.[attribute];
+      if (Array.isArray(filterValues)) {
+        filterValues.forEach((val: string) => {
+          if (val) counts[val] = (counts[val] || 0) + 1;
+        });
+      }
+    });
 
     return counts;
-  }, [matchedFacet]);
+  }, [attribute, filteredProductsForCounts, postFilterFacets, useApiPostFilters]);
 
   const items = useMemo(() => {
     const selectedValues = postFilterSelections?.[attribute] || [];
@@ -151,63 +219,63 @@ function PostFilterFindApi({
   }, [attribute, isVisible, onVisibilityChange]);
 
   const handleFilterClick = (value: string, isRefined: boolean) => {
+    if ((!isImageSearch || useApiPostFilters) && !isRefined) {
+      trackClick(CLICK_SUBTYPE.FILTER_APPLIED);
+    }
+
+    if (!useApiPostFilters) {
+      togglePostFilterSelection(attribute, value);
+      return;
+    }
+
     const currentSelections =
       useRequestStore.getState().postFilterSelections || {};
-    const currentAttributeValues = currentSelections[attribute] || [];
-    const nextAttributeValues = isRefined
-      ? currentAttributeValues.filter(item => item !== value)
-      : [...currentAttributeValues, value];
-
+    const currentValues = currentSelections[attribute] || [];
+    const nextValues = isRefined
+      ? currentValues.filter(item => item !== value)
+      : [...currentValues, value];
     const nextSelections = { ...currentSelections };
-    if (nextAttributeValues.length > 0) {
-      nextSelections[attribute] = nextAttributeValues;
+    if (nextValues.length > 0) {
+      nextSelections[attribute] = nextValues;
     } else {
       delete nextSelections[attribute];
     }
-
     setPostFilterSelections(nextSelections);
 
-    const hasAnySelection = Object.values(nextSelections).some(
-      values => values.length > 0,
-    );
-
-    if (!hasAnySelection) {
+    const requestId = ++postFilterRequestCounter;
+    if (!Object.values(nextSelections).some(values => values.length > 0)) {
       const snapshot = useResultStore.getState().initialFindSearchSnapshot;
       if (snapshot) {
         setFindApiProducts(snapshot.results);
       }
+      setIsFindApiLoading(false);
       return;
     }
 
-    const facets = useResultStore.getState().postFilterFacets || [];
+    const preFilterApiKey =
+      preFilterList.find(
+        filter =>
+          filter.key?.toLocaleLowerCase() ===
+          settings.visualSearchFilterKey?.toLocaleLowerCase(),
+      )?.key ?? settings.visualSearchFilterKey;
     const filters = [];
-
     if (!isEmpty(preFilter)) {
       filters.push({
         key: preFilterApiKey,
         values: Object.keys(preFilter).filter(key => preFilter[key]),
       });
     } else if (metaFilter) {
-      filters.push({
-        key: preFilterApiKey,
-        values: [metaFilter],
-      });
+      filters.push({ key: preFilterApiKey, values: [metaFilter] });
     }
-
     Object.entries(nextSelections).forEach(([attr, values]) => {
       if (values.length > 0) {
-        const facet = facets.find(
-          (entry: { name?: string }) =>
-            entry.name?.toLocaleLowerCase() === attr.toLocaleLowerCase(),
+        const facet = useResultStore.getState().postFilterFacets?.find(
+          entry => entry.name?.toLocaleLowerCase() === attr.toLocaleLowerCase(),
         );
-        filters.push({
-          key: facet?.name ?? attr,
-          values,
-        });
+        filters.push({ key: facet?.name ?? attr, values });
       }
     });
 
-    const requestId = ++postFilterRequestCounter;
     setIsFindApiLoading(true);
     void find({
       image: requestImages[0],
@@ -215,14 +283,22 @@ function PostFilterFindApi({
       region: regions[0],
       filters,
       text: !requestImages[0] ? query : undefined,
-      scopeIds: window.settings?.scopeFilter ? user?.email : undefined,
+      scopeIds: settings.scopeFilter ? user?.email : undefined,
     })
       .then(response => {
         if (requestId !== postFilterRequestCounter) {
           return;
         }
         setFindApiProducts(response?.results || []);
+        if (response?.id) {
+          const session = useResultStore.getState();
+          session.setRequestId(response.id);
+          if (response.session) {
+            session.setSessionId(response.session);
+          }
+        }
       })
+      .catch(() => undefined)
       .finally(() => {
         if (requestId === postFilterRequestCounter) {
           setIsFindApiLoading(false);

package/src/components/PreFilter/PreFilter.tsx

@@ -10,7 +10,9 @@ import { truncateString } from 'utils/truncateString';
 import { twMerge } from 'tailwind-merge';
 import Tooltip from 'components/Tooltip/TooltipComponent';
 import useResultStore from '../../stores/result/resultStore';
-import useScopeStore from 'stores/scope/scopeStore';
+import useScopeStore, { hasActiveMachineScope } from 'stores/scope/scopeStore';
+import { trackClick } from 'services/Feedback';
+import { CLICK_SUBTYPE } from 'services/feedbackSubtypes';
 
 interface Props {
   handleClose?: any;
@@ -172,6 +174,9 @@ const PreFilterComponent = (props: Props) => {
     setPreFilter(preFilter);
 
     const preFilterValues = Object.keys(preFilter) as string[];
+    if (preFilterValues.length > 0) {
+      trackClick(CLICK_SUBTYPE.PRE_FILTER_APPLIED);
+    }
     const filter =
       preFilterValues.length > 0
         ? preFilterValues
@@ -192,7 +197,10 @@ const PreFilterComponent = (props: Props) => {
 
     handleClose();
     const query = useRequestStore.getState().query;
-    if (!window.settings?.algolia.enabled && requestImages.length === 0) {
+    if (
+      requestImages.length === 0 &&
+      (hasActiveMachineScope() || !window.settings?.algolia.enabled)
+    ) {
       singleImageSearch({
         image: requestImages[0],
         imageRegion: regions[0],