- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/App/App.container.jsx

@@ -2,14 +2,15 @@ import { ApolloProvider } from "@apollo/client";
 import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import moment from "moment";
+import dayjs from "../utils/day";
+import 'dayjs/locale/en';
 import React from "react";
 import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 
-moment.locale("en-US");
+dayjs.locale("en");
 
 export const factory = SplitSdk({
   core: {

client/src/App/App.jsx

@@ -1,11 +1,11 @@
-import { useClient } from "@splitsoftware/splitio-react";
-import { Button, Result } from "antd";
+import {useSplitClient} from "@splitsoftware/splitio-react";
+import {Button, Result} from "antd";
 import LogRocket from "logrocket";
-import React, { lazy, Suspense, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { Route, Switch } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
+import React, {lazy, Suspense, useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {Route, Routes} from "react-router-dom";
+import {createStructuredSelector} from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
 import ErrorBoundary from "../components/error-boundary/error-boundary.component";
 //Component Imports
@@ -13,149 +13,136 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
 import LandingPage from "../pages/landing/landing.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
-import { setOnline } from "../redux/application/application.actions";
-import { selectOnline } from "../redux/application/application.selectors";
-import { checkUserSession } from "../redux/user/user.actions";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../redux/user/user.selectors";
-import PrivateRoute from "../utils/private-route";
+import {setOnline} from "../redux/application/application.actions";
+import {selectOnline} from "../redux/application/application.selectors";
+import {checkUserSession} from "../redux/user/user.actions";
+import {selectBodyshop, selectCurrentUser,} from "../redux/user/user.selectors";
+import PrivateRoute from "../components/PrivateRoute";
 import "./App.styles.scss";
+import handleBeta from "../utils/betaHandler";
 
 const ResetPassword = lazy(() =>
-  import("../pages/reset-password/reset-password.component")
+    import("../pages/reset-password/reset-password.component")
 );
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
 const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
 
 const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
 const MobilePaymentContainer = lazy(() =>
-  import("../pages/mobile-payment/mobile-payment.container")
+    import("../pages/mobile-payment/mobile-payment.container")
 );
-
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  online: selectOnline,
-  bodyshop: selectBodyshop,
+    currentUser: selectCurrentUser,
+    online: selectOnline,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  checkUserSession: () => dispatch(checkUserSession()),
-  setOnline: (isOnline) => dispatch(setOnline(isOnline)),
+    checkUserSession: () => dispatch(checkUserSession()),
+    setOnline: (isOnline) => dispatch(setOnline(isOnline)),
 });
 
-export function App({
-  bodyshop,
-  checkUserSession,
-  currentUser,
-  online,
-  setOnline,
-}) {
-  const client = useClient();
+export function App({bodyshop, checkUserSession, currentUser, online, setOnline}) {
 
-  useEffect(() => {
-    if (!navigator.onLine) {
-      setOnline(false);
-    }
+    const client = useSplitClient().client;
+    const [listenersAdded, setListenersAdded] = useState(false)
+    const {t} = useTranslation();
 
-    checkUserSession();
-  }, [checkUserSession, setOnline]);
 
-  //const b = Grid.useBreakpoint();
-  // console.log("Breakpoints:", b);
-
-  const { t } = useTranslation();
-
-  window.addEventListener("offline", function (e) {
-    setOnline(false);
-  });
-
-  window.addEventListener("online", function (e) {
-    setOnline(true);
-  });
-  useEffect(() => {
-    if (currentUser.authorized && bodyshop) {
-      client.setAttribute("imexshopid", bodyshop.imexshopid);
-
-      LogRocket.init("rome-online/rome-online");
-      if (client.getTreatment("LogRocket_Tracking") === "on") {
-        LogRocket.init("rome-online/rome-online");
-      }
-    }
-  }, [bodyshop, client, currentUser.authorized]);
-
-  if (currentUser.authorized === null) {
-    return <LoadingSpinner message={t("general.labels.loggingin")} />;
-  }
-
-  if (!online)
-    return (
-      <Result
-        status="warning"
-        title={t("general.labels.nointernet")}
-        subTitle={t("general.labels.nointernet_sub")}
-        extra={
-          <Button
-            type="primary"
-            onClick={() => {
-              window.location.reload();
-            }}
-          >
-            {t("general.actions.refresh")}
-          </Button>
+    useEffect(() => {
+        if (!navigator.onLine) {
+            setOnline(false);
         }
-      />
-    );
 
-  return (
-    <Switch>
-      <Suspense fallback={<LoadingSpinner />}>
-        <ErrorBoundary>
-          <Route exact path="/" component={LandingPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/signin" component={SignInPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/resetpassword" component={ResetPassword} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/csi/:surveyId" component={CsiPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route exact path="/disclaimer" component={DisclaimerPage} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <Route
-            exact
-            path="/mp/:paymentIs"
-            component={MobilePaymentContainer}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/manage"
-            component={ManagePage}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/tech"
-            component={TechPageContainer}
-          />
-        </ErrorBoundary>
-        <ErrorBoundary>
-          <PrivateRoute
-            isAuthorized={currentUser.authorized}
-            path="/edit"
-            component={DocumentEditorContainer}
-          />
-        </ErrorBoundary>
-      </Suspense>
-    </Switch>
-  );
+        checkUserSession();
+        }, [checkUserSession, setOnline]);
+
+    //const b = Grid.useBreakpoint();
+    // console.log("Breakpoints:", b);
+
+    // Associate event listeners, memoize to prevent multiple listeners being added
+    useEffect(() => {
+        const offlineListener = (e) => {
+            setOnline(false);
+        }
+
+        const onlineListener = (e) => {
+            setOnline(true);
+        }
+
+        if (!listenersAdded) {
+            console.log('Added events for offline and online');
+            window.addEventListener("offline", offlineListener);
+            window.addEventListener("online", onlineListener);
+            setListenersAdded(true);
+        }
+
+        return () => {
+            window.removeEventListener("offline", offlineListener);
+            window.removeEventListener("online", onlineListener);
+        }
+    }, [setOnline, listenersAdded]);
+
+    useEffect(() => {
+        if (currentUser.authorized && bodyshop) {
+            client.setAttribute("imexshopid", bodyshop.imexshopid);
+
+            if (
+                client.getTreatment("LogRocket_Tracking") === "on" ||
+                window.location.hostname === 'beta.romeonline.io'
+            ) {
+                console.log("LR Start");
+                LogRocket.init("rome-online/rome-online");
+            }
+        }
+    }, [bodyshop, client, currentUser.authorized]);
+
+    if (currentUser.authorized === null) {
+        return <LoadingSpinner message={t("general.labels.loggingin")}/>;
+    }
+
+    handleBeta();
+
+    if (!online)
+        return (
+            <Result
+                status="warning"
+                title={t("general.labels.nointernet")}
+                subTitle={t("general.labels.nointernet_sub")}
+                extra={
+                    <Button
+                        type="primary"
+                        onClick={() => {
+                            window.location.reload();
+                        }}
+                    >
+                        {t("general.actions.refresh")}
+                    </Button>
+                }
+            />
+        );
+
+    // Any route that is not assigned and matched will default to the Landing Page component
+    return (
+        <Suspense fallback={<LoadingSpinner message="Rome Online"/>}>
+            <Routes>
+                <Route path="*" element={<ErrorBoundary><LandingPage/></ErrorBoundary>}/>
+                <Route path="/signin" element={<ErrorBoundary><SignInPage/></ErrorBoundary>}/>
+                <Route path="/resetpassword" element={<ErrorBoundary><ResetPassword/></ErrorBoundary>}/>
+                <Route path="/csi/:surveyId" element={<ErrorBoundary><CsiPage/></ErrorBoundary>}/>
+                <Route path="/disclaimer" element={<ErrorBoundary><DisclaimerPage/></ErrorBoundary>}/>
+                <Route path="/mp/:paymentIs" element={<ErrorBoundary><MobilePaymentContainer/></ErrorBoundary>}/>
+                <Route path="/manage/*" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
+                    <Route path="*" element={<ManagePage/>}/>
+                </Route>
+                <Route path="/tech/*" element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
+                    <Route path="*" element={<TechPageContainer/>}/>
+                </Route>
+                <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
+                    <Route path="*" element={<DocumentEditorContainer/>}/>
+                </Route>
+            </Routes>
+        </Suspense>
+    );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

client/src/App/App.styles.scss

@@ -1,6 +1,14 @@
 //Global Styles.
 @import "react-big-calendar/lib/sass/styles";
 
+.ant-menu-item-divider {
+  border-bottom: 1px solid #74695c !important;
+}
+
+.ant-menu-dark .ant-menu-item:hover {
+  background-color: #1890ff !important;
+}
+
 .imex-table-header {
   display: flex;
   flex-wrap: wrap;