@nyris/nyris-webapp 0.3.40 → 0.3.42

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.40",
+  "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.40",
-    "@nyris/nyris-react-components": "^0.3.40",
+    "@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,
@@ -17,6 +18,7 @@ export const defaultSettings: AppSettings = {
     '^https?://(www.)?dai.ly/',
   ],
   theme: {},
+  templateId: '',
   field: {
     ctaLinkField: '',
     productName: '',

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/Inquiry/InquiryModal.tsx

@@ -77,71 +77,72 @@ export default function InquiryModal({
       ? getCroppedCanvas(canvas, selectedRegion)
       : null;
     const serviceId = 'service_zfsxshi';
-    const templateId = 'template_rxsi7w9';
     setIsInquiryModalOpen(false);
-    try {
-      setInquiryStatus('loading');
-      await emailjs.send(serviceId, templateId, {
-        email_id: email.trim(),
-        information_text: information,
-        request_image: croppedImage?.toDataURL(),
-        prefilter_values: preFilterValues.join(', '),
-      });
-      setInquiryStatus('sent');
-      ToastHelper.success('Request sent successfully');
-    } catch (error) {
-      setInquiryStatus('inactive');
+    if (settings.templateId) {
+      try {
+        setInquiryStatus('loading');
+        await emailjs.send(serviceId, settings.templateId, {
+          email_id: email.trim(),
+          information_text: information,
+          request_image: croppedImage?.toDataURL(),
+          prefilter_values: preFilterValues.join(', '),
+        });
+        setInquiryStatus('sent');
+        ToastHelper.success('Request sent successfully');
+      } catch (error) {
+        setInquiryStatus('inactive');
 
-      toast(
-        t => {
-          return (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                fontSize: '14px',
-                width: '294px',
-              }}
-            >
-              <span style={{ fontWeight: 'bold' }}>Email not sent</span>
-              <span>{getErrorMessage(error)}</span>
-              <a
-                href={`mailto:support@nyris.io?subject=Request for quotation&body=${encodeURIComponent(`Hello,
+        toast(
+          t => {
+            return (
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  fontSize: '14px',
+                  width: '294px',
+                }}
+              >
+                <span style={{ fontWeight: 'bold' }}>Email not sent</span>
+                <span>{getErrorMessage(error)}</span>
+                <a
+                  href={`mailto:support@nyris.io?subject=Request for quotation&body=${encodeURIComponent(`Hello,
           I filled out the support form on the Search Suite, but it failed. I inquired the following:
           email:
           Pre-filter:
           Additional Text: `)}`}
-                style={{
-                  padding: '8px 16px 8px 16px',
-                  border: '1px solid #000',
-                  marginTop: '16px',
-                  backgroundColor: 'transparent',
-                  color: '#000',
-                  cursor: 'pointer',
-                  width: 'fit-content',
-                }}
-              >
-                support@nyris.io
-              </a>
-            </div>
-          );
-        },
-        {
-          duration: 5000,
-          style: {
-            background: '#FFE5EF',
-            color: '#000000',
-            maxWidth: '400px',
+                  style={{
+                    padding: '8px 16px 8px 16px',
+                    border: '1px solid #000',
+                    marginTop: '16px',
+                    backgroundColor: 'transparent',
+                    color: '#000',
+                    cursor: 'pointer',
+                    width: 'fit-content',
+                  }}
+                >
+                  support@nyris.io
+                </a>
+              </div>
+            );
           },
-          icon: (
-            <div style={{ minWidth: '20px', minHeight: '20px' }}>
-              <ErrorIcon />
-            </div>
-          ),
-        },
-      );
+          {
+            duration: 5000,
+            style: {
+              background: '#FFE5EF',
+              color: '#000000',
+              maxWidth: '400px',
+            },
+            icon: (
+              <div style={{ minWidth: '20px', minHeight: '20px' }}>
+                <ErrorIcon />
+              </div>
+            ),
+          },
+        );
+      }
+      setIsInquiryModalOpen(false);
     }
-    setIsInquiryModalOpen(false);
   };
 
   return (

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/components/rfq/RfqModal.tsx

@@ -9,6 +9,7 @@ import { TextareaAutosize } from '@material-ui/core';
 import toast from 'react-hot-toast';
 import { ReactComponent as ErrorIcon } from 'common/assets/icons/error.svg';
 import { useMediaQuery } from 'react-responsive';
+import { useAppSelector } from '../../Store/Store';
 interface Props {
   requestImage: any;
   selectedRegion: any;
@@ -43,6 +44,7 @@ export default function RfqModal({
   const [email, setEmail] = useState('');
   const [emailValid, setEmailValid] = useState<boolean | undefined>(undefined);
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
+  const { settings } = useAppSelector(state => state);
 
   const [information, setInformation] = useState('');
   const setFormattedContent = React.useCallback(
@@ -62,66 +64,67 @@ export default function RfqModal({
     const { canvas }: any = requestImage;
     const croppedImage = getCroppedCanvas(canvas, selectedRegion);
     const serviceId = 'service_zfsxshi';
-    const templateId = 'template_jlgc9le';
     setIsRfqModalOpen(false);
-    try {
-      setRfqStatus('loading');
-      await emailjs.send(serviceId, templateId, {
-        email_id: email.trim(),
-        information_text: information,
-        request_image: croppedImage?.toDataURL(),
-      });
-      setRfqStatus('sent');
-      ToastHelper.success('Request sent successfully');
-    } catch (error) {
-      setRfqStatus('inactive');
+    if (settings.templateId) {
+      try {
+        setRfqStatus('loading');
+        await emailjs.send(serviceId, settings.templateId, {
+          email_id: email.trim(),
+          information_text: information,
+          request_image: croppedImage?.toDataURL(),
+        });
+        setRfqStatus('sent');
+        ToastHelper.success('Request sent successfully');
+      } catch (error) {
+        setRfqStatus('inactive');
 
-      toast(
-        t => {
-          return (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                fontSize: '14px',
-                width: '294px',
-              }}
-            >
-              <span style={{ fontWeight: 'bold' }}>Email not sent</span>
-              <span>{getErrorMessage(error)}</span>
-              <a
-                href={`mailto:support@nyris.io?subject=Request for quotation&body=${information}`}
+        toast(
+          t => {
+            return (
+              <div
                 style={{
-                  padding: '8px 16px 8px 16px',
-                  border: '1px solid #000',
-                  marginTop: '16px',
-                  backgroundColor: 'transparent',
-                  color: '#000',
-                  cursor: 'pointer',
-                  width: 'fit-content',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  fontSize: '14px',
+                  width: '294px',
                 }}
               >
-                support@nyris.io
-              </a>
-            </div>
-          );
-        },
-        {
-          duration: 5000,
-          style: {
-            background: '#FFE5EF',
-            color: '#000000',
-            maxWidth: '400px',
+                <span style={{fontWeight: 'bold'}}>Email not sent</span>
+                <span>{getErrorMessage(error)}</span>
+                <a
+                  href={`mailto:support@nyris.io?subject=Request for quotation&body=${information}`}
+                  style={{
+                    padding: '8px 16px 8px 16px',
+                    border: '1px solid #000',
+                    marginTop: '16px',
+                    backgroundColor: 'transparent',
+                    color: '#000',
+                    cursor: 'pointer',
+                    width: 'fit-content',
+                  }}
+                >
+                  support@nyris.io
+                </a>
+              </div>
+            );
           },
-          icon: (
-            <div style={{ minWidth: '20px', minHeight: '20px' }}>
-              <ErrorIcon />
-            </div>
-          ),
-        },
-      );
+          {
+            duration: 5000,
+            style: {
+              background: '#FFE5EF',
+              color: '#000000',
+              maxWidth: '400px',
+            },
+            icon: (
+              <div style={{minWidth: '20px', minHeight: '20px'}}>
+                <ErrorIcon/>
+              </div>
+            ),
+          },
+        );
+      }
+      setIsRfqModalOpen(false);
     }
-    setIsRfqModalOpen(false);
   };
 
   return (

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'),