@nyris/nyris-webapp 0.3.96 → 0.3.98

package/src/layouts/AppLayout.tsx

@@ -22,6 +22,12 @@ import { getFilters } from 'services/filter';
 import { useUploadSearch } from 'hooks/useUploadSearch';
 import { ToastHelper } from 'helpers/ToastHelper';
 import { useTranslation } from 'react-i18next';
+import {
+  clearAuthApiKey,
+  isNyrisApiKeyReady,
+  useAuthApiKeyStore,
+} from 'utils/nyrisApiKey';
+import useScopeStore from 'stores/scope/scopeStore';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -33,7 +39,7 @@ i18n.use(initReactI18next).init({
 });
 
 function AppLayout(): JSX.Element {
-  const { isAuthenticated } = useAuth0();
+  const { isAuthenticated, logout } = useAuth0();
   const { t } = useTranslation();
   const { auth0, alogoliaFilterField, showPoweredByNyris } = window.settings;
   const { uploadFile } = useUploadSearch();
@@ -49,6 +55,7 @@ function AppLayout(): JSX.Element {
 
   const algoliaFilter = useRequestStore(state => state.algoliaFilter);
   const metaFilter = useRequestStore(state => state.metaFilter);
+  const scopeItemKeys = useScopeStore(state => state.filterAttributes);
 
   const setAlgoliaProducts = useResultStore(state => state.setAlgoliaProducts);
   const setIsAlgoliaLoading = useUiStore(state => state.setIsAlgoliaLoading);
@@ -88,7 +95,7 @@ function AppLayout(): JSX.Element {
   useEffect(() => {
     setAlgoliaProducts(items);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items]);
+  }, [items, scopeItemKeys]);
 
   useEffect(() => {
     if (status === 'loading' || status === 'stalled') {
@@ -112,13 +119,13 @@ function AppLayout(): JSX.Element {
 
   const showPreFilter = useMemo(() => {
     if (settings.shouldUseUserMetadata && user) {
-      if (user['/user_metadata'].value) {
+      if (user['/user_metadata']?.value) {
         setMetaFilter(user['/user_metadata'].value);
       }
     }
 
     if (settings.shouldUseUserMetadata && user) {
-      if (settings.preFilterOption && !user['/user_metadata'].value) {
+      if (settings.preFilterOption && !user['/user_metadata']?.value) {
         return true;
       }
       return false;
@@ -132,7 +139,15 @@ function AppLayout(): JSX.Element {
     user,
   ]);
 
+  const authApiKeyVersion = useAuthApiKeyStore(state => state.version);
+  const isMissingAuthApiKey = useAuthApiKeyStore(state => state.isMissingClaim);
+  const isApiKeyReady = isNyrisApiKeyReady();
+
   const getPreFilters = useCallback(async () => {
+    if (!isNyrisApiKeyReady()) {
+      return;
+    }
+
     setPreFilterLoading(true);
     try {
       const res = await getFilters(1000, settings);
@@ -145,10 +160,10 @@ function AppLayout(): JSX.Element {
   }, [settings, setPreFilterList, setPreFilterLoading]);
 
   useEffect(() => {
-    if (showPreFilter) {
+    if (showPreFilter && !settings.scopeFilter && isApiKeyReady) {
       getPreFilters();
     }
-  }, [getPreFilters, showPreFilter]);
+  }, [getPreFilters, showPreFilter, settings.scopeFilter, isApiKeyReady, authApiKeyVersion]);
 
   const getImageFromClipboard = useCallback(
     (event: ClipboardEvent): File | null => {
@@ -206,17 +221,69 @@ function AppLayout(): JSX.Element {
       return;
     }
 
+    // Auth0: only listen once authApiKey is resolved (not while waiting / missing claim).
+    if (auth0.enabled && !isApiKeyReady) {
+      return;
+    }
+
     document.addEventListener('paste', handleClipboardPaste);
 
     return () => {
       document.removeEventListener('paste', handleClipboardPaste);
     };
-  }, [handleClipboardPaste, showLayout]);
+  }, [auth0.enabled, handleClipboardPaste, isApiKeyReady, showLayout]);
+
+  const applyScopeFilter = (filters: string | undefined) => {
+    const scopeFilterClause =
+      window.settings.scopeFilter && scopeItemKeys.length
+        ? `(${scopeItemKeys[0].values.map(key => `${window.settings.alogoliaFilterField}:'${key}'`).join(' OR ')})`
+        : '';
+
+    if (!window.settings.scopeFilter || !window.settings.auth0?.enabled) {
+      return filters;
+    }
+
+    if (!scopeFilterClause) {
+      return `sku:NOT_FOUND`;
+    }
+
+    return filters
+      ? `${scopeFilterClause} AND (${filters})`
+      : scopeFilterClause;
+  };
 
   if (!showLayout) {
     return <Outlet />;
   }
 
+  // Auth0 mode: wait for AuthApiKeySync before rendering search UI / prefilters.
+  if (auth0.enabled && !isApiKeyReady && !isMissingAuthApiKey) {
+    return <div />;
+  }
+
+  if (isMissingAuthApiKey) {
+    return (
+      <div className="full-height flex flex-col items-center justify-center bg-[#F3F4F8] p-6 text-center">
+        <p className="mt-2 max-w-md text-sm text-gray-600">
+          Search is currently unavailable for your account. Please contact your
+          administrator.
+        </p>
+        <button
+          type="button"
+          className="mt-6 bg-[#2B2C46] px-6 py-3 text-sm text-white"
+          onClick={() => {
+            clearAuthApiKey();
+            logout({
+              logoutParams: { returnTo: window.location.origin },
+            });
+          }}
+        >
+          {t('Log out')}
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div className="full-height flex flex-col bg-[#F3F4F8]">
       <div>
@@ -226,7 +293,7 @@ function AppLayout(): JSX.Element {
       {window.settings?.algolia.enabled && (
         <Configure
           query={query}
-          filters={
+          filters={applyScopeFilter(
             specifications && !requestImages.length
               ? `${alogoliaFilterField}:'${specifications.prefilter_value}'`
               : !query && !algoliaFilter.includes('score=1')
@@ -237,8 +304,8 @@ function AppLayout(): JSX.Element {
                           algoliaFilter ? 'AND ' : ''
                         }${alogoliaFilterField}:'${metaFilter}'`
                       : ''
-                  }`
-          }
+                  }`,
+          )}
           // facets={['brand', 'keyword_0']}
           hitsPerPage={20}
         />

package/src/pages/Logout.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+import { clearAuthApiKey } from 'utils/nyrisApiKey';
 
 const Logout = () => {
   const { user, isAuthenticated, isLoading, loginWithRedirect, logout } =
@@ -10,6 +11,7 @@ const Logout = () => {
     if (!isLoading && !user && !isAuthenticated && auth0.enabled) {
       loginWithRedirect();
     } else if (isAuthenticated) {
+      clearAuthApiKey();
       logout({ logoutParams: { returnTo: window.location.origin } });
     } else if (!auth0.enabled) {
       window.location.href = '/';

package/src/pages/Result.tsx

@@ -174,16 +174,21 @@ function Results() {
   ]);
 
   const disablePostFilter = useMemo(() => {
-    if (!settings.algolia.enabled) {
+    // Find-API post-filters do not depend on Algolia hits.
+    if (!settings.algolia.enabled || settings.postFilterOption) {
       return false;
     }
 
-    return settings.postFilterOption && productsFromAlgolia.length > 0
-      ? false
-      : true;
+    return productsFromAlgolia.length > 0 ? false : true;
   }, [settings, productsFromAlgolia]);
 
-  const isPostFilterApplied = items.length > 0;
+  const postFilterSelections = useRequestStore(
+    state => state.postFilterSelections,
+  );
+  const hasFindApiPostFilterSelection = Object.values(
+    postFilterSelections || {},
+  ).some(values => values?.length > 0);
+  const isPostFilterApplied = items.length > 0 || hasFindApiPostFilterSelection;
 
   return (
     <>
@@ -322,7 +327,7 @@ function Results() {
                         >
                           {t('Showing results for machine', {
                             prefilter_title:
-                              window.settings.preFilterTitle?.toLocaleLowerCase(),
+                              window.settings.visualSearchFilterKey,
                             prefilter_value: specifications.prefilter_value,
                           })}
                         </div>
@@ -364,7 +369,8 @@ function Results() {
 
                         {feedbackStatus === 'visible' &&
                           !showFeedbackSuccess &&
-                          productsFromAlgolia.length > 0 && (
+                          (productsFromAlgolia.length > 0 ||
+                            productsFromFindApi.length > 0) && (
                             <div className={'feedback-floating'}>
                               <div className="feedback-section feedback-backdrop-blur" />
 
@@ -570,6 +576,7 @@ function Results() {
           onClose={() => {
             setOpenModalCamera(s => !s);
           }}
+          newSearch={true}
         />
         {isAiModeOpen && (
           <div className="desktop:hidden">

package/src/providers/AuthProvider.tsx

@@ -1,4 +1,8 @@
 import { Auth0Provider } from '@auth0/auth0-react';
+import { AuthApiKeySync } from 'components/AuthApiKeySync';
+import { bootstrapAuth0ApiKeyGuard } from 'utils/nyrisApiKey';
+
+bootstrapAuth0ApiKeyGuard();
 
 const AuthProvider = ({ children }: any) => {
   const settings = window.settings;
@@ -15,6 +19,7 @@ const AuthProvider = ({ children }: any) => {
         redirect_uri: window.location.origin,
       }}
     >
+      <AuthApiKeySync />
       {children}
     </Auth0Provider>
   );

package/src/routes/ProctedRoute.tsx

@@ -1,15 +1,25 @@
 import { useAuth0 } from '@auth0/auth0-react';
 import EmailVerification from 'components/EmailVerification';
+import ScopeMissing from 'components/ScopeMissing';
 import { useEffect, ReactElement } from 'react';
+import { getScopes } from 'services/filter';
+import useScopeStore from 'stores/scope/scopeStore';
 
 export default function ProtectedRoute({
   children,
 }: {
   children: ReactElement;
 }) {
-  const { auth0 } = window.settings;
+  const { auth0, scopeFilter } = window.settings;
 
   const { user, isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
+  const setScope = useScopeStore(state => state.setScope);
+  const filterAttributes = useScopeStore(state => state.filterAttributes);
+
+  const setScopeLoading = useScopeStore(state => state.setScopeLoading);
+  const scopeIsLoading = useScopeStore(state => state.isLoading);
+  const hasFetchedScope = useScopeStore(state => state.hasFetched);
+  const setScopeFetched = useScopeStore(state => state.setScopeFetched);
 
   useEffect(() => {
     if (!isLoading && !user && !isAuthenticated && auth0.enabled) {
@@ -17,21 +27,54 @@ export default function ProtectedRoute({
     }
   }, [loginWithRedirect, isLoading, user, isAuthenticated, auth0]);
 
+  useEffect(() => {
+    if (!scopeFilter || !isAuthenticated || !user?.email || hasFetchedScope) {
+      return;
+    }
+    setScopeFetched(true);
+    setScopeLoading(true);
+    getScopes(user.email, window.settings)
+      .then(response => {
+        setScope(response.itemKeys || [], response.filterAttributes || []);
+      })
+      .catch((e: any) => {
+        console.log('err getScopes', e);
+      })
+      .finally(() => {
+        setScopeLoading(false);
+      });
+  }, [
+    scopeFilter,
+    isAuthenticated,
+    user,
+    hasFetchedScope,
+    setScope,
+    setScopeLoading,
+    setScopeFetched,
+  ]);
+
   if (!auth0.enabled) {
     return children;
   }
 
-  // if (isLoading) {
-  //   return <div>Loading...</div>;
-  // }
-
-  if (!isLoading && isAuthenticated && user?.email_verified) {
-    return children;
+  if (isLoading || !isAuthenticated) {
+    return <div></div>;
   }
 
-  if (!isLoading && isAuthenticated && !user?.email_verified) {
+  if (!user?.email_verified) {
     return <EmailVerification />;
   }
 
-  return <div></div>;
+  if (scopeFilter) {
+    // wait for the scope fetch to finish before deciding access, otherwise ScopeMissing flashes early
+    if (scopeIsLoading || !hasFetchedScope) {
+      return <div></div>;
+    }
+
+    if (filterAttributes.length === 0) {
+      return <ScopeMissing />;
+    }
+  }
+
+  return children;
 }

package/src/services/Feedback.ts

@@ -3,6 +3,7 @@ import NyrisAPI, {
   NyrisAPISettings,
   RectCoords,
 } from '@nyris/nyris-api';
+import { getNyrisSettings } from 'utils/nyrisApiKey';
 
 export const feedbackSuccessEpic = async (
   requestId: string,
@@ -62,7 +63,7 @@ export const sendFeedbackByApi = async (
   requestId: string | undefined,
   payload: FeedbackEventPayload,
 ) => {
-  const api = new NyrisAPI(settings);
+  const api = new NyrisAPI(getNyrisSettings(settings));
   if (requestId) {
     try {
       await api.sendFeedback({ sessionId, requestId, payload }).then(() => {});

package/src/services/filter.ts

@@ -1,4 +1,5 @@
 import NyrisAPI, { NyrisAPISettings } from '@nyris/nyris-api';
+import { getNyrisSettings } from 'utils/nyrisApiKey';
 
 export interface Filter {
   key?: string;
@@ -9,7 +10,7 @@ export const getFilters = async (
   number: number = 10,
   settings: NyrisAPISettings,
 ) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
   return nyrisApi.getFilters(number);
 };
 
@@ -18,7 +19,20 @@ export const searchFilters = async (
   value: string,
   settingsNyris: NyrisAPISettings,
 ) => {
-  const nyrisApi = new NyrisAPI(settingsNyris);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settingsNyris));
   const newValue = value ? value : '';
   return nyrisApi.searchFilters(key, newValue);
 };
+
+export interface ScopeResponse {
+  itemKeys: string[];
+  filterAttributes: Filter[];
+}
+
+export const getScopes = async (
+  scopeIds: string,
+  settings: NyrisAPISettings,
+): Promise<ScopeResponse> => {
+  const nyrisApi = new NyrisAPI(settings);
+  return nyrisApi.getScopes(scopeIds);
+};

package/src/services/visualSearch.ts

@@ -9,6 +9,7 @@ import { isEqual } from 'lodash';
 
 import { DEFAULT_REGION } from '../constants';
 import { getUserLocation } from 'helpers/getGeoLocation';
+import { getNyrisSettings } from 'utils/nyrisApiKey';
 
 export interface Filter {
   key?: string;
@@ -41,7 +42,7 @@ export const findRegions = async (
   image: HTMLCanvasElement,
   settings: NyrisAPISettings,
 ) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
   let regions = await nyrisApi.findRegions(image);
   const selectedRegion = getRegionByMaxConfidence(regions);
   return {
@@ -58,14 +59,16 @@ export const find = async ({
   region,
   filters,
   text,
+  scopeIds,
 }: {
   image?: HTMLCanvasElement;
   settings: NyrisAPISettings;
   region?: RectCoords;
   filters?: Filter[];
   text?: string;
+  scopeIds?: string;
 }) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
   let options: ImageSearchOptions = text ? { text } : {};
 
   if (window.settings?.geoLocation) {
@@ -82,7 +85,14 @@ export const find = async ({
   if (region) {
     options = { ...options, cropRect: region };
   }
-  return nyrisApi.find(options, image, filters);
+  return nyrisApi.find(
+    options,
+    image,
+    filters,
+    undefined,
+    undefined,
+    scopeIds ? [scopeIds] : [],
+  );
 };
 
 export const findCad = ({
@@ -94,7 +104,7 @@ export const findCad = ({
   settings: NyrisAPISettings;
   filters?: Filter[];
 }) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
 
   return nyrisApi.findByCad(file, {}, filters);
 };
@@ -106,7 +116,7 @@ export const getRequestImage = ({
   url: string;
   settings: NyrisAPISettings;
 }) => {
-  const nyrisApi = new NyrisAPI(settings);
+  const nyrisApi = new NyrisAPI(getNyrisSettings(settings));
 
   return nyrisApi.getCadRequestImage(url);
 };

package/src/services/vizo.ts

@@ -1,6 +1,17 @@
 import { RectCoords } from '@nyris/nyris-api';
 import axios from 'axios';
 import { cropImage } from 'utils/cropImageToBase64';
+import { getEffectiveApiKey } from 'utils/nyrisApiKey';
+
+function resolveAiOrNyrisApiKey(explicitApiKey?: string): string {
+  if (explicitApiKey) {
+    return explicitApiKey;
+  }
+  if (window.settings.aiApiKey) {
+    return window.settings.aiApiKey;
+  }
+  return getEffectiveApiKey();
+}
 
 export interface ChatMultimodalInput {
   metadata: string;
@@ -111,7 +122,7 @@ export async function rerankSmartFilters({
       formData,
       {
         headers: {
-          'x-api-key': apiKey || window.settings.aiApiKey || window.settings.apiKey,
+          'x-api-key': resolveAiOrNyrisApiKey(apiKey),
         },
       },
     );
@@ -156,7 +167,7 @@ export async function generateSmartFilters({
       formData,
       {
         headers: {
-          'x-api-key':  window.settings.aiApiKey || window.settings.apiKey,
+          'x-api-key': resolveAiOrNyrisApiKey(),
         },
       },
     );

package/src/stores/scope/scopeStore.ts

@@ -0,0 +1,35 @@
+import { create } from 'zustand';
+import { Filter } from '@nyris/nyris-api';
+
+interface ScopeState {
+  itemKeys: string[];
+  filterAttributes: Filter[];
+  isLoading: boolean;
+  hasFetched: boolean;
+}
+
+interface ScopeAction {
+  setScope: (itemKeys: string[], filterAttributes: Filter[]) => void;
+  setScopeLoading: (isLoading: boolean) => void;
+  setScopeFetched: (hasFetched: boolean) => void;
+  resetScope: () => void;
+}
+
+const initialState: ScopeState = {
+  itemKeys: [],
+  filterAttributes: [],
+  isLoading: false,
+  hasFetched: false,
+};
+
+const useScopeStore = create<ScopeState & ScopeAction>()(set => ({
+  ...initialState,
+
+  setScope: (itemKeys, filterAttributes) =>
+    set({ itemKeys, filterAttributes, hasFetched: true }),
+  setScopeLoading: isLoading => set({ isLoading }),
+  setScopeFetched: hasFetched => set({ hasFetched }),
+  resetScope: () => set(initialState),
+}));
+
+export default useScopeStore;

package/src/styles/Cart.scss

@@ -205,6 +205,28 @@
           margin-right: 8px;
         }
       }
+      .cart-email-button {
+        background-color: #fff;
+        color: #3e36dc;
+        border: 1px solid #3e36dc;
+        width: 100%;
+        height: 48px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 16px;
+        border-radius: 8px;
+        margin-top: 8px;
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        svg {
+          margin-right: 8px;
+        }
+      }
     }
   }
 }

package/src/types.ts

@@ -79,7 +79,11 @@ export interface AppSettings extends NyrisAPISettings {
   brandName?: string;
   cadenas?: Cadenas;
   cadSearch?: boolean;
-  cart?: boolean;
+  cart?: {
+    enabled: boolean;
+    buttonText: string;
+    emailTemplateId: string;
+  };
   clarityId?: string;
   CTAButton?: CTAButtonSettings;
   experienceVisualSearch?: boolean;
@@ -110,6 +114,7 @@ export interface AppSettings extends NyrisAPISettings {
   refinements?: any;
   regions: boolean;
   rfq?: Rfq;
+  scopeFilter?: boolean;
   secondaryCTAButton?: SecondaryCTAButton;
   secondaryCTAButtonText?: string;
   secondaryTitle: string;

package/src/utils/derivePostFilterFacets.ts

@@ -0,0 +1,68 @@
+interface PostFilterFacetValue {
+  value: string;
+  count: number;
+}
+
+export interface PostFilterFacet {
+  name: string;
+  values: PostFilterFacetValue[];
+}
+
+interface ProductWithFilters {
+  filters?: Record<string, unknown>;
+}
+
+/**
+ * Aggregates post-filter facet options from result.filters when the find API
+ * does not return top-level facets (e.g. visual search). Matches the pre-02ede11
+ * PostFilterFindApi counting behavior.
+ */
+export function derivePostFilterFacetsFromResults(
+  results: ProductWithFilters[] | undefined | null,
+): PostFilterFacet[] {
+  if (!results?.length) {
+    return [];
+  }
+
+  const countsByAttribute: Record<string, Record<string, number>> = {};
+
+  results.forEach(product => {
+    const filters = product?.filters;
+    if (!filters || typeof filters !== 'object') {
+      return;
+    }
+
+    Object.entries(filters).forEach(([attribute, filterValues]) => {
+      if (!Array.isArray(filterValues)) {
+        return;
+      }
+
+      if (!countsByAttribute[attribute]) {
+        countsByAttribute[attribute] = {};
+      }
+
+      filterValues.forEach((val: unknown) => {
+        if (typeof val === 'string' && val) {
+          countsByAttribute[attribute][val] =
+            (countsByAttribute[attribute][val] || 0) + 1;
+        }
+      });
+    });
+  });
+
+  return Object.entries(countsByAttribute).map(([name, counts]) => ({
+    name,
+    values: Object.entries(counts).map(([value, count]) => ({ value, count })),
+  }));
+}
+
+export function resolvePostFilterFacets(
+  apiFacets: unknown,
+  results: ProductWithFilters[] | undefined | null,
+): PostFilterFacet[] {
+  if (Array.isArray(apiFacets) && apiFacets.length > 0) {
+    return apiFacets as PostFilterFacet[];
+  }
+
+  return derivePostFilterFacetsFromResults(results);
+}