@nyris/nyris-webapp 0.3.96 → 0.3.97

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.96",
+  "version": "0.3.97",
   "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.97",
+    "@nyris/nyris-react-components": "^0.3.97",
     "@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

@@ -97,7 +97,11 @@ var settings = {
     },
   ],
   // features
-  cart: false,
+  cart: {
+    enabled: true,
+    buttonText: 'Add to cart',
+    emailTemplateId: 'template_h3rt2pi',
+  },
   showPoweredByNyris: '',
   postFilterOption: '',
   preFilterOption: '',
@@ -115,6 +119,7 @@ var settings = {
     enabled: '',
     emailTemplateId: '',
   },
+  scopeFilter: true,
   support: {
     enabled: '',
     emailInquiry: '',

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/Header.tsx

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

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/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/PostFilterFindApi.tsx

@@ -10,7 +10,9 @@ import { isEmpty } from 'lodash';
 import useResultStore from 'stores/result/resultStore';
 import useRequestStore from 'stores/request/requestStore';
 import useUiStore from 'stores/ui/uiStore';
+import useScopeStore from 'stores/scope/scopeStore';
 import { find } from 'services/visualSearch';
+import { useAuth0 } from '@auth0/auth0-react';
 
 let postFilterRequestCounter = 0;
 
@@ -31,6 +33,8 @@ function PostFilterFindApi({
   onVisibilityChange?: (attribute: string, isVisible: boolean) => void;
   isLastVisible?: boolean;
 }) {
+  const { user } = useAuth0();
+
   const [itemsLimit, setItemsLimit] = useState(10);
   const [searchInput, setSearchInput] = useState<string>('');
 
@@ -52,6 +56,23 @@ function PostFilterFindApi({
   const { t } = useTranslation();
   const settings = window.settings;
 
+  const scopeFilterEnabled = 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 matchedFacet = useMemo(() => {
     const facets = Array.isArray(postFilterFacets) ? postFilterFacets : [];
     return facets.find(
@@ -96,6 +117,11 @@ function PostFilterFindApi({
         count: valueCounts[label] || 0,
         isRefined: selectedValues.includes(label),
       }))
+      .filter(
+        item =>
+          !scopedAllowedValues ||
+          scopedAllowedValues.has(item.value.toLocaleLowerCase()),
+      )
       .filter(
         item =>
           !searchInput ||
@@ -103,13 +129,22 @@ 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);
@@ -180,6 +215,7 @@ function PostFilterFindApi({
       region: regions[0],
       filters,
       text: !requestImages[0] ? query : undefined,
+      scopeIds: window.settings?.scopeFilter ? user?.email : undefined,
     })
       .then(response => {
         if (requestId !== postFilterRequestCounter) {
@@ -264,7 +300,9 @@ function PostFilterFindApi({
                   <input
                     type="checkbox"
                     checked={item.isRefined}
-                    onChange={() => handleFilterClick(item.value, item.isRefined)}
+                    onChange={() =>
+                      handleFilterClick(item.value, item.isRefined)
+                    }
                     className="cursor-pointer"
                   />
                   <span className="text-xs font-normal pl-2 pr-1">

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,7 +80,11 @@ const PreFilterComponent = (props: Props) => {
     };
   }, []);
 
-  const matchedPreFilter = preFilterList.find(
+  const activeFilterList = scopeFilterEnabled
+    ? scopeFilterAttributes
+    : preFilterList;
+
+  const matchedPreFilter = activeFilterList.find(
     value =>
       value.key?.toLocaleLowerCase() ===
       settings.visualSearchFilterKey?.toLocaleLowerCase(),
@@ -105,6 +113,26 @@ 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(
       preFilterApiKey,
       encodeURIComponent(value),

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