@nyris/nyris-webapp 0.3.91 → 0.3.92

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

@@ -108,7 +108,7 @@ function ImagePreviewComponent({
         compress: false,
       }).then((res: any) => {
         const specificationPrefilter =
-          res.image_analysis?.specification?.prefilter_value || null;
+          res?.image_analysis?.specification?.prefilter_value || null;
         const hasPrefilter = preFilterList.filter((filter: any) =>
           filter.values.includes(specificationPrefilter),
         );
@@ -188,7 +188,7 @@ function ImagePreviewComponent({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedOnImageSelectionChange = useCallback(
-    debounce((r: RectCoords, index?: number) => {
+    debounce((r: RectCoords, _index?: number) => {
       findItemsInSelection(r, requestImages[0]);
     }, 0),
     [findItemsInSelection, requestImages, updateRegion],
@@ -200,7 +200,7 @@ function ImagePreviewComponent({
       <div
         ref={previewWrapperRef}
         className={twMerge([
-          'bg-primary',
+          'bg-[#545987]',
           'justify-center',
           isVisible ? (!isMultiImageSearchEnabled ? 'py-5' : 'pt-6') : '',
           'px-7',
@@ -211,6 +211,7 @@ function ImagePreviewComponent({
           'hidden',
           'desktop:flex',
           // 'rounded',
+          'rounded-[24px]',
         ])}
         // style={{
         //   height: '100%',
@@ -228,9 +229,9 @@ function ImagePreviewComponent({
       >
         <div
           className={twMerge([
-            // 'w-[243px]',
             'w-full',
-            'bg-[#55566b] aspect-square flex just items-center',
+            'bg-[#545987] aspect-square flex just items-center',
+            'rounded-[24px]',
           ])}
         >
           <Preview
@@ -295,7 +296,7 @@ function ImagePreviewComponent({
       {/* Image preview Mobile*/}
       <div
         className={twMerge([
-          'bg-primary',
+          'bg-[#545987]',
           'justify-center',
           'p-5',
           !editActive ? 'py-2' : '',
@@ -303,11 +304,13 @@ function ImagePreviewComponent({
           'relative',
           'flex',
           'desktop:hidden',
+          !editActive && 'rounded-[32px]',
+          editActive && 'rounded-[24px]',
         ])}
       >
         <div
           className={`w-full ${
-            editActive ? 'bg-[#55566b] ' : ''
+            editActive ? 'bg-[#545987] ' : ''
           } flex just items-center`}
         >
           <Preview
@@ -318,12 +321,12 @@ function ImagePreviewComponent({
             selection={regions[currentIndex] || DEFAULT_REGION}
             regions={detectedRegions[currentIndex] || []}
             minWidth={Math.min(
-              80 *
+              40 *
                 (requestImages[currentIndex]?.width /
                   requestImages[currentIndex]?.height),
               200,
             )}
-            minHeight={80}
+            minHeight={40}
             dotColor={editActive ? '#FBD914' : ''}
             minCropWidth={editActive ? 30 : 5}
             minCropHeight={editActive ? 30 : 5}
@@ -370,26 +373,38 @@ function ImagePreviewComponent({
         )}
         <div
           onClick={() => setEditActive(s => !s)}
-          className={`absolute right-1 ${
-            editActive ? 'bottom-1' : 'bottom-8'
-          } flex justify-center items-center desktop:hidden p-1`}
+          className={twMerge(
+            `absolute right-1 ${
+              editActive ? 'bottom-1' : 'bottom-1'
+            } flex justify-center items-center desktop:hidden p-1`,
+          )}
         >
-          <div className="rounded-full bg-white w-6 h-6 flex justify-center items-center desktop:hidden">
+          <div
+            className={twMerge(
+              'rounded-full w-6 h-6 flex justify-center items-center desktop:hidden',
+              editActive ? 'w-8 h-8 bg-white' : 'w-10 h-10 bg-transparent',
+            )}
+          >
             {editActive && <Icon name="collapse" className="text-primary" />}
-            {!editActive && <Icon name="crop" className="text-primary" />}
+            {!editActive && <Icon name="crop" className="text-white" />}
           </div>
         </div>
 
         <div
           onClick={() => onImageRemove()}
           className={`absolute left-1 ${
-            editActive ? 'top-1' : 'top-8'
+            editActive ? 'top-1' : 'top-1'
           } flex justify-center items-center desktop:hidden p-1`}
         >
-          <div className="rounded-full bg-white w-6 h-6 flex justify-center items-center desktop:hidden">
+          <div
+            className={twMerge(
+              'rounded-full bg-[#FFE5EF] flex justify-center items-center desktop:hidden',
+              editActive ? 'w-8 h-8' : 'w-10 h-10',
+            )}
+          >
             <Icon
               name="trash"
-              className="text-primary"
+              className="text-[#E31B5D]"
               width={14}
               height={14}
             />