@nyris/nyris-webapp 0.3.96 → 0.3.97

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/useImageSearch.ts

@@ -20,8 +20,11 @@ import { useGroundedSearch } from './useGroundedSearch';
 import { generateSmartFilters } from '../services/vizo';
 import { cropImage } from 'utils/cropImageToBase64';
 import { invalidatePostFilterRequests } from 'components/PostFilter/PostFilterFindApi';
+import { useAuth0 } from '@auth0/auth0-react';
 
 export const useImageSearch = () => {
+  const { user } = useAuth0();
+
   const setRegions = useRequestStore(state => state.setRegions);
   const query = useRequestStore(state => state.query);
 
@@ -69,7 +72,9 @@ export const useImageSearch = () => {
     state => state.setGroundingFilterResult,
   );
   const setSmartFilters = useResultStore(state => state.setSmartFilters);
-  const setPostFilterFacets = useResultStore(state => state.setPostFilterFacets);
+  const setPostFilterFacets = useResultStore(
+    state => state.setPostFilterFacets,
+  );
   const setInitialFindSearchSnapshot = useResultStore(
     state => state.setInitialFindSearchSnapshot,
   );
@@ -208,6 +213,7 @@ export const useImageSearch = () => {
       ];
 
       let smartFilterPromise: Promise<void> | null = null;
+
       if (isSmartFiltersEnabled && requestImage && (newSearch || imageRegion)) {
         setSmartFilters({
           status: 'loading',
@@ -324,6 +330,7 @@ export const useImageSearch = () => {
                 ? query
                 : text
               : undefined,
+          scopeIds: window.settings?.scopeFilter ? user?.email : undefined,
         });
         useResultStore.getState().resetGrounding();
 
@@ -421,6 +428,7 @@ export const useImageSearch = () => {
       setSmartFilters,
       setPostFilterFacets,
       setInitialFindSearchSnapshot,
+      user,
     ],
   );
 

package/src/hooks/useResultEvaluator.ts

@@ -339,14 +339,14 @@ Evaluate if these results match the image. If they do (same type of product), ro
 
         // Enforce ≤5 rule: if initial results are ≤5, strip filter options, keep only text_search_prompt
         if (activeProducts.length <= 5 && activeProducts.length > 0) {
-          mappedOptions = [
-            {
-              label: "Describe what you're looking for",
-              action_type: 'text_search_prompt' as const,
-              key: 'text_search',
-              value: 'text_search',
-            },
-          ];
+          // mappedOptions = [
+          //   {
+          //     label: "Describe what you're looking for",
+          //     action_type: 'text_search_prompt' as const,
+          //     key: 'text_search',
+          //     value: 'text_search',
+          //   },
+          // ];
 
           if (
             window.settings.vizo?.findRelatedParts &&

package/src/layouts/AppLayout.tsx

@@ -22,6 +22,7 @@ import { getFilters } from 'services/filter';
 import { useUploadSearch } from 'hooks/useUploadSearch';
 import { ToastHelper } from 'helpers/ToastHelper';
 import { useTranslation } from 'react-i18next';
+import useScopeStore from 'stores/scope/scopeStore';
 
 i18n.use(initReactI18next).init({
   resources: translations,
@@ -49,6 +50,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 +90,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') {
@@ -145,10 +147,10 @@ function AppLayout(): JSX.Element {
   }, [settings, setPreFilterList, setPreFilterLoading]);
 
   useEffect(() => {
-    if (showPreFilter) {
+    if (showPreFilter && !settings.scopeFilter) {
       getPreFilters();
     }
-  }, [getPreFilters, showPreFilter]);
+  }, [getPreFilters, showPreFilter, settings.scopeFilter]);
 
   const getImageFromClipboard = useCallback(
     (event: ClipboardEvent): File | null => {
@@ -213,6 +215,25 @@ function AppLayout(): JSX.Element {
     };
   }, [handleClipboardPaste, 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 />;
   }
@@ -226,7 +247,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 +258,8 @@ function AppLayout(): JSX.Element {
                           algoliaFilter ? 'AND ' : ''
                         }${alogoliaFilterField}:'${metaFilter}'`
                       : ''
-                  }`
-          }
+                  }`,
+          )}
           // facets={['brand', 'keyword_0']}
           hitsPerPage={20}
         />

package/src/pages/Result.tsx

@@ -322,7 +322,7 @@ function Results() {
                         >
                           {t('Showing results for machine', {
                             prefilter_title:
-                              window.settings.preFilterTitle?.toLocaleLowerCase(),
+                              window.settings.visualSearchFilterKey,
                             prefilter_value: specifications.prefilter_value,
                           })}
                         </div>
@@ -570,6 +570,7 @@ function Results() {
           onClose={() => {
             setOpenModalCamera(s => !s);
           }}
+          newSearch={true}
         />
         {isAiModeOpen && (
           <div className="desktop:hidden">

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/filter.ts

@@ -22,3 +22,16 @@ export const searchFilters = async (
   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

@@ -58,12 +58,14 @@ 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);
   let options: ImageSearchOptions = text ? { text } : {};
@@ -82,7 +84,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 = ({

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;