@nyris/nyris-webapp 0.3.35 → 0.3.36

package/src/components/RfqBanner.tsx

@@ -0,0 +1,120 @@
+import { Box } from '@material-ui/core';
+import { getCroppedCanvas } from 'helpers/getCroppedCanvas';
+import React from 'react';
+import { useMediaQuery } from 'react-responsive';
+
+function RfqBanner({
+  requestImage,
+  rfqRef,
+  rfqStatus,
+  selectedRegion,
+  setIsRfqModalOpen,
+}: {
+  rfqRef: any;
+  rfqStatus: any;
+  setIsRfqModalOpen: any;
+  requestImage: any;
+  selectedRegion: any;
+}) {
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+
+  return (
+    <Box
+      style={{
+        padding: '0px 16px 0px 16px',
+        backgroundColor: '#F6F3F1',
+        width: '100%',
+        marginBottom: !isMobile ? '32px' : '0px',
+        alignSelf: 'end',
+        height: '248px',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+      className="rfq-box"
+      ref={rfqRef}
+    >
+      <Box
+        style={{
+          width: '100%',
+          display: 'flex',
+          columnGap: '16px',
+          alignItems: 'center',
+          justifyContent: 'space-around',
+        }}
+      >
+        <Box>
+          <Box
+            style={{
+              paddingBottom: '12px',
+            }}
+          >
+            <Box
+              style={{
+                fontSize: '14px',
+                color: rfqStatus === 'inactive' ? '#4B4B4A' : '#CACAD1',
+                fontWeight: 'bold',
+              }}
+            >
+              {isMobile
+                ? 'No matches found?'
+                : 'No matches found for your request?'}
+            </Box>
+            <Box
+              style={{
+                fontSize: '12px',
+                maxWidth: '320x',
+                lineHeight: '14.1px',
+                color: rfqStatus === 'inactive' ? '#4B4B4A' : '#CACAD1',
+                fontWeight: 'normal',
+              }}
+            >
+              Get personalised help from our team of product experts.
+            </Box>
+          </Box>
+          <button
+            style={{
+              maxWidth: '200px',
+              background: rfqStatus === 'inactive' ? '#4B4B4A' : '#E9E9EC',
+              boxShadow:
+                rfqStatus === 'inactive'
+                  ? '0px 0px 4px 0px rgba(0, 0, 0, 0.25)'
+                  : '',
+              borderRadius: '2px',
+              padding: '16px 16px 16px 16px',
+              display: 'flex',
+              alignItems: 'center',
+              color: rfqStatus === 'inactive' ? '#fff' : '#CACAD1',
+              fontSize: '14px',
+              height: '48px',
+              cursor: rfqStatus === 'inactive' ? 'pointer' : 'default',
+              border: 'none',
+            }}
+            disabled={rfqStatus !== 'inactive'}
+            onClick={() => {
+              setIsRfqModalOpen(true);
+            }}
+          >
+            Request a Quote
+          </button>
+        </Box>
+        <div>
+          <img
+            src={getCroppedCanvas(
+              requestImage?.canvas,
+              selectedRegion,
+            )?.toDataURL()}
+            alt="request_image"
+            style={{
+              mixBlendMode: rfqStatus !== 'inactive' ? 'overlay' : 'unset',
+              maxHeight: '181px',
+              maxWidth: '181px',
+              borderRadius: '2px',
+            }}
+          />
+        </div>
+      </Box>
+    </Box>
+  );
+}
+
+export default RfqBanner;

package/src/components/SidePanel.tsx

@@ -0,0 +1,147 @@
+import { Box, Button, Typography } from '@material-ui/core';
+import { RectCoords } from '@nyris/nyris-api';
+import { Preview } from '@nyris/nyris-react-components';
+import React, { useState } from 'react';
+import ExpandablePanelComponent from './PanelResult';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from 'Store/Store';
+import KeyboardArrowRightOutlinedIcon from '@material-ui/icons/KeyboardArrowRightOutlined';
+import KeyboardArrowLeftOutlinedIcon from '@material-ui/icons/KeyboardArrowLeftOutlined';
+import { DEFAULT_REGION } from '../constants';
+import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
+
+function SidePanel({
+  setImageSelection,
+  imageSelection,
+  debouncedOnImageSelectionChange,
+  filteredRegions,
+  showAdjustInfoBasedOnConfidence,
+  showAdjustInfo,
+  showPostFilter,
+  disjunctiveFacets,
+}: {
+  setImageSelection: any;
+  imageSelection: any;
+  debouncedOnImageSelectionChange: any;
+  filteredRegions: any;
+  showAdjustInfoBasedOnConfidence: any;
+  showAdjustInfo: any;
+  showPostFilter: any;
+  allSearchResults: any;
+  disjunctiveFacets: any;
+}) {
+  const { t } = useTranslation();
+  const [toggleColLeft, setToggleColLeft] = useState<boolean>(false);
+  const stateGlobal = useAppSelector((state: any) => state);
+  const { search, settings } = stateGlobal;
+
+  const { requestImage } = search;
+
+  return (
+    <Box
+      className={`wrap-main-col-left ${toggleColLeft ? 'toggle' : ''}`}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box
+        className="box-toggle-coloumn"
+        style={{
+          right: requestImage || toggleColLeft ? '0px' : '16px',
+        }}
+      >
+        <Button
+          style={{
+            color: '#55566b',
+            height: '32px',
+          }}
+          onClick={() => {
+            setToggleColLeft(!toggleColLeft);
+          }}
+        >
+          {toggleColLeft ? (
+            <KeyboardArrowRightOutlinedIcon />
+          ) : (
+            <KeyboardArrowLeftOutlinedIcon />
+          )}
+        </Button>
+      </Box>
+      <Box>
+        {settings.preview && requestImage && (
+          <Box className="col-left">
+            <Box className="box-preview">
+              <Box
+                className="preview-item"
+                style={{
+                  backgroundColor: 'white',
+                  paddingTop: '32px',
+                  width: '100%',
+                }}
+              >
+                <div
+                  style={{
+                    backgroundColor: '#F3F3F5',
+                    width: '100%',
+                    paddingTop: '16px',
+                    paddingBottom: '16px',
+                  }}
+                >
+                  <Preview
+                    key={requestImage?.id}
+                    onSelectionChange={(r: RectCoords) => {
+                      setImageSelection(r);
+                      debouncedOnImageSelectionChange(r);
+                    }}
+                    image={requestImage?.canvas}
+                    selection={imageSelection || DEFAULT_REGION}
+                    regions={filteredRegions}
+                    maxWidth={288}
+                    maxHeight={288}
+                    dotColor={'#FBD914'}
+                    minCropWidth={60}
+                    minCropHeight={60}
+                    rounded={true}
+                  />
+                </div>
+              </Box>
+            </Box>
+            {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
+              <Box
+                className="box-title_col-left"
+                alignItems="center"
+                style={{
+                  backgroundColor: '#3E36DC',
+                  display: 'flex',
+                  columnGap: '6px',
+                  padding: '5px',
+                }}
+              >
+                <IconInfo color="white" />
+                <Typography
+                  style={{
+                    fontSize: 10,
+                    color: '#fff',
+                  }}
+                >
+                  {showAdjustInfo
+                    ? t('Crop the image for better results')
+                    : 'Crop the image for better results'}
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        )}
+
+        {showPostFilter && (
+          <Box className="col-left__bottom">
+            <ExpandablePanelComponent disjunctiveFacets={disjunctiveFacets} />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default SidePanel;

package/src/components/appMobile.scss

@@ -169,7 +169,8 @@
 
         .col-right-result-mobile {
           overflow: initial;
-
+          display: flex;
+          flex-direction: column;
           .col-left {
             max-width: 100%;
           }
@@ -281,86 +282,171 @@
         }
       }
     }
-    .footer-wrap-main {
-      position: fixed;
-      bottom: 0;
-      height: 64px;
-      flex: 1 1 auto;
+ 
+  }
+}
+
+@media screen and (max-width: 776px) {
+
+  .box-header-mobile-main {
+    // min-height: 60px;
+    z-index: 100;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 0px !important;
+
+    &.hide {
+      display: none;
+    }
+
+    .wrap-header-mobile {
+
+      background: #FFFFFF;
+      border-bottom: 1px solid #E9E9EC;
+      box-shadow: 0px 0px 16px rgba(170, 171, 181, 0.5);
+      border-radius: 32px;
+
       width: 100%;
-      padding: 0;
-      padding-top: 0px;
-      padding-right: 0px;
-      padding-bottom: 0px;
-      padding-left: 0px;
-      background-color: #fff;
-      z-index: 11;
+      position: relative;
+      height: 48px;;
 
-      .box-icon-camera-mobile {
-        z-index: 10;
-        box-shadow: 0px 0px 16px rgba(85, 86, 107, 0.2);
-        border-radius: 100%;
+      .box-suggest-search {
         position: absolute;
+        bottom: -30px;
         left: 0;
-        right: 0;
-        width: fit-content;
-        margin: auto;
-        top: -50%;
-        width: 56px;
-        height: 56px;
-        background-color: #FFFFFF;
-        button {
-          border: 0px !important;
-          padding: 17px 14px;
-          width: 56px;
-          height: 56px;
+        width: 100%;
+        background-color: red;
+        padding: 0 50px;
+
+        &.open {
+          z-index: 100;
+          opacity: 1;
         }
-      }
-    }
-  }
-}
 
-//TODO: Custom css modal filter
-@media screen and (max-width: 776px) {
-  .wrap-mobile {
-    height: 100svh;
+        &.close {
+          z-index: -99;
+          opacity: 0;
+        }
+      }
 
-    .box-fillter {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: calc(100% - 47px);
-      background-color: #fff;
-      overflow: auto;
-      opacity: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+      .wrap-input-search {
+        width: 100%;
 
-      ul {
-        li {
-          list-style-type: none;
+        .box-input-search {
+          background-color: #fff;
 
           input {
-            margin-right: 9px;
+            background-color: #fff;
           }
 
-          span {
-            color: #1e1f31;
-            font-size: 14px;
-            font-weight: 400;
+          .btn-mobile-filter {
+            padding: 12px;
+            width: 40px;
+            height: 40px;
+            background-color: #f7f7f7;
+            border-radius: 100%;
           }
         }
       }
+    }
+
+    .box-image-search-thumb-mobile {
+      // width: 40px;
+      height: 40px;
+      min-width: 76px;
+      margin-left: 10px;
+      position: relative;
+      display: flex;
+      border-radius: 4px;
+      max-width: 80px !important;
 
-      &.open {
-        z-index: 1000;
+      button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        min-width: 36px !important;
+        border: 0px;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
       }
+    }
+  }
+  .box-icon-camera-mobile {
+    z-index: 10;
+    box-shadow: 0px 0px 16px rgba(85, 86, 107, 0.2);
+    border-radius: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: fit-content;
+    margin: auto;
+    top: -50%;
+    width: 56px;
+    height: 56px;
+    background-color: #FFFFFF;
+    button {
+      border: 0px !important;
+      padding: 17px 14px;
+      width: 56px;
+      height: 56px;
+    }
+  }
 
-      &.close {
-        z-index: -100;
-        opacity: 0;
+  .box-filter {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 47px);
+    background-color: #fff;
+    overflow: auto;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    ul {
+      li {
+        list-style-type: none;
+
+        input {
+          margin-right: 9px;
+        }
+
+        span {
+          color: #1e1f31;
+          font-size: 14px;
+          font-weight: 400;
+        }
       }
     }
+
+    &.open {
+      z-index: 1000;
+    }
+
+    &.close {
+      z-index: -100;
+      opacity: 0;
+    }
+  }
+}
+
+//TODO: Custom css modal filter
+@media screen and (max-width: 776px) {
+  .wrap-mobile {
+    height: 100svh;
+    background-color: #F3F3F5;
+    display: flex;
+    flex-direction: column;
+   
   }
   .box-filter-mobile {
     .MuiBackdrop-root {
@@ -389,87 +475,6 @@
 
     
   }
-  .aa-DetachedContainer {
-    bottom: auto;
-  }
-  .aa-DetachedOverlay {
-    position: absolute;
-    top: 0;
-    background-color: #fff;
-    width: 100%;
-    height: auto;
-    z-index: 999;
-
-    .aa-DetachedFormContainer {
-      display: flex;
-      padding: 0;
-      flex-direction: row-reverse;
-      height: 58px;
-
-      .aa-Form {
-        display: flex;
-        width: 100%;
-
-        .aa-InputWrapper {
-          width: 100%;
-
-          input {
-            width: 100%;
-          }
-        }
-      }
-
-      .aa-DetachedCancelButton {
-        font-weight: 500 !important;
-        font-size: 30px !important;
-        position: relative;
-        color: #55566b;
-        margin-bottom: 2px;
-        padding-left: 5px;
-        padding-right: 9px;
-
-        &::after {
-          content: '';
-        }
-      }
-    }
-  }
-  .aa-Form {
-    border: 0px !important;
-
-    &:focus-within {
-      box-shadow: none !important;
-    }
-
-    .aa-SubmitButton {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 30px;
-      padding: 0px;
-
-      svg {
-        color: #000 !important;
-      }
-    }
-  }
-
-  .aa-Autocomplete {
-    width: 100%;
-
-    .aa-DetachedSearchButton {
-      border: 0px !important;
-      width: 100%;
-      padding: 0px !important;
-    }
-
-    .aa-DetachedSearchButtonIcon,
-    .aa-SubmitButton {
-      svg {
-        color: #000 !important;
-      }
-    }
-  }
 
   #box-input-search {
     position: relative;

package/src/components/drawer/cameraCustom.tsx

@@ -4,6 +4,7 @@ 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 { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
@@ -38,7 +39,7 @@ function CameraCustom(props: Props) {
   const { search, settings } = stateGlobal;
   const history = useHistory();
   const dispatch = useAppDispatch();
-  const { keyFilter } = search;
+  const { preFilter } = search;
 
   const videoConstraints = {
     width: 1080,
@@ -73,10 +74,10 @@ function CameraCustom(props: Props) {
       dispatch(setSelectedRegion(region));
     }
 
-    const preFilter = [
+    const preFilterValues = [
       {
         key: settings.visualSearchFilterKey,
-        values: [`${keyFilter}`],
+        values: Object.keys(preFilter) as string[],
       },
     ];
     let filters: any[] = [];
@@ -84,7 +85,7 @@ function CameraCustom(props: Props) {
     findByImage({
       image: imageConvert,
       settings,
-      filters: keyFilter ? preFilter : undefined,
+      filters: !isEmpty(preFilter) ? preFilterValues : undefined,
       region,
     })
       .then((res: any) => {

package/src/components/input/inputSearch.tsx

@@ -35,7 +35,7 @@ const SearchBox = (props: any) => {
   // const containerRefInputMobile = useRef<HTMLDivElement>(null);
   const stateGlobal = useAppSelector(state => state);
   const { search, settings } = stateGlobal;
-  const { imageThumbSearchInput, keyFilter } = search;
+  const { imageThumbSearchInput, preFilter } = search;
   const focusInp: any = useRef<HTMLDivElement | null>(null);
   const history = useHistory();
   const [valueInput, setValueInput] = useState<string>('');
@@ -96,13 +96,14 @@ const SearchBox = (props: any) => {
       let payload: any;
       let filters: any[] = [];
       let region: RectCoords | undefined;
+
       dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
       let image = await createImage(fs[0]);
       dispatch(setRequestImage(image));
-      const preFilter = [
+      const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: [`${keyFilter}`],
+          values: Object.keys(preFilter) as string[],
         },
       ];
 
@@ -116,7 +117,7 @@ const SearchBox = (props: any) => {
       return findByImage({
         image,
         settings,
-        filters: keyFilter ? preFilter : undefined,
+        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
         region,
       })
         .then((res: any) => {
@@ -156,7 +157,11 @@ const SearchBox = (props: any) => {
         <form noValidate action="" role="search">
           <Box className="box-inp">
             <Tooltip
-              title={keyFilter ? keyFilter : 'Add pre-filter'}
+              title={
+                !isEmpty(preFilter)
+                  ? Object.keys(preFilter).join(', ')
+                  : 'Add pre-filter'
+              }
               placement="top"
               arrow={true}
               disableHoverListener={!settings.preFilterOption}
@@ -176,7 +181,7 @@ const SearchBox = (props: any) => {
                   <div
                     className="icon-hover"
                     style={{
-                      ...(keyFilter
+                      ...(!isEmpty(preFilter)
                         ? {
                             backgroundColor: `${settings.theme?.secondaryColor}26`,
                           }
@@ -189,7 +194,7 @@ const SearchBox = (props: any) => {
                 {!settings.preFilterOption && (
                   <IconSearch width={16} height={16} />
                 )}
-                {keyFilter && (
+                {!isEmpty(preFilter) && (
                   <div
                     style={{
                       position: 'absolute',

package/src/components/modal/DefaultModal.tsx

@@ -37,7 +37,7 @@ function DefaultModal(props: Props): JSX.Element {
     >
       <div
         className={classNameComponentChild}
-        style={{ overflowY: 'hidden', maxHeight: '95vh', borderRadius: 12 }}
+        style={{ overflowY: 'auto', maxHeight: '95vh', borderRadius: 12 }}
       >
         {children}
       </div>