@nyris/nyris-webapp 0.3.96 → 0.3.98

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.96",
+  "version": "0.3.98",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@google/genai": "^1.46.0",
-    "@nyris/nyris-api": "^0.3.96",
-    "@nyris/nyris-react-components": "^0.3.96",
+    "@nyris/nyris-api": "^0.3.98",
+    "@nyris/nyris-react-components": "^0.3.98",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/public/js/settings.example.js

@@ -23,6 +23,7 @@ var settings = {
     },
   ],
   // Nyris - visual search
+  // When auth0.enabled is true, leave apiKey empty — the app uses Auth0 claim
   apiKey: '',
   aiApiKey: '',
   baseUrl: 'https://api.nyris.io',
@@ -97,7 +98,11 @@ var settings = {
     },
   ],
   // features
-  cart: false,
+  cart: {
+    enabled: true,
+    buttonText: 'Add to cart',
+    emailTemplateId: 'template_h3rt2pi',
+  },
   showPoweredByNyris: '',
   postFilterOption: '',
   preFilterOption: '',
@@ -115,6 +120,7 @@ var settings = {
     enabled: '',
     emailTemplateId: '',
   },
+  scopeFilter: true,
   support: {
     enabled: '',
     emailInquiry: '',

package/src/components/AuthApiKeySync.tsx

@@ -0,0 +1,34 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { useEffect } from 'react';
+import {
+  applyAuthApiKey,
+  clearAuthApiKey,
+  readAuthApiKeyFromUser,
+} from 'utils/nyrisApiKey';
+
+/**
+ * Keeps window.settings.apiKey in sync with Auth0 claim
+ * `https://nyris.io/authApiKey`.
+ * Must only render inside Auth0Provider when auth0.enabled is true.
+ */
+export function AuthApiKeySync() {
+  const { user, isAuthenticated, isLoading } = useAuth0();
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    if (!isAuthenticated || !user) {
+      clearAuthApiKey();
+      return;
+    }
+
+    const authApiKey = readAuthApiKeyFromUser(
+      user as Record<string, unknown>,
+    );
+    applyAuthApiKey(authApiKey);
+  }, [user, isAuthenticated, isLoading]);
+
+  return null;
+}

package/src/components/Cart.tsx

@@ -4,6 +4,14 @@ import Tooltip from './Tooltip/TooltipComponent';
 import { twMerge } from 'tailwind-merge';
 import toast from 'react-hot-toast';
 import { Icon } from '@nyris/nyris-react-components';
+import { Send } from 'lucide-react';
+import emailjs from '@emailjs/browser';
+import { useAuth0 } from '@auth0/auth0-react';
+import NoImage from '../common/assets/images/no-image.svg';
+
+const EMAILJS_SERVICE_ID = 'service_zfsxshi';
+const EMAILJS_TEMPLATE_ID = window.settings.cart?.emailTemplateId || '';
+const EMAILJS_PUBLIC_KEY = 'SMGihPnuEGcYLm0V4';
 
 const Cart = () => {
   const [isCartOpen, setIsCartOpen] = useState(false);
@@ -13,6 +21,13 @@ const Cart = () => {
     {},
   );
 
+  const { user } = useAuth0();
+  const auth0Email = window.settings.auth0?.enabled ? user?.email : undefined;
+
+  const [isSendingEmail, setIsSendingEmail] = useState(false);
+  const [isEmailInputVisible, setIsEmailInputVisible] = useState(false);
+  const [userEmail, setUserEmail] = useState('');
+
   const updateCount = () => {
     const cart = sessionStorage.getItem('cart');
     if (cart) {
@@ -111,6 +126,48 @@ const Cart = () => {
     toast.success('Your data has been downloaded.');
   };
 
+  const sendCSVByEmail = async (
+    e?: React.FormEvent,
+    emailOverride?: string,
+  ) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const emailToSend = emailOverride ?? userEmail;
+    if (!emailToSend || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailToSend)) {
+      toast.error('Please enter a valid email address.');
+      return;
+    }
+
+    setIsSendingEmail(true);
+    try {
+      const csvContent = generateCSVContent();
+      // Use btoa to encode the CSV string to base64 directly as recommended by EmailJS
+      const base64Content = btoa(unescape(encodeURIComponent(csvContent)));
+
+      await emailjs.send(
+        EMAILJS_SERVICE_ID,
+        EMAILJS_TEMPLATE_ID,
+        {
+          email_id: emailToSend,
+          // machine_name: getMachineName(),
+          date: new Date().toLocaleDateString(),
+          item_count: amountOfParts,
+          content: base64Content,
+        },
+        EMAILJS_PUBLIC_KEY,
+      );
+
+      toast.success('Parts list has been sent by email.');
+      setIsEmailInputVisible(false);
+      setUserEmail('');
+    } catch (error) {
+      toast.error('Failed to send the parts list by email.');
+    } finally {
+      setIsSendingEmail(false);
+    }
+  };
+
   return (
     <>
       <Tooltip
@@ -211,103 +268,113 @@ const Cart = () => {
                   ) : (
                     ''
                   )}
-                  {cartParts.map((part: any, i: number) => (
-                    <div
-                      key={part.sku + i}
-                      className={twMerge(
-                        'flex h-fit w-full items-center justify-between rounded-lg border border-solid border-[#DDDEE7] bg-[#F3F4F8]',
-                        'p-2',
-                        'gap-2',
-                      )}
-                    >
-                      <div className="flex flex-1 items-center">
-                        <img
-                          src={
-                            !window.settings.algolia.enabled
-                              ? part['image']
-                              : part['image(main_similarity)']
-                                ? part['image(main_similarity)']
-                                : part['main_image_link']
-                          }
-                          key={part.sku + i}
-                          alt={`product ${i}`}
-                          className="mr-2 h-[50px] w-[50px] bg-white object-contain"
-                        />
-                        <div>
+                  {cartParts.map((part: any, i: number) => {
+                    const imageSrc = !window.settings.algolia.enabled
+                      ? part['image']
+                      : part['image(main_similarity)'] ||
+                        part['main_image_link'];
+
+                    return (
+                      <div
+                        key={part.sku + i}
+                        className={twMerge(
+                          'flex h-fit w-full items-center justify-between rounded-lg border border-solid border-[#DDDEE7] bg-[#F3F4F8]',
+                          'p-2',
+                          'gap-2',
+                        )}
+                      >
+                        <div className="flex flex-1 items-center">
+                          {!imageSrc ? (
+                            <img
+                              src={NoImage}
+                              alt="image_item"
+                              className="mr-2 h-[50px] w-[50px] object-contain"
+                            />
+                          ) : (
+                            <img
+                              src={imageSrc}
+                              key={part.sku + i}
+                              alt={`product ${i}`}
+                              className="mr-2 h-[50px] w-[50px] bg-white object-contain"
+                            />
+                          )}
+
                           <div>
-                            <div className="max-w-[175px] break-words text-[9px] font-normal">
-                              {part.sku}
-                            </div>
-                            <div className="max-w-[175px] break-words text-xs font-semibold">
-                              {part.title}
+                            <div>
+                              <div className="max-w-[175px] break-words text-[9px] font-normal">
+                                {part.sku}
+                              </div>
+                              <div className="max-w-[175px] break-words text-xs font-semibold">
+                                {part.title}
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <div className="flex items-center">
-                        <div className="ml-auto flex items-center gap-4 pr-4">
-                          <button
-                            className="h-4 w-4 rounded-full bg-[#FAFAFA]"
-                            onClick={() => updateQuantity(part.sku, -1)}
-                          >
-                            <Icon name="minus" width="16" height="16" />
-                          </button>
-                          <input
-                            className="flex h-[22px] w-[22px] items-center justify-center rounded border border-solid border-[#DDDEE7] bg-white text-center"
-                            value={getQuantityDisplayValue(
-                              part.sku,
-                              part.quantity,
-                            )}
-                            onChange={e => {
-                              const rawValue = e.target.value;
-                              if (rawValue === '') {
-                                setQuantityEdits(prev => ({
-                                  ...prev,
-                                  [part.sku]: '',
-                                }));
-                                return;
-                              }
+                        <div className="flex items-center">
+                          <div className="ml-auto flex items-center gap-4 pr-4">
+                            <button
+                              className="h-4 w-4 rounded-full bg-[#FAFAFA]"
+                              onClick={() => updateQuantity(part.sku, -1)}
+                            >
+                              <Icon name="minus" width="16" height="16" />
+                            </button>
+                            <input
+                              className="flex h-[22px] w-[22px] items-center justify-center rounded border border-solid border-[#DDDEE7] bg-white text-center"
+                              value={getQuantityDisplayValue(
+                                part.sku,
+                                part.quantity,
+                              )}
+                              onChange={e => {
+                                const rawValue = e.target.value;
+                                if (rawValue === '') {
+                                  setQuantityEdits(prev => ({
+                                    ...prev,
+                                    [part.sku]: '',
+                                  }));
+                                  return;
+                                }
 
-                              if (!/^[0-9]+$/.test(rawValue)) return;
+                                if (!/^[0-9]+$/.test(rawValue)) return;
 
-                              const newValue = Number(rawValue);
-                              if (newValue < 1) return;
+                                const newValue = Number(rawValue);
+                                if (newValue < 1) return;
 
-                              setQuantityEdits(prev => ({
-                                ...prev,
-                                [part.sku]: rawValue,
-                              }));
-                              updateQuantity(
-                                part.sku,
-                                newValue - (part.quantity || 0),
-                              );
-                            }}
-                            onBlur={() => {
-                              if (quantityEdits[part.sku] === '') {
-                                setQuantityEdits(prev => {
-                                  const updated = { ...prev };
-                                  delete updated[part.sku];
-                                  return updated;
-                                });
-                              }
-                            }}
-                          />
+                                setQuantityEdits(prev => ({
+                                  ...prev,
+                                  [part.sku]: rawValue,
+                                }));
+                                updateQuantity(
+                                  part.sku,
+                                  newValue - (part.quantity || 0),
+                                );
+                              }}
+                              onBlur={() => {
+                                if (quantityEdits[part.sku] === '') {
+                                  setQuantityEdits(prev => {
+                                    const updated = { ...prev };
+                                    delete updated[part.sku];
+                                    return updated;
+                                  });
+                                }
+                              }}
+                            />
+                            <button
+                              className="h-4 w-4 rounded-full bg-[#FAFAFA] flex items-center justify-center"
+                              onClick={() => updateQuantity(part.sku, 1)}
+                            >
+                              <Icon name="plus" width="10" height="10" />
+                            </button>
+                          </div>
                           <button
-                            className="h-4 w-4 rounded-full bg-[#FAFAFA] flex items-center justify-center"
-                            onClick={() => updateQuantity(part.sku, 1)}
+                            className="h-7 w-7 rounded bg-[#FFE5EF4D] p-1.5"
+                            onClick={() => removePartBySku(part.sku)}
                           >
-                            <Icon name="plus" width="10" height="10" />
+                            <Icon name="trash" color="#E31B5D" />
                           </button>
                         </div>
-                        <button
-                          className="h-7 w-7 rounded bg-[#FFE5EF4D] p-1.5"
-                          onClick={() => removePartBySku(part.sku)}
-                        >
-                          <Icon name="trash" color="#E31B5D" />
-                        </button>
                       </div>
-                    </div>
-                  ))}
+                    );
+                  })}
                   {amountOfParts > 0 ? (
                     <button
                       className="flex h-12 w-full items-center justify-center rounded-lg bg-[#3E36DC] text-base font-semibold text-white"
@@ -320,6 +387,54 @@ const Cart = () => {
                   ) : (
                     ''
                   )}
+                  {amountOfParts > 0 &&
+                  window.settings.cart?.emailTemplateId ? (
+                    auth0Email ? (
+                      <button
+                        className="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-lg border border-solid border-[#3E36DC] bg-white text-base font-semibold text-[#3E36DC] disabled:cursor-not-allowed disabled:opacity-60"
+                        type="button"
+                        onClick={() => sendCSVByEmail(undefined, auth0Email)}
+                        disabled={isSendingEmail}
+                      >
+                        <Icon name="email" />
+                        Send by email
+                      </button>
+                    ) : isEmailInputVisible ? (
+                      <form
+                        className="cart-email-form flex items-center relative mt-2 h-12 w-full"
+                        onSubmit={sendCSVByEmail}
+                      >
+                        <input
+                          type="email"
+                          className="w-full h-full px-4 border border-[#CACAD1] rounded-lg pr-12 focus:outline-none focus:border-[#3e36dc]"
+                          placeholder="Enter your email"
+                          value={userEmail}
+                          onChange={e => setUserEmail(e.target.value)}
+                          disabled={isSendingEmail}
+                          autoFocus
+                        />
+                        <button
+                          type="submit"
+                          className="absolute right-2 h-8 w-8 flex items-center justify-center rounded disabled:opacity-50"
+                          disabled={isSendingEmail || !userEmail}
+                        >
+                          <Send className="w-5 h-5 " />
+                        </button>
+                      </form>
+                    ) : (
+                      <button
+                        className="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-lg border border-solid border-[#3E36DC] bg-white text-base font-semibold text-[#3E36DC] disabled:cursor-not-allowed disabled:opacity-60"
+                        type="button"
+                        onClick={() => setIsEmailInputVisible(true)}
+                        disabled={isSendingEmail}
+                      >
+                        <Icon name="email" />
+                        Send by email
+                      </button>
+                    )
+                  ) : (
+                    ''
+                  )}
                 </div>
               </div>
             </div>

package/src/components/ChatAssistant/useChatAssistantLogic.ts

@@ -12,6 +12,7 @@ import {
   fetchProductImageBase64,
   getProductImageUrl,
 } from 'utils/fetchProductImage';
+import { getEffectiveApiKey } from 'utils/nyrisApiKey';
 
 export function useChatAssistantLogic() {
   const [inputValue, setInputValue] = useState('');
@@ -482,7 +483,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
     setCatalogSearching(true);
     try {
       const settings = (window as any).settings;
-      const nyrisKey = settings?.apiKey || settings?.nyrisApiKey;
+      const nyrisKey = getEffectiveApiKey();
       const baseUrl = settings?.baseUrl || 'https://api.nyris.io';
 
       store.setPreCatalogResults([...activeProducts]);
@@ -580,7 +581,7 @@ Each result includes a unique SKU in brackets. Use the result thumbnails and met
 
     try {
       const settings = (window as any).settings;
-      const nyrisKey = settings?.apiKey || settings?.nyrisApiKey;
+      const nyrisKey = getEffectiveApiKey();
       const baseUrl = settings?.baseUrl || 'https://api.nyris.io';
 
       let searchQuery = rawText;

package/src/components/Header.tsx

@@ -164,7 +164,7 @@ function Header() {
               </div>
             </>
           )}
-        {window.settings.cart && <Cart />}
+        {window.settings.cart?.enabled && <Cart />}
       </div>
 
       <LogoutModal

package/src/components/ImageUpload.tsx

@@ -31,13 +31,13 @@ function ImageUpload({
 
   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;

package/src/components/Inquiry/InquiryModal.tsx

@@ -66,10 +66,10 @@ export default function InquiryModal({
   useEffect(() => {
     function omitKeys(obj: any, keys: string[]) {
       return Object.fromEntries(
-        Object.entries(obj).filter(([key]) => !keys.includes(key)),
+        Object.entries(obj)?.filter(([key]) => !keys.includes(key)),
       );
     }
-    const omittedSpecification = omitKeys(specifications, [
+    const omittedSpecification = omitKeys(specifications || {}, [
       'is_nameplate',
       'prefilter_value',
     ]);

package/src/components/LogoutModal.tsx

@@ -1,5 +1,6 @@
 import { useAuth0 } from '@auth0/auth0-react';
 import { Dialog, DialogContent } from './Modal/Dialog';
+import { clearAuthApiKey } from 'utils/nyrisApiKey';
 
 function LogoutModal({
   setShowLogoutModal,
@@ -41,6 +42,7 @@ function LogoutModal({
               cursor: 'pointer',
             }}
             onClick={() => {
+              clearAuthApiKey();
               logout({
                 logoutParams: { returnTo: window.location.origin },
               });

package/src/components/PostFilter/PostFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   AccordionContent,
   AccordionItem,
@@ -7,6 +7,7 @@ import {
 import { useRefinementList } from 'react-instantsearch';
 import { Icon } from '@nyris/nyris-react-components';
 import { useTranslation } from 'react-i18next';
+import useScopeStore from 'stores/scope/scopeStore';
 
 function PostFilter({
   attribute,
@@ -23,7 +24,11 @@ function PostFilter({
 }) {
   const [itemsLimit, setItemsLimit] = useState(10);
   const [searchInput, setSearchInput] = useState<string>('');
-  const { items, refine, searchForItems } = useRefinementList({
+  const {
+    items: allItems,
+    refine,
+    searchForItems,
+  } = useRefinementList({
     attribute: attribute,
     operator: 'or',
     showMore: false,
@@ -32,6 +37,32 @@ function PostFilter({
 
   const { t } = useTranslation();
 
+  const scopeFilterEnabled = window.settings.scopeFilter;
+  const scopeFilterAttributes = useScopeStore(state => state.filterAttributes);
+
+  const scopedAllowedValues = useMemo(() => {
+    if (!scopeFilterEnabled || !window.settings.auth0.enabled) {
+      return null;
+    }
+    // todo: support multiple attributes in the future
+    const scopeAttribute = scopeFilterAttributes[0];
+    if (!scopeAttribute) {
+      return new Set<string>();
+    }
+    return new Set(
+      scopeAttribute.values.map(value => value.toLocaleLowerCase()),
+    );
+  }, [scopeFilterEnabled, scopeFilterAttributes]);
+
+  const items = useMemo(() => {
+    if (!scopedAllowedValues) {
+      return allItems;
+    }
+    return allItems.filter(item =>
+      scopedAllowedValues.has(item.value.toLocaleLowerCase()),
+    );
+  }, [allItems, scopedAllowedValues]);
+
   useEffect(() => {
     searchForItems(searchInput);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -39,7 +70,9 @@ function PostFilter({
 
   const hasSelection = items.some(item => item.isRefined);
   const hasAvailableValues = items.length > 0 || searchInput.length > 0;
-  const isVisible = hasAvailableValues || hasSelection;
+  const isVisible =
+    (!scopedAllowedValues || scopedAllowedValues.size > 0) &&
+    (hasAvailableValues || hasSelection);
 
   useEffect(() => {
     onVisibilityChange?.(attribute, isVisible);

package/src/components/PostFilter/PostFilterComponent.tsx

@@ -6,7 +6,6 @@ import {
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import PostFilter from './PostFilter';
 import PostFilterFindApi from './PostFilterFindApi';
 
 function PostFilterComponent({ className }: { className?: string }) {
@@ -117,27 +116,14 @@ function PostFilterComponent({ className }: { className?: string }) {
               refinement.attribute;
 
             return (
-              <React.Fragment key={index}>
-                {window.settings.algolia.enabled && (
-                  <PostFilter
-                    attribute={refinement.attribute}
-                    label={refinement.header}
-                    searchable={refinement.searchable}
-                    onVisibilityChange={handleVisibilityChange}
-                    isLastVisible={isLastVisible}
-                  />
-                )}
-
-                {!window.settings.algolia.enabled && (
-                  <PostFilterFindApi
-                    attribute={refinement.attribute}
-                    label={refinement.header}
-                    searchable={false}
-                    onVisibilityChange={handleVisibilityChange}
-                    isLastVisible={isLastVisible}
-                  />
-                )}
-              </React.Fragment>
+              <PostFilterFindApi
+                key={index}
+                attribute={refinement.attribute}
+                label={refinement.header}
+                searchable={false}
+                onVisibilityChange={handleVisibilityChange}
+                isLastVisible={isLastVisible}
+              />
             );
           },
         )}