@nyris/nyris-webapp 0.3.32 → 0.3.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.32",
+  "version": "0.3.33",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -12,8 +12,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.32",
-    "@nyris/nyris-react-components": "^0.3.32",
+    "@nyris/nyris-api": "^0.3.33",
+    "@nyris/nyris-react-components": "^0.3.33",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",
@@ -30,7 +30,6 @@
     "blueimp-load-image": "^2.24.0",
     "classnames": "^2.2.6",
     "framer-motion": "^4.1.17",
-    "heic2any": "0.0.4",
     "history": "^4.10.1",
     "i18next": "^22.4.14",
     "jotai": "^1.4.7",

package/src/components/DetailItem.tsx

@@ -114,7 +114,7 @@ function DetailItem(props: Props) {
               style={{ width: '300px', height: '300px', padding: '8px' }}
             />
           )}
-          {!isMobile && dataImageCarousel.length > 0 && (
+          {dataImageCarousel.length > 0 && (
             <Button
               className="icon-style"
               onClick={() => {
@@ -314,36 +314,42 @@ function DetailItem(props: Props) {
               style={{ color: '#2B2C46', marginTop: 12 }}
               gridGap={20}
             >
-              <Box
-                style={{
-                  backgroundColor: `${settings.theme?.secondaryColor}26`,
-                  padding: '5px 10px',
-                  borderRadius: 4,
-                  width: '100%',
-                }}
-              >
-                <div style={{ fontSize: 15, fontWeight: 500 }}>
-                  {dataItem[settings.field.warehouseNumber]}
-                </div>
-                <div style={{ fontSize: 17, fontWeight: 700 }}>
-                  {dataItem[settings.field.warehouseNumberValue] || 'N/A'}
-                </div>
-              </Box>
-              <Box
-                style={{
-                  backgroundColor: `${settings.theme?.secondaryColor}26`,
-                  padding: '5px 10px',
-                  borderRadius: 4,
-                  width: '100%',
-                }}
-              >
-                <div style={{ fontSize: 15, fontWeight: 500 }}>
-                  {dataItem[settings.field.warehouseShelfNumber]}
-                </div>
-                <div style={{ fontSize: 17, fontWeight: 700 }}>
-                  {dataItem[settings.field.warehouseShelfNumberValue] || 'N/A'}
-                </div>
-              </Box>
+              {settings.field.warehouseNumber && (
+                <Box
+                  style={{
+                    backgroundColor: `${settings.theme?.secondaryColor}26`,
+                    padding: '5px 10px',
+                    borderRadius: 4,
+                    width: '100%',
+                  }}
+                >
+                  <div style={{ fontSize: 15, fontWeight: 500 }}>
+                    {dataItem[settings.field.warehouseNumber]}
+                  </div>
+                  <div style={{ fontSize: 17, fontWeight: 700 }}>
+                    {dataItem[settings.field.warehouseNumberValue] || 'N/A'}
+                  </div>
+                </Box>
+              )}
+
+              {settings.field.warehouseShelfNumber && (
+                <Box
+                  style={{
+                    backgroundColor: `${settings.theme?.secondaryColor}26`,
+                    padding: '5px 10px',
+                    borderRadius: 4,
+                    width: '100%',
+                  }}
+                >
+                  <div style={{ fontSize: 15, fontWeight: 500 }}>
+                    {dataItem[settings.field.warehouseShelfNumber]}
+                  </div>
+                  <div style={{ fontSize: 17, fontWeight: 700 }}>
+                    {dataItem[settings.field.warehouseShelfNumberValue] ||
+                      'N/A'}
+                  </div>
+                </Box>
+              )}
             </Box>
           )}
 

package/src/components/DragDropFile.tsx

@@ -19,7 +19,6 @@ import { useState } from 'react';
 import IconUpload from 'common/assets/images/Icon_Upload.svg';
 import { RectCoords } from '@nyris/nyris-api';
 import { useTranslation } from 'react-i18next';
-import heic2any from 'heic2any';
 
 interface Props {
   acceptTypes: any;
@@ -38,74 +37,55 @@ function DragDropFile(props: Props) {
   } = searchState;
   const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
   const { t } = useTranslation();
-  const handleVisualSearch = async (blob: Blob) => {
-    history.push('/result');
-    dispatch(updateStatusLoading(true));
-    dispatch(loadingActionResults());
-    onChangeLoading(true);
-    let payload: any;
-    let filters: any[] = [];
-    setLoadingLoadFile(true);
-    dispatch(setImageSearchInput(URL.createObjectURL(blob)));
-    // @ts-ignore
-    let image = await createImage(blob);
-
-    dispatch(setRequestImage(image));
-    const preFilter = [
-      {
-        key: settings.visualSearchFilterKey,
-        values: [`${keyFilter}`],
-      },
-    ];
-    let region: RectCoords | undefined;
-    if (settings.regions) {
-      let res = await findRegions(image, settings);
-      dispatch(setRegions(res.regions));
-      region = res.selectedRegion;
-      dispatch(setSelectedRegion(region));
-    }
-
-    return findByImage({
-      image,
-      settings,
-      region,
-      filters: keyFilter ? preFilter : undefined,
-    }).then((res: any) => {
-      res?.results.map((item: any) => {
-        filters.push({
-          sku: item.sku,
-          score: item.score,
-        });
-      });
-      payload = {
-        ...res,
-        filters,
-      };
-      dispatch(setSearchResults(payload));
-      setLoadingLoadFile(false);
-      onChangeLoading(false);
-      dispatch(updateStatusLoading(false));
-      return dispatch(showFeedback());
-    });
-  };
   const { getRootProps, getInputProps, isDragActive } = 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]);
+      history.push('/result');
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+      onChangeLoading(true);
+      let payload: any;
+      let filters: any[] = [];
+      setLoadingLoadFile(true);
+      console.log('fs', fs);
+      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
+      let image = await createImage(fs[0]);
+      dispatch(setRequestImage(image));
+      const preFilter = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: [`${keyFilter}`],
+        },
+      ];
+      let region: RectCoords | undefined;
+      if (settings.regions) {
+        let res = await findRegions(image, settings);
+        dispatch(setRegions(res.regions));
+        region = res.selectedRegion;
+        dispatch(setSelectedRegion(region));
       }
+
+      return findByImage({
+        image,
+        settings,
+        region,
+        filters: keyFilter ? preFilter : undefined,
+      }).then((res: any) => {
+        res?.results.map((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
+          });
+        });
+        payload = {
+          ...res,
+          filters,
+        };
+        dispatch(setSearchResults(payload));
+        setLoadingLoadFile(false);
+        onChangeLoading(false);
+        dispatch(updateStatusLoading(false));
+        return dispatch(showFeedback());
+      });
     },
   });
 

package/src/components/ProductList/index.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@material-ui/core';
 import ItemResult from 'components/results/ItemResult';
-import { groupBy } from 'lodash';
+import { groupBy, uniqueId } from 'lodash';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { connectStateResults } from 'react-instantsearch-dom';
 import { useAppSelector } from 'Store/Store';
@@ -52,9 +52,13 @@ function ProductListComponent({
     let newArrayShowGroup: any = [];
     let newArrayShowItem: any = [];
 
-    const groupHits = hits.filter(
-      (hit: { group_id: string }) => hit.group_id && hit.group_id !== '',
-    );
+    const groupHits = hits.map((hit: { group_id: string }) => {
+      if (!hit.group_id) {
+        return { ...hit, group_id: uniqueId('random-group-id') };
+      }
+      return hit;
+    });
+
     const groups = groupBy(groupHits, 'group_id');
     setHitGroups(groups);
     newArrayShowGroup = Object.values(groups);
@@ -79,6 +83,7 @@ function ProductListComponent({
         newArrayShowItem.push(payload);
       }
     });
+
     return newArrayShowItem;
   };
 

package/src/components/input/inputSearch.tsx

@@ -31,7 +31,6 @@ 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 +87,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));
+        });
     },
   });
 

package/src/components/results/ItemResult.tsx

@@ -2,9 +2,9 @@ import { Box, Button, Grid, Tooltip, Typography } from '@material-ui/core';
 import ChevronRightOutlinedIcon from '@material-ui/icons/ChevronRightOutlined';
 import IconOpenLink from 'common/assets/icons/Union.svg';
 import { ReactComponent as IconShare } from 'common/assets/icons/Fill.svg';
-import { ReactComponent as Expand } from 'common/assets/icons/expand.svg';
 import { ReactComponent as IconDisLike } from 'common/assets/icons/icon_dislike.svg';
 import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
+import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_search_image2.svg';
 import React, { memo, useEffect, useState } from 'react';
 import NoImage from 'common/assets/images/unnamed.png';
 import { AppState } from 'types';
@@ -143,13 +143,17 @@ function ItemResult(props: Props) {
             </Button>
           </Box>
         )}
-        {!isHover && (
+        {!isHover && main_image_link && (
           <Box className="box-icon-modal">
             <Button
               style={{ width: '100%', height: '100%', padding: 0, zIndex: 9 }}
-              onClick={() => handlerToggleModal(dataItem)}
+              onClick={() => {
+                if (urlImage.length > 1) {
+                  onSearchImage(main_image_link);
+                }
+              }}
             >
-              <Expand color={settings.theme?.secondaryColor} />
+              <IconSearchImage color={settings.theme?.secondaryColor} />
             </Button>
           </Box>
         )}
@@ -158,9 +162,7 @@ function ItemResult(props: Props) {
             style={{ width: '100%', height: '100%' }}
             onClick={(e: any) => {
               e.preventDefault();
-              if (urlImage.length > 1) {
-                onSearchImage(main_image_link);
-              }
+              handlerToggleModal(dataItem);
             }}
           >
             {main_image_link ? (
@@ -367,53 +369,58 @@ function ItemResult(props: Props) {
               style={{ color: '#2B2C46', marginTop: '12px' }}
               gridGap={10}
             >
-              <Box
-                style={{
-                  backgroundColor: `${settings.theme?.secondaryColor}26`,
-                  padding: '5px 10px',
-                  borderRadius: 4,
-                  width: '100%',
-                }}
-              >
-                <div style={{ fontSize: 10, fontWeight: 500 }}>
-                  {dataItem.custom_id_key_2}
-                </div>
-                <div
+              {settings.field.warehouseNumber && (
+                <Box
                   style={{
-                    fontSize: 13,
-                    fontWeight: 700,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
+                    backgroundColor: `${settings.theme?.secondaryColor}26`,
+                    padding: '5px 10px',
+                    borderRadius: 4,
+                    width: '100%',
                   }}
                 >
-                  {dataItem.custom_id_value_2 || 'N/A'}
-                </div>
-              </Box>
+                  <div style={{ fontSize: 10, fontWeight: 500 }}>
+                    {dataItem[settings.field.warehouseNumber]}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: 13,
+                      fontWeight: 700,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {dataItem[settings.field.warehouseNumberValue] || 'N/A'}
+                  </div>
+                </Box>
+              )}
 
-              <Box
-                style={{
-                  backgroundColor: `${settings.theme?.secondaryColor}26`,
-                  padding: '5px 10px',
-                  borderRadius: 4,
-                  width: '100%',
-                }}
-              >
-                <div style={{ fontSize: 10, fontWeight: 500 }}>
-                  {dataItem.custom_id_key_1}
-                </div>
-                <div
+              {settings.field.warehouseShelfNumber && (
+                <Box
                   style={{
-                    fontSize: 13,
-                    fontWeight: 700,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
+                    backgroundColor: `${settings.theme?.secondaryColor}26`,
+                    padding: '5px 10px',
+                    borderRadius: 4,
+                    width: '100%',
                   }}
                 >
-                  {dataItem.custom_id_value_1 || 'N/A'}
-                </div>
-              </Box>
+                  <div style={{ fontSize: 10, fontWeight: 500 }}>
+                    {dataItem[settings.field.warehouseShelfNumber]}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: 13,
+                      fontWeight: 700,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {dataItem[settings.field.warehouseShelfNumberValue] ||
+                      'N/A'}
+                  </div>
+                </Box>
+              )}
             </Box>
           )}
 
@@ -478,25 +485,6 @@ function ItemResult(props: Props) {
                     </Box>
                   </Grid>
                 )}
-                {/* <Grid item>
-              <Box display={'flex'} alignItems={'center'}>
-                <Button className="btn-item">
-                  <Box
-                    className=""
-                    display={'flex'}
-                    justifyContent={'center'}
-                    alignItems={'center'}
-                  >
-                    <img
-                      src={IconShare}
-                      alt="image_item"
-                      className="icon_support"
-                      style={{ width: '1rem' }}
-                    />
-                  </Box>
-                </Button>
-              </Box>
-            </Grid> */}
               </Grid>
             </Box>
           )}