@nyris/nyris-webapp 0.3.95 → 0.3.97

package/src/components/PostFilter/PostFilterFindApi.tsx

@@ -6,9 +6,19 @@ import {
 } from 'components/Accordion';
 import { Icon } from '@nyris/nyris-react-components';
 import { useTranslation } from 'react-i18next';
+import { isEmpty } from 'lodash';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
-import { filterProductsByText } from 'utils/textSearchFilter';
+import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
+import { find } from 'services/visualSearch';
+import { useAuth0 } from '@auth0/auth0-react';
+
+let postFilterRequestCounter = 0;
+
+export function invalidatePostFilterRequests() {
+  postFilterRequestCounter += 1;
+}
 
 function PostFilterFindApi({
   attribute,
@@ -23,87 +33,75 @@ function PostFilterFindApi({
   onVisibilityChange?: (attribute: string, isVisible: boolean) => void;
   isLastVisible?: boolean;
 }) {
+  const { user } = useAuth0();
+
   const [itemsLimit, setItemsLimit] = useState(10);
   const [searchInput, setSearchInput] = useState<string>('');
 
-  const productsFromFindApi = useResultStore(
-    state => state.productsFromFindApi,
+  const postFilterFacets = useResultStore(state => state.postFilterFacets);
+  const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
+  const setPostFilterSelections = useRequestStore(
+    state => state.setPostFilterSelections,
   );
-  const groundingFilterResult = useResultStore(
-    state => state.groundingFilterResult,
-  );
-  const showingGroundingFilterResult = useResultStore(
-    state => state.showingGroundingFilterResult,
-  );
-  const query = useRequestStore(state => state.query);
-  const requestImages = useRequestStore(state => state.requestImages);
   const postFilterSelections = useRequestStore(
     state => state.postFilterSelections,
   );
-  const togglePostFilterSelection = useRequestStore(
-    state => state.togglePostFilterSelection,
-  );
+  const query = useRequestStore(state => state.query);
+  const requestImages = useRequestStore(state => state.requestImages);
+  const regions = useRequestStore(state => state.regions);
+  const preFilter = useRequestStore(state => state.preFilter);
+  const preFilterList = useRequestStore(state => state.preFilterList);
+  const metaFilter = useRequestStore(state => state.metaFilter);
+  const setIsFindApiLoading = useUiStore(state => state.setIsFindApiLoading);
   const { t } = useTranslation();
+  const settings = window.settings;
 
-  const productsForFilters = useMemo(() => {
-    let baseProducts = productsFromFindApi;
+  const scopeFilterEnabled = settings.scopeFilter;
+  const scopeFilterAttributes = useScopeStore(state => state.filterAttributes);
 
-    if (requestImages?.length && query?.trim()) {
-      baseProducts = filterProductsByText(query, productsFromFindApi);
+  const scopedAllowedValues = useMemo(() => {
+    if (!scopeFilterEnabled || !window.settings.auth0?.enabled) {
+      return null;
     }
-
-    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;
-      }
+    // todo: support multiple attributes in the future
+    const scopeAttribute = scopeFilterAttributes[0];
+    if (!scopeAttribute) {
+      return new Set<string>();
     }
-
-    return baseProducts;
-  }, [
-    productsFromFindApi,
-    query,
-    requestImages,
-    showingGroundingFilterResult,
-    groundingFilterResult,
-  ]);
-
-  const filteredProductsForCounts = useMemo(() => {
-    const selections = postFilterSelections || {};
-    const activeSelections = Object.entries(selections).filter(
-      ([attr, values]) => attr !== attribute && Array.isArray(values),
+    return new Set(
+      scopeAttribute.values.map(value => value.toLocaleLowerCase()),
     );
+  }, [scopeFilterEnabled, scopeFilterAttributes]);
 
-    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));
-      }),
+  const matchedFacet = useMemo(() => {
+    const facets = Array.isArray(postFilterFacets) ? postFilterFacets : [];
+    return facets.find(
+      (entry: { name?: string }) =>
+        entry.name?.toLocaleLowerCase() === attribute.toLocaleLowerCase(),
     );
-  }, [attribute, postFilterSelections, productsForFilters]);
+  }, [attribute, postFilterFacets]);
+
+  const preFilterApiKey =
+    preFilterList.find(
+      filter =>
+        filter.key?.toLocaleLowerCase() ===
+        settings.visualSearchFilterKey?.toLocaleLowerCase(),
+    )?.key ?? settings.visualSearchFilterKey;
 
   const valueCounts = useMemo(() => {
     const counts: Record<string, number> = {};
-    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;
-        });
-      }
-    });
+
+    (matchedFacet?.values || []).forEach(
+      (entry: { value?: string; count?: number }) => {
+        const value = entry?.value;
+        if (value) {
+          counts[value] = entry.count ?? 0;
+        }
+      },
+    );
 
     return counts;
-  }, [attribute, filteredProductsForCounts]);
+  }, [matchedFacet]);
 
   const items = useMemo(() => {
     const selectedValues = postFilterSelections?.[attribute] || [];
@@ -119,6 +117,11 @@ function PostFilterFindApi({
         count: valueCounts[label] || 0,
         isRefined: selectedValues.includes(label),
       }))
+      .filter(
+        item =>
+          !scopedAllowedValues ||
+          scopedAllowedValues.has(item.value.toLocaleLowerCase()),
+      )
       .filter(
         item =>
           !searchInput ||
@@ -126,18 +129,107 @@ function PostFilterFindApi({
       )
       .sort((a, b) => b.count - a.count || a.label.localeCompare(b.label))
       .slice(0, itemsLimit);
-  }, [attribute, itemsLimit, postFilterSelections, searchInput, valueCounts]);
+  }, [
+    attribute,
+    itemsLimit,
+    postFilterSelections,
+    scopedAllowedValues,
+    searchInput,
+    valueCounts,
+  ]);
 
   const selectedValues = postFilterSelections?.[attribute] || [];
   const hasSelection = selectedValues.length > 0;
   const hasAvailableValues = Object.keys(valueCounts).length > 0;
   const hasSearch = searchable && searchInput.length > 0;
-  const isVisible = hasAvailableValues || hasSelection || hasSearch;
+  const isVisible =
+    (!scopedAllowedValues || scopedAllowedValues.size > 0) &&
+    (hasAvailableValues || hasSelection || hasSearch);
 
   useEffect(() => {
     onVisibilityChange?.(attribute, isVisible);
   }, [attribute, isVisible, onVisibilityChange]);
 
+  const handleFilterClick = (value: string, isRefined: boolean) => {
+    const currentSelections =
+      useRequestStore.getState().postFilterSelections || {};
+    const currentAttributeValues = currentSelections[attribute] || [];
+    const nextAttributeValues = isRefined
+      ? currentAttributeValues.filter(item => item !== value)
+      : [...currentAttributeValues, value];
+
+    const nextSelections = { ...currentSelections };
+    if (nextAttributeValues.length > 0) {
+      nextSelections[attribute] = nextAttributeValues;
+    } else {
+      delete nextSelections[attribute];
+    }
+
+    setPostFilterSelections(nextSelections);
+
+    const hasAnySelection = Object.values(nextSelections).some(
+      values => values.length > 0,
+    );
+
+    if (!hasAnySelection) {
+      const snapshot = useResultStore.getState().initialFindSearchSnapshot;
+      if (snapshot) {
+        setFindApiProducts(snapshot.results);
+      }
+      return;
+    }
+
+    const facets = useResultStore.getState().postFilterFacets || [];
+    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],
+      });
+    }
+
+    Object.entries(nextSelections).forEach(([attr, values]) => {
+      if (values.length > 0) {
+        const facet = facets.find(
+          (entry: { name?: string }) =>
+            entry.name?.toLocaleLowerCase() === attr.toLocaleLowerCase(),
+        );
+        filters.push({
+          key: facet?.name ?? attr,
+          values,
+        });
+      }
+    });
+
+    const requestId = ++postFilterRequestCounter;
+    setIsFindApiLoading(true);
+    void find({
+      image: requestImages[0],
+      settings,
+      region: regions[0],
+      filters,
+      text: !requestImages[0] ? query : undefined,
+      scopeIds: window.settings?.scopeFilter ? user?.email : undefined,
+    })
+      .then(response => {
+        if (requestId !== postFilterRequestCounter) {
+          return;
+        }
+        setFindApiProducts(response?.results || []);
+      })
+      .finally(() => {
+        if (requestId === postFilterRequestCounter) {
+          setIsFindApiLoading(false);
+        }
+      });
+  };
+
   if (!isVisible) {
     return null;
   }
@@ -209,7 +301,7 @@ function PostFilterFindApi({
                     type="checkbox"
                     checked={item.isRefined}
                     onChange={() =>
-                      togglePostFilterSelection(attribute, item.value)
+                      handleFilterClick(item.value, item.isRefined)
                     }
                     className="cursor-pointer"
                   />

package/src/components/PreFilter/PreFilter.tsx

@@ -10,6 +10,7 @@ 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';
 
 interface Props {
   handleClose?: any;
@@ -42,6 +43,9 @@ const PreFilterComponent = (props: Props) => {
   const setImageAnalysis = useResultStore(state => state.setImageAnalysis);
   const regions = useRequestStore(state => state.regions);
 
+  const scopeFilterEnabled = !!settings.scopeFilter;
+  const scopeFilterAttributes = useScopeStore(state => state.filterAttributes);
+
   const [keyFilter, setKeyFilter] = useState<Record<string, boolean>>(
     keyFilterState || {},
   );
@@ -66,7 +70,7 @@ const PreFilterComponent = (props: Props) => {
     setLoading(true);
     getDataFilterDesktop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preFilterList, searchKey]);
+  }, [preFilterList, scopeFilterAttributes, searchKey]);
 
   useEffect(() => {
     return () => {
@@ -76,10 +80,20 @@ const PreFilterComponent = (props: Props) => {
     };
   }, []);
 
+  const activeFilterList = scopeFilterEnabled
+    ? scopeFilterAttributes
+    : preFilterList;
+
+  const matchedPreFilter = activeFilterList.find(
+    value =>
+      value.key?.toLocaleLowerCase() ===
+      settings.visualSearchFilterKey?.toLocaleLowerCase(),
+  );
+  const preFilterApiKey =
+    matchedPreFilter?.key ?? settings.visualSearchFilterKey;
+
   const getDataFilterDesktop = () => {
-    const arrResult =
-      preFilterList.find(value => value.key === settings.visualSearchFilterKey)
-        ?.values || [];
+    const arrResult = matchedPreFilter?.values || [];
 
     const newResult = arrResult.sort().reduce((a: any, c: any) => {
       if (!c[0]) return a;
@@ -99,8 +113,28 @@ const PreFilterComponent = (props: Props) => {
       return;
     }
     setLoading(true);
+
+    if (scopeFilterEnabled) {
+      const arrResult = matchedPreFilter?.values || [];
+      const lowerValue = String(value).toLocaleLowerCase();
+      const res = arrResult.filter(item =>
+        String(item).toLocaleLowerCase().includes(lowerValue),
+      );
+      if (res.length > 0) {
+        setResultFilter({ [res[0][0].toLocaleUpperCase()]: res });
+        if (res.length <= 20) setColumns(1);
+        else if (res.length <= 40) setColumns(2);
+        else setColumns(4);
+      } else {
+        setResultFilter({});
+        setColumns(4);
+      }
+      setLoading(false);
+      return;
+    }
+
     const data = await searchFilters(
-      settings.visualSearchFilterKey,
+      preFilterApiKey,
       encodeURIComponent(value),
       settings,
     )

package/src/components/Product/Product.tsx

@@ -673,7 +673,7 @@ function Product(props: Props) {
                 </div>
               )}
 
-              {settings.cart && (
+              {settings.cart?.enabled && (
                 <div
                   style={{
                     boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
@@ -717,7 +717,7 @@ function Product(props: Props) {
                         paddingRight: '8px',
                       }}
                     >
-                      Add to cart
+                      {settings.cart?.buttonText || 'Add to cart'}
                     </div>
                     <div style={{ width: '16px' }}>
                       <Icon

package/src/components/Product/ProductDetailView.tsx

@@ -456,7 +456,7 @@ function ProductDetailView(props: Props) {
                       </div>
                     )}
                   </div>
-                  {settings.cart && (
+                  {settings.cart?.enabled && (
                     <div
                       className="bg-[#2B2C46] rounded mt-2 flex justify-between items-center h-8 desktop:h-12 w-full btn-detail-item"
                       style={{
@@ -472,7 +472,7 @@ function ProductDetailView(props: Props) {
                         }}
                       >
                         <div className="text-f16 fw-600 max-line-1 text-white pr-1.5">
-                          Add to cart
+                          {settings.cart?.buttonText || 'Add to cart'}
                         </div>
                         <div style={{ width: '16px' }}>
                           <Icon

package/src/components/Product/ProductList.tsx

@@ -63,6 +63,10 @@ function ProductList({ sendFeedBackAction }: Props): JSX.Element {
   }, [productsFromFindApi, query, requestImages]);
 
   const postFilteredProducts = useMemo(() => {
+    if (!window.settings.algolia?.enabled && window.settings.postFilterOption) {
+      return textFilteredProducts;
+    }
+
     const entries = Object.entries(postFilterSelections || {}).filter(
       ([, values]) => values?.length,
     );

package/src/components/ScopeMissing.tsx

@@ -0,0 +1,50 @@
+const ScopeMissing = () => {
+  const { supportEmail } = window.settings.auth0;
+
+  return (
+    <div className="pl-8 desktop:pl-16 pt-6 desktop:pt-8 flex flex-col gap-4 bg-white h-full">
+      <div
+        style={{
+          fontSize: '20px',
+          fontWeight: 'bold',
+          color: '#2B2C46',
+        }}
+      >
+        Access Denied
+      </div>
+
+      <div
+        style={{
+          width: '200px',
+          height: '4px',
+          borderRadius: '4px',
+        }}
+        className="bg-red-500"
+      />
+
+      <p style={{ color: '#2B2C46', fontSize: '13px' }}>
+        You do not have access to the {window.settings.visualSearchFilterKey}.
+        If you believe this is an error, please contact support.
+      </p>
+      <a
+        className="contact-support"
+        style={{
+          backgroundColor: '#2B2C46',
+          padding: '8px 16px 8px 16px',
+          color: '#fff',
+          border: 'none',
+          cursor: 'pointer',
+          fontSize: '14px',
+          width: 'fit-content',
+        }}
+        href={`mailto:${
+          supportEmail || 'support@nyris.io'
+        }?subject=Access Denied&body=`}
+      >
+        Contact Support
+      </a>
+    </div>
+  );
+};
+
+export default ScopeMissing;

package/src/components/SmartFilter.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import ItemSpecification from './ItemSpecification';
 import { Icon } from '@nyris/nyris-react-components';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
@@ -19,8 +18,12 @@ function SmartFilter({
   const isSmartFiltersEnabled = !!settings.useSmartFilters;
   const smartFilters = useResultStore(state => state.smartFilters);
   const setSmartFilters = useResultStore(state => state.setSmartFilters);
-  const productsFromFindApi = useResultStore(state => state.productsFromFindApi);
-  const productsFromAlgolia = useResultStore(state => state.productsFromAlgolia);
+  const productsFromFindApi = useResultStore(
+    state => state.productsFromFindApi,
+  );
+  const productsFromAlgolia = useResultStore(
+    state => state.productsFromAlgolia,
+  );
   const firstSearchResults = useResultStore(state => state.firstSearchResults);
   const setFindApiProducts = useResultStore(state => state.setFindApiProducts);
   const setAlgoliaProducts = useResultStore(state => state.setAlgoliaProducts);
@@ -194,7 +197,10 @@ function SmartFilter({
         return;
       }
 
-      if (rerankedSkus.length === 0 || !applySkuOrderingToCurrentResults(rerankedSkus)) {
+      if (
+        rerankedSkus.length === 0 ||
+        !applySkuOrderingToCurrentResults(rerankedSkus)
+      ) {
         setSmartFilters({
           ...smartFilters,
           selectedFilterKey: filter.key,
@@ -214,7 +220,9 @@ function SmartFilter({
         errorMessage: null,
       });
     } catch (error: any) {
-      const timeout = String(error?.message || '').includes('SMART_FILTER_TIMEOUT');
+      const timeout = String(error?.message || '').includes(
+        'SMART_FILTER_TIMEOUT',
+      );
       setSmartFilters({
         ...smartFilters,
         selectedFilterKey: filter.key,
@@ -241,25 +249,7 @@ function SmartFilter({
         </div>
         <Icon name="smart_filter_indication" className="mt-1" />
       </div>
-      <div className={`flex flex-wrap mx-4 gap-2 ${imageAnalysis?.specification ? 'mt-4' : ''}`}>
-        {Object.keys(imageAnalysis?.specification || {})
-          .filter(key => key !== 'is_nameplate' && key !== 'prefilter_value')
-          .map(key => {
-            const value = imageAnalysis?.specification[key];
-            if (!value) {
-              return null;
-            }
-            return (
-              <ItemSpecification
-                key={key}
-                attr={key}
-                value={value}
-                specificationFilter={specificationFilter}
-                imageAnalysis={imageAnalysis}
-              />
-            );
-          })}
-      </div>
+
       {smartFilters.status === 'loading' && (
         <div className="ml-[30px] mt-3 text-xs text-[#3E36DC]">
           Loading smart filters...
@@ -270,11 +260,12 @@ function SmartFilter({
           {smartFilters.errorMessage || 'Could not generate smart filters.'}
         </div>
       )}
-      {smartFilters.status === 'success' && smartFilters.filters.length === 0 && (
-        <div className="ml-[30px] mt-3 text-xs text-[#767A9F]">
-          No smart filters available for this image.
-        </div>
-      )}
+      {smartFilters.status === 'success' &&
+        smartFilters.filters.length === 0 && (
+          <div className="ml-[30px] mt-3 text-xs text-[#767A9F]">
+            No smart filters available for this image.
+          </div>
+        )}
       <div
         className={
           variant === 'results'
@@ -298,47 +289,46 @@ function SmartFilter({
               ? 'flex flex-row flex-nowrap gap-2 pb-1'
               : 'flex flex-row flex-wrap gap-2 pb-1'
           }
-          style={variant === 'results' ? { width: 'max-content' } : { width: 'auto' }}
+          style={
+            variant === 'results' ? { width: 'max-content' } : { width: 'auto' }
+          }
         >
-        {smartFilters.filters.map((filter, index) => {
-          const isSelected =
-            smartFilters.selectedFilterKey === filter.key &&
-            smartFilters.selectedFilterValue === filter.value;
-          const hasSelection =
-            !!smartFilters.selectedFilterKey &&
-            !!smartFilters.selectedFilterValue;
-          const isRerankLoading = smartFilters.rerankStatus === 'loading';
-          const isDisabled = !isSelected && (hasSelection || isRerankLoading);
-          return (
-            <button
-              key={`${filter.key}-${filter.value}-${index}`}
-              type="button"
-              disabled={isDisabled}
-              aria-pressed={isSelected}
-              style={variant === 'results' ? { flex: '0 0 auto' } : undefined}
-              className={`px-3.5 py-2 rounded-lg border text-sm inline-flex items-center gap-1.5 ${
-                isSelected
-                  ? 'bg-[#545987] text-white border-[#545987]'
-                  : 'bg-[#E7E8F1] text-[#767A9F] border-transparent'
-              } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
-              onClick={() => {
-                if (isRerankLoading) return;
-                void onFilterClick({
-                  key: filter.key,
-                  value: filter.value,
-                });
-              }}
-            >
-              <span>{filter.value}</span>
-              {isSelected && (
-                <Icon
-                  name="close"
-                  className="w-3 h-3 text-white"
-                />
-              )}
-            </button>
-          );
-        })}
+          {smartFilters.filters.map((filter, index) => {
+            const isSelected =
+              smartFilters.selectedFilterKey === filter.key &&
+              smartFilters.selectedFilterValue === filter.value;
+            const hasSelection =
+              !!smartFilters.selectedFilterKey &&
+              !!smartFilters.selectedFilterValue;
+            const isRerankLoading = smartFilters.rerankStatus === 'loading';
+            const isDisabled = !isSelected && (hasSelection || isRerankLoading);
+            return (
+              <button
+                key={`${filter.key}-${filter.value}-${index}`}
+                type="button"
+                disabled={isDisabled}
+                aria-pressed={isSelected}
+                style={variant === 'results' ? { flex: '0 0 auto' } : undefined}
+                className={`px-3.5 py-2 rounded-lg border text-sm inline-flex items-center gap-1.5 ${
+                  isSelected
+                    ? 'bg-[#545987] text-white border-[#545987]'
+                    : 'bg-[#E7E8F1] text-[#767A9F] border-transparent'
+                } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                onClick={() => {
+                  if (isRerankLoading) return;
+                  void onFilterClick({
+                    key: filter.key,
+                    value: filter.value,
+                  });
+                }}
+              >
+                <span>{filter.value}</span>
+                {isSelected && (
+                  <Icon name="close" className="w-3 h-3 text-white" />
+                )}
+              </button>
+            );
+          })}
         </div>
       </div>
     </div>

package/src/components/TextSearch.tsx

@@ -204,7 +204,9 @@ function TextSearch({
                         !isEmpty(preFilter)
                           ? 'fill-theme-primary'
                           : 'fill-[#2B2C46]',
-                        `desktop:fill-[#3B3E5F]`,
+                        !isEmpty(preFilter)
+                          ? 'desktop:fill-white'
+                          : 'desktop:fill-[#2B2C46]',
                       )}
                     />
                   </div>

package/src/hooks/useEffectiveGroundingResults.ts

@@ -26,7 +26,12 @@ export function useEffectiveGroundingResults() {
     const postEntries = Object.entries(postFilterSelections || {}).filter(
       ([, values]) => values?.length,
     );
-    if (postEntries.length > 0) {
+    if (
+      postEntries.length > 0 &&
+      !(
+        !window.settings.algolia?.enabled && window.settings.postFilterOption
+      )
+    ) {
       filteredProducts = filteredProducts.filter((product: any) => {
         const productFilters = product?.filters || {};
         return postEntries.every(([attribute, selectedValues]) => {