@nyris/nyris-webapp 0.3.57 → 0.3.59

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

@@ -16,7 +16,7 @@ import { truncateString } from 'helpers/truncateString';
 import { find } from 'services/image';
 import { useQuery } from 'hooks/useQuery';
 import { useTranslation } from 'react-i18next';
-import ClearOutlinedIcon from "@material-ui/icons/ClearOutlined";
+import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
 
 interface Props {
   handleClose?: any;
@@ -32,21 +32,16 @@ function PreFilterComponent(props: Props) {
   const query = useQuery();
   const searchQuery = query.get('query') || '';
   const { search } = stateGlobal;
-  const {
-    preFilter: keyFilterState,
-
-    requestImage,
-    selectedRegion,
-  } = search;
+  const { preFilter: keyFilterState, requestImage, selectedRegion } = search;
 
   const [keyFilter, setKeyFilter] = useState<Record<string, boolean>>(
     keyFilterState || {},
   );
+  const [searchKey, setSearchKey] = useState<string>('');
 
   const [isLoading, setLoading] = useState<boolean>(false);
   const [columns, setColumns] = useState<number>(0);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-  const [searchKey, setSearchKey] = useState<string>('');
 
   const selectedFilter = useMemo(
     () =>
@@ -64,10 +59,10 @@ function PreFilterComponent(props: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    filterSearchHandler(searchKey);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchKey]);
+  // useEffect(() => {
+  //   filterSearchHandler(searchKey);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [searchKey]);
 
   const getDataFilterDesktop = async () => {
     setLoading(true);
@@ -239,6 +234,7 @@ function PreFilterComponent(props: Props) {
             className="input-search-filter"
             placeholder={t('Search')}
             onChange={(e: any) => {
+              filterSearchHandler(e.target.value);
               setSearchKey(e.target.value);
             }}
             value={searchKey}
@@ -247,6 +243,7 @@ function PreFilterComponent(props: Props) {
             className="btn-clear-text"
             onClick={() => {
               setSearchKey('');
+              filterSearchHandler('');
             }}
           >
             <ClearOutlinedIcon style={{ fontSize: 16, color: '#2B2C46' }} />
@@ -331,76 +328,77 @@ function PreFilterComponent(props: Props) {
                 columnCount: 4,
                 padding: '24px 24px 40px 24px',
                 height: '100%',
-
                 backgroundColor: '#FAFAFA',
               }
         }
       >
-        {Object.entries(resultFilter).map(([key, value]: any, i: any) => {
-          return (
-            <div className="box-group-items" key={key}>
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  rowGap: '12px',
-                  width: '100%',
-                }}
-              >
-                <Typography
+        {Object.entries(resultFilter)
+          .sort()
+          .map(([key, value]: any, i: any) => {
+            return (
+              <div className="box-group-items" key={key}>
+                <div
                   style={{
-                    fontWeight: 'bold',
-                    color: '#000',
-                    fontSize: '12px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    rowGap: '12px',
+                    width: '100%',
                   }}
                 >
-                  {key}
-                </Typography>
+                  <Typography
+                    style={{
+                      fontWeight: 'bold',
+                      color: '#000',
+                      fontSize: '12px',
+                    }}
+                  >
+                    {key}
+                  </Typography>
 
-                {value.map((item: any, index: any) => {
-                  return (
-                    <Tooltip
-                      key={item}
-                      title={item}
-                      placement="top"
-                      arrow={true}
-                      disableHoverListener={item.length < 35}
-                    >
-                      <div
-                        aria-label={item}
-                        style={{
-                          cursor: 'pointer',
-                          fontSize: '12px',
-                          minHeight: '20px',
-                          color: '#2B2C46',
-                          width: '100%',
-                          maxWidth: 'fit-content',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          backgroundColor: keyFilter[item] ? '#E9E9EC' : '',
-                          borderRadius: 8,
-                          paddingLeft: '8px',
-                          paddingRight: '8px',
-                        }}
-                        onClick={() => {
-                          if (selectedFilter < maxFilter) {
-                            setKeyFilter({
-                              ...keyFilter,
-                              [item]: !keyFilter[item],
-                            });
-                          }
-                        }}
+                  {value.map((item: any, index: any) => {
+                    return (
+                      <Tooltip
+                        key={item}
+                        title={item}
+                        placement="top"
+                        arrow={true}
+                        disableHoverListener={item.length < 35}
                       >
-                        {truncateString(item, !isMobile ? 35 : 35)}
-                      </div>
-                    </Tooltip>
-                  );
-                })}
+                        <div
+                          aria-label={item}
+                          style={{
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                            minHeight: '20px',
+                            color: '#2B2C46',
+                            width: '100%',
+                            maxWidth: 'fit-content',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            backgroundColor: keyFilter[item] ? '#E9E9EC' : '',
+                            borderRadius: 8,
+                            paddingLeft: '8px',
+                            paddingRight: '8px',
+                          }}
+                          onClick={() => {
+                            if (selectedFilter < maxFilter) {
+                              setKeyFilter({
+                                ...keyFilter,
+                                [item]: !keyFilter[item],
+                              });
+                            }
+                          }}
+                        >
+                          {truncateString(item, !isMobile ? 35 : 35)}
+                        </div>
+                      </Tooltip>
+                    );
+                  })}
+                </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          })}
         {isLoading && (
           <div style={{ columnCount: isMobile ? 1 : 4 }}>
             {Array(12)

package/src/components/results/ItemResult.tsx

@@ -166,7 +166,7 @@ function ItemResult(props: Props) {
             </Button>
           </div>
         )}
-        {!isHover && main_image_link && (
+        {!isHover && main_image_link && !settings.noSimilarSearch && (
           <div
             className="box-icon-modal"
             onClick={() => {
@@ -227,12 +227,24 @@ function ItemResult(props: Props) {
           <div className="info-sku">{dataItem.sku}</div>
           <span className="info-marking">{dataItem.Bezeichnung}</span>
           <Tooltip
-            title={settings.language === 'en' ? dataItem.VK_Text_Englisch: dataItem.VK_Text_Deutsch}
+            title={
+              settings.language === 'en'
+                ? dataItem.VK_Text_Englisch
+                : dataItem.VK_Text_Deutsch
+            }
             placement="top"
             arrow={true}
-            disableHoverListener={settings.language === 'en' ? dataItem.VK_Text_Englisch?.length < 76 : dataItem.VK_Text_Deutsch?.length < 76}
+            disableHoverListener={
+              settings.language === 'en'
+                ? dataItem.VK_Text_Englisch?.length < 76
+                : dataItem.VK_Text_Deutsch?.length < 76
+            }
           >
-            <div className="info-description">{settings.language === 'en' ? dataItem.VK_Text_Englisch : dataItem.VK_Text_Deutsch}</div>
+            <div className="info-description">
+              {settings.language === 'en'
+                ? dataItem.VK_Text_Englisch
+                : dataItem.VK_Text_Deutsch}
+            </div>
           </Tooltip>
         </div>
       ) : (
@@ -242,7 +254,7 @@ function ItemResult(props: Props) {
             flexDirection: 'column',
             backgroundColor: '#F3F3F5',
             flexGrow: 1,
-            zIndex: 100,
+            zIndex: 10,
             display: 'flex',
           }}
         >
@@ -306,16 +318,19 @@ function ItemResult(props: Props) {
                         color: settings.theme?.mainTextColor || '#2B2C46',
                       }}
                     >
-                    <span
-                      style={{
-                        color: get(dataItem, settings.field.warehouseStockValue)
-                          ? '#00C070'
-                          : '#c54545',
-                        fontWeight: 600,
-                      }}
-                    >
-                      {get(dataItem, settings.field.warehouseStockValue) || 0}
-                    </span>
+                      <span
+                        style={{
+                          color: get(
+                            dataItem,
+                            settings.field.warehouseStockValue,
+                          )
+                            ? '#00C070'
+                            : '#c54545',
+                          fontWeight: 600,
+                        }}
+                      >
+                        {get(dataItem, settings.field.warehouseStockValue) || 0}
+                      </span>
                     </Typography>
                   )}
               </div>
@@ -397,7 +412,8 @@ function ItemResult(props: Props) {
                   boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
                   // marginBottom: 22,
                   height: 40,
-                  background: settings.theme.secondaryCTAButtonColor || '#2B2C46',
+                  background:
+                    settings.theme.secondaryCTAButtonColor || '#2B2C46',
                   borderRadius: 4,
                   padding: '0px 8px',
                   marginTop: '8px',
@@ -431,7 +447,8 @@ function ItemResult(props: Props) {
                       fontSize: '12px',
                       letterSpacing: '0.27px',
                       wordBreak: 'break-all',
-                      maxWidth: !isMobile && secondaryCTALink ? '136px' : '164x',
+                      maxWidth:
+                        !isMobile && secondaryCTALink ? '136px' : '164x',
                       paddingRight: '8px',
                     }}
                     align="left"

package/src/components/rfq/RfqBanner.tsx

@@ -42,10 +42,7 @@ function RfqBanner({
       >
         <div>
           <img
-            src={getCroppedCanvas(
-              requestImage?.canvas,
-              selectedRegion,
-            )?.toDataURL()}
+            src={getCroppedCanvas(requestImage, selectedRegion)?.toDataURL()}
             alt="request_image"
             style={{
               mixBlendMode: rfqStatus !== 'inactive' ? 'overlay' : 'unset',

package/src/components/rfq/RfqModal.tsx

@@ -10,9 +10,8 @@ import toast from 'react-hot-toast';
 import { ReactComponent as ErrorIcon } from 'common/assets/icons/error.svg';
 import { useMediaQuery } from 'react-responsive';
 import { useAppSelector } from '../../Store/Store';
+import useRequestStore from 'Store/requestStore';
 interface Props {
-  requestImage: any;
-  selectedRegion: any;
   setIsRfqModalOpen: any;
   isRfqModalOpen?: any;
   setRfqStatus: any;
@@ -35,8 +34,6 @@ const getErrorMessage = (error: any) => {
 };
 
 export default function RfqModal({
-  requestImage,
-  selectedRegion,
   setIsRfqModalOpen,
   isRfqModalOpen,
   setRfqStatus,
@@ -47,6 +44,12 @@ export default function RfqModal({
   const { settings } = useAppSelector(state => state);
 
   const [information, setInformation] = useState('');
+
+  const { requestImages, regions } = useRequestStore(state => ({
+    requestImages: state.requestImages,
+    regions: state.regions,
+  }));
+
   const setFormattedContent = React.useCallback(
     (text: string) => {
       setInformation(text.slice(0, 150));
@@ -61,8 +64,8 @@ export default function RfqModal({
 
   const handleRfq = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
-    const { canvas }: any = requestImage;
-    const croppedImage = getCroppedCanvas(canvas, selectedRegion);
+    const canvas: any = requestImages[0];
+    const croppedImage = getCroppedCanvas(canvas, regions[0]);
     const serviceId = 'service_zfsxshi';
     setIsRfqModalOpen(false);
     const templateId = settings.rfq?.emailTemplateId;
@@ -179,10 +182,7 @@ export default function RfqModal({
           }}
         >
           <img
-            src={getCroppedCanvas(
-              requestImage?.canvas,
-              selectedRegion,
-            )?.toDataURL()}
+            src={getCroppedCanvas(requestImages[0], regions[0])?.toDataURL()}
             alt="request_image"
             style={{ maxHeight: '200px' }}
           />

package/src/hooks/useFilteredRegions.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 const useFilteredRegions = (regions: any, imageSelection: any) => {
   const filteredRegions = useMemo(
     () =>
-      regions.map(
+      regions?.map(
         (region: {
           normalizedRect: { x1: any; x2: any; y1: any; y2: any };
         }) => {

package/src/hooks/useImageSearch.ts

@@ -0,0 +1,189 @@
+import { RectCoords } from '@nyris/nyris-api';
+import { isEmpty } from 'lodash';
+import { useCallback } from 'react';
+import { createImage, find, findMulti, findRegions } from 'services/image';
+import useRequestStore from 'Store/requestStore';
+import useResultStore from 'Store/resultStore';
+import {
+  setFirstSearchImage,
+  setFirstSearchPrefilters,
+  setFirstSearchResults,
+  setRegions,
+  setRequestImage,
+  setSearchResults,
+  setSelectedRegion,
+  setShowFeedback,
+  updateStatusLoading,
+} from 'Store/search/Search';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { AppSettings } from 'types';
+import { compressImage } from 'utils';
+
+export const useImageSearch = () => {
+  const dispatch = useAppDispatch();
+
+  const preFilter = useAppSelector(state => state.search.preFilter);
+  const firstSearchResults = useAppSelector(
+    state => state.search.firstSearchResults,
+  );
+  const regions = useAppSelector(state => state.settings.regions);
+
+  const { setRequestImages, setImageRegions } = useRequestStore(state => ({
+    setRequestImages: state.setRequestImages,
+    setImageRegions: state.setRegions,
+    requestImages: state.requestImages,
+    regions: state.regions,
+  }));
+
+  const { setDetectedObject } = useResultStore(state => ({
+    setDetectedObject: state.setDetectedObject,
+  }));
+
+  const singleImageSearch = useCallback(
+    async ({
+      image,
+      settings,
+      showFeedback = true,
+      imageRegion,
+      newSearch,
+    }: {
+      image: any;
+      settings: AppSettings;
+      showFeedback?: boolean;
+      imageRegion?: RectCoords;
+      newSearch?: boolean;
+    }) => {
+      let region: RectCoords | undefined = imageRegion;
+      let res: any;
+      let compressedBase64;
+
+      try {
+        compressedBase64 = await compressImage(image);
+      } catch (error) {}
+
+      let canvasImage = await createImage(compressedBase64 || image);
+
+      if (!imageRegion) {
+        dispatch(setRequestImage(canvasImage));
+        setRequestImages([canvasImage]);
+      }
+
+      if (regions && !imageRegion) {
+        try {
+          let res = await findRegions(canvasImage, settings);
+          setDetectedObject(res.regions, 0);
+          dispatch(setRegions(res.regions));
+          region = res.selectedRegion;
+          dispatch(setSelectedRegion(region));
+          setImageRegions([region]);
+        } catch (error) {}
+      }
+
+      const preFilterValues = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: Object.keys(preFilter),
+        },
+      ];
+      let filters: any[] = [];
+
+      try {
+        res = await find({
+          image: canvasImage,
+          settings,
+          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+          region,
+        });
+
+        res?.results.forEach((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
+          });
+        });
+        const payload = {
+          ...res,
+          filters,
+        };
+        dispatch(setSearchResults(payload));
+
+        if (showFeedback) {
+          dispatch(setShowFeedback(true));
+        }
+        // go back
+        if (!firstSearchResults || newSearch) {
+          dispatch(setFirstSearchResults(payload));
+          dispatch(setFirstSearchImage(canvasImage));
+          dispatch(setFirstSearchPrefilters(preFilter));
+        }
+      } catch (error) {
+        dispatch(updateStatusLoading(false));
+      }
+
+      return res;
+    },
+    [
+      dispatch,
+      firstSearchResults,
+      preFilter,
+      regions,
+      setDetectedObject,
+      setImageRegions,
+      setRequestImages,
+    ],
+  );
+
+  const multiImageSearch = useCallback(
+    async ({
+      images,
+      settings,
+      regions,
+      showFeedback = true,
+    }: {
+      images: HTMLCanvasElement[];
+      regions: RectCoords[];
+      settings: AppSettings;
+      showFeedback?: boolean;
+    }) => {
+      const preFilterValues = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: Object.keys(preFilter),
+        },
+      ];
+      let filters: any[] = [];
+      let res: any;
+      try {
+        const res = await findMulti({
+          images,
+          settings,
+          regions,
+          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+        });
+
+        res?.results.forEach((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
+          });
+        });
+        const payload = {
+          ...res,
+          filters,
+        };
+        dispatch(setSearchResults(payload));
+
+        if (showFeedback) {
+          dispatch(setShowFeedback(true));
+        }
+      } catch (error) {
+        dispatch(updateStatusLoading(false));
+      }
+
+      return res;
+    },
+    [dispatch, preFilter],
+  );
+
+  return { singleImageSearch, multiImageSearch };
+};

package/src/hooks/useSearchOrRedirect.ts

@@ -0,0 +1,84 @@
+import preFilter from 'components/pre-filter';
+import { debounce, find, isEmpty } from 'lodash';
+import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import useRequestStore from 'Store/requestStore';
+import {
+  updateQueryText,
+  updateStatusLoading,
+  setSearchResults,
+  setShowFeedback,
+} from 'Store/search/Search';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+
+export const useSearchOrRedirect = () => {
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+
+  const { requestImages, regions } = useRequestStore(state => ({
+    requestImages: state.requestImages,
+    regions: state.regions,
+  }));
+
+  const settings = useAppSelector(state => state.settings);
+  const isAlgoliaEnabled = settings.algolia?.enabled;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const searchOrRedirect = useCallback(
+    debounce((value: any) => {
+      if (!isAlgoliaEnabled) {
+        dispatch(updateQueryText(value));
+        let payload: any;
+        let filters: any[] = [];
+        const preFilterValues = [
+          {
+            key: settings.visualSearchFilterKey,
+            values: Object.keys(preFilter),
+          },
+        ];
+        if (value || requestImages.length > 0) {
+          dispatch(updateStatusLoading(true));
+          find({
+            image: requestImages[0],
+            settings,
+            filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+            region: regions[0],
+            text: value,
+          })
+            .then((res: any) => {
+              res?.results.forEach((item: any) => {
+                filters.push({
+                  sku: item.sku,
+                  score: item.score,
+                });
+              });
+              payload = {
+                ...res,
+                filters,
+              };
+              dispatch(setSearchResults(payload));
+              dispatch(updateStatusLoading(false));
+              dispatch(setShowFeedback(true));
+            })
+            .catch((e: any) => {
+              dispatch(updateStatusLoading(false));
+            });
+        } else {
+          dispatch(setSearchResults([]));
+        }
+      }
+
+      if (value) {
+        history.push({
+          pathname: '/result',
+          search: `?query=${value}`,
+        });
+      } else {
+        history.push('/result');
+      }
+    }, 500),
+    [requestImages, preFilter, regions, isAlgoliaEnabled],
+  );
+
+  return searchOrRedirect;
+};

package/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",