@nyris/nyris-webapp 0.3.57 → 0.3.59

package/src/components/icon-label/icon-label.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ReactComponent as RemoveIcon } from 'common/assets/icons/minus.svg';
-import { ReactComponent as AddIcon } from 'common/assets/icons/add.svg';
+import { ReactComponent as AddIcon } from 'common/assets/icons/add-rounded.svg';
 
 export type LabelPosition = 'bottom' | 'left' | 'right' | 'top';
 

package/src/components/input/inputSearch.tsx

@@ -1,73 +1,56 @@
 import { Button, Tooltip } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
-import CloseIcon from '@material-ui/icons/Close';
 import IconCamera from 'common/assets/icons/camera.svg';
 import { useQuery } from 'hooks/useQuery';
-import { debounce, isEmpty } from 'lodash';
-import React, {
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useDropzone } from 'react-dropzone';
+import { isEmpty } from 'lodash';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { connectSearchBox } from 'react-instantsearch-dom';
-import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
-import { createImage, find, findRegions } from 'services/image';
 import { ReactComponent as IconFilter } from 'common/assets/icons/filter_settings.svg';
 import { ReactComponent as IconSearch } from 'common/assets/icons/icon_search.svg';
 
 import {
   reset,
-  setImageSearchInput,
-  setRequestImage,
-  setSearchResults,
   updateStatusLoading,
   loadingActionResults,
-  setRegions,
-  setSelectedRegion,
   updateQueryText,
-  setShowFeedback,
-  setFirstSearchResults,
-  setFirstSearchImage,
-  setFirstSearchPrefilters,
-  setFirstSearchThumbSearchInput,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import DefaultModal from 'components/modal/DefaultModal';
 import PreFilterComponent from 'components/pre-filter';
-import { RectCoords } from '@nyris/nyris-api';
 import { useTranslation } from 'react-i18next';
 import { useAuth0 } from '@auth0/auth0-react';
+import { useImageSearch } from 'hooks/useImageSearch';
+import UploadDisclaimer from 'components/UploadDisclaimer';
+import useRequestStore from 'Store/requestStore';
+import { useSearchOrRedirect } from 'hooks/useSearchOrRedirect';
 
 const SearchBox = (props: any) => {
-  const { refine, onToggleFilterMobile }: any = props;
+  const { refine }: any = props;
   // const containerRefInputMobile = useRef<HTMLDivElement>(null);
-  const stateGlobal = useAppSelector(state => state);
-  const { search, settings } = stateGlobal;
-  const {
-    imageThumbSearchInput,
-    preFilter,
-    requestImage,
-    selectedRegion,
-  } = search;
+  const preFilter = useAppSelector(state => state.search.preFilter);
+  const settings = useAppSelector(state => state.settings);
+
   const focusInp: any = useRef<HTMLDivElement | null>(null);
   const history = useHistory();
   const [valueInput, setValueInput] = useState<string>('');
   const dispatch = useAppDispatch();
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const query = useQuery();
   const [isOpenModalFilterDesktop, setToggleModalFilterDesktop] =
     useState<boolean>(false);
   const { t } = useTranslation();
   const isAlgoliaEnabled = settings.algolia?.enabled;
   const searchbar = useRef<HTMLDivElement | null>(null);
-
+  const { singleImageSearch } = useImageSearch();
   const { user } = useAuth0();
+  const [showDisclaimer, setShowDisclaimer] = useState(false);
+
+  const { requestImages } = useRequestStore(state => ({
+    requestImages: state.requestImages,
+  }));
+
+  const visualSearch = useMemo(() => requestImages.length > 0, [requestImages]);
 
   useEffect(() => {
     if (focusInp?.current) {
@@ -109,7 +92,7 @@ const SearchBox = (props: any) => {
   }, [query, refine, dispatch, isAlgoliaEnabled]);
 
   useEffect(() => {
-    if (imageThumbSearchInput) {
+    if (visualSearch) {
       setValueInput('');
       if (isAlgoliaEnabled) {
         refine('');
@@ -117,7 +100,7 @@ const SearchBox = (props: any) => {
       history.push('/result');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageThumbSearchInput, isAlgoliaEnabled]);
+  }, [visualSearch, isAlgoliaEnabled]);
 
   useEffect(() => {
     if (history.location?.pathname === '/') {
@@ -128,130 +111,24 @@ const SearchBox = (props: any) => {
   }, [history.location]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const searchOrRedirect = useCallback(
-    debounce((value: any, withImage = true) => {
-      if (!isAlgoliaEnabled) {
-        dispatch(updateQueryText(value));
-        let payload: any;
-        let filters: any[] = [];
-        const preFilterValues = [
-          {
-            key: settings.visualSearchFilterKey,
-            values: Object.keys(preFilter),
-          },
-        ];
-        if (value || requestImage) {
-          dispatch(updateStatusLoading(true));
-          find({
-            image: withImage
-              ? (requestImage?.canvas as HTMLCanvasElement)
-              : undefined,
-            settings,
-            filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-            region: withImage ? selectedRegion : undefined,
-            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) => {
-              console.log('error input search', e);
-              dispatch(updateStatusLoading(false));
-            });
-        } else {
-          dispatch(setSearchResults([]));
-        }
-      }
-
-      if (value) {
-        history.push({
-          pathname: '/result',
-          search: `?query=${value}`,
-        });
-      } else {
-        history.push('/result');
-      }
-    }, 500),
-    [requestImage, preFilter, selectedRegion, isAlgoliaEnabled],
-  );
+  const searchOrRedirect = useSearchOrRedirect();
 
-  const { getInputProps } = useDropzone({
-    onDrop: async (fs: File[]) => {
-      if (!fs[0]) return;
-      dispatch(updateStatusLoading(true));
-      dispatch(loadingActionResults());
-      if (history.location.pathname !== '/result') {
-        history.push('/result');
-      }
-      let payload: any;
-      let filters: any[] = [];
-      let region: RectCoords | undefined;
-
-      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      const preFilterValues = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter),
-        },
-      ];
-      try {
-        if (settings.regions) {
-          let res = await findRegions(image, settings);
+  const onImageUpload = async (fs: any) => {
+    dispatch(updateStatusLoading(true));
+    dispatch(loadingActionResults());
+    if (history.location.pathname !== '/result') {
+      history.push('/result');
+    }
 
-          dispatch(setRegions(res.regions));
-          region = res.selectedRegion;
-          dispatch(setSelectedRegion(region));
-        }
-      } catch (error) {
-      } finally {
-        return find({
-          image,
-          settings,
-          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-          region,
-        })
-          .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));
-            // go back
-            dispatch(setFirstSearchResults(payload));
-            dispatch(setFirstSearchImage(image));
-            dispatch(setFirstSearchPrefilters(preFilter));
-            dispatch(setFirstSearchThumbSearchInput(URL.createObjectURL(fs[0])));
-          })
-          .catch((e: any) => {
-            console.log('error input search', e);
-            dispatch(updateStatusLoading(false));
-          });
-      }
-    },
-  });
+    singleImageSearch({
+      image: fs,
+      settings,
+      showFeedback: true,
+      newSearch: true,
+    }).then(() => {
+      dispatch(updateStatusLoading(false));
+    });
+  };
 
   const onChangeText = (event: any) => {
     setValueInput(event.currentTarget.value);
@@ -276,194 +153,185 @@ const SearchBox = (props: any) => {
     return settings.preFilterOption;
   }, [settings.preFilterOption, settings.shouldUseUserMetadata, user]);
 
+  const showDisclaimerDisabled = useMemo(() => {
+    const disclaimer = localStorage.getItem('upload-disclaimer-webapp');
+    if (requestImages.length === 0) return true;
+    if (!disclaimer) return false;
+    return disclaimer === 'dont-show';
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showDisclaimer, requestImages]);
+
   return (
-    <div className="wrap-input-search-field">
-      <div className="box-input-search d-flex">
-        <div className="input-wrapper">
-          <div className="box-inp">
-            <Tooltip
-              title={
-                !isEmpty(preFilter)
-                  ? Object.keys(preFilter).join(', ')
-                  : t('Add or change pre-filter')
-              }
-              placement="top"
-              arrow={true}
-              disableHoverListener={!showPreFilter}
-            >
-              <div
-                className="pre-filter-icon"
-                style={{
-                  cursor: showPreFilter ? 'pointer' : 'default',
-                }}
-                onClick={() =>
-                  showPreFilter ? setToggleModalFilterDesktop(true) : false
+    <>
+      {showDisclaimer && (
+        <UploadDisclaimer
+          onClose={() => {
+            setShowDisclaimer(false);
+          }}
+          onContinue={({
+            file,
+            dontShowAgain,
+          }: {
+            file: any;
+            dontShowAgain: any;
+          }) => {
+            if (dontShowAgain) {
+              localStorage.setItem('upload-disclaimer-webapp', 'dont-show');
+            }
+            onImageUpload(file);
+
+            setShowDisclaimer(false);
+          }}
+          isMobile={false}
+        />
+      )}
+      <div className="wrap-input-search-field">
+        <div className="box-input-search d-flex">
+          <div className="input-wrapper">
+            <div className="box-inp">
+              <Tooltip
+                title={
+                  !isEmpty(preFilter)
+                    ? Object.keys(preFilter).join(', ')
+                    : t('Add or change pre-filter')
                 }
+                placement="top"
+                arrow={true}
+                disableHoverListener={!showPreFilter}
               >
-                {showPreFilter && (
-                  <div
-                    className="icon-hover desktop"
-                    style={{
-                      ...(!isEmpty(preFilter)
-                        ? {
-                            backgroundColor: `${settings.theme?.primaryColor}`,
-                          }
-                        : {
-                            backgroundColor: '#2B2C46',
-                          }),
-                    }}
-                  >
-                    <IconFilter color="white" />
-                  </div>
-                )}
-                {!showPreFilter && <IconSearch width={16} height={16} />}
-                {!isEmpty(preFilter) && showPreFilter && (
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: '1px',
-                      left: '26px',
-                      display: 'flex',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                      background: 'white',
-                      width: '12px',
-                      height: '12px',
-                      borderRadius: '100%',
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: '8px',
-                        height: '8px',
-                        background: settings.theme?.primaryColor,
-                        borderRadius: '100%',
-                        strokeWidth: '2px',
-                      }}
-                    ></div>
-                  </div>
-                )}
-              </div>
-            </Tooltip>
-            <div
-              style={{
-                height: '75%',
-                order: 1,
-              }}
-            >
-              {imageThumbSearchInput && (
                 <div
+                  className="pre-filter-icon"
                   style={{
-                    border: `2px solid ${settings.theme?.primaryColor}`,
-                    backgroundColor: `${settings.theme?.primaryColor}26`,
-                    marginRight: '5px',
-                    display: 'flex',
+                    cursor: showPreFilter ? 'pointer' : 'default',
                   }}
-                  className="box-image-search-thumb"
+                  onClick={() =>
+                    showPreFilter ? setToggleModalFilterDesktop(true) : false
+                  }
                 >
-                  <img
-                    src={imageThumbSearchInput}
-                    style={{ objectFit: 'contain' }}
-                    alt="img_search"
-                  />
-                  <Tooltip
-                    title={t('Clear image search')}
-                    placement="top"
-                    arrow={true}
-                  >
-                    <button
-                      type="button"
-                      onClick={() => {
-                        if (!valueInput) {
-                          dispatch(reset(''));
-                          history.push('/');
-                        }
-                        dispatch(reset(''));
-                        if (isAlgoliaEnabled) {
-                          refine(valueInput);
-                        } else {
-                          searchOrRedirect(valueInput, false);
-                        }
+                  {showPreFilter && (
+                    <div
+                      className="icon-hover desktop"
+                      style={{
+                        ...(!isEmpty(preFilter)
+                          ? {
+                              backgroundColor: `${settings.theme?.primaryColor}`,
+                            }
+                          : {
+                              backgroundColor: '#2B2C46',
+                            }),
                       }}
                     >
-                      <CloseIcon
+                      <IconFilter color="white" />
+                    </div>
+                  )}
+                  {!showPreFilter && <IconSearch width={16} height={16} />}
+                  {!isEmpty(preFilter) && showPreFilter && (
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: '1px',
+                        left: '26px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        background: 'white',
+                        width: '12px',
+                        height: '12px',
+                        borderRadius: '100%',
+                      }}
+                    >
+                      <div
                         style={{
-                          fontSize: 20,
-                          color: settings.theme?.primaryColor,
+                          width: '8px',
+                          height: '8px',
+                          background: settings.theme?.primaryColor,
+                          borderRadius: '100%',
+                          strokeWidth: '2px',
                         }}
-                      />
-                    </button>
-                  </Tooltip>
+                      ></div>
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
+              </Tooltip>
 
-            <input
-              style={{
-                border: '0px',
-                width: '100%',
-                fontSize: 14,
-                color: '#2B2C46',
-              }}
-              className="input-search hhhh"
-              placeholder={t('Search')}
-              value={valueInput}
-              onChange={onChangeText}
-              ref={focusInp}
-            />
-          </div>
+              <input
+                style={{
+                  border: '0px',
+                  width: '100%',
+                  fontSize: 14,
+                  color: '#2B2C46',
+                }}
+                className="input-search hhhh"
+                placeholder={t('Search')}
+                value={valueInput}
+                onChange={onChangeText}
+                ref={focusInp}
+              />
+            </div>
 
-          {history.location.pathname === '/result' && valueInput && (
-            <Button
-              className="btn-clear-text"
-              onClick={() => {
-                if (imageThumbSearchInput) {
-                  history.push('/result');
-                  if (!isAlgoliaEnabled) {
-                    searchOrRedirect('');
+            {history.location.pathname === '/result' && valueInput && (
+              <Button
+                className="btn-clear-text"
+                onClick={() => {
+                  if (visualSearch) {
+                    history.push('/result');
+                    if (!isAlgoliaEnabled) {
+                      searchOrRedirect('');
+                    }
+                    setValueInput('');
+                    if (isAlgoliaEnabled) {
+                      refine('');
+                    }
+                    return;
                   }
                   setValueInput('');
                   if (isAlgoliaEnabled) {
                     refine('');
                   }
-                  return;
-                }
-                setValueInput('');
-                if (isAlgoliaEnabled) {
-                  refine('');
-                }
-                dispatch(reset(''));
-                history.push('/');
-              }}
-            >
-              <Tooltip
-                title={t('Clear text search')}
-                placement="top"
-                arrow={true}
+                  dispatch(reset(''));
+                  history.push('/');
+                }}
               >
-                <ClearOutlinedIcon style={{ fontSize: 16, color: '#2B2C46' }} />
-              </Tooltip>
-            </Button>
-          )}
-          {!isMobile ? (
+                <Tooltip
+                  title={t('Clear text search')}
+                  placement="top"
+                  arrow={true}
+                >
+                  <ClearOutlinedIcon
+                    style={{ fontSize: 16, color: '#2B2C46' }}
+                  />
+                </Tooltip>
+              </Button>
+            )}
             <div className="wrap-box-input-mobile d-flex">
               <input
                 accept="image/*"
                 id="icon-button-file"
                 type="file"
                 style={{ display: 'none' }}
-                {...getInputProps({
-                  onClick: e => {
-                    e.stopPropagation();
-                  },
-                })}
+                onClick={e => {
+                  e.stopPropagation();
+                }}
+                onChange={e => {
+                  if (e?.target?.files) {
+                    const file = e?.target?.files[0];
+                    onImageUpload(file);
+                  }
+                }}
               />
               <Tooltip
                 title={t('Search with an image')}
                 placement="top"
                 arrow={true}
               >
-                <label htmlFor="icon-button-file">
+                <label
+                  htmlFor={showDisclaimerDisabled ? 'icon-button-file' : ''}
+                  onClick={e => {
+                    if (!showDisclaimerDisabled) {
+                      setShowDisclaimer(true);
+                    }
+                  }}
+                >
                   <IconButton
                     color="primary"
                     aria-label="upload picture"
@@ -480,31 +348,22 @@ const SearchBox = (props: any) => {
                 </label>
               </Tooltip>
             </div>
-          ) : (
-            <div>
-              <Button
-                className="btn-mobile-filter"
-                onClick={onToggleFilterMobile}
-              >
-                <IconFilter width={18} height={18} />
-              </Button>
-            </div>
-          )}
+          </div>
         </div>
-      </div>
-      {showPreFilter && (
-        <DefaultModal
-          openModal={isOpenModalFilterDesktop}
-          handleClose={() => setToggleModalFilterDesktop(false)}
-          classNameModal="wrap-filter-desktop"
-          classNameComponentChild="bg-white box-filter-desktop"
-        >
-          <PreFilterComponent
+        {showPreFilter && (
+          <DefaultModal
+            openModal={isOpenModalFilterDesktop}
             handleClose={() => setToggleModalFilterDesktop(false)}
-          />
-        </DefaultModal>
-      )}
-    </div>
+            classNameModal="wrap-filter-desktop"
+            classNameComponentChild="bg-white box-filter-desktop"
+          >
+            <PreFilterComponent
+              handleClose={() => setToggleModalFilterDesktop(false)}
+            />
+          </DefaultModal>
+        )}
+      </div>
+    </>
   );
 };