- Merge and update

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

client/src/App/App.container.jsx

@@ -1,51 +1,53 @@
-import { ApolloProvider } from "@apollo/client";
-import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
-import { ConfigProvider } from "antd";
+import {ApolloProvider} from "@apollo/client";
+import {SplitFactoryProvider, SplitSdk,} from '@splitsoftware/splitio-react';
+import {ConfigProvider} from "antd";
 import enLocale from "antd/es/locale/en_US";
 import dayjs from "../utils/day";
 import 'dayjs/locale/en';
 import React from "react";
-import { useTranslation } from "react-i18next";
+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";
+import * as Sentry from "@sentry/react";
+
+import themeProvider from "./themeProvider";
 
 dayjs.locale("en");
 
-export const factory = SplitSdk({
-  core: {
-    authorizationKey: process.env.REACT_APP_SPLIT_API,
-    key: "anon",
-  },
-});
+const config = {
+    core: {
+        authorizationKey: process.env.REACT_APP_SPLIT_API,
+        key: "anon",
+    },
+};
+export const factory = SplitSdk(config);
 
-export default function AppContainer() {
-  const { t } = useTranslation();
 
-  return (
-    <ApolloProvider client={client}>
-      <ConfigProvider
-        //componentSize="small"
-        input={{ autoComplete: "new-password" }}
-        locale={enLocale}
-        theme={{
-          token: {
-            colorPrimary: "#326ade",
-            colorInfo: "#326ade"
-          },
-        }}
-        form={{
-          validateMessages: {
-            // eslint-disable-next-line no-template-curly-in-string
-            required: t("general.validation.required", { label: "${label}" }),
-          },
-        }}
-      >
-        <GlobalLoadingBar />
-        <SplitFactory factory={factory}>
-          <App />
-        </SplitFactory>
-      </ConfigProvider>
-    </ApolloProvider>
-  );
+function AppContainer() {
+    const {t} = useTranslation();
+
+    return (
+        <ApolloProvider client={client}>
+            <ConfigProvider
+                //componentSize="small"
+                input={{autoComplete: "new-password"}}
+                locale={enLocale}
+                theme={themeProvider}
+                form={{
+                    validateMessages: {
+                        // eslint-disable-next-line no-template-curly-in-string
+                        required: t("general.validation.required", {label: "${label}"}),
+                    },
+                }}
+            >
+                <GlobalLoadingBar/>
+                <SplitFactoryProvider factory={factory}>
+                    <App/>
+                </SplitFactoryProvider>
+            </ConfigProvider>
+        </ApolloProvider>
+    );
 }
+
+export default Sentry.withProfiler(AppContainer);

client/src/App/App.jsx

@@ -8,6 +8,7 @@ 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
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
@@ -16,10 +17,11 @@ 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 {selectBodyshop, selectCurrentEula, selectCurrentUser,} from "../redux/user/user.selectors";
 import PrivateRoute from "../components/PrivateRoute";
 import "./App.styles.scss";
 import handleBeta from "../utils/betaHandler";
+import Eula from "../components/eula/eula.component";
 
 const ResetPassword = lazy(() =>
     import("../pages/reset-password/reset-password.component")
@@ -35,14 +37,14 @@ const mapStateToProps = createStructuredSelector({
     currentUser: selectCurrentUser,
     online: selectOnline,
     bodyshop: selectBodyshop,
+    currentEula: selectCurrentEula
 });
 const mapDispatchToProps = (dispatch) => ({
     checkUserSession: () => dispatch(checkUserSession()),
     setOnline: (isOnline) => dispatch(setOnline(isOnline)),
 });
 
-export function App({bodyshop, checkUserSession, currentUser, online, setOnline}) {
-
+export function App({bodyshop, checkUserSession, currentUser, online, setOnline, currentEula}) {
     const client = useSplitClient().client;
     const [listenersAdded, setListenersAdded] = useState(false)
     const {t} = useTranslation();
@@ -121,6 +123,10 @@ export function App({bodyshop, checkUserSession, currentUser, online, setOnline}
             />
         );
 
+    if (currentEula && !currentUser.eulaIsAccepted) {
+        return <Eula/>
+    }
+
     // Any route that is not assigned and matched will default to the Landing Page component
     return (
         <Suspense fallback={<LoadingSpinner message="Rome Online"/>}>
@@ -131,10 +137,12 @@ export function App({bodyshop, checkUserSession, currentUser, online, setOnline}
                 <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="/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="/tech/*"
+                       element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
                     <Route path="*" element={<TechPageContainer/>}/>
                 </Route>
                 <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>

client/src/App/App.styles.scss

@@ -5,10 +5,6 @@
   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;
@@ -151,23 +147,11 @@
   }
 }
 
-//Update row highlighting on production board.
-.ant-table-tbody > tr.ant-table-row:hover > td {
-  background: #e7f3ff !important;
-}
-
-.ant-table-tbody > tr.ant-table-row-selected > td {
-  background: #e6f7ff !important;
-}
-
 .job-line-manual {
   color: tomato;
   font-style: italic;
 }
 
-td.ant-table-column-sort {
-  background-color: transparent;
-}
 
 .ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
   background-color: #f4f4f4;

client/src/App/themeProvider.js

@@ -0,0 +1,61 @@
+import {defaultsDeep} from "lodash";
+import {theme} from "antd";
+
+const {defaultAlgorithm, darkAlgorithm} = theme;
+
+let isDarkMode = false;
+
+/**
+ * Default theme
+ * @type {{components: {Menu: {itemDividerBorderColor: string}}}}
+ */
+const defaultTheme = {
+    components: {
+        Table: {
+            rowHoverBg: '#e7f3ff',
+            rowSelectedBg: '#e6f7ff',
+            headerSortHoverBg: 'transparent',
+        },
+        Menu: {
+            darkItemHoverBg: '#1677ff',
+            itemHoverBg: '#1677ff',
+            horizontalItemHoverBg: '#1677ff',
+        }
+    },
+    token: {
+        colorPrimary: "#326ade",
+        colorInfo: "#326ade"
+    }
+};
+
+/**
+ * Development theme
+ * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
+ */
+const devTheme = {
+    components: {
+        Menu: {
+            darkItemHoverBg: '#a51d1d',
+            itemHoverBg: '#a51d1d',
+            horizontalItemHoverBg: '#a51d1d',
+        }
+    },
+    token: {
+        colorPrimary: '#a51d1d'
+    }
+};
+
+/**
+ * Production theme
+ * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
+ */
+const prodTheme = {};
+
+const currentTheme = process.env.NODE_ENV === "development" ? devTheme
+    : prodTheme;
+
+const finaltheme = {
+    algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+    ...defaultsDeep(currentTheme, defaultTheme)
+}
+export default finaltheme;