@nyris/nyris-webapp 0.3.89 → 0.3.91

package/src/components/TextSearch.tsx

@@ -1,21 +1,18 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isEmpty, debounce, clone } from 'lodash';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { isEmpty, debounce } from 'lodash';
 import { twMerge } from 'tailwind-merge';
 import { useAuth0 } from '@auth0/auth0-react';
 import { useLocation, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 import { Icon } from '@nyris/nyris-react-components';
-import { isCadFile } from '@nyris/nyris-api';
 
-import { useCadSearch } from 'hooks/useCadSearch';
 import { useImageSearch } from 'hooks/useImageSearch';
 import PreFilterModal from './PreFilter/PreFilterModal';
 import useRequestStore from 'stores/request/requestStore';
 import Tooltip from './Tooltip/TooltipComponent';
-import UploadDisclaimer from './UploadDisclaimer';
-import { getFilters } from '../services/filter';
 import { useMediaQuery } from 'react-responsive';
+import ImageUpload from './ImageUpload';
 
 function TextSearch({
   className,
@@ -35,8 +32,6 @@ function TextSearch({
   const location = useLocation();
   const navigate = useNavigate();
 
-  const [resultFilter, setResultFilter] = useState<any>([]);
-
   const preFilter = useRequestStore(state => state.preFilter);
   const requestImages = useRequestStore(state => state.requestImages);
   const setQuery = useRequestStore(state => state.setQuery);
@@ -45,22 +40,16 @@ function TextSearch({
   const setValueInput = useRequestStore(state => state.setValueInput);
   const setMetaFilter = useRequestStore(state => state.setMetaFilter);
   const specifications = useRequestStore(state => state.specifications);
-  const nameplateNotificationText = useRequestStore(state => state.nameplateNotificationText);
+  const nameplateNotificationText = useRequestStore(
+    state => state.nameplateNotificationText,
+  );
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   const regions = useRequestStore(state => state.regions);
-  const setRequestImages = useRequestStore(state => state.setRequestImages);
   const setSpecifications = useRequestStore(state => state.setSpecifications);
-  const setShowLoading = useRequestStore(state => state.setShowLoading);
-  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
-  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
-  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
-  const setPreFilter = useRequestStore(state => state.setPreFilter);
-  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
 
   const [isOpenModalFilterDesktop, setToggleModalFilterDesktop] =
     useState<boolean>(false);
-  const [showDisclaimer, setShowDisclaimer] = useState(false);
 
   const showPreFilter = useMemo(() => {
     if (settings.shouldUseUserMetadata && user) {
@@ -84,14 +73,6 @@ function TextSearch({
     user,
   ]);
 
-  const showDisclaimerDisabled = useMemo(() => {
-    const disclaimer = localStorage.getItem('upload-disclaimer-suite');
-    if (requestImages.length === 0) return true;
-    if (!disclaimer) return false;
-    return disclaimer === 'dont-show';
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showDisclaimer, requestImages]);
-
   const visualSearch = useMemo(() => requestImages.length > 0, [requestImages]);
   const { singleImageSearch } = useImageSearch();
 
@@ -104,7 +85,7 @@ function TextSearch({
         return;
       }
 
-      if (!window.settings?.algolia.enabled) {
+      if (!window.settings?.algolia.enabled && requestImages.length === 0) {
         singleImageSearch({
           image: requestImages[0],
           imageRegion: regions[0],
@@ -130,87 +111,6 @@ function TextSearch({
     }
   };
 
-  const { cadSearch } = useCadSearch();
-  
-  const getPreFilters = async () => {
-    getFilters(1000, settings)
-      .then(res => {
-        setResultFilter(res);
-      })
-      .catch((e: any) => {
-        console.log('err getDataFilterDesktop', e);
-      });
-  }
-
-  useEffect(() => {
-    getPreFilters()
-  }, []);
-
-  const handleUpload = (files: File[]) => {
-    setValueInput('');
-    setQuery('');
-
-    if (isCadFile(files[0])) {
-      cadSearch({ file: files[0], settings, newSearch: true }).then(res => {});
-
-      return;
-    }
-
-    setShowLoading(true);
-
-    singleImageSearch({
-      image: files[0],
-      settings: window.settings,
-      showFeedback: true,
-      newSearch: true,
-    }).then((singleImageResp) => {
-      const specificationPrefilter = singleImageResp.image_analysis?.specification?.prefilter_value || null;
-      const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
-      if (specificationPrefilter) {
-        setRequestImages([]);
-        setShowNotMatchedError(false);
-        if (hasPrefilter.length) {
-          setSpecifications(clone(singleImageResp.image_analysis.specification));
-          setNameplateImage(files[0]);
-          setPreFilter({[singleImageResp.image_analysis?.specification?.prefilter_value]: true});
-          setAlgoliaFilter(`${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`);
-
-          setShowLoading(false);
-          navigate('/result');
-
-          setTimeout(() => {
-            setNameplateNotificationText(t('We have successfully defined the search criteria', { prefilter_value: specificationPrefilter, preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
-          }, 1000);
-          setTimeout(() => {
-            setNameplateNotificationText('');
-          }, 6000);
-        }
-        if (!hasPrefilter.length && showPreFilter) {
-          setSpecifications(clone({...singleImageResp.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
-          navigate('/result');
-          setPreFilter({});
-          setAlgoliaFilter('');
-          setShowLoading(false);
-          setShowNotMatchedError(true);
-          setTimeout(() => {
-            setNameplateNotificationText(t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
-          }, 1000);
-          setTimeout(() => {
-            setNameplateNotificationText('');
-          }, 6000);
-        }
-      } else {
-        if (specifications?.is_nameplate) {
-          setSpecifications({...specifications, prefilter_value: '', specificationPrefilter: ''});
-        } else {
-          setSpecifications({...specifications, is_nameplate: false});
-        }
-        setShowLoading(false);
-        navigate('/result');
-      }
-    });
-  };
-
   return (
     <div
       className={twMerge(
@@ -307,10 +207,28 @@ function TextSearch({
                   style={{
                     position: 'fixed',
                     backgroundColor:
-                      nameplateNotificationText !== t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() })
-                        ? '#E4E3FF' : '#FFDBB3',
+                      nameplateNotificationText !==
+                      t(
+                        'Extracted details from the nameplate could not be matched',
+                        {
+                          preFilterTitle:
+                            window.settings.preFilterTitle?.toLocaleLowerCase(),
+                        },
+                      )
+                        ? '#E4E3FF'
+                        : '#FFDBB3',
                     border: '1px solid',
-                    borderColor: nameplateNotificationText !== t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#3E36DC' : '#FF8800',
+                    borderColor:
+                      nameplateNotificationText !==
+                      t(
+                        'Extracted details from the nameplate could not be matched',
+                        {
+                          preFilterTitle:
+                            window.settings.preFilterTitle?.toLocaleLowerCase(),
+                        },
+                      )
+                        ? '#3E36DC'
+                        : '#FF8800',
                     fontSize: 13,
                     borderRadius: 24,
                     color: '#545987',
@@ -321,7 +239,7 @@ function TextSearch({
                     justifyContent: 'center',
                     marginLeft: 8,
                     zIndex: 999999,
-                    top: !isMobile ?  60 : 'unset',
+                    top: !isMobile ? 60 : 'unset',
                     bottom: isMobile ? 76 : 'unset',
                     maxWidth: 510,
                     width: !isMobile ? 'unset' : '90%',
@@ -341,15 +259,31 @@ function TextSearch({
                       borderRight: '7px solid transparent',
                       borderTop: isMobile
                         ? `7px solid ${
-                          nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
-                            { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#3E36DC' : '#FF8800'
+                            nameplateNotificationText !==
+                            t(
+                              'Extracted details from the nameplate could not be matched',
+                              {
+                                preFilterTitle:
+                                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+                              },
+                            )
+                              ? '#3E36DC'
+                              : '#FF8800'
                           }`
                         : 'unset',
                       borderBottom: !isMobile
                         ? `7px solid ${
-                        nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
-                          { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#3E36DC' : '#FF8800'
-                        }`
+                            nameplateNotificationText !==
+                            t(
+                              'Extracted details from the nameplate could not be matched',
+                              {
+                                preFilterTitle:
+                                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+                              },
+                            )
+                              ? '#3E36DC'
+                              : '#FF8800'
+                          }`
                         : 'unset',
                     }}
                   />
@@ -366,12 +300,32 @@ function TextSearch({
                       borderLeft: '6px solid transparent',
                       borderRight: '6px solid transparent',
                       borderTop: isMobile
-                        ? `6px solid ${nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
-                          { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#E4E3FF' : '#FFDBB3'}`
+                        ? `6px solid ${
+                            nameplateNotificationText !==
+                            t(
+                              'Extracted details from the nameplate could not be matched',
+                              {
+                                preFilterTitle:
+                                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+                              },
+                            )
+                              ? '#E4E3FF'
+                              : '#FFDBB3'
+                          }`
                         : 'unset',
                       borderBottom: !isMobile
-                        ? `6px solid ${nameplateNotificationText !== t('Extracted details from the nameplate could not be matched',
-                          { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }) ? '#E4E3FF' : '#FFDBB3'}`
+                        ? `6px solid ${
+                            nameplateNotificationText !==
+                            t(
+                              'Extracted details from the nameplate could not be matched',
+                              {
+                                preFilterTitle:
+                                  window.settings.preFilterTitle?.toLocaleLowerCase(),
+                              },
+                            )
+                              ? '#E4E3FF'
+                              : '#FFDBB3'
+                          }`
                         : 'unset',
                     }}
                   />
@@ -422,7 +376,7 @@ function TextSearch({
               }}
               className="peer desktop:bg-gray-200 focus:bg-white pl-1.5 outline-none"
               placeholder={t('Search')}
-              value={valueInput || query}
+              value={valueInput}
               onChange={onChangeText}
               ref={focusInp}
             />
@@ -449,7 +403,10 @@ function TextSearch({
                     navigate('/result');
                     setValueInput('');
                     setQuery('');
-                    if (!window.settings?.algolia.enabled) {
+                    if (
+                      !window.settings?.algolia.enabled &&
+                      requestImages.length === 0
+                    ) {
                       singleImageSearch({
                         image: requestImages[0],
                         imageRegion: regions[0],
@@ -471,95 +428,17 @@ function TextSearch({
               </button>
             </Tooltip>
           )}
-          <div
-            className={twMerge([
-              location.pathname !== '/result' && 'hidden desktop:flex',
-            ])}
-          >
-            <input
-              accept={
-                '.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,.pdf,image/*'
-              }
-              id="icon-button-file"
-              type="file"
-              style={{ display: 'none' }}
-              onClick={e => {
-                e.stopPropagation();
-              }}
-              onChange={e => {
-                if (e?.target?.files) {
-                  handleUpload(Array.from(e.target.files));
-                }
-                e.target.value = '';
-              }}
-            />
-            <Tooltip content={t('Search with an image')}>
-              <label
-                className={twMerge(
-                  'mr-2 desktop:mr-1',
-                  'w-10 h-10 flex justify-center items-center cursor-pointer rounded-full bg-gray-100 desktop:bg-transparent hover:bg-gray-100',
-                  location.pathname === '/result' && 'desktop:w-8 desktop:h-8',
-                )}
-                htmlFor={
-                  showDisclaimerDisabled && !onCameraClick
-                    ? 'icon-button-file'
-                    : ''
-                }
-                onClick={e => {
-                  if (!showDisclaimerDisabled) {
-                    // disclaimer
-                    setShowDisclaimer(true);
-                  } else if (onCameraClick) {
-                    onCameraClick();
-                  }
-                }}
-              >
-                <Icon
-                  name="camera_simple"
-                  width={16}
-                  height={16}
-                  fill="#2B2C46"
-                />
-              </label>
-            </Tooltip>
-          </div>
+
+          <ImageUpload onCameraClick={onCameraClick} />
         </div>
       </div>
+
       {showPreFilter && (
         <PreFilterModal
           openModal={isOpenModalFilterDesktop}
           handleClose={() => setToggleModalFilterDesktop(false)}
         />
       )}
-
-      {showDisclaimer && (
-        <UploadDisclaimer
-          onClose={() => {
-            setShowDisclaimer(false);
-          }}
-          onContinue={({
-            file,
-            dontShowAgain,
-          }: {
-            file: any;
-            dontShowAgain: any;
-          }) => {
-            if (dontShowAgain) {
-              localStorage.setItem('upload-disclaimer-suite', 'dont-show');
-            }
-
-            if (onCameraClick) {
-              onCameraClick();
-            } else {
-              if (file) {
-                handleUpload(Array(file));
-              }
-            }
-
-            setShowDisclaimer(false);
-          }}
-        />
-      )}
     </div>
   );
 }

package/src/components/Toaster.tsx

@@ -13,33 +13,52 @@ export const Toaster = () => {
 
   return (
     <ReactHotToaster
-      containerClassName="bottom-[80px] desktop:bottom-auto desktop:top-[60px]"
       position={isMobile ? 'bottom-center' : 'top-right'}
+      containerStyle={{
+        top: 80,
+        bottom: isMobile ? 80 : 'auto',
+      }}
     >
       {t => (
-        <ToastBar toast={t} style={{ padding: 0, borderRadius: 0 }}>
+        <ToastBar
+          toast={t}
+          style={{
+            padding: 0,
+            borderRadius: 0,
+            width: !isMobile ? 410 : undefined,
+          }}
+        >
           {({ icon }) => (
             <>
               <span
                 style={{
                   width: 5,
                   height: '100%',
-                  background: t.type === 'success' ? '#61d345' : 'transparent',
+                  background: t.type === 'success' ? '#3E36DC' : 'transparent',
                   marginRight: 7,
                 }}
               />
-              <span style={{ padding: 15, display: 'inline-flex' }}>
-                {icon}
-                <span
-                  style={{
-                    fontSize: 15,
-                    fontWeight: 300,
-                    margin: '0 10px',
-                  }}
-                >
-                  {' '}
-                  {resolveValue(t.message, t)}
-                </span>
+              <span
+                style={{
+                  padding: 15,
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                }}
+              >
+                <div className="flex items-center justify-center">
+                  {icon}
+                  <span
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 600,
+                      margin: '0 10px',
+                    }}
+                  >
+                    {' '}
+                    {resolveValue(t.message, t)}
+                  </span>
+                </div>
                 {t.type !== 'loading' && (
                   <span style={{ display: 'flex', alignItems: 'center' }}>
                     <Icon

package/src/helpers/ToastHelper.ts

@@ -5,10 +5,14 @@ export class ToastHelper {
     toast.success(msg, {
       duration: 3000,
       style: {
-        background: '#1E1F31',
-        color: '#fff',
+        background: '#E4E3FF',
+        color: '#000000',
       },
       position: position,
+      iconTheme: {
+        primary: '#3E36DC',
+        secondary: '#fff',
+      },
     });
   }
 

package/src/hooks/useCadSearch.ts

@@ -17,6 +17,9 @@ export const useCadSearch = () => {
 
   const setRegions = useRequestStore(state => state.setRegions);
   const setRequestImages = useRequestStore(state => state.setRequestImages);
+  const clearPostFilterSelections = useRequestStore(
+    state => state.clearPostFilterSelections,
+  );
 
   const setIsFindApiLoading = useUiStore(state => state.setIsFindApiLoading);
   const setShowFeedback = useUiStore(state => state.setShowFeedback);
@@ -66,6 +69,7 @@ export const useCadSearch = () => {
 
         if (clearPostFilter) {
           refine();
+          clearPostFilterSelections();
         }
 
         const responseBody = res?.responseBody;
@@ -136,6 +140,7 @@ export const useCadSearch = () => {
     [
       preFilter,
       refine,
+      clearPostFilterSelections,
       setAlgoliaFilter,
       setDetectedRegions,
       setFindApiProducts,