@nyris/nyris-webapp 0.3.54 → 0.3.56

package/src/components/ProductList/index.tsx

@@ -51,7 +51,7 @@ function ProductListComponent({
       !isSearchStalled
     ) {
       return (
-        <div style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
+        <div style={{ marginTop: '50px', width: '100%', textAlign: 'center', marginBottom: '12px' }}>
           {t('No products were found matching your search criteria.')}
         </div>
       );

package/src/components/appMobile.scss

@@ -691,6 +691,13 @@
       max-width: 180px !important;
     }
   }
+  .box-wrap-result-component {
+    .box-result {
+      div.go-back-mobile-container {
+        width: 360px;
+      }
+    }
+  }
 }
 .pre-filter-icon {
   display: flex;

package/src/components/clear-refinements/clear-refinements.tsx

@@ -32,7 +32,7 @@ function ClearRefinementsComponent({
       style={{
         color: settings.theme.secondaryColor,
         fontWeight: 'bold',
-        textTransform: 'capitalize',
+        textTransform: 'none',
         padding: 0,
       }}
     >

package/src/components/common.scss

@@ -49,8 +49,8 @@
   justify-content: space-between;
   overflow: hidden;
   .box-header-newVersion-main {
-    height: 50px;
-    min-height: 50px;
+    height: 58px;
+    min-height: 58px;
     border-bottom: 1px solid #E0E0E0;
 
     .box-content {
@@ -142,22 +142,33 @@
 }
 
 .feedback-floating {
-  margin-left: -24px;
   height: fit-content;
-  bottom: 35px;
-  position: fixed;
+  right: 18px;
+  position: absolute;
   z-index: 201;
   display: flex;
   justify-content: flex-end;
 
+  .feedback-section {
+    position: fixed;
+    bottom: 40px;
+    @media screen and (max-width: 776px) {
+      margin-left: 0px;
+      // height: fit-content !important;
+      bottom: 125px;
+     
+    }
+  }
+
   @media screen and (max-width: 776px) {
     margin-left: 0px;
     height: fit-content !important;
-    bottom: 105px;
-    justify-content: center !important;
+    right: 40px;
+   
   }
 }
 
+
 .feedback-wrapper {
   background-color: #e4e3fff7;
   mix-blend-mode: multiply;

package/src/components/current-refinements/current-refinements.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { m } from 'framer-motion';
-import { atom } from 'jotai';
 import { useMemo } from 'react';
 import type {
   CurrentRefinementsProvided,
@@ -10,8 +8,9 @@ import type {
 import { connectCurrentRefinements } from 'react-instantsearch-dom';
 import { getCurrentRefinement } from './getCurrentRefinement';
 import { ClearRefinements } from 'components/clear-refinements/clear-refinements';
-import ChipComponent from 'components/chip/chip';
 import { useAppSelector } from 'Store/Store';
+import { useTranslation } from 'react-i18next';
+import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
 
 export type CurrentRefinementsProps = CurrentRefinementsProvided & {
   header?: string;
@@ -25,8 +24,6 @@ export type CurrentRefinement = {
   value: RefinementValue;
 };
 
-export const refinementCountAtom = atom(0);
-
 function CurrentRefinementsComponent({
   items,
   refine,
@@ -35,6 +32,7 @@ function CurrentRefinementsComponent({
 }: CurrentRefinementsProps) {
   const stateGlobal = useAppSelector(state => state);
   const { settings } = stateGlobal;
+  const { t } = useTranslation();
   const [newItems, setListItems] = useState<any[]>([]);
 
   useEffect(() => {
@@ -61,33 +59,19 @@ function CurrentRefinementsComponent({
     <div
       className={className}
       style={{
-        marginBottom: refinements.length > 0 ? '10px' : '0px',
-        marginTop: refinements.length > 0 ? '16px' : '0px',
+        marginBottom: '16px',
       }}
     >
       <ul className="flex flex-wrap gap-3">
         {refinements.map(refinement => {
           return (
-            <m.li key={[refinement.category, refinement.label].join(':')}>
-              <ChipComponent
-                closeIcon={true}
+            <li key={[refinement.category, refinement.label].join(':')}>
+              {refinement.label}
+              <CloseOutlinedIcon
+                style={{ fontSize: '14px', fontWeight: 'bold', cursor: 'pointer' }}
                 onClick={() => refine(refinement.value)}
-              >
-                {refinement.category && (
-                  <div className="text-f12">{refinement.category}:</div>
-                )}
-                <div
-                  className="capitalize fw-700"
-                  style={{
-                    marginLeft: 5,
-                    textTransform: 'capitalize',
-                    marginRight: 10,
-                  }}
-                >
-                  {refinement.label}
-                </div>
-              </ChipComponent>
-            </m.li>
+              />
+            </li>
           );
         })}
         <li
@@ -97,7 +81,7 @@ function CurrentRefinementsComponent({
           })}
         >
           <ClearRefinements className="text-f12 fw-600">
-            Clear all
+            {t('Clear all')}
           </ClearRefinements>
         </li>
       </ul>

package/src/components/drawer/cameraCustom.tsx

@@ -19,6 +19,11 @@ import {
   loadingActionResults,
   setRegions,
   setSelectedRegion,
+  setShowFeedback,
+  setFirstSearchResults,
+  setFirstSearchImage,
+  setFirstSearchPrefilters,
+  setFirstSearchThumbSearchInput
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 
@@ -78,7 +83,7 @@ function CameraCustom(props: Props) {
       const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
+          values: Object.keys(preFilter),
         },
       ];
       let filters: any[] = [];
@@ -102,6 +107,12 @@ function CameraCustom(props: Props) {
           };
           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);

package/src/components/input/inputSearch.tsx

@@ -5,7 +5,14 @@ import CloseIcon from '@material-ui/icons/Close';
 import IconCamera from 'common/assets/icons/camera.svg';
 import { useQuery } from 'hooks/useQuery';
 import { debounce, isEmpty } from 'lodash';
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useDropzone } from 'react-dropzone';
 import { connectSearchBox } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
@@ -24,20 +31,30 @@ import {
   setRegions,
   setSelectedRegion,
   updateQueryText,
+  setShowFeedback,
+  setFirstSearchResults,
+  setFirstSearchImage,
+  setFirstSearchPrefilters,
+  setFirstSearchThumbSearchInput,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import DefaultModal from 'components/modal/DefaultModal';
 import PreFilterComponent from 'components/pre-filter';
 import { RectCoords } from '@nyris/nyris-api';
 import { useTranslation } from 'react-i18next';
+import { useAuth0 } from '@auth0/auth0-react';
 
 const SearchBox = (props: any) => {
   const { refine, onToggleFilterMobile }: any = props;
   // const containerRefInputMobile = useRef<HTMLDivElement>(null);
   const stateGlobal = useAppSelector(state => state);
   const { search, settings } = stateGlobal;
-  const { imageThumbSearchInput, preFilter, requestImage, selectedRegion } =
-    search;
+  const {
+    imageThumbSearchInput,
+    preFilter,
+    requestImage,
+    selectedRegion,
+  } = search;
   const focusInp: any = useRef<HTMLDivElement | null>(null);
   const history = useHistory();
   const [valueInput, setValueInput] = useState<string>('');
@@ -48,6 +65,9 @@ const SearchBox = (props: any) => {
     useState<boolean>(false);
   const { t } = useTranslation();
   const isAlgoliaEnabled = settings.algolia?.enabled;
+  const searchbar = useRef<HTMLDivElement | null>(null);
+
+  const { user } = useAuth0();
 
   useEffect(() => {
     if (focusInp?.current) {
@@ -55,6 +75,23 @@ const SearchBox = (props: any) => {
     }
   }, [focusInp]);
 
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      if (searchbar.current) {
+        if (searchbar.current.contains(event.target as Node)) {
+          searchbar.current.classList.add('active');
+        } else {
+          searchbar.current.classList.remove('active');
+        }
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [searchbar]);
+
   useEffect(() => {
     const searchQuery = query.get('query') || '';
     if (!isEmpty(searchQuery)) {
@@ -82,6 +119,14 @@ const SearchBox = (props: any) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageThumbSearchInput, isAlgoliaEnabled]);
 
+  useEffect(() => {
+    if (history.location?.pathname === '/') {
+      setValueInput('');
+      dispatch(updateQueryText(''));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [history.location]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const searchOrRedirect = useCallback(
     debounce((value: any, withImage = true) => {
@@ -92,7 +137,7 @@ const SearchBox = (props: any) => {
         const preFilterValues = [
           {
             key: settings.visualSearchFilterKey,
-            values: Object.keys(preFilter) as string[],
+            values: Object.keys(preFilter),
           },
         ];
         if (value || requestImage) {
@@ -120,6 +165,7 @@ const SearchBox = (props: any) => {
 
               dispatch(setSearchResults(payload));
               dispatch(updateStatusLoading(false));
+              dispatch(setShowFeedback(true));
             })
             .catch((e: any) => {
               console.log('error input search', e);
@@ -160,13 +206,12 @@ const SearchBox = (props: any) => {
       const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
+          values: Object.keys(preFilter),
         },
       ];
       try {
         if (settings.regions) {
           let res = await findRegions(image, settings);
-          console.log(res);
 
           dispatch(setRegions(res.regions));
           region = res.selectedRegion;
@@ -193,6 +238,12 @@ const SearchBox = (props: any) => {
             };
             dispatch(setSearchResults(payload));
             dispatch(updateStatusLoading(false));
+            dispatch(setShowFeedback(true));
+            // go back
+            dispatch(setFirstSearchResults(payload));
+            dispatch(setFirstSearchImage(image));
+            dispatch(setFirstSearchPrefilters(preFilter));
+            dispatch(setFirstSearchThumbSearchInput(URL.createObjectURL(fs[0])));
           })
           .catch((e: any) => {
             console.log('error input search', e);
@@ -214,6 +265,17 @@ const SearchBox = (props: any) => {
     }
   };
 
+  const showPreFilter = useMemo(() => {
+    if (settings.shouldUseUserMetadata && user) {
+      if (settings.preFilterOption && !user['/user_metadata'].value) {
+        return true;
+      }
+      return false;
+    }
+
+    return settings.preFilterOption;
+  }, [settings.preFilterOption, settings.shouldUseUserMetadata, user]);
+
   return (
     <div className="wrap-input-search-field">
       <div className="box-input-search d-flex">
@@ -227,22 +289,20 @@ const SearchBox = (props: any) => {
               }
               placement="top"
               arrow={true}
-              disableHoverListener={!settings.preFilterOption}
+              disableHoverListener={!showPreFilter}
             >
               <div
                 className="pre-filter-icon"
                 style={{
-                  cursor: settings.preFilterOption ? 'pointer' : 'default',
+                  cursor: showPreFilter ? 'pointer' : 'default',
                 }}
                 onClick={() =>
-                  settings.preFilterOption
-                    ? setToggleModalFilterDesktop(true)
-                    : false
+                  showPreFilter ? setToggleModalFilterDesktop(true) : false
                 }
               >
-                {settings.preFilterOption && (
+                {showPreFilter && (
                   <div
-                    className="icon-hover"
+                    className="icon-hover desktop"
                     style={{
                       ...(!isEmpty(preFilter)
                         ? {
@@ -256,15 +316,13 @@ const SearchBox = (props: any) => {
                     <IconFilter color="white" />
                   </div>
                 )}
-                {!settings.preFilterOption && (
-                  <IconSearch width={16} height={16} />
-                )}
-                {!isEmpty(preFilter) && (
+                {!showPreFilter && <IconSearch width={16} height={16} />}
+                {!isEmpty(preFilter) && showPreFilter && (
                   <div
                     style={{
                       position: 'absolute',
-                      top: '5px',
-                      left: '35px',
+                      top: '1px',
+                      left: '26px',
                       display: 'flex',
                       justifyContent: 'center',
                       alignItems: 'center',
@@ -347,7 +405,7 @@ const SearchBox = (props: any) => {
                 fontSize: 14,
                 color: '#2B2C46',
               }}
-              className="input-search"
+              className="input-search hhhh"
               placeholder={t('Search')}
               value={valueInput}
               onChange={onChangeText}
@@ -434,7 +492,7 @@ const SearchBox = (props: any) => {
           )}
         </div>
       </div>
-      {settings.preFilterOption && (
+      {showPreFilter && (
         <DefaultModal
           openModal={isOpenModalFilterDesktop}
           handleClose={() => setToggleModalFilterDesktop(false)}

package/src/components/pre-filter/index.tsx

@@ -16,6 +16,7 @@ import { truncateString } from 'helpers/truncateString';
 import { find } from 'services/image';
 import { useQuery } from 'hooks/useQuery';
 import { useTranslation } from 'react-i18next';
+import ClearOutlinedIcon from "@material-ui/icons/ClearOutlined";
 
 interface Props {
   handleClose?: any;
@@ -45,6 +46,7 @@ function PreFilterComponent(props: Props) {
   const [isLoading, setLoading] = useState<boolean>(false);
   const [columns, setColumns] = useState<number>(0);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const [searchKey, setSearchKey] = useState<string>('');
 
   const selectedFilter = useMemo(
     () =>
@@ -57,6 +59,16 @@ function PreFilterComponent(props: Props) {
     [keyFilter],
   );
 
+  useEffect(() => {
+    getDataFilterDesktop();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    filterSearchHandler(searchKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchKey]);
+
   const getDataFilterDesktop = async () => {
     setLoading(true);
     const dataResultFilter = getFilters(1000, settings)
@@ -85,11 +97,6 @@ function PreFilterComponent(props: Props) {
     return dataResultFilter;
   };
 
-  useEffect(() => {
-    getDataFilterDesktop();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const filterSearchHandler = async (value: any) => {
     if (!value) {
       getDataFilterDesktop();
@@ -128,7 +135,7 @@ function PreFilterComponent(props: Props) {
       const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
+          values: Object.keys(preFilter),
         },
       ];
       dispatch(updateStatusLoading(true));
@@ -232,9 +239,18 @@ function PreFilterComponent(props: Props) {
             className="input-search-filter"
             placeholder={t('Search')}
             onChange={(e: any) => {
-              filterSearchHandler(e.target.value);
+              setSearchKey(e.target.value);
             }}
+            value={searchKey}
           />
+          <Button
+            className="btn-clear-text"
+            onClick={() => {
+              setSearchKey('');
+            }}
+          >
+            <ClearOutlinedIcon style={{ fontSize: 16, color: '#2B2C46' }} />
+          </Button>
         </div>
       </div>