@nyris/nyris-webapp 0.3.26 → 0.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.26",
+  "version": "0.3.29",
   "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.26",
-    "@nyris/nyris-react-components": "^0.3.26",
+    "@nyris/nyris-api": "^0.3.29",
+    "@nyris/nyris-react-components": "^0.3.29",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/src/components/DetailItem.tsx

@@ -35,7 +35,7 @@ function DetailItem(props: Props) {
     handlerFeedback,
   } = props;
   const [collapDescription, setCollapDescription] = useState(false);
-  const { title, sku, main_offer_link, brand } = dataItem;
+  const { title, sku, main_offer_link, product_link, brand } = dataItem;
   const [dataImageCarousel, setDataImageCarouSel] = useState<any[]>([]);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const { settings } = useAppSelector<AppState>((state: any) => state);
@@ -272,7 +272,10 @@ function DetailItem(props: Props) {
                         minHeight: !settings.warehouseVariant ? 48 : 64,
                       }}
                       onClick={() =>
-                        window.open(`${main_offer_link}`, '_blank')
+                        window.open(
+                          `${product_link || main_offer_link}`,
+                          '_blank',
+                        )
                       }
                     >
                       <Typography
@@ -349,17 +352,13 @@ function DetailItem(props: Props) {
             >
               <Grid
                 container
-                justifyContent="space-between"
+                justifyContent={
+                  settings.shareOption ? 'space-between' : 'space-around'
+                }
                 alignItems="center"
               >
                 <Grid item>
-                  <Box
-                    display={'flex'}
-                    justifyContent={
-                      settings.shareOption ? 'space-between' : 'space-around'
-                    }
-                    alignItems={'center'}
-                  >
+                  <Box display={'flex'} alignItems={'center'}>
                     <Button
                       className="btn-item"
                       onClick={() => {

package/src/components/drawer/cameraCustom.tsx

@@ -35,9 +35,10 @@ function CameraCustom(props: Props) {
   const [facingMode, setFacingMode] = useState(FACING_MODE_USER);
   const [scaleCamera, setScaleCamera] = useState<number>(1);
   const stateGlobal = useAppSelector(state => state);
-  const { settings } = stateGlobal;
+  const { search, settings } = stateGlobal;
   const history = useHistory();
   const dispatch = useAppDispatch();
+  const { keyFilter } = search;
 
   const videoConstraints = {
     width: 1080,
@@ -55,23 +56,55 @@ function CameraCustom(props: Props) {
   const handlerFindImage = async (image: any) => {
     dispatch(updateStatusLoading(true));
     dispatch(loadingActionResults());
-
+    if (history.location.pathname !== '/result') {
+      history.push('/result');
+    }
     let region: RectCoords | undefined;
     let imageConvert = await createImage(image);
     dispatch(setRequestImage(imageConvert));
     dispatch(setImageSearchInput(image));
     dispatch(onToggleModalItemDetail(false));
+    handlerCloseModal();
+
     if (settings.regions) {
       let res = await findRegions(imageConvert, settings);
       dispatch(setRegions(res.regions));
       region = res.selectedRegion;
       dispatch(setSelectedRegion(region));
     }
-    setTimeout(() => {
-      dispatch(updateStatusLoading(false));
-      handlerCloseModal();
-      history.push('/result');
-    }, 500);
+
+    const preFilter = [
+      {
+        key: settings.visualSearchFilterKey,
+        values: [`${keyFilter}`],
+      },
+    ];
+    let filters: any[] = [];
+
+    findByImage({
+      image: imageConvert,
+      settings,
+      filters: keyFilter ? preFilter : undefined,
+      region,
+    })
+      .then((res: any) => {
+        res?.results.map((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
+          });
+        });
+        const payload = {
+          ...res,
+          filters,
+        };
+        dispatch(setSearchResults(payload));
+        dispatch(updateStatusLoading(false));
+      })
+      .catch((e: any) => {
+        console.log('error input search', e);
+        dispatch(updateStatusLoading(false));
+      });
   };
 
   const handlerCloseModal = () => {

package/src/components/input/inputSearch.tsx

@@ -281,7 +281,11 @@ const SearchBox = (props: any) => {
                 history.push('/');
               }}
             >
-              <Tooltip title="clear text search" placement="top" arrow={true}>
+              <Tooltip
+                title={t('Clear text search')}
+                placement="top"
+                arrow={true}
+              >
                 <ClearOutlinedIcon style={{ fontSize: 16, color: '#2B2C46' }} />
               </Tooltip>
             </Button>
@@ -321,7 +325,7 @@ const SearchBox = (props: any) => {
                 })}
               />
               <Tooltip
-                title="Search with an image"
+                title={t('Search with an image')}
                 placement="top"
                 arrow={true}
               >

package/src/components/results/ItemResult.tsx

@@ -53,7 +53,7 @@ function ItemResult(props: Props) {
   const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
   const [feedback, setFeedback] = useState('none');
   const { t } = useTranslation();
-  const { sku, title, brand, main_offer_link, collap } = dataItem;
+  const { sku, title, brand, main_offer_link, product_link, collap } = dataItem;
   useEffect(() => {
     if (main_image_link) {
       handlerCheckUrlImage(main_image_link);
@@ -323,7 +323,10 @@ function ItemResult(props: Props) {
                         padding: 0,
                       }}
                       onClick={() =>
-                        window.open(`${main_offer_link}`, '_blank')
+                        window.open(
+                          `${product_link || main_offer_link}`,
+                          '_blank',
+                        )
                       }
                     >
                       <Typography

package/src/page/result/index.tsx

@@ -39,6 +39,7 @@ import {
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { showHits } from '../../constants';
 import { DEFAULT_REGION } from '../../constants';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   allSearchResults: any;
@@ -56,7 +57,7 @@ function ResultComponent(props: Props) {
   const [imageSelection, setImageSelection] = useState<any>(null);
   const executeScroll = () => refBoxResult.current.scrollIntoView('-100px');
   const [filterString, setFilterString] = useState<string>();
-
+  const { t } = useTranslation();
   useEffect(() => {
     if (selectedRegion) {
       setImageSelection(selectedRegion);
@@ -171,7 +172,7 @@ function ResultComponent(props: Props) {
     ? search?.results
         .slice()
         .reverse()
-        .map((f: any, i: number) => `sku:'${f.sku}'<score=${i}>`)
+        .map((f: any, i: number) => `sku:'${f.sku}'<score=${i}> `)
     : '';
   const filterSkusString = [...nonEmptyFilter, ...filterSkus].join(' OR ');
 
@@ -312,7 +313,10 @@ function ResultComponent(props: Props) {
                           </Box>
                           <Box className="box-title_col-left">
                             <Typography style={{ fontSize: 11, color: '#fff' }}>
-                              Adjust the selection frame for better results.
+                              {t(
+                                'Adjust the selection frame for better results',
+                              )}
+                              .
                             </Typography>
                           </Box>
                         </Box>
@@ -447,7 +451,7 @@ function ResultComponent(props: Props) {
                     className="box-change-hit-items"
                   >
                     <span style={{ paddingRight: '10px' }}>
-                      Items per page:
+                      {t('Items per page')}:
                     </span>
                     <HitsPerPage items={showHits} defaultRefinement={20} />
                   </Box>

package/src/translations.ts

@@ -7,6 +7,11 @@ export const translations = {
       'Manufacturer Number': 'Manufacturer Number',
       'Close group': 'Close group',
       'Show group': 'Show group',
+      'Adjust the selection frame for better results':
+        'Adjust the selection frame for better results',
+      'Items per page': 'Items per page',
+      'Search with an image': 'Search with an image',
+      'Clear text search': 'Clear text search',
     },
   },
   de: {
@@ -17,6 +22,11 @@ export const translations = {
       'Manufacturer Number': 'Herst. Teile-Nr.',
       'Close group': 'Schließe Gruppe',
       'Show group': 'Zeige Gruppe',
+      'Adjust the selection frame for better results':
+        'Anpassen des Rahmens für bessere Ergebnisse',
+      'Items per page': 'Artikel pro Seite',
+      'Search with an image': 'Bildsuche',
+      'Clear text search': 'Suchtext löschen',
     },
   },
 };