@nyris/nyris-webapp 0.3.50 → 0.3.52

package/src/components/ShareModal.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, IconButton, Paper, Typography } from '@material-ui/core';
+import { Button, IconButton, Paper, Typography } from '@material-ui/core';
 import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import IconEmail from '../common/assets/icons/email_share.svg';
@@ -17,19 +17,19 @@ export const ShareModal = (props: PropsType) => {
     dataItem['image(main_similarity)'] || dataItem['main_image_link'];
   return (
     <DefaultModal openModal={isOpen} handleClose={() => setModalState(false)}>
-      <Box
+      <div
         className="box-modal-default box-modal-share"
         style={{ padding: '4px' }}
       >
-        <Box
+        <div
           className="ml-auto"
           style={{ width: 'fit-content', marginRight: 5 }}
         >
           <Button style={{ padding: 0 }} onClick={() => setModalState(false)}>
             <CloseOutlinedIcon style={{ fontSize: 16, color: '#55566B' }} />
           </Button>
-        </Box>
-        <Box className="box-content-box-share">
+        </div>
+        <div className="box-content-box-share">
           <Typography
             className="text-f12 text-gray text-bold"
             style={{ marginBottom: '5px' }}
@@ -38,7 +38,7 @@ export const ShareModal = (props: PropsType) => {
           </Typography>
           {main_image_link && (
             <Paper component="form" className="box-input">
-              <Box
+              <div
                 className="text-f9 text-gray"
                 style={{
                   width: '100%',
@@ -49,7 +49,7 @@ export const ShareModal = (props: PropsType) => {
                 }}
               >
                 {main_image_link}
-              </Box>
+              </div>
               <IconButton
                 color="secondary"
                 aria-label="directions"
@@ -68,7 +68,7 @@ export const ShareModal = (props: PropsType) => {
             className="box-input"
             style={{ marginTop: '12px', marginBottom: '8px' }}
           >
-            <Box
+            <div
               className="text-f9 text-gray"
               style={{
                 width: '100%',
@@ -84,7 +84,7 @@ export const ShareModal = (props: PropsType) => {
                 SKU:
               </span>{' '}
               {dataItem.sku}
-            </Box>
+            </div>
             <IconButton
               color="secondary"
               aria-label="directions"
@@ -96,10 +96,9 @@ export const ShareModal = (props: PropsType) => {
               <FileCopyOutlinedIcon style={{ fontSize: 14 }} />
             </IconButton>
           </Paper>
-          <Box
+          <div
             className="box-media-share"
-            display={'flex'}
-            style={{ marginTop: '18px' }}
+            style={{ marginTop: '18px', display: 'flex' }}
           >
             <a
               style={{ padding: 0 }}
@@ -110,33 +109,33 @@ export const ShareModal = (props: PropsType) => {
                   (main_image_link ? `Image Link: ${main_image_link}` : ''),
               )} `}
             >
-              <Box display={'flex'} alignItems={'center'}>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
                 <img width={40} height={40} src={IconEmail} alt="icon_email" />
-              </Box>
+              </div>
             </a>
             {/* <Button style={{ padding: 0, margin: '0 20px' }}>
-                <Box display={'flex'} alignItems={'center'}>
+                <div display={'flex'} alignItems={'center'}>
                   <img
                     src={IconWeChat}
                     width={40}
                     height={40}
                     alt="icon_email"
                   />
-                </Box>
+                </div>
               </Button>
               <Button style={{ padding: 0 }}>
-                <Box display={'flex'} alignItems={'center'}>
+                <div display={'flex'} alignItems={'center'}>
                   <img
                     src={IconWhatsApp}
                     width={40}
                     height={40}
                     alt="icon_email"
                   />
-                </Box>
+                </div>
               </Button> */}
-          </Box>
-        </Box>
-      </Box>
+          </div>
+        </div>
+      </div>
     </DefaultModal>
   );
 };

package/src/components/SidePanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Typography } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
 import { RectCoords } from '@nyris/nyris-api';
 import { Preview } from '@nyris/nyris-react-components';
 import React, { useState } from 'react';
@@ -41,7 +41,7 @@ function SidePanel({
   const { requestImage } = search;
 
   return (
-    <Box
+    <div
       className={`wrap-main-col-left ${toggleColLeft ? 'toggle' : ''}`}
       style={{
         display: 'flex',
@@ -49,7 +49,7 @@ function SidePanel({
         justifyContent: 'space-between',
       }}
     >
-      <Box
+      <div
         className="box-toggle-coloumn"
         style={{
           right: '0px',
@@ -70,12 +70,12 @@ function SidePanel({
             <KeyboardArrowLeftOutlinedIcon />
           )}
         </Button>
-      </Box>
-      <Box>
+      </div>
+      <div>
         {settings.preview && requestImage && (
-          <Box className="col-left">
-            <Box className="box-preview">
-              <Box
+          <div className="col-left">
+            <div className="box-preview">
+              <div
                 className="preview-item"
                 style={{
                   backgroundColor: 'white',
@@ -114,13 +114,13 @@ function SidePanel({
                     />
                   </div>
                 </div>
-              </Box>
-            </Box>
+              </div>
+            </div>
             {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
-              <Box
+              <div
                 className="box-title_col-left"
-                alignItems="center"
                 style={{
+                  alignItems: 'center',
                   backgroundColor: '#3E36DC',
                   display: 'flex',
                   columnGap: '6px',
@@ -138,13 +138,13 @@ function SidePanel({
                     ? t('Crop the image for better results')
                     : 'Crop the image for better results'}
                 </Typography>
-              </Box>
+              </div>
             )}
-          </Box>
+          </div>
         )}
 
         {showPostFilter && (
-          <Box
+          <div
             className="col-left__bottom"
             style={{
               marginTop: requestImage ? '16px' : '48px',
@@ -154,10 +154,10 @@ function SidePanel({
               <PostFilterPanelAlgolia disjunctiveFacets={disjunctiveFacets} />
             )}
             {!settings.algolia.enabled && <PostFilterPanel />}
-          </Box>
+          </div>
         )}
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }
 

package/src/components/carousel/ImagePreviewCarousel.tsx

@@ -1,7 +1,9 @@
 import { Options, Splide, SplideSlide } from '@splidejs/react-splide';
 import React, { useMemo, useRef } from 'react';
-import '@splidejs/react-splide/dist/css/splide-core.min.css';
-import '@splidejs/react-splide/dist/css/splide.min.css';
+
+import '@splidejs/react-splide/css';
+import '@splidejs/react-splide/css/core';
+
 import './ImagePreviewCarousel.scss';
 import { useMediaQuery } from 'react-responsive';
 
@@ -76,7 +78,9 @@ export const ImagePreviewCarousel = (props: Props) => {
     <>
       <Splide
         onActive={(e: any) => {
-          setSelectedImage(e?.root?.querySelector('li.is-active')?.querySelector('img')?.src)
+          setSelectedImage(
+            e?.root?.querySelector('li.is-active')?.querySelector('img')?.src,
+          );
         }}
         options={mainOptions}
         ref={mainRef}

package/src/components/default-select.tsx

@@ -1,14 +1,12 @@
-import { Box } from "@material-ui/core";
-import React from "react";
-import { connectMenu } from "react-instantsearch-dom";
+import React from 'react';
+import { connectMenu } from 'react-instantsearch-dom';
 
 function DefaultSelectCustom({ items, currentRefinement, refine }: any) {
-
   return (
-    <Box className="w-100">
+    <div className="w-100">
       <select
         className="w-100 btn-ct"
-        value={currentRefinement || ""}
+        value={currentRefinement || ''}
         onChange={(event: any) => {
           refine(event?.currentTarget.value);
         }}
@@ -23,7 +21,7 @@ function DefaultSelectCustom({ items, currentRefinement, refine }: any) {
           </option>
         ))}
       </select>
-    </Box>
+    </div>
   );
 }
 const DefaultSelect = connectMenu(DefaultSelectCustom);

package/src/components/drawer/cameraCustom.tsx

@@ -1,4 +1,5 @@
-import { Box, Drawer } from '@material-ui/core';
+// @ts-nocheck
+import { Drawer } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
@@ -65,45 +66,48 @@ function CameraCustom(props: Props) {
     dispatch(onToggleModalItemDetail(false));
     handlerCloseModal();
 
-    if (settings.regions) {
-      let res = await findRegions(imageConvert, settings);
-      dispatch(setRegions(res.regions));
-      region = res.selectedRegion;
-      dispatch(setSelectedRegion(region));
-    }
-
-    const preFilterValues = [
-      {
-        key: settings.visualSearchFilterKey,
-        values: Object.keys(preFilter) as string[],
-      },
-    ];
-    let filters: any[] = [];
+    try {
+      if (settings.regions) {
+        let res = await findRegions(imageConvert, settings);
+        dispatch(setRegions(res.regions));
+        region = res.selectedRegion;
+        dispatch(setSelectedRegion(region));
+      }
+    } catch (error) {
+    } finally {
+      const preFilterValues = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: Object.keys(preFilter) as string[],
+        },
+      ];
+      let filters: any[] = [];
 
-    find({
-      image: imageConvert,
-      settings,
-      filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-      region,
-    })
-      .then((res: any) => {
-        res?.results.map((item: any) => {
-          filters.push({
-            sku: item.sku,
-            score: item.score,
+      find({
+        image: imageConvert,
+        settings,
+        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+        region,
+      })
+        .then((res: any) => {
+          res?.results.forEach((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 payload = {
-          ...res,
-          filters,
-        };
-        dispatch(setSearchResults(payload));
-        dispatch(updateStatusLoading(false));
-      })
-      .catch((e: any) => {
-        console.log('error input search', e);
-        dispatch(updateStatusLoading(false));
-      });
+    }
   };
 
   const handlerCloseModal = () => {
@@ -113,14 +117,14 @@ function CameraCustom(props: Props) {
   };
 
   return (
-    <Box className="box-camera-custom">
+    <div className="box-camera-custom">
       <Drawer
         anchor={'bottom'}
         open={isToggle}
         onClose={handlerCloseModal}
         className="modal-togggle-cam"
       >
-        <Box className="wrap-camera">
+        <div className="wrap-camera">
           <button
             className="btn-close-modal right"
             style={{
@@ -259,9 +263,9 @@ function CameraCustom(props: Props) {
               </IconButton>
             </label>
           </div>
-        </Box>
+        </div>
       </Drawer>
-    </Box>
+    </div>
   );
 }
 

package/src/components/input/inputSearch.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Tooltip } from '@material-ui/core';
+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';
@@ -82,6 +82,7 @@ const SearchBox = (props: any) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageThumbSearchInput, isAlgoliaEnabled]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const searchOrRedirect = useCallback(
     debounce((value: any, withImage = true) => {
       if (!isAlgoliaEnabled) {
@@ -106,7 +107,7 @@ const SearchBox = (props: any) => {
             text: value,
           })
             .then((res: any) => {
-              res?.results.map((item: any) => {
+              res?.results.forEach((item: any) => {
                 filters.push({
                   sku: item.sku,
                   score: item.score,
@@ -162,38 +163,42 @@ const SearchBox = (props: any) => {
           values: Object.keys(preFilter) as string[],
         },
       ];
+      try {
+        if (settings.regions) {
+          let res = await findRegions(image, settings);
+          console.log(res);
 
-      if (settings.regions) {
-        let res = await findRegions(image, settings);
-        dispatch(setRegions(res.regions));
-        region = res.selectedRegion;
-        dispatch(setSelectedRegion(region));
-      }
-
-      return find({
-        image,
-        settings,
-        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-        region,
-      })
-        .then((res: any) => {
-          res?.results.map((item: any) => {
-            filters.push({
-              sku: item.sku,
-              score: item.score,
+          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));
+          })
+          .catch((e: any) => {
+            console.log('error input search', e);
+            dispatch(updateStatusLoading(false));
           });
-          payload = {
-            ...res,
-            filters,
-          };
-          dispatch(setSearchResults(payload));
-          dispatch(updateStatusLoading(false));
-        })
-        .catch((e: any) => {
-          console.log('error input search', e);
-          dispatch(updateStatusLoading(false));
-        });
+      }
     },
   });
 
@@ -213,7 +218,7 @@ const SearchBox = (props: any) => {
     <div className="wrap-input-search-field">
       <div className="box-input-search d-flex">
         <div className="input-wrapper">
-          <Box className="box-inp">
+          <div className="box-inp">
             <Tooltip
               title={
                 !isEmpty(preFilter)
@@ -224,7 +229,7 @@ const SearchBox = (props: any) => {
               arrow={true}
               disableHoverListener={!settings.preFilterOption}
             >
-              <Box
+              <div
                 className="pre-filter-icon"
                 style={{
                   cursor: settings.preFilterOption ? 'pointer' : 'default',
@@ -280,23 +285,23 @@ const SearchBox = (props: any) => {
                     ></div>
                   </div>
                 )}
-              </Box>
+              </div>
             </Tooltip>
-            <Box
+            <div
               style={{
                 height: '75%',
                 order: 1,
               }}
             >
               {imageThumbSearchInput && (
-                <Box
+                <div
                   style={{
                     border: `2px solid ${settings.theme?.primaryColor}`,
                     backgroundColor: `${settings.theme?.primaryColor}26`,
                     marginRight: '5px',
+                    display: 'flex',
                   }}
                   className="box-image-search-thumb"
-                  display={'flex'}
                 >
                   <img
                     src={imageThumbSearchInput}
@@ -331,9 +336,9 @@ const SearchBox = (props: any) => {
                       />
                     </button>
                   </Tooltip>
-                </Box>
+                </div>
               )}
-            </Box>
+            </div>
 
             <input
               style={{
@@ -348,13 +353,14 @@ const SearchBox = (props: any) => {
               onChange={onChangeText}
               ref={focusInp}
             />
-          </Box>
+          </div>
 
           {history.location.pathname === '/result' && valueInput && (
             <Button
               className="btn-clear-text"
               onClick={() => {
                 if (imageThumbSearchInput) {
+                  history.push('/result');
                   if (!isAlgoliaEnabled) {
                     searchOrRedirect('');
                   }
@@ -417,14 +423,14 @@ const SearchBox = (props: any) => {
               </Tooltip>
             </div>
           ) : (
-            <Box>
+            <div>
               <Button
                 className="btn-mobile-filter"
                 onClick={onToggleFilterMobile}
               >
                 <IconFilter width={18} height={18} />
               </Button>
-            </Box>
+            </div>
           )}
         </div>
       </div>