@nyris/nyris-webapp 0.3.32 → 0.3.34

package/src/components/DetailItem.tsx

@@ -20,7 +20,7 @@ interface Props {
   numberResult?: number;
   handlerCloseModal?: () => void;
   dataItem?: any;
-  onHandlerModalShare?: () => void;
+  onHandlerModalShare: () => void;
   onSearchImage?: any;
   moreInfoText?: string;
   handlerFeedback: any;
@@ -31,7 +31,7 @@ function DetailItem(props: Props) {
     handlerCloseModal,
     dataItem,
     onSearchImage,
-    // onHandlerModalShare,
+    onHandlerModalShare,
     handlerFeedback,
   } = props;
   const [collapDescription, setCollapDescription] = useState(false);
@@ -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={() => {
@@ -125,7 +125,7 @@ function DetailItem(props: Props) {
                 }
               }}
             >
-              <IconSearchImage color={settings.theme?.secondaryColor} />
+              <IconSearchImage color={'#AAABB5'} />
             </Button>
           )}
         </Box>
@@ -145,7 +145,7 @@ function DetailItem(props: Props) {
             <Grid container justifyContent="space-between">
               <Grid item xs={12}>
                 <Typography className="text-f13 fw-500 max-line-1">
-                  {settings.itemIdLabel || 'SKU'}: {sku}
+                  {settings.itemIdLabel || 'SKU'}: <span> {sku}</span>
                 </Typography>
                 {dataItem[settings.field.manufacturerNumber] && (
                   <Typography
@@ -200,25 +200,54 @@ function DetailItem(props: Props) {
                     </Typography>
                   </Box>
                 )}
-                {!settings.warehouseVariant && (
-                  <Typography
-                    className={
-                      isMobile
-                        ? 'fw-600 text-dark'
-                        : 'text-f22 fw-600 text-dark'
-                    }
+              </Grid>
+              <Grid item xs={12}>
+                <Box
+                  style={{
+                    background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
+                    // marginBottom: 25,
+                    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+                    borderRadius: 4,
+                    marginTop: 12,
+                  }}
+                  display={'flex'}
+                  justifyContent={'space-between'}
+                  alignItems={'center'}
+                  className="btn-detail-item"
+                >
+                  <Button
                     style={{
-                      marginTop: '12px',
-                      display: 'inline-block',
-                      maxWidth: '100%',
-                      wordWrap: 'break-word',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      width: '100%',
+                      padding: '0px 12px',
+                      minHeight: 64,
                     }}
+                    onClick={() =>
+                      window.open(
+                        `${dataItem[settings.field.ctaLinkField]}`,
+                        '_blank',
+                      )
+                    }
                   >
-                    {dataItem[settings.field.productName]}
-                  </Typography>
-                )}
-              </Grid>
-              <Grid item xs={12}>
+                    <Typography
+                      className="text-f18 fw-700 text-white max-line-2"
+                      align="left"
+                      style={{
+                        letterSpacing: '0.55px',
+                        maxWidth: '300px',
+                        paddingRight: '4px',
+                      }}
+                    >
+                      {dataItem[settings.field.productName]}
+                    </Typography>
+                    <img
+                      src={IconOpenLink}
+                      alt=""
+                      style={{ minWidth: 23, marginLeft: 5 }}
+                    />
+                  </Button>
+                </Box>
                 {dataItem[settings.field.productDetails] && (
                   <Box className="w-100">
                     <Button
@@ -252,57 +281,6 @@ function DetailItem(props: Props) {
                     </Collapse>
                   </Box>
                 )}
-                {(settings.showMoreInfo || settings.warehouseVariant) && (
-                  <Box
-                    style={{
-                      background: `linear-gradient(270deg, ${settings.theme?.primaryColor}bb 0%, ${settings.theme?.primaryColor} 100%)`,
-                      // marginBottom: 25,
-                      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                      borderRadius: 4,
-                      marginTop: 12,
-                    }}
-                    display={'flex'}
-                    justifyContent={'space-between'}
-                    alignItems={'center'}
-                    className="btn-detail-item"
-                  >
-                    <Button
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        padding: '0px 12px',
-                        minHeight: !settings.warehouseVariant ? 48 : 64,
-                      }}
-                      onClick={() =>
-                        window.open(
-                          `${dataItem[settings.field.ctaLinkField]}`,
-                          '_blank',
-                        )
-                      }
-                    >
-                      <Typography
-                        className="text-f18 fw-700 text-white max-line-2"
-                        align="left"
-                        style={{
-                          textTransform: !settings.warehouseVariant
-                            ? 'uppercase'
-                            : 'none',
-                          letterSpacing: '0.55px',
-                        }}
-                      >
-                        {settings.warehouseVariant
-                          ? dataItem[settings.field.productName]
-                          : settings.productCtaText || 'MORE INFO'}
-                      </Typography>
-                      <img
-                        src={IconOpenLink}
-                        alt=""
-                        style={{ width: 23, marginLeft: 5 }}
-                      />
-                    </Button>
-                  </Box>
-                )}
               </Grid>
             </Grid>
           </Box>
@@ -314,36 +292,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>
           )}
 
@@ -396,8 +380,11 @@ function DetailItem(props: Props) {
                 {settings.shareOption && (
                   <Grid item>
                     <Box display={'flex'} alignItems={'center'}>
-                      <Button className="btn-item" onClick={() => false}>
-                        <IconShare width={30} height={30} color="gray" />
+                      <Button
+                        className="btn-item"
+                        onClick={() => onHandlerModalShare()}
+                      >
+                        <IconShare width={30} height={30} color="#000000" />
                       </Button>
                     </Box>
                   </Grid>

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/FooterMobile.tsx

@@ -4,7 +4,9 @@ import { ReactComponent as IconCameraMobile } from 'common/assets/icons/icon_cam
 import CameraCustom from './drawer/cameraCustom';
 import { ReactComponent as Home } from 'common/assets/icons/home.svg';
 import { NavLink, useHistory } from 'react-router-dom';
-import { useAppSelector } from 'Store/Store';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+import { setImageCaptureHelpModal } from 'Store/search/Search';
 
 interface Props {
   onLoadingMobile?: any;
@@ -13,53 +15,90 @@ interface Props {
 function FooterMobile(props: Props): JSX.Element {
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
   const history = useHistory();
-  const { settings } = useAppSelector(state => state);
+  const {
+    settings,
+    search: { imageCaptureHelpModal },
+  } = useAppSelector(state => state);
+  const dispatch = useAppDispatch();
 
   return (
-    <Box
-      className="box-footer-mobile"
-      display={'flex'}
-      position={'relative'}
-      alignItems={'center'}
-      height={'100%'}
-    >
-      <NavLink
-        style={{
-          width: '70px',
-          display: 'flex',
-          justifyContent: 'center',
-          height: '100%',
-          alignItems: 'center',
-          backgroundColor:
-            history.location.pathname === '/'
-              ? `${settings.theme?.primaryColor}21`
-              : '',
-        }}
-        activeClassName="active"
-        to={'/'}
-        className="nav-link p-0 menu-children rounded-0"
-      >
-        <Home
-          color={
-            history.location.pathname === '/'
-              ? settings.theme?.primaryColor
-              : '#000'
-          }
-        />
-      </NavLink>
+    <>
       <Box
-        style={{ background: settings.theme?.primaryColor }}
-        className="box-icon-camera-mobile"
+        className="box-footer-mobile"
+        display={'flex'}
+        position={'relative'}
+        alignItems={'center'}
+        height={'100%'}
+        justifyContent={'space-between'}
+        style={{ paddingLeft: '40px', paddingRight: '40px' }}
       >
-        <Button
+        <NavLink
+          style={{
+            width: '48px',
+            height: '48px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '100%',
+            backgroundColor:
+              history.location.pathname === '/' && !imageCaptureHelpModal
+                ? `${settings.theme?.primaryColor}21`
+                : '',
+          }}
+          activeClassName="active"
+          to={'/'}
+          className="nav-link p-0 menu-children rounded-0"
           onClick={() => {
-            setOpenModalCamera(!isOpenModalCamera);
+            dispatch(setImageCaptureHelpModal(false));
           }}
         >
-          <IconCameraMobile color="#FFFF" />
-        </Button>
+          <Home
+            color={
+              history.location.pathname === '/' && !imageCaptureHelpModal
+                ? settings.theme?.primaryColor
+                : '#000'
+            }
+          />
+        </NavLink>
+        {history.location?.pathname !== '/' && (
+          <Box className="box-icon-camera-mobile">
+            <Button
+              onClick={() => {
+                setOpenModalCamera(!isOpenModalCamera);
+              }}
+            >
+              <IconCameraMobile color="#000" />
+            </Button>
+          </Box>
+        )}
+        {history.location?.pathname !== '/' && (
+          <div
+            style={{
+              width: '48px',
+              height: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '100%',
+              backgroundColor: imageCaptureHelpModal
+                ? `${settings.theme?.primaryColor}21`
+                : '',
+            }}
+            onClick={() => {
+              dispatch(setImageCaptureHelpModal(!imageCaptureHelpModal));
+            }}
+          >
+            <IconInfo
+              fontSize={24}
+              width={24}
+              height={24}
+              color={
+                imageCaptureHelpModal ? settings.theme?.primaryColor : '#000'
+              }
+            />
+          </div>
+        )}
       </Box>
-
       <Box className="box-screenshot-camera">
         <CameraCustom
           isToggle={isOpenModalCamera}
@@ -68,7 +107,7 @@ function FooterMobile(props: Props): JSX.Element {
           }}
         />
       </Box>
-    </Box>
+    </>
   );
 }