@nyris/nyris-webapp 0.3.42 → 0.3.43

package/src/components/Provider/InstantSearchProvider.tsx

@@ -0,0 +1,66 @@
+import React, { memo, useMemo } from 'react';
+import { MultipleQueriesQuery } from '@algolia/client-search';
+import algoliasearch from 'algoliasearch/lite';
+import { ReactNode } from 'components/common';
+import { InstantSearch } from 'react-instantsearch-dom';
+import { changeValueTextSearch } from 'Store/search/Search';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { AlgoliaSettings } from 'types';
+
+function InstantSearchProvider({ children }: ReactNode): JSX.Element {
+  const dispatch = useAppDispatch();
+  const { settings, search } = useAppSelector(state => state);
+  const { valueTextSearch } = search;
+  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
+  const isAlgoliaEnabled = settings.algolia?.enabled;
+
+  const conditionalQuery = useMemo(() => {
+    const searchClient = algoliasearch(appId, apiKey);
+    searchClient.initIndex(indexName);
+    return {
+      ...searchClient,
+      search(requests: MultipleQueriesQuery[]) {
+        if (
+          requests.every(
+            (request: MultipleQueriesQuery) =>
+              !request.params?.query &&
+              (!request.params?.filters ||
+                request.params?.filters.endsWith('<score=1>')),
+          )
+        ) {
+          // Here we have to do something else
+          return Promise.resolve({
+            results: requests.map(() => ({
+              hits: [],
+              nbHits: 0,
+              nbPages: 0,
+              processingTimeMS: 0,
+            })),
+          });
+        }
+        if (isAlgoliaEnabled) {
+          return searchClient.search(requests);
+        }
+      },
+    };
+  }, [apiKey, appId, indexName, isAlgoliaEnabled]);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <InstantSearch
+        indexName={indexName}
+        searchClient={conditionalQuery}
+        searchState={isAlgoliaEnabled ? valueTextSearch : {}}
+        onSearchStateChange={state => {
+          if (state.page && state.query !== undefined && isAlgoliaEnabled) {
+            dispatch(changeValueTextSearch(state));
+          }
+        }}
+      >
+        {children}
+      </InstantSearch>
+    </div>
+  );
+}
+
+export default memo(InstantSearchProvider);

package/src/components/appMobile.scss

@@ -41,7 +41,7 @@
 
         background: #FFFFFF;
         border-bottom: 1px solid #E9E9EC;
-        box-shadow: 0px 0px 16px rgba(170, 171, 181, 0.5);
+        box-shadow: 0px 0px 16px 0px rgba(170, 171, 181, 0.50);
         border-radius: 32px;
 
         width: 100%;
@@ -308,7 +308,7 @@
 
       background: #FFFFFF;
       border-bottom: 1px solid #E9E9EC;
-      box-shadow: 0px 0px 16px rgba(170, 171, 181, 0.5);
+      box-shadow: 0px 0px 16px 0px rgba(170, 171, 181, 0.50);
       border-radius: 32px;
 
       width: 100%;

package/src/components/common.scss

@@ -54,7 +54,6 @@
     border-bottom: 1px solid #E0E0E0;
 
     .box-content {
-      max-width: 1280px;
       margin: auto;
       height: 100%;
       justify-content: space-between;
@@ -129,3 +128,11 @@
   background-color:  hsla(0, 0%, 0%, 0.3);
   z-index: 1;
 }
+
+.powered-by-nyris{
+  background-color: #fff;
+  &:hover {
+    background-color:#F0EFFF,
+
+  }
+}

package/src/components/drawer/cameraCustom.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
 import Webcam from 'react-webcam';
-import { createImage, findByImage, findRegions } from 'services/image';
+import { createImage, find, findRegions } from 'services/image';
 import {
   onToggleModalItemDetail,
   setImageSearchInput,
@@ -82,7 +82,7 @@ function CameraCustom(props: Props) {
     ];
     let filters: any[] = [];
 
-    findByImage({
+    find({
       image: imageConvert,
       settings,
       filters: !isEmpty(preFilter) ? preFilterValues : undefined,
@@ -136,7 +136,7 @@ function CameraCustom(props: Props) {
           values: Object.keys(preFilter) as string[],
         },
       ];
-      return findByImage({
+      return find({
         image,
         settings,
         filters: !isEmpty(preFilter) ? preFilterValues : undefined,

package/src/components/input/inputSearch.tsx

@@ -10,7 +10,7 @@ import { useDropzone } from 'react-dropzone';
 import { connectSearchBox } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
-import { createImage, findByImage, findRegions } from 'services/image';
+import { createImage, find, findRegions } from 'services/image';
 import { ReactComponent as IconFilter } from 'common/assets/icons/filter_settings.svg';
 import { ReactComponent as IconSearch } from 'common/assets/icons/icon_search.svg';
 
@@ -23,6 +23,7 @@ import {
   loadingActionResults,
   setRegions,
   setSelectedRegion,
+  updateQueryText,
 } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
 import DefaultModal from 'components/modal/DefaultModal';
@@ -35,7 +36,8 @@ const SearchBox = (props: any) => {
   // const containerRefInputMobile = useRef<HTMLDivElement>(null);
   const stateGlobal = useAppSelector(state => state);
   const { search, settings } = stateGlobal;
-  const { imageThumbSearchInput, preFilter } = search;
+  const { imageThumbSearchInput, preFilter, requestImage, selectedRegion } =
+    search;
   const focusInp: any = useRef<HTMLDivElement | null>(null);
   const history = useHistory();
   const [valueInput, setValueInput] = useState<string>('');
@@ -45,6 +47,8 @@ const SearchBox = (props: any) => {
   const [isOpenModalFilterDesktop, setToggleModalFilterDesktop] =
     useState<boolean>(false);
   const { t } = useTranslation();
+  const isAlgoliaEnabled = settings.algolia?.enabled;
+
   useEffect(() => {
     if (focusInp?.current) {
       focusInp?.current.focus();
@@ -55,25 +59,76 @@ const SearchBox = (props: any) => {
     const searchQuery = query.get('query') || '';
     if (!isEmpty(searchQuery)) {
       setValueInput(searchQuery);
-      refine(searchQuery);
-      // not an ideal solution: fixes text search not working from landing page
-      setTimeout(() => {
+      dispatch(updateQueryText(searchQuery));
+
+      if (isAlgoliaEnabled) {
         refine(searchQuery);
-      }, 100);
+        // not an ideal solution: fixes text search not working from landing page
+        setTimeout(() => {
+          refine(searchQuery);
+        }, 100);
+      }
     }
-  }, [query, refine]);
+  }, [query, refine, dispatch, isAlgoliaEnabled]);
 
   useEffect(() => {
     if (imageThumbSearchInput) {
       setValueInput('');
-      refine('');
+      if (isAlgoliaEnabled) {
+        refine('');
+      }
       history.push('/result');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageThumbSearchInput]);
+  }, [imageThumbSearchInput, isAlgoliaEnabled]);
 
   const searchOrRedirect = useCallback(
-    debounce((value: any) => {
+    debounce((value: any, withImage = true) => {
+      if (!isAlgoliaEnabled) {
+        dispatch(updateQueryText(value));
+        let payload: any;
+        let filters: any[] = [];
+        const preFilterValues = [
+          {
+            key: settings.visualSearchFilterKey,
+            values: Object.keys(preFilter) as string[],
+          },
+        ];
+        if (value || requestImage) {
+          dispatch(updateStatusLoading(true));
+          find({
+            image: withImage
+              ? (requestImage?.canvas as HTMLCanvasElement)
+              : undefined,
+            settings,
+            filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+            region: withImage ? selectedRegion : undefined,
+            text: value,
+          })
+            .then((res: any) => {
+              res?.results.map((item: any) => {
+                filters.push({
+                  sku: item.sku,
+                  score: item.score,
+                });
+              });
+              payload = {
+                ...res,
+                filters,
+              };
+
+              dispatch(setSearchResults(payload));
+              dispatch(updateStatusLoading(false));
+            })
+            .catch((e: any) => {
+              console.log('error input search', e);
+              dispatch(updateStatusLoading(false));
+            });
+        } else {
+          dispatch(setSearchResults([]));
+        }
+      }
+
       if (value) {
         history.push({
           pathname: '/result',
@@ -83,11 +138,12 @@ const SearchBox = (props: any) => {
         history.push('/result');
       }
     }, 500),
-    [],
+    [requestImage, preFilter, selectedRegion, isAlgoliaEnabled],
   );
 
   const { getInputProps } = useDropzone({
     onDrop: async (fs: File[]) => {
+      if (!fs[0]) return;
       dispatch(updateStatusLoading(true));
       dispatch(loadingActionResults());
       if (history.location.pathname !== '/result') {
@@ -114,7 +170,7 @@ const SearchBox = (props: any) => {
         dispatch(setSelectedRegion(region));
       }
 
-      return findByImage({
+      return find({
         image,
         settings,
         filters: !isEmpty(preFilter) ? preFilterValues : undefined,
@@ -143,11 +199,13 @@ const SearchBox = (props: any) => {
 
   const onChangeText = (event: any) => {
     setValueInput(event.currentTarget.value);
-    // debounceSearch(event.currentTarget.value);
+
     searchOrRedirect(event.currentTarget.value);
     if (event.currentTarget.value === '') {
       setValueInput('');
-      refine('');
+      if (isAlgoliaEnabled) {
+        refine('');
+      }
     }
   };
 
@@ -258,7 +316,11 @@ const SearchBox = (props: any) => {
                           history.push('/');
                         }
                         dispatch(reset(''));
-                        refine(valueInput);
+                        if (isAlgoliaEnabled) {
+                          refine(valueInput);
+                        } else {
+                          searchOrRedirect(valueInput, false);
+                        }
                       }}
                     >
                       <CloseIcon
@@ -293,12 +355,19 @@ const SearchBox = (props: any) => {
               className="btn-clear-text"
               onClick={() => {
                 if (imageThumbSearchInput) {
+                  if (!isAlgoliaEnabled) {
+                    searchOrRedirect('');
+                  }
                   setValueInput('');
-                  refine('');
+                  if (isAlgoliaEnabled) {
+                    refine('');
+                  }
                   return;
                 }
                 setValueInput('');
-                refine('');
+                if (isAlgoliaEnabled) {
+                  refine('');
+                }
                 dispatch(reset(''));
                 history.push('/');
               }}

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

@@ -4,11 +4,17 @@ import CloseIcon from '@material-ui/icons/Close';
 import IconSearch from 'common/assets/icons/icon_search.svg';
 import { getFilters, searchFilters } from 'services/filter';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { setPreFilter } from 'Store/search/Search';
+import {
+  setPreFilter,
+  setSearchResults,
+  updateStatusLoading,
+} from 'Store/search/Search';
 import { useMediaQuery } from 'react-responsive';
 import { isEmpty, pickBy } from 'lodash';
 import { Skeleton } from '@material-ui/lab';
 import { truncateString } from 'helpers/truncateString';
+import { find } from 'services/image';
+import { useQuery } from 'hooks/useQuery';
 
 interface Props {
   handleClose?: any;
@@ -19,11 +25,18 @@ function PreFilterComponent(props: Props) {
   const { handleClose } = props;
   const dispatch = useAppDispatch();
   const stateGlobal = useAppSelector(state => state);
-  const {
-    settings,
-    search: { preFilter: keyFilterState },
-  } = stateGlobal;
+  const { settings } = stateGlobal;
   const [resultFilter, setResultFilter] = useState<any>([]);
+  const query = useQuery();
+  const searchQuery = query.get('query') || '';
+  const { search } = stateGlobal;
+  const {
+    preFilter: keyFilterState,
+
+    requestImage,
+    selectedRegion,
+  } = search;
+
   const [keyFilter, setKeyFilter] = useState<Record<string, boolean>>(
     keyFilterState || {},
   );
@@ -105,7 +118,45 @@ function PreFilterComponent(props: Props) {
   };
 
   const onHandlerSubmitData = () => {
-    dispatch(setPreFilter(pickBy(keyFilter, value => !!value)));
+    const preFilter = pickBy(keyFilter, value => !!value);
+    dispatch(setPreFilter(preFilter));
+
+    if (!settings.algolia?.enabled && (searchQuery || requestImage)) {
+      let payload: any;
+      let filters: any[] = [];
+      const preFilterValues = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: Object.keys(preFilter) as string[],
+        },
+      ];
+      dispatch(updateStatusLoading(true));
+
+      find({
+        image: requestImage?.canvas as HTMLCanvasElement,
+        settings,
+        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+        region: selectedRegion,
+        text: searchQuery,
+      })
+        .then((res: any) => {
+          res?.results.map((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));
+        });
+    }
     handleClose();
   };
 
@@ -338,7 +389,7 @@ function PreFilterComponent(props: Props) {
                     {Array(6)
                       .fill('')
                       .map((_, index) => (
-                        <Skeleton animation={'pulse'} height={30} />
+                        <Skeleton key={index} animation={'pulse'} height={30} />
                       ))}
                   </Box>
                 );

package/src/components/results/ItemResult.tsx

@@ -22,6 +22,7 @@ import { useMediaQuery } from 'react-responsive';
 import { feedbackClickEpic, feedbackConversionEpic } from 'services/Feedback';
 import ProductDetailView from 'components/ProductDetailView';
 import ProductAttribute from '../ProductAttribute';
+import { get } from 'lodash';
 
 interface Props {
   dataItem: any;
@@ -111,7 +112,11 @@ function ItemResult(props: Props) {
       dispatch(updateStatusLoading(false));
     }, 400);
   };
-  const ctaLink = dataItem[settings.field?.ctaLinkField];
+  const ctaLink = get(
+    dataItem,
+    settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
+  );
+
   return (
     <Box className="wrap-main-item-result">
       <DefaultModal

package/src/index.tsx

@@ -13,7 +13,7 @@ import { store } from 'Store/Store';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { createTheme } from '@material-ui/core/styles';
 import { Toaster } from 'components/Toaster';
-import AuthProvider from 'components/AuthProvider';
+import AuthProvider from 'components/Provider/AuthProvider';
 
 document.title = window.location.host;
 

package/src/page/landingPage/common.scss

@@ -483,6 +483,10 @@ button {
     }
   }
 }
+.contact-support:hover {
+  cursor: pointer;
+  color: #fff !important;
+}
 
 .wrap-main-item-result {
   // filter: drop-shadow(0px 0px 6px #aaabb5b3);
@@ -916,7 +920,6 @@ button {
     }
   }
   .box-result {
-    height: calc(100vh - 148px);
     @media screen and (max-width: 776px) {
       height: 100%
     }