@nyris/nyris-webapp 0.3.33 → 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,7 +28,6 @@ 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';
 
 const SearchBox = (props: any) => {
@@ -153,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 && (
@@ -208,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')}
@@ -297,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"
@@ -362,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={{

package/src/components/results/ItemResult.tsx

@@ -7,8 +7,7 @@ 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
@@ -144,17 +149,15 @@ function ItemResult(props: Props) {
           </Box>
         )}
         {!isHover && main_image_link && (
-          <Box className="box-icon-modal">
-            <Button
-              style={{ width: '100%', height: '100%', padding: 0, zIndex: 9 }}
-              onClick={() => {
-                if (urlImage.length > 1) {
-                  onSearchImage(main_image_link);
-                }
-              }}
-            >
-              <IconSearchImage color={settings.theme?.secondaryColor} />
-            </Button>
+          <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">
@@ -199,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
@@ -219,7 +222,7 @@ function ItemResult(props: Props) {
                   <span style={{ marginRight: 3 }}>
                     {settings.itemIdLabel || 'SKU'}:
                   </span>
-                  {truncateString(sku, 16)}
+                  {truncateString(sku, 20)}
                 </Typography>
               </Tooltip>
 
@@ -283,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"
@@ -478,9 +473,9 @@ 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>

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,
+  },
+];