@nyris/nyris-webapp 0.3.91 → 0.3.93

package/src/components/CurrentRefinements.tsx

@@ -30,7 +30,7 @@ function CurrentRefinements({ className }: { className?: string }) {
             key={value}
             className="h-6 pl-2 pr-0.5 py-0.5 bg-[#f3f3f5] rounded-[1px] border border-solid border-[#e0e0e0] justify-start items-center gap-2 inline-flex"
           >
-            <div className="text-[#2b2c46] text-xs font-normal ">{value}</div>
+            <div className="text-[#3B3E5F] text-xs font-normal ">{value}</div>
             <div className="w-5 h-5 rounded-sm justify-center items-center flex cursor-pointer">
               <Icon
                 name="close"
@@ -60,7 +60,7 @@ function CurrentRefinements({ className }: { className?: string }) {
               key={refinement.label}
               className="h-6 pl-2 pr-0.5 py-0.5 bg-[#f3f3f5] rounded-[1px] border border-solid border-[#e0e0e0] justify-start items-center gap-2 inline-flex"
             >
-              <div className="text-[#2b2c46] text-xs font-normal ">
+              <div className="text-[#3B3E5F] text-xs font-normal ">
                 {refinement.label}
               </div>
               <div className="w-5 h-5 rounded-sm justify-center items-center flex cursor-pointer">

package/src/components/CustomCameraDrawer.tsx

@@ -25,12 +25,18 @@ interface Props {
   show: boolean;
   onClose: any;
   newSearch?: boolean;
+  handleImageUpload?: (image: any) => void;
 }
 
 const FACING_MODE_USER = 'environment';
 
 function CustomCamera(props: Props) {
-  const { show: isToggle, onClose: onToggleModal, newSearch } = props;
+  const {
+    show: isToggle,
+    onClose: onToggleModal,
+    newSearch,
+    handleImageUpload,
+  } = props;
   const settings = window.settings;
   const webcamRef: any = useRef(null);
   const navigate = useNavigate();
@@ -44,12 +50,16 @@ function CustomCamera(props: Props) {
   const specifications = useRequestStore(state => state.specifications);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
   const setRequestImages = useRequestStore(state => state.setRequestImages);
-  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
+  const setNameplateNotificationText = useRequestStore(
+    state => state.setNameplateNotificationText,
+  );
   const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
   const setPreFilter = useRequestStore(state => state.setPreFilter);
   const setShowLoading = useRequestStore(state => state.setShowLoading);
   const setNameplateImage = useRequestStore(state => state.setNameplateImage);
-  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
+  const setShowNotMatchedError = useRequestStore(
+    state => state.setShowNotMatchedError,
+  );
   const [capturedImages, setCapturedImages] = useState<HTMLCanvasElement[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [imageCaptureHelpModal, setImageCaptureHelpModal] = useState(false);
@@ -60,6 +70,12 @@ function CustomCamera(props: Props) {
   };
 
   const handlerFindImage = async (image: any) => {
+    if (handleImageUpload) {
+      handleImageUpload(image);
+      handleClose();
+      return;
+    }
+
     if (location.pathname !== '/result') {
       navigate('/result');
     }
@@ -77,35 +93,62 @@ function CustomCamera(props: Props) {
       settings,
       newSearch,
       showFeedback: true,
-    }).then((singleImageResp) => {
-      const specificationPrefilter = singleImageResp.image_analysis?.specification?.prefilter_value || null;
-      const hasPrefilter = preFilterList.filter((filter: any) => filter.values.includes(specificationPrefilter));
+    }).then(singleImageResp => {
+      const specificationPrefilter =
+        singleImageResp.image_analysis?.specification?.prefilter_value || null;
+
+      const hasPrefilter = preFilterList.filter((filter: any) =>
+        filter.values.includes(specificationPrefilter),
+      );
       if (specificationPrefilter) {
         setRequestImages([]);
         setShowNotMatchedError(false);
         if (hasPrefilter.length) {
-          setSpecifications(clone(singleImageResp.image_analysis.specification));
+          setSpecifications(
+            clone(singleImageResp.image_analysis.specification),
+          );
           setNameplateImage(image);
-          setPreFilter({[singleImageResp.image_analysis?.specification?.prefilter_value]: true});
-          setAlgoliaFilter(`${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`);
+          setPreFilter({
+            [singleImageResp.image_analysis?.specification?.prefilter_value]:
+              true,
+          });
+          setAlgoliaFilter(
+            `${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`,
+          );
 
           setShowLoading(false);
           handleClose();
 
-          setNameplateNotificationText(t('We have successfully defined the search criteria', { prefilter_value: specificationPrefilter, preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+          setNameplateNotificationText(
+            t('We have successfully defined the search criteria', {
+              prefilter_value: specificationPrefilter,
+              preFilterTitle:
+                window.settings.preFilterTitle?.toLocaleLowerCase(),
+            }),
+          );
           setTimeout(() => {
             setNameplateNotificationText('');
           }, 5000);
         }
         if (!hasPrefilter.length && window.settings.preFilterOption) {
-          setSpecifications(clone({...singleImageResp.image_analysis.specification, specificationPrefilter}));
+          setSpecifications(
+            clone({
+              ...singleImageResp.image_analysis.specification,
+              specificationPrefilter,
+            }),
+          );
           setPreFilter({});
           setAlgoliaFilter('');
           setShowLoading(false);
           handleClose();
           setShowNotMatchedError(true);
           setTimeout(() => {
-            setNameplateNotificationText(t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+            setNameplateNotificationText(
+              t('Extracted details from the nameplate could not be matched', {
+                preFilterTitle:
+                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+              }),
+            );
           }, 1000);
           setTimeout(() => {
             setNameplateNotificationText('');
@@ -113,7 +156,7 @@ function CustomCamera(props: Props) {
         }
       } else {
         if (!specifications?.is_nameplate) {
-          setSpecifications({...specifications, is_nameplate: false});
+          setSpecifications({ ...specifications, is_nameplate: false });
         }
         setShowLoading(false);
         handleClose();

package/src/components/DragDropFile.tsx

@@ -46,7 +46,7 @@ function DragDropFile(props: Props) {
         file: file,
         settings: window.settings,
         newSearch: true,
-      }).then(res => {});
+      }).then(() => {});
 
       return;
     }
@@ -61,7 +61,7 @@ function DragDropFile(props: Props) {
       newSearch: true,
     }).then(singleImageResp => {
       const specificationPrefilter =
-        singleImageResp.image_analysis?.specification?.prefilter_value || null;
+        singleImageResp?.image_analysis?.specification?.prefilter_value || null;
       const hasPrefilter = preFilterList.filter((filter: any) =>
         filter.values.includes(specificationPrefilter),
       );
@@ -154,9 +154,9 @@ function DragDropFile(props: Props) {
           <div
             className={twMerge([
               'drag-n-drop-inner',
-              'flex flex-col items-center w-full cursor-pointer pb-4 pt-4 rounded-[12px]',
-              'text-[#cacad1] hover:text-primary',
-              'border-2 border-dashed border-transparent hover:border-[#e0e0e0]',
+              'flex flex-col items-center w-full cursor-pointer py-10 rounded-[12px]',
+              'text-[#767A9F] hover:text-primary',
+              'border-2 border-dashed border-[#BBBDCF]',
               isDragging && 'text-primary border-[#e0e0e0]',
             ])}
           >

package/src/components/ExperienceVisualSearch/ExperienceVisualSearch.tsx

@@ -51,7 +51,7 @@ function ExperienceVisualSearch({
         Start your visual search by selecting an image below.
       </div>
       <div className="custom-modal-body-content experience-visual-search-images">
-        {new Array(4).fill(1).map((val, index) => {
+        {new Array(4).fill(1).map((_val, index) => {
           let itemImage: any;
 
           if (index <= experienceVisualSearchBlobs.length - 1) {

package/src/components/Header.tsx

@@ -9,18 +9,20 @@ import TextSearch from './TextSearch';
 import useRequestStore from 'stores/request/requestStore';
 import { useState } from 'react';
 import LogoutModal from './LogoutModal';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
 import useResultStore from 'stores/result/resultStore';
 import Cart from './Cart';
+import useUiStore from 'stores/ui/uiStore';
 
 function Header() {
   const { theme, auth0 } = window.settings;
-  const { isAuthenticated, user, logout } = useAuth0();
+  const { isAuthenticated } = useAuth0();
   let location = useLocation();
 
   const reset = useRequestStore(state => state.reset);
   const resetResultStore = useResultStore(state => state.reset);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
+  const showSidePanel = useUiStore(state => state.showSidePanel);
+  const setShowSidePanel = useUiStore(state => state.setShowSidePanel);
 
   const showSearchBar = location?.pathname === '/result';
 
@@ -29,124 +31,142 @@ function Header() {
   return (
     <div
       className={twMerge([
-        'h-12',
-        'desktop:h-[58px]',
-        'desktop:min-h-[58px]',
-        location?.pathname === '/result' &&
-          'border-solid border-b border-[#afafaf52]',
-        'desktop:border-solid desktop:border-b desktop:border-[#E0E0E0]',
-        'pr-6',
-        'pl-4',
+        'h-[56px]',
+        'desktop:h-[68px]',
+        'desktop:min-h-[68px]',
+        'px-2',
+        'desktop:px-4',
         'w-full',
         'flex-shrink-0',
+        'bg-transparent',
+        'mt-2',
+        'desktop:mt-4',
+        'mb-4',
+        'desktop:mb-2',
+        'flex',
+        'gap-2',
+        'justify-between',
+        'desktop:items-start',
       ])}
-      style={{ background: theme?.headerColor }}
     >
+      {location?.pathname === '/result' && (
+        <div
+          className={twMerge(
+            'hidden desktop:flex',
+            'h-[56px] min-w-[56px]',
+            'desktop:min-w-[68px] desktop:h-[68px]',
+            'border border-solid border-[#DDDEE7] items-center justify-center cursor-pointer bg-white',
+            'rounded-2xl',
+            'shadow-ds-1',
+          )}
+          onClick={() => {
+            setShowSidePanel(!showSidePanel);
+          }}
+        >
+          <Icon name={showSidePanel ? 'close' : 'hamburger'} />
+        </div>
+      )}
+
       <div
-        className={twMerge(['w-full', 'flex', 'items-center', 'h-full'])}
-        style={{ display: 'flex', alignItems: 'center', height: '100%' }}
+        className={twMerge(
+          'h-[56px]',
+          'min-w-[268px] desktop:h-[68px] flex items-center justify-between',
+          'border border-solid border-[#DDDEE7]',
+          'bg-white',
+          'rounded-2xl',
+          'shadow-ds-1',
+          location?.pathname === '/result' && 'flex-grow',
+        )}
       >
-        {/* Left: Logo */}
-        <div
-          className="flex items-center justify-start min-w-0"
-          style={{ flex: '0 0 auto' }}
+        <NavLink
+          to="/"
+          style={{ lineHeight: 0 }}
+          onClick={() => {
+            reset();
+            resetResultStore();
+            setSpecifications(null);
+          }}
+          className="pl-6"
         >
-          <NavLink
-            to="/"
-            style={{ lineHeight: 0 }}
-            onClick={() => {
-              reset();
-              resetResultStore();
-              setSpecifications(null);
+          <img
+            src={theme?.appBarLogoUrl}
+            alt="logo"
+            style={{
+              aspectRatio: 1,
+              width: theme?.logoWidth,
+              height: theme?.logoHeight,
             }}
-          >
-            <img
-              src={theme?.appBarLogoUrl}
-              alt="logo"
-              style={{
-                aspectRatio: 1,
-                width: theme?.logoWidth,
-                height: theme?.logoHeight,
-              }}
-            />
-          </NavLink>
-        </div>
-        {/* Center: Search bar */}
-        <div className="flex-1 flex justify-center items-center min-w-0">
-          <div
-            className={twMerge(['hidden', showSearchBar && 'desktop:block'])}
-          >
-            <TextSearch />
-          </div>
-        </div>
-        {/* Right: Cart and user actions */}
+          />
+        </NavLink>
+
         <div
-          className="flex items-center justify-end min-w-0 gap-4"
-          style={{ flex: '0 0 auto' }}
+          className={twMerge([
+            'hidden',
+            showSearchBar && 'desktop:flex',
+            'flex-1',
+            'justify-center',
+            'min-w-0',
+          ])}
         >
-          {window.settings.cart && <Cart />}
+          <TextSearch className="w-full max-w-[531px] min-w-0" aiMode={true} />
+        </div>
 
-          {auth0.enabled && isAuthenticated && (
+        {auth0.enabled &&
+          isAuthenticated &&
+          location?.pathname === '/result' && (
             <>
               <div
-                className="hidden desktop:block"
-                style={{ position: 'relative' }}
-              >
-                <Popover>
-                  <PopoverTrigger>
-                    <div
-                      style={{
-                        display: 'flex',
-                        columnGap: '16px',
-                        alignItems: 'center',
-                        cursor: 'pointer',
-                      }}
-                    >
-                      <p style={{ color: '#2B2C46' }}>{user?.email}</p>
-                      <Icon name="avatar" />
-                    </div>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[152px] bg-white p-2 shadow-outer">
-                    <div
-                      className={twMerge([
-                        'flex',
-                        'w-[75px]',
-                        'h-[24px]',
-                        'px-2',
-                        'items-center',
-                        'bg-[#2B2C46]',
-                        'text-white',
-                        'text-[10px]',
-                        'cursor-pointer',
-                      ])}
-                      onClick={() => {
-                        logout({
-                          logoutParams: { returnTo: window.location.origin },
-                        });
-                      }}
-                    >
-                      Sign out
-                    </div>
-                  </PopoverContent>
-                </Popover>
-              </div>
-              <div
-                className="block desktop:hidden cursor-pointer"
+                className={twMerge(
+                  'cursor-pointer w-10 h-10 rounded-full bg-[#FAFAFA] flex items-center justify-center',
+                  'mr-3.5',
+                )}
                 onClick={() => {
                   setShowLogoutModal(true);
                 }}
               >
                 <Icon
                   name="logout"
-                  className="text-[#AAABB5]"
-                  width={24}
-                  height={24}
+                  className="text-black"
+                  width={16}
+                  height={16}
                 />
               </div>
             </>
           )}
-        </div>
       </div>
+      <div className="flex gap-2">
+        {auth0.enabled &&
+          isAuthenticated &&
+          location?.pathname !== '/result' && (
+            <>
+              <div
+                className={twMerge(
+                  'h-[56px] min-w-[56px]',
+                  'desktop:min-w-[68px] desktop:h-[68px] bg-white rounded-2xl flex items-center justify-center ',
+                  'border border-solid border-[#DDDEE7]',
+                  'shadow-ds-1',
+                )}
+              >
+                <button
+                  className={twMerge(
+                    'relative flex items-center justify-center rounded-2xl',
+                    'h-10 w-10',
+                  )}
+                  style={{
+                    backgroundColor: '#FAFAFA',
+                  }}
+                  onClick={() => {
+                    setShowLogoutModal(true);
+                  }}
+                >
+                  <Icon name="logout" className={twMerge('text-[#BBBDCF]')} />
+                </button>
+              </div>
+            </>
+          )}
+        {window.settings.cart && <Cart />}
+      </div>
+
       <LogoutModal
         setShowLogoutModal={setShowLogoutModal}
         showModal={showLogoutModal}

package/src/components/Hint.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@nyris/nyris-react-components';
 import { useTranslation } from 'react-i18next';
 
@@ -95,4 +94,4 @@ const Hint = () => {
   );
 };
 
-export default Hint;
+export default Hint;

package/src/components/HitsPerPage.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useHitsPerPage, UseHitsPerPageProps } from 'react-instantsearch';
 import PoweredBy from './PoweredBy';
+import { twMerge } from 'tailwind-merge';
 
 export const HitsPerPage = (props: UseHitsPerPageProps) => {
   const { items, refine } = useHitsPerPage(props);
@@ -11,9 +12,14 @@ export const HitsPerPage = (props: UseHitsPerPageProps) => {
 
   return (
     <>
-      <div className="w-full px-4 h-10 bg-white border border-solid border-[#DDDEE7] items-center hidden desktop:inline-flex justify-between">
-        <div className="self-stretch pr-6 border-r border-solid border-[#DDDEE7] justify-center items-center gap-1 flex">
-          <div className="text-[#2b2c46] text-[13px] font-normal font-['Source Sans 3'] leading-none tracking-tight">
+      <div
+        className={twMerge(
+          'w-full min-h-10 bg-[#FFFFFF] border border-solid border-[#DDDEE7] items-center hidden desktop:inline-flex rounded-3xl justify-between pr-4',
+          'shadow-ds-1',
+        )}
+      >
+        <div className="self-stretch pl-4 pr-6 border-r border-solid border-[#DDDEE7] justify-center items-center gap-1 flex">
+          <div className="text-[#3B3E5F] text-[13px] font-normal font-['Source Sans 3'] leading-none tracking-tight">
             {t('Items per page')}:
           </div>
           <select

package/src/components/IdentifiedAttributes.tsx

@@ -0,0 +1,159 @@
+import { useRefinementList } from 'react-instantsearch';
+import Tooltip from './Tooltip/TooltipComponent';
+import { twMerge } from 'tailwind-merge';
+import useRequestStore from '../stores/request/requestStore';
+import useResultStore from '../stores/result/resultStore';
+import { Icon } from '@nyris/nyris-react-components';
+import { useMediaQuery } from 'react-responsive';
+
+const IdentifiedAttributes = ({
+  attr,
+  value,
+  specificationFilter,
+  imageAnalysis,
+}: any) => {
+  const refinement = window.settings.refinements.filter((ref: any) => {
+    return ref.header?.toLocaleLowerCase() === attr?.toLocaleLowerCase();
+  });
+  const attribute = refinement?.length ? refinement[0].attribute : 'none';
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { refine } = useRefinementList({
+    attribute,
+    operator: 'or',
+    showMore: false,
+    limit: 1,
+  });
+
+  return isMobile ? (
+    <>
+      <div className="inline-flex justify-center items-start gap-2 " key={attr}>
+        <div className="pl-1 inline-flex justify-center items-center gap-2.5">
+          <div className="justify-start text-[#3B3E5F] text-sm font-semibold">
+            {attr}
+          </div>
+        </div>
+        <div
+          className={twMerge(
+            `p-1 bg-[#e4e3ff] rounded-lg inline-flex justify-center items-center gap-1.5`,
+            'text-[#3e36dc]',
+            specificationFilter[attr]
+              ? 'border-[#3E36DC] bg-[#3E36DC] text-white'
+              : '',
+          )}
+          onClick={() => {
+            if (!value) {
+              return;
+            }
+            if (attribute !== 'none') {
+              refine(value);
+            } else {
+              const setSpecificationFilter =
+                useRequestStore.getState().setSpecificationFilter;
+
+              const setSpecificationFilteredProducts =
+                useResultStore.getState().setSpecificationFilteredProducts;
+
+              if (specificationFilter[attr]) {
+                setSpecificationFilter({});
+                setSpecificationFilteredProducts([]);
+                // setProducts(results);
+              } else {
+                setSpecificationFilter({
+                  [attr]: value,
+                });
+              }
+            }
+          }}
+        >
+          <div className="justify-start items-center text-sm font-medium leading-none flex gap-2">
+            {imageAnalysis?.specification[attr] || 'N/A'}
+            <Icon
+              name="close"
+              className={twMerge(
+                'w-3 h-3 text-white',
+                specificationFilter[attr] ? 'block' : 'hidden',
+              )}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  ) : (
+    <div key={attr} className="flex justify-between w-full gap-2 items-center">
+      <div className="self-stretch inline-flex justify-start items-center gap-1.5">
+        <div className="justify-start text-[#3B3E5F] text-xs font-semibold">
+          {attr}:
+        </div>
+        <Tooltip
+          content={
+            specificationFilter[attr]
+              ? 'Filter applied. Clear to choose a different value.'
+              : 'Click to apply as a search filter.'
+          }
+          delayDuration={1000}
+          disabled={!value}
+        >
+          <div
+            className={twMerge(
+              `px-1 py-1 bg-[#e4e3ff] rounded-[1px] flex justify-center items-center gap-1.5`,
+              'border border-solid border-transparent hover:border-[#3E36DC]',
+              'cursor-pointer',
+              specificationFilter[attr] ? 'border-[#3E36DC] bg-[#3E36DC] ' : '',
+            )}
+            onClick={() => {
+              if (!value) {
+                return;
+              }
+              if (attribute !== 'none') {
+                refine(value);
+              } else {
+                const setSpecificationFilter =
+                  useRequestStore.getState().setSpecificationFilter;
+
+                const setSpecificationFilteredProducts =
+                  useResultStore.getState().setSpecificationFilteredProducts;
+
+                if (specificationFilter[attr]) {
+                  setSpecificationFilter({});
+                  setSpecificationFilteredProducts([]);
+                  // setProducts(results);
+                } else {
+                  setSpecificationFilter({
+                    [attr]: value,
+                  });
+                }
+              }
+            }}
+          >
+            <div
+              className={twMerge(
+                'justify-start text-[#3e36dc] text-[10px] leading-none px-0.5',
+                'font-normal hover:font-bold hover:px-0',
+                specificationFilter[attr]
+                  ? 'font-bold text-white hover:px-0.5'
+                  : '',
+                'max-line-1',
+              )}
+            >
+              {imageAnalysis?.specification[attr] || 'N/A'}
+            </div>
+          </div>
+        </Tooltip>
+      </div>
+      <div
+        onClick={() => {
+          navigator.clipboard.writeText(
+            imageAnalysis?.specification[attr] || '',
+          );
+        }}
+      >
+        <Icon
+          name="copy"
+          className="text-[#AAABB5] w-[12px] h-[12px] hover:text-[#3E36DC] cursor-pointer"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default IdentifiedAttributes;