@nyris/nyris-webapp 0.3.41 → 0.3.42

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.41",
+  "version": "0.3.42",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
     "@algolia/autocomplete-plugin-query-suggestions": "^1.7.1",
     "@algolia/autocomplete-plugin-recent-searches": "^1.7.1",
     "@algolia/autocomplete-theme-classic": "^1.7.1",
+    "@auth0/auth0-react": "^2.2.1",
     "@babel/runtime": "^7.17.2",
     "@material-ui/core": "^4.3.3",
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.41",
-    "@nyris/nyris-react-components": "^0.3.41",
+    "@nyris/nyris-api": "^0.3.42",
+    "@nyris/nyris-react-components": "^0.3.42",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",

package/public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

package/src/App.tsx

@@ -7,25 +7,8 @@ import 'index.css';
 import { useMediaQuery } from 'react-responsive';
 import AppMD from 'page/landingPage/AppMD';
 import AppMobile from 'page/landingPage/AppMobile';
-// import i18n from 'i18next';
-// import { initReactI18next } from 'react-i18next';
-// import { useAppSelector } from 'Store/Store';
-// import { translations } from 'translations';
-
-// i18n.use(initReactI18next).init({
-//   resources: translations,
-//   fallbackLng: 'en',
-//   interpolation: {
-//     escapeValue: false,
-//   },
-//   returnNull: false,
-// });
 
 function App(): JSX.Element {
-  // const language = useAppSelector(state => state.settings.language);
-
-  // i18n.changeLanguage(language);
-
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   let SelectedApp: any = isMobile ? AppMobile : AppMD;
 

package/src/Router.tsx

@@ -1,52 +1,28 @@
 import React, { memo } from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import Layout from 'components/Layout';
-import { ReactNode } from 'components/common';
 import App from 'App';
 import ResultComponent from 'page/result';
-
-interface PrivateRouteProps {
-  component: ReactNode;
-  authed: boolean;
-  [key: string]: any;
-}
-
-const PrivateRoute = ({
-  component: Component,
-  authed,
-  ...rest
-}: PrivateRouteProps) => {
-  return (
-    <Route
-      {...rest}
-      render={() => (authed ? <Component /> : <Redirect to="/login" />)}
-    />
-  );
-};
+import AuthenticatedRoute from 'components/AuthenticatedRoute';
+import Login from 'page/Login';
+import Logout from 'page/Logout';
 
 function Router(): JSX.Element {
-  const accessToken = true;
-
   return (
     <Switch>
-      <Layout>
-        <Switch>
-          <PrivateRoute
-            authed={!!accessToken}
-            exact
-            strict
-            path="/"
-            component={App}
-          />
-          <PrivateRoute
-            authed={!!accessToken}
+      <Switch>
+        <Route path={'/login'} exact component={Login} />
+        <Route path={'/logout'} exact component={Logout} />
+        <Layout>
+          <AuthenticatedRoute exact strict path="/" component={App} />
+          <AuthenticatedRoute
             exact
             strict
             path="/result"
             component={ResultComponent}
           />
-        </Switch>
-      </Layout>
+        </Layout>
+      </Switch>
     </Switch>
   );
 }

package/src/Store/constants.ts

@@ -1,6 +1,7 @@
 import { AppSettings } from '../types';
 
 export const defaultSettings: AppSettings = {
+  auth0: {},
   xOptions: false,
   apiKey: 'UNSET',
   preview: true,

package/src/components/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/AuthenticatedRoute.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { Route } from 'react-router-dom';
+import { useAppSelector } from 'Store/Store';
+
+const AuthenticatedRoute = ({ component, ...rest }: any) => {
+  const { auth0 } = useAppSelector(state => state.settings);
+
+  const { user, isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
+
+  useEffect(() => {
+    if (!isLoading && !user && !isAuthenticated && auth0.enabled) {
+      loginWithRedirect();
+    }
+  }, [loginWithRedirect, isLoading, user, isAuthenticated, auth0]);
+
+  const Component = component;
+
+  return (
+    <Route
+      {...rest}
+      render={props => {
+        if (!auth0.enabled) {
+          return <Component {...props} />;
+        } else if (isAuthenticated) {
+          return <Component {...props} />;
+        } else {
+          return <div></div>;
+        }
+      }}
+    />
+  );
+};
+
+export default AuthenticatedRoute;

package/src/components/CadenasWebViewer.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import { ReactComponent as DownloadIcon } from 'common/assets/icons/download.svg';
 import CadenasLoading from './CadenasLoading';
+import { useAppSelector } from '../Store/Store';
 
 declare const psol: any;
 
@@ -27,6 +28,7 @@ function CadenasWebViewer({
 }) {
   const [mident, setMident] = useState('');
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { settings } = useAppSelector(state => state);
 
   useEffect(() => {
     // prepare 3d viewer settings.
@@ -72,13 +74,14 @@ function CadenasWebViewer({
 
     // initialize 3d viewer
     let webviewer3d = new psol.components.WebViewer3D(webViewer3DSettings);
+    psol.core.setApiKey(settings.cadenasAPIKey);
     setStatus3dView('loading');
     // run search and display result in 3D viewer.
     psol.core
       .ajaxGetOrPost({
         url: psol.core.getServiceBaseUrl() + '/service/reversemap',
         data: {
-          catalog: 'ganter',
+          catalog: settings.catalog,
           part: sku,
           exact: '0',
         },
@@ -98,7 +101,7 @@ function CadenasWebViewer({
             });
         });
       });
-  }, [sku, setStatus3dView]);
+  }, [sku, setStatus3dView, settings]);
 
   const showWebViewer = !is3dView || status3dView !== 'loaded';
 

package/src/components/Layout.tsx

@@ -26,11 +26,11 @@ import Loading from './Loading';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { translations } from 'translations';
+import { useAuth0 } from '@auth0/auth0-react';
 
 declare var psol: any;
 
 jQuery(document).ready(function () {
-  psol.core.setApiKey('66c56a38010f4a81a82f6ed51c903399');
   psol.core.setUserInfo({
     server_type: 'oem_apps_cadenas_webcomponentsdemo',
     title: 'Herr',
@@ -69,7 +69,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 } = settings;
+  const showApp = !auth0.enabled || (auth0.enabled && isAuthenticated);
   i18n.changeLanguage(language);
 
   useEffect(() => {
@@ -165,8 +167,8 @@ function Layout({ children }: ReactNode): JSX.Element {
           }
         }}
       >
-        {isMobile && <AppMobile>{children}</AppMobile>}
-        {!isMobile && (
+        {isMobile && showApp && <AppMobile>{children}</AppMobile>}
+        {!isMobile && showApp && (
           <div className={`layout-main-${classNameBoxVersion}`}>
             <div
               className={
@@ -199,6 +201,7 @@ function Layout({ children }: ReactNode): JSX.Element {
             )}
           </div>
         )}
+        {!showApp && <> {children}</>}
       </InstantSearch>
     </div>
   );

package/src/components/ProductDetailView.tsx

@@ -159,7 +159,9 @@ function ProductDetailView(props: Props) {
           }}
         >
           {dataImageCarousel.length > 0 && (
-            <ImagePreviewCarousel imgItem={dataImageCarousel} />
+            <ImagePreviewCarousel imgItem={dataImageCarousel} setSelectedImage={(url) => {
+              setUrlImage(url ? url : urlImage);
+            }} />
           )}
           {dataImageCarousel.length > 0 && (
             <Button
@@ -175,6 +177,7 @@ function ProductDetailView(props: Props) {
                 justifyContent: 'center',
                 alignItems: 'center',
                 cursor: 'pointer',
+                bottom: isMobile ? '25px' : '4px',
               }}
               onClick={() => {
                 if (urlImage.length > 1) {
@@ -212,6 +215,7 @@ function ProductDetailView(props: Props) {
           style={{
             position: 'absolute',
             left: '16px',
+            bottom: isMobile ? '25px' : '10px'
           }}
         >
           {!is3dView &&

package/src/components/carousel/ImagePreviewCarousel.tsx

@@ -9,17 +9,18 @@ interface Props {
   imgItem: any[];
   onSearchImage?: any;
   handlerCloseModal?: any;
+  setSelectedImage: (url: string) => void;
 }
 
 export const ImagePreviewCarousel = (props: Props) => {
-  let { imgItem } = props;
+  let { imgItem, setSelectedImage } = props;
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const mainRef: any = useRef(null);
   const thumbsRef: any = useRef(null);
 
   const maxWidth = useMemo(() => {
     const contentWidth = 75 + 58 * imgItem.length;
-    const modalWidth = isMobile ? 340 : 600;
+    const modalWidth = isMobile ? 240 : 460;
     return contentWidth < modalWidth ? contentWidth : modalWidth;
   }, [imgItem.length, isMobile]);
 
@@ -74,6 +75,9 @@ export const ImagePreviewCarousel = (props: Props) => {
   return (
     <>
       <Splide
+        onActive={(e: any) => {
+          setSelectedImage(e?.root?.querySelector('li.is-active')?.querySelector('img')?.src)
+        }}
         options={mainOptions}
         ref={mainRef}
         style={{ maxWidth: '100%', height: isMobile ? '80%' : '' }}

package/src/components/rfq/RfqBanner.tsx

@@ -31,7 +31,6 @@ function RfqBanner({
         alignItems: 'center',
       }}
       className="rfq-box"
-      // ref={rfqRef}
     >
       <Box
         style={{

package/src/index.tsx

@@ -7,12 +7,13 @@ import * as serviceWorker from './serviceWorker';
 import { Provider } from 'react-redux';
 import { MuiThemeProvider } from '@material-ui/core';
 import 'typeface-roboto';
-import { HashRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import Router from 'Router';
 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';
 
 document.title = window.location.host;
 
@@ -33,11 +34,13 @@ ReactDOM.render(
   <Fragment>
     <Toaster />
     <Provider store={store}>
-      <MuiThemeProvider theme={theme}>
-        <HashRouter>
-          <Router />
-        </HashRouter>
-      </MuiThemeProvider>
+      <AuthProvider>
+        <MuiThemeProvider theme={theme}>
+          <BrowserRouter>
+            <Router />
+          </BrowserRouter>
+        </MuiThemeProvider>
+      </AuthProvider>
     </Provider>
   </Fragment>,
   document.getElementById('root'),

package/src/page/Login.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { useAppSelector } from 'Store/Store';
+
+const Login = () => {
+  const { user, isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
+  const { auth0 } = useAppSelector(state => state.settings);
+
+  useEffect(() => {
+    if (!isLoading && !user && !isAuthenticated && auth0.enabled) {
+      loginWithRedirect();
+    }
+    if (isAuthenticated || !auth0.enabled) {
+      window.location.href = '/';
+    }
+  }, [loginWithRedirect, isLoading, user, isAuthenticated, auth0]);
+
+  return <div></div>;
+};
+
+export default Login;

package/src/page/Logout.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+import { useAppSelector } from 'Store/Store';
+
+const Logout = () => {
+  const { user, isAuthenticated, isLoading, loginWithRedirect, logout } =
+    useAuth0();
+  const { auth0 } = useAppSelector(state => state.settings);
+
+  useEffect(() => {
+    if (!isLoading && !user && !isAuthenticated && auth0.enabled) {
+      loginWithRedirect();
+    } else if (isAuthenticated) {
+      logout({ logoutParams: { returnTo: window.location.origin } });
+    } else if (!auth0.enabled) {
+      window.location.href = '/';
+    }
+  }, [loginWithRedirect, isAuthenticated, isLoading, user, logout, auth0]);
+
+  return <div></div>;
+};
+
+export default Logout;

package/src/types.ts

@@ -8,6 +8,12 @@ export interface AlgoliaSettings {
   indexName: string;
 }
 
+export interface Auth0Settings {
+  clientId?: string;
+  domain?: string;
+  enabled?: boolean;
+}
+
 export interface Field {
   ctaLinkField: string;
   productName: string;
@@ -31,28 +37,31 @@ export interface AppSettings extends NyrisAPISettings {
   instantRedirectPatterns: string[];
   theme: SearchSuiteSettings;
   algolia?: AlgoliaSettings;
-  productCtaText?: string;
+  alogoliaFilterField?: string;
   appTitle?: string;
-  refinements?: any;
-  showGroup?: boolean;
-  preFilterOption?: boolean;
+  auth0: Auth0Settings;
+  brandName?: string;
   cadenas3dWebView?: boolean;
-  rfq?: boolean;
+  catalog?: string;
+  cadenasAPIKey?: string;
+  field: Field;
+  headerText?: string;
   inquiry?: boolean;
-  templateId?: string;
-  warehouseVariant?: boolean;
-  preFilterTitle?: string;
+  itemIdLabel?: string;
+  language?: string;
   postFilterOption?: boolean;
+  preFilterOption?: boolean;
+  preFilterTitle?: string;
+  productCtaText?: string;
+  refinements?: any;
+  rfq?: boolean;
+  shareOption?: boolean;
   showFeedbackAndShare?: boolean;
+  showGroup?: boolean;
   showMoreInfo?: boolean; // deprecated
+  templateId?: string;
   visualSearchFilterKey?: string;
-  alogoliaFilterField?: string;
-  headerText?: string;
-  brandName?: string;
-  shareOption?: boolean;
-  language?: string;
-  itemIdLabel?: string;
-  field: Field;
+  warehouseVariant?: boolean;
 }
 
 export interface SearchSuiteSettings {