@nyris/nyris-webapp 0.3.42 → 0.3.44

package/src/components/ImagePreviewMobile.tsx

@@ -5,14 +5,20 @@ import { Preview } from '@nyris/nyris-react-components';
 import { DEFAULT_REGION } from '../constants';
 import { ReactComponent as IconInfo } from 'common/assets/icons/info-tooltip.svg';
 import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'Store/Store';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
 import { ReactComponent as ArrowUp } from 'common/assets/icons/arrow_up.svg';
 import { ReactComponent as ArrowDown } from 'common/assets/icons/arrow_down.svg';
 import { ReactComponent as Trash } from 'common/assets/icons/trash.svg';
 import { useQuery } from 'hooks/useQuery';
-import { reset } from 'Store/search/Search';
+import {
+  reset,
+  setSearchResults,
+  updateStatusLoading,
+} from 'Store/search/Search';
 import { useHistory } from 'react-router-dom';
 import { connectSearchBox } from 'react-instantsearch-dom';
+import { find } from 'services/image';
+import { isEmpty } from 'lodash';
 
 function ImagePreviewMobileComponent({
   requestImage,
@@ -36,6 +42,9 @@ function ImagePreviewMobileComponent({
   const { refine }: any = rest;
   const [editActive, setEditActive] = useState(false);
   const [showShrinkAnimation, setShrinkAnimation] = useState(false);
+  const settings = useAppSelector(state => state.settings);
+  const { preFilter } = useAppSelector(state => state.search);
+  const isAlgoliaEnabled = settings.algolia?.enabled;
   const query = useQuery();
   const dispatch = useAppDispatch();
   const history = useHistory();
@@ -45,19 +54,59 @@ function ImagePreviewMobileComponent({
     setShrinkAnimation(true);
   };
 
-  const onImageRemove = () => {
-    const searchQuery = query.get('query') || '';
+  const searchQuery = query.get('query') || '';
 
+  const onImageRemove = () => {
     if (!searchQuery) {
       dispatch(reset(''));
       history.push('/');
     }
     dispatch(reset(''));
+    if (isAlgoliaEnabled) {
+      // not an ideal solution: fixes text search not working after removing image
+      setTimeout(() => {
+        refine(searchQuery);
+      }, 100);
+    }
+    if (!isAlgoliaEnabled) {
+      let payload: any;
+      let filters: any[] = [];
+      const preFilterValues = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: Object.keys(preFilter) as string[],
+        },
+      ];
+      if (searchQuery || requestImage) {
+        dispatch(updateStatusLoading(true));
+        find({
+          settings,
+          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+          text: searchQuery,
+        })
+          .then((res: any) => {
+            res?.results.map((item: any) => {
+              filters.push({
+                sku: item.sku,
+                score: item.score,
+              });
+            });
+            payload = {
+              ...res,
+              filters,
+            };
 
-    // not an ideal solution: fixes text search not working after removing image
-    setTimeout(() => {
-      refine(searchQuery);
-    }, 100);
+            dispatch(setSearchResults(payload));
+            dispatch(updateStatusLoading(false));
+          })
+          .catch((e: any) => {
+            console.log('error input search', e);
+            dispatch(updateStatusLoading(false));
+          });
+      } else {
+        dispatch(setSearchResults([]));
+      }
+    }
   };
 
   return (

package/src/components/Layout.tsx

@@ -1,18 +1,11 @@
 import { Box } from '@material-ui/core';
-import { MultipleQueriesQuery } from '@algolia/client-search';
-import algoliasearch from 'algoliasearch/lite';
 import { ReactNode } from 'components/common';
-import React, { memo, useEffect, useMemo, useState } from 'react';
-import { InstantSearch } from 'react-instantsearch-dom';
+import React, { memo, useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { useHistory } from 'react-router-dom';
-import {
-  changeValueTextSearch,
-  onResetRequestImage,
-  setUpdateSession,
-} from 'Store/search/Search';
+import { onResetRequestImage, setUpdateSession } from 'Store/search/Search';
 import { useAppDispatch, useAppSelector } from 'Store/Store';
-import { AlgoliaSettings, AppState } from '../types';
+import { AppState } from '../types';
 import './appMobile.scss';
 import './common.scss';
 import FooterMobile from './FooterMobile';
@@ -27,6 +20,8 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { translations } from 'translations';
 import { useAuth0 } from '@auth0/auth0-react';
+import InstantSearchProvider from './Provider/InstantSearchProvider';
+import PoweredByNyris from './PoweredByNyris';
 
 declare var psol: any;
 
@@ -60,8 +55,7 @@ i18n.use(initReactI18next).init({
 function Layout({ children }: ReactNode): JSX.Element {
   const dispatch = useAppDispatch();
   const { settings, search } = useAppSelector<AppState>((state: any) => state);
-  const { valueTextSearch, loadingSearchAlgolia } = search;
-  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
+  const { loadingSearchAlgolia } = search;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const [isOpenFilter, setOpenFilter] = useState<boolean>(false);
   const history = useHistory();
@@ -70,7 +64,7 @@ function Layout({ children }: ReactNode): JSX.Element {
     history.location?.pathname === '/';
   const language = useAppSelector(state => state.settings.language);
   const { isAuthenticated } = useAuth0();
-  const { auth0 } = settings;
+  const { auth0, showPoweredByNyris } = settings;
   const showApp = !auth0.enabled || (auth0.enabled && isAuthenticated);
   i18n.changeLanguage(language);
 
@@ -103,35 +97,6 @@ function Layout({ children }: ReactNode): JSX.Element {
     HeaderApp = Header;
   }
 
-  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,
-            })),
-          });
-        }
-        return searchClient.search(requests);
-      },
-    };
-  }, [apiKey, appId, indexName]);
-
   // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
   let vh = window.innerHeight * 0.01;
   // Then we set the value in the --vh custom property to the root of the document
@@ -157,16 +122,7 @@ function Layout({ children }: ReactNode): JSX.Element {
           <Loading />
         </Box>
       )}
-      <InstantSearch
-        indexName={indexName}
-        searchClient={conditionalQuery}
-        searchState={valueTextSearch}
-        onSearchStateChange={state => {
-          if (state.page && state.query !== undefined) {
-            dispatch(changeValueTextSearch(state));
-          }
-        }}
-      >
+      <InstantSearchProvider>
         {isMobile && showApp && <AppMobile>{children}</AppMobile>}
         {!isMobile && showApp && (
           <div className={`layout-main-${classNameBoxVersion}`}>
@@ -199,10 +155,11 @@ function Layout({ children }: ReactNode): JSX.Element {
                 <FooterApp />
               </div>
             )}
+            {showPoweredByNyris && <PoweredByNyris />}
           </div>
         )}
         {!showApp && <> {children}</>}
-      </InstantSearch>
+      </InstantSearchProvider>
     </div>
   );
 }

package/src/components/NoAccess.tsx

@@ -0,0 +1,66 @@
+import { useAppSelector } from 'Store/Store';
+import React from 'react';
+
+import { useMediaQuery } from 'react-responsive';
+
+function NoAccess() {
+  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { supportEmail } = useAppSelector(state => state.settings.auth0);
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'white',
+        height: '100%',
+        paddingLeft: isMobile ? '32px' : '64px',
+        paddingTop: isMobile ? '24px' : '32px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+      }}
+    >
+      <div
+        style={{
+          fontSize: '20px',
+          fontWeight: 'bold',
+          color: '#2B2C46',
+        }}
+      >
+        Email verification is required
+      </div>
+
+      <div
+        style={{
+          width: '200px',
+          height: '4px',
+          background: '#3E36DC',
+          borderRadius: '4px',
+        }}
+      />
+
+      <p style={{ color: '#2B2C46', fontSize: '13px' }}>
+        Please verify your email for access to the Search Suite. If you haven't
+        received your verification email yet, contact support.
+      </p>
+      <a
+        className="contact-support"
+        style={{
+          backgroundColor: '#2B2C46',
+          padding: '8px 16px 8px 16px',
+          color: '#fff',
+          border: 'none',
+          cursor: 'pointer',
+          fontSize: '14px',
+          width: 'fit-content',
+        }}
+        href={`mailto:${
+          supportEmail || 'support@nyris.io'
+        }?subject=Resend Email Verification&body=`}
+      >
+        Contact Support
+      </a>
+    </div>
+  );
+}
+
+export default NoAccess;

package/src/components/PoweredByNyris.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { ReactComponent as PoweredByNyrisImage } from 'common/assets/images/powered_by_nyris.svg';
+import { ReactComponent as PoweredByNyrisImageColored } from 'common/assets/images/powered_by_nyris_colored.svg';
+
+function PoweredByNyris() {
+  const [isHovered, setHovered] = useState(false);
+
+  const handleMouseOver = () => {
+    setHovered(true);
+  };
+
+  const handleMouseOut = () => {
+    setHovered(false);
+  };
+
+  return (
+    <div
+      className="powered-by-nyris"
+      style={{
+        display: 'flex',
+        padding: '9px 0px',
+        justifyContent: 'center',
+        borderTop: '1px solid #E0E0E0',
+      }}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      {isHovered && (
+        <PoweredByNyrisImageColored
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            window.open('https://www.nyris.io', '_blank');
+          }}
+        />
+      )}
+      {!isHovered && (
+        <PoweredByNyrisImage
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            window.open('https://www.nyris.io', '_blank');
+          }}
+          color="#2B2C46"
+        />
+      )}
+    </div>
+  );
+}
+
+export default PoweredByNyris;

package/src/components/ProductDetailView.tsx

@@ -20,6 +20,7 @@ import { useTranslation } from 'react-i18next';
 import ProductAttribute from './ProductAttribute';
 import CadenasWebViewer from './CadenasWebViewer';
 import { makeStyles } from '@material-ui/core/styles';
+import { get } from 'lodash';
 
 const useStyles = makeStyles(theme => ({
   buttonStyle3D: {
@@ -58,7 +59,7 @@ function ProductDetailView(props: Props) {
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const { settings } = useAppSelector<AppState>((state: any) => state);
   const brand = dataItem[settings.field.productTag];
-  const ctaLink = dataItem[settings.field?.ctaLinkField];
+
   const [collapDescription, setCollapDescription] = useState(false);
   const [feedback, setFeedback] = useState('none');
   const [is3dView, setIs3dView] = useState(show3dView);
@@ -70,6 +71,11 @@ function ProductDetailView(props: Props) {
   const { t } = useTranslation();
   const classes = useStyles(props?.show3dView);
 
+  const ctaLink = get(
+    dataItem,
+    settings.field?.ctaLinkField ? settings.field?.ctaLinkField : 'links.main',
+  );
+
   useEffect(() => {
     if (dataItem) {
       checkDataItemResult(dataItem);
@@ -155,13 +161,16 @@ function ProductDetailView(props: Props) {
             height: is3dView ? '0px' : !isMobile ? '60%' : '368px',
             opacity: is3dView ? 0 : 1,
             transition: !is3dView ? 'opacity 3s ease' : '',
-            paddingTop: '16px',
+            paddingTop: !is3dView ? '16px' : '0px',
           }}
         >
           {dataImageCarousel.length > 0 && (
-            <ImagePreviewCarousel imgItem={dataImageCarousel} setSelectedImage={(url) => {
-              setUrlImage(url ? url : urlImage);
-            }} />
+            <ImagePreviewCarousel
+              imgItem={dataImageCarousel}
+              setSelectedImage={url => {
+                setUrlImage(url ? url : urlImage);
+              }}
+            />
           )}
           {dataImageCarousel.length > 0 && (
             <Button
@@ -215,7 +224,7 @@ function ProductDetailView(props: Props) {
           style={{
             position: 'absolute',
             left: '16px',
-            bottom: isMobile ? '25px' : '10px'
+            bottom: isMobile ? '25px' : '10px',
           }}
         >
           {!is3dView &&
@@ -427,10 +436,7 @@ function ProductDetailView(props: Props) {
                     }}
                     onClick={() => {
                       if (ctaLink) {
-                        window.open(
-                          `${dataItem[settings.field.ctaLinkField]}`,
-                          '_blank',
-                        );
+                        window.open(`${ctaLink}`, '_blank');
                       }
                     }}
                   >

package/src/components/ProductList/index.tsx

@@ -1,12 +1,12 @@
 import { Box } from '@material-ui/core';
 import ItemResult from 'components/results/ItemResult';
-import { groupBy, uniqueId } from 'lodash';
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connectStateResults } from 'react-instantsearch-dom';
 import { useMediaQuery } from 'react-responsive';
 import { useAppSelector } from 'Store/Store';
 import { AppState } from 'types';
+import { useProductList } from './useProductList';
 
 interface Props {
   allSearchResults: any;
@@ -29,106 +29,29 @@ function ProductListComponent({
 }: any): JSX.Element {
   const { search, settings } = useAppSelector<AppState>((state: any) => state);
   const { loadingSearchAlgolia } = search;
-  const [hitGroups, setHitGroups] = useState<any>({});
-  const [itemShowDefault, setItemShowDefault] = useState<any[]>([]);
-  const [algoliaRequest, setAlgoliaRequest] = useState(false);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const { t } = useTranslation();
-
-  useEffect(() => {
-    if (isSearchStalled) {
-      setAlgoliaRequest(true);
-    }
-  }, [isSearchStalled]);
-
-  useEffect(() => {
-    if (!allSearchResults?.hits?.length) {
-      setItemShowDefault([]);
-      return;
-    }
-    setAlgoliaRequest(false);
-    const listHistDefaultGroups = settings.showGroup
-      ? setListHitDefault(allSearchResults?.hits)
-      : allSearchResults?.hits;
-    setItemShowDefault(listHistDefaultGroups);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allSearchResults?.hits, search?.valueTextSearch]);
-
-  const setListHitDefault = (hits: any) => {
-    let newArrayShowGroup: any = [];
-    let newArrayShowItem: any = [];
-
-    const groupHits = hits.map((hit: { group_id: string }) => {
-      if (!hit.group_id) {
-        return { ...hit, group_id: uniqueId('random-group-id') };
-      }
-      return hit;
+  const { productList, handlerCloseGroup, handlerGroupItem, algoliaRequest } =
+    useProductList({
+      allSearchResults,
     });
 
-    const groups = groupBy(groupHits, 'group_id');
-    setHitGroups(groups);
-    newArrayShowGroup = Object.values(groups);
-    if (newArrayShowGroup.length === 0) {
-      return hits;
-    }
-    newArrayShowGroup.forEach((item: any) => {
-      let payload: any;
-      if (item.length >= 2) {
-        payload = {
-          ...item[0],
-          isGroup: true,
-          collap: true,
-        };
-        newArrayShowItem.push(payload);
-      } else {
-        payload = {
-          ...item[0],
-          isGroup: false,
-          collap: null,
-        };
-        newArrayShowItem.push(payload);
-      }
-    });
-
-    return newArrayShowItem;
-  };
-
-  const handlerGroupItem = (hit: any, index: number) => {
-    const group_id = hit.group_id;
-    let newItemList = [...itemShowDefault];
-    const firstArr = newItemList.slice(0, index + 1);
-    firstArr.filter(item => item.group_id === group_id)[0].collap = false;
-    let secondArr = newItemList.slice(index + 1, newItemList.length);
-    let otherItemsInGroup = [...hitGroups[group_id]];
-    otherItemsInGroup.shift();
-    secondArr = otherItemsInGroup.concat(secondArr);
-    setItemShowDefault(firstArr.concat(secondArr));
-  };
-  const handlerCloseGroup = (hit: any, index: number) => {
-    const group_id = hit.group_id;
-    let newItemList = [...itemShowDefault];
-    const firstArr = newItemList.slice(0, index + 1);
-    firstArr.filter(item => item.group_id === group_id)[0].collap = true;
-    let secondArr = newItemList.slice(index + 1, newItemList.length);
-    secondArr = secondArr.filter(item => {
-      return item.group_id !== group_id;
-    });
-    setItemShowDefault(firstArr.concat(secondArr));
-  };
-
   const renderItem = useMemo(() => {
-    if (!requestImage && !search.valueTextSearch.query && !isSearchStalled) {
+    if (
+      !requestImage &&
+      !search.valueTextSearch.query &&
+      !searchQuery &&
+      !isSearchStalled
+    ) {
       return (
         <Box style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
           {t('Please upload an image or enter a keyword to search.')}
         </Box>
       );
-    }
-    if (
-      itemShowDefault.length === 0 &&
+    } else if (
+      productList.length === 0 &&
       !loadingSearchAlgolia &&
-      !isSearchStalled &&
-      (algoliaRequest || requestImage)
+      !isSearchStalled
     ) {
       return (
         <Box style={{ marginTop: '50px', width: '100%', textAlign: 'center' }}>
@@ -136,7 +59,7 @@ function ProductListComponent({
         </Box>
       );
     }
-    return itemShowDefault.map((hit: any, i: number) => {
+    return productList.map((hit: any, i: number) => {
       return (
         <Box key={i} style={{ height: 'fit-content' }}>
           <ItemResult
@@ -166,7 +89,7 @@ function ProductListComponent({
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    itemShowDefault,
+    productList,
     searchQuery,
     requestImage,
     search.valueTextSearch,

package/src/components/ProductList/useProductList.ts

@@ -0,0 +1,114 @@
+import { useAppSelector } from 'Store/Store';
+import { groupBy, uniqueId } from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+
+export const useProductList = ({ allSearchResults, isSearchStalled }: any) => {
+  const { search, settings } = useAppSelector(state => state);
+  const { valueTextSearch, results } = search || {};
+  const { showGroup, algolia } = settings || {};
+  const [itemShowDefault, setItemShowDefault] = useState<any[]>([]);
+  const [algoliaRequest, setAlgoliaRequest] = useState(false);
+  const [hitGroups, setHitGroups] = useState<any>({});
+
+  const setListHitDefault = (hits: any) => {
+    let newArrayShowGroup: any = [];
+    let newArrayShowItem: any = [];
+
+    const groupHits = hits.map((hit: { group_id: string }) => {
+      if (!hit.group_id) {
+        return { ...hit, group_id: uniqueId('random-group-id') };
+      }
+      return hit;
+    });
+
+    const groups = groupBy(groupHits, 'group_id');
+    setHitGroups(groups);
+    newArrayShowGroup = Object.values(groups);
+    if (newArrayShowGroup?.length === 0) {
+      return hits;
+    }
+    newArrayShowGroup.forEach((item: any) => {
+      let payload: any;
+      if (item?.length >= 2) {
+        payload = {
+          ...item[0],
+          isGroup: true,
+          collap: true,
+        };
+        newArrayShowItem.push(payload);
+      } else {
+        payload = {
+          ...item[0],
+          isGroup: false,
+          collap: null,
+        };
+        newArrayShowItem.push(payload);
+      }
+    });
+
+    return newArrayShowItem;
+  };
+
+  const handlerGroupItem = (hit: any, index: number) => {
+    const group_id = hit.group_id;
+    let newItemList = [...itemShowDefault];
+    const firstArr = newItemList.slice(0, index + 1);
+    firstArr.filter(item => item.group_id === group_id)[0].collap = false;
+    let secondArr = newItemList.slice(index + 1, newItemList.length);
+    let otherItemsInGroup = [...hitGroups[group_id]];
+    otherItemsInGroup.shift();
+    secondArr = otherItemsInGroup.concat(secondArr);
+    setItemShowDefault(firstArr.concat(secondArr));
+  };
+  const handlerCloseGroup = (hit: any, index: number) => {
+    const group_id = hit.group_id;
+    let newItemList = [...itemShowDefault];
+    const firstArr = newItemList.slice(0, index + 1);
+    firstArr.filter(item => item.group_id === group_id)[0].collap = true;
+    let secondArr = newItemList.slice(index + 1, newItemList.length);
+    secondArr = secondArr.filter(item => {
+      return item.group_id !== group_id;
+    });
+    setItemShowDefault(firstArr.concat(secondArr));
+  };
+
+  useEffect(() => {
+    if (!allSearchResults?.hits?.length) {
+      setItemShowDefault([]);
+      return;
+    }
+    setAlgoliaRequest(false);
+    const listHistDefaultGroups = showGroup
+      ? setListHitDefault(allSearchResults?.hits)
+      : allSearchResults?.hits;
+    setItemShowDefault(listHistDefaultGroups);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allSearchResults?.hits, valueTextSearch]);
+
+  useEffect(() => {
+    if (isSearchStalled) {
+      setAlgoliaRequest(true);
+    }
+  }, [isSearchStalled]);
+
+  const productList = useMemo(() => {
+    return results?.map((item: any) => {
+      return {
+        ...item,
+        main_image_link: item.image || item.images ? item.images[0] : '',
+      };
+    });
+  }, [results]);
+
+  return {
+    productList: algolia?.enabled ? itemShowDefault : productList || [],
+    handlerGroupItem,
+    handlerCloseGroup,
+    algoliaRequest,
+    isLoading: false,
+    hasError: false,
+    errorMessage: '',
+    loadProductList: () => {},
+    reset: () => {},
+  };
+};