@nyris/nyris-webapp 0.3.32 → 0.3.34

package/src/components/input/inputSearch.tsx

@@ -1,9 +1,8 @@
-import { Box, Button, Tooltip, Typography } from '@material-ui/core';
+import { Box, 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 IconSearch from 'common/assets/icons/icon_search.svg';
 import { useQuery } from 'hooks/useQuery';
 import { debounce, isEmpty } from 'lodash';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
@@ -13,6 +12,7 @@ import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
 import { createImage, findByImage, 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,
@@ -20,7 +20,6 @@ import {
   setRequestImage,
   setSearchResults,
   updateStatusLoading,
-  setUpdateKeyFilterDesktop,
   loadingActionResults,
   setRegions,
   setSelectedRegion,
@@ -29,9 +28,7 @@ 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 { truncateString } from 'helpers/truncateString';
 import { useTranslation } from 'react-i18next';
-import heic2any from 'heic2any';
 
 const SearchBox = (props: any) => {
   const { refine, onToggleFilterMobile }: any = props;
@@ -88,76 +85,58 @@ const SearchBox = (props: any) => {
     }, 500),
     [],
   );
-  const handleVisualSearch = async (blob: Blob) => {
-    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(blob)));
-    // @ts-ignore
-    let image = await createImage(blob);
-    dispatch(setRequestImage(image));
-    const preFilter = [
-      {
-        key: settings.visualSearchFilterKey,
-        values: [`${keyFilter}`],
-      },
-    ];
-
-    if (settings.regions) {
-      let res = await findRegions(image, settings);
-      dispatch(setRegions(res.regions));
-      region = res.selectedRegion;
-      dispatch(setSelectedRegion(region));
-    }
 
-    return findByImage({
-      image,
-      settings,
-      filters: keyFilter ? preFilter : undefined,
-      region,
-    })
-      .then((res: any) => {
-        res?.results.map((item: any) => {
-          filters.push({
-            sku: item.sku,
-            score: item.score,
-          });
-        });
-        payload = {
-          ...res,
-          filters,
-        };
-        dispatch(setSearchResults(payload));
-        dispatch(updateStatusLoading(false));
-      })
-      .catch((e: any) => {
-        console.log('error input search', e);
-        dispatch(updateStatusLoading(false));
-      });
-  };
   const { getInputProps } = useDropzone({
     onDrop: async (fs: File[]) => {
-      var file = fs[0];
-      if (file.type === 'image/heic') {
-        heic2any({
-          blob: file as Blob,
-          toType: 'image/png',
-          quality: 1.0,
-        })
-          .then(function (resultBlob) {
-            handleVisualSearch(resultBlob as Blob);
-          })
-          .catch(function (error) {
-            console.error('Error converting HEIC to PNG:', error);
-          });
-      } else {
-        handleVisualSearch(fs[0]);
+      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 preFilter = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: [`${keyFilter}`],
+        },
+      ];
+
+      if (settings.regions) {
+        let res = await findRegions(image, settings);
+        dispatch(setRegions(res.regions));
+        region = res.selectedRegion;
+        dispatch(setSelectedRegion(region));
+      }
+
+      return findByImage({
+        image,
+        settings,
+        filters: keyFilter ? preFilter : undefined,
+        region,
+      })
+        .then((res: any) => {
+          res?.results.map((item: any) => {
+            filters.push({
+              sku: item.sku,
+              score: item.score,
+            });
+          });
+          payload = {
+            ...res,
+            filters,
+          };
+          dispatch(setSearchResults(payload));
+          dispatch(updateStatusLoading(false));
+        })
+        .catch((e: any) => {
+          console.log('error input search', e);
+          dispatch(updateStatusLoading(false));
+        });
     },
   });
 
@@ -172,16 +151,75 @@ const SearchBox = (props: any) => {
   };
 
   return (
-    <Box className="wrap-input-search">
-      <div style={{ padding: 10 }} className="box-input-search d-flex">
+    <div className="wrap-input-search-field">
+      <div className="box-input-search d-flex">
         <form noValidate action="" role="search">
           <Box className="box-inp">
+            <Tooltip
+              title={keyFilter ? keyFilter : 'Add pre-filter'}
+              placement="top"
+              arrow={true}
+              disableHoverListener={!settings.preFilterOption}
+            >
+              <Box
+                className="pre-filter-icon"
+                style={{
+                  cursor: settings.preFilterOption ? 'pointer' : 'default',
+                }}
+                onClick={() =>
+                  settings.preFilterOption
+                    ? setToggleModalFilterDesktop(true)
+                    : false
+                }
+              >
+                {settings.preFilterOption && (
+                  <div
+                    className="icon-hover"
+                    style={{
+                      ...(keyFilter
+                        ? {
+                            backgroundColor: `${settings.theme?.secondaryColor}26`,
+                          }
+                        : {}),
+                    }}
+                  >
+                    <IconFilter color="black" />
+                  </div>
+                )}
+                {!settings.preFilterOption && (
+                  <IconSearch width={16} height={16} />
+                )}
+                {keyFilter && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: '6px',
+                      left: '31px',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      background: 'white',
+                      width: '10px',
+                      height: '10px',
+                      borderRadius: '100%',
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '8px',
+                        height: '8px',
+                        background: settings.theme?.secondaryColor,
+                        borderRadius: '100%',
+                      }}
+                    ></div>
+                  </div>
+                )}
+              </Box>
+            </Tooltip>
             <Box
               style={{
                 height: '75%',
                 order: 1,
-                paddingLeft: imageThumbSearchInput || keyFilter ? 0 : 10,
-                marginLeft: keyFilter ? 0 : 5,
               }}
             >
               {imageThumbSearchInput && (
@@ -227,60 +265,12 @@ const SearchBox = (props: any) => {
               )}
             </Box>
 
-            {!valueInput && (
-              <Box
-                className="icon-search"
-                style={
-                  imageThumbSearchInput
-                    ? { order: 2, marginLeft: 5 }
-                    : { order: 2 }
-                }
-              >
-                <img src={IconSearch} alt="" width={24} height={24} />
-              </Box>
-            )}
-
-            {keyFilter && !isMobile && (
-              <Box
-                className="box-key-filter"
-                style={{
-                  order: 0,
-                  marginRight: 5,
-                  border: `2px solid ${settings.theme?.secondaryColor}c7`,
-                }}
-              >
-                <Tooltip
-                  title={keyFilter}
-                  placement="top"
-                  arrow={true}
-                  disableHoverListener={keyFilter.length < 16}
-                >
-                  <Typography>{truncateString(keyFilter, 15)}</Typography>
-                </Tooltip>
-
-                <Tooltip title="Remove pre-filter" placement="top" arrow={true}>
-                  <Button
-                    onClick={() => dispatch(setUpdateKeyFilterDesktop(''))}
-                    style={{ padding: '6px 2px' }}
-                  >
-                    <CloseIcon
-                      style={{
-                        fontSize: 20,
-                        color: settings.theme?.secondaryColor,
-                      }}
-                    />
-                  </Button>
-                </Tooltip>
-              </Box>
-            )}
-
             <input
               style={{
                 border: '0px',
                 width: '100%',
                 fontSize: 14,
                 color: '#2B2C46',
-                fontStyle: 'italic',
               }}
               className="input-search"
               placeholder={t('Search')}
@@ -316,26 +306,6 @@ const SearchBox = (props: any) => {
           )}
           {!isMobile ? (
             <div className="wrap-box-input-mobile d-flex">
-              {settings.preFilterOption && (
-                <Tooltip
-                  title="Add or change pre-filter"
-                  placement="top"
-                  arrow={true}
-                  style={{ backgroundColor: '#000000' }}
-                >
-                  <Button
-                    onClick={() => setToggleModalFilterDesktop(true)}
-                    style={{
-                      width: 32,
-                      height: 32,
-                      borderRadius: '100%',
-                      marginRight: 10,
-                    }}
-                  >
-                    <IconFilter />
-                  </Button>
-                </Tooltip>
-              )}
               <input
                 accept="image/*"
                 id="icon-button-file"
@@ -381,20 +351,19 @@ const SearchBox = (props: any) => {
           )}
         </form>
       </div>
-
       {settings.preFilterOption && (
         <DefaultModal
           openModal={isOpenModalFilterDesktop}
           handleClose={() => setToggleModalFilterDesktop(false)}
-          classNameModal="wrap-filter-destop"
-          classNameComponentChild="bg-white box-filter-destop"
+          classNameModal="wrap-filter-desktop"
+          classNameComponentChild="bg-white box-filter-desktop"
         >
           <PreFilterComponent
             handleClose={() => setToggleModalFilterDesktop(false)}
           />
         </DefaultModal>
       )}
-    </Box>
+    </div>
   );
 };
 

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

@@ -109,22 +109,37 @@ function PreFilterComponent(props: Props) {
       flexDirection={'column'}
       style={{ position: 'relative' }}
     >
-      <Typography
+      <div
         style={{
-          color: '#000',
-          fontSize: '24px',
-          fontWeight: 700,
-          paddingLeft: isMobile ? '0px' : '14px',
-          marginBottom: isMobile ? '0px' : '-8px',
-          marginTop: isMobile ? '0px' : '24px',
+          background: 'white',
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          position: 'sticky',
+          top: 0,
+          zIndex: 100,
         }}
       >
-        {settings.preFilterTitle}
-      </Typography>
+        <Typography
+          style={{
+            color: '#000',
+            fontSize: '24px',
+            fontWeight: 700,
+            paddingLeft: isMobile ? '0px' : '14px',
+            marginBottom: isMobile ? '0px' : '-8px',
+            marginTop: isMobile ? '0px' : '24px',
+          }}
+        >
+          {settings.preFilterTitle}
+        </Typography>
 
+        <Button onClick={handleClose}>
+          <CloseIcon />
+        </Button>
+      </div>
       <Box
         className="box-top"
-        style={isMobile ? { padding: 0 } : undefined}
+        style={isMobile ? { padding: 0, marginTop: '16px' } : undefined}
         display={'flex'}
         justifyContent={'space-between'}
         alignItems={'center'}
@@ -172,16 +187,10 @@ function PreFilterComponent(props: Props) {
             }}
           />
         </Box>
-
-        {!isMobile && (
-          <Button onClick={handleClose}>
-            <CloseIcon />
-          </Button>
-        )}
       </Box>
 
-      <Box style={{ margin: '10px 16px' }}>
-        {keyFilter && isMobile && (
+      {keyFilter && isMobile && (
+        <Box style={{ margin: '10px 16px' }}>
           <Box
             display={'flex'}
             className="box-keyFilter"
@@ -192,8 +201,8 @@ function PreFilterComponent(props: Props) {
               <CloseIcon style={{ fontSize: 12, color: '#2B2C46' }} />
             </Button>
           </Box>
-        )}
-      </Box>
+        </Box>
+      )}
       <Box
         className="box-bottom"
         height={'100%'}
@@ -274,7 +283,7 @@ function PreFilterComponent(props: Props) {
           <Typography>No result found</Typography>
         )}
       </Box>
-      {keyFilter && !isMobile && (
+      {!isMobile && (
         <Box
           className="footer"
           style={{ height: 64, marginTop: 'auto' }}
@@ -308,7 +317,7 @@ function PreFilterComponent(props: Props) {
           </Button>
         </Box>
       )}
-      {keyFilter && isMobile && (
+      {isMobile && (
         <Box
           className="footer"
           style={{