@nyris/nyris-webapp 0.3.41 → 0.3.43

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';
@@ -26,11 +19,13 @@ import Loading from './Loading';
 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;
 
 jQuery(document).ready(function () {
-  psol.core.setApiKey('66c56a38010f4a81a82f6ed51c903399');
   psol.core.setUserInfo({
     server_type: 'oem_apps_cadenas_webcomponentsdemo',
     title: 'Herr',
@@ -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();
@@ -69,7 +63,9 @@ function Layout({ children }: ReactNode): JSX.Element {
     (isMobile && history.location?.pathname === '/result') ||
     history.location?.pathname === '/';
   const language = useAppSelector(state => state.settings.language);
-
+  const { isAuthenticated } = useAuth0();
+  const { auth0, showPoweredByNyris } = settings;
+  const showApp = !auth0.enabled || (auth0.enabled && isAuthenticated);
   i18n.changeLanguage(language);
 
   useEffect(() => {
@@ -101,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
@@ -155,18 +122,9 @@ 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));
-          }
-        }}
-      >
-        {isMobile && <AppMobile>{children}</AppMobile>}
-        {!isMobile && (
+      <InstantSearchProvider>
+        {isMobile && showApp && <AppMobile>{children}</AppMobile>}
+        {!isMobile && showApp && (
           <div className={`layout-main-${classNameBoxVersion}`}>
             <div
               className={
@@ -197,9 +155,11 @@ function Layout({ children }: ReactNode): JSX.Element {
                 <FooterApp />
               </div>
             )}
+            {showPoweredByNyris && <PoweredByNyris />}
           </div>
         )}
-      </InstantSearch>
+        {!showApp && <> {children}</>}
+      </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,11 +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} />
+            <ImagePreviewCarousel
+              imgItem={dataImageCarousel}
+              setSelectedImage={url => {
+                setUrlImage(url ? url : urlImage);
+              }}
+            />
           )}
           {dataImageCarousel.length > 0 && (
             <Button
@@ -175,6 +186,7 @@ function ProductDetailView(props: Props) {
                 justifyContent: 'center',
                 alignItems: 'center',
                 cursor: 'pointer',
+                bottom: isMobile ? '25px' : '4px',
               }}
               onClick={() => {
                 if (urlImage.length > 1) {
@@ -212,6 +224,7 @@ function ProductDetailView(props: Props) {
           style={{
             position: 'absolute',
             left: '16px',
+            bottom: isMobile ? '25px' : '10px',
           }}
         >
           {!is3dView &&
@@ -423,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: () => {},
+  };
+};

package/src/components/Provider/AuthProvider.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Auth0Provider } from '@auth0/auth0-react';
+import { useAppSelector } from 'Store/Store';
+
+const AuthProvider = ({ children }: any) => {
+  const settings = useAppSelector(state => state.settings);
+
+  if (!settings.auth0.enabled) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Auth0Provider
+      domain={settings.auth0.domain || ''}
+      clientId={settings.auth0.clientId || ''}
+      authorizationParams={{
+        redirect_uri: window.location.origin,
+      }}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};
+
+export default AuthProvider;

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%;