- enable sourcemap / manifest

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

.circleci/config.yml

@@ -2,9 +2,8 @@ version: 2.1
 orbs:
   #snyk: snyk/snyk@0.0.8
   #cypress: cypress-io/cypress@1.23.0
-  aws-s3: circleci/aws-s3@2.0.0
+  aws-s3: circleci/aws-s3@4.0.0
-  eb: circleci/aws-elastic-beanstalk@1.0.2
+  eb: circleci/aws-elastic-beanstalk@2.0.1
-  jira: circleci/jira@1.3.1
 jobs:
   api-deploy:
     docker:
@@ -18,7 +17,6 @@ jobs:
             eb status --verbose
             eb deploy
             eb status
-      - jira/notify
 
   hasura-migrate:
     docker:
@@ -58,7 +56,26 @@ jobs:
           from: build
           to: "s3://imex-online-production/"
           arguments: "--exclude '*.map'"
-      - jira/notify
+
+  app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: xlarge
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-beta/"
+          arguments: "--exclude '*.map'"
 
   test-hasura-migrate:
     docker:
@@ -99,7 +116,27 @@ jobs:
           from: build
           to: "s3://imex-online-test/"
           arguments: "--exclude '*.map'"
-      - jira/notify
+
+  test-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: snaptsoft/pfic
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-test-beta/"
+          arguments: "--exclude '*.map'"
 
   admin-app-build:
     docker:
@@ -142,6 +179,10 @@ workflows:
           filters:
             branches:
               only: master
+      - app-beta-build:
+          filters:
+            branches:
+              only: master-beta
       - hasura-migrate:
           secret: ${HASURA_PROD_SECRET}
           filters:
@@ -151,6 +192,10 @@ workflows:
           filters:
             branches:
               only: test
+      - test-app-beta-build:
+          filters:
+            branches:
+              only: test-beta
       - test-hasura-migrate:
           secret: ${HASURA_TEST_SECRET}
           filters:

client/.env.development

@@ -1,13 +1,13 @@
-REACT_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
-REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
-REACT_APP_GA_CODE=231099835
+VITE_APP_GA_CODE=231099835
-REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
-REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
-REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
-REACT_APP_CLOUDINARY_API_KEY=957865933348715
+VITE_APP_CLOUDINARY_API_KEY=957865933348715
-REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
+VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
-REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
+VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
-REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc

client/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

client/craco.config.js

@@ -1,7 +1,15 @@
 // craco.config.js
 const TerserPlugin = require("terser-webpack-plugin");
 const CracoLessPlugin = require("craco-less");
-//const SentryWebpackPlugin = require("@sentry/webpack-plugin");
+const {convertLegacyToken} = require('@ant-design/compatible/lib');
+const {theme} = require('antd/lib');
+
+const {defaultAlgorithm, defaultSeed} = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
+const v4Token = convertLegacyToken(mapToken);
+
+// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
 
 module.exports = {
     plugins: [
@@ -14,7 +22,7 @@ module.exports = {
         //         org: "snapt-software",
         //         project: "imexonline",
         //         release: process.env.REACT_APP_GIT_SHA,
-
+        //
         //         // webpack-specific configuration
         //         include: ".",
         //         ignore: ["node_modules", "webpack.config.js"],
@@ -25,27 +33,7 @@ module.exports = {
             options: {
                 lessLoaderOptions: {
                     lessOptions: {
-            modifyVars: {
+                        modifyVars: {...v4Token},
-              ...(process.env.NODE_ENV === "development"
-                ? { "@primary-color": "#a51d1d" }
-                : {
-                    //"@primary-color": "#1DA57A"
-                  }),
-              // "@primary-color": " #1890ff", // primary color for all components
-              // "@link-color": "#1890ff", // link color
-              // "@success-color": "#52c41a", // success state color
-              // "@warning-color": "#faad14", // warning state color
-              // "@error-color": "#f5222d", // error state color
-              // "@font-size-base": "14px", // major text font size
-              // " @heading-color": "rgba(0, 0, 0, 0.85)", // heading text color
-              // "@text-color": "rgba(0, 0, 0, 0.65)", // major text color
-              // "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // secondary text color
-              // "@disabled-color": "rgba(0, 0, 0, 0.25)", // disable state color
-              // "@border-radius-base": "2px", // major border radius
-              // "@border-color-base": "#d9d9d9", // major border color
-              // "@box-shadow-base":
-              //   "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers }",
-            },
                         javascriptEnabled: true,
                     },
                 },
@@ -53,8 +41,14 @@ module.exports = {
         },
     ],
     webpack: {
-    configure: (webpackConfig) => ({
+        configure: (webpackConfig) => {
+            return {
                 ...webpackConfig,
+                // Required for Dev Server
+                devServer: {
+                    ...webpackConfig.devServer,
+                    allowedHosts: 'all',
+                },
                 optimization: {
                     ...webpackConfig.optimization,
                     // Workaround for CircleCI bug caused by the number of CPUs shown
@@ -67,7 +61,8 @@ module.exports = {
                         return item;
                     }),
                 },
-    }),
+            };
+        },
     },
     devtool: "source-map",
 };

client/cypress.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  experimentalStudio: true,
+  env: {
+    FIREBASE_USERNAME: 'cypress@imex.test',
+    FIREBASE_PASSWORD: 'cypress',
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+})

client/cypress.json

@@ -1,8 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "experimentalStudio": true,
-  "env": {
-    "FIREBASE_USERNAME": "cypress@imex.test",
-    "FIREBASE_PASSWORD": "cypress"
-  }
-}

client/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#002366" />
     <meta name="description" content="ImEX Online" />
     <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="apple-touch-icon" href="public/logo192.png" />
     <script type="text/javascript">
       window.$crisp = [];
       window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
@@ -67,7 +67,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -82,5 +82,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
+    <script type="module" src="src/index.js"></script>
   </body>
 </html>

client/licenses.txt

@@ -8872,13 +8872,13 @@
 │  ├─ email: luis@luisrudge.net
 │  ├─ path: /Users/pfic/Documents/Development/bodyshop/client/node_modules/postcss-flexbugs-fixes
 │  └─ licenseFile: /Users/pfic/Documents/Development/bodyshop/client/node_modules/postcss-flexbugs-fixes/LICENSE
-├─ postcss-focus-visible@4.0.0
+├─ postcss-focus-open@4.0.0
 │  ├─ licenses: CC0-1.0
-│  ├─ repository: https://github.com/jonathantneal/postcss-focus-visible
+│  ├─ repository: https://github.com/jonathantneal/postcss-focus-open
 │  ├─ publisher: Jonathan Neal
 │  ├─ email: jonathantneal@hotmail.com
-│  ├─ path: /Users/pfic/Documents/Development/bodyshop/client/node_modules/postcss-focus-visible
+│  ├─ path: /Users/pfic/Documents/Development/bodyshop/client/node_modules/postcss-focus-open
-│  └─ licenseFile: /Users/pfic/Documents/Development/bodyshop/client/node_modules/postcss-focus-visible/LICENSE.md
+│  └─ licenseFile: /Users/pfic/Documents/Development/bodyshop/client/node_modules/postcss-focus-open/LICENSE.md
 ├─ postcss-focus-within@3.0.0
 │  ├─ licenses: CC0-1.0
 │  ├─ repository: https://github.com/jonathantneal/postcss-focus-within

client/package.json

@@ -1,102 +1,111 @@
 {
   "name": "bodyshop",
   "version": "0.2.1",
+  "engines": {
+    "node": "18.18.2"
+  },
+  "type": "commonjs",
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@apollo/client": "^3.7.9",
+    "@ant-design/compatible": "^5.1.2",
+    "@ant-design/pro-layout": "^7.17.16",
+    "@apollo/client": "^3.9.0",
     "@asseinfo/react-kanban": "^2.2.0",
-    "@craco/craco": "^7.0.0",
+    "@craco/craco": "^7.1.0",
-    "@fingerprintjs/fingerprintjs": "^3.4.2",
+    "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@jsreport/browser-client": "^3.1.0",
+    "@reduxjs/toolkit": "^2.1.0",
     "@sentry/cli": "^2.27.0",
     "@sentry/react": "^7.99.0",
-    "@sentry/tracing": "^7.40.0",
+    "@sentry/tracing": "^7.99.0",
-    "@splitsoftware/splitio-react": "^1.8.1",
+    "@splitsoftware/splitio-react": "^1.11.0",
-    "@tanem/react-nprogress": "^5.0.8",
+    "@tanem/react-nprogress": "^5.0.51",
-    "antd": "^4.24.8",
+    "@vitejs/plugin-legacy": "^5.3.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "@vitejs/plugin-react-swc": "^3.6.0",
+    "antd": "^5.13.3",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
-    "axios": "^1.3.4",
+    "axios": "^1.6.7",
-    "craco-less": "^2.0.0",
+    "consola": "^3.2.3",
+    "dayjs": "^1.11.10",
+    "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
-    "dotenv": "^16.0.1",
+    "dotenv": "^16.4.1",
     "enquire-js": "^0.2.1",
     "env-cmd": "^10.1.0",
+    "esbuild": "^0.20.0",
     "exifr": "^7.1.3",
-    "firebase": "^9.17.1",
+    "firebase": "^10.7.2",
     "graphql": "^16.6.0",
-    "i18next": "^22.4.10",
+    "i18next": "^23.8.1",
-    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-browser-languagedetector": "^7.0.2",
-    "jsoneditor": "^9.9.0",
+    "jsoneditor": "^10.0.0",
     "jsreport-browser-client-dist": "^1.3.0",
-    "libphonenumber-js": "^1.10.21",
+    "libphonenumber-js": "^1.10.54",
-    "logrocket": "^3.0.1",
+    "logrocket": "^7.0.0",
-    "markerjs2": "^2.28.1",
+    "markerjs2": "^2.32.0",
-    "moment-business-days": "^1.2.0",
-    "moment-timezone": "^0.5.41",
     "normalize-url": "^8.0.0",
-    "phone": "^3.1.35",
+    "phone": "^3.1.42",
     "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
+    "query-string": "^8.1.0",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-big-calendar": "^1.6.8",
+    "react-big-calendar": "^1.8.7",
     "react-color": "^2.19.3",
-    "react-cookie": "^4.1.1",
+    "react-cookie": "^7.0.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-drag-listview": "^0.2.1",
+    "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.0",
-    "react-grid-layout": "^1.3.4",
+    "react-grid-layout": "1.3.4",
-    "react-i18next": "^12.2.0",
+    "react-i18next": "^14.0.1",
-    "react-icons": "^4.7.1",
+    "react-icons": "^5.0.1",
     "react-image-lightbox": "^5.1.4",
-    "react-intersection-observer": "^9.4.3",
+    "react-intersection-observer": "^9.5.3",
-    "react-number-format": "^5.1.3",
+    "react-markdown": "^9.0.1",
-    "react-redux": "^8.0.5",
+    "react-number-format": "^5.1.4",
-    "react-resizable": "^3.0.4",
+    "react-redux": "^9.1.0",
-    "react-router-dom": "^5.3.0",
+    "react-resizable": "^3.0.5",
-    "react-scripts": "^5.0.1",
+    "react-router-dom": "^6.21.2",
     "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
-    "react-virtualized": "^9.22.3",
+    "react-virtualized": "^9.22.5",
-    "recharts": "^2.4.3",
+    "recharts": "^2.11.0",
-    "redux": "^4.2.1",
+    "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.2.2",
+    "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
-    "reselect": "^4.1.7",
+    "reselect": "^5.1.0",
-    "sass": "^1.58.3",
+    "sass": "^1.70.0",
-    "socket.io-client": "^4.6.1",
+    "socket.io-client": "^4.7.4",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.8",
     "subscriptions-transport-ws": "^0.11.0",
-    "web-vitals": "^2.1.4",
+    "terser-webpack-plugin": "^5.3.10",
-    "workbox-background-sync": "^6.5.3",
+    "vite-plugin-svgr": "^4.2.0",
-    "workbox-broadcast-update": "^6.5.3",
+    "web-vitals": "^3.5.2",
-    "workbox-cacheable-response": "^6.5.3",
+    "workbox-core": "^7.0.0",
-    "workbox-core": "^6.5.3",
+    "workbox-expiration": "^7.0.0",
-    "workbox-expiration": "^6.5.3",
+    "workbox-navigation-preload": "^7.0.0",
-    "workbox-google-analytics": "^6.5.3",
+    "workbox-precaching": "^7.0.0",
-    "workbox-navigation-preload": "^6.5.3",
+    "workbox-routing": "^7.0.0",
-    "workbox-precaching": "^6.5.3",
+    "workbox-strategies": "^7.0.0",
-    "workbox-range-requests": "^6.5.3",
-    "workbox-routing": "^6.5.3",
-    "workbox-strategies": "^6.5.3",
-    "workbox-streams": "^6.5.3",
     "yauzl": "^2.10.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "craco start",
+    "start": "vite",
-    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build && npm run sentry:sourcemaps",
+    "build": "cross-env-shell VITE_APP_GIT_SHA=\\\"`git rev-parse --short HEAD`\\\" vite build && npm run sentry:sourcemaps",
     "build:test": "env-cmd -f .env.test npm run build",
     "build-deploy:test": "npm run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
-    "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
+    "buildcra": "cross-env-shell VITE_APP_GIT_SHA=\\\"`git rev-parse --short HEAD`\\\" vite build",
     "test": "cypress open",
     "eject": "react-scripts eject",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
+    "eulaize": "node src/utils/eulaize.js",
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
   },
   "eslintConfig": {
@@ -122,12 +131,29 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
-    "@sentry/webpack-plugin": "^1.20.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/cypress": "^8.0.3",
+    "@babel/preset-react": "^7.23.3",
-    "cypress": "^10.3.1",
+    "@emotion/babel-plugin": "^11.11.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "@emotion/react": "^11.11.3",
+    "@sentry/webpack-plugin": "^2.10.3",
+    "@swc/core": "^1.3.107",
+    "@swc/plugin-styled-components": "^1.5.108",
+    "@testing-library/cypress": "^10.0.1",
+    "browserslist": "^4.22.3",
+    "browserslist-to-esbuild": "^2.1.1",
+    "craco-less": "^3.0.1",
+    "cross-env": "^7.0.3",
+    "cypress": "^13.6.4",
+    "eslint-plugin-cypress": "^2.15.1",
+    "memfs": "^4.6.0",
+    "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
-    "source-map-explorer": "^2.5.2"
+    "source-map-explorer": "^2.5.3",
+    "vite": "^5.0.11",
+    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-legacy": "^2.1.0",
+    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite-plugin-style-import": "^2.0.0"
   }
 }

client/public/3rdparty-api.txt

@@ -190,7 +190,7 @@ This package contains the following license and notice below:
 # @firebase/logger
 
 This package serves as the base of all logging in the JS SDK. Any logging that
-is intended to be visible to Firebase end developers should go through this
+is intended to be open to Firebase end developers should go through this
 module.
 
 ## Basic Usage
@@ -9375,7 +9375,7 @@ parties to make or receive copies.  Mere interaction with a user through
 a computer network, with no transfer of a copy, is not conveying.
 
   An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
+to the extent that it includes a convenient and prominently open
 feature that (1) displays an appropriate copyright notice, and (2)
 tells the user that there is no warranty for the work (except to the
 extent that warranties are provided), that licensees may convey the

client/public/3rdparty-app.txt

@@ -1029,7 +1029,7 @@ The following NPM packages may be included in this product:
  - postcss-dir-pseudo-class@5.0.0
  - postcss-double-position-gradients@1.0.0
  - postcss-env-function@2.0.2
- - postcss-focus-visible@4.0.0
+ - postcss-focus-open@4.0.0
  - postcss-focus-within@3.0.0
  - postcss-gap-properties@2.0.0
  - postcss-image-set-function@3.0.1
@@ -1699,7 +1699,7 @@ This package contains the following license and notice below:
 # @firebase/logger
 
 This package serves as the base of all logging in the JS SDK. Any logging that
-is intended to be visible to Firebase end developers should go through this
+is intended to be open to Firebase end developers should go through this
 module.
 
 ## Basic Usage
@@ -24029,7 +24029,7 @@ parties to make or receive copies.  Mere interaction with a user through
 a computer network, with no transfer of a copy, is not conveying.
 
   An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
+to the extent that it includes a convenient and prominently open
 feature that (1) displays an appropriate copyright notice, and (2)
 tells the user that there is no warranty for the work (except to the
 extent that warranties are provided), that licensees may convey the

client/src/App/App.container.jsx

@@ -1,8 +1,9 @@
 import {ApolloProvider} from "@apollo/client";
-import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
+import {SplitFactoryProvider, 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";
@@ -10,14 +11,18 @@ import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
 
-moment.locale("en-US");
+import themeProvider from "./themeProvider";
 
-export const factory = SplitSdk({
+dayjs.locale("en");
+
+const config = {
     core: {
-    authorizationKey: process.env.REACT_APP_SPLIT_API,
+        authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
         key: "anon",
     },
-});
+};
+export const factory = SplitSdk(config);
+
 
 function AppContainer() {
     const {t} = useTranslation();
@@ -28,6 +33,7 @@ function AppContainer() {
                 //componentSize="small"
                 input={{autoComplete: "new-password"}}
                 locale={enLocale}
+                theme={themeProvider}
                 form={{
                     validateMessages: {
                         // eslint-disable-next-line no-template-curly-in-string
@@ -36,9 +42,9 @@ function AppContainer() {
                 }}
             >
                 <GlobalLoadingBar/>
-        <SplitFactory factory={factory}>
+                <SplitFactoryProvider factory={factory}>
                     <App/>
-        </SplitFactory>
+                </SplitFactoryProvider>
             </ConfigProvider>
         </ApolloProvider>
     );

client/src/App/App.jsx

@@ -1,13 +1,14 @@
-import { useClient } from "@splitsoftware/splitio-react";
+import {useSplitClient} from "@splitsoftware/splitio-react";
 import {Button, Result} from "antd";
 import LogRocket from "logrocket";
-import React, { lazy, Suspense, useEffect } from "react";
+import React, {lazy, Suspense, useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
-import { Route, Switch } from "react-router-dom";
+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,13 +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 {
+import {selectBodyshop, selectCurrentEula, selectCurrentUser,} from "../redux/user/user.selectors";
-  selectBodyshop,
+import PrivateRoute from "../components/PrivateRoute";
-  selectCurrentUser,
-} from "../redux/user/user.selectors";
-import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
-import handleBeta from "../utils/handleBeta";
+import handleBeta from "../utils/betaHandler";
+import Eula from "../components/eula/eula.component";
 
 const ResetPassword = lazy(() =>
     import("../pages/reset-password/reset-password.component")
@@ -34,51 +33,65 @@ const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
 const MobilePaymentContainer = lazy(() =>
     import("../pages/mobile-payment/mobile-payment.container")
 );
-
 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({
+export function App({bodyshop, checkUserSession, currentUser, online, setOnline, currentEula}) {
-  bodyshop,
+    const client = useSplitClient().client;
-  checkUserSession,
+    const [listenersAdded, setListenersAdded] = useState(false)
-  currentUser,
+    const {t} = useTranslation();
-  online,
+
-  setOnline,
-}) {
-  const client = useClient();
 
     useEffect(() => {
         if (!navigator.onLine) {
             setOnline(false);
         }
+
         checkUserSession();
         }, [checkUserSession, setOnline]);
 
     //const b = Grid.useBreakpoint();
     // console.log("Breakpoints:", b);
 
-  const { t } = useTranslation();
+    // Associate event listeners, memoize to prevent multiple listeners being added
-
+    useEffect(() => {
-  window.addEventListener("offline", function (e) {
+        const offlineListener = (e) => {
             setOnline(false);
-  });
+        }
 
-  window.addEventListener("online", function (e) {
+        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") {
+            if (
+                client.getTreatment("LogRocket_Tracking") === "on" ||
+                window.location.hostname === 'beta.imex.online'
+            ) {
                 console.log("LR Start");
                 LogRocket.init("gvfvfw/bodyshopapp");
             }
@@ -89,6 +102,8 @@ export function App({
         return <LoadingSpinner message={t("general.labels.loggingin")}/>;
     }
 
+    handleBeta();
+
     if (!online)
         return (
             <Result
@@ -108,56 +123,33 @@ export function App({
             />
         );
 
-  handleBeta();
+    if (currentEula && !currentUser.eulaIsAccepted) {
+        return <Eula/>
+    }
 
+    // Any route that is not assigned and matched will default to the Landing Page component
     return (
-    <Switch>
         <Suspense fallback={<LoadingSpinner message="ImEX Online"/>}>
-        <ErrorBoundary>
+            <Routes>
-          <Route exact path="/" component={LandingPage} />
+                <Route path="*" element={<ErrorBoundary><LandingPage/></ErrorBoundary>}/>
-        </ErrorBoundary>
+                <Route path="/signin" element={<ErrorBoundary><SignInPage/></ErrorBoundary>}/>
-        <ErrorBoundary>
+                <Route path="/resetpassword" element={<ErrorBoundary><ResetPassword/></ErrorBoundary>}/>
-          <Route exact path="/signin" component={SignInPage} />
+                <Route path="/csi/:surveyId" element={<ErrorBoundary><CsiPage/></ErrorBoundary>}/>
-        </ErrorBoundary>
+                <Route path="/disclaimer" element={<ErrorBoundary><DisclaimerPage/></ErrorBoundary>}/>
-        <ErrorBoundary>
+                <Route path="/mp/:paymentIs" element={<ErrorBoundary><MobilePaymentContainer/></ErrorBoundary>}/>
-          <Route exact path="/resetpassword" component={ResetPassword} />
+                <Route path="/manage/*"
-        </ErrorBoundary>
+                       element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
-        <ErrorBoundary>
+                    <Route path="*" element={<ManagePage/>}/>
-          <Route exact path="/csi/:surveyId" component={CsiPage} />
+                </Route>
-        </ErrorBoundary>
+                <Route path="/tech/*"
-        <ErrorBoundary>
+                       element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
-          <Route exact path="/disclaimer" component={DisclaimerPage} />
+                    <Route path="*" element={<TechPageContainer/>}/>
-        </ErrorBoundary>
+                </Route>
-        <ErrorBoundary>
+                <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
-          <Route
+                    <Route path="*" element={<DocumentEditorContainer/>}/>
-            exact
+                </Route>
-            path="/mp/:paymentIs"
+            </Routes>
-            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>
     );
 }
 

client/src/App/App.styles.scss

@@ -1,6 +1,10 @@
 //Global Styles.
 @import "react-big-calendar/lib/sass/styles";
 
+.ant-menu-item-divider {
+  border-bottom: 1px solid #74695c !important;
+}
+
 .imex-table-header {
   display: flex;
   flex-wrap: wrap;
@@ -143,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,60 @@
+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: '#1677ff'
+    }
+};
+
+/**
+ * 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 = import.meta.env.DEV ? devTheme
+    : prodTheme;
+
+const finaltheme = {
+    algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+    ...defaultsDeep(currentTheme, defaultTheme)
+}
+export default finaltheme;

client/src/components/PrivateRoute.js

@@ -0,0 +1,17 @@
+import React, {useEffect} from "react";
+import {Outlet, useLocation, useNavigate} from "react-router-dom";
+
+function PrivateRoute({component: Component, isAuthorized, ...rest}) {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!isAuthorized) {
+            navigate(`/signin?redirect=${location.pathname}`);
+        }
+    }, [isAuthorized, navigate,location]);
+
+    return <Outlet/>;
+}
+
+export default PrivateRoute;

client/src/components/allocations-assignment/allocations-assignment.component.jsx

@@ -61,7 +61,7 @@ export function AllocationsAssignmentComponent({
   );
 
   return (
-    <Popover content={popContent} visible={visibility}>
+    <Popover content={popContent} open={visibility}>
       <Button onClick={() => setVisibility(true)}>
         {t("allocations.actions.assign")}
       </Button>

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx

@@ -59,7 +59,7 @@ export default connect(
   );
 
   return (
-    <Popover content={popContent} visible={visibility}>
+    <Popover content={popContent} open={visibility}>
       <Button disabled={disabled} onClick={() => setVisibility(true)}>
         {t("allocations.actions.assign")}
       </Button>

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -1,6 +1,6 @@
 import {useMutation, useQuery} from "@apollo/client";
-import { Button, Form, PageHeader, Popconfirm, Space } from "antd";
+import {Button, Form, Popconfirm, Space} from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
 import {
   DELETE_BILL_LINE,
   INSERT_NEW_BILL_LINES,
-  UPDATE_BILL_LINE,
+  UPDATE_BILL_LINE
 } from "../../graphql/bill-lines.queries";
 import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -26,6 +26,7 @@ import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-galler
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import BillDetailEditReturn from "./bill-detail-edit-return.component";
+import {PageHeader} from "@ant-design/pro-layout";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -42,16 +43,12 @@ export default connect(
     mapDispatchToProps
 )(BillDetailEditcontainer);
 
-export function BillDetailEditcontainer({
+export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail, bodyshop,}) {
-  setPartsOrderContext,
-  insertAuditTrail,
-  bodyshop,
-}) {
     const search = queryString.parse(useLocation().search);
 
     const {t} = useTranslation();
     const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
+    const [open, setOpen] = useState(false);
     const [updateLoading, setUpdateLoading] = useState(false);
     const [update_bill] = useMutation(UPDATE_BILL);
     const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
@@ -65,6 +62,8 @@ export function BillDetailEditcontainer({
         nextFetchPolicy: "network-only",
     });
 
+    // ... rest of the code remains the same
+
     const handleSave = () => {
         //It's got a previously deducted bill line!
         if (
@@ -72,7 +71,7 @@ export function BillDetailEditcontainer({
             form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
             0
         )
-      setVisible(true);
+            setOpen(true);
         else {
             form.submit();
         }
@@ -155,7 +154,7 @@ export function BillDetailEditcontainer({
         await refetch();
         form.setFieldsValue(transformData(data));
         form.resetFields();
-    setVisible(false);
+        setOpen(false);
         setUpdateLoading(false);
     };
 
@@ -179,9 +178,9 @@ export function BillDetailEditcontainer({
                 <BillDetailEditReturn data={data} />
                 <BillPrintButton billid={search.billid} />
                 <Popconfirm
-                  visible={visible}
+                  open={open}
                   onConfirm={() => form.submit()}
-                  onCancel={() => setVisible(false)}
+                  onCancel={() => setOpen(false)}
                   okButtonProps={{ loading: updateLoading }}
                   title={t("bills.labels.editadjwarning")}
                 >
@@ -246,7 +245,7 @@ const transformData = (data) => {
                     },
                 };
             }),
-        date: data.bills_by_pk ? moment(data.bills_by_pk.date) : null,
+            date: data.bills_by_pk ? dayjs(data.bills_by_pk.date) : null,
         }
         : {};
 };

client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx

@@ -3,7 +3,7 @@ import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -33,10 +33,10 @@ export function BillDetailEditReturn({
   disabled,
 }) {
   const search = queryString.parse(useLocation().search);
-  const history = useHistory();
+  const history = useNavigate();
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const handleFinish = ({ billlines }) => {
     const selectedLines = billlines.filter((l) => l.selected).map((l) => l.id);
@@ -67,18 +67,18 @@ export function BillDetailEditReturn({
     });
     delete search.billid;
 
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
-    setVisible(false);
+    setOpen(false);
   };
   useEffect(() => {
-    if (visible === false) form.resetFields();
+    if (open === false) form.resetFields();
-  }, [visible, form]);
+  }, [open, form]);
 
   return (
     <>
       <Modal
-        visible={visible}
+        open={open}
-        onCancel={() => setVisible(false)}
+        onCancel={() => setOpen(false)}
         destroyOnClose
         title={t("bills.actions.return")}
         onOk={() => form.submit()}
@@ -175,7 +175,7 @@ export function BillDetailEditReturn({
       <Button
         disabled={data.bills_by_pk.is_credit_memo || disabled}
         onClick={() => {
-          setVisible(true);
+          setOpen(true);
         }}
       >
         {t("bills.actions.return")}

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -1,12 +1,12 @@
 import { Drawer, Grid } from "antd";
 import queryString from "query-string";
 import React from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import BillDetailEditComponent from "./bill-detail-edit-component";
 
 export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
-  const history = useHistory();
+  const history = useNavigate();
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
@@ -29,10 +29,10 @@ export default function BillDetailEditcontainer() {
       width={drawerPercentage}
       onClose={() => {
         delete search.billid;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }}
       destroyOnClose
-      visible={search.billid}
+      open={search.billid}
     >
       <BillDetailEditComponent />
     </Drawer>

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -346,18 +346,18 @@ function BillEnterModalContainer({
   }, [enterAgain, form]);
 
   useEffect(() => {
-    if (billEnterModal.visible) {
+    if (billEnterModal.open) {
       form.setFieldsValue(formValues);
     } else {
       form.resetFields();
     }
-  }, [billEnterModal.visible, form, formValues]);
+  }, [billEnterModal.open, form, formValues]);
 
   return (
     <Modal
       title={t("bills.labels.new")}
       width={"98%"}
-      visible={billEnterModal.visible}
+      open={billEnterModal.open}
       okText={t("general.actions.save")}
       keyboard="false"
       onOk={() => form.submit()}

client/src/components/bill-form/bill-form.component.jsx

@@ -1,18 +1,8 @@
 import Icon, {UploadOutlined} from "@ant-design/icons";
 import {useApolloClient} from "@apollo/client";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
-import {
+import {Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload,} from "antd";
-  Alert,
+import dayjs from "../../utils/day";
-  Divider,
-  Form,
-  Input,
-  Select,
-  Space,
-  Statistic,
-  Switch,
-  Upload,
-} from "antd";
-import moment from "moment";
 import React, {useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {MdOpenInNew} from "react-icons/md";
@@ -37,34 +27,18 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({});
 
-export function BillFormComponent({
+export function BillFormComponent({bodyshop, disabled, form, vendorAutoCompleteOptions, lineData, responsibilityCenters, loadLines, billEdit, disableInvNumber, job, loadOutstandingReturns, loadInventory, preferredMake}) {
-  bodyshop,
+
-  disabled,
-  form,
-  vendorAutoCompleteOptions,
-  lineData,
-  responsibilityCenters,
-  loadLines,
-  billEdit,
-  disableInvNumber,
-  job,
-  loadOutstandingReturns,
-  loadInventory,
-  preferredMake,
-}) {
     const {t} = useTranslation();
     const client = useApolloClient();
     const [discount, setDiscount] = useState(0);
-  const { Extended_Bill_Posting } = useTreatments(
+
-    ["Extended_Bill_Posting"],
+    const { treatments: {Extended_Bill_Posting, ClosingPeriod} } = useSplitTreatments({
-    {},
+        attributes: {},
-    bodyshop.imexshopid
+        names: ["Extended_Bill_Posting", "ClosingPeriod"],
-  );
+        splitKey: bodyshop.imexshopid,
-  const { ClosingPeriod } = useTreatments(
+    });
-    ["ClosingPeriod"],
+
-    {},
-    bodyshop.imexshopid
-  );
 
     const handleVendorSelect = (props, opt) => {
         setDiscount(opt.discount);
@@ -288,17 +262,17 @@ export function BillFormComponent({
                                     bodyshop.accountingconfig.ClosingPeriod
                                 ) {
                                     if (
-                    moment(value)
+                                        dayjs(value)
                                             .startOf("day")
                                             .isSameOrAfter(
-                        moment(
+                                                dayjs(
                                                     bodyshop.accountingconfig.ClosingPeriod[0]
                                                 ).startOf("day")
                                             ) &&
-                    moment(value)
+                                        dayjs(value)
                                             .startOf("day")
                                             .isSameOrBefore(
-                        moment(
+                                                dayjs(
                                                     bodyshop.accountingconfig.ClosingPeriod[1]
                                                 ).endOf("day")
                                             )

client/src/components/bill-form/bill-form.container.jsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useQuery } from "@apollo/client";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -23,11 +23,11 @@ export function BillFormContainer({
   disabled,
   disableInvNumber,
 }) {
-  const { Simple_Inventory } = useTreatments(
+  const { treatments: {Simple_Inventory} } = useSplitTreatments({
-    ["Simple_Inventory"],
+    attributes: {},
-    {},
+    names: ["Simple_Inventory"],
-    bodyshop && bodyshop.imexshopid
+    splitKey: bodyshop && bodyshop.imexshopid,
-  );
+  });
 
   const { data: VendorAutoCompleteData } = useQuery(
     SEARCH_VENDOR_AUTOCOMPLETE,

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
 import {
   Button,
   Form,
@@ -41,11 +41,14 @@ export function BillEnterModalLinesComponent({
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
-  const { Simple_Inventory } = useTreatments(
+
-    ["Simple_Inventory"],
+  const { treatments: {Simple_Inventory} } = useSplitTreatments({
-    {},
+    attributes: {},
-    bodyshop && bodyshop.imexshopid
+    names: ["Simple_Inventory"],
-  );
+    splitKey: bodyshop && bodyshop.imexshopid,
+  });
+
+
   const columns = (remove) => {
     return [
       {

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -15,7 +15,8 @@ const BillLineSearchSelect = (
       disabled={disabled}
       ref={ref}
       showSearch
-      dropdownMatchSelectWidth={false}
+      popupMatchSelectWidth={false}
+      optionLabelProp={"name"}
       //  optionFilterProp="line_desc"
       filterOption={(inputValue, option) => {
         return (
@@ -57,6 +58,9 @@ const BillLineSearchSelect = (
               style={{
                 ...(item.removed ? { textDecoration: "line-through" } : {}),
               }}
+              name={`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
+                  item.oem_partno ? ` - ${item.oem_partno}` : ""
+              }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
             >
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -2,7 +2,7 @@ import { FileAddFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, notification, Tooltip } from "antd";
 import { t } from "i18next";
-import moment from "moment";
+import dayjs from "./../../utils/day";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -36,7 +36,6 @@ export function BilllineAddInventory({
 }) {
   const [loading, setLoading] = useState(false);
   const { billid } = queryString.parse(useLocation().search);
-
   const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
 
   const addToInventory = async () => {
@@ -50,7 +49,7 @@ export function BilllineAddInventory({
       jobid: jobid,
       isinhouse: true,
       is_credit_memo: true,
-      date: moment().format("YYYY-MM-DD"),
+      date: dayjs().format("YYYY-MM-DD"),
       federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
       state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
       local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
@@ -92,7 +91,7 @@ export function BilllineAddInventory({
         pol: {
           returnfrombill: billid,
           vendorid: bodyshop.inhousevendorid,
-          deliver_by: moment().format("YYYY-MM-DD"),
+          deliver_by: dayjs().format("YYYY-MM-DD"),
           parts_order_lines: {
             data: [
               {

client/src/components/bills-vendors-list/bills-vendors-list.component.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
 import { useQuery } from "@apollo/client";
 import queryString from "query-string";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Table, Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -10,7 +10,7 @@ import AlertComponent from "../alert/alert.component";
 
 export default function BillsVendorsList() {
   const search = queryString.parse(useLocation().search);
-  const history = useHistory();
+  const history = useNavigate();
 
   const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {
     fetchPolicy: "network-only",

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -1,5 +1,5 @@
 import {HomeFilled} from "@ant-design/icons";
-import { Breadcrumb, Row, Col } from "antd";
+import {Breadcrumb, Col, Row} from "antd";
 import React from "react";
 import {connect} from "react-redux";
 import {Link} from "react-router-dom";
@@ -9,7 +9,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
 import GlobalSearchOs from "../global-search/global-search-os.component";
 import "./breadcrumbs.styles.scss";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import {useSplitTreatments} from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
     breadcrumbs: selectBreadcrumbs,
@@ -17,33 +17,42 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function BreadCrumbs({breadcrumbs, bodyshop}) {
-  const { OpenSearch } = useTreatments(
-    ["OpenSearch"],
-    {},
-    bodyshop && bodyshop.imexshopid
-  );
 
+    const {treatments: {OpenSearch}} = useSplitTreatments({
+        attributes: {},
+        names: ["OpenSearch"],
+        splitKey: bodyshop && bodyshop.imexshopid,
+    });
+    // TODO - Client Update - Technically key is not doing anything here
     return (
         <Row className="breadcrumb-container">
             <Col xs={24} sm={24} md={16}>
-        <Breadcrumb separator=">">
+                <Breadcrumb
-          <Breadcrumb.Item>
+                    separator=">"
-            <Link to={`/manage`}>
+                    items={[
+                        {
+                            key: "home",
+                            title: (
+                                <Link to={`/manage/`}>
                                     <HomeFilled/>{" "}
                                     {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
                                         ""}
                                 </Link>
-          </Breadcrumb.Item>
+                            ),
-          {breadcrumbs.map((item) =>
+                        },
-            item.link ? (
+                        ...breadcrumbs.map((item) =>
-              <Breadcrumb.Item key={item.label}>
+                            item.link
-                <Link to={item.link}>{item.label} </Link>
+                                ? {
-              </Breadcrumb.Item>
+                                    key: item.label,
-            ) : (
+                                    title: <Link to={item.link}>{item.label}</Link>,
-              <Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
+                                }
-            )
+                                : {
-          )}
+                                    key: item.label,
-        </Breadcrumb>
+                                    title: item.label,
+                                }
+                        ),
+                    ]}
+                />
             </Col>
             <Col xs={24} sm={24} md={8}>
                 {OpenSearch.treatment === "on" ? <GlobalSearchOs/> : <GlobalSearch/>}
@@ -51,4 +60,5 @@ export function BreadCrumbs({ breadcrumbs, bodyshop }) {
         </Row>
     );
 }
+
 export default connect(mapStateToProps, null)(BreadCrumbs);

client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx

@@ -25,7 +25,7 @@ export function ContractsFindModalContainer({
 }) {
   const { t } = useTranslation();
 
-  const { visible } = caBcEtfTableModal;
+  const { open } = caBcEtfTableModal;
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const EtfTemplate = TemplateList("special").ca_bc_etf_table;
@@ -63,14 +63,14 @@ export function ContractsFindModalContainer({
   };
 
   useEffect(() => {
-    if (visible) {
+    if (open) {
       form.resetFields();
     }
-  }, [visible, form]);
+  }, [open, form]);
 
   return (
     <Modal
-      visible={visible}
+      open={open}
       width="70%"
       title={t("payments.labels.findermodal")}
       onCancel={() => toggleModalVisible()}

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -38,7 +38,7 @@ export default function CABCpvrtCalculator({ disabled, form }) {
     <Popover
       destroyTooltipOnHide
       content={popContent}
-      visible={visibility}
+      open={visibility}
       disabled={disabled}
     >
       <Button disabled={disabled} onClick={() => setVisibility(true)}>

client/src/components/card-payment-modal/card-payment-modal.component..jsx

@@ -13,7 +13,7 @@ import {
   notification,
 } from "antd";
 import axios from "axios";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -117,7 +117,7 @@ const CardPaymentModalComponent = ({
             payer: t("payments.labels.customer"),
             type: values.paymentResponse.cardbrand,
             jobid: payment.jobid,
-            date: moment(Date.now()),
+            date: dayjs(Date.now()),
             payment_responses: {
               data: [
                 {

client/src/components/card-payment-modal/card-payment-modal.container..jsx

@@ -22,7 +22,7 @@ function CardPaymentModalContainer({
   toggleModalVisible,
   bodyshop,
 }) {
-  const { visible } = cardPaymentModal;
+  const { open } = cardPaymentModal;
   const { t } = useTranslation();
 
   const handleCancel = () => {
@@ -35,7 +35,7 @@ function CardPaymentModalContainer({
 
   return (
     <Modal
-      open={visible}
+      open={open}
       onOk={handleOK}
       onCancel={handleCancel}
       footer={[

client/src/components/chat-affix/chat-affix.container.jsx

@@ -4,20 +4,11 @@ import { Button, notification, Space } from "antd";
 import axios from "axios";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import FcmHandler from "../../utils/fcm-handler";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  chatVisible: selectChatVisible,
-});
-
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -28,7 +19,7 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
       try {
         const r = await axios.post("/notifications/subscribe", {
           fcm_tokens: await getToken(messaging, {
-            vapidKey: process.env.REACT_APP_FIREBASE_PUBLIC_VAPID_KEY,
+            vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY,
           }),
           type: "messaging",
           imexshopid: bodyshop.imexshopid,
@@ -47,7 +38,6 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
                 <Button
                     onClick={async () => {
                       await requestForToken();
-
                       SubscribeToTopic();
                     }}
                 >
@@ -81,16 +71,16 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
         payload: (payload && payload.data && payload.data.data) || payload.data,
       });
     }
-    let stopMessageListenr, channel;
+    let stopMessageListener, channel;
     try {
-      stopMessageListenr = onMessage(messaging, handleMessage);
+      stopMessageListener = onMessage(messaging, handleMessage);
       channel = new BroadcastChannel("imex-sw-messages");
       channel.addEventListener("message", handleMessage);
     } catch (error) {
       console.log("Unable to set event listeners.");
     }
     return () => {
-      stopMessageListenr && stopMessageListenr();
+      stopMessageListener && stopMessageListener();
       channel && channel.removeEventListener("message", handleMessage);
     };
   }, [client]);
@@ -103,4 +93,5 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
       </div>
   );
 }
-export default connect(mapStateToProps, null)(ChatAffixContainer);
+
+export default ChatAffixContainer;

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -1,19 +1,14 @@
-import { Badge, List, Tag } from "antd";
+import {Badge, Card, List, Space, Tag} from "antd";
 import React from "react";
 import {connect} from "react-redux";
-import {
+import {AutoSizer, CellMeasurer, CellMeasurerCache, List as VirtualizedList,} from "react-virtualized";
-  AutoSizer,
-  CellMeasurer,
-  CellMeasurerCache,
-  List as VirtualizedList,
-} from "react-virtualized";
 import {createStructuredSelector} from "reselect";
 import {setSelectedConversation} from "../../redux/messaging/messaging.actions";
 import {selectSelectedConversation} from "../../redux/messaging/messaging.selectors";
 import {TimeAgoFormatter} from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {OwnerNameDisplayFunction} from "../owner-name-display/owner-name-display.component";
-
+import _ from "lodash";
 import "./chat-conversation-list.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
@@ -38,6 +33,36 @@ function ChatConversationListComponent({
 
     const rowRenderer = ({index, key, style, parent}) => {
         const item = conversationList[index];
+        const cardContentRight =
+            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
+        const cardContentLeft = item.job_conversations.length > 0
+            ? item.job_conversations.map((j, idx) => (
+                <Tag key={idx}>{j.job.ro_number}</Tag>
+            ))
+            : null;
+
+        const names = <>{_.uniq(item.job_conversations.map((j, idx) =>
+            OwnerNameDisplayFunction(j.job)
+        ))}</>
+
+        const cardTitle = <>
+            {item.label && <Tag color="blue">{item.label}</Tag>}
+            {item.job_conversations.length > 0 ? (
+                <Space direction="vertical">
+                    {names}
+                </Space>
+            ) : (
+                <Space>
+                    <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+                </Space>
+            )}
+        </>
+        const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0}/>
+
+        const getCardStyle = () =>
+            item.id === selectedConversation
+                ? { backgroundColor: 'rgba(128, 128, 128, 0.2)' }
+                : { backgroundColor: index % 2 === 0 ? '#f0f2f5' : '#ffffff' };
 
         return (
             <CellMeasurer
@@ -49,44 +74,21 @@ function ChatConversationListComponent({
             >
                 <List.Item
                     onClick={() => setSelectedConversation(item.id)}
-          className={`chat-list-item ${
+                    style={style}
+                    className={`chat-list-item
+    ${
                         item.id === selectedConversation
                             ? "chat-list-selected-conversation"
                             : null
                     }`}
-          style={style}
                 >
+                    <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
+                        <div style={{display: 'inline-block', width: '70%', textAlign: 'left'}}>
+                            {cardContentLeft}
+                        </div>
                         <div
-            style={{
+                            style={{display: 'inline-block', width: '30%', textAlign: 'right'}}>{cardContentRight}</div>
-              display: "inline-block",
+                    </Card>
-            }}
-          >
-            {item.label && <div className="chat-name">{item.label}</div>}
-            {item.job_conversations.length > 0 ? (
-              <div className="chat-name">
-                {item.job_conversations.map((j, idx) => (
-                  <div key={idx}>
-                    <OwnerNameDisplay ownerObject={j.job} />
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-            )}
-          </div>
-          <div style={{ display: "inline-block" }}>
-            <div>
-              {item.job_conversations.length > 0
-                ? item.job_conversations.map((j, idx) => (
-                    <Tag key={idx} className="ro-number-tag">
-                      {j.job.ro_number}
-                    </Tag>
-                  ))
-                : null}
-            </div>
-            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-          </div>
-          <Badge count={item.messages_aggregate.aggregate.count || 0} />
                 </List.Item>
             </CellMeasurer>
         );

client/src/components/chat-conversation-list/chat-conversation-list.styles.scss

@@ -1,27 +1,14 @@
-.chat-list-selected-conversation {
-  background-color: rgba(128, 128, 128, 0.2);
-}
 .chat-list-container {
-  flex: 1;
   overflow: hidden;
   height: 100%;
   border: 1px solid gainsboro;
 }
-
 .chat-list-item {
-  display: flex;
+  .ant-card-head {
-  flex-direction: row;
+    border: none;
+  }
   &:hover {
     cursor: pointer;
     color: #ff7a00;
   }
-  .chat-name {
-    flex: 1;
-    display: inline;
-  }
-  .ro-number-tag {
-    align-self: baseline;
-  }
-  padding: 12px 24px;
-  border-bottom: 1px solid gainsboro;
 }

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -27,7 +27,7 @@ export function ChatMediaSelector({
   conversation,
 }) {
   const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
     fetchPolicy: "network-only",
@@ -39,13 +39,13 @@ export function ChatMediaSelector({
     },
 
     skip:
-      !visible ||
+      !open ||
       !conversation.job_conversations ||
       conversation.job_conversations.length === 0,
   });
 
-  const handleVisibleChange = (visible) => {
+  const handleVisibleChange = (change) => {
-    setVisible(visible);
+    setOpen(change);
   };
 
   useEffect(() => {
@@ -65,7 +65,7 @@ export function ChatMediaSelector({
           externalMediaState={[selectedMedia, setSelectedMedia]}
         />
       )}
-      {bodyshop.uselocalmediaserver && visible && (
+      {bodyshop.uselocalmediaserver && open && (
         <JobDocumentsLocalGalleryExternal
           externalMediaState={[selectedMedia, setSelectedMedia]}
           jobId={
@@ -88,8 +88,8 @@ export function ChatMediaSelector({
       }
       title={t("messaging.labels.selectmedia")}
       trigger="click"
-      visible={visible}
+      open={open}
-      onVisibleChange={handleVisibleChange}
+      onOpenChange={handleVisibleChange}
     >
       <Badge count={selectedMedia.filter((s) => s.isSelected).length}>
         <PictureFilled style={{ margin: "0 .5rem" }} />

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,7 +1,7 @@
 import Icon from "@ant-design/icons";
 import { Tooltip } from "antd";
 import i18n from "i18next";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useEffect, useRef } from "react";
 import { MdDone, MdDoneAll } from "react-icons/md";
 import {
@@ -52,7 +52,7 @@ export default function ChatMessageListComponent({ messages }) {
               <div style={{ fontSize: 10 }}>
                 {i18n.t("messaging.labels.sentby", {
                   by: messages[index].userid,
-                  time: moment(messages[index].created_at).format(
+                  time: dayjs(messages[index].created_at).format(
                     "MM/DD/YYYY @ hh:mm a"
                   ),
                 })}

client/src/components/chat-presets/chat-presets.component.jsx

@@ -1,5 +1,5 @@
 import { PlusCircleOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -16,19 +16,16 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export function ChatPresetsComponent({ bodyshop, setMessage, className }) {
-  const menu = (
+
-    <Menu>
+  const items = bodyshop.md_messaging_presets.map((i, idx) => ({
-      {bodyshop.md_messaging_presets.map((i, idx) => (
+    key: idx,
-        <Menu.Item onClick={() => setMessage(i.text)} key={idx}>
+    label: (i.label),
-          {i.label}
+    onClick: () => setMessage(i.text),
-        </Menu.Item>
+  }));
-      ))}
-    </Menu>
-  );
 
   return (
     <div className={className}>
-      <Dropdown trigger={["click"]} overlay={menu}>
+      <Dropdown trigger={["click"]} menu={{items}}>
         <PlusCircleOutlined />
       </Dropdown>
     </div>

client/src/components/chat-print-button/chat-print-button.component.jsx

@@ -16,42 +16,28 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatPrintButton({ conversation }) {
   const [loading, setLoading] = useState(false);
 
+  const generateDocument = (type) => {
+      setLoading(true);
+      GenerateDocument(
+          {
+              name: TemplateList("messaging").conversation_list.key,
+              variables: { id: conversation.id },
+          },
+          {
+              subject: TemplateList("messaging").conversation_list.subject,
+          },
+          type,
+          conversation.id
+      ).catch(e => {
+          console.warn('Something went wrong generating a document.');
+      });
+      setLoading(false);
+  }
+
   return (
     <Space wrap>
-      <PrinterOutlined
+      <PrinterOutlined onClick={() => generateDocument('p')}/>
-        onClick={() => {
+      <MailOutlined onClick={() => generateDocument('e')}/>
-          setLoading(true);
-          GenerateDocument(
-            {
-              name: TemplateList("messaging").conversation_list.key,
-              variables: { id: conversation.id },
-            },
-            {
-              subject: TemplateList("messaging").conversation_list.subject,
-            },
-            "p",
-            conversation.id
-          );
-          setLoading(false);
-        }}
-      />
-      <MailOutlined
-        onClick={() => {
-          setLoading(true);
-          GenerateDocument(
-            {
-              name: TemplateList("messaging").conversation_list.key,
-              variables: { id: conversation.id },
-            },
-            {
-              subject: TemplateList("messaging").conversation_list.subject,
-            },
-            "e",
-            conversation.id
-          );
-          setLoading(false);
-        }}
-      />
       {loading && <Spin />}
     </Space>
   );

client/src/components/chat-tag-ro/chat-tag-ro.component.jsx

@@ -9,17 +9,17 @@ export default function ChatTagRoComponent({
   loading,
   handleSearch,
   handleInsertTag,
-  setVisible,
+  setOpen,
 }) {
   const { t } = useTranslation();
 
   return (
-    <Space flex>
+    <Space>
       <div style={{ width: "15rem" }}>
         <Select
           showSearch
           autoFocus
-          dropdownMatchSelectWidth
+          popupMatchSelectWidth
           placeholder={t("general.labels.search")}
           filterOption={false}
           onSearch={handleSearch}
@@ -38,7 +38,7 @@ export default function ChatTagRoComponent({
       {loading ? (
         <LoadingOutlined />
       ) : (
-        <CloseCircleOutlined onClick={() => setVisible(false)} />
+        <CloseCircleOutlined onClick={() => setOpen(false)} />
       )}
     </Space>
   );

client/src/components/chat-tag-ro/chat-tag-ro.container.jsx

@@ -11,7 +11,7 @@ import ChatTagRo from "./chat-tag-ro.component";
 
 export default function ChatTagRoContainer({ conversation }) {
   const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const [loadRo, { loading, data }] = useLazyQuery(SEARCH_FOR_JOBS);
 
@@ -33,7 +33,7 @@ export default function ChatTagRoContainer({ conversation }) {
   const handleInsertTag = (value, option) => {
     logImEXEvent("messaging_add_job_tag");
     insertTag({ variables: { jobId: option.key } });
-    setVisible(false);
+    setOpen(false);
   };
 
   const existingJobTags =
@@ -47,16 +47,16 @@ export default function ChatTagRoContainer({ conversation }) {
 
   return (
     <div>
-      {visible ? (
+      {open ? (
         <ChatTagRo
           loading={loading}
           roOptions={roOptions}
           handleSearch={handleSearch}
           handleInsertTag={handleInsertTag}
-          setVisible={setVisible}
+          setOpen={setOpen}
         />
       ) : (
-        <Tag onClick={() => setVisible(true)}>
+        <Tag onClick={() => setOpen(true)}>
           <PlusOutlined />
           {t("messaging.actions.link")}
         </Tag>

client/src/components/contract-cars/contract-cars.container.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
 import AlertComponent from "../alert/alert.component";
@@ -7,7 +7,7 @@ import ContractCarsComponent from "./contract-cars.component";
 
 export default function ContractCarsContainer({ selectedCarState, form }) {
   const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC, {
-    variables: { today: moment().format("YYYY-MM-DD") },
+    variables: { today: dayjs().format("YYYY-MM-DD") },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });

client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx

@@ -10,11 +10,11 @@ import {
   Space,
 } from "antd";
 import axios from "axios";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
 import {
@@ -38,17 +38,17 @@ export function ContractConvertToRo({
   disabled,
 }) {
   const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [insertJob] = useMutation(INSERT_NEW_JOB);
-  const history = useHistory();
+  const history = useNavigate();
 
   const handleFinish = async (values) => {
     setLoading(true);
 
-    const contractLength = moment(contract.actualreturn).diff(
+    const contractLength = dayjs(contract.actualreturn).diff(
-      moment(contract.start),
+      dayjs(contract.start),
-      "days"
+      "day"
     );
     const billingLines = [];
     if (contractLength > 0)
@@ -306,7 +306,7 @@ export function ContractConvertToRo({
       });
     }
 
-    setVisible(false);
+    setOpen(false);
     setLoading(false);
   };
 
@@ -380,7 +380,7 @@ export function ContractConvertToRo({
           <Button type="primary" htmlType="submit" loading={loading}>
             {t("contracts.actions.convertoro")}
           </Button>
-          <Button onClick={() => setVisible(false)}>
+          <Button onClick={() => setOpen(false)}>
             {t("general.actions.close")}
           </Button>
         </Space>
@@ -390,9 +390,9 @@ export function ContractConvertToRo({
 
   return (
     <div>
-      <Popover content={popContent} visible={visible}>
+      <Popover content={popContent} open={open}>
         <Button
-          onClick={() => setVisible(true)}
+          onClick={() => setOpen(true)}
           loading={loading}
           disabled={!contract.dailyrate || !contract.actualreturn || disabled}
         >

client/src/components/contract-form/contract-form.component.jsx

@@ -1,6 +1,6 @@
 import { WarningFilled } from "@ant-design/icons";
 import { Form, Input, InputNumber, Space } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
@@ -96,8 +96,8 @@ export default function ContractFormComponent({
               const dueForService =
                 selectedCar &&
                 selectedCar.nextservicedate &&
-                moment(selectedCar.nextservicedate).isBefore(
+                dayjs(selectedCar.nextservicedate).isBefore(
-                  moment(form.getFieldValue("scheduledreturn"))
+                  dayjs(form.getFieldValue("scheduledreturn"))
                 );
 
               if (mileageOver || dueForService)
@@ -190,9 +190,9 @@ export default function ContractFormComponent({
           }
         >
           {() => {
-            const dlExpiresBeforeReturn = moment(
+            const dlExpiresBeforeReturn = dayjs(
               form.getFieldValue("driver_dlexpiry")
-            ).isBefore(moment(form.getFieldValue("scheduledreturn")));
+            ).isBefore(dayjs(form.getFieldValue("scheduledreturn")));
 
             return (
               <div>

client/src/components/contract-license-decode-button/contract-license-decode-button.component.jsx

@@ -1,5 +1,5 @@
 import { Button, Input, Modal, Typography } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import aamva from "../../utils/aamva";
@@ -26,8 +26,8 @@ export default function ContractLicenseDecodeButton({ form }) {
 
     const values = {
       driver_dlnumber: decodedBarcode.dl,
-      driver_dlexpiry: moment(
+      driver_dlexpiry: dayjs(
-        `20${decodedBarcode.expiration_date}${moment(
+        `20${decodedBarcode.expiration_date}${dayjs(
           decodedBarcode.birthday
         ).format("DD")}`
       ),
@@ -38,7 +38,7 @@ export default function ContractLicenseDecodeButton({ form }) {
       driver_city: decodedBarcode.city,
       driver_state: decodedBarcode.state,
       driver_zip: decodedBarcode.postal_code,
-      driver_dob: moment(decodedBarcode.birthday),
+      driver_dob: dayjs(decodedBarcode.birthday),
     };
 
     form.setFieldsValue(values);
@@ -55,7 +55,7 @@ export default function ContractLicenseDecodeButton({ form }) {
   return (
     <div>
       <Modal
-        visible={modalVisible}
+        open={modalVisible}
         okText={t("contracts.actions.senddltoform")}
         onOk={handleInsertForm}
         okButtonProps={{ disabled: !!!decodedBarcode }}
@@ -94,14 +94,14 @@ export default function ContractLicenseDecodeButton({ form }) {
                   {decodedBarcode.address}
                 </DataLabel>
                 <DataLabel label={t("contracts.fields.driver_dlexpiry")}>
-                  {moment(
+                  {dayjs(
-                    `20${decodedBarcode.expiration_date}${moment(
+                    `20${decodedBarcode.expiration_date}${dayjs(
                       decodedBarcode.birthday
                     ).format("DD")}`
                   ).format("MM/DD/YYYY")}
                 </DataLabel>
                 <DataLabel label={t("contracts.fields.driver_dob")}>
-                  {moment(decodedBarcode.birthday).format("MM/DD/YYYY")}
+                  {dayjs(decodedBarcode.birthday).format("MM/DD/YYYY")}
                 </DataLabel>
                 <div>
                   <Typography.Title level={4}>

client/src/components/contracts-find-modal/contracts-find-modal.container.jsx

@@ -31,7 +31,7 @@ export function ContractsFindModalContainer({
 }) {
   const { t } = useTranslation();
 
-  const { visible } = contractFinderModal;
+  const { open } = contractFinderModal;
 
   const [form] = Form.useForm();
 
@@ -52,14 +52,14 @@ export function ContractsFindModalContainer({
   };
 
   useEffect(() => {
-    if (visible) {
+    if (open) {
       form.resetFields();
     }
-  }, [visible, form]);
+  }, [open, form]);
 
   return (
     <Modal
-      visible={visible}
+      open={open}
       width="70%"
       title={t("contracts.labels.findermodal")}
       onCancel={() => toggleModalVisible()}

client/src/components/contracts-list/contracts-list.component.jsx

@@ -3,13 +3,13 @@ import { Button, Card, Input, Space, Table, Typography } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import ContractsFindModalContainer from "../contracts-find-modal/contracts-find-modal.container";
 
-import moment from "moment";
+import dayjs from "../../utils/day";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -39,7 +39,7 @@ export function ContractsList({
     sortedInfo: {},
     filteredInfo: { text: "" },
   });
-  const history = useHistory();
+  const history = useNavigate();
   const search = queryString.parse(useLocation().search);
   const { page } = search;
 
@@ -152,8 +152,8 @@ export function ContractsList({
       render: (text, record) =>
         (record.actualreturn &&
           record.start &&
-          `${moment(record.actualreturn)
+          `${dayjs(record.actualreturn)
-            .diff(moment(record.start), "days", true)
+            .diff(dayjs(record.start), "day", true)
             .toFixed(1)} days`) ||
         "",
     },
@@ -164,7 +164,7 @@ export function ContractsList({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   return (
@@ -179,7 +179,7 @@ export function ContractsList({
               <Button
                 onClick={() => {
                   delete search.search;
-                  history.push({ search: queryString.stringify(search) });
+                  history({ search: queryString.stringify(search) });
                 }}
               >
                 {t("general.actions.clear")}
@@ -196,7 +196,7 @@ export function ContractsList({
             placeholder={search.searh || t("general.labels.search")}
             onSearch={(value) => {
               search.search = value;
-              history.push({ search: queryString.stringify(search) });
+              history({ search: queryString.stringify(search) });
             }}
           />
         </Space>

client/src/components/contracts-rates-change-button/contracts-rates-change-button.component.jsx

@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Dropdown, Menu } from "antd";
+import { Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -18,20 +18,16 @@ export function ContractsRatesChangeButton({ disabled, form, bodyshop }) {
     form.setFieldsValue(rate);
   };
 
-  const menu = (
+  const menuItems = bodyshop.md_ccc_rates.map((i, idx) => ({
-    <div>
+    key: idx,
-      <Menu onClick={handleClick}>
+    label: i.label,
-        {bodyshop.md_ccc_rates.map((rate, idx) => (
+    value: i,
-          <Menu.Item value={rate} key={idx}>
+  }));
-            {rate.label}
+
-          </Menu.Item>
+  const menu = {items: menuItems, onClick: handleClick};
-        ))}
-      </Menu>
-    </div>
-  );
 
   return (
-    <Dropdown overlay={menu} disabled={disabled}>
+    <Dropdown menu={menu} disabled={disabled}>
       <a
         className="ant-dropdown-link"
         href=" #"

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -2,7 +2,7 @@ import { Card, Table } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import {pageLimit} from "../../utils/config";
@@ -13,7 +13,7 @@ export default function CourtesyCarContractListComponent({
 }) {
   const search =queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = search;
-  const history = useHistory();
+  const history = useNavigate();
 
   const { t } = useTranslation();
 
@@ -81,7 +81,7 @@ export default function CourtesyCarContractListComponent({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   return (

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -1,7 +1,8 @@
 import { WarningFilled } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import { Button, Form, Input, InputNumber, PageHeader, Space } from "antd";
+import { Button, Form, Input, InputNumber, Space } from "antd";
-import moment from "moment";
+import {PageHeader} from "@ant-design/pro-layout";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { CHECK_CC_FLEET_NUMBER } from "../../graphql/courtesy-car.queries";
@@ -263,7 +264,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
               const nextservicedate = form.getFieldValue("nextservicedate");
               const dueForService =
                 nextservicedate &&
-                moment(nextservicedate).endOf("day").isSameOrBefore(moment());
+                dayjs(nextservicedate).endOf("day").isSameOrBefore(dayjs());
 
               if (dueForService)
                 return (
@@ -304,7 +305,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
               const expires = form.getFieldValue("registrationexpires");
 
               const dateover =
-                expires && moment(expires).endOf("day").isBefore(moment());
+                expires && dayjs(expires).endOf("day").isBefore(dayjs());
 
               if (dateover)
                 return (
@@ -340,7 +341,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
               const expires = form.getFieldValue("insuranceexpires");
 
               const dateover =
-                expires && moment(expires).endOf("day").isBefore(moment());
+                expires && dayjs(expires).endOf("day").isBefore(dayjs());
 
               if (dateover)
                 return (

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -7,7 +7,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCourtesyCarReturn } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.component";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
 import { useMutation } from "@apollo/client";
 
@@ -26,7 +26,7 @@ export function CCReturnModalContainer({
   bodyshop,
 }) {
   const [loading, setLoading] = useState(false);
-  const { visible, context, actions } = courtesyCarReturnModal;
+  const { open, context, actions } = courtesyCarReturnModal;
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [updateContract] = useMutation(RETURN_CONTRACT);
@@ -64,7 +64,7 @@ export function CCReturnModalContainer({
   return (
     <Modal
       title={t("courtesycars.labels.return")}
-      visible={visible}
+      open={open}
       onCancel={() => toggleModalVisible()}
       width={"90%"}
       okText={t("general.actions.save")}
@@ -74,7 +74,7 @@ export function CCReturnModalContainer({
       <Form
         form={form}
         onFinish={handleFinish}
-        initialValues={{ fuel: 100, actualreturn: moment(new Date()) }}
+        initialValues={{ fuel: 100, actualreturn: dayjs(new Date()) }}
       >
         <CourtesyCarReturnModalComponent />
       </Form>

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -4,12 +4,11 @@ import {
   Card,
   Dropdown,
   Input,
-  Menu,
   Space,
   Table,
   Tooltip,
 } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -77,8 +76,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
         const mileageOver = nextservicekm ? nextservicekm <= mileage : false;
 
         const dueForService =
-          nextservicedate &&
+          nextservicedate && dayjs(nextservicedate).endOf('day').isSameOrBefore(dayjs());
-          moment(nextservicedate).endOf("day").isSameOrBefore(moment());
 
         return (
           <Space>
@@ -229,6 +227,27 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           (t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
       )
     : courtesycars;
+
+  const items = [
+    {
+      key: "courtesycar_inventory",
+      label: t("printcenter.courtesycarcontract.courtesy_car_inventory"),
+      onClick: () =>
+        GenerateDocument(
+          {
+            name: TemplateList("courtesycar").courtesy_car_inventory.key,
+            variables: {
+              //id: contract.id
+            },
+          },
+          {},
+          "p"
+        ),
+    },
+  ];
+
+  const menu = { items };
+
   return (
     <Card
       title={t("menus.header.courtesycars")}
@@ -237,30 +256,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           <Button onClick={() => refetch()}>
             <SyncOutlined />
           </Button>
-          <Dropdown
+          <Dropdown trigger="click" menu={menu}>
-            trigger="click"
-            overlay={
-              <Menu>
-                <Menu.Item
-                  onClick={() =>
-                    GenerateDocument(
-                      {
-                        name: TemplateList("courtesycar").courtesy_car_inventory
-                          .key,
-                        variables: {
-                          //id: contract.id
-                        },
-                      },
-                      {},
-                      "p"
-                    )
-                  }
-                >
-                  {t("printcenter.courtesycarcontract.courtesy_car_inventory")}
-                </Menu.Item>
-              </Menu>
-            }
-          >
             <Button>{t("general.labels.print")}</Button>
           </Dropdown>
           <Link to={`/manage/courtesycars/new`}>

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -3,7 +3,7 @@ import { Button, Card, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
@@ -17,7 +17,7 @@ export default function CsiResponseListPaginated({
 }) {
   const search = queryString.parse(useLocation().search);
   const { responseid, page, sortcolumn, sortorder } = search;
-  const history = useHistory();
+  const history = useNavigate();
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" },
@@ -80,18 +80,18 @@ export default function CsiResponseListPaginated({
     search.page = pagination.current;
     search.sortcolumn = sorter.columnKey;
     search.sortorder = sorter.order;
-    history.push({ search: queryString.stringify(search) });
+    history({ search: queryString.stringify(search) });
   };
 
   const handleOnRowClick = (record) => {
     if (record) {
       if (record.id) {
         search.responseid = record.id;
-        history.push({ search: queryString.stringify(search) });
+        history({ search: queryString.stringify(search) });
       }
     } else {
       delete search.responseid;
-      history.push({ search: queryString.stringify(search) });
+      history({ search: queryString.stringify(search) });
     }
   };
 

client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx

@@ -1,6 +1,6 @@
 import { Card } from "antd";
 import _ from "lodash";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -27,7 +27,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
     return <DashboardRefreshRequired {...cardProps} />;
 
   const ticketsByDate = _.groupBy(data.monthly_employee_efficiency, (item) =>
-    moment(item.date).format("YYYY-MM-DD")
+    dayjs(item.date).format("YYYY-MM-DD")
   );
 
   const listOfDays = Utils.ListOfDaysInCurrentMonth();
@@ -53,7 +53,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
       ((dailyHrs.productive - dailyHrs.actual) / dailyHrs.actual + 1) * 100;
 
     const theValue = {
-      date: moment(val).format("DD"),
+      date: dayjs(val).format("DD"),
       // ...dailyHrs,
       actual: dailyHrs.actual.toFixed(1),
       productive: dailyHrs.productive.toFixed(1),
@@ -159,9 +159,9 @@ export default function DashboardMonthlyEmployeeEfficiency({
 }
 
 export const DashboardMonthlyEmployeeEfficiencyGql = `
-  monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${moment()
+  monthly_employee_efficiency: timetickets(where: {_and: [{date: {_gte: "${dayjs()
     .startOf("month")
-    .format("YYYY-MM-DD")}"}},{date: {_lte: "${moment()
+    .format("YYYY-MM-DD")}"}},{date: {_lte: "${dayjs()
   .endOf("month")
   .format("YYYY-MM-DD")}"}} ]}) {
     actualhrs

client/src/components/dashboard-components/monthly-job-costing/monthly-job-costing.component.jsx

@@ -21,6 +21,8 @@ export default function DashboardMonthlyJobCosting({ data, ...cardProps }) {
     async function getCostingData() {
       if (data && data.monthly_sales) {
         setLoading(true);
+        console.log('defaults:')
+        console.dir(axios.defaults);
         const response = await axios.post("/job/costingmulti", {
           jobids: data.monthly_sales.map((x) => x.id),
         });

client/src/components/dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component.jsx

@@ -1,5 +1,5 @@
 import { Card } from "antd";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import _ from "lodash";
@@ -24,7 +24,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
   if (!data.monthly_sales) return <DashboardRefreshRequired {...cardProps} />;
 
   const jobsByDate = _.groupBy(data.monthly_sales, (item) =>
-    moment(item.date_invoiced).format("YYYY-MM-DD")
+    dayjs(item.date_invoiced).format("YYYY-MM-DD")
   );
 
   const listOfDays = Utils.ListOfDaysInCurrentMonth();
@@ -43,7 +43,7 @@ export default function DashboardMonthlyRevenueGraph({ data, ...cardProps }) {
     }
 
     const theValue = {
-      date: moment(val).format("DD"),
+      date: dayjs(val).format("DD"),
       dailySales: dailySales.getAmount() / 100,
       accSales:
         acc.length > 0

client/src/components/dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx

@@ -1,6 +1,6 @@
 import { Card, Statistic } from "antd";
 import Dinero from "dinero.js";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import DashboardRefreshRequired from "../refresh-required.component";
@@ -36,10 +36,10 @@ export const DashboardProjectedMonthlySalesGql = `
       _or: [
         {_and: [
           {date_invoiced:{_is_null: false }},
-          {date_invoiced: {_gte: "${moment()
+          {date_invoiced: {_gte: "${dayjs()
             .startOf("month")
             .startOf("day")
-            .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+            .toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
   .endOf("month")
   .endOf("day")
   .toISOString()}"}}]},
@@ -47,10 +47,10 @@ export const DashboardProjectedMonthlySalesGql = `
 
 _and:[
   {date_invoiced:{_is_null: true }},
-  {actual_completion: {_gte: "${moment()
+  {actual_completion: {_gte: "${dayjs()
     .startOf("month")
     .startOf("day")
-    .toISOString()}"}}, {actual_completion: {_lte: "${moment()
+    .toISOString()}"}}, {actual_completion: {_lte: "${dayjs()
   .endOf("month")
   .endOf("day")
   .toISOString()}"}}
@@ -61,10 +61,10 @@ _and:[
   {_and: [
     {date_invoiced: {_is_null: true}}, 
     {actual_completion: {_is_null: true}}
-    {scheduled_completion: {_gte: "${moment()
+    {scheduled_completion: {_gte: "${dayjs()
       .startOf("month")
       .startOf("day")
-      .toISOString()}"}}, {scheduled_completion: {_lte: "${moment()
+      .toISOString()}"}}, {scheduled_completion: {_lte: "${dayjs()
   .endOf("month")
   .endOf("day")
   .toISOString()}"}}

client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx

@@ -4,7 +4,7 @@ import {
   PauseCircleOutlined,
 } from "@ant-design/icons";
 import { Card, Space, Table, Tooltip } from "antd";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -49,14 +49,14 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         v_vin: item.job.v_vin,
         vehicleid: item.job.vehicleid,
         note: item.note,
-        start: moment(item.start).format("hh:mm a"),
+        start: dayjs(item.start).format("hh:mm a"),
         title: item.title,
       };
       appt.push(i);
     }
   });
   appt.sort(function (a, b) {
-    return new moment(a.start) - new moment(b.start);
+    return new dayjs(a.start) - new dayjs(b.start);
   });
 
   const columns = [
@@ -189,7 +189,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
   return (
     <Card
       title={t("dashboard.titles.scheduledintoday", {
-        date: moment().startOf("day").format("MM/DD/YYYY"),
+        date: dayjs().startOf("day").format("MM/DD/YYYY"),
       })}
       {...cardProps}
     >
@@ -209,9 +209,9 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
 }
 
 export const DashboardScheduledInTodayGql = `
-  scheduled_in_today: appointments(where: {start: {_gte: "${moment()
+  scheduled_in_today: appointments(where: {start: {_gte: "${dayjs()
     .startOf("day")
-    .toISOString()}", _lte: "${moment()
+    .toISOString()}", _lte: "${dayjs()
   .endOf("day")
   .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
     canceled

client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx

@@ -4,7 +4,7 @@ import {
   PauseCircleOutlined,
 } from "@ant-design/icons";
 import { Card, Space, Table, Tooltip } from "antd";
-import moment from "moment";
+import dayjs from "../../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -22,12 +22,13 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
   if (!data.scheduled_out_today)
     return <DashboardRefreshRequired {...cardProps} />;
 
-  data.scheduled_out_today.forEach((item) => {
+  const filteredScheduledOutToday = data.scheduled_out_today.map((item) => {
-    item.scheduled_completion= moment(item.scheduled_completion).format("hh:mm a")
+    return {
-  });
+      ...item,
-  data.scheduled_out_today.sort(function (a, b) {
+      scheduled_completion: dayjs(item.scheduled_completion).format("hh:mm a"),
-    return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
+      timestamp: dayjs(item.scheduled_completion).valueOf(),
-  });
+    }
+  }).sort((a, b) => a.timestamp - b.timestamp);
 
   const columns = [
     {
@@ -159,7 +160,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
   return (
     <Card
       title={t("dashboard.titles.scheduledouttoday", {
-        date: moment().startOf("day").format("MM/DD/YYYY"),
+        date: dayjs().startOf("day").format("MM/DD/YYYY"),
       })}
       {...cardProps}
     >
@@ -171,7 +172,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}
-          dataSource={data.scheduled_out_today}
+          dataSource={filteredScheduledOutToday}
         />
       </div>
     </Card>
@@ -183,8 +184,8 @@ export const DashboardScheduledOutTodayGql = `
     date_invoiced: {_is_null: true}, 
     ro_number: {_is_null: false}, 
     voided: {_eq: false}, 
-    scheduled_completion: {_gte: "${moment().startOf("day").toISOString()}", 
+    scheduled_completion: {_gte: "${dayjs().startOf("day").toISOString()}", 
-    _lte: "${moment().endOf("day").toISOString()}"}}) {
+    _lte: "${dayjs().endOf("day").toISOString()}"}}) {
       alt_transport
       clm_no
       jobid: id

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,9 +1,10 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, Menu, PageHeader, Space, notification } from "antd";
+import { Button, Dropdown, Space, notification } from "antd";
+import {PageHeader} from "@ant-design/pro-layout";
 import i18next from "i18next";
 import _ from "lodash";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useTranslation } from "react-i18next";
@@ -122,19 +123,15 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
     [data]
   );
   const existingLayoutKeys = state.items.map((i) => i.i);
-  const addComponentOverlay = (
+
-    <Menu onClick={handleAddComponent}>
+  const menuItems = Object.keys(componentList).map((key) => ({
-      {Object.keys(componentList).map((key) => (
+    key: key,
-        <Menu.Item
+    label: componentList[key].label,
-          key={key}
+    value: key,
-          value={key}
+    disabled: existingLayoutKeys.includes(key),
-          disabled={existingLayoutKeys.includes(key)}
+  }));
-        >
+
-          {componentList[key].label}
+  const menu = {items: menuItems, onClick: handleAddComponent};
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
 
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -146,7 +143,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
-            <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
+            <Dropdown menu={menu} trigger={["click"]}>
               <Button>{t("dashboard.actions.addcomponent")}</Button>
             </Dropdown>
           </Space>
@@ -276,7 +273,7 @@ const componentList = {
   },
   ScheduleInToday: {
     label: i18next.t("dashboard.titles.scheduledintoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
+      date: dayjs().startOf("day").format("MM/DD/YYYY"),
     }),
     component: DashboardScheduledInToday,
     gqlFragment: DashboardScheduledInTodayGql,
@@ -287,7 +284,7 @@ const componentList = {
   },
   ScheduleOutToday: {
     label: i18next.t("dashboard.titles.scheduledouttoday", {
-      date: moment().startOf("day").format("MM/DD/YYYY"),
+      date: dayjs().startOf("day").format("MM/DD/YYYY"),
     }),
     component: DashboardScheduledOutToday,
     gqlFragment: DashboardScheduledOutTodayGql,
@@ -310,10 +307,10 @@ const createDashboardQuery = (state) => {
          ${componentBasedAdditions || ""}
       monthly_sales: jobs(where: {_and: [
         { voided: {_eq: false}},
-        {date_invoiced: {_gte: "${moment()
+        {date_invoiced: {_gte: "${dayjs()
           .startOf("month")
           .startOf("day")
-          .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+          .toISOString()}"}}, {date_invoiced: {_lte: "${dayjs()
     .endOf("month")
     .endOf("day")
     .toISOString()}"}}]}) {

client/src/components/data-label/data-label.component.jsx

@@ -6,13 +6,13 @@ export default function DataLabel({
   hideIfNull,
   children,
   vertical,
-  visible = true,
+  open = true,
   valueStyle = {},
   valueClassName,
   onValueClick,
   ...props
 }) {
-  if (!visible || (hideIfNull && !!!children)) return null;
+  if (!open || (hideIfNull && !!!children)) return null;
 
   return (
     <div {...props} style={{ display: "flex" }}>

client/src/components/dms-cdk-makes/dms-cdk-makes.component.jsx

@@ -18,7 +18,7 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(DmsCdkVehicles);
 
 export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [selectedModel, setSelectedModel] = useState(null);
   const { t } = useTranslation();
 
@@ -51,14 +51,14 @@ export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
     <>
       <Modal
         width={"90%"}
-        visible={visible}
+        open={open}
-        onCancel={() => setVisible(false)}
+        onCancel={() => setOpen(false)}
         onOk={() => {
           form.setFieldsValue({
             dms_make: selectedModel.makecode,
             dms_model: selectedModel.modelcode,
           });
-          setVisible(false);
+          setOpen(false);
         }}
       >
         {error && <AlertComponent error={error.message} />}
@@ -90,7 +90,7 @@ export function DmsCdkVehicles({ bodyshop, form, socket, job }) {
       </Modal>
       <Button
         onClick={() => {
-          setVisible(true);
+          setOpen(true);
           callSearch({
             variables: {
               search: job && job.v_model_desc && job.v_model_desc.substr(0, 3),

client/src/components/dms-customer-selector/dms-customer-selector.component.jsx

@@ -21,29 +21,29 @@ export default connect(
 export function DmsCustomerSelector({ bodyshop }) {
   const { t } = useTranslation();
   const [customerList, setcustomerList] = useState([]);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [selectedCustomer, setSelectedCustomer] = useState(null);
   const [dmsType, setDmsType] = useState("cdk");
 
   socket.on("cdk-select-customer", (customerList, callback) => {
-    setVisible(true);
+    setOpen(true);
     setDmsType("cdk");
     setcustomerList(customerList);
   });
   socket.on("pbs-select-customer", (customerList, callback) => {
-    setVisible(true);
+    setOpen(true);
     setDmsType("pbs");
     setcustomerList(customerList);
   });
 
   const onUseSelected = () => {
-    setVisible(false);
+    setOpen(false);
     socket.emit(`${dmsType}-selected-customer`, selectedCustomer);
     setSelectedCustomer(null);
   };
 
   const onUseGeneric = () => {
-    setVisible(false);
+    setOpen(false);
     socket.emit(
       `${dmsType}-selected-customer`,
       bodyshop.cdk_configuration.generic_customer_number
@@ -52,7 +52,7 @@ export function DmsCustomerSelector({ bodyshop }) {
   };
 
   const onCreateNew = () => {
-    setVisible(false);
+    setOpen(false);
     socket.emit(`${dmsType}-selected-customer`, null);
     setSelectedCustomer(null);
   };
@@ -114,7 +114,7 @@ export function DmsCustomerSelector({ bodyshop }) {
     },
   ];
 
-  if (!visible) return null;
+  if (!open) return null;
   return (
     <Col span={24}>
       <Table

client/src/components/dms-log-events/dms-log-events.component.jsx

@@ -1,5 +1,5 @@
 import { Divider, Space, Tag, Timeline } from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -22,20 +22,22 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
 
 export function DmsLogEvents({ socket, logs, bodyshop }) {
   return (
-    <Timeline pending
+    <Timeline
+      pending
       reverse={true}
-    >
+      items={logs.map((log, idx) => ({
-      {logs.map((log, idx) => (
+        key: idx,
-        <Timeline.Item key={idx} color={LogLevelHierarchy(log.level)}>
+        color: LogLevelHierarchy(log.level),
+        children: (
           <Space wrap align="start" style={{}}>
             <Tag color={LogLevelHierarchy(log.level)}>{log.level}</Tag>
-            <span>{moment(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
+            <span>{dayjs(log.timestamp).format("MM/DD/YYYY HH:mm:ss")}</span>
             <Divider type="vertical" />
             <span>{log.message}</span>
           </Space>
-        </Timeline.Item>
+        ),
-      ))}
+      }))}
-    </Timeline>
+    />
   );
 }
 

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -7,7 +7,6 @@ import {
     Form,
     Input,
     InputNumber,
-  Menu,
     Select,
     Space,
     Statistic,
@@ -15,7 +14,7 @@ import {
     Typography,
 } from "antd";
 import Dinero from "dinero.js";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
@@ -100,8 +99,8 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                     "UNKNOWN",
                             })
                             : ""
-          }`.substr(0, 239),
+                    }`.slice(0, 239),
-          inservicedate: moment("2019-01-01"),
+                    inservicedate: dayjs("2019-01-01"),
                 }}
             >
                 <LayoutFormRow grow>
@@ -291,38 +290,23 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                                                 label={
                                                     <div>
                                                         {t("jobs.fields.dms.payer.controlnumber")}{" "}
-                            <Dropdown
+                                                        <Dropdown menu={{
-                              overlay={
+                                                            items: bodyshop.cdk_configuration.controllist?.map((key, idx) => ({
-                                <Menu>
+                                                                key: idx,
-                                  {bodyshop.cdk_configuration.controllist &&
+                                                                label: key.name,
-                                    bodyshop.cdk_configuration.controllist.map(
+                                                                onClick: () => {
-                                      (key, idx) => (
-                                        <Menu.Item
-                                          key={idx}
-                                          onClick={() => {
                                                                     form.setFieldsValue({
-                                              payers: form
+                                                                        payers: form.getFieldValue("payers").map((row, mapIndex) => {
-                                                .getFieldValue("payers")
+                                                                            if (index !== mapIndex) return row;
-                                                .map((row, mapIndex) => {
-                                                  if (index !== mapIndex)
-                                                    return row;
-
                                                                             return {
                                                                                 ...row,
-                                                    controlnumber:
+                                                                                controlnumber: key.controlnumber,
-                                                      key.controlnumber,
                                                                             };
                                                                         }),
                                                                     });
-                                          }}
+                                                                },
-                                        >
+                                                            }))
-                                          {key.name}
+                                                        }}>
-                                        </Menu.Item>
-                                      )
-                                    )}
-                                </Menu>
-                              }
-                            >
                                                             <a href=" #" onClick={(e) => e.preventDefault()}>
                                                                 <DownOutlined/>
                                                             </a>

client/src/components/document-editor/document-editor.component.jsx

@@ -60,9 +60,10 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       markerArea.current = new markerjs2.MarkerArea(imgRef.current);
 
       // attach an event handler to assign annotated image back to our image element
-      markerArea.current.addCloseEventListener((closeEvent) => {});
+      markerArea.current.addEventListener("close", (closeEvent) => {});
       
-      markerArea.current.addRenderEventListener((dataUrl) => {
+      markerArea.current.addEventListener("render", (event) => {
+        const dataUrl = event.dataUrl;
         imgRef.current.src = dataUrl;
         markerArea.current.close();
         triggerUpload(dataUrl);

client/src/components/document-editor/document-editor.container.jsx

@@ -4,7 +4,7 @@ import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useLocation } from "react-router";
+import { useLocation } from "react-router-dom";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
 import { setBodyshop } from "../../redux/user/user.actions";

client/src/components/documents-upload/documents-upload.utility.js

@@ -57,7 +57,7 @@ export const uploadToCloudinary = async (
   let tags = `${bodyshop.imexshopid},${
     tagsArray ? tagsArray.map((tag) => `${tag},`) : ""
   }`;
-  //  let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
+  //  let eager = import.meta.env.VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
 
   //Get the signed url.
 
@@ -96,14 +96,14 @@ export const uploadToCloudinary = async (
 
   formData.append("upload_preset", upload_preset);
 
-  formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
+  formData.append("api_key", import.meta.env.VITE_APP_CLOUDINARY_API_KEY);
   formData.append("public_id", public_id);
   formData.append("tags", tags);
   formData.append("timestamp", timestamp);
   formData.append("signature", signature);
 
   const cloudinaryUploadResponse = await cleanAxios.post(
-    `${process.env.REACT_APP_CLOUDINARY_ENDPOINT_API}/${DetermineFileType(
+    `${import.meta.env.VITE_APP_CLOUDINARY_ENDPOINT_API}/${DetermineFileType(
       fileType
     )}/upload`,
     formData,

client/src/components/email-overlay/email-overlay.component.jsx

@@ -1,26 +1,12 @@
 import {UploadOutlined, UserAddOutlined} from "@ant-design/icons";
-import {
+import {Button, Divider, Dropdown, Form, Input, Select, Space, Tabs, Upload,} from "antd";
-  Button,
-  Divider,
-  Dropdown,
-  Form,
-  Input,
-  Menu,
-  Select,
-  Space,
-  Tabs,
-  Upload,
-} from "antd";
 import _ from "lodash";
 import React from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
 import {createStructuredSelector} from "reselect";
 import {selectEmailConfig} from "../../redux/email/email.selectors";
-import {
+import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
 import {CreateExplorerLinkForJob} from "../../utils/localmedia";
 import EmailDocumentsComponent from "../email-documents/email-documents.component";
 
@@ -64,43 +50,40 @@ export function EmailOverlayComponent({
         });
     };
 
-  const menu = (
+    const emailsToMenu = {
-    <div>
+        items: [
-      <Menu onClick={handleClick}>
+            ...bodyshop.employees
-        {bodyshop.employees
                 .filter((e) => e.user_email)
-          .map((e, idx) => (
+                .map((e, idx) => ({
-            <Menu.Item value={e.user_email} key={idx}>
+                    key: idx,
-              {`${e.first_name} ${e.last_name}`}
+                    label: `${e.first_name} ${e.last_name}`,
-            </Menu.Item>
+                    value: e.user_email,
-          ))}
+                })),
-        {bodyshop.md_to_emails.map((e, idx) => (
+            ...bodyshop.md_to_emails.map((e, idx) => ({
-          <Menu.Item value={e.emails} key={idx + "group"}>
+                key: idx + "group",
-            {e.label}
+                label: e.label,
-          </Menu.Item>
+                value: e.emails,
-        ))}
+            })),
-      </Menu>
+        ],
-    </div>
+        onClick: handleClick,
-  );
+    };
-
+    const menuCC = {
-  const menuCC = (
+        items: [
-    <div>
+            ...bodyshop.employees
-      <Menu onClick={handle_CC_Click}>
-        {bodyshop.employees
                 .filter((e) => e.user_email)
-          .map((e, idx) => (
+                .map((e, idx) => ({
-            <Menu.Item value={e.user_email} key={idx}>
+                    key: idx,
-              {`${e.first_name} ${e.last_name}`}
+                    label: `${e.first_name} ${e.last_name}`,
-            </Menu.Item>
+                    value: e.user_email,
-          ))}
+                })),
-        {bodyshop.md_to_emails.map((e, idx) => (
+            ...bodyshop.md_to_emails.map((e, idx) => ({
-          <Menu.Item value={e.emails} key={idx + "group"}>
+                key: idx + "group",
-            {e.label}
+                label: e.label,
-          </Menu.Item>
+                value: e.emails,
-        ))}
+            })),
-      </Menu>
+        ],
-    </div>
+        onClick: handle_CC_Click,
-  );
+    };
 
     return (
         <div>
@@ -129,7 +112,7 @@ export function EmailOverlayComponent({
                 label={
                     <Space>
                         {t("emails.fields.to")}
-            <Dropdown overlay={menu}>
+                        <Dropdown menu={emailsToMenu}>
                             <a
                                 className="ant-dropdown-link"
                                 href=" #"
@@ -154,7 +137,7 @@ export function EmailOverlayComponent({
                 label={
                     <Space>
                         {t("emails.fields.cc")}
-            <Dropdown overlay={menuCC}>
+                        <Dropdown menu={menuCC}>
                             <a
                                 className="ant-dropdown-link"
                                 href=" #"
@@ -203,15 +186,24 @@ export function EmailOverlayComponent({
                 }}
             </Form.Item>
 
-      <Tabs>
+            <Tabs
-        <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
+                defaultActiveKey="documents"
+                items={[
+                    {
+                        key: "documents",
+                        label: t("emails.labels.documents"),
+                        children: (
                             <EmailDocumentsComponent
                                 selectedMediaState={selectedMediaState}
                                 form={form}
                             />
-        </Tabs.TabPane>
+                        ),
-
+                    },
-        <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
+                    {
+                        key: "attachments",
+                        label: t("emails.labels.attachments"),
+                        children: (
+                            <>
                                 {bodyshop.uselocalmediaserver && emailConfig.jobid && (
                                     <a href={CreateExplorerLinkForJob({jobid: emailConfig.jobid})}>
                                         <Button>{t("documents.labels.openinexplorer")}</Button>
@@ -260,8 +252,11 @@ export function EmailOverlayComponent({
                                         </>
                                     </Upload.Dragger>
                                 </Form.Item>
-        </Tabs.TabPane>
+                            </>
-      </Tabs>
+                        ),
+                    },
+                ]}
+            />
         </div>
     );
 }

client/src/components/email-overlay/email-overlay.container.jsx

@@ -174,7 +174,7 @@ export function EmailOverlayContainer({
   return (
     <Modal
       destroyOnClose={true}
-      visible={modalVisible}
+      open={modalVisible}
       maskClosable={false}
       width={"80%"}
       onOk={() => form.submit()}
@@ -186,7 +186,6 @@ export function EmailOverlayContainer({
       okText={t("general.actions.send")}
       okButtonProps={{
         loading: sending,
-
         disabled:
           selectedMedia &&
           (selectedMedia

client/src/components/email-test/email-test-component.jsx

@@ -7,7 +7,7 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import moment from "moment";
+import dayjs from "../../utils/day";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -27,16 +27,16 @@ export function EmailTestComponent({ currentUser, setEmailOptions }) {
         variables: {
           ...(values.start
             ? {
-                start: moment(values.start).startOf("day").format("YYYY-MM-DD"),
+                start: dayjs(values.start).startOf("day").format("YYYY-MM-DD"),
               }
             : {}),
           ...(values.end
-            ? { end: moment(values.end).endOf("day").format("YYYY-MM-DD") }
+            ? { end: dayjs(values.end).endOf("day").format("YYYY-MM-DD") }
             : {}),
           ...(values.start
-            ? { starttz: moment(values.start).startOf("day") }
+            ? { starttz: dayjs(values.start).startOf("day") }
             : {}),
-          ...(values.end ? { endtz: moment(values.end).endOf("day") } : {}),
+          ...(values.end ? { endtz: dayjs(values.end).endOf("day") } : {}),
 
           ...(values.id ? { id: values.id } : {}),
         },

client/src/components/eula/eula.component.jsx

@@ -0,0 +1,250 @@
+import React, {useCallback, useEffect, useRef, useState} from "react";
+import {Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row} from "antd";
+import Markdown from "react-markdown";
+import {createStructuredSelector} from "reselect";
+import {selectCurrentEula, selectCurrentUser} from "../../redux/user/user.selectors";
+import {connect} from "react-redux";
+import {FormDatePicker} from "../form-date-picker/form-date-picker.component";
+import {INSERT_EULA_ACCEPTANCE} from "../../graphql/user.queries";
+import {useMutation} from "@apollo/client";
+import {acceptEula} from "../../redux/user/user.actions";
+import {useTranslation} from "react-i18next";
+import day from '../../utils/day';
+
+import './eula.styles.scss';
+
+const Eula = ({currentEula, currentUser, acceptEula}) => {
+    const [formReady, setFormReady] = useState(false);
+    const [hasEverScrolledToBottom, setHasEverScrolledToBottom] = useState(false);
+    const [insertEulaAcceptance] = useMutation(INSERT_EULA_ACCEPTANCE);
+    const [form] = Form.useForm();
+    const markdownCardRef = useRef(null);
+    const {t} = useTranslation();
+    const [api, contextHolder] = notification.useNotification();
+
+    const handleScroll = useCallback((e) => {
+        const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
+        if (bottom && !hasEverScrolledToBottom) {
+            setHasEverScrolledToBottom(true);
+        } else if (e.target.scrollHeight <= e.target.clientHeight && !hasEverScrolledToBottom) {
+            setHasEverScrolledToBottom(true);
+        }
+    }, [hasEverScrolledToBottom, setHasEverScrolledToBottom]);
+
+    useEffect(() => {
+        handleScroll({target: markdownCardRef.current});
+    }, [handleScroll]);
+
+    const handleChange = useCallback(() => {
+        form.validateFields({validateOnly: true})
+            .then(() => setFormReady(hasEverScrolledToBottom))
+            .catch(() => setFormReady(false));
+    }, [form, hasEverScrolledToBottom]);
+
+    useEffect(() => {
+        handleChange();
+    }, [handleChange, hasEverScrolledToBottom, form]);
+
+    const onFinish = async ({acceptTerms, ...formValues}) => {
+        const eulaId = currentEula.id;
+        const useremail = currentUser.email;
+
+        try {
+            const {accepted_terms, ...otherFormValues} = formValues;
+
+            // Trim the values of the fields before submitting
+            const trimmedFormValues = Object.entries(otherFormValues).reduce((acc, [key, value]) => {
+                acc[key] = typeof value === 'string' ? value.trim() : value;
+                return acc;
+            }, {});
+
+            await insertEulaAcceptance({
+                variables: {
+                    eulaAcceptance: {
+                        eulaid: eulaId,
+                        useremail,
+                        ...otherFormValues,
+                        ...trimmedFormValues,
+                        date_accepted: new Date(),
+                    }
+                }
+            });
+            acceptEula();
+        } catch (err) {
+            api.error({
+                message: t('eula.errors.acceptance.message'),
+                description: t('eula.errors.acceptance.description'),
+                placement: 'bottomRight',
+                duration: 5000,
+
+            });
+            console.log(`${t('eula.errors.acceptance.message')}`);
+            console.dir({
+                message: err.message,
+                stack: err.stack,
+            });
+        }
+    };
+
+    return (
+        <>
+            {contextHolder}
+            <Modal
+                title={t('eula.titles.modal')}
+                className='eula-modal'
+                width={'100vh'}
+                open={currentEula}
+                footer={() => (
+                    <Button
+                        className='eula-accept-button'
+                        form='tosForm'
+                        type="primary"
+                        size='large'
+                        htmlType="submit"
+                        disabled={!formReady}
+                        children={t('eula.buttons.accept')}
+                    />
+                )}
+                closable={false}
+            >
+                <Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
+                    <div id='markdowndiv' className='eula-markdown-div'>
+                        <Markdown children={currentEula?.content?.replace(/\\n|\\r|\\n\\r|\\r\\n/g, '\n')}/>
+                    </div>
+                </Card>
+
+                <EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t}/>
+
+                {!hasEverScrolledToBottom && (
+                    <Card className='eula-never-scrolled' type='inner'>
+                        <h3>{t('eula.content.never_scrolled')}</h3>
+                    </Card>
+                )}
+            </Modal>
+        </>
+    )
+}
+
+const EulaFormComponent = ({form, handleChange, onFinish, t}) => (
+    <Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}>
+        <Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}>
+            <Row gutter={24}>
+                <Col span={12}>
+                    <Form.Item
+                        label={t('eula.labels.first_name')}
+                        name="first_name"
+                        rules={[{
+                            required: true,
+                            validator: (_, value) =>
+                                value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.first_name'))),
+                        },]}
+                    >
+                        <Input placeholder={t('eula.labels.first_name')}
+                               aria-label={t('eula.labels.first_name')}/>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item
+                        label={t('eula.labels.last_name')}
+                        name="last_name"
+                        rules={[{
+                            required: true,
+                            validator: (_, value) =>
+                                value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.last_name'))),
+                        }]}
+                    >
+                        <Input placeholder={t('eula.labels.last_name')}
+                               aria-label={t('eula.labels.last_name')}/>
+                    </Form.Item>
+                </Col>
+            </Row>
+            <Row gutter={24}>
+                <Col span={12}>
+                    <Form.Item
+                        label={t('eula.labels.business_name')}
+                        name="business_name"
+                        rules={[{
+                            required: true,
+                            validator: (_, value) =>
+                                value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.business_name'))),
+                        }]}
+                    >
+                        <Input placeholder={t('eula.labels.business_name')} aria-label={t('eula.labels.business_name')}/>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item
+                        label={t('eula.labels.phone_number')}
+                        name="phone_number"
+                        rules={[
+                            {
+                                pattern: /^(\+\d{1,2}\s?)?1?-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/,
+                                message: t('eula.messages.phone_number'),
+                            }
+                        ]}
+                    >
+                        <Input placeholder={t('eula.labels.phone_number')}
+                               aria-label={t('eula.labels.phone_number')}/>
+                    </Form.Item>
+                </Col>
+            </Row>
+            <Row gutter={24}>
+                <Col span={12}>
+                    <Form.Item
+                        label={t('eula.labels.address')}
+                        name="address"
+                    >
+                        <Input placeholder={t('eula.labels.address')} aria-label={t('eula.labels.address')}/>
+                    </Form.Item>
+                </Col>
+                <Col span={12}>
+                    <Form.Item
+                        label={t('eula.labels.date_accepted')}
+                        name="date_accepted"
+                        rules={[
+                            {
+                                required: true,
+                                validator: (_, value) => {
+                                    if (day(value).isSame(day(), 'day')) {
+                                        return Promise.resolve();
+                                    }
+                                    return Promise.reject(new Error(t('eula.messages.date_accepted')));
+                                }
+                            },
+                        ]}
+                    >
+                        <FormDatePicker onChange={handleChange} onlyToday aria-label={t('eula.labels.date_accepted')}/>
+                    </Form.Item>
+                </Col>
+            </Row>
+            <Row gutter={24}>
+                <Col span={24}>
+                    <Form.Item
+                        name="accepted_terms"
+                        valuePropName="checked"
+                        rules={[
+                            {
+                                required: true,
+                                validator: (_, value) =>
+                                    value ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.accepted_terms'))),
+                            },
+                        ]}
+                    >
+                        <Checkbox aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
+                    </Form.Item>
+                </Col>
+            </Row>
+        </Form>
+    </Card>
+);
+
+const mapStateToProps = createStructuredSelector({
+    currentEula: selectCurrentEula,
+    currentUser: selectCurrentUser,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    acceptEula: () => dispatch(acceptEula()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Eula);

client/src/components/eula/eula.styles.scss

@@ -0,0 +1,21 @@
+.eula-modal {
+  top: 20px;
+}
+
+.eula-markdown-card {
+  max-height: 50vh;
+  overflow-y: auto;
+  background-color: lightgray;
+}
+
+.eula-markdown-div {
+  padding: 0 10px 0 10px;
+}
+
+.eula-never-scrolled {
+  text-align: center;
+}
+
+.eula-accept-button {
+  width: 100%;
+}

client/src/components/feature-wrapper/feature-wrapper.component.jsx

@@ -1,4 +1,4 @@
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -34,7 +34,7 @@ function FeatureWrapper({
 export function HasFeatureAccess({ featureName, bodyshop }) {
   return (
     bodyshop.features.allAccess ||
-    moment(bodyshop.features[featureName]).isAfter(moment())
+    dayjs(bodyshop.features[featureName]).isAfter(dayjs())
   );
 }
 

client/src/components/form-date-picker/form-date-picker.component.jsx

@@ -1,13 +1,12 @@
 import {DatePicker} from "antd";
-import moment from "moment";
+import dayjs from "../../utils/day";
 import React, {useRef} from "react";
-//To be used as a form element only.
 
 import {connect} from "react-redux";
 import {createStructuredSelector} from "reselect";
 import {selectBodyshop} from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
     bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
@@ -23,6 +22,7 @@ export function FormDatePicker({
                                    onChange,
                                    onBlur,
                                    onlyFuture,
+                                   onlyToday,
                                    isDateOnly = true,
                                    ...restProps
                                }) {
@@ -37,8 +37,7 @@ export function FormDatePicker({
     const handleKeyDown = (e) => {
         if (e.key.toLowerCase() === "t") {
             if (onChange) {
-        onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
+                onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
-        // if (ref.current && ref.current.blur) ref.current.blur();
             }
         } else if (e.key.toLowerCase() === "enter") {
             if (ref.current && ref.current.blur) ref.current.blur();
@@ -49,14 +48,23 @@ export function FormDatePicker({
         const v = e.target.value;
         if (!v) return;
 
-    const _a = moment(
+        const formats = ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY", "MM/DD/YYYY"];
-      v,
+        let _a;
-      ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
-      "en",
-      false
-    );
 
-    if (_a.isValid() && value && value.isValid && value.isValid()) {
+        // Iterate through formats to find the correct one
+        for (let format of formats) {
+            _a = dayjs(v, format);
+            if (v === _a.format(format)) {
+                break;
+            }
+        }
+
+        if (
+            _a.isValid()
+            && value
+            && value.isValid
+            && value.isValid()
+        ) {
             _a.set({
                 hours: value.hours(),
                 minutes: value.minutes(),
@@ -67,10 +75,10 @@ export function FormDatePicker({
 
         if (_a.isValid() && onChange) {
             if (onlyFuture) {
-        if (moment().subtract(1, "day").isBefore(_a)) {
+                if (dayjs().subtract(1, "day").isBefore(_a)) {
                     onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
                 } else {
-          onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
+                    onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
                 }
             } else {
                 onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
@@ -82,15 +90,19 @@ export function FormDatePicker({
         <div onKeyDown={handleKeyDown}>
             <DatePicker
                 ref={ref}
-        value={value ? moment(value) : null}
+                value={value ? dayjs(value) : null}
                 onChange={handleChange}
                 format={dateFormat}
                 onBlur={onBlur || handleBlur}
                 showToday={false}
                 disabledTime
-        {...(onlyFuture && {
+                disabledDate={(d) => {
-          disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
+                    if (onlyToday) {
-        })}
+                        return !dayjs().isSame(d, 'day');
+                    } else if (onlyFuture) {
+                        return dayjs().subtract(1, "day").isAfter(d);
+                    }
+                }}
                 {...restProps}
             />
         </div>