@nyris/nyris-webapp 0.3.65 → 0.3.67

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.65",
+  "version": "0.3.67",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@nyris/nyris-api": "^0.3.65",
-    "@nyris/nyris-react-components": "^0.3.65",
+    "@nyris/nyris-api": "^0.3.67",
+    "@nyris/nyris-react-components": "^0.3.67",
     "@reduxjs/toolkit": "^2.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^5.17.0",

package/src/Store/Store.ts

@@ -9,10 +9,11 @@ import { defaultSettings } from './constants';
 declare var settings: AppSettings;
 
 settings.algolia.enabled = true;
-settings.preview = true;
 settings.showFeedbackAndShare = false;
 settings.multiImageSearch = false;
+settings.preview = true;
 settings.clarityId = '';
+settings.cadSearch = false;
 
 if (settings.rfq?.enabled && settings.support?.enabled) {
   settings.support.enabled = false;

package/src/Store/constants.ts

@@ -27,4 +27,5 @@ export const defaultSettings: AppSettings = {
   secondaryTitle: '',
   theme: {},
   productDetails: '',
+  support: {},
 };

package/src/components/DragDropFile.tsx

@@ -8,6 +8,8 @@ import { useTranslation } from 'react-i18next';
 import Loading from './Loading';
 import { useImageSearch } from 'hooks/useImageSearch';
 import { Icon } from '@nyris/nyris-react-components';
+import { isCadFile } from '@nyris/nyris-api';
+import { useCadSearch } from 'hooks/useCadSearch';
 
 interface Props {
   acceptTypes: any;
@@ -21,8 +23,10 @@ function DragDropFile(props: Props) {
   const { isLoading } = props;
   const settings = useAppSelector(state => state.settings);
   const { t } = useTranslation();
+  const { cadSearch } = useCadSearch();
 
   const { singleImageSearch } = useImageSearch();
+  const isCadSearch = window.settings.cadSearch;
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop: async (fs: File[], _, e) => {
@@ -31,12 +35,22 @@ function DragDropFile(props: Props) {
 
       dispatch(updateStatusLoading(true));
       dispatch(loadingActionResults());
-
-      singleImageSearch({ image: fs[0], settings, showFeedback: true }).then(
-        () => {
+      if (isCadFile(fs[0]) && isCadSearch) {
+        dispatch(updateStatusLoading(true));
+        dispatch(loadingActionResults());
+        if (history.location.pathname !== '/result') {
+          history.push('/result');
+        }
+        cadSearch({ file: fs[0], settings, newSearch: true }).then(res => {
           dispatch(updateStatusLoading(false));
-        },
-      );
+        });
+      } else {
+        singleImageSearch({ image: fs[0], settings, showFeedback: true }).then(
+          () => {
+            dispatch(updateStatusLoading(false));
+          },
+        );
+      }
     },
   });
 
@@ -81,6 +95,9 @@ function DragDropFile(props: Props) {
             className="inputFile"
             placeholder="Choose photo"
             style={{ display: 'block', cursor: 'pointer' }}
+            accept={`${
+              isCadSearch ? '.stp,.step,.stl,.obj,.glb,.gltf,' : ''
+            }image/*`}
           />
         </div>
       </div>

package/src/components/Experience-visual-search/ExperienceVisualSearch.tsx

@@ -12,11 +12,14 @@ import { useImageSearch } from 'hooks/useImageSearch';
 import { useHistory } from 'react-router-dom';
 import { Icon } from '@nyris/nyris-react-components';
 
-function ExperienceVisualSearch() {
+function ExperienceVisualSearch({
+  experienceVisualSearchBlobs,
+}: {
+  experienceVisualSearchBlobs: Blob[];
+}) {
   const dispatch = useAppDispatch();
   const { settings } = useAppSelector(state => state);
   const [showModal, setShowModal] = useState(false);
-  const [images, setImages] = useState<string[]>([]);
   const button = useRef(null);
   let interval = useRef<NodeJS.Timeout | null>(null);
   const history = useHistory();
@@ -51,22 +54,17 @@ function ExperienceVisualSearch() {
   const modalToggle = (isOpen: boolean) => {
     setShowModal(isOpen);
     if (isOpen) {
-      const randomImages = settings?.experienceVisualSearchImages?.slice(
-        0,
-        Math.min(settings?.experienceVisualSearchImages?.length, 4),
-      );
-      setImages(randomImages || []);
       document.body.classList.add('overflow-hidden');
     } else {
       document.body.classList.remove('overflow-hidden');
     }
   };
 
-  const getUrlToCanvasFile = async (url: string) => {
+  const getUrlToCanvasFile = async (blob: string) => {
     dispatch(updateStatusLoading(true));
     dispatch(loadingActionResults());
 
-    singleImageSearch({ image: url, settings }).then(() => {
+    singleImageSearch({ image: blob, settings }).then(() => {
       dispatch(updateStatusLoading(false));
     });
     history.push('/result');
@@ -112,30 +110,46 @@ function ExperienceVisualSearch() {
                 Start your visual search by selecting an image below.
               </div>
               <div className="custom-modal-body-content experience-visual-search-images">
-                {images.map(itemImage => (
-                  <div
-                    className="experience-visual-search-image-container"
-                    onClick={() => {
-                      modalToggle(false);
-                      getUrlToCanvasFile(itemImage);
-                    }}
-                  >
+                {new Array(4).fill(1).map((val, index) => {
+                  let itemImage: any;
+
+                  if (index <= experienceVisualSearchBlobs.length - 1) {
+                    itemImage = URL.createObjectURL(
+                      experienceVisualSearchBlobs[index],
+                    );
+                  }
+                  return (
                     <div
-                      className="experience-visual-search-image"
-                      style={{
-                        backgroundImage: `url(${itemImage}?width=192&height=192)`,
+                      key={index}
+                      className="experience-visual-search-image-container"
+                      onClick={() => {
+                        if (itemImage) {
+                          modalToggle(false);
+                          getUrlToCanvasFile(itemImage);
+                        }
                       }}
-                    />
-                    <div className="box-icon-modal">
-                      <Icon
-                        name="search_image"
-                        width={16}
-                        height={16}
-                        color={'#AAABB5'}
+                    >
+                      <div
+                        className={`experience-visual-search-image ${
+                          !itemImage ? 'animate-pulse bg-gray-200' : ''
+                        }`}
+                        style={{
+                          backgroundImage: `url(${itemImage})`,
+                        }}
                       />
+                      {itemImage && (
+                        <div className="box-icon-modal">
+                          <Icon
+                            name="search_image"
+                            width={16}
+                            height={16}
+                            color={'#AAABB5'}
+                          />
+                        </div>
+                      )}
                     </div>
-                  </div>
-                ))}
+                  );
+                })}
               </div>
             </div>
           </div>,

package/src/components/ImagePreview.tsx

@@ -33,7 +33,6 @@ function ImagePreviewComponent({
   isExpanded,
   isCameraUploadEnabled = true,
 }: {
-  requestImage?: any;
   imageSelection?: any;
   filteredRegions?: any;
   showAdjustInfo?: any;
@@ -180,6 +179,7 @@ function ImagePreviewComponent({
         settings,
         imageRegion: r,
         showFeedback: true,
+        compress: false,
       }).then((res: any) => {
         dispatch(updateStatusLoading(false));
 
@@ -467,7 +467,11 @@ function ImagePreviewComponent({
                     'object-cover',
                     'shadow-inner',
                   ])}
-                  src={image.toDataURL()}
+                  src={(() => {
+                    if (image?.toDataURL) {
+                      return image.toDataURL();
+                    }
+                  })()}
                   alt=""
                   onClick={() => {
                     setCurrentIndex(index);

package/src/components/ProductList/index.tsx

@@ -51,14 +51,25 @@ function ProductListComponent({
       !isSearchStalled
     ) {
       return (
-        <div style={{ marginTop: '50px', width: '100%', textAlign: 'center', marginBottom: '12px' }}>
+        <div
+          style={{
+            marginTop: '50px',
+            width: '100%',
+            textAlign: 'center',
+            marginBottom: '12px',
+          }}
+        >
           {t('No products were found matching your search criteria.')}
         </div>
       );
     }
     return productList.map((hit: any, i: number) => {
       return (
-        <div key={i} style={{ height: 'fit-content' }} className={settings.simpleCardView ? 'border' : ''}>
+        <div
+          key={i}
+          style={{ height: 'fit-content' }}
+          className={settings.simpleCardView ? 'border' : ''}
+        >
           <ItemResult
             dataItem={hit}
             indexItem={i}

package/src/components/UploadDisclaimer.tsx

@@ -13,6 +13,7 @@ function UploadDisclaimer({
   isMobile: boolean;
 }) {
   const [dontShowAgain, setDontShowAgain] = useState(false);
+  const isCadSearch = window.settings.cadSearch;
 
   return (
     <>
@@ -67,7 +68,9 @@ function UploadDisclaimer({
                 type="file"
                 name="take-picture"
                 id="nyris__upload-photo"
-                accept="image/jpeg,image/png,image/webp"
+                accept={`${
+                  isCadSearch ? '.stp,.step,.stl,.obj,.glb,.gltf,' : ''
+                }image/jpeg,image/png,image/webp`}
                 onChange={makeFileHandler(file =>
                   onContinue({ file, dontShowAgain }),
                 )}

package/src/components/drawer/cameraCustom.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-
 import cx from 'classnames';
 
 import { Drawer } from '@material-ui/core';
@@ -20,6 +19,8 @@ import ImageCaptureHelpModal from 'components/ImageCaptureHelpModal';
 import { createPortal } from 'react-dom';
 import { compressImage } from 'utils';
 import { Icon } from '@nyris/nyris-react-components';
+import { isCadFile } from '@nyris/nyris-api';
+import { useCadSearch } from 'hooks/useCadSearch';
 
 interface Props {
   show: boolean;
@@ -35,7 +36,7 @@ function CameraCustom(props: Props) {
   const settings = useAppSelector(state => state.settings);
   const history = useHistory();
   const dispatch = useAppDispatch();
-
+  const isCadSearch = window.settings.cadSearch;
   const { singleImageSearch, multiImageSearch } = useImageSearch();
 
   const { requestImages, setRequestImages, regions } = useRequestStore(
@@ -45,6 +46,7 @@ function CameraCustom(props: Props) {
       regions: state.regions,
     }),
   );
+  const { cadSearch } = useCadSearch();
 
   const [capturedImages, setCapturedImages] = useState<HTMLCanvasElement[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -81,21 +83,31 @@ function CameraCustom(props: Props) {
   };
 
   const handlerFindImage = async (image: any) => {
-    dispatch(updateStatusLoading(true));
-    dispatch(loadingActionResults());
-    if (history.location.pathname !== '/result') {
-      history.push('/result');
-    }
-
-    singleImageSearch({
-      image: image,
-      settings,
-      newSearch,
-      showFeedback: true,
-    }).then(() => {
-      dispatch(updateStatusLoading(false));
-    });
+    if (isCadFile(image) && isCadSearch) {
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+      if (history.location.pathname !== '/result') {
+        history.push('/result');
+      }
+      cadSearch({ file: image, settings, newSearch: true }).then((res: any) => {
+        dispatch(updateStatusLoading(false));
+      });
+    } else {
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+      if (history.location.pathname !== '/result') {
+        history.push('/result');
+      }
 
+      singleImageSearch({
+        image: image,
+        settings,
+        newSearch,
+        showFeedback: true,
+      }).then(() => {
+        dispatch(updateStatusLoading(false));
+      });
+    }
     dispatch(onToggleModalItemDetail(false));
     handleClose();
   };
@@ -245,7 +257,11 @@ function CameraCustom(props: Props) {
                                 handlerFindImage(file);
                               }
                             }}
-                            accept="image/jpeg,image/png,image/webp"
+                            accept={`${
+                              isCadSearch
+                                ? '.stp,.step,.stl,.obj,.glb,.gltf,'
+                                : ''
+                            }image/jpeg,image/png,image/webp`}
                             onClick={event => {
                               // @ts-ignore
                               event.target.value = '';

package/src/components/input/inputSearch.tsx

@@ -23,6 +23,8 @@ import UploadDisclaimer from 'components/UploadDisclaimer';
 import useRequestStore from 'Store/requestStore';
 import { useSearchOrRedirect } from 'hooks/useSearchOrRedirect';
 import { Icon } from '@nyris/nyris-react-components';
+import { useCadSearch } from 'hooks/useCadSearch';
+import { isCadFile } from '@nyris/nyris-api';
 
 const SearchBox = (props: any) => {
   const { refine }: any = props;
@@ -41,6 +43,7 @@ const SearchBox = (props: any) => {
   const isAlgoliaEnabled = settings.algolia?.enabled;
   const searchbar = useRef<HTMLDivElement | null>(null);
   const { singleImageSearch } = useImageSearch();
+  const { cadSearch } = useCadSearch();
   const { user } = useAuth0();
   const [showDisclaimer, setShowDisclaimer] = useState(false);
 
@@ -48,6 +51,8 @@ const SearchBox = (props: any) => {
     requestImages: state.requestImages,
   }));
 
+  const isCadSearch = window.settings.cadSearch;
+
   const visualSearch = useMemo(() => requestImages.length > 0, [requestImages]);
 
   useEffect(() => {
@@ -112,20 +117,31 @@ const SearchBox = (props: any) => {
   const searchOrRedirect = useSearchOrRedirect();
 
   const onImageUpload = async (fs: any) => {
-    dispatch(updateStatusLoading(true));
-    dispatch(loadingActionResults());
-    if (history.location.pathname !== '/result') {
-      history.push('/result');
-    }
+    if (isCadFile(fs) && isCadSearch) {
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+      if (history.location.pathname !== '/result') {
+        history.push('/result');
+      }
+      cadSearch({ file: fs, settings, newSearch: true }).then(res => {
+        dispatch(updateStatusLoading(false));
+      });
+    } else {
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+      if (history.location.pathname !== '/result') {
+        history.push('/result');
+      }
 
-    singleImageSearch({
-      image: fs,
-      settings,
-      showFeedback: true,
-      newSearch: true,
-    }).then(() => {
-      dispatch(updateStatusLoading(false));
-    });
+      singleImageSearch({
+        image: fs,
+        settings,
+        showFeedback: true,
+        newSearch: true,
+      }).then(() => {
+        dispatch(updateStatusLoading(false));
+      });
+    }
   };
 
   const onChangeText = (event: any) => {
@@ -305,7 +321,9 @@ const SearchBox = (props: any) => {
             )}
             <div className="wrap-box-input-mobile d-flex">
               <input
-                accept="image/*"
+                accept={`${
+                  isCadSearch ? '.stp,.step,.stl,.obj,.glb,.gltf,' : ''
+                }image/*`}
                 id="icon-button-file"
                 type="file"
                 style={{ display: 'none' }}
@@ -315,6 +333,7 @@ const SearchBox = (props: any) => {
                 onChange={e => {
                   if (e?.target?.files) {
                     const file = e?.target?.files[0];
+
                     onImageUpload(file);
                   }
                 }}

package/src/components/pre-filter/index.tsx

@@ -4,6 +4,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import { getFilters, searchFilters } from 'services/filter';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import {
+  loadingActionResults,
   setPreFilter,
   setSearchResults,
   updateStatusLoading,
@@ -17,6 +18,8 @@ import { useQuery } from 'hooks/useQuery';
 import { useTranslation } from 'react-i18next';
 import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
 import { Icon } from '@nyris/nyris-react-components';
+import { useImageSearch } from 'hooks/useImageSearch';
+import useRequestStore from 'Store/requestStore';
 
 interface Props {
   handleClose?: any;
@@ -43,6 +46,15 @@ function PreFilterComponent(props: Props) {
   const [columns, setColumns] = useState<number>(0);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
+  const { singleImageSearch, multiImageSearch } = useImageSearch();
+
+  const { imageRegions, requestImages } = useRequestStore(state => ({
+    requestImages: state.requestImages,
+    updateRegion: state.updateRegion,
+    resetRegions: state.resetRegions,
+    imageRegions: state.regions,
+  }));
+
   const selectedFilter = useMemo(
     () =>
       Object.keys(keyFilter).reduce((count, key) => {
@@ -123,6 +135,7 @@ function PreFilterComponent(props: Props) {
   const onHandlerSubmitData = () => {
     const preFilter = pickBy(keyFilter, value => !!value);
     dispatch(setPreFilter(preFilter));
+    handleClose();
 
     if (!settings.algolia?.enabled && (searchQuery || requestImage)) {
       let payload: any;
@@ -158,8 +171,34 @@ function PreFilterComponent(props: Props) {
         .catch((e: any) => {
           dispatch(updateStatusLoading(false));
         });
+    } else {
+      if (requestImages.length === 0) {
+        return;
+      }
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+
+      if (requestImages.length === 1) {
+        singleImageSearch({
+          image: requestImages[0],
+          settings,
+          imageRegion: imageRegions[0],
+          preFilterParams: preFilter,
+          compress: false,
+        }).then(res => {
+          dispatch(updateStatusLoading(false));
+        });
+      } else {
+        multiImageSearch({
+          images: requestImages,
+          settings,
+          regions: imageRegions,
+          preFilterParams: preFilter,
+        }).then(res => {
+          dispatch(updateStatusLoading(false));
+        });
+      }
     }
-    handleClose();
   };
   const { t } = useTranslation();