@nyris/nyris-webapp 0.3.52 → 0.3.53

package/build/static/media/experience-visual-icon.41d0f3ebf64076a3b627a748e30596a5.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.42028 4.82804C1.42028 5.22014 1.10221 5.53825 0.710142 5.53825C0.318078 5.53825 0 5.22014 0 4.82804V2.69216C0 1.20767 1.20757 0 2.69193 0H4.87323C5.26529 0 5.58337 0.318104 5.58337 0.710201C5.58337 1.1023 5.26529 1.4204 4.87323 1.4204H2.69193C1.99071 1.4204 1.42028 1.99087 1.42028 2.69216V4.82804ZM13.3081 0H11.1268C10.7347 0 10.4167 0.318104 10.4167 0.710201C10.4167 1.1023 10.7347 1.4204 11.1268 1.4204H13.3081C14.0093 1.4204 14.5798 1.99087 14.5798 2.69216V4.82804C14.5798 5.22014 14.8978 5.53825 15.2899 5.53825C15.682 5.53825 16 5.22014 16 4.82804V2.69216C16 1.20767 14.7925 0 13.3081 0ZM15.2899 10.4614C14.8978 10.4614 14.5798 10.7795 14.5798 11.1716V13.3078C14.5798 14.0091 14.0093 14.5796 13.3081 14.5796H11.1268C10.7347 14.5796 10.4167 14.8977 10.4167 15.2898C10.4167 15.6819 10.7347 16 11.1268 16H13.3081C14.7925 16 16 14.7923 16 13.3078V11.1716C16 10.7795 15.682 10.4614 15.2899 10.4614ZM4.87323 14.5796H2.69193C1.99071 14.5796 1.42028 14.0091 1.42028 13.3078V11.1716C1.42028 10.7795 1.10221 10.4614 0.710142 10.4614C0.318078 10.4614 0 10.7792 0 11.1716V13.3078C0 14.7923 1.20757 16 2.69193 16H4.87323C5.26529 16 5.58337 15.6819 5.58337 15.2898C5.58337 14.8977 5.26529 14.5796 4.87323 14.5796ZM12.6019 12.6029C12.4476 12.7572 12.2425 12.8421 12.0242 12.8421L12.0245 12.8418C11.8062 12.8418 11.6011 12.7569 11.4468 12.6026L10.2604 11.4161C9.59218 11.8613 8.81663 12.0952 8.00047 12.0952C6.90685 12.0952 5.87863 11.6694 5.1054 10.8961C4.33217 10.1228 3.90641 9.09453 3.90641 8.00082C3.90641 6.90711 4.33217 5.87881 5.1054 5.10552C5.87863 4.33222 6.90685 3.90643 8.00047 3.90643C9.09408 3.90643 10.1223 4.33222 10.8955 5.10552C11.6688 5.87881 12.0945 6.90711 12.0945 8.00082C12.0945 8.81706 11.8607 9.59266 11.4154 10.2612L12.6019 11.4478C12.9203 11.7662 12.9203 12.2845 12.6019 12.6029ZM9.73685 9.73702C9.75171 9.72248 9.76723 9.70795 9.78342 9.69407C10.2201 9.23426 10.4605 8.63373 10.4605 8.00082C10.4605 6.64418 9.35667 5.54023 8.00014 5.54023C6.6436 5.54023 5.53974 6.64418 5.53974 8.00082C5.53974 9.35747 6.64327 10.4614 8.00014 10.4614C8.63299 10.4614 9.23347 10.2213 9.69325 9.78425C9.70745 9.76774 9.72198 9.75188 9.73685 9.73702Z" fill="white"/>
+</svg>

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.52",
+  "version": "0.3.53",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@nyris/nyris-api": "^0.3.52",
-    "@nyris/nyris-react-components": "^0.3.52",
+    "@nyris/nyris-api": "^0.3.53",
+    "@nyris/nyris-react-components": "^0.3.53",
     "@reduxjs/toolkit": "^2.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^5.17.0",

package/public/js/settings.example.js

@@ -54,6 +54,8 @@ var settings = {
   warehouseVariant: false,
   postFilterOption: '',
   preFilterOption: '',
+  experienceVisualSearch: false,
+  experienceVisualSearchImages: [],
   rfq: {
     enabled: '',
     emailTemplateId: '',

package/src/common/experience-visual-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.42028 4.82804C1.42028 5.22014 1.10221 5.53825 0.710142 5.53825C0.318078 5.53825 0 5.22014 0 4.82804V2.69216C0 1.20767 1.20757 0 2.69193 0H4.87323C5.26529 0 5.58337 0.318104 5.58337 0.710201C5.58337 1.1023 5.26529 1.4204 4.87323 1.4204H2.69193C1.99071 1.4204 1.42028 1.99087 1.42028 2.69216V4.82804ZM13.3081 0H11.1268C10.7347 0 10.4167 0.318104 10.4167 0.710201C10.4167 1.1023 10.7347 1.4204 11.1268 1.4204H13.3081C14.0093 1.4204 14.5798 1.99087 14.5798 2.69216V4.82804C14.5798 5.22014 14.8978 5.53825 15.2899 5.53825C15.682 5.53825 16 5.22014 16 4.82804V2.69216C16 1.20767 14.7925 0 13.3081 0ZM15.2899 10.4614C14.8978 10.4614 14.5798 10.7795 14.5798 11.1716V13.3078C14.5798 14.0091 14.0093 14.5796 13.3081 14.5796H11.1268C10.7347 14.5796 10.4167 14.8977 10.4167 15.2898C10.4167 15.6819 10.7347 16 11.1268 16H13.3081C14.7925 16 16 14.7923 16 13.3078V11.1716C16 10.7795 15.682 10.4614 15.2899 10.4614ZM4.87323 14.5796H2.69193C1.99071 14.5796 1.42028 14.0091 1.42028 13.3078V11.1716C1.42028 10.7795 1.10221 10.4614 0.710142 10.4614C0.318078 10.4614 0 10.7792 0 11.1716V13.3078C0 14.7923 1.20757 16 2.69193 16H4.87323C5.26529 16 5.58337 15.6819 5.58337 15.2898C5.58337 14.8977 5.26529 14.5796 4.87323 14.5796ZM12.6019 12.6029C12.4476 12.7572 12.2425 12.8421 12.0242 12.8421L12.0245 12.8418C11.8062 12.8418 11.6011 12.7569 11.4468 12.6026L10.2604 11.4161C9.59218 11.8613 8.81663 12.0952 8.00047 12.0952C6.90685 12.0952 5.87863 11.6694 5.1054 10.8961C4.33217 10.1228 3.90641 9.09453 3.90641 8.00082C3.90641 6.90711 4.33217 5.87881 5.1054 5.10552C5.87863 4.33222 6.90685 3.90643 8.00047 3.90643C9.09408 3.90643 10.1223 4.33222 10.8955 5.10552C11.6688 5.87881 12.0945 6.90711 12.0945 8.00082C12.0945 8.81706 11.8607 9.59266 11.4154 10.2612L12.6019 11.4478C12.9203 11.7662 12.9203 12.2845 12.6019 12.6029ZM9.73685 9.73702C9.75171 9.72248 9.76723 9.70795 9.78342 9.69407C10.2201 9.23426 10.4605 8.63373 10.4605 8.00082C10.4605 6.64418 9.35667 5.54023 8.00014 5.54023C6.6436 5.54023 5.53974 6.64418 5.53974 8.00082C5.53974 9.35747 6.64327 10.4614 8.00014 10.4614C8.63299 10.4614 9.23347 10.2213 9.69325 9.78425C9.70745 9.76774 9.72198 9.75188 9.73685 9.73702Z" fill="white"/>
+</svg>

package/src/components/Experience-visual-search/ExperienceVisualSearch.scss

@@ -0,0 +1,197 @@
+body.overflow-hidden {
+  overflow: hidden;
+}
+
+.experience-visual-button {
+  background-color: #3E36DC;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 25px;
+  cursor: pointer;
+  margin: 32px auto 0;
+  &:hover,
+  &.hover {
+    width: 197px;
+    border-radius: 25px;
+    transition: .5s;
+    span {
+      width: 149px;
+      display: inline;
+      margin-right: 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      font-family: 'Source Sans 3';
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 16px;
+      text-align: center;
+      &:before {
+        color: #fff;
+        content: 'Experience Visual Search';
+      }
+    }
+  }
+}
+
+.custom-modal {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  background-color: rgba(22, 22, 22, 0.5);
+  z-index: 9999;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  &-body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #F3F3F5;
+    padding: 32px 16px;
+    .close-icon {
+      top: 8px;
+      right: 8px;
+      position: absolute;
+    }
+    &-title {
+      font-family: 'Source Sans 3';
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 24px;
+      text-align: left;
+
+    }
+    &-content {
+      &.experience-visual-search-images {
+        margin: 32px auto;
+        height: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px;
+        width: 376px;
+        .experience-visual-search-image-container {
+          width: 180px;
+          height: 180px;
+          overflow: hidden;
+          border-radius: 4px;
+          position: relative;
+          cursor: pointer;
+          .experience-visual-search-image {
+            width: 180px;
+            height: 180px;
+            background-size: cover;
+            background-position: center;
+            transform: scale(1);
+            &:hover {
+              transition: all 0.3s;
+              transform: scale(1.1);
+            }
+          }
+          .box-icon-modal {
+            bottom: 6px;
+            right: 6px;
+            position: absolute;
+            border-radius: 100%;
+            background-color: #F3F3F5;
+            display: block;
+            overflow: hidden;
+            z-index: 11;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  .custom-modal {
+    &-body {
+      width: 900px;
+      max-width: 900px;
+      height: 380px;
+      border-radius: 4px;
+      &-title,
+      &-subtitle {
+        margin-left: 24px;
+      }
+      &-content {
+        &.experience-visual-search-images {
+          width: 770px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 776px) and (max-width: 899px) {
+  .custom-modal {
+    &-body {
+      width: 600px;
+      max-width: 600px;
+      height: 600px;
+      padding: 32px;
+      border-radius: 4px;
+    }
+  }
+}
+
+@media only screen and (max-width: 776px) {
+  .experience-visual-button {
+    width: 197px;
+    span {
+      width: 149px;
+      display: inline;
+      margin-right: 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      font-family: 'Source Sans 3';
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 16px;
+      text-align: center;
+      &:before {
+        color: #fff;
+        content: 'Experience Visual Search';
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 408px) {
+  .custom-modal {
+    &-body {
+      padding: 32px 8px;
+      &-content {
+        &.experience-visual-search-images {
+          width: 300px;
+          gap: 8px;
+          .experience-visual-search-image-container {
+            width: 145px;
+            height: 145px;
+            .experience-visual-search-image {
+              width: 145px;
+              height: 145px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+

package/src/components/Experience-visual-search/ExperienceVisualSearch.tsx

@@ -0,0 +1,164 @@
+import React, { useState, memo, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
+import './ExperienceVisualSearch.scss';
+import { ReactComponent as ExperienceIcon } from 'common/experience-visual-icon.svg';
+import { useAppDispatch, useAppSelector } from '../../Store/Store';
+import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_search_image2.svg';
+import {
+  loadingActionResults,
+  setImageSearchInput,
+  setRegions,
+  setRequestImage,
+  setSearchResults,
+  setSelectedRegion,
+  updateStatusLoading
+} from '../../Store/search/Search';
+import { createImage, find, findRegions } from '../../services/image';
+import { RectCoords } from '@nyris/nyris-api';
+import { isEmpty } from 'lodash';
+
+function ExperienceVisualSearch() {
+  const dispatch = useAppDispatch();
+  const { search, settings } = useAppSelector(state => state);
+  const [showModal, setShowModal] = useState(false);
+  const [images, setImages] = useState<string[]>([])
+  const button = useRef(null);
+  let interval = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (document.body.getBoundingClientRect().width >= 776) {
+      if (!showModal) {
+        interval.current = setInterval(() => {
+          if (button?.current) {
+            (button.current as HTMLElement).classList.toggle('hover');
+          }
+        }, 3000);
+      } else {
+        if (interval?.current) {
+          clearInterval(interval?.current);
+          if (button?.current && !(button.current as HTMLElement).classList.contains('hover')) {
+            (button.current as HTMLElement).classList.toggle('hover');
+          }
+        }
+      }
+      return () => {
+        if (interval?.current) {
+          clearInterval(interval?.current);
+        }
+      }
+    }
+  }, [showModal]);
+
+  const modalToggle = (isOpen: boolean) => {
+    setShowModal(isOpen);
+    if (isOpen) {
+      const randomImages = settings?.experienceVisualSearchImages
+        ?.slice(0, Math.min(settings?.experienceVisualSearchImages?.length, 4));
+      setImages(randomImages || []);
+      document.body.classList.add('overflow-hidden');
+    } else {
+      document.body.classList.remove('overflow-hidden');
+    }
+  };
+
+  const getUrlToCanvasFile = async (url: string) => {
+    dispatch(updateStatusLoading(true));
+    dispatch(loadingActionResults());
+    dispatch(setImageSearchInput(url));
+    let image = await createImage(url);
+    dispatch(setRequestImage(image));
+
+    let searchRegion: RectCoords | undefined = undefined;
+
+    if (settings.regions) {
+      let res = await findRegions(image, settings);
+      searchRegion = res.selectedRegion;
+      dispatch(setRegions(res.regions));
+      dispatch(setSelectedRegion(searchRegion));
+    }
+    const preFilterValues = [
+      {
+        key: settings.visualSearchFilterKey,
+        values: Object.keys(search.preFilter) as string[],
+      },
+    ];
+    find({
+      image,
+      settings,
+      region: searchRegion,
+      filters: !isEmpty(search.preFilter) ? preFilterValues : undefined,
+    }).then((res: any) => {
+      dispatch(setSearchResults(res));
+      dispatch(updateStatusLoading(false));
+      return;
+    });
+  };
+  
+  return (
+    <>
+      <div
+        ref={button}
+        className="experience-visual-button"
+        onClick={() => modalToggle(true)}
+      >
+        <span />
+        <ExperienceIcon />
+      </div>
+      {showModal &&
+        createPortal(
+          <div
+            className="custom-modal"
+            onClick={(e) => {
+              e.stopPropagation();
+              modalToggle(false);
+            }}
+          >
+            <div
+              className="custom-modal-body"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <CloseOutlinedIcon
+                style={{ fontSize: 24, color: '#55566B' }}
+                className="close-icon"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  modalToggle(false);
+                }}
+              />
+              <div className="custom-modal-body-title">Experience Visual Search</div>
+              <div className="custom-modal-body-subtitle">
+                Start your visual search by selecting an image below.
+              </div>
+              <div className="custom-modal-body-content experience-visual-search-images">
+                {images.map((itemImage) => (
+                    <div
+                      className="experience-visual-search-image-container"
+                      onClick={() => {
+                        modalToggle(false);
+                        getUrlToCanvasFile(itemImage);
+                      }}
+                    >
+                      <div
+                        className="experience-visual-search-image"
+                        style={{ backgroundImage: `url(${itemImage}?width=192&height=192)` }}
+                      />
+                      <div
+                        className="box-icon-modal"
+                      >
+                        <IconSearchImage width={16} height={16} color={'#AAABB5'} />
+                      </div>
+                    </div>
+                ))}
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}
+    </>
+  )
+}
+
+export default memo(ExperienceVisualSearch);

package/src/components/ImagePreviewMobile.tsx

@@ -125,13 +125,13 @@ function ImagePreviewMobileComponent({
                 image={requestImage?.canvas}
                 selection={imageSelection || DEFAULT_REGION}
                 regions={filteredRegions}
-                minWidth={80}
+                minWidth={100 * (requestImage?.canvas?.width / requestImage?.canvas?.height)}
                 minHeight={80}
                 maxWidth={255}
                 maxHeight={255}
                 dotColor={editActive ? '#FBD914' : ''}
-                minCropWidth={editActive ? 60 : 5}
-                minCropHeight={editActive ? 60 : 5}
+                minCropWidth={editActive ? 30 : 5}
+                minCropHeight={editActive ? 30 : 5}
                 rounded={false}
                 expandAnimation={editActive}
                 shrinkAnimation={!editActive}
@@ -143,10 +143,9 @@ function ImagePreviewMobileComponent({
               />
             </div>
           </div>
+
           {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
             <div
-              className="box-title_col-left"
-              alignItems="center"
               style={{
                 backgroundColor: '#3E36DC',
                 display: 'flex',
@@ -154,6 +153,10 @@ function ImagePreviewMobileComponent({
                 padding: '5px',
                 width: 'fit-content',
                 minWidth: '180px',
+                marginTop: 'auto',
+                position: 'absolute',
+                bottom: 0,
+                borderRadius: '16px',
               }}
             >
               <IconInfo color="white" />

package/src/components/SidePanel.tsx

@@ -108,8 +108,8 @@ function SidePanel({
                       selection={imageSelection || DEFAULT_REGION}
                       regions={filteredRegions}
                       dotColor={'#FBD914'}
-                      minCropWidth={60}
-                      minCropHeight={60}
+                      minCropWidth={30}
+                      minCropHeight={30}
                       rounded={true}
                     />
                   </div>
@@ -118,13 +118,16 @@ function SidePanel({
             </div>
             {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
               <div
-                className="box-title_col-left"
                 style={{
                   alignItems: 'center',
                   backgroundColor: '#3E36DC',
                   display: 'flex',
                   columnGap: '6px',
                   padding: '5px',
+                  marginTop: 'auto',
+                  position: 'absolute',
+                  bottom: 0,
+                  borderRadius: '16px',
                 }}
               >
                 <IconInfo color="white" />

package/src/page/landingPage/AppMD.tsx

@@ -3,6 +3,7 @@ import './common.scss';
 import algoliasearch from 'algoliasearch/lite';
 import DragDropFile from 'components/DragDropFile';
 import CustomSearchBox from 'components/input/inputSearch';
+import ExperienceVisualSearch from 'components/Experience-visual-search/ExperienceVisualSearch';
 import { connectInfiniteHits } from 'react-instantsearch-dom';
 import { useAppSelector } from 'Store/Store';
 import { AlgoliaSettings } from '../../types';
@@ -49,6 +50,11 @@ function AppMD() {
           isLoading={isLoading}
           onChangeLoading={onChangeLoading}
         />
+        {settings.experienceVisualSearch ? (
+          <ExperienceVisualSearch />
+        ) : (
+         '' 
+        )}
       </div>
     </div>
   );

package/src/page/landingPage/AppMobile.tsx

@@ -1,11 +1,13 @@
 import CameraCustom from 'components/drawer/cameraCustom';
 import React, { useEffect, useState } from 'react';
 import { reset } from 'Store/search/Search';
-import { useAppDispatch } from 'Store/Store';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { ReactComponent as CameraIcon } from 'common/assets/icons/take_photo.svg';
+import ExperienceVisualSearch from "../../components/Experience-visual-search/ExperienceVisualSearch";
 
 function AppMobile(): JSX.Element {
   const dispatch = useAppDispatch();
+  const { settings } = useAppSelector(state => state);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
 
   useEffect(() => {
@@ -50,6 +52,11 @@ function AppMobile(): JSX.Element {
           }}
         />
       </div>
+      {settings.experienceVisualSearch ? (
+        <ExperienceVisualSearch />
+      ) : (
+        ''
+      )}
     </div>
   );
 }

package/src/types.ts

@@ -80,6 +80,8 @@ export interface AppSettings extends NyrisAPISettings {
   visualSearchFilterKey?: string;
   warehouseVariant?: boolean;
   shouldUseUserMetadata?: boolean;
+  experienceVisualSearch?: boolean;
+  experienceVisualSearchImages?: string[];
 }
 
 export interface SearchSuiteSettings {