@nyris/nyris-webapp 0.3.57 → 0.3.59

package/src/components/drawer/cameraCustom.tsx

@@ -1,63 +1,88 @@
 // @ts-nocheck
+
+import cx from 'classnames';
+
 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';
-import { RectCoords } from '@nyris/nyris-api';
-import ReverseCamera from 'common/assets/icons/reverse_camera.svg';
-import { isEmpty } from 'lodash';
-import React, { useCallback, useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import Webcam from 'react-webcam';
-import { createImage, find, findRegions } from 'services/image';
+import { createImage } from 'services/image';
 import {
   onToggleModalItemDetail,
-  setImageSearchInput,
-  setRequestImage,
-  setSearchResults,
   updateStatusLoading,
   loadingActionResults,
-  setRegions,
-  setSelectedRegion,
-  setShowFeedback,
-  setFirstSearchResults,
-  setFirstSearchImage,
-  setFirstSearchPrefilters,
-  setFirstSearchThumbSearchInput
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 
+import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+import { ReactComponent as CloseIcon } from 'common/assets/icons/close.svg';
+import { ReactComponent as GalleryIcon } from 'common/assets/icons/gallery.svg';
+import { ReactComponent as NextArrowIcon } from 'common/assets/icons/next-arrow.svg';
+
+import useRequestStore from 'Store/requestStore';
+import { useImageSearch } from 'hooks/useImageSearch';
+import ImageCaptureHelpModal from 'components/ImageCaptureHelpModal';
+import { createPortal } from 'react-dom';
+import { compressImage } from 'utils';
+
 interface Props {
-  isToggle: boolean;
-  onToggleModal?: any;
+  show: boolean;
+  onClose: any;
+  newSearch?: boolean;
 }
 
 const FACING_MODE_USER = 'environment';
-const FACING_MODE_ENVIRONMENT = 'user';
 
 function CameraCustom(props: Props) {
-  const { isToggle, onToggleModal } = props;
+  const { show: isToggle, onClose: onToggleModal, newSearch } = props;
   const webcamRef: any = useRef(null);
-  const [facingMode, setFacingMode] = useState(FACING_MODE_USER);
-  const [scaleCamera, setScaleCamera] = useState<number>(1);
-  const stateGlobal = useAppSelector(state => state);
-  const { search, settings } = stateGlobal;
+  const settings = useAppSelector(state => state.settings);
   const history = useHistory();
   const dispatch = useAppDispatch();
-  const { preFilter } = search;
+
+  const { singleImageSearch, multiImageSearch } = useImageSearch();
+
+  const { requestImages, setRequestImages, regions } = useRequestStore(
+    state => ({
+      requestImages: state.requestImages,
+      setRequestImages: state.setRequestImages,
+      regions: state.regions,
+    }),
+  );
+
+  const [capturedImages, setCapturedImages] = useState<HTMLCanvasElement[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [imageCaptureHelpModal, setImageCaptureHelpModal] = useState(false);
+
+  const multiImageUpload = requestImages.length > 0 && !newSearch;
+  const canMultiImageSearch = capturedImages.length !== requestImages.length;
 
   const videoConstraints = {
     width: 1080,
     aspectRatio: 1.11111,
   };
 
-  const handleClick = useCallback(() => {
-    setFacingMode(prevState =>
-      prevState === FACING_MODE_USER
-        ? FACING_MODE_ENVIRONMENT
-        : FACING_MODE_USER,
-    );
-  }, []);
+  const addCapturedImage = async (image: any) => {
+    const compressedBase64 = await compressImage(image);
+    let imageConvert = await createImage(compressedBase64);
+    setCapturedImages(state => [...state, imageConvert]);
+  };
+
+  const handleMultiImageSearch = () => {
+    setRequestImages(capturedImages);
+    dispatch(updateStatusLoading(true));
+    dispatch(loadingActionResults());
+
+    multiImageSearch({
+      images: capturedImages,
+      regions: regions,
+      settings,
+    }).then(() => {
+      dispatch(updateStatusLoading(false));
+    });
+
+    handleClose();
+  };
 
   const handlerFindImage = async (image: any) => {
     dispatch(updateStatusLoading(true));
@@ -65,218 +90,351 @@ function CameraCustom(props: Props) {
     if (history.location.pathname !== '/result') {
       history.push('/result');
     }
-    let region: RectCoords | undefined;
-    let imageConvert = await createImage(image);
-    dispatch(setRequestImage(imageConvert));
-    dispatch(onToggleModalItemDetail(false));
-    handlerCloseModal();
 
-    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),
-        },
-      ];
-      let filters: any[] = [];
+    singleImageSearch({
+      image: image,
+      settings,
+      newSearch,
+      showFeedback: true,
+    }).then(() => {
+      dispatch(updateStatusLoading(false));
+    });
 
-      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));
-          dispatch(setShowFeedback(true));
-          // go back
-          dispatch(setFirstSearchResults(payload));
-          dispatch(setFirstSearchImage(imageConvert));
-          dispatch(setFirstSearchPrefilters(preFilter));
-          dispatch(setFirstSearchThumbSearchInput(image));
-        })
-        .catch((e: any) => {
-          console.log('error input search', e);
-          dispatch(updateStatusLoading(false));
-        });
-    }
+    dispatch(onToggleModalItemDetail(false));
+    handleClose();
   };
 
-  const handlerCloseModal = () => {
-    setFacingMode('environment');
-    setScaleCamera(1);
+  const handleClose = () => {
     onToggleModal();
   };
 
-  return (
-    <div className="box-camera-custom">
-      <Drawer
-        anchor={'bottom'}
-        open={isToggle}
-        onClose={handlerCloseModal}
-        className="modal-togggle-cam"
-      >
-        <div className="wrap-camera">
-          <button
-            className="btn-close-modal right"
-            style={{
-              backgroundColor: '#666666',
-            }}
-            onClick={handlerCloseModal}
-          >
-            <CloseIcon style={{ fontSize: 20, color: '#fff' }} />
-          </button>
+  useEffect(() => {
+    if (newSearch) {
+      setCapturedImages([]);
+      setCurrentIndex(0);
+    } else {
+      setCapturedImages([...requestImages]);
+      setCurrentIndex(requestImages.length);
+    }
+  }, [requestImages, newSearch, isToggle]);
 
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              overflow: 'hidden',
-              width: '100%',
-            }}
-            className="full-height"
-          >
-            <Webcam
-              audio={false}
-              width={'100%'}
-              className="full-height"
-              imageSmoothing={true}
-              screenshotFormat="image/jpeg"
-              forceScreenshotSourceSize={true}
-              videoConstraints={{
-                ...videoConstraints,
-                facingMode,
-              }}
-              ref={webcamRef}
-              style={{
-                height: '100%',
-                width: '100%',
-                objectFit: 'cover',
-                transform: `scale(${scaleCamera})`,
-              }}
-              screenshotQuality={1}
+  return (
+    <>
+      {imageCaptureHelpModal && (
+        <>
+          {createPortal(
+            <>
+              <div
+                className={
+                  'wrap-filter-desktop absolute top-0 flex items-center justify-center bg-black/50 w-screen h-screen z-[9999]'
+                }
+              >
+                <ImageCaptureHelpModal
+                  handleClose={() => setImageCaptureHelpModal(s => !s)}
+                />
+              </div>
+            </>,
+            document.body,
+          )}
+        </>
+      )}
+      <div className="box-camera-custom">
+        <Drawer
+          anchor={'bottom'}
+          open={isToggle}
+          onClose={() => handleClose()}
+          className="modal-togggle-cam !bg-[#2B2C46]"
+        >
+          <div className="h-full flex flex-col overflow-hidden">
+            <div className="min-h-[60px] bg-[#2B2C46] flex justify-end">
+              <div
+                className="h-[60px] w-[60px] flex justify-center items-center"
+                onClick={() => {
+                  setImageCaptureHelpModal(s => !s);
+                }}
+              >
+                <IconInfo className="text-white w-4 h-4" />
+              </div>
+              <div
+                className="h-[60px] w-[60px] flex justify-center items-center"
+                onClick={() => handleClose()}
+              >
+                <CloseIcon className="text-white w-4 h-4" />
+              </div>
+            </div>
+            <div
+              className={cx([
+                'flex',
+                'justify-center',
+                'items-center',
+                'h-full',
+                'overflow-hidden',
+                'px-2',
+                'rounded-lg',
+              ])}
             >
-              {({ getScreenshot }: any) => (
-                <button
-                  onClick={() => {
-                    const imageSrc = getScreenshot();
-                    handlerFindImage(imageSrc);
-                    dispatch(setImageSearchInput(imageSrc));
+              <div className="wrap-camera h-full w-full !bg-[#55566B] rounded-lg">
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                    width: '100%',
                   }}
-                  className="btn-capture-camera"
+                  className="h-full rounded-lg"
                 >
-                  <svg
-                    width="63"
-                    height="63"
-                    viewBox="0 0 63 63"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
+                  {currentIndex < capturedImages.length && (
+                    <img
+                      className="h-full object-contain"
+                      src={capturedImages[currentIndex].toDataURL()}
+                      alt=""
+                    />
+                  )}
+                  <Webcam
+                    audio={false}
+                    width={'100%'}
+                    className="rounded-lg"
+                    imageSmoothing={true}
+                    screenshotFormat="image/jpeg"
+                    forceScreenshotSourceSize={true}
+                    videoConstraints={{
+                      ...videoConstraints,
+                      facingMode: FACING_MODE_USER,
+                    }}
+                    ref={webcamRef}
+                    style={{
+                      height: '100%',
+                      width: '100%',
+                      objectFit: 'cover',
+                      transform: `scale(${1})`,
+                      display:
+                        currentIndex < capturedImages.length ? 'none' : '',
+                    }}
+                    screenshotQuality={1}
                   >
-                    <circle cx="31.5" cy="31.5" r="31.5" fill="white" />
-                  </svg>
-                </button>
-              )}
-            </Webcam>
-          </div>
+                    {({ getScreenshot }: any) => (
+                      <div
+                        className={cx([
+                          'absolute',
+                          'left-0',
+                          'right-0',
+                          'mx-auto',
+                          'bottom-8',
+                          'items-center',
+                          'justify-center',
+                          'gap-x-8',
+                          'mr-16',
+                          currentIndex < capturedImages.length
+                            ? 'hidden'
+                            : 'flex',
+                        ])}
+                      >
+                        <div>
+                          <input
+                            id="icon-button-file"
+                            type="file"
+                            style={{ display: 'none' }}
+                            onChange={(fs: any) => {
+                              const file = fs.target?.files[0];
+                              if (!file) return;
 
-          <button className="btn-switch-camera" onClick={handleClick}>
-            <img src={ReverseCamera} alt="" width={52} height={52} />
-          </button>
+                              if (multiImageUpload) {
+                                setCurrentIndex(state =>
+                                  Math.min(state + 1, 2),
+                                );
 
-          <div
-            className="box-scale-camera"
-            style={{
-              backgroundColor: settings.theme?.secondaryColor,
-            }}
-          >
-            <button
-              className={`${scaleCamera === 1 && 'active'}`}
-              style={{
-                backgroundColor: scaleCamera === 1 && 'active' ? 'white' : '',
-                color: scaleCamera === 1 && 'active' ? 'black' : 'white',
-              }}
-              onClick={() => setScaleCamera(1)}
-            >
-              1
-            </button>
-            <button
-              className={`${scaleCamera === 1.5 && 'active'}`}
-              style={{
-                backgroundColor: scaleCamera === 1.5 && 'active' ? 'white' : '',
-                color: scaleCamera === 1.5 && 'active' ? 'black' : 'white',
-              }}
-              onClick={() => setScaleCamera(1.5)}
-            >
-              1.5
-            </button>
-            <button
-              className={`${scaleCamera === 2 && 'active'}`}
-              style={{
-                backgroundColor: scaleCamera === 2 && 'active' ? 'white' : '',
-                color: scaleCamera === 2 && 'active' ? 'black' : 'white',
-              }}
-              onClick={() => setScaleCamera(2)}
-            >
-              2
-            </button>
-          </div>
-          <div className="wrap-box-input-mobile custom-library">
-            <input
-              id="icon-button-file"
-              type="file"
-              style={{ display: 'none' }}
-              onChange={(fs: any) => {
-                const file = fs.target?.files[0];
-                if (!file) return;
-                dispatch(setImageSearchInput(URL.createObjectURL(file)));
-                handlerFindImage(file);
-              }}
-              accept="image/jpeg,image/png,image/webp"
-              onClick={event => {
-                // @ts-ignore
-                event.target.value = '';
-              }}
-            />
-            <label htmlFor="icon-button-file">
-              <IconButton
-                color="primary"
-                aria-label="upload picture"
-                component="span"
-                style={{
-                  width: 32,
-                  height: 32,
-                  borderRadius: '100%',
-                  padding: 7,
-                  backgroundColor: '#F3F3F5',
-                }}
-              >
-                <PhotoLibraryIcon style={{ fontSize: 20, color: 'red' }} />
-              </IconButton>
-            </label>
+                                addCapturedImage(file);
+                              } else {
+                                handlerFindImage(file);
+                              }
+                            }}
+                            accept="image/jpeg,image/png,image/webp"
+                            onClick={event => {
+                              // @ts-ignore
+                              event.target.value = '';
+                            }}
+                          />
+                          <label htmlFor="icon-button-file">
+                            <div className="w-12 h-12 bg-[#615e669f] rounded-full border-2 border-solid border-white flex justify-center items-center">
+                              <GalleryIcon className="text-white w-4 h-4" />
+                            </div>
+                          </label>
+                        </div>
+
+                        <button
+                          onClick={() => {
+                            const imageSrc = getScreenshot();
+                            if (multiImageUpload) {
+                              addCapturedImage(imageSrc);
+                              setCurrentIndex(state => Math.min(state + 1, 2));
+                            } else {
+                              handlerFindImage(imageSrc);
+                            }
+                          }}
+                          className={cx([
+                            'w-fit',
+                            'bg-transparent',
+                            'border',
+                            'border-white',
+                            'rounded-full',
+                            'flex',
+                            'justify-center',
+                            'items-center',
+                            'p-0.5',
+                          ])}
+                        >
+                          <svg
+                            width="63"
+                            height="63"
+                            viewBox="0 0 63 63"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <circle cx="31.5" cy="31.5" r="31.5" fill="white" />
+                          </svg>
+                        </button>
+                      </div>
+                    )}
+                  </Webcam>
+                </div>
+              </div>
+            </div>
+
+            {capturedImages.length === 0 && (
+              <div
+                className={cx([
+                  'min-h-[60px]',
+                  'bg-[#2B2C46]',
+                  'flex',
+                  'justify-end',
+                ])}
+              />
+            )}
+
+            {capturedImages.length > 0 && settings.multiImageSearch && (
+              <>
+                <div
+                  className={cx([
+                    'min-h-[106px]',
+                    'bg-primary',
+                    'flex',
+                    'justify-center',
+                    'items-center',
+                    'gap-x-1',
+                  ])}
+                >
+                  {capturedImages?.map((image, index) => {
+                    return (
+                      <div
+                        key={index}
+                        className={cx([
+                          'rounded-md',
+                          'p-1.5',
+                          currentIndex === index
+                            ? ' bg-[#3E36DC]'
+                            : 'bg-transparent',
+                        ])}
+                      >
+                        <img
+                          className={cx([
+                            'w-[70px]',
+                            'h-[70px]',
+                            'rounded-md',
+                            'object-cover',
+                          ])}
+                          src={image.toDataURL()}
+                          alt=""
+                          onClick={() => {
+                            setCurrentIndex(index);
+                          }}
+                        />
+                      </div>
+                    );
+                  })}
+
+                  {[...Array(3 - capturedImages.length)]?.map((val, index) => {
+                    return (
+                      <div
+                        key={index}
+                        className={cx([
+                          'rounded-md',
+                          'p-1.5',
+                          currentIndex === index + capturedImages.length
+                            ? ' bg-[#3E36DC]'
+                            : 'bg-transparent',
+                        ])}
+                      >
+                        <div
+                          className={cx([
+                            'w-[70px]',
+                            'h-[70px]',
+                            'flex',
+                            'justify-center',
+                            'items-center',
+                            'rounded-md',
+                            currentIndex === index + capturedImages.length
+                              ? 'bg-primary'
+                              : 'border border-[#AAABB5] border-dashed bg-[#55566B]',
+                          ])}
+                          key={index}
+                          onClick={() => {
+                            setCurrentIndex(index + capturedImages.length);
+                          }}
+                        ></div>
+                      </div>
+                    );
+                  })}
+                </div>
+                <div className="w-full flex justify-center pb-6 bg-primary">
+                  <div
+                    className={cx([
+                      '',
+                      'h-11',
+                      'w-full',
+                      'px-7',
+                      'max-w-[351px]',
+                      'flex',
+                      'justify-center',
+                      'items-center',
+                      'gap-x-4',
+                      'rounded-3xl',
+                      canMultiImageSearch
+                        ? 'bg-secondary drop-shadow-md'
+                        : 'bg-primary',
+                    ])}
+                    onClick={() => {
+                      if (canMultiImageSearch) {
+                        handleMultiImageSearch();
+                      }
+                    }}
+                  >
+                    <div
+                      className={cx([
+                        'text-base',
+                        'text-[#55566B]',
+                        canMultiImageSearch ? 'text-white' : 'text-[#55566B]',
+                      ])}
+                    >
+                      Multi-Image Search for better matches
+                    </div>
+                    <NextArrowIcon
+                      className={cx([
+                        'text-[#55566B]',
+                        canMultiImageSearch ? 'text-white' : 'text-[#55566B]',
+                      ])}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
           </div>
-        </div>
-      </Drawer>
-    </div>
+        </Drawer>
+      </div>
+      {/* {!imageCaptureHelpModal && (
+    
+      )} */}
+    </>
   );
 }