@nyris/nyris-webapp 0.3.32 → 0.3.34

package/src/components/results/ItemResult.tsx

@@ -2,13 +2,12 @@ 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';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { RootState, useAppDispatch, useAppSelector } from 'Store/Store';
 import DefaultModal from 'components/modal/DefaultModal';
 import DetailItem from 'components/DetailItem';
 import {
@@ -18,13 +17,15 @@ import {
 import { ShareModal } from '../ShareModal';
 import { truncateString } from 'helpers/truncateString';
 import { useTranslation } from 'react-i18next';
+import { useMediaQuery } from 'react-responsive';
+import { feedbackClickEpic, feedbackConversionEpic } from 'services/Feedback';
 
 interface Props {
   dataItem: any;
   handlerToggleModal?: any;
   handleClose?: () => void;
   isHover?: boolean;
-  indexItem?: number;
+  indexItem: number;
   onSearchImage?: any;
   handlerFeedback?: any;
   handlerGroupItem?: any;
@@ -48,13 +49,15 @@ function ItemResult(props: Props) {
   } = props;
   const dispatch = useAppDispatch();
   const [urlImage, setUrlImage] = useState<string>('');
-  const { settings } = useAppSelector<AppState>((state: any) => state);
+  const state = useAppSelector<RootState>((state: any) => state);
+  const { settings } = state;
   const [isOpenModalImage, setOpenModalImage] = useState<boolean>(false);
   const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
   const [feedback, setFeedback] = useState('none');
   const { t } = useTranslation();
   const { sku, collap } = dataItem;
   const brand = dataItem[settings.field.productTag];
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
 
   useEffect(() => {
     if (main_image_link) {
@@ -92,6 +95,7 @@ function ItemResult(props: Props) {
   };
 
   const handlerToggleModal = (item: any) => {
+    feedbackClickEpic(state, indexItem, item.sku);
     setOpenModalImage(true);
     dispatch(onToggleModalItemDetail(true));
     dispatch(updateStatusLoading(true));
@@ -99,6 +103,7 @@ function ItemResult(props: Props) {
       dispatch(updateStatusLoading(false));
     }, 400);
   };
+
   return (
     <Box className="wrap-main-item-result">
       <DefaultModal
@@ -143,14 +148,16 @@ function ItemResult(props: Props) {
             </Button>
           </Box>
         )}
-        {!isHover && (
-          <Box className="box-icon-modal">
-            <Button
-              style={{ width: '100%', height: '100%', padding: 0, zIndex: 9 }}
-              onClick={() => handlerToggleModal(dataItem)}
-            >
-              <Expand color={settings.theme?.secondaryColor} />
-            </Button>
+        {!isHover && main_image_link && (
+          <Box
+            className="box-icon-modal"
+            onClick={() => {
+              if (urlImage.length > 1) {
+                onSearchImage(main_image_link);
+              }
+            }}
+          >
+            <IconSearchImage width={16} height={16} color={'#AAABB5'} />
           </Box>
         )}
         <Box className="box-image">
@@ -158,9 +165,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 ? (
@@ -197,7 +202,7 @@ function ItemResult(props: Props) {
           flexGrow: 1,
         }}
       >
-        <Box className="box-top" style={{ minHeight: '90px' }}>
+        <Box className="box-top">
           <Grid container justifyContent="space-between">
             <Grid item xs={12}>
               <Tooltip
@@ -217,7 +222,7 @@ function ItemResult(props: Props) {
                   <span style={{ marginRight: 3 }}>
                     {settings.itemIdLabel || 'SKU'}:
                   </span>
-                  {truncateString(sku, 16)}
+                  {truncateString(sku, 20)}
                 </Typography>
               </Tooltip>
 
@@ -281,85 +286,77 @@ function ItemResult(props: Props) {
                   </Box>
                 </Tooltip>
               )}
-              {!settings.warehouseVariant && (
-                <Typography
-                  className="text-f13 fw-600 max-line-3"
-                  style={{ color: '#1E1F31', marginTop: 12 }}
-                >
-                  {dataItem[settings.field.productName]}
-                </Typography>
-              )}
             </Grid>
           </Grid>
         </Box>
         <div>
-          {(settings.showMoreInfo || settings.warehouseVariant) && (
-            <Tooltip
-              title={dataItem[settings.field.productName]}
-              placement="top"
-              arrow={true}
-              disableHoverListener={
-                dataItem[settings.field.productName]?.length < 35 ||
-                !settings.warehouseVariant
-              }
+          <Tooltip
+            title={dataItem[settings.field.productName]}
+            placement="top"
+            arrow={true}
+            disableHoverListener={
+              dataItem[settings.field.productName]?.length < 45
+            }
+          >
+            <Box
+              style={{
+                boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
+                // marginBottom: 22,
+                height: 40,
+                background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
+                borderRadius: 4,
+                padding: '0px 8px',
+                marginTop: '12px',
+              }}
+              display={'flex'}
+              justifyItems={'center'}
+              alignItems={'center'}
+              justifyContent={'space-between'}
             >
               <Box
                 style={{
-                  boxShadow: '-2px 2px 4px rgba(170, 171, 181, 0.5)',
-                  // marginBottom: 22,
-                  height: 40,
-                  background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
-                  borderRadius: 4,
-                  padding: '0px 8px',
-                  marginTop: '12px',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  padding: 0,
+                  cursor: dataItem[settings.field?.ctaLinkField]
+                    ? 'pointer'
+                    : 'normal',
+                }}
+                onClick={() => {
+                  feedbackConversionEpic(state, indexItem, dataItem.sku);
+                  window.open(
+                    `${dataItem[settings.field.ctaLinkField]}`,
+                    '_blank',
+                  );
                 }}
-                display={'flex'}
-                justifyItems={'center'}
-                alignItems={'center'}
-                justifyContent={'space-between'}
               >
-                <Button
+                <Typography
+                  className="text-white max-line-2"
                   style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    width: '100%',
-                    padding: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    fontWeight: 500,
+                    fontSize: '11px',
+                    letterSpacing: '0.27px',
+                    wordBreak: 'break-all',
+                    maxWidth:
+                      !isMobile && dataItem[settings.field?.ctaLinkField]
+                        ? '136px'
+                        : '164x',
+                    paddingRight: '8px',
                   }}
-                  onClick={() =>
-                    window.open(
-                      `${dataItem[settings.field.ctaLinkField]}`,
-                      '_blank',
-                    )
-                  }
+                  align="left"
                 >
-                  <Typography
-                    className="text-white max-line-2"
-                    style={{
-                      textTransform: !settings.warehouseVariant
-                        ? 'uppercase'
-                        : 'none',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      fontWeight: !settings.warehouseVariant ? 700 : 500,
-                      fontSize: !settings.warehouseVariant ? '12px' : '11px',
-                      letterSpacing: '0.27px',
-                      wordBreak: !settings.warehouseVariant
-                        ? 'normal'
-                        : 'break-all',
-                      maxWidth: '136px',
-                      paddingRight: '8px',
-                    }}
-                    align="left"
-                  >
-                    {settings.warehouseVariant
-                      ? truncateString(dataItem[settings.field.productName], 35)
-                      : settings.productCtaText || 'MORE INFO'}
-                  </Typography>
+                  {truncateString(dataItem[settings.field.productName], 45)}
+                </Typography>
+                {!isMobile && dataItem[settings.field?.ctaLinkField] && (
                   <img src={IconOpenLink} alt="more-info" width={20} />
-                </Button>
+                )}
               </Box>
-            </Tooltip>
-          )}
+            </Box>
+          </Tooltip>
+
           {settings.warehouseVariant && (
             <Box
               display="flex"
@@ -367,53 +364,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>
           )}
 
@@ -471,32 +473,13 @@ function ItemResult(props: Props) {
                       <Button
                         style={{ padding: '6px' }}
                         className="btn-item"
-                        onClick={() => false}
+                        onClick={() => setOpenModalShare(true)}
                       >
-                        <IconShare width={16} height={16} color="#808080" />
+                        <IconShare width={16} height={16} color="#000000" />
                       </Button>
                     </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>
           )}

package/src/constants.ts

@@ -1,3 +1,16 @@
+import img1 from 'common/assets/images/imageCaptureHelp/img-1-1.png';
+import img2 from 'common/assets/images/imageCaptureHelp/img-1-2.png';
+import img3 from 'common/assets/images/imageCaptureHelp/img2-1.png';
+import img4 from 'common/assets/images/imageCaptureHelp/img2-2.png';
+import img5 from 'common/assets/images/imageCaptureHelp/img3-1.png';
+import img6 from 'common/assets/images/imageCaptureHelp/img3-2.png';
+import img7 from 'common/assets/images/imageCaptureHelp/img4-1.png';
+import img8 from 'common/assets/images/imageCaptureHelp/img4-2.png';
+import img9 from 'common/assets/images/imageCaptureHelp/img5-1.png';
+import img10 from 'common/assets/images/imageCaptureHelp/img5-2.png';
+import img11 from 'common/assets/images/imageCaptureHelp/img6-1.png';
+import img12 from 'common/assets/images/imageCaptureHelp/img6-2.png';
+
 export const DEFAULT_REGION = { x1: 0, x2: 1, y1: 0, y2: 1 };
 export const showHits = [
   { value: 10, label: '10' },
@@ -11,3 +24,46 @@ export const showHits = [
   { value: 90, label: '90' },
   { value: 100, label: '100' },
 ];
+export const visualSearchHelp = [
+  {
+    title: 'SELECT THE RIGHT IMAGE AREA',
+    description:
+      'The main object should occupy the major part of the image. Use the cropping tool available to crop the image and remove excess background.',
+    imageLeft: img1,
+    imageRight: img2,
+  },
+  {
+    title: 'PICTURE CLARITY',
+    description: 'The image should not be blurred or out of focus.',
+    imageLeft: img3,
+    imageRight: img4,
+  },
+  {
+    title: 'OPTIMAL LIGHTING',
+    description:
+      'The images should be taken in a bright area or use your camera’s flash to take a well-lit picture.',
+    imageLeft: img5,
+    imageRight: img6,
+  },
+  {
+    title: 'MONOCHROME BACKGROUND',
+    description:
+      'The object should be placed on a plain and light background and patterned background should be avoided.',
+    imageLeft: img7,
+    imageRight: img8,
+  },
+  {
+    title: 'VISIBILITY OF THE OBJECT',
+    description:
+      'Click an image encapsulating most of the object’s key components.',
+    imageLeft: img9,
+    imageRight: img10,
+  },
+  {
+    title: 'OCR CAPTURE',
+    description:
+      'It is recommended to take a clear picture of the text on the typeplate etc, to ensure that the model can detect the text and give accurate results.',
+    imageLeft: img11,
+    imageRight: img12,
+  },
+];

package/src/page/landingPage/AppMobile.tsx

@@ -1,126 +1,56 @@
-import { Box, Typography } from '@material-ui/core';
-import { RectCoords } from '@nyris/nyris-api';
+import { Box } from '@material-ui/core';
 import CameraCustom from 'components/drawer/cameraCustom';
-import ExampleImages from 'components/ExampleImages';
 import React, { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { feedbackClickEpic } from 'services/Feedback';
-import { createImage, findByImage, findRegions } from 'services/image';
-import { showFeedback, showResults } from 'Store/nyris/Nyris';
-import {
-  loadingActionResults,
-  reset,
-  setImageSearchInput,
-  setRegions,
-  setRequestImage,
-  setSearchResults,
-  setSelectedRegion,
-  updateStatusLoading,
-} from 'Store/search/Search';
-import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { reset } from 'Store/search/Search';
+import { useAppDispatch } from 'Store/Store';
+import { ReactComponent as CameraIcon } from 'common/assets/icons/take_photo.svg';
 
 function AppMobile(): JSX.Element {
-  const history = useHistory();
   const dispatch = useAppDispatch();
-  const searchState = useAppSelector(state => state);
-  const {
-    settings,
-    search: { keyFilter },
-  } = searchState;
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
 
   useEffect(() => {
     dispatch(reset(''));
   }, [dispatch]);
 
-  const getUrlToCanvasFile = async (url: string, position?: number) => {
-    if (history.location?.pathname === '/') {
-      history.push('/result');
-    }
-    dispatch(updateStatusLoading(true));
-    dispatch(showResults());
-    dispatch(loadingActionResults());
-    dispatch(setImageSearchInput(url));
-    if (position) {
-      feedbackClickEpic(searchState, position);
-    }
-    let image = await createImage(url);
-    dispatch(setRequestImage(image));
-    let searchRegion: RectCoords | undefined = undefined;
-    if (settings.regions) {
-      let res = await findRegions(image, settings);
-      dispatch(setRegions(res.regions));
-      searchRegion = res.selectedRegion;
-      dispatch(setSelectedRegion(searchRegion));
-    }
-    const preFilter = [
-      {
-        key: settings.visualSearchFilterKey,
-        values: [`${keyFilter}`],
-      },
-    ];
-    findByImage({
-      image,
-      settings,
-      region: searchRegion,
-      filters: keyFilter ? preFilter : undefined,
-    })
-      .then(res => {
-        dispatch(setSearchResults(res));
-        dispatch(updateStatusLoading(false));
-        dispatch(showFeedback());
-        return;
-      })
-      .catch((err: any) => {
-        console.log('err getUrlToCanvasFile mobile', err);
-      });
-  };
-
   return (
-    <>
-      <Box className="wrap-content-body" style={{ position: 'relative' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      <div className="take-photo">
         <div
+          className="take-photo-wrapper"
           style={{
-            position: 'absolute',
-            top: '1px',
-            height: '100%',
-            width: '100%',
-            zIndex: 1,
-            background: `${settings.theme?.mobileFooterImageColor}`,
+            background: 'linear-gradient(90deg, #55566B 0%, #2B2C46 100%)',
           }}
-        ></div>
-        <Box style={{ position: 'inherit', zIndex: 100 }} className="title-top">
-          <Typography className="text-center text-white">
-            Snap a photo or attach any image in the <br /> following formats:
-          </Typography>
-          <Typography className="text-center text-white">
-            jpg, png, svg, pdf or tiff
-          </Typography>
-        </Box>
-        <Box
-          style={{ position: 'inherit', zIndex: 100 }}
-          className="box-drag-mobile"
         >
-          <ExampleImages
-            images={settings.exampleImages}
-            onExampleImageClicked={(url: string) => {
-              return getUrlToCanvasFile(url);
-            }}
-            onToggleModalCamera={() => {
+          <div
+            className="outer"
+            onClick={() => {
               setOpenModalCamera(!isOpenModalCamera);
             }}
-          />
-        </Box>
-        <Box className="box-screenshot-camera">
-          <CameraCustom
-            isToggle={isOpenModalCamera}
-            onToggleModal={() => {
-              setOpenModalCamera(!isOpenModalCamera);
-            }}
-          />
-        </Box>
+          >
+            <div className="inner">
+              <CameraIcon color={'#2B2C46'} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <Box className="box-screenshot-camera">
+        <CameraCustom
+          isToggle={isOpenModalCamera}
+          onToggleModal={() => {
+            setOpenModalCamera(!isOpenModalCamera);
+          }}
+        />
       </Box>
-    </>
+    </div>
   );
 }