@nyris/nyris-webapp 0.3.57 → 0.3.59

package/src/components/ImagePreview.tsx

@@ -0,0 +1,564 @@
+import { useCallback, useRef, useState } from 'react';
+
+import cx from 'classnames';
+
+import { RectCoords } from '@nyris/nyris-api';
+import { Preview } from '@nyris/nyris-react-components';
+import { DEFAULT_REGION } from '../constants';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { ReactComponent as PlusIcon } from 'common/assets/icons/plus.svg';
+import { ReactComponent as CropIcon } from 'common/assets/icons/crop.svg';
+import { ReactComponent as CollapseIcon } from 'common/assets/icons/collpase.svg';
+import { ReactComponent as TrashIcon } from 'common/assets/icons/trash.svg';
+
+import { ReactComponent as DownloadIcon } from 'common/assets/icons/download.svg';
+import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+
+import { useQuery } from 'hooks/useQuery';
+import {
+  loadingActionResults,
+  reset,
+  setSearchResults,
+  updateResultChangePosition,
+  updateStatusLoading,
+} from 'Store/search/Search';
+import { useHistory } from 'react-router-dom';
+import { createImage, find } from 'services/image';
+import { debounce, isEmpty, isUndefined } from 'lodash';
+import useRequestStore from 'Store/requestStore';
+import CameraCustom from './drawer/cameraCustom';
+import useFilteredRegions from 'hooks/useFilteredRegions';
+import useResultStore from 'Store/resultStore';
+import { useDropzone } from 'react-dropzone';
+import { useImageSearch } from 'hooks/useImageSearch';
+import { compressImage } from 'utils';
+import React from 'react';
+
+function ImagePreviewComponent({
+  showAdjustInfo = false,
+  isExpanded,
+  isCameraUploadEnabled = true,
+}: {
+  requestImage?: any;
+  imageSelection?: any;
+  filteredRegions?: any;
+  showAdjustInfo?: any;
+  isCameraUploadEnabled?: boolean;
+  isExpanded?: boolean;
+}) {
+  const [showAdjustInfoBasedOnConfidence, setShowAdjustInfoBasedOnConfidence] =
+    useState(false);
+
+  const { t } = useTranslation();
+  const settings = useAppSelector(state => state.settings);
+  const preFilter = useAppSelector(state => state.search.preFilter);
+  const isAlgoliaEnabled = settings.algolia?.enabled;
+  const isMultiImageSearchEnabled = settings.multiImageSearch;
+
+  const query = useQuery();
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+
+  const {
+    setRequestImages,
+    resetRegions,
+    requestImages,
+    addRequestImage,
+    regions,
+    updateRegion,
+    imageRegions,
+  } = useRequestStore(state => ({
+    requestImages: state.requestImages,
+    regions: state.regions,
+    addRequestImage: state.addRequestImage,
+    updateRegion: state.updateRegion,
+    imageRegions: state.regions,
+    resetRegions: state.resetRegions,
+    setRequestImages: state.setRequestImages,
+  }));
+
+  const { detectedObject } = useResultStore(state => ({
+    detectedObject: state.detectedObject,
+  }));
+
+  const { multiImageSearch, singleImageSearch } = useImageSearch();
+
+  const [showCamera, setShowCamera] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(requestImages.length - 1);
+  const [isVisible, setIsVisible] = useState(true);
+  const [zIndex, setZIndex] = useState<number>(0);
+
+  const previewWrapperRef = useRef<any>(null);
+
+  const searchQuery = query.get('query') || '';
+
+  const onImageRemove = () => {
+    dispatch(reset(''));
+    resetRegions();
+    setRequestImages([]);
+    if (!searchQuery) {
+      history.push('/');
+    }
+
+    if (!isAlgoliaEnabled) {
+      let payload: any;
+      let filters: any[] = [];
+      const preFilterValues = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: Object.keys(preFilter),
+        },
+      ];
+      if (searchQuery || requestImages.length > 0) {
+        dispatch(updateStatusLoading(true));
+        find({
+          settings,
+          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+          text: searchQuery,
+        })
+          .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) => {
+            dispatch(updateStatusLoading(false));
+          });
+      } else {
+        dispatch(setSearchResults([]));
+      }
+    }
+  };
+
+  const handleExpand = () => {
+    if (isVisible) {
+      setTimeout(() => {
+        setZIndex(-1);
+      }, 300);
+    } else {
+      setZIndex(0);
+    }
+    setIsVisible(s => !s);
+  };
+
+  const filteredRegions = useFilteredRegions(
+    detectedObject[currentIndex],
+    regions[currentIndex],
+  );
+
+  const { getInputProps } = useDropzone({
+    onDrop: async (fs: File[]) => {
+      if (!fs[0]) return;
+
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+
+      const compressedBase64 = await compressImage(fs[0]);
+      let image = await createImage(compressedBase64);
+
+      multiImageSearch({
+        images: [...requestImages, image],
+        regions: regions,
+        settings,
+      }).then(() => {
+        dispatch(updateStatusLoading(false));
+      });
+      addRequestImage(image);
+    },
+  });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const findItemsInSelection = useCallback(
+    debounce(async (r: RectCoords, image: HTMLCanvasElement) => {
+      dispatch(updateStatusLoading(true));
+      singleImageSearch({
+        image: image,
+        settings,
+        imageRegion: r,
+        showFeedback: true,
+      }).then((res: any) => {
+        dispatch(updateStatusLoading(false));
+
+        dispatch(updateResultChangePosition(res));
+        const highConfidence = res.results.find(
+          (data: { score: number }) => data.score >= 0.65,
+        );
+        if (!highConfidence) {
+          setShowAdjustInfoBasedOnConfidence(true);
+        }
+        setTimeout(() => {
+          setShowAdjustInfoBasedOnConfidence(false);
+        }, 2000);
+      });
+      return;
+    }, 250),
+    [dispatch, settings, singleImageSearch],
+  );
+
+  const multiImageSearchOnRegionChange = useCallback(
+    (r: RectCoords, index: number) => {
+      dispatch(updateStatusLoading(true));
+      dispatch(loadingActionResults());
+      let modifiedRegions = [...imageRegions];
+      modifiedRegions[index] = r;
+      multiImageSearch({
+        images: requestImages,
+        regions: modifiedRegions,
+        settings,
+      }).then(() => {
+        dispatch(updateStatusLoading(false));
+      });
+    },
+    [dispatch, imageRegions, multiImageSearch, requestImages, settings],
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedOnImageSelectionChange = useCallback(
+    debounce((r: RectCoords, index?: number) => {
+      if (requestImages.length > 1 && !isUndefined(index)) {
+        updateRegion(r, index);
+        multiImageSearchOnRegionChange(r, index);
+      } else {
+        updateRegion(r, 0);
+        findItemsInSelection(r, requestImages[0]);
+      }
+    }, 50),
+    [
+      findItemsInSelection,
+      multiImageSearchOnRegionChange,
+      requestImages,
+      updateRegion,
+    ],
+  );
+
+  const [editActive, setEditActive] = useState(false);
+  return (
+    <>
+      {/* Image preview Desktop, To-do: Remove and use same code as Image preview for Mobile */}
+      <div
+        ref={previewWrapperRef}
+        className={cx([
+          'bg-primary',
+          'justify-center',
+          isVisible ? (!isMultiImageSearchEnabled ? 'py-5' : 'pt-6') : '',
+          'px-7',
+          'w-full',
+          'desktop:px-5',
+          'relative',
+          'hidden',
+          'desktop:flex',
+        ])}
+        // style={{
+        //   height: '100%',
+        //   maxHeight: isVisible ? '800px' : 0,
+        //   overflow: 'hidden',
+        //   zIndex: zIndex,
+        // }}
+        style={{
+          // transform: isVisible ? 'translateY(0)' : `translateY(-100%)`,
+          // opacity: isVisible ? 1 : 0,
+          marginTop: isVisible ? '0px' : 'calc(-100% + 30px)',
+          transition: isVisible ? 'margin-top 0.4s linear' : '',
+          zIndex: zIndex,
+        }}
+      >
+        <div className="w-full bg-[#55566b] aspect-square flex just items-center">
+          <Preview
+            onSelectionChange={(r: RectCoords) => {
+              debouncedOnImageSelectionChange(r, currentIndex);
+            }}
+            image={requestImages[currentIndex]}
+            selection={regions[currentIndex] || DEFAULT_REGION}
+            regions={filteredRegions || []}
+            dotColor={'#FBD914'}
+            minCropWidth={30}
+            minCropHeight={30}
+            rounded={true}
+          />
+        </div>
+        {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
+          <div
+            style={{
+              backgroundColor: '#3E36DC',
+              display: 'flex',
+              columnGap: '6px',
+              padding: '5px',
+              width: 'fit-content',
+              marginTop: 'auto',
+              position: 'absolute',
+              bottom: -20,
+              borderRadius: '16px',
+              zIndex: 1000,
+              height: 'fit-content',
+            }}
+          >
+            <IconInfo color="white" />
+            <p
+              style={{
+                fontSize: 12,
+                color: '#fff',
+                paddingRight: '4px',
+              }}
+            >
+              {showAdjustInfo
+                ? t('Crop the image for better results')
+                : 'Crop the image for better results'}
+            </p>
+          </div>
+        )}
+        <div
+          onClick={() => onImageRemove()}
+          className={`absolute left-2 top-2 flex justify-center items-center cursor-pointer`}
+        >
+          <div className="rounded-full bg-white/50 hover:bg-white w-6 h-6 flex justify-center items-center">
+            <TrashIcon className="text-primary" />
+          </div>
+        </div>
+      </div>
+      {/* Image preview Mobile*/}
+      <div
+        className={cx([
+          'bg-primary',
+          'justify-center',
+          'p-5',
+          !editActive ? 'py-2' : '',
+          'w-full',
+          'relative',
+          'flex',
+          'desktop:hidden',
+        ])}
+      >
+        <div
+          className={`w-full ${
+            editActive ? 'bg-[#55566b] ' : ''
+          } flex just items-center`}
+        >
+          <Preview
+            onSelectionChange={(r: RectCoords) => {
+              debouncedOnImageSelectionChange(r, currentIndex);
+            }}
+            image={requestImages[currentIndex]}
+            selection={regions[currentIndex] || DEFAULT_REGION}
+            regions={filteredRegions || []}
+            minWidth={Math.min(
+              80 *
+                (requestImages[currentIndex]?.width /
+                  requestImages[currentIndex]?.height),
+              200,
+            )}
+            minHeight={80}
+            dotColor={editActive ? '#FBD914' : ''}
+            minCropWidth={editActive ? 30 : 5}
+            minCropHeight={editActive ? 30 : 5}
+            rounded={false}
+            expandAnimation={editActive}
+            shrinkAnimation={!editActive}
+            onExpand={() => {
+              setEditActive(true);
+            }}
+            showGrip={editActive}
+            draggable={editActive ? true : false}
+          />
+        </div>
+        {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
+          <div
+            style={{
+              backgroundColor: '#3E36DC',
+              display: 'flex',
+              columnGap: '6px',
+              padding: '5px',
+              width: 'fit-content',
+              marginTop: 'auto',
+              position: 'absolute',
+              bottom: -16,
+              borderRadius: '16px',
+              zIndex: 1000,
+              height: 'fit-content',
+            }}
+          >
+            <IconInfo color="white" />
+            <p
+              style={{
+                fontSize: 12,
+                color: '#fff',
+                paddingRight: '4px',
+              }}
+            >
+              {showAdjustInfo
+                ? t('Crop the image for better results')
+                : 'Crop the image for better results'}
+            </p>
+          </div>
+        )}
+        <div
+          onClick={() => setEditActive(s => !s)}
+          className={`absolute right-1 ${
+            editActive ? 'bottom-1' : 'bottom-8'
+          } flex justify-center items-center desktop:hidden p-1`}
+        >
+          <div className="rounded-full bg-white w-6 h-6 flex justify-center items-center desktop:hidden">
+            {editActive && <CollapseIcon className="text-primary" />}
+            {!editActive && <CropIcon className="text-primary" />}
+          </div>
+        </div>
+
+        <div
+          onClick={() => onImageRemove()}
+          className={`absolute left-1 ${
+            editActive ? 'top-1' : 'top-8'
+          } flex justify-center items-center desktop:hidden p-1`}
+        >
+          <div className="rounded-full bg-white w-6 h-6 flex justify-center items-center desktop:hidden">
+            <TrashIcon className="text-primary" />
+          </div>
+        </div>
+      </div>
+
+      <div className={cx([!isMultiImageSearchEnabled && 'hidden'])}>
+        <div
+          className={cx([
+            'flex',
+            'items-center',
+            'gap-x-2',
+            'h-28',
+            'w-full',
+            'bg-primary',
+            'justify-center',
+            'relative',
+            'py-4',
+            'desktop:pt-7 desktop:pb-5',
+          ])}
+        >
+          {requestImages.map((image, index) => {
+            return (
+              <div
+                key={index}
+                className={cx([
+                  'rounded-md',
+                  'relative',
+                  'p-1',
+                  currentIndex === index && isVisible
+                    ? ' bg-white'
+                    : 'bg-transparent',
+                ])}
+              >
+                <img
+                  className={cx([
+                    'w-[70px]',
+                    'h-[70px]',
+                    'desktop:w-[52px]',
+                    'desktop:h-[52px]',
+                    'rounded-md',
+                    'object-cover',
+                    'shadow-inner',
+                  ])}
+                  src={image.toDataURL()}
+                  alt=""
+                  onClick={() => {
+                    setCurrentIndex(index);
+                    if (!isVisible) {
+                      handleExpand();
+                    }
+                  }}
+                />
+                {currentIndex === index && (
+                  <div
+                    className={cx([
+                      'absolute',
+                      'w-[70px]',
+                      'h-[70px]',
+                      'desktop:w-[52px]',
+                      'desktop:h-[52px]',
+                      'rounded-md',
+                      'top-1',
+                      'bg-black/15',
+                    ])}
+                    onClick={() => {
+                      setCurrentIndex(index);
+                      if (!isVisible) {
+                        handleExpand();
+                      }
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+          {requestImages.length < 3 && isMultiImageSearchEnabled && (
+            <label
+              className={cx([
+                'w-[70px]',
+                'h-[70px]',
+                'desktop:w-[52px]',
+                'desktop:h-[52px]',
+                'bg-[#55566B]/50',
+                'flex',
+                'justify-center',
+                'items-center',
+                'border',
+                'border-dashed',
+                'border-[#AAABB5]',
+                'rounded-md',
+                'cursor-pointer',
+              ])}
+              onClick={() => {
+                if (isCameraUploadEnabled) {
+                  setShowCamera(true);
+                }
+              }}
+              htmlFor={isCameraUploadEnabled ? '' : 'icon-add-image'}
+            >
+              <input
+                accept="image/*"
+                id="icon-add-image"
+                type="file"
+                style={{ display: 'none' }}
+                {...getInputProps({
+                  onClick: e => {
+                    e.currentTarget.value = '';
+                    e.stopPropagation();
+                  },
+                })}
+              />
+              <PlusIcon className={cx(['text-[#AAABB5] desktop:hidden'])} />
+              <div className="hidden desktop:block">
+                <DownloadIcon className={cx(['text-[#AAABB5]'])} />
+              </div>
+            </label>
+          )}
+          <div
+            onClick={() => handleExpand()}
+            className="absolute right-5 flex justify-center items-center desktop:hidden p-2"
+          >
+            <div className="rounded-full bg-white w-6 h-6 flex justify-center items-center desktop:hidden">
+              <CropIcon className="text-primary" />
+            </div>
+          </div>
+
+          <CameraCustom
+            show={showCamera}
+            onClose={() => setShowCamera(false)}
+          />
+        </div>
+        {requestImages.length < 3 && isMultiImageSearchEnabled && (
+          <p className="text-[10px] pb-4 w-full text-center bg-primary text-white -mt-[1px]">
+            Add up to three photos for a more accurate visual search.
+          </p>
+        )}
+      </div>
+    </>
+  );
+}
+const ImagePreview = React.memo(ImagePreviewComponent);
+export default ImagePreview;

package/src/components/Inquiry/InquiryBanner.tsx

@@ -67,7 +67,7 @@ function InquiryBanner({
             <div>
               <img
                 src={getCroppedCanvas(
-                  requestImage?.canvas,
+                  requestImage,
                   selectedRegion,
                 )?.toDataURL()}
                 alt="request_image"

package/src/components/Inquiry/InquiryModal.tsx

@@ -70,9 +70,9 @@ export default function InquiryModal({
 
   const handleInquiry = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
-    const { canvas }: any = requestImage || {};
-    const croppedImage = canvas
-      ? getCroppedCanvas(canvas, selectedRegion)
+
+    const croppedImage = requestImage
+      ? getCroppedCanvas(requestImage, selectedRegion)
       : null;
     const serviceId = 'service_zfsxshi';
     setIsInquiryModalOpen(false);
@@ -200,10 +200,7 @@ export default function InquiryModal({
             }}
           >
             <img
-              src={getCroppedCanvas(
-                requestImage?.canvas,
-                selectedRegion,
-              )?.toDataURL()}
+              src={getCroppedCanvas(requestImage, selectedRegion)?.toDataURL()}
               alt="request_image"
               style={{ maxHeight: '200px' }}
             />

package/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'components/common';
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
 import {
@@ -11,11 +11,9 @@ import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { AppState } from '../types';
 import './appMobile.scss';
 import './common.scss';
-import FooterMobile from './FooterMobile';
 import HeaderMobile from './HeaderMobile';
 import Header from './Header';
-import { isUndefined } from 'lodash';
-import AppMobile from './AppMobile';
+import MobileLayout from './MobileLayout';
 import jQuery from 'jquery';
 import Loading from './Loading';
 import i18n from 'i18next';
@@ -26,6 +24,8 @@ import InstantSearchProvider from './Provider/InstantSearchProvider';
 import PoweredByNyris from './PoweredByNyris';
 import { useQuery } from 'hooks/useQuery';
 
+import packageJson from '../../package.json';
+
 declare var psol: any;
 
 jQuery(document).ready(function () {
@@ -65,7 +65,6 @@ function Layout({ children }: ReactNode): JSX.Element {
   const { settings, search } = useAppSelector<AppState>((state: any) => state);
   const { loadingSearchAlgolia } = search;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-  const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
   const history = useHistory();
   const query = useQuery();
   const searchQuery = query.get('query') || '';
@@ -96,11 +95,9 @@ function Layout({ children }: ReactNode): JSX.Element {
   }, [user, dispatch, settings.shouldUseUserMetadata]);
 
   let HeaderApp: any;
-  let FooterApp: any;
   let classNameBoxVersion: string = 'newVersion';
   if (isMobile) {
     classNameBoxVersion = 'mobile';
-    FooterApp = FooterMobile;
     HeaderApp = HeaderMobile;
   } else {
     HeaderApp = Header;
@@ -112,6 +109,8 @@ function Layout({ children }: ReactNode): JSX.Element {
   document.documentElement.style.setProperty('--vh', `${vh}px`);
 
   useEffect(() => {
+    console.log('App version:', packageJson.version);
+
     const handleResize = () => {
       let vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty('--vh', `${vh}px`);
@@ -142,7 +141,7 @@ function Layout({ children }: ReactNode): JSX.Element {
         </div>
       )}
       <InstantSearchProvider>
-        {isMobile && showApp && <AppMobile>{children}</AppMobile>}
+        {isMobile && showApp && <MobileLayout>{children}</MobileLayout>}
         {!isMobile && showApp && (
           <div className={`layout-main-${classNameBoxVersion}`}>
             <div
@@ -159,21 +158,13 @@ function Layout({ children }: ReactNode): JSX.Element {
                   : {}),
               }}
             >
-              <HeaderApp
-                onToggleFilterMobile={(show: boolean) => {
-                  setOpenFilter(isUndefined(show) ? !isOpenFilter : show);
-                }}
-              />
+              <HeaderApp />
             </div>
 
             <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
               {children}
             </div>
-            {isMobile && (
-              <div className="footer-wrap-main">
-                <FooterApp />
-              </div>
-            )}
+
             {showPoweredByNyris && <PoweredByNyris />}
           </div>
         )}