feature/IO-3000-Migrate-MSG-to-Sockets - Progress Checkpoint

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

.circleci/config.yml

@@ -179,6 +179,37 @@ jobs:
           job_type: deployment
           pipeline_number: << pipeline.number >>
 
+  promanager-app-build:
+    docker:
+      - image: cimg/node:18.18.2
+
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:production:promanager
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
+
+      - aws-s3/sync:
+          from: dist
+          to: "s3://promanager-production/"
+          arguments: "--exclude '*.map'"
+      - jira/notify:
+          environment: Production (ProManager) - Front End
+          environment_type: production
+          pipeline_id: << pipeline.id >>
+          job_type: deployment
+          pipeline_number: << pipeline.number >>
+
   test-rome-hasura-migrate:
     docker:
       - image: cimg/node:18.18.2
@@ -237,6 +268,37 @@ jobs:
           job_type: deployment
           pipeline_number: << pipeline.number >>
 
+  test-promanager-app-build:
+    docker:
+      - image: cimg/node:18.18.2
+
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test:promanager
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
+
+      - aws-s3/sync:
+          from: dist
+          to: "s3://promanager-testing/"
+          arguments: "--exclude '*.map'"
+      - jira/notify:
+          environment: Test (ProManager) - Front End
+          environment_type: testing
+          pipeline_id: << pipeline.id >>
+          job_type: deployment
+          pipeline_number: << pipeline.number >>
+
   test-hasura-migrate:
     docker:
       - image: cimg/node:18.18.2
@@ -396,6 +458,14 @@ workflows:
           filters:
             branches:
               only: test-AIO
+      - test-promanager-app-build:
+          filters:
+            branches:
+              only: test-AIO
+      - promanager-app-build:
+          filters:
+            branches:
+              only: master-AIO
       - test-rome-hasura-migrate:
           secret: ${HASURA_ROME_TEST_SECRET}
           filters:

.gitattributes

@@ -1,81 +1 @@
-# Ensure all text files use LF for line endings
 * text eol=lf
-
-# Binary files should not be modified by Git
-*.png binary
-*.jpg binary
-*.jpeg binary
-*.gif binary
-*.ico binary
-*.webp binary
-*.svg binary
-
-# Fonts
-*.woff binary
-*.woff2 binary
-*.ttf binary
-*.otf binary
-*.eot binary
-
-# Videos
-*.mp4 binary
-*.mov binary
-*.avi binary
-*.mkv binary
-*.webm binary
-
-# Audio
-*.mp3 binary
-*.wav binary
-*.ogg binary
-*.flac binary
-
-# Archives and compressed files
-*.zip binary
-*.gz binary
-*.tar binary
-*.7z binary
-*.rar binary
-
-# PDF and documents
-*.pdf binary
-*.doc binary
-*.docx binary
-*.xls binary
-*.xlsx binary
-*.ppt binary
-*.pptx binary
-
-# Exclude JSON and other data files from text processing, if necessary
-*.json text
-*.xml text
-*.csv text
-
-# Scripts and code files should maintain LF endings
-*.js text eol=lf
-*.jsx text eol=lf
-*.ts text eol=lf
-*.tsx text eol=lf
-*.css text eol=lf
-*.scss text eol=lf
-*.html text eol=lf
-*.yml text eol=lf
-*.yaml text eol=lf
-*.md text eol=lf
-*.sh text eol=lf
-*.py text eol=lf
-*.rb text eol=lf
-*.java text eol=lf
-*.php text eol=lf
-*.sql text eol=lf
-
-# Git configuration files
-.gitattributes text eol=lf
-.gitignore text eol=lf
-*.gitattributes text eol=lf
-
-# Exclude some other potential binary files
-*.db binary
-*.sqlite binary
-*.exe binary
-*.dll binary

.platform/hooks/predeploy/01-install-dd.sh

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-DD_API_KEY=58d91898a70c6fd659f6eea768a57976 DD_SITE="us3.datadoghq.com" bash -c "$(curl -L https://install.datadoghq.com/scripts/install_script_agent7.sh)"
-
-echo "Datadog agent installed."

.vscode/settings.json

@@ -38,6 +38,5 @@
     "smartscheduling",
     "timetickets",
     "touchtime"
-  ],
+  ]
-  "eslint.workingDirectories": ["./", "./client"]
 }

Dockerfile

@@ -7,6 +7,7 @@ RUN dnf install -y git \
     && dnf install -y nodejs \
     && dnf clean all
 
+
 # Install dependencies required by node-canvas
 RUN dnf install -y \
     gcc \
@@ -18,22 +19,9 @@ RUN dnf install -y \
     libpng-devel \
     make \
     python3 \
-    fontconfig \
-    freetype \
     python3-pip \
-    wget \
-    unzip \
     && dnf clean all
 
-# Install Montserrat fonts
-RUN cd /tmp \
-    && wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip \
-    && unzip montserrat.zip -d montserrat \
-    && mv montserrat/montserrat/*.ttf /usr/share/fonts \
-    && fc-cache -fv \
-    && rm -rf /tmp/montserrat /tmp/montserrat.zip \
-    && echo "Montserrat fonts installed and cached successfully."
-
 # Set the working directory
 WORKDIR /app
 

_reference/JSON/BodyshopFeatures.json

@@ -10,8 +10,5 @@
   "courtesycars": "date",
   "media": "date",
   "visualboard": "date",
-  "scoreboard": "date",
+  "scoreboard": "date"
-  "checklist": "date",
-  "smartscheduling" :"date",
-  "roguard": "date"
 }

certs/io-ftp-test.key

@@ -1,12 +0,0 @@
------BEGIN OPENSSH PRIVATE KEY-----
-b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAArAAAABNlY2RzYS
-1zaGEyLW5pc3RwNTIxAAAACG5pc3RwNTIxAAAAhQQBYJnAujo17diR0fM2Ze1d1Ft6XHm5
-U31pXdFEN+rGC4SoYTdZE8q3relxMS5GwwBOvgvVUuayfid2XS8ls/CMDiMBJAYqEK4CRY
-PbbPB7lLnMWsF7muFhvs+SIpPQC+vtDwM2TKlxF0Y8p+iVRpvCADoggsSze7skmJWKmMTt
-8jEdEOcAAAEQIyXsOSMl7DkAAAATZWNkc2Etc2hhMi1uaXN0cDUyMQAAAAhuaXN0cDUyMQ
-AAAIUEAWCZwLo6Ne3YkdHzNmXtXdRbelx5uVN9aV3RRDfqxguEqGE3WRPKt63pcTEuRsMA
-Tr4L1VLmsn4ndl0vJbPwjA4jASQGKhCuAkWD22zwe5S5zFrBe5rhYb7PkiKT0Avr7Q8DNk
-ypcRdGPKfolUabwgA6IILEs3u7JJiVipjE7fIxHRDnAAAAQUO5dO9G7i0bxGTP0zV3eIwv
-5g0NhrQJfW/bMHS6XWwaxdpr+QZ+DbBJVzZPwYC0wLMW4bJAf+kjqUnj4wGocoTeAAAAD2
-lvLWZ0cC10ZXN0LWtleQECAwQ=
------END OPENSSH PRIVATE KEY-----

certs/io-ftp-test.key.pub

@@ -1 +0,0 @@
-ecdsa-sha2-nistp521 AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBAFgmcC6OjXt2JHR8zZl7V3UW3pceblTfWld0UQ36sYLhKhhN1kTyret6XExLkbDAE6+C9VS5rJ+J3ZdLyWz8IwOIwEkBioQrgJFg9ts8HuUucxawXua4WG+z5Iik9AL6+0PAzZMqXEXRjyn6JVGm8IAOiCCxLN7uySYlYqYxO3yMR0Q5w== io-ftp-test-key

certs/io-ftp-test.ppk

@@ -1,12 +0,0 @@
-PuTTY-User-Key-File-3: ecdsa-sha2-nistp521
-Encryption: none
-Comment: io-ftp-test-key
-Public-Lines: 4
-AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBAFgmcC6OjXt
-2JHR8zZl7V3UW3pceblTfWld0UQ36sYLhKhhN1kTyret6XExLkbDAE6+C9VS5rJ+
-J3ZdLyWz8IwOIwEkBioQrgJFg9ts8HuUucxawXua4WG+z5Iik9AL6+0PAzZMqXEX
-Rjyn6JVGm8IAOiCCxLN7uySYlYqYxO3yMR0Q5w==
-Private-Lines: 2
-AAAAQUO5dO9G7i0bxGTP0zV3eIwv5g0NhrQJfW/bMHS6XWwaxdpr+QZ+DbBJVzZP
-wYC0wLMW4bJAf+kjqUnj4wGocoTe
-Private-MAC: d67001d47e13c43dc8bdb9c68a25356a96c1c4a6714f3c5a1836fca646b78b54

client/.env.development.promanager

@@ -0,0 +1,14 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
+VITE_APP_GA_CODE=231099835
+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"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
+VITE_APP_CLOUDINARY_API_KEY=957865933348715
+VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
+VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+VITE_APP_AXIOS_BASE_API_URL=/api/
+VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_INSTANCE=PROMANAGER

client/.env.production.promanager

@@ -0,0 +1,15 @@
+GENERATE_SOURCEMAP=true
+VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
+VITE_APP_GA_CODE=231103507
+VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
+VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
+VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
+VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
+VITE_APP_INSTANCE=PROMANAGER

client/.env.test.promanager

@@ -0,0 +1,15 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
+VITE_APP_GA_CODE=231099835
+VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
+VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+VITE_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
+VITE_APP_IS_TEST=true
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_INSTANCE=PROMANAGER

client/eslint.config.js

@@ -1,21 +0,0 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import pluginReact from "eslint-plugin-react";
-
-/** @type {import('eslint').Linter.Config[]} */
-
-export default [
-  {
-    files: ["**/*.{js,mjs,cjs,jsx}"]
-  },
-  { languageOptions: { globals: globals.browser } },
-  pluginJs.configs.recommended,
-  {
-    ...pluginReact.configs.flat.recommended,
-    rules: {
-      ...pluginReact.configs.flat.recommended.rules,
-      "react/prop-types": 0
-    }
-  },
-  pluginReact.configs.flat["jsx-runtime"]
-];

client/index.html

@@ -1,26 +1,29 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
-    <meta charset="utf-8" />
+  <meta charset="utf-8"/>
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0" />
+  <meta http-equiv="Expires" content="0">
-    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-    <link rel="icon" href="/favicon.png" />
+  <link rel="icon" href="/favicon.png"/>
-    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-    <link rel="icon" href="/ro-favicon.png" />
+  <link rel="icon" href="/ro-favicon.png"/>
-    <% } %>
+  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
+  <link rel="icon" href="/pm/pm-favicon.ico"/>
+  <% } %>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <meta name="theme-color" content="#1690ff" />
+  <meta name="theme-color" content="#1690ff"/>
-    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+  <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
-    <link rel="apple-touch-icon" href="/logo192.png" />
+  <!-- TODO:AIo Update the individual logos for each.-->
-    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF" />
+  <link rel="apple-touch-icon" href="/logo192.png"/>
-    <!--
+  <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
+  <!--
     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/
   -->
-    <!--
+  <!--
     Notice the use of %PUBLIC_URL% in the tags above.
     It will be replaced with the URL of the `public` folder during the build.
     Only files inside the `public` folder can be referenced from the HTML.
@@ -29,90 +32,95 @@
     work correctly both with client-side routing and a non-root public URL.
     Learn how to configure a non-root public URL by running `npm run build`.
   -->
-    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-    <meta name="description" content="ImEX Online" />
+  <meta name="description" content="ImEX Online"/>
-    <title>ImEX Online</title>
+  <title>ImEX Online</title>
-    <script type="text/javascript">
+  <script type="text/javascript">
-      window.$crisp = [];
+    window.$crisp = [];
-      window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
+    window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
-      (function () {
+    (function () {
-        d = document;
+      d = document;
-        s = d.createElement("script");
+      s = d.createElement('script');
-        s.src = "https://client.crisp.chat/l.js";
+      s.src = 'https://client.crisp.chat/l.js';
-        s.async = 1;
+      s.async = 1;
-        d.getElementsByTagName("head")[0].appendChild(s);
+      d.getElementsByTagName('head')[0].appendChild(s);
-      })();
+    })();
-    </script>
+  </script>
-    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-    <meta name="description" content="Rome Online" />
+  <meta name="description" content="Rome Online"/>
-    <title>Rome Online</title>
+  <title>Rome Online</title>
-    <script type="text/javascript" id="zsiqchat">
+  <script type="text/javascript" id="zsiqchat">
-      var $zoho = $zoho || {};
+    var $zoho = $zoho || {};
-      $zoho.salesiq = $zoho.salesiq || {
+    $zoho.salesiq = $zoho.salesiq || {
-        widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
+      widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
-        values: {},
+      values: {},
-        ready: function () {}
+      ready: function () {
-      };
+      }
-      var d = document;
+    };
-      s = d.createElement("script");
+    var d = document;
-      s.type = "text/javascript";
+    s = d.createElement("script");
-      s.id = "zsiqscript";
+    s.type = "text/javascript";
-      s.defer = true;
+    s.id = "zsiqscript";
-      s.src = "https://salesiq.zohopublic.com/widget";
+    s.defer = true;
-      t = d.getElementsByTagName("script")[0];
+    s.src = "https://salesiq.zohopublic.com/widget";
-      t.parentNode.insertBefore(s, t);
+    t = d.getElementsByTagName("script")[0];
-    </script>
+    t.parentNode.insertBefore(s, t);
+  </script>
 
-    <% } %>
+  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-    <script>
+  <title>ProManager</title>
-      !(function () {
+  <meta name="description" content="ProManager"/>
-        "use strict";
-        var e = [
-          "debug",
-          "destroy",
-          "do",
-          "help",
-          "identify",
-          "is",
-          "off",
-          "on",
-          "ready",
-          "render",
-          "reset",
-          "safe",
-          "set"
-        ];
-        if (window.noticeable) console.warn("Noticeable SDK code snippet loaded more than once");
-        else {
-          var n = (window.noticeable = window.noticeable || []);
 
-          function t(e) {
+  <% } %>
-            return function () {
+  <script>
-              var t = Array.prototype.slice.call(arguments);
+    !(function () {
-              return t.unshift(e), n.push(t), n;
+      'use strict';
-            };
+      var e = [
-          }
+        'debug',
+        'destroy',
+        'do',
+        'help',
+        'identify',
+        'is',
+        'off',
+        'on',
+        'ready',
+        'render',
+        'reset',
+        'safe',
+        'set',
+      ];
+      if (window.noticeable) console.warn('Noticeable SDK code snippet loaded more than once');
+      else {
+        var n = (window.noticeable = window.noticeable || []);
 
-          !(function () {
+        function t(e) {
-            for (var o = 0; o < e.length; o++) {
+          return function () {
-              var r = e[o];
+            var t = Array.prototype.slice.call(arguments);
-              n[r] = t(r);
+            return t.unshift(e), n.push(t), n;
-            }
+          };
-          })(),
-            (function () {
-              var e = document.createElement("script");
-              (e.async = !0), (e.src = "https://sdk.noticeable.io/l.js");
-              var n = document.head;
-              n.insertBefore(e, n.firstChild);
-            })();
         }
-      })();
-    </script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
 
-    <script type="module" src="src/index.jsx"></script>
+        !(function () {
-  </body>
+          for (var o = 0; o < e.length; o++) {
+            var r = e[o];
+            n[r] = t(r);
+          }
+        })(),
+          (function () {
+            var e = document.createElement('script');
+            (e.async = !0), (e.src = 'https://sdk.noticeable.io/l.js');
+            var n = document.head;
+            n.insertBefore(e, n.firstChild);
+          })();
+      }
+    })();
+  </script>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+
+<script type="module" src="src/index.jsx"></script>
+</body>
 </html>

client/package-lock.json

@@ -85,13 +85,11 @@
         "web-vitals": "^3.5.2"
       },
       "devDependencies": {
-        "@ant-design/icons": "^5.5.1",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@babel/preset-react": "^7.24.7",
         "@dotenvx/dotenvx": "^1.14.1",
         "@emotion/babel-plugin": "^11.12.0",
         "@emotion/react": "^11.13.3",
-        "@eslint/js": "^9.15.0",
         "@sentry/webpack-plugin": "^2.22.4",
         "@testing-library/cypress": "^10.0.2",
         "browserslist": "^4.23.3",
@@ -99,11 +97,9 @@
         "chalk": "^5.3.0",
         "cross-env": "^7.0.3",
         "cypress": "^13.14.2",
-        "eslint": "^8.57.1",
+        "eslint": "^8.57.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-cypress": "^2.15.1",
-        "eslint-plugin-react": "^7.37.2",
-        "globals": "^15.12.0",
         "memfs": "^4.12.0",
         "os-browserify": "^0.3.0",
         "react-error-overlay": "6.0.11",
@@ -1528,16 +1524,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/plugin-transform-computed-properties": {
       "version": "7.24.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.6.tgz",
@@ -2550,15 +2536,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/types": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.7.tgz",
@@ -2975,6 +2952,358 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
@@ -3100,13 +3429,12 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.15.0",
+      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
-      "license": "MIT",
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@fingerprintjs/fingerprintjs": {
@@ -3705,14 +4033,12 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.13.0",
+      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
-      "deprecated": "Use @eslint/config-array instead",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.3",
+        "@humanwhocodes/object-schema": "^2.0.2",
         "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
@@ -3725,7 +4051,6 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -3736,7 +4061,6 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3761,9 +4085,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true
-      "dev": true,
-      "license": "BSD-3-Clause"
     },
     "node_modules/@icons/material": {
       "version": "0.2.4",
@@ -4714,7 +5036,6 @@
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -4899,6 +5220,105 @@
         "@sentry/cli-win32-x64": "2.36.2"
       }
     },
+    "node_modules/@sentry/cli-darwin": {
+      "version": "2.36.2",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.36.2.tgz",
+      "integrity": "sha512-To64Pq+pcmecEr+gFXiqaZy8oKhyLQLXO/SVDdf16CUL2qpuahE3bO5h9kFacMxPPxOWcgc2btF+4gYa1+bQTA==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm": {
+      "version": "2.36.2",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.36.2.tgz",
+      "integrity": "sha512-cRSvOQK97WM0m03k/c+LVAWT042Qz887WP/2Gy64eUi/PfArwb+QZZnsu4FCygxK9jnzgLTo4+ewoJVi17xaLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm64": {
+      "version": "2.36.2",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.36.2.tgz",
+      "integrity": "sha512-g+FFmj1oJ2iRMsfs1ORz6THOO6MiAR55K9YxdZUBvqfoHLjSMt7Jst43sbZ3O0u55hnfixSKLNzDaTGaM/jxIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-i686": {
+      "version": "2.36.2",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.36.2.tgz",
+      "integrity": "sha512-rjxTw/CMd0Q7qlOb7gWFiwn3hJIxNkhbn1bOU54xj9CZvQSCvh10l7l4Y9o8znJLl41c5kMXVq8yuYws9A7AGQ==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-x64": {
+      "version": "2.36.2",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.36.2.tgz",
+      "integrity": "sha512-cF8IPFTlwiC7JgVvSW4rS99sxb1W1N//iANxuzqaDswUnmJLi0AJy/jES87qE5GRB6ljaPVMvH7Kq0OCp3bvPA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-i686": {
+      "version": "2.36.2",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.36.2.tgz",
+      "integrity": "sha512-YDH/Kcd8JAo1Bg4jtSwF8dr7FZZ8QbYLMx8q/5eenHpq6VdOgPENsTvayLW3cAjWLcm44u8Ed/gcEK0z1IxQmQ==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@sentry/cli-win32-x64": {
       "version": "2.36.2",
       "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.36.2.tgz",
@@ -6127,21 +6547,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.tosorted": {
+    "node_modules/array.prototype.toreversed": {
-      "version": "1.1.4",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
-      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
+      "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3",
+        "es-abstract": "^1.22.3",
-        "es-errors": "^1.3.0",
+        "es-errors": "^1.1.0",
         "es-shim-unscopables": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
@@ -8431,11 +8859,10 @@
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.2.0",
+      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
-      "integrity": "sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==",
+      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -8444,13 +8871,12 @@
         "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.4",
+        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
         "has-property-descriptors": "^1.0.2",
         "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
         "internal-slot": "^1.0.7",
-        "iterator.prototype": "^1.1.3",
+        "iterator.prototype": "^1.1.2",
         "safe-array-concat": "^1.1.2"
       },
       "engines": {
@@ -8580,18 +9006,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.1",
+      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
-      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
+        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -8933,36 +9357,35 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.37.2",
+      "version": "7.34.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
-      "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
+      "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "array-includes": "^3.1.8",
+        "array-includes": "^3.1.7",
-        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.findlast": "^1.2.4",
         "array.prototype.flatmap": "^1.3.2",
-        "array.prototype.tosorted": "^1.1.4",
+        "array.prototype.toreversed": "^1.1.2",
+        "array.prototype.tosorted": "^1.1.3",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.1.0",
+        "es-iterator-helpers": "^1.0.17",
         "estraverse": "^5.3.0",
-        "hasown": "^2.0.2",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.8",
+        "object.entries": "^1.1.7",
-        "object.fromentries": "^2.0.8",
+        "object.fromentries": "^2.0.7",
-        "object.values": "^1.2.0",
+        "object.hasown": "^1.1.3",
+        "object.values": "^1.1.7",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.matchall": "^4.0.10"
-        "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
         "node": ">=4"
       },
       "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
@@ -9081,16 +9504,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
     "node_modules/eslint/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -9813,7 +10226,6 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -10014,16 +10426,11 @@
       "integrity": "sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA=="
     },
     "node_modules/globals": {
-      "version": "15.12.0",
+      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
-      "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">=4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/globalthis": {
@@ -10626,7 +11033,6 @@
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
       "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -10820,7 +11226,6 @@
       "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
       "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -10893,7 +11298,6 @@
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
       "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -11017,7 +11421,6 @@
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
       "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -11120,7 +11523,6 @@
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
       "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -11145,7 +11547,6 @@
       "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
       "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "get-intrinsic": "^1.2.4"
@@ -11201,20 +11602,16 @@
       "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
     },
     "node_modules/iterator.prototype": {
-      "version": "1.1.3",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
-      "integrity": "sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==",
+      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "define-properties": "^1.2.1",
         "get-intrinsic": "^1.2.1",
         "has-symbols": "^1.0.3",
         "reflect.getprototypeof": "^1.0.4",
         "set-function-name": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
       }
     },
     "node_modules/jake": {
@@ -12873,6 +13270,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/object.hasown": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.4.tgz",
+      "integrity": "sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object.values": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
@@ -14804,7 +15218,6 @@
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
       "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -15793,17 +16206,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/string.prototype.repeat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
-      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5"
-      }
-    },
     "node_modules/string.prototype.trim": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
@@ -17463,14 +17865,13 @@
       }
     },
     "node_modules/which-builtin-type": {
-      "version": "1.1.4",
+      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz",
-      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
+      "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "function.prototype.name": "^1.1.6",
+        "function.prototype.name": "^1.1.5",
-        "has-tostringtag": "^1.0.2",
+        "has-tostringtag": "^1.0.0",
         "is-async-function": "^2.0.0",
         "is-date-object": "^1.0.5",
         "is-finalizationregistry": "^1.0.2",
@@ -17479,8 +17880,8 @@
         "is-weakref": "^1.0.2",
         "isarray": "^2.0.5",
         "which-boxed-primitive": "^1.0.2",
-        "which-collection": "^1.0.2",
+        "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.15"
+        "which-typed-array": "^1.1.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17493,15 +17894,13 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
       "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true,
+      "dev": true
-      "license": "MIT"
     },
     "node_modules/which-collection": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
       "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "is-map": "^2.0.3",
         "is-set": "^2.0.3",

client/package.json

@@ -90,18 +90,29 @@
     "build": "dotenvx run --env-file=.env.development.imex -- vite build",
     "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
     "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
+    "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
     "preview:imex": "dotenvx run --env-file=.env.development.imex -- vite preview",
     "preview:rome": "dotenvx run --env-file=.env.development.rome -- vite preview",
+    "preview:promanager": "dotenvx run --env-file=.env.development.promanager -- vite preview",
     "build:test:imex": "env-cmd -f .env.test.imex npm run build",
     "build:test:rome": "env-cmd -f .env.test.rome npm run build",
+    "build:test:promanager": "env-cmd -f .env.test.promanager npm run build",
     "build:production:imex": "env-cmd -f .env.production.imex npm run build",
     "build:production:rome": "env-cmd -f .env.production.rome npm run build",
+    "build:production:promanager": "env-cmd -f .env.production.promanager npm run 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:imex": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:cypress/recommended"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -121,13 +132,11 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.5.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.24.7",
     "@dotenvx/dotenvx": "^1.14.1",
     "@emotion/babel-plugin": "^11.12.0",
     "@emotion/react": "^11.13.3",
-    "@eslint/js": "^9.15.0",
     "@sentry/webpack-plugin": "^2.22.4",
     "@testing-library/cypress": "^10.0.2",
     "browserslist": "^4.23.3",
@@ -135,11 +144,9 @@
     "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.14.2",
-    "eslint": "^8.57.1",
+    "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-react": "^7.37.2",
-    "globals": "^15.12.0",
     "memfs": "^4.12.0",
     "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",

client/public/firebase-messaging-sw.js

@@ -1,6 +1,6 @@
 // Scripts for firebase and firebase messaging
-importScripts("https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js");
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
-importScripts("https://www.gstatic.com/firebasejs/10.14.1/firebase-messaging-compat.js");
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
 
 // Initialize the Firebase app in the service worker by passing the generated config
 let firebaseConfig;
@@ -14,7 +14,7 @@ switch (this.location.hostname) {
       storageBucket: "imex-dev.appspot.com",
       messagingSenderId: "759548147434",
       appId: "1:759548147434:web:e8239868a48ceb36700993",
-      measurementId: "G-K5XRBVVB4S"
+      measurementId: "G-K5XRBVVB4S",
     };
     break;
   case "test.imex.online":
@@ -24,7 +24,7 @@ switch (this.location.hostname) {
       projectId: "imex-test",
       storageBucket: "imex-test.appspot.com",
       messagingSenderId: "991923618608",
-      appId: "1:991923618608:web:633437569cdad78299bef5"
+      appId: "1:991923618608:web:633437569cdad78299bef5",
       // measurementId: "${config.measurementId}",
     };
     break;
@@ -38,7 +38,7 @@ switch (this.location.hostname) {
       storageBucket: "imex-prod.appspot.com",
       messagingSenderId: "253497221485",
       appId: "1:253497221485:web:3c81c483b94db84b227a64",
-      measurementId: "G-NTWBKG2L0M"
+      measurementId: "G-NTWBKG2L0M",
     };
 }
 
@@ -49,6 +49,8 @@ const messaging = firebase.messaging();
 
 messaging.onBackgroundMessage(function (payload) {
   // Customize notification here
-  console.log("[firebase-messaging-sw.js] Received background message ", payload);
+  const channel = new BroadcastChannel("imex-sw-messages");
-  self.registration.showNotification(notificationTitle, notificationOptions);
+  channel.postMessage(payload);
+
+  //self.registration.showNotification(notificationTitle, notificationOptions);
 });

client/src/App/App.jsx

@@ -96,7 +96,8 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         LogRocket.init(
           InstanceRenderMgr({
             imex: "gvfvfw/bodyshopapp",
-            rome: "rome-online/rome-online"
+            rome: "rome-online/rome-online",
+            promanager: "" // TODO: AIO Add in log rocket for promanager instances.
           })
         );
       }
@@ -133,7 +134,8 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         <LoadingSpinner
           message={InstanceRenderMgr({
             imex: t("titles.imexonline"),
-            rome: t("titles.romeonline")
+            rome: t("titles.romeonline"),
+            promanager: t("titles.promanager")
           })}
         />
       }
@@ -142,7 +144,8 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         currentUser={currentUser}
         workspaceCode={InstanceRenderMgr({
           imex: null,
-          rome: "9BkbEseqNqxw8jUH"
+          rome: "9BkbEseqNqxw8jUH",
+          promanager: "aoJoEifvezYI0Z0P"
         })}
       />
 

client/src/App/themeProvider.js

@@ -26,11 +26,13 @@ const defaultTheme = {
   token: {
     colorPrimary: InstanceRenderMgr({
       imex: "#1890ff",
-      rome: "#326ade"
+      rome: "#326ade",
+      promanager: "#1d69a6"
     }),
     colorInfo: InstanceRenderMgr({
       imex: "#1890ff",
-      rome: "#326ade"
+      rome: "#326ade",
+      promanager: "#1d69a6"
     })
   }
 };

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

@@ -228,6 +228,7 @@ export function BillEnterModalLinesComponent({
                 }}
               </Form.Item>
             )
+            //Do not need to set for promanager as it will default to Rome.
           })
       },
       {
@@ -461,6 +462,7 @@ export function BillEnterModalLinesComponent({
 
       ...InstanceRenderManager({
         rome: [],
+        promanager: [],
         imex: [
           {
             title: t("billlines.fields.federal_tax_applicable"),
@@ -474,6 +476,7 @@ export function BillEnterModalLinesComponent({
                 initialValue: InstanceRenderManager({
                   imex: true,
                   rome: false,
+                  promanager: false
                 }),
                 name: [field.name, "applicable_taxes", "federal"]
               };
@@ -500,6 +503,7 @@ export function BillEnterModalLinesComponent({
 
       ...InstanceRenderManager({
         rome: [],
+        promanager: [],
         imex: [
           {
             title: t("billlines.fields.local_tax_applicable"),

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

@@ -2,7 +2,6 @@ import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
@@ -14,10 +13,8 @@ import { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import { FaTasks } from "react-icons/fa";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -173,8 +170,6 @@ export function BillsListTableComponent({
         )
     : [];
 
-  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
-
   return (
     <Card
       title={t("bills.labels.bills")}
@@ -186,7 +181,6 @@ export function BillsListTableComponent({
           {job && job.converted ? (
             <>
               <Button
-                disabled={!hasBillsAccess}
                 onClick={() => {
                   setBillEnterContext({
                     actions: { refetch: billsQuery.refetch },
@@ -196,10 +190,9 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>
+                {t("jobs.actions.postbills")}
               </Button>
               <Button
-                disabled={!hasBillsAccess}
                 onClick={() => {
                   setReconciliationContext({
                     actions: { refetch: billsQuery.refetch },
@@ -210,7 +203,7 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                <LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
+                {t("jobs.actions.reconcile")}
               </Button>
             </>
           ) : null}
@@ -218,7 +211,6 @@ export function BillsListTableComponent({
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}
-            disabled={!hasBillsAccess}
             onChange={(e) => {
               e.preventDefault();
               setSearchText(e.target.value);
@@ -234,13 +226,8 @@ export function BillsListTableComponent({
         }}
         columns={columns}
         rowKey="id"
-        dataSource={hasBillsAccess ? filteredBills : []}
+        dataSource={filteredBills}
         onChange={handleTableChange}
-        locale={{
-          ...(!hasBillsAccess && {
-            emptyText: <UpsellComponent upsell={upsellEnum().bills.general} />
-          })
-        }}
       />
     </Card>
   );

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

@@ -1,6 +1,6 @@
-import { CopyFilled, DeleteFilled } from "@ant-design/icons";
+import { DeleteFilled, CopyFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, message, notification, Row, Space, Spin, Statistic } from "antd";
+import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, message, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -23,14 +23,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) =>
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type })),
-    dispatch(
-      insertAuditTrail({
-        jobid,
-        operation,
-        type
-      })
-    ),
   toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment"))
 });
 
@@ -46,6 +39,7 @@ const CardPaymentModalComponent = ({
   const [form] = Form.useForm();
   const [paymentLink, setPaymentLink] = useState();
   const [loading, setLoading] = useState(false);
+  // const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
 
@@ -54,33 +48,24 @@ const CardPaymentModalComponent = ({
     skip: !context?.jobid
   });
 
-  const collectIPayFields = () => {
+  //Initialize the intellipay window.
-    const iPayFields = document.querySelectorAll(".ipayfield");
-    const iPayData = {};
-    iPayFields.forEach((field) => {
-      iPayData[field.dataset.ipayname] = field.value;
-    });
-    return iPayData;
-  };
-
   const SetIntellipayCallbackFunctions = () => {
     console.log("*** Set IntelliPay callback functions.");
-
     window.intellipay.runOnClose(() => {
       //window.intellipay.initialize();
     });
 
-    window.intellipay.runOnApproval(() => {
+    window.intellipay.runOnApproval(async function (response) {
       //2024-04-25: Nothing is going to happen here anymore. We'll completely rely on the callback.
       //Add a slight delay to allow the refetch to properly get the data.
       setTimeout(() => {
-        if (actions?.refetch) actions.refetch();
+        if (actions && actions.refetch && typeof actions.refetch === "function") actions.refetch();
         setLoading(false);
         toggleModalVisible();
       }, 750);
     });
 
-    window.intellipay.runOnNonApproval(async (response) => {
+    window.intellipay.runOnNonApproval(async function (response) {
       // Mutate unsuccessful payment
 
       const { payments } = form.getFieldsValue();
@@ -113,21 +98,16 @@ const CardPaymentModalComponent = ({
     //Validate
     try {
       await form.validateFields();
-    } catch {
+    } catch (error) {
       setLoading(false);
       return;
     }
 
-    const iPayData = collectIPayFields();
-    const { payments } = form.getFieldsValue();
-
     try {
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
-        paymentSplitMeta: form.getFieldsValue(),
+        paymentSplitMeta: form.getFieldsValue()
-        iPayData: iPayData,
-        comment: btoa(JSON.stringify({ payments, userEmail: currentUser.email }))
       });
 
       if (window.intellipay) {
@@ -136,8 +116,8 @@ const CardPaymentModalComponent = ({
         SetIntellipayCallbackFunctions();
         window.intellipay.autoOpen();
       } else {
-        const rg = document.createRange();
+        var rg = document.createRange();
-        const node = rg.createContextualFragment(response.data);
+        let node = rg.createContextualFragment(response.data);
         document.documentElement.appendChild(node);
         SetIntellipayCallbackFunctions();
         window.intellipay.isAutoOpen = true;
@@ -157,27 +137,25 @@ const CardPaymentModalComponent = ({
     //Validate
     try {
       await form.validateFields();
-    } catch {
+    } catch (error) {
       setLoading(false);
       return;
     }
 
-    const iPayData = collectIPayFields();
-
     try {
       const { payments } = form.getFieldsValue();
       const response = await axios.post("/intellipay/generate_payment_url", {
         bodyshop,
-        amount: payments.reduce((acc, val) => acc + (val?.amount || 0), 0),
+        amount: payments?.reduce((acc, val) => {
-        account: payments && data?.jobs?.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null,
+          return acc + (val?.amount || 0);
+        }, 0),
+        account: payments && data && data.jobs.length > 0 ? data.jobs.map((j) => j.ro_number).join(", ") : null,
         comment: btoa(JSON.stringify({ payments, userEmail: currentUser.email })),
-        paymentSplitMeta: form.getFieldsValue(),
+        paymentSplitMeta: form.getFieldsValue()
-        iPayData: iPayData
       });
-
+      if (response.data) {
-      if (response?.data?.shorUrl) {
+        setPaymentLink(response.data?.shorUrl);
-        setPaymentLink(response.data.shorUrl);
+        navigator.clipboard.writeText(response.data?.shorUrl);
-        await navigator.clipboard.writeText(response.data.shorUrl);
         message.success(t("general.actions.copied"));
       }
       setLoading(false);
@@ -201,44 +179,67 @@ const CardPaymentModalComponent = ({
           }}
         >
           <Form.List name={["payments"]}>
-            {(fields, { add, remove }) => (
+            {(fields, { add, remove, move }) => {
-              <div>
+              return (
-                {fields.map((field, index) => (
+                <div>
-                  <Form.Item key={field.key}>
+                  {fields.map((field, index) => (
-                    <Row gutter={[16, 16]}>
+                    <Form.Item key={field.key}>
-                      <Col span={16}>
+                      <Row gutter={[16, 16]}>
-                        <Form.Item
+                        <Col span={16}>
-                          key={`${index}jobid`}
+                          <Form.Item
-                          label={t("jobs.fields.ro_number")}
+                            key={`${index}jobid`}
-                          name={[field.name, "jobid"]}
+                            label={t("jobs.fields.ro_number")}
-                          rules={[{ required: true }]}
+                            name={[field.name, "jobid"]}
-                        >
+                            rules={[
-                          <JobSearchSelectComponent notExported={false} clm_no />
+                              {
-                        </Form.Item>
+                                required: true
-                      </Col>
+                                //message: t("general.validation.required"),
-                      <Col span={6}>
+                              }
-                        <Form.Item
+                            ]}
-                          key={`${index}amount`}
+                          >
-                          label={t("payments.fields.amount")}
+                            <JobSearchSelectComponent notExported={false} clm_no />
-                          name={[field.name, "amount"]}
+                          </Form.Item>
-                          rules={[{ required: true }]}
+                        </Col>
-                        >
+                        <Col span={6}>
-                          <CurrencyFormItemComponent />
+                          <Form.Item
-                        </Form.Item>
+                            key={`${index}amount`}
-                      </Col>
+                            label={t("payments.fields.amount")}
-                      <Col span={2}>
+                            name={[field.name, "amount"]}
-                        <DeleteFilled style={{ margin: "1rem" }} onClick={() => remove(field.name)} />
+                            rules={[
-                      </Col>
+                              {
-                    </Row>
+                                required: true
+                                //message: t("general.validation.required"),
+                              }
+                            ]}
+                          >
+                            <CurrencyFormItemComponent />
+                          </Form.Item>
+                        </Col>
+                        <Col span={2}>
+                          <DeleteFilled
+                            style={{ margin: "1rem" }}
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                        </Col>
+                      </Row>
+                    </Form.Item>
+                  ))}
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() => {
+                        add();
+                      }}
+                      style={{ width: "100%" }}
+                    >
+                      {t("general.actions.add")}
+                    </Button>
                   </Form.Item>
-                ))}
+                </div>
-                <Form.Item>
+              );
-                  <Button type="dashed" onClick={() => add()} style={{ width: "100%" }}>
+            }}
-                    {t("general.actions.add")}
-                  </Button>
-                </Form.Item>
-              </div>
-            )}
           </Form.List>
 
           <Form.Item
@@ -282,7 +283,9 @@ const CardPaymentModalComponent = ({
           >
             {() => {
               const { payments } = form.getFieldsValue();
-              const totalAmountToCharge = payments?.reduce((acc, val) => acc + (val?.amount || 0), 0);
+              const totalAmountToCharge = payments?.reduce((acc, val) => {
+                return acc + (val?.amount || 0);
+              }, 0);
               return (
                 <Space style={{ float: "right" }}>
                   <Statistic title="Amount To Charge" value={totalAmountToCharge} precision={2} />

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

@@ -1,50 +1,89 @@
 import { useApolloClient } from "@apollo/client";
-import { getToken } from "@firebase/messaging";
+import { getToken, onMessage } from "@firebase/messaging";
+import { Button, notification, Space } from "antd";
 import axios from "axios";
-import React, { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import SocketContext from "../../contexts/SocketIO/socketContext";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
+import FcmHandler from "../../utils/fcm-handler";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
-import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();
   const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
 
   useEffect(() => {
     if (!bodyshop || !bodyshop.messagingservicesid) return;
 
-    async function SubscribeToTopicForFCMNotification() {
+    async function SubscribeToTopic() {
       try {
-        await requestForToken();
+        const r = await axios.post("/notifications/subscribe", {
-        await axios.post("/notifications/subscribe", {
           fcm_tokens: await getToken(messaging, {
             vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
           }),
           type: "messaging",
           imexshopid: bodyshop.imexshopid
         });
+        console.log("FCM Topic Subscription", r.data);
       } catch (error) {
         console.log("Error attempting to subscribe to messaging topic: ", error);
+        notification.open({
+          key: "fcm",
+          type: "warning",
+          message: t("general.errors.fcm"),
+          btn: (
+            <Space>
+              <Button
+                onClick={async () => {
+                  await requestForToken();
+                  SubscribeToTopic();
+                }}
+              >
+                {t("general.actions.tryagain")}
+              </Button>
+              <Button
+                onClick={() => {
+                  const win = window.open(
+                    "https://help.imex.online/en/article/enabling-notifications-o978xi/",
+                    "_blank"
+                  );
+                  win.focus();
+                }}
+              >
+                {t("general.labels.help")}
+              </Button>
+            </Space>
+          )
+        });
       }
     }
 
-    SubscribeToTopicForFCMNotification();
+    SubscribeToTopic();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bodyshop]);
 
-    //Register WS handlers
+  useEffect(() => {
-    if (socket && socket.connected) {
+    function handleMessage(payload) {
-      registerMessagingHandlers({ socket, client });
+      FcmHandler({
+        client,
+        payload: (payload && payload.data && payload.data.data) || payload.data
+      });
     }
 
+    let stopMessageListener, channel;
+    try {
+      stopMessageListener = onMessage(messaging, handleMessage);
+      channel = new BroadcastChannel("imex-sw-messages");
+      channel.addEventListener("message", handleMessage);
+    } catch (error) {
+      console.log("Unable to set event listeners.");
+    }
     return () => {
-      if (socket && socket.connected) {
+      stopMessageListener && stopMessageListener();
-        unregisterMessagingHandlers({ socket });
+      channel && channel.removeEventListener("message", handleMessage);
-      }
     };
-  }, [bodyshop, socket, t, client]);
+  }, [client]);
 
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 

client/src/components/chat-affix/registerMessagingSocketHandlers.js

@@ -1,434 +0,0 @@
-import { CONVERSATION_LIST_QUERY, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
-import { gql } from "@apollo/client";
-
-const logLocal = (message, ...args) => {
-  if (import.meta.env.VITE_APP_IS_TEST || !import.meta.env.PROD) {
-    console.log(`==================== ${message} ====================`);
-    console.dir({ ...args });
-  }
-};
-
-// Utility function to enrich conversation data
-const enrichConversation = (conversation, isOutbound) => ({
-  ...conversation,
-  updated_at: conversation.updated_at || new Date().toISOString(),
-  unreadcnt: conversation.unreadcnt || 0,
-  archived: conversation.archived || false,
-  label: conversation.label || null,
-  job_conversations: conversation.job_conversations || [],
-  messages_aggregate: conversation.messages_aggregate || {
-    __typename: "messages_aggregate",
-    aggregate: {
-      __typename: "messages_aggregate_fields",
-      count: isOutbound ? 0 : 1
-    }
-  },
-  __typename: "conversations"
-});
-
-export const registerMessagingHandlers = ({ socket, client }) => {
-  if (!(socket && client)) return;
-
-  const handleNewMessageSummary = async (message) => {
-    const { conversationId, newConversation, existingConversation, isoutbound } = message;
-
-    logLocal("handleNewMessageSummary - Start", { message, isNew: !existingConversation });
-
-    const queryVariables = { offset: 0 };
-
-    if (!existingConversation && conversationId) {
-      // Attempt to read from the cache to determine if this is actually a new conversation
-      try {
-        const cachedConversation = client.cache.readFragment({
-          id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-          fragment: gql`
-            fragment ExistingConversationCheck on conversations {
-              id
-            }
-          `
-        });
-
-        if (cachedConversation) {
-          logLocal("handleNewMessageSummary - Existing Conversation inferred from cache", {
-            conversationId
-          });
-          return handleNewMessageSummary({
-            ...message,
-            existingConversation: true
-          });
-        }
-      } catch (error) {
-        logLocal("handleNewMessageSummary - Cache miss", { conversationId });
-      }
-    }
-
-    // Handle new conversation
-    if (!existingConversation && newConversation?.phone_num) {
-      logLocal("handleNewMessageSummary - New Conversation", newConversation);
-
-      try {
-        const queryResults = client.cache.readQuery({
-          query: CONVERSATION_LIST_QUERY,
-          variables: queryVariables
-        });
-
-        const existingConversations = queryResults?.conversations || [];
-        const enrichedConversation = enrichConversation(newConversation, isoutbound);
-
-        if (!existingConversations.some((conv) => conv.id === enrichedConversation.id)) {
-          client.cache.modify({
-            id: "ROOT_QUERY",
-            fields: {
-              conversations(existingConversations = []) {
-                return [enrichedConversation, ...existingConversations];
-              }
-            }
-          });
-        }
-      } catch (error) {
-        console.error("Error updating cache for new conversation:", error);
-      }
-      return;
-    }
-
-    // Handle existing conversation
-    if (existingConversation) {
-      try {
-        client.cache.modify({
-          id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-          fields: {
-            updated_at: () => new Date().toISOString(),
-            archived: () => false,
-            messages_aggregate(cached = { aggregate: { count: 0 } }) {
-              const currentCount = cached.aggregate?.count || 0;
-              if (!isoutbound) {
-                return {
-                  __typename: "messages_aggregate",
-                  aggregate: {
-                    __typename: "messages_aggregate_fields",
-                    count: currentCount + 1
-                  }
-                };
-              }
-              return cached;
-            }
-          }
-        });
-      } catch (error) {
-        console.error("Error updating cache for existing conversation:", error);
-      }
-
-      return;
-    }
-
-    logLocal("New Conversation Summary finished without work", { message });
-  };
-
-  const handleNewMessageDetailed = (message) => {
-    const { conversationId, newMessage } = message;
-
-    logLocal("handleNewMessageDetailed - Start", message);
-
-    try {
-      // Check if the conversation exists in the cache
-      const queryResults = client.cache.readQuery({
-        query: GET_CONVERSATION_DETAILS,
-        variables: { conversationId }
-      });
-
-      if (!queryResults?.conversations_by_pk) {
-        console.warn("Conversation not found in cache:", { conversationId });
-        return;
-      }
-
-      // Append the new message to the conversation's message list using cache.modify
-      client.cache.modify({
-        id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-        fields: {
-          messages(existingMessages = []) {
-            return [...existingMessages, newMessage];
-          }
-        }
-      });
-
-      logLocal("handleNewMessageDetailed - Message appended successfully", {
-        conversationId,
-        newMessage
-      });
-    } catch (error) {
-      console.error("Error updating conversation messages in cache:", error);
-    }
-  };
-
-  const handleMessageChanged = (message) => {
-    if (!message) {
-      logLocal("handleMessageChanged - No message provided", message);
-      return;
-    }
-
-    logLocal("handleMessageChanged - Start", message);
-
-    try {
-      client.cache.modify({
-        id: client.cache.identify({ __typename: "conversations", id: message.conversationid }),
-        fields: {
-          messages(existingMessages = [], { readField }) {
-            return existingMessages.map((messageRef) => {
-              // Check if this is the message to update
-              if (readField("id", messageRef) === message.id) {
-                const currentStatus = readField("status", messageRef);
-
-                // Handle known types of message changes
-                switch (message.type) {
-                  case "status-changed":
-                    // Prevent overwriting if the current status is already "delivered"
-                    if (currentStatus === "delivered") {
-                      logLocal("handleMessageChanged - Status already delivered, skipping update", {
-                        messageId: message.id
-                      });
-                      return messageRef;
-                    }
-
-                    // Update the status field
-                    return {
-                      ...messageRef,
-                      status: message.status
-                    };
-
-                  case "text-updated":
-                    // Handle changes to the message text
-                    return {
-                      ...messageRef,
-                      text: message.text
-                    };
-
-                  // Add cases for other known message types as needed
-
-                  default:
-                    // Log a warning for unhandled message types
-                    logLocal("handleMessageChanged - Unhandled message type", { type: message.type });
-                    return messageRef;
-                }
-              }
-
-              return messageRef; // Keep other messages unchanged
-            });
-          }
-        }
-      });
-
-      logLocal("handleMessageChanged - Message updated successfully", {
-        messageId: message.id,
-        type: message.type
-      });
-    } catch (error) {
-      console.error("handleMessageChanged - Error modifying cache:", error);
-    }
-  };
-
-  const handleConversationChanged = async (data) => {
-    if (!data) {
-      logLocal("handleConversationChanged - No data provided", data);
-      return;
-    }
-
-    const { conversationId, type, job_conversations, messageIds, ...fields } = data;
-    logLocal("handleConversationChanged - Start", data);
-
-    const updatedAt = new Date().toISOString();
-
-    const updateConversationList = (newConversation) => {
-      try {
-        const existingList = client.cache.readQuery({
-          query: CONVERSATION_LIST_QUERY,
-          variables: { offset: 0 }
-        });
-
-        const updatedList = existingList?.conversations
-          ? [
-              newConversation,
-              ...existingList.conversations.filter((conv) => conv.id !== newConversation.id) // Prevent duplicates
-            ]
-          : [newConversation];
-
-        client.cache.writeQuery({
-          query: CONVERSATION_LIST_QUERY,
-          variables: { offset: 0 },
-          data: {
-            conversations: updatedList
-          }
-        });
-
-        logLocal("handleConversationChanged - Conversation list updated successfully", newConversation);
-      } catch (error) {
-        console.error("Error updating conversation list in the cache:", error);
-      }
-    };
-
-    // Handle specific types
-    try {
-      switch (type) {
-        case "conversation-marked-read":
-          if (conversationId && messageIds?.length > 0) {
-            client.cache.modify({
-              id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-              fields: {
-                messages(existingMessages = [], { readField }) {
-                  return existingMessages.map((message) => {
-                    if (messageIds.includes(readField("id", message))) {
-                      return { ...message, read: true };
-                    }
-                    return message;
-                  });
-                },
-                messages_aggregate: () => ({
-                  __typename: "messages_aggregate",
-                  aggregate: { __typename: "messages_aggregate_fields", count: 0 }
-                })
-              }
-            });
-          }
-          break;
-
-        case "conversation-created":
-          updateConversationList({ ...fields, job_conversations, updated_at: updatedAt });
-          break;
-
-        case "conversation-unarchived":
-        case "conversation-archived":
-          // Would like to someday figure out how to get this working without refetch queries,
-          // But I have but a solid 4 hours into it, and there are just too many weird occurrences
-          try {
-            const listQueryVariables = { offset: 0 };
-            const detailsQueryVariables = { conversationId };
-
-            // Check if conversation details exist in the cache
-            const detailsExist = !!client.cache.readQuery({
-              query: GET_CONVERSATION_DETAILS,
-              variables: detailsQueryVariables
-            });
-
-            // Refetch conversation list
-            await client.refetchQueries({
-              include: [CONVERSATION_LIST_QUERY, ...(detailsExist ? [GET_CONVERSATION_DETAILS] : [])],
-              variables: [
-                { query: CONVERSATION_LIST_QUERY, variables: listQueryVariables },
-                ...(detailsExist
-                  ? [
-                      {
-                        query: GET_CONVERSATION_DETAILS,
-                        variables: detailsQueryVariables
-                      }
-                    ]
-                  : [])
-              ]
-            });
-
-            logLocal("handleConversationChanged - Refetched queries after state change", {
-              conversationId,
-              type
-            });
-          } catch (error) {
-            console.error("Error refetching queries after conversation state change:", error);
-          }
-          break;
-
-        case "tag-added":
-          // Ensure `job_conversations` is properly formatted
-          const formattedJobConversations = job_conversations.map((jc) => ({
-            __typename: "job_conversations",
-            jobid: jc.jobid || jc.job?.id,
-            conversationid: conversationId,
-            job: jc.job || {
-              __typename: "jobs",
-              id: data.selectedJob.id,
-              ro_number: data.selectedJob.ro_number,
-              ownr_co_nm: data.selectedJob.ownr_co_nm,
-              ownr_fn: data.selectedJob.ownr_fn,
-              ownr_ln: data.selectedJob.ownr_ln
-            }
-          }));
-
-          client.cache.modify({
-            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-            fields: {
-              job_conversations: (existing = []) => {
-                // Ensure no duplicates based on both `conversationid` and `jobid`
-                const existingLinks = new Set(
-                  existing.map((jc) => {
-                    const jobId = client.cache.readFragment({
-                      id: client.cache.identify(jc),
-                      fragment: gql`
-                        fragment JobConversationLinkAdded on job_conversations {
-                          jobid
-                          conversationid
-                        }
-                      `
-                    })?.jobid;
-                    return `${jobId}:${conversationId}`; // Unique identifier for a job-conversation link
-                  })
-                );
-
-                const newItems = formattedJobConversations.filter((jc) => {
-                  const uniqueLink = `${jc.jobid}:${jc.conversationid}`;
-                  return !existingLinks.has(uniqueLink);
-                });
-
-                return [...existing, ...newItems];
-              }
-            }
-          });
-
-          break;
-
-        case "tag-removed":
-          try {
-            const conversationCacheId = client.cache.identify({ __typename: "conversations", id: conversationId });
-
-            // Evict the specific cache entry for job_conversations
-            client.cache.evict({
-              id: conversationCacheId,
-              fieldName: "job_conversations"
-            });
-
-            // Garbage collect evicted entries
-            client.cache.gc();
-
-            logLocal("handleConversationChanged - tag removed - Refetched conversation list after state change", {
-              conversationId,
-              type
-            });
-          } catch (error) {
-            console.error("Error refetching queries after conversation state change: (Tag Removed)", error);
-          }
-
-          break;
-        default:
-          logLocal("handleConversationChanged - Unhandled type", { type });
-          client.cache.modify({
-            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-            fields: {
-              ...Object.fromEntries(
-                Object.entries(fields).map(([key, value]) => [key, (cached) => (value !== undefined ? value : cached)])
-              )
-            }
-          });
-      }
-    } catch (error) {
-      console.error("Error handling conversation changes:", { type, error });
-    }
-  };
-
-  socket.on("new-message-summary", handleNewMessageSummary);
-  socket.on("new-message-detailed", handleNewMessageDetailed);
-  socket.on("message-changed", handleMessageChanged);
-  socket.on("conversation-changed", handleConversationChanged);
-};
-
-export const unregisterMessagingHandlers = ({ socket }) => {
-  if (!socket) return;
-  socket.off("new-message-summary");
-  socket.off("new-message-detailed");
-  socket.off("message-changed");
-  socket.off("conversation-changed");
-};

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

@@ -1,49 +1,27 @@
 import { useMutation } from "@apollo/client";
 import { Button } from "antd";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
-import { connect } from "react-redux";
 
-const mapStateToProps = createStructuredSelector({
+export default function ChatArchiveButton({ conversation }) {
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatArchiveButton({ conversation, bodyshop }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
-  const { socket } = useContext(SocketContext);
-
   const handleToggleArchive = async () => {
     setLoading(true);
 
-    const updatedConversation = await updateConversation({
+    await updateConversation({
-      variables: { id: conversation.id, archived: !conversation.archived }
+      variables: { id: conversation.id, archived: !conversation.archived },
+      refetchQueries: ["CONVERSATION_LIST_QUERY"]
     });
 
-    if (socket) {
-      socket.emit("conversation-modified", {
-        type: "conversation-archived",
-        conversationId: conversation.id,
-        bodyshopId: bodyshop.id,
-        archived: updatedConversation.data.update_conversations_by_pk.archived
-      });
-    }
-
     setLoading(false);
   };
 
   return (
-    <Button onClick={handleToggleArchive} loading={loading} className="archive-button" type="primary">
+    <Button onClick={handleToggleArchive} loading={loading} type="primary">
       {conversation.archived ? t("messaging.labels.unarchive") : t("messaging.labels.archive")}
     </Button>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChatArchiveButton);

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

@@ -1,5 +1,5 @@
 import { Badge, Card, List, Space, Tag } from "antd";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { Virtuoso } from "react-virtuoso";
 import { createStructuredSelector } from "reselect";
@@ -19,26 +19,14 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
 });
 
-function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
+function ChatConversationListComponent({
-  // That comma is there for a reason, do not remove it
+  conversationList,
-  const [, forceUpdate] = useState(false);
+  selectedConversation,
-
+  setSelectedConversation,
-  // Re-render every minute
+  loadMoreConversations
-  useEffect(() => {
+}) {
-    const interval = setInterval(() => {
-      forceUpdate((prev) => !prev); // Toggle state to trigger re-render
-    }, 60000); // 1 minute in milliseconds
-
-    return () => clearInterval(interval); // Cleanup on unmount
-  }, []);
-
-  // Memoize the sorted conversation list
-  const sortedConversationList = React.useMemo(() => {
-    return _.orderBy(conversationList, ["updated_at"], ["desc"]);
-  }, [conversationList]);
-
   const renderConversation = (index) => {
-    const item = sortedConversationList[index];
+    const item = conversationList[index];
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
       item.job_conversations.length > 0
@@ -60,7 +48,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
       </>
     );
 
-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
+    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0} />;
 
     const getCardStyle = () =>
       item.id === selectedConversation
@@ -84,9 +72,10 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
   return (
     <div className="chat-list-container">
       <Virtuoso
-        data={sortedConversationList}
+        data={conversationList}
         itemContent={(index) => renderConversation(index)}
         style={{ height: "100%", width: "100%" }}
+        endReached={loadMoreConversations} // Calls loadMoreConversations when scrolled to the bottom
       />
     </div>
   );

client/src/components/chat-conversation-title-tags/chat-conversation-title-tags.component.jsx

@@ -1,29 +1,18 @@
 import { useMutation } from "@apollo/client";
 import { Tag } from "antd";
-import React, { useContext } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
-import { connect } from "react-redux";
 
-const mapStateToProps = createStructuredSelector({
+export default function ChatConversationTitleTags({ jobConversations }) {
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
   const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
-  const { socket } = useContext(SocketContext);
 
-  const handleRemoveTag = async (jobId) => {
+  const handleRemoveTag = (jobId) => {
     const convId = jobConversations[0].conversationid;
     if (!!convId) {
-      await removeJobConversation({
+      removeJobConversation({
         variables: {
           conversationId: convId,
           jobId: jobId
@@ -39,17 +28,6 @@ export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
           });
         }
       });
-
-      if (socket) {
-        // Emit the `conversation-modified` event
-        socket.emit("conversation-modified", {
-          bodyshopId: bodyshop.id,
-          conversationId: convId,
-          type: "tag-removed",
-          jobId: jobId
-        });
-      }
-
       logImEXEvent("messaging_remove_job_tag", {
         conversationId: convId,
         jobId: jobId
@@ -76,5 +54,3 @@ export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
     </div>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationTitleTags);

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

@@ -6,16 +6,10 @@ import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conv
 import ChatLabelComponent from "../chat-label/chat-label.component";
 import ChatPrintButton from "../chat-print-button/chat-print-button.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
-import { createStructuredSelector } from "reselect";
-import { connect } from "react-redux";
 
-const mapStateToProps = createStructuredSelector({});
+export default function ChatConversationTitle({ conversation }) {
-
-const mapDispatchToProps = () => ({});
-
-export function ChatConversationTitle({ conversation }) {
   return (
-    <Space className="chat-title" wrap>
+    <Space wrap>
       <PhoneNumberFormatter>{conversation && conversation.phone_num}</PhoneNumberFormatter>
       <ChatLabelComponent conversation={conversation} />
       <ChatPrintButton conversation={conversation} />
@@ -25,5 +19,3 @@ export function ChatConversationTitle({ conversation }) {
     </Space>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationTitle);

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

@@ -5,26 +5,10 @@ import ChatMessageListComponent from "../chat-messages-list/chat-message-list.co
 import ChatSendMessage from "../chat-send-message/chat-send-message.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
 import "./chat-conversation.styles.scss";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
-import { connect } from "react-redux";
 
-const mapStateToProps = createStructuredSelector({
+export default function ChatConversationComponent({ subState, conversation, messages, handleMarkConversationAsRead }) {
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatConversationComponent({
-  subState,
-  conversation,
-  messages,
-  handleMarkConversationAsRead,
-  bodyshop
-}) {
   const [loading, error] = subState;
 
-  if (conversation?.archived) return null;
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -34,11 +18,9 @@ export function ChatConversationComponent({
       onMouseDown={handleMarkConversationAsRead}
       onKeyDown={handleMarkConversationAsRead}
     >
-      <ChatConversationTitle conversation={conversation} bodyshop={bodyshop} />
+      <ChatConversationTitle conversation={conversation} />
       <ChatMessageListComponent messages={messages} />
       <ChatSendMessage conversation={conversation} />
     </div>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationComponent);

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

@@ -1,174 +1,83 @@
-import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
+import React, { useContext, useEffect, useState } from "react";
-import axios from "axios";
-import React, { useCallback, useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext";
-import { GET_CONVERSATION_DETAILS, CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
   bodyshop: selectBodyshop
 });
 
-function ChatConversationContainer({ bodyshop, selectedConversation }) {
+const mapDispatchToProps = (dispatch) => ({});
-  const client = useApolloClient();
+
+export function ChatConversationContainer({ bodyshop, selectedConversation }) {
   const { socket } = useContext(SocketContext);
+  const [conversationDetails, setConversationDetails] = useState({});
+  const [messages, setMessages] = useState([]);
   const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error] = useState(null);
 
-  // Fetch conversation details
+  // Fetch conversation details and messages when a conversation is selected
-  const {
+  useEffect(() => {
-    loading: convoLoading,
+    if (socket && selectedConversation) {
-    error: convoError,
+      setLoading(true);
-    data: convoData
+      socket.emit("join-conversation", selectedConversation);
-  } = useQuery(GET_CONVERSATION_DETAILS, {
-    variables: { conversationId: selectedConversation },
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only"
-  });
 
-  // Subscription for conversation updates
+      socket.on("conversation-details", (data) => {
-  useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
+        setConversationDetails(data.conversation);
-    skip: socket?.connected,
+        setMessages(data.messages);
-    variables: { conversationId: selectedConversation },
+        setLoading(false);
-    onData: ({ data: subscriptionResult, client }) => {
-      // Extract the messages array from the result
-      const messages = subscriptionResult?.data?.messages;
-      if (!messages || messages.length === 0) {
-        console.warn("No messages found in subscription result.");
-        return;
-      }
-
-      messages.forEach((message) => {
-        const messageRef = client.cache.identify(message);
-        // Write the new message to the cache
-        client.cache.writeFragment({
-          id: messageRef,
-          fragment: gql`
-            fragment NewMessage on messages {
-              id
-              status
-              text
-              isoutbound
-              image
-              image_path
-              userid
-              created_at
-              read
-            }
-          `,
-          data: message
-        });
-
-        // Update the conversation cache to include the new message
-        client.cache.modify({
-          id: client.cache.identify({ __typename: "conversations", id: selectedConversation }),
-          fields: {
-            messages(existingMessages = []) {
-              const alreadyExists = existingMessages.some((msg) => msg.__ref === messageRef);
-              if (alreadyExists) return existingMessages;
-              return [...existingMessages, { __ref: messageRef }];
-            },
-            updated_at() {
-              return message.created_at;
-            }
-          }
-        });
       });
+
+      socket.on("new-message", (message) => {
+        setMessages((prevMessages) => [...prevMessages, message]);
+      });
+
+      socket.on("conversation-list-updated", (data) => {
+        setConversationDetails(data.conversation);
+        setMessages(data.messages);
+      });
+
+      return () => {
+        socket.emit("leave-conversation", selectedConversation);
+        socket.off("conversation-details");
+        socket.off("new-message");
+        socket.off("conversation-list-updated");
+      };
     }
-  });
+  }, [socket, selectedConversation]);
 
-  const updateCacheWithReadMessages = useCallback(
+  // Mark messages as read
-    (conversationId, messageIds) => {
-      if (!conversationId || !messageIds?.length) return;
-
-      messageIds.forEach((messageId) => {
-        client.cache.modify({
-          id: client.cache.identify({ __typename: "messages", id: messageId }),
-          fields: {
-            read: () => true
-          }
-        });
-      });
-    },
-    [client.cache]
-  );
-
-  // WebSocket event handlers
-  useEffect(() => {
-    if (!socket?.connected) return;
-
-    const handleConversationChange = (data) => {
-      if (data.type === "conversation-marked-read") {
-        const { conversationId, messageIds } = data;
-        updateCacheWithReadMessages(conversationId, messageIds);
-      }
-    };
-
-    socket.on("conversation-changed", handleConversationChange);
-
-    return () => {
-      socket.off("conversation-changed", handleConversationChange);
-    };
-  }, [socket, updateCacheWithReadMessages]);
-
-  // Join and leave conversation via WebSocket
-  useEffect(() => {
-    if (!socket?.connected || !selectedConversation || !bodyshop?.id) return;
-
-    socket.emit("join-bodyshop-conversation", {
-      bodyshopId: bodyshop.id,
-      conversationId: selectedConversation
-    });
-
-    return () => {
-      socket.emit("leave-bodyshop-conversation", {
-        bodyshopId: bodyshop.id,
-        conversationId: selectedConversation
-      });
-    };
-  }, [socket, bodyshop, selectedConversation]);
-
-  // Mark conversation as read
   const handleMarkConversationAsRead = async () => {
-    if (!convoData || markingAsReadInProgress) return;
+    if (messages.some((msg) => !msg.read) && !markingAsReadInProgress) {
-
-    const conversation = convoData.conversations_by_pk;
-    if (!conversation) return;
-
-    const unreadMessageIds = conversation.messages
-      ?.filter((message) => !message.read && !message.isoutbound)
-      .map((message) => message.id);
-
-    if (unreadMessageIds?.length > 0) {
       setMarkingAsReadInProgress(true);
-      try {
+      // Emit a WebSocket event to mark messages as read
-        await axios.post("/sms/markConversationRead", {
+      socket.emit("mark-as-read", {
-          conversation,
+        conversationId: selectedConversation,
-          imexshopid: bodyshop?.imexshopid,
+        imexshopid: bodyshop.imexshopid,
-          bodyshopid: bodyshop?.id
+        bodyshopId: bodyshop.id
-        });
+      });
 
-        updateCacheWithReadMessages(selectedConversation, unreadMessageIds);
+      setMarkingAsReadInProgress(false);
-      } catch (error) {
-        console.error("Error marking conversation as read:", error.message);
-      } finally {
-        setMarkingAsReadInProgress(false);
-      }
     }
   };
 
+  if (!messages || !conversationDetails || !messages.length) {
+    return null;
+  }
+
   return (
     <ChatConversationComponent
-      subState={[convoLoading, convoError]}
+      subState={[loading, error]}
-      conversation={convoData?.conversations_by_pk || {}}
+      conversation={conversationDetails}
-      messages={convoData?.conversations_by_pk?.messages || []}
+      messages={messages}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
     />
   );
 }
 
-export default connect(mapStateToProps)(ChatConversationContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationContainer);

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

@@ -1,25 +1,14 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Input, notification, Spin, Tag, Tooltip } from "antd";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
-import { connect } from "react-redux";
 
-const mapStateToProps = createStructuredSelector({
+export default function ChatLabel({ conversation }) {
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = (dispatch) => ({});
-
-export function ChatLabel({ conversation, bodyshop }) {
   const [loading, setLoading] = useState(false);
   const [editing, setEditing] = useState(false);
   const [value, setValue] = useState(conversation.label);
-  const { socket } = useContext(SocketContext);
 
   const { t } = useTranslation();
   const [updateLabel] = useMutation(UPDATE_CONVERSATION_LABEL);
@@ -37,14 +26,6 @@ export function ChatLabel({ conversation, bodyshop }) {
           })
         });
       } else {
-        if (socket) {
-          socket.emit("conversation-modified", {
-            type: "label-updated",
-            conversationId: conversation.id,
-            bodyshopId: bodyshop.id,
-            label: value
-          });
-        }
         setEditing(false);
       }
     } catch (error) {
@@ -76,5 +57,3 @@ export function ChatLabel({ conversation, bodyshop }) {
     );
   }
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChatLabel);

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

@@ -1,85 +1,89 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import Icon from "@ant-design/icons";
+import { Tooltip } from "antd";
+import i18n from "i18next";
+import dayjs from "../../utils/day";
+import React, { useRef, useEffect } from "react";
+import { MdDone, MdDoneAll } from "react-icons/md";
 import { Virtuoso } from "react-virtuoso";
-import { renderMessage } from "./renderMessage";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 import "./chat-message-list.styles.scss";
 
 export default function ChatMessageListComponent({ messages }) {
   const virtuosoRef = useRef(null);
-  const [atBottom, setAtBottom] = useState(true);
-  const loadedImagesRef = useRef(0);
 
-  const handleScrollStateChange = (isAtBottom) => {
+  // Scroll to the bottom after a short delay when the component mounts
-    setAtBottom(isAtBottom);
+  useEffect(() => {
-  };
+    const timer = setTimeout(() => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({
+          index: messages.length - 1,
+          behavior: "auto" // Instantly scroll to the bottom
+        });
+      }
+    }, 100); // Delay of 100ms to allow rendering
+    return () => clearTimeout(timer); // Cleanup the timer on unmount
+  }, [messages.length]); // Run only once on component mount
 
-  const resetImageLoadState = () => {
+  // Scroll to the bottom after the new messages are rendered
-    loadedImagesRef.current = 0;
+  useEffect(() => {
-  };
+    if (virtuosoRef.current) {
-
+      // Allow the DOM and Virtuoso to fully render the new data
-  const preloadImages = useCallback((imagePaths, onComplete) => {
+      setTimeout(() => {
-    resetImageLoadState();
+        virtuosoRef.current.scrollToIndex({
-
+          index: messages.length - 1,
-    if (imagePaths.length === 0) {
+          align: "end", // Ensure the last message is fully visible
-      onComplete();
+          behavior: "smooth" // Smooth scrolling
-      return;
+        });
+      }, 50); // Slight delay to ensure layout recalculates
     }
+  }, [messages]); // Triggered when new messages are added
 
-    imagePaths.forEach((url) => {
+  const renderMessage = (index) => {
-      const img = new Image();
+    const message = messages[index];
-      img.src = url;
+    return (
-      img.onload = img.onerror = () => {
+      <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
-        loadedImagesRef.current += 1;
+        <div className="message msgmargin">
-        if (loadedImagesRef.current === imagePaths.length) {
+          <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
-          onComplete();
+            <div>
-        }
+              {message.image_path &&
-      };
+                message.image_path.map((i, idx) => (
-    });
+                  <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
-  }, []);
+                    <a href={i} target="__blank" rel="noopener noreferrer">
-
+                      <img alt="Received" className="message-img" src={i} />
-  // Ensure all images are loaded on initial render
+                    </a>
-  useEffect(() => {
+                  </div>
-    const imagePaths = messages
+                ))}
-      .filter((message) => message.image && message.image_path?.length > 0)
+              <div>{message.text}</div>
-      .flatMap((message) => message.image_path);
+            </div>
-
+          </Tooltip>
-    preloadImages(imagePaths, () => {
+          {message.status && (
-      if (virtuosoRef.current) {
+            <div className="message-status">
-        virtuosoRef.current.scrollToIndex({
+              <Icon
-          index: messages.length - 1,
+                component={message.status === "sent" ? MdDone : message.status === "delivered" ? MdDoneAll : null}
-          align: "end",
+                className="message-icon"
-          behavior: "auto"
+              />
-        });
+            </div>
-      }
+          )}
-    });
+        </div>
-  }, [messages, preloadImages]);
+        {message.isoutbound && (
-
+          <div style={{ fontSize: 10 }}>
-  // Handle scrolling when new messages are added
+            {i18n.t("messaging.labels.sentby", {
-  useEffect(() => {
+              by: message.userid,
-    if (!atBottom) return;
+              time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
-
+            })}
-    const latestMessage = messages[messages.length - 1];
+          </div>
-    const imagePaths = latestMessage?.image_path || [];
+        )}
-
+      </div>
-    preloadImages(imagePaths, () => {
+    );
-      if (virtuosoRef.current) {
+  };
-        virtuosoRef.current.scrollToIndex({
-          index: messages.length - 1,
-          align: "end",
-          behavior: "smooth"
-        });
-      }
-    });
-  }, [messages, atBottom, preloadImages]);
 
   return (
     <div className="chat">
       <Virtuoso
         ref={virtuosoRef}
         data={messages}
-        overscan={!!messages.reduce((acc, message) => acc + (message.image_path?.length || 0), 0) ? messages.length : 0}
+        itemContent={(index) => renderMessage(index)}
-        itemContent={(index) => renderMessage(messages, index)}
+        followOutput="smooth" // Ensure smooth scrolling when new data is appended
-        followOutput={(isAtBottom) => handleScrollStateChange(isAtBottom)}
-        initialTopMostItemIndex={messages.length - 1}
         style={{ height: "100%", width: "100%" }}
       />
     </div>

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -1,131 +1,110 @@
+.message-icon {
+  color: whitesmoke;
+  border: #000000;
+  position: absolute;
+  margin: 0 0.1rem;
+  bottom: 0.1rem;
+  right: 0.3rem;
+  z-index: 5;
+}
+
 .chat {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  margin: 0.8rem 0rem;
-  width: 100%;
+  overflow: hidden; // Ensure the content scrolls correctly
-}
-.archive-button {
-  height: 20px;
-  border-radius: 4px;
-}
-.chat-title {
-  margin-bottom: 5px;
 }
+
 .messages {
   display: flex;
   flex-direction: column;
-  padding: 0.5rem; // Prevent edge clipping
+  padding: 0.5rem; // Add padding to avoid edge clipping
 }
 
 .message {
-  position: relative;
   border-radius: 20px;
   padding: 0.25rem 0.8rem;
-  word-wrap: break-word;
 
-  &-img {
+  .message-img {
     max-width: 10rem;
     max-height: 10rem;
     object-fit: contain;
     margin: 0.2rem;
-    border-radius: 4px;
   }
+}
 
-  &-images {
+.yours {
-    display: flex;
+  align-items: flex-start;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-}
-.chat-send-message-button{
-  margin: 0.3rem;
-  padding-left: 0.5rem;
-  
-}
-.message-icon {
-  position: absolute;
-  bottom: 0.1rem;
-  right: 0.3rem;
-  margin: 0 0.1rem;
-  color: whitesmoke;
-  z-index: 5;
 }
 
 .msgmargin {
-  margin: 0.1rem 0;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
 }
 
-.yours,
+.yours .message {
-.mine {
+  margin-right: 20%;
-  display: flex;
+  background-color: #eee;
-  flex-direction: column;
+  position: relative;
-
-  .message {
-    position: relative;
-
-    &:last-child:before,
-    &:last-child:after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      height: 20px;
-      width: 20px;
-      z-index: 0;
-    }
-
-    &:last-child:after {
-      width: 10px;
-      background: white;
-      z-index: 1;
-    }
-  }
 }
 
-/* "Yours" (incoming) message styles */
+.yours .message:last-child:before {
-.yours {
+  content: "";
-  align-items: flex-start;
+  position: absolute;
-
+  z-index: 0;
-  .message {
+  bottom: 0;
-    margin-right: 20%;
+  left: -7px;
-    background-color: #eee;
+  height: 20px;
-
+  width: 20px;
-    &:last-child:before {
+  background: #eee;
-      left: -7px;
+  border-bottom-right-radius: 15px;
-      background: #eee;
+}
-      border-bottom-right-radius: 15px;
+
-    }
+.yours .message:last-child:after {
-
+  content: "";
-    &:last-child:after {
+  position: absolute;
-      left: -10px;
+  z-index: 1;
-      border-bottom-right-radius: 10px;
+  bottom: 0;
-    }
+  left: -10px;
-  }
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-right-radius: 10px;
 }
 
-/* "Mine" (outgoing) message styles */
 .mine {
   align-items: flex-end;
-
-  .message {
-    color: white;
-    margin-left: 25%;
-    background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
-    padding-bottom: 0.6rem;
-
-    &:last-child:before {
-      right: -8px;
-      background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
-      border-bottom-left-radius: 15px;
-    }
-
-    &:last-child:after {
-      right: -10px;
-      border-bottom-left-radius: 10px;
-    }
-  }
 }
 
-.virtuoso-container {
+.mine .message {
-  flex: 1;
+  color: white;
-  overflow: auto;
+  margin-left: 25%;
+  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  position: relative;
+  padding-bottom: 0.6rem;
+}
+
+.mine .message:last-child:before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  right: -8px;
+  height: 20px;
+  width: 20px;
+  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  border-bottom-left-radius: 15px;
+}
+
+.mine .message:last-child:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  right: -10px;
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-left-radius: 10px;
 }

client/src/components/chat-messages-list/renderMessage.jsx

@@ -1,52 +0,0 @@
-import Icon from "@ant-design/icons";
-import { Tooltip } from "antd";
-import i18n from "i18next";
-import dayjs from "../../utils/day";
-import { MdDone, MdDoneAll } from "react-icons/md";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-
-export const renderMessage = (messages, index) => {
-  const message = messages[index];
-
-  return (
-    <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
-      <div className="message msgmargin">
-        <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
-          <div>
-            {/* Render images if available */}
-            {message.image && message.image_path?.length > 0 && (
-              <div className="message-images">
-                {message.image_path.map((url, idx) => (
-                  <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
-                    <a href={url} target="_blank" rel="noopener noreferrer">
-                      <img alt="Received" className="message-img" src={url} />
-                    </a>
-                  </div>
-                ))}
-              </div>
-            )}
-            {/* Render text if available */}
-            {message.text && <div>{message.text}</div>}
-          </div>
-        </Tooltip>
-
-        {/* Message status icons */}
-        {message.status && (message.status === "sent" || message.status === "delivered") && (
-          <div className="message-status">
-            <Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
-          </div>
-        )}
-      </div>
-
-      {/* Outbound message metadata */}
-      {message.isoutbound && (
-        <div style={{ fontSize: 10 }}>
-          {i18n.t("messaging.labels.sentby", {
-            by: message.userid,
-            time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
-          })}
-        </div>
-      )}
-    </div>
-  );
-};

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

@@ -1,12 +1,11 @@
 import { PlusCircleFilled } from "@ant-design/icons";
 import { Button, Form, Popover } from "antd";
-import React, { useContext } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
 import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -18,10 +17,8 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatNewConversation({ openChatByPhone }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const { socket } = useContext(SocketContext);
-
   const handleFinish = (values) => {
-    openChatByPhone({ phone_num: values.phoneNumber, socket });
+    openChatByPhone({ phone_num: values.phoneNumber });
     form.resetFields();
   };
 

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

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
-import React, { useContext } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
@@ -9,7 +9,6 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -22,8 +21,6 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
   const { t } = useTranslation();
-  const { socket } = useContext(SocketContext);
-
   if (!phone) return <></>;
 
   if (!bodyshop.messagingservicesid) return <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>;
@@ -36,7 +33,7 @@ export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobi
         const p = parsePhoneNumber(phone, "CA");
         if (searchingForConversation) return; //This is to prevent finding the same thing twice.
         if (p && p.isValid()) {
-          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid, socket });
+          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
         } else {
           notification["error"]({ message: t("messaging.error.invalidphone") });
         }

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

@@ -1,114 +1,59 @@
-import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
+import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined } from "@ant-design/icons";
-import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
+import { Badge, Card, Col, Row, Space, Tooltip, Typography } from "antd";
-import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
+import React, { useCallback, useContext, useEffect } from "react";
-import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_LIST_QUERY, UNREAD_CONVERSATION_COUNT } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
-import { selectChatVisible, selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
+import {
+  selectChatVisible,
+  selectConversations,
+  selectSelectedConversation,
+  selectUnreadCount
+} from "../../redux/messaging/messaging.selectors";
 import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import "./chat-popup.styles.scss";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import SocketContext from "../../contexts/SocketIO/socketContext";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
-  chatVisible: selectChatVisible
+  chatVisible: selectChatVisible,
+  bodyshop: selectBodyshop,
+  conversations: selectConversations,
+  unreadCount: selectUnreadCount
 });
-
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
-export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
+export function ChatPopupComponent({
+  chatVisible,
+  selectedConversation,
+  toggleChatVisible,
+  bodyshop,
+  conversations,
+  unreadCount
+}) {
   const { t } = useTranslation();
-  const [pollInterval, setPollInterval] = useState(0);
   const { socket } = useContext(SocketContext);
-  const client = useApolloClient(); // Apollo Client instance for cache operations
 
-  // Lazy query for conversations
+  // Emit event to open messaging when chat becomes visible
-  const [getConversations, { loading, data, refetch }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    skip: !chatVisible,
-    ...(pollInterval > 0 ? { pollInterval } : {})
-  });
-
-  // Query for unread count when chat is not visible
-  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-    skip: chatVisible, // Skip when chat is visible
-    ...(pollInterval > 0 ? { pollInterval } : {})
-  });
-
-  // Socket connection status
   useEffect(() => {
-    const handleSocketStatus = () => {
+    if (chatVisible && socket && bodyshop?.id) {
-      if (socket?.connected) {
+      socket.emit("open-messaging", bodyshop.id);
-        setPollInterval(15 * 60 * 1000); // 15 minutes
+    }
-      } else {
+  }, [chatVisible, socket, bodyshop?.id]);
-        setPollInterval(60 * 1000); // 60 seconds
-      }
-    };
-
-    handleSocketStatus();
 
+  // Handle loading more conversations
+  const loadMoreConversations = useCallback(() => {
     if (socket) {
-      socket.on("connect", handleSocketStatus);
+      socket.emit("load-more-conversations", { offset: conversations.length });
-      socket.on("disconnect", handleSocketStatus);
     }
-
+  }, [socket, conversations.length]);
-    return () => {
-      if (socket) {
-        socket.off("connect", handleSocketStatus);
-        socket.off("disconnect", handleSocketStatus);
-      }
-    };
-  }, [socket]);
-
-  // Fetch conversations when chat becomes visible
-  useEffect(() => {
-    if (chatVisible)
-      getConversations({
-        variables: {
-          offset: 0
-        }
-      }).catch((err) => {
-        console.error(`Error fetching conversations: ${(err, err.message || "")}`);
-      });
-  }, [chatVisible, getConversations]);
-
-  // Get unread count from the cache
-  const unreadCount = (() => {
-    if (chatVisible) {
-      try {
-        const cachedData = client.readQuery({
-          query: CONVERSATION_LIST_QUERY,
-          variables: { offset: 0 }
-        });
-
-        if (!cachedData?.conversations) return 0;
-
-        // Aggregate unread message count
-        return cachedData.conversations.reduce((total, conversation) => {
-          const unread = conversation.messages_aggregate?.aggregate?.count || 0;
-          return total + unread;
-        }, 0);
-      } catch (error) {
-        console.warn("Unread count not found in cache:", error);
-        return 0; // Fallback if not in cache
-      }
-    } else if (unreadData?.messages_aggregate?.aggregate?.count) {
-      // Use the unread count from the query result
-      return unreadData.messages_aggregate.aggregate.count;
-    }
-    return 0;
-  })();
 
   return (
     <Badge count={unreadCount}>
@@ -121,20 +66,21 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
               <Tooltip title={t("messaging.labels.recentonly")}>
                 <InfoCircleOutlined />
               </Tooltip>
-              <SyncOutlined style={{ cursor: "pointer" }} onClick={() => refetch()} />
+              <ShrinkOutlined
-              {!socket?.connected && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
+                onClick={() => toggleChatVisible()}
+                style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
+              />
             </Space>
-            <ShrinkOutlined
-              onClick={() => toggleChatVisible()}
-              style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
-            />
 
             <Row gutter={[8, 8]} className="chat-popup-content">
               <Col span={8}>
-                {loading ? (
+                {conversations && conversations.length === 0 ? (
                   <LoadingSpinner />
                 ) : (
-                  <ChatConversationListComponent conversationList={data ? data.conversations : []} />
+                  <ChatConversationListComponent
+                    conversationList={conversations.conversations}
+                    loadMoreConversations={loadMoreConversations}
+                  />
                 )}
               </Col>
               <Col span={16}>{selectedConversation ? <ChatConversationContainer /> : null}</Col>

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -1,44 +1,47 @@
 import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
 import { Input, Spin } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { sendMessage, setMessage } from "../../redux/messaging/messaging.actions";
+import { setMessage } from "../../redux/messaging/messaging.actions";
 import { selectIsSending, selectMessage } from "../../redux/messaging/messaging.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
 import ChatPresetsComponent from "../chat-presets/chat-presets.component";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   isSending: selectIsSending,
-  message: selectMessage
+  message: selectMessage,
+  user: selectCurrentUser
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  sendMessage: (message) => dispatch(sendMessage(message)),
   setMessage: (message) => dispatch(setMessage(message))
 });
 
-function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSending, message, setMessage }) {
+function ChatSendMessageComponent({ conversation, bodyshop, isSending, message, setMessage, user }) {
+  const { socket } = useContext(SocketContext); // Access WebSocket instance
   const inputArea = useRef(null);
   const [selectedMedia, setSelectedMedia] = useState([]);
+  const { t } = useTranslation();
 
   useEffect(() => {
     inputArea.current.focus();
   }, [isSending, setMessage]);
 
-  const { t } = useTranslation();
-
   const handleEnter = () => {
     const selectedImages = selectedMedia.filter((i) => i.isSelected);
     if ((message === "" || !message) && selectedImages.length === 0) return;
+
     logImEXEvent("messaging_send_message");
 
     if (selectedImages.length < 11) {
-      const newMessage = {
+      const messageData = {
+        user,
         to: conversation.phone_num,
         body: message || "",
         messagingServiceSid: bodyshop.messagingservicesid,
@@ -46,12 +49,18 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
         selectedMedia: selectedImages,
         imexshopid: bodyshop.imexshopid
       };
-      sendMessage(newMessage);
+
+      // Emit the send-message event via WebSocket
+      socket.emit("send-message", messageData);
+
       setSelectedMedia(
         selectedMedia.map((i) => {
           return { ...i, isSelected: false };
         })
       );
+
+      // Optionally clear the input message
+      setMessage("");
     }
   };
 
@@ -76,15 +85,11 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
           onChange={(e) => setMessage(e.target.value)}
           onPressEnter={(event) => {
             event.preventDefault();
-            if (!!!event.shiftKey) handleEnter();
+            if (!event.shiftKey) handleEnter();
           }}
         />
       </span>
-      <SendOutlined
+      <SendOutlined className="imex-flex-row__margin" onClick={handleEnter} />
-        className="chat-send-message-button"
-        //  disabled={message === "" || !message}
-        onClick={handleEnter}
-      />
       <Spin
         style={{ display: `${isSending ? "" : "none"}` }}
         indicator={

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

@@ -2,33 +2,22 @@ import { PlusOutlined } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
 import { Tag } from "antd";
 import _ from "lodash";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import { SEARCH_FOR_JOBS } from "../../graphql/jobs.queries";
 import ChatTagRo from "./chat-tag-ro.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
-import { connect } from "react-redux";
 
-const mapStateToProps = createStructuredSelector({
+export default function ChatTagRoContainer({ conversation }) {
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatTagRoContainer({ conversation, bodyshop }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const { socket } = useContext(SocketContext);
 
   const [loadRo, { loading, data }] = useLazyQuery(SEARCH_FOR_JOBS);
 
   const executeSearch = (v) => {
     logImEXEvent("messaging_search_job_tag", { searchTerm: v });
-    loadRo(v).catch((e) => console.error("Error in ChatTagRoContainer executeSearch:", e));
+    loadRo(v);
   };
 
   const debouncedExecuteSearch = _.debounce(executeSearch, 500);
@@ -41,40 +30,9 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
     variables: { conversationId: conversation.id }
   });
 
-  const handleInsertTag = async (value, option) => {
+  const handleInsertTag = (value, option) => {
     logImEXEvent("messaging_add_job_tag");
-
+    insertTag({ variables: { jobId: option.key } });
-    await insertTag({
-      variables: { jobId: option.key }
-    });
-
-    if (socket) {
-      // Find the job details from the search data
-      const selectedJob = data?.search_jobs.find((job) => job.id === option.key);
-      if (!selectedJob) return;
-      socket.emit("conversation-modified", {
-        conversationId: conversation.id,
-        bodyshopId: bodyshop.id,
-        type: "tag-added",
-        selectedJob,
-        job_conversations: [
-          {
-            __typename: "job_conversations",
-            jobid: selectedJob.id,
-            conversationid: conversation.id,
-            job: {
-              __typename: "jobs",
-              id: selectedJob.id,
-              ro_number: selectedJob.ro_number,
-              ownr_co_nm: selectedJob.ownr_co_nm,
-              ownr_fn: selectedJob.ownr_fn,
-              ownr_ln: selectedJob.ownr_ln
-            }
-          }
-        ]
-      });
-    }
-
     setOpen(false);
   };
 
@@ -92,10 +50,9 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
           handleSearch={handleSearch}
           handleInsertTag={handleInsertTag}
           setOpen={setOpen}
-          style={{ cursor: "pointer" }}
         />
       ) : (
-        <Tag style={{ cursor: "pointer" }} onClick={() => setOpen(true)}>
+        <Tag onClick={() => setOpen(true)}>
           <PlusOutlined />
           {t("messaging.actions.link")}
         </Tag>
@@ -103,5 +60,3 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
     </div>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChatTagRoContainer);

client/src/components/conflict/conflict.component.jsx

@@ -16,7 +16,8 @@ export default function ConflictComponent() {
               {t("general.labels.instanceconflictext", {
                 app: InstanceRenderManager({
                   imex: "$t(titles.imexonline)",
-                  rome: "$t(titles.romeonline)"
+                  rome: "$t(titles.romeonline)",
+                  promanager: "$t(titles.promanager)"
                 })
               })}
             </div>

client/src/components/documents-local-upload/documents-local-upload.component.jsx

@@ -6,9 +6,6 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { handleUpload } from "./documents-local-upload.utility";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -26,20 +23,17 @@ export function DocumentsLocalUploadComponent({
   allowAllTypes
 }) {
   const [fileList, setFileList] = useState([]);
-  const { t } = useTranslation();
+
   const handleDone = (uid) => {
     setTimeout(() => {
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
     }, 2000);
   };
 
-  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
-
   return (
     <Upload.Dragger
       multiple={true}
       fileList={fileList}
-      disabled={!hasMediaAccess}
       onChange={(f) => {
         if (f.event && f.event.percent === 100) handleDone(f.file.uid);
 
@@ -65,9 +59,7 @@ export function DocumentsLocalUploadComponent({
           <p className="ant-upload-drag-icon">
             <UploadOutlined />
           </p>
-          <p className="ant-upload-text">
+          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
-            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
-          </p>
         </>
       )}
     </Upload.Dragger>

client/src/components/documents-upload/documents-upload.component.jsx

@@ -7,8 +7,6 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -47,13 +45,11 @@ export function DocumentsUploadComponent({
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
     }, 2000);
   };
-  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
 
   return (
     <Upload.Dragger
       multiple={true}
       fileList={fileList}
-      disabled={!hasMediaAccess}
       onChange={(f) => {
         if (f.event && f.event.percent === 100) handleDone(f.file.uid);
         setFileList(f.fileList);
@@ -93,9 +89,7 @@ export function DocumentsUploadComponent({
           <p className="ant-upload-drag-icon">
             <UploadOutlined />
           </p>
-          <p className="ant-upload-text">
+          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
-            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
-          </p>
           {!ignoreSizeLimit && (
             <Space wrap className="ant-upload-text">
               <Progress type="dashboard" percent={pct} size="small" />

client/src/components/error-boundary/error-boundary.component.jsx

@@ -108,7 +108,8 @@ class ErrorBoundary extends React.Component {
             subTitle={t("general.messages.exception", {
               app: InstanceRenderManager({
                 imex: "$t(titles.imexonline)",
-                rome: "$t(titles.romeonline)"
+                rome: "$t(titles.romeonline)",
+                promanager: "$t(titles.promanager)"
               })
             })}
             extra={

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

@@ -1,144 +0,0 @@
-import Dinero from "dinero.js";
-import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { HasFeatureAccess } from "./feature-wrapper.component";
-import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
-const blurringProps = {
-  filter: "blur(4px)",
-  webkitUserSelect: "none",
-  msUserSelect: "none",
-  mozUserSelect: "none",
-  userSelect: "none",
-  pointerEvents: "none"
-};
-
-export function BlurWrapper({
-  bodyshop,
-  featureName,
-  styleProp = "style",
-  valueProp = "value",
-  overrideValue = true,
-  overrideValueFunction,
-  children,
-  debug,
-  bypass
-}) {
-  if (import.meta.env.DEV) {
-    if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
-  }
-
-  if (debug) {
-    console.trace("*** DEBUG MODE", featureName);
-    console.log("*** HAS FEATURE ACCESS?", featureName, HasFeatureAccess({ featureName, bodyshop }));
-    console.log(
-      "***LOG  ~ All Blur Wrapper Props ",
-      styleProp,
-      valueProp,
-      overrideValue,
-      overrideValueFunction,
-      children,
-      debug,
-      bypass
-    );
-  }
-
-  if (bypass) {
-    if (import.meta.env.DEV) {
-      console.trace("*** Blur Wrapper BYPASS USED", featureName);
-    }
-    return children;
-  }
-
-  if (!HasFeatureAccess({ featureName, bodyshop })) {
-    const childrenWithBlurProps = React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        //Clone the child, and spread in our props to overwrite it.
-        let newValueProp;
-        if (!overrideValue) {
-          newValueProp = child.props[valueProp];
-        } else {
-          if (typeof overrideValueFunction === "function") {
-            newValueProp = overrideValueFunction();
-          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomDinero") {
-            newValueProp = RandomDinero();
-          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomAmount") {
-            newValueProp = RandomAmount();
-          } else if (
-            typeof overrideValueFunction === "string" &&
-            overrideValueFunction.startsWith("RandomSmallString")
-          ) {
-            newValueProp = RandomSmallString(overrideValueFunction.split(":")[1] || 3); //Default back to 3 words, otherwise use the string.
-          } else if (typeof overrideValueFunction === "string" && overrideValueFunction.startsWith("RandomDate")) {
-            newValueProp = RandomDate();
-          } else {
-            newValueProp = "This is some random text. Nothing interesting here.";
-          }
-        }
-
-        return React.cloneElement(child, {
-          [valueProp]: newValueProp,
-          [styleProp]: { ...child.props[styleProp], ...blurringProps }
-        });
-      }
-      return child;
-    });
-
-    return childrenWithBlurProps;
-  }
-
-  return children;
-}
-export default connect(mapStateToProps, null)(BlurWrapper);
-
-function RandomDinero() {
-  return Dinero({ amount: Math.round(Math.exp(Math.random() * 10, 2)) }).toFormat();
-}
-function RandomAmount() {
-  return Math.round(Math.exp(Math.random() * 10));
-}
-
-function RandomSmallString(maxWords = 3) {
-  const words = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit"];
-  const wordCount = Math.floor(Math.random() * maxWords) + 1; // Random number between 1 and 3
-  let result = [];
-  for (let i = 0; i < wordCount; i++) {
-    const randomIndex = Math.floor(Math.random() * words.length);
-    result.push(words[randomIndex]);
-  }
-  return result.join(" ");
-}
-function RandomDate() {
-  return DateTimeFormatterFunction(new Date(Math.floor(Math.random() * 1000000000000)));
-}
-
-const featureNameList = [
-  "mobile",
-  "allAccess",
-  //"audit", //Removing 2024-12-13. Keeping as default feature.
-  "timetickets",
-  "payments",
-  "partsorders",
-  "bills",
-  "export",
-  "csi",
-  "courtesycars",
-  "media",
-  "visualboard",
-  "scoreboard",
-  "techconsole",
-  "checklist",
-  "smartscheduling",
-  "roguard",
-  "dashboard"
-  //"lifecycle" //Removing 2024-12-13. Keeping as default feature.
-];
-
-export function ValidateFeatureName(featureName) {
-  return featureNameList.includes(featureName);
-}

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

@@ -1,84 +1,48 @@
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import dayjs from "../../utils/day";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
-import { ValidateFeatureName } from "./blur-wrapper.component";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function FeatureWrapper({
+function FeatureWrapper({ bodyshop, featureName, noauth, children, ...restProps }) {
-  bodyshop,
-  featureName,
-  noauth,
-  blurContent,
-  children,
-  upsellComponent,
-  bypass,
-  ...restProps
-}) {
   const { t } = useTranslation();
 
-  if (bypass) {
-    if (import.meta.env.DEV) {
-      console.trace("*** Feature Wrapper BYPASS USED", featureName);
-    }
-    return children;
-  }
-
-  if (import.meta.env.DEV) {
-    if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
-  }
-
-  if (upsellComponent) {
-    console.error("*** Upsell component passed in. This is not yet implemented.");
-  }
-
   if (HasFeatureAccess({ featureName, bodyshop })) return children;
 
-  if (blurContent) {
+  return (
-    const childrenWithBlurProps = React.Children.map(children, (child) => {
+    noauth || (
-      // Checking isValidElement is the safe way and avoids a
+      <AlertComponent
-      // typescript error too.
+        message={t("general.messages.nofeatureaccess", {
-      if (React.isValidElement(child)) {
+          app: InstanceRenderManager({
-        return React.cloneElement(child, { blur: true });
+            imex: "$t(titles.imexonline)",
-      }
+            rome: "$t(titles.romeonline)",
-      return child;
+            promanager: "$t(titles.promanager)"
-    });
+          })
-    return childrenWithBlurProps;
+        })}
-  } else {
+        type="warning"
-    return (
+      />
-      noauth || (
+    )
-        <AlertComponent
+  );
-          message={t("general.messages.nofeatureaccess", {
-            app: InstanceRenderManager({
-              imex: "$t(titles.imexonline)",
-              rome: "$t(titles.romeonline)"
-            })
-          })}
-          type="warning"
-        />
-      )
-    );
-  }
 }
 
-export function HasFeatureAccess({ featureName, bodyshop, bypass, debug = false }) {
+export function HasFeatureAccess({ featureName, bodyshop }) {
-  if (debug) {
-    console.trace(`*** HasFeatureAccessFunction called with feature << ${featureName} >>`);
-  }
-  if (bypass) {
-    if (import.meta.env.DEV) {
-      console.trace("*** Feature Wrapper BYPASS USED", featureName);
-    }
-    return true;
-  }
   return bodyshop?.features?.allAccess || dayjs(bodyshop?.features[featureName]).isAfter(dayjs());
 }
 
 export default connect(mapStateToProps, null)(FeatureWrapper);
+
+/* 
+dashboard
+production-board
+scoreboard
+csi
+tech-console
+mobile-imaging
+*/

client/src/components/header/header.component.jsx

@@ -26,7 +26,8 @@ import Icon, {
   UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Space } from "antd";
+import { Layout, Menu } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -43,7 +44,6 @@ import { signOutStart } from "../../redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -128,39 +128,34 @@ function Header({
 
   const accountingChildren = [];
 
-  accountingChildren.push(
+  if (
-    {
+    InstanceRenderManager({
-      key: "bills",
+      imex: true,
-      id: "header-accounting-bills",
+      rome: true,
-      icon: <Icon component={FaFileInvoiceDollar} />,
+      promanager: HasFeatureAccess({ featureName: "bills", bodyshop })
-      label: (
+    })
-        <Link to="/manage/bills">
+  ) {
-          <LockWrapper featureName="bills" bodyshop={bodyshop}>
+    accountingChildren.push(
-            {t("menus.header.bills")}
+      {
-          </LockWrapper>
+        key: "bills",
-        </Link>
+        id: "header-accounting-bills",
-      )
+        icon: <Icon component={FaFileInvoiceDollar} />,
-    },
+        label: <Link to="/manage/bills">{t("menus.header.bills")}</Link>
-    {
+      },
-      key: "enterbills",
+      {
-      id: "header-accounting-enterbills",
+        key: "enterbills",
-      icon: <Icon component={GiPayMoney} />,
+        id: "header-accounting-enterbills",
-      label: (
+        icon: <Icon component={GiPayMoney} />,
-        <Space>
+        label: t("menus.header.enterbills"),
-          <LockWrapper featureName="bills" bodyshop={bodyshop}>
+        onClick: () => {
-            {t("menus.header.enterbills")}
-          </LockWrapper>
-        </Space>
-      ),
-      onClick: () => {
-        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
           setBillEnterContext({
             actions: {},
             context: {}
           });
+        }
       }
-    }
+    );
-  );
+  }
 
   if (Simple_Inventory.treatment === "on") {
     accountingChildren.push(
@@ -175,41 +170,37 @@ function Header({
       }
     );
   }
-
+  if (
-  accountingChildren.push(
+    InstanceRenderManager({
-    {
+      imex: true,
-      type: "divider"
+      rome: true,
-    },
+      promanager: HasFeatureAccess({ featureName: "payments", bodyshop })
-    {
+    })
-      key: "allpayments",
+  ) {
-      id: "header-accounting-allpayments",
+    accountingChildren.push(
-      icon: <BankFilled />,
+      {
-      label: (
+        type: "divider"
-        <Link to="/manage/payments">
+      },
-          <LockWrapper featureName="payments" bodyshop={bodyshop}>
+      {
-            {t("menus.header.allpayments")}
+        key: "allpayments",
-          </LockWrapper>
+        id: "header-accounting-allpayments",
-        </Link>
+        icon: <BankFilled />,
-      )
+        label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
-    },
+      },
-    {
+      {
-      key: "enterpayments",
+        key: "enterpayments",
-      id: "header-accounting-enterpayments",
+        id: "header-accounting-enterpayments",
-      icon: <Icon component={FaCreditCard} />,
+        icon: <Icon component={FaCreditCard} />,
-      label: (
+        label: t("menus.header.enterpayment"),
-        <LockWrapper featureName="payments" bodyshop={bodyshop}>
+        onClick: () => {
-          {t("menus.header.enterpayment")}
-        </LockWrapper>
-      ),
-      onClick: () => {
-        HasFeatureAccess({ featureName: "payments", bodyshop }) &&
           setPaymentContext({
             actions: {},
             context: null
           });
+        }
       }
-    }
+    );
-  );
+  }
 
   if (ImEXPay.treatment === "on") {
     accountingChildren.push({
@@ -226,44 +217,40 @@ function Header({
     });
   }
 
-  accountingChildren.push(
+  if (
-    {
+    InstanceRenderManager({
-      type: "divider"
+      imex: true,
-    },
+      rome: true,
-    {
+      promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-      key: "timetickets",
+    })
-      id: "header-accounting-timetickets",
+  ) {
-      icon: <FieldTimeOutlined />,
+    accountingChildren.push(
-      label: (
+      {
-        <Link to="/manage/timetickets">
+        type: "divider"
-          <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+      },
-            {t("menus.header.timetickets")}
+      {
-          </LockWrapper>
+        key: "timetickets",
-        </Link>
+        id: "header-accounting-timetickets",
-      )
+        icon: <FieldTimeOutlined />,
-    }
+        label: <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
-  );
+      }
+    );
 
-  if (bodyshop?.md_tasks_presets?.use_approvals) {
+    if (bodyshop?.md_tasks_presets?.use_approvals) {
-    accountingChildren.push({
+      accountingChildren.push({
-      key: "ttapprovals",
+        key: "ttapprovals",
-      id: "header-accounting-ttapprovals",
+        id: "header-accounting-ttapprovals",
-      icon: <FieldTimeOutlined />,
+        icon: <FieldTimeOutlined />,
-      label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
+        label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
-    });
+      });
-  }
+    }
-  accountingChildren.push(
+    accountingChildren.push(
-    {
+      {
-      key: "entertimetickets",
+        key: "entertimetickets",
-      icon: <Icon component={GiPlayerTime} />,
+        icon: <Icon component={GiPlayerTime} />,
-      label: (
+        label: t("menus.header.entertimeticket"),
-        <LockWrapper featureName="timetickets" bodyshop={bodyshop}>
+        id: "header-accounting-entertimetickets",
-          {t("menus.header.entertimeticket")}
+        onClick: () => {
-        </LockWrapper>
-      ),
-      id: "header-accounting-entertimetickets",
-      onClick: () => {
-        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
           setTimeTicketContext({
             actions: {},
             context: {
@@ -272,24 +259,19 @@ function Header({
                 : currentUser.email
             }
           });
+        }
+      },
+      {
+        type: "divider"
       }
-    },
+    );
-    {
+  }
-      type: "divider"
-    }
-  );
 
   const accountingExportChildren = [
     {
       key: "receivables",
       id: "header-accounting-receivables",
-      label: (
+      label: <Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>
-        <Link to="/manage/accounting/receivables">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-receivables")}
-          </LockWrapper>
-        </Link>
-      )
     }
   ];
 
@@ -297,13 +279,7 @@ function Header({
     accountingExportChildren.push({
       key: "payables",
       id: "header-accounting-payables",
-      label: (
+      label: <Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>
-        <Link to="/manage/accounting/payables">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-payables")}
-          </LockWrapper>
-        </Link>
-      )
     });
   }
 
@@ -311,13 +287,7 @@ function Header({
     accountingExportChildren.push({
       key: "payments",
       id: "header-accounting-payments",
-      label: (
+      label: <Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>
-        <Link to="/manage/accounting/payments">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.accounting-payments")}
-          </LockWrapper>
-        </Link>
-      )
     });
   }
 
@@ -328,27 +298,25 @@ function Header({
     {
       key: "exportlogs",
       id: "header-accounting-exportlogs",
-      label: (
+      label: <Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>
-        <Link to="/manage/accounting/exportlogs">
-          <LockWrapper featureName="export" bodyshop={bodyshop}>
-            {t("menus.header.export-logs")}
-          </LockWrapper>
-        </Link>
-      )
     }
   );
 
-  accountingChildren.push({
+  if (
-    key: "accountingexport",
+    InstanceRenderManager({
-    id: "header-accounting-export",
+      imex: true,
-    icon: <ExportOutlined />,
+      rome: true,
-    label: (
+      promanager: HasFeatureAccess({ featureName: "export", bodyshop })
-      <LockWrapper featureName="export" bodyshop={bodyshop}>
+    })
-        {t("menus.header.export")}
+  ) {
-      </LockWrapper>
+    accountingChildren.push({
-    ),
+      key: "accountingexport",
-    children: accountingExportChildren
+      id: "header-accounting-export",
-  });
+      icon: <ExportOutlined />,
+      label: t("menus.header.export"),
+      children: accountingExportChildren
+    });
+  }
 
   const menuItems = [
     {
@@ -417,35 +385,38 @@ function Header({
           icon: <ScheduleOutlined />,
           label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
         },
+        ...(InstanceRenderManager({
+          imex: true,
+          rome: true,
+          promanager: HasFeatureAccess({ featureName: "visualboard", bodyshop })
+        })
+          ? [
+              {
+                key: "productionboard",
+                id: "header-production-board",
+                icon: <Icon component={BsKanban} />,
+                label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
+              }
+            ]
+          : []),
 
-        {
+        ...(InstanceRenderManager({
-          key: "productionboard",
+          imex: true,
-          id: "header-production-board",
+          rome: true,
-          icon: <Icon component={BsKanban} />,
+          promanager: HasFeatureAccess({ featureName: "scoreboard", bodyshop })
-          label: (
+        })
-            <Link to="/manage/production/board">
+          ? [
-              <LockWrapper featureName="visualboard" bodyshop={bodyshop}>
+              {
-                {t("menus.header.productionboard")}
+                type: "divider"
-              </LockWrapper>
+              },
-            </Link>
+              {
-          )
+                key: "scoreboard",
-        },
+                id: "header-scoreboard",
-
+                icon: <LineChartOutlined />,
-        {
+                label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
-          type: "divider"
+              }
-        },
+            ]
-        {
+          : [])
-          key: "scoreboard",
-          id: "header-scoreboard",
-          icon: <LineChartOutlined />,
-          label: (
-            <Link to="/manage/scoreboard">
-              <LockWrapper featureName="scoreboard" bodyshop={bodyshop}>
-                {t("menus.header.scoreboard")}
-              </LockWrapper>
-            </Link>
-          )
-        }
       ]
     },
     {
@@ -468,54 +439,40 @@ function Header({
         }
       ]
     },
-    {
+    ...(InstanceRenderManager({
-      key: "ccs",
+      imex: true,
-      id: "header-css",
+      rome: true,
-      icon: <CarFilled />,
+      promanager: false // HasFeatureAccess({ featureName: 'courtesycars', bodyshop }),
-      label: (
+    })
-        <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+      ? [
-          {t("menus.header.courtesycars")}
+          {
-        </LockWrapper>
+            key: "ccs",
-      ),
+            id: "header-css",
-      children: [
+            icon: <CarFilled />,
-        {
+            label: t("menus.header.courtesycars"),
-          key: "courtesycarsall",
+            children: [
-          id: "header-courtesycars-all",
+              {
-          icon: <CarFilled />,
+                key: "courtesycarsall",
-          label: (
+                id: "header-courtesycars-all",
-            <Link to="/manage/courtesycars">
+                icon: <CarFilled />,
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
-                {t("menus.header.courtesycars-all")}
+              },
-              </LockWrapper>
+              {
-            </Link>
+                key: "contracts",
-          )
+                id: "header-contracts",
-        },
+                icon: <FileFilled />,
-        {
+                label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
-          key: "contracts",
+              },
-          id: "header-contracts",
+              {
-          icon: <FileFilled />,
+                key: "newcontract",
-          label: (
+                id: "header-newcontract",
-            <Link to="/manage/courtesycars/contracts">
+                icon: <FileAddFilled />,
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
+                label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>
-                {t("menus.header.courtesycars-contracts")}
+              }
-              </LockWrapper>
+            ]
-            </Link>
+          }
-          )
+        ]
-        },
+      : []),
-        {
-          key: "newcontract",
-          id: "header-newcontract",
-          icon: <FileAddFilled />,
-          label: (
-            <Link to="/manage/courtesycars/contracts/new">
-              <LockWrapper featureName="courtesycars" bodyshop={bodyshop}>
-                {t("menus.header.courtesycars-newcontract")}
-              </LockWrapper>
-            </Link>
-          )
-        }
-      ]
-    },
 
     ...(accountingChildren.length > 0
       ? [
@@ -534,20 +491,20 @@ function Header({
       icon: <PhoneOutlined />,
       label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
     },
-
+    ...(InstanceRenderManager({
-    {
+      imex: true,
-      key: "temporarydocs",
+      rome: true,
-      id: "header-temporarydocs",
+      promanager: HasFeatureAccess({ featureName: "media", bodyshop })
-      icon: <PaperClipOutlined />,
+    })
-      label: (
+      ? [
-        <Link to="/manage/temporarydocs">
+          {
-          <LockWrapper featureName="media" bodyshop={bodyshop}>
+            key: "temporarydocs",
-            {t("menus.header.temporarydocs")}
+            id: "header-temporarydocs",
-          </LockWrapper>
+            icon: <PaperClipOutlined />,
-        </Link>
+            label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
-      )
+          }
-    },
+        ]
-
+      : []),
     {
       key: "tasks",
       id: "tasks",
@@ -593,11 +550,7 @@ function Header({
           key: "dashboard",
           id: "header-dashboard",
           icon: <DashboardFilled />,
-          label: (
+          label: <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
-            <Link to="/manage/dashboard">
-              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
-            </Link>
-          )
         },
         {
           key: "reportcenter",
@@ -617,19 +570,20 @@ function Header({
           icon: <Icon component={IoBusinessOutline} />,
           label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
         },
-
+        ...(InstanceRenderManager({
-        {
+          imex: true,
-          key: "shop-csi",
+          rome: true,
-          id: "header-shop-csi",
+          promanager: HasFeatureAccess({ featureName: "csi", bodyshop })
-          icon: <Icon component={RiSurveyLine} />,
+        })
-          label: (
+          ? [
-            <Link to="/manage/shop/csi">
+              {
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
+                key: "shop-csi",
-                {t("menus.header.shop_csi")}
+                id: "header-shop-csi",
-              </LockWrapper>
+                icon: <Icon component={RiSurveyLine} />,
-            </Link>
+                label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
-          )
+              }
-        }
+            ]
+          : [])
       ]
     },
     {
@@ -653,7 +607,8 @@ function Header({
             window.open(
               InstanceRenderManager({
                 imex: "https://help.imex.online/",
-                rome: "https://rometech.com//"
+                rome: "https://rometech.com//",
+                promanager: "https://web-est.com"
               }),
 
               "_blank"
@@ -662,7 +617,8 @@ function Header({
         },
         ...(InstanceRenderManager({
           imex: true,
-          rome: false
+          rome: false,
+          promanager: false
         })
           ? [
               {
@@ -676,19 +632,20 @@ function Header({
             ]
           : []),
 
-        {
+        ...(InstanceRenderManager({
-          key: "shiftclock",
+          imex: true,
-          id: "header-shiftclock",
+          rome: true,
-          icon: <Icon component={GiPlayerTime} />,
+          promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-          label: (
+        })
-            <Link to="/manage/shiftclock">
+          ? [
-              <LockWrapper featureName="export" bodyshop={bodyshop}>
+              {
-                {t("menus.header.shiftclock")}
+                key: "shiftclock",
-              </LockWrapper>
+                id: "header-shiftclock",
-            </Link>
+                icon: <Icon component={GiPlayerTime} />,
-          )
+                label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
-        },
+              }
-
+            ]
+          : []),
         {
           key: "profile",
           id: "header-profile",

client/src/components/job-at-change/schedule-event.component.jsx

@@ -3,7 +3,7 @@ import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select,
 import parsePhoneNumber from "libphonenumber-js";
 import dayjs from "../../utils/day";
 import queryString from "query-string";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
@@ -24,7 +24,6 @@ import ScheduleEventNote from "./schedule-event.note.component";
 import { useMutation } from "@apollo/client";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -50,8 +49,6 @@ export function ScheduleEventComponent({
   const searchParams = queryString.parse(useLocation().search);
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [title, setTitle] = useState(event.title);
-  const { socket } = useContext(SocketContext);
-
   const blockContent = (
     <Space direction="vertical" wrap>
       <Input
@@ -193,8 +190,7 @@ export function ScheduleEventComponent({
                     if (p && p.isValid()) {
                       openChatByPhone({
                         phone_num: p.formatInternational(),
-                        jobid: event.job.id,
+                        jobid: event.job.id
-                        socket
                       });
                       setMessage(
                         t("appointments.labels.reminder", {

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -1,27 +1,23 @@
-import { SyncOutlined } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Col, Row, Table, Tag } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
+  currentUser: selectCurrentUser
-  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobAuditTrail);
 
-export function JobAuditTrail({ bodyshop, currentUser, jobId }) {
+export function JobAuditTrail({ currentUser, jobId }) {
   const { t } = useTranslation();
   const { loading, data, refetch } = useQuery(QUERY_AUDIT_TRAIL, {
     variables: { jobid: jobId },
@@ -45,12 +41,7 @@ export function JobAuditTrail({ bodyshop, currentUser, jobId }) {
     {
       title: t("audit.fields.operation"),
       dataIndex: "operation",
-      key: "operation",
+      key: "operation"
-      render: (text, record) => (
-        <BlurWrapperComponent featureName="audit" bypass>
-          <div>{text}</div>
-        </BlurWrapperComponent>
-      )
     }
   ];
   const emailColumns = [
@@ -73,84 +64,52 @@ export function JobAuditTrail({ bodyshop, currentUser, jobId }) {
       dataIndex: "to",
       key: "to",
 
-      render: (text, record) =>
+      render: (text, record) => record.to && record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>)
-        record.to &&
-        record.to.map((email, idx) => (
-          <Tag key={idx}>
-            <BlurWrapperComponent featureName="audit" bypass>
-              <div>{email}</div>
-            </BlurWrapperComponent>
-          </Tag>
-        ))
     },
     {
       title: t("audit.fields.cc"),
       dataIndex: "cc",
       key: "cc",
 
-      render: (text, record) =>
+      render: (text, record) => record.cc && record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>)
-        record.cc &&
-        record.cc.map((email, idx) => (
-          <Tag key={idx}>
-            <BlurWrapperComponent featureName="audit" bypass>
-              <div>{email}</div>
-            </BlurWrapperComponent>
-          </Tag>
-        ))
     },
     {
       title: t("audit.fields.subject"),
       dataIndex: "subject",
-      key: "subject",
+      key: "subject"
-      render: (text, record) => (
-        <BlurWrapperComponent featureName="audit" bypass>
-          <div>{text}</div>
-        </BlurWrapperComponent>
-      )
     },
     {
       title: t("audit.fields.status"),
       dataIndex: "status",
-      key: "status",
+      key: "status"
-      render: (text, record) => (
-        <BlurWrapperComponent featureName="audit" bypass>
-          <div>{text}</div>
-        </BlurWrapperComponent>
-      )
     },
-
+    ...(currentUser?.email.includes("@imex.")
-    {
+      ? [
-      title: t("audit.fields.contents"),
+          {
-      dataIndex: "contents",
+            title: t("audit.fields.contents"),
-      key: "contents",
+            dataIndex: "contents",
-      width: "10%",
+            key: "contents",
-      render: (text, record) => (
+            width: "10%",
-        <Button
+            render: (text, record) => (
-          onClick={() => {
+              <Button
-            var win = window.open(
+                onClick={() => {
-              "",
+                  var win = window.open(
-              "Title",
+                    "",
-              "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
+                    "Title",
-            );
+                    "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
-            win.document.body.innerHTML = record.contents;
+                  );
-          }}
+                  win.document.body.innerHTML = record.contents;
-        >
+                }}
-          Preview
+              >
-        </Button>
+                Preview
-      )
+              </Button>
-    }
+            )
+          }
+        ]
+      : [])
   ];
-
-  const hasAuditAccess = HasFeatureAccess({ bodyshop, featureName: "audit" });
   return (
     <Row gutter={[16, 16]}>
-      {!hasAuditAccess && (
-        <Col span={24}>
-          <Card>
-            <UpsellComponent upsell={upsellEnum().audit.general} disableMask />
-          </Card>
-        </Col>
-      )}
       <Col span={24}>
         <Card
           title={t("jobs.labels.audit")}

client/src/components/job-bills-total/job-bills-total.component.jsx

@@ -6,22 +6,8 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import "./job-bills-total.styles.scss";
-import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 
-const mapStateToProps = createStructuredSelector({
+export default function JobBillsTotalComponent({
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-
-export function JobBillsTotalComponent({
-  bodyshop,
   loading,
   bills,
   partsOrders,
@@ -32,7 +18,7 @@ export function JobBillsTotalComponent({
   const { t } = useTranslation();
 
   if (loading) return <LoadingSkeleton />;
-  if (!jobTotals) {
+  if (!!!jobTotals) {
     if (showWarning && warningCallback && typeof warningCallback === "function") {
       warningCallback({ key: "bills", warning: t("jobs.errors.nofinancial") });
     }
@@ -111,7 +97,8 @@ export function JobBillsTotalComponent({
     .add(
       InstanceRenderManager({
         imex: Dinero(),
-        rome: Dinero(totals.additional.additionalCosts)
+        rome: Dinero(totals.additional.additionalCosts),
+        promanager: "USE_ROME"
       })
     ); // Additional costs were captured for Rome, but not imex.
 
@@ -133,10 +120,10 @@ export function JobBillsTotalComponent({
       warningCallback({ key: "cm", warning: t("jobs.labels.outstanding_credit_memos") });
     }
   }
-  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
+
   return (
     <Row gutter={[16, 16]}>
-      <Col {...(hasBillsAccess ? { md: 24, lg: 18 } : { span: 12 })}>
+      <Col md={24} lg={18}>
         <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
           <Space wrap size="large">
             <Tooltip
@@ -160,9 +147,7 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
-                <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
-              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -174,15 +159,13 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic
-                <Statistic
+                title={t("bills.labels.discrepancy")}
-                  title={t("bills.labels.discrepancy")}
+                valueStyle={{
-                  valueStyle={{
+                  color: discrepancy.getAmount() === 0 ? "green" : "red"
-                    color: discrepancy.getAmount() === 0 ? "green" : "red"
+                }}
-                  }}
+                value={discrepancy.toFormat()}
-                  value={discrepancy.toFormat()}
+              />
-                />
-              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>+</Typography.Title>
             <Tooltip
@@ -194,9 +177,7 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
-                <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
-              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -208,15 +189,13 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic
-                <Statistic
+                title={t("bills.labels.discrepancy")}
-                  title={t("bills.labels.discrepancy")}
+                valueStyle={{
-                  valueStyle={{
+                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
-                    color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
+                }}
-                  }}
+                value={discrepWithLbrAdj.toFormat()}
-                  value={discrepWithLbrAdj.toFormat()}
+              />
-                />
-              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>+</Typography.Title>
             <Tooltip
@@ -228,9 +207,7 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
-                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
-              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -242,17 +219,16 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic
-                <Statistic
+                title={t("bills.labels.discrepancy")}
-                  title={t("bills.labels.discrepancy")}
+                valueStyle={{
-                  valueStyle={{
+                  color: discrepWithCms.getAmount() === 0 ? "green" : "red"
-                    color: discrepWithCms.getAmount() === 0 ? "green" : "red"
+                }}
-                  }}
+                value={discrepWithCms.toFormat()}
-                  value={discrepWithCms.toFormat()}
+              />
-                />
-              </BlurWrapperComponent>
             </Tooltip>
           </Space>
+
           {showWarning &&
             (discrepWithCms.getAmount() !== 0 ||
               discrepWithLbrAdj.getAmount() !== 0 ||
@@ -277,9 +253,7 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
-                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
-              </BlurWrapperComponent>
             </Tooltip>
             <Tooltip
               title={
@@ -290,19 +264,17 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic
-                <Statistic
+                title={t("bills.labels.calculatedcreditsnotreceived")}
-                  title={t("bills.labels.calculatedcreditsnotreceived")}
+                valueStyle={{
-                  valueStyle={{
+                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
-                    color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
+                }}
-                  }}
+                value={
-                  value={
+                  calculatedCreditsNotReceived.getAmount() >= 0
-                    calculatedCreditsNotReceived.getAmount() >= 0
+                    ? calculatedCreditsNotReceived.toFormat()
-                      ? calculatedCreditsNotReceived.toFormat()
+                    : Dinero().toFormat()
-                      : Dinero().toFormat()
+                }
-                  }
+              />
-                />
-              </BlurWrapperComponent>
             </Tooltip>
             <Tooltip
               title={
@@ -313,19 +285,17 @@ export function JobBillsTotalComponent({
                 />
               }
             >
-              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+              <Statistic
-                <Statistic
+                title={t("bills.labels.creditsnotreceived")}
-                  title={t("bills.labels.creditsnotreceived")}
+                valueStyle={{
-                  valueStyle={{
+                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
-                    color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
+                }}
-                  }}
+                value={
-                  value={
+                  totalReturnsMarkedNotReceived.getAmount() >= 0
-                    totalReturnsMarkedNotReceived.getAmount() >= 0
+                    ? totalReturnsMarkedNotReceived.toFormat()
-                      ? totalReturnsMarkedNotReceived.toFormat()
+                    : Dinero().toFormat()
-                      : Dinero().toFormat()
+                }
-                  }
+              />
-                />
-              </BlurWrapperComponent>
             </Tooltip>
           </Space>
           {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
@@ -333,15 +303,6 @@ export function JobBillsTotalComponent({
           )}
         </Card>
       </Col>
-      {!hasBillsAccess && (
-        <Col span={6}>
-          <Card style={{ height: "100%" }}>
-            <UpsellComponent upsell={upsellEnum().bills.autoreconcile} disableMask />
-          </Card>
-        </Col>
-      )}
     </Row>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(JobBillsTotalComponent);

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -47,7 +47,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
     md: "100%",
     lg: "75%",
     xl: "75%",
-    xxl: "75%"
+    xxl: "60%"
   };
   const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
 
@@ -122,7 +122,7 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
             </Col>
             {!bodyshop.uselocalmediaserver && (
               <Col {...span}>
-                <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} bodyshop={bodyshop} />
+                <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} />
               </Col>
             )}
             <Col {...span}>

client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx

@@ -1,14 +1,11 @@
 import { Carousel } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import { GenerateThumbUrl } from "../jobs-documents-gallery/job-documents.utility";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import CardTemplate from "./job-detail-cards.template.component";
 
-export default function JobDetailCardsDocumentsComponent({ loading, data, bodyshop }) {
+export default function JobDetailCardsDocumentsComponent({ loading, data }) {
   const { t } = useTranslation();
-  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
 
   if (!data)
     return (
@@ -23,18 +20,14 @@ export default function JobDetailCardsDocumentsComponent({ loading, data, bodysh
       title={t("jobs.labels.cards.documents")}
       extraLink={`/manage/jobs/${data.id}?tab=documents`}
     >
-      {!hasMediaAccess && (
+      {data.documents.length > 0 ? (
-        <UpsellComponent disableMask upsell={upsellEnum().media.general}>
+        <Carousel autoplay>
-          {data.documents.length > 0 ? (
+          {data.documents.map((item) => (
-            <Carousel autoplay>
+            <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
-              {data.documents.map((item) => (
+          ))}
-                <img key={item.id} src={GenerateThumbUrl(item)} alt={item.name} />
+        </Carousel>
-              ))}
+      ) : (
-            </Carousel>
+        <div>{t("documents.errors.nodocuments")}</div>
-          ) : (
-            <div>{t("documents.errors.nodocuments")}</div>
-          )}
-        </UpsellComponent>
       )}
     </CardTemplate>
   );

client/src/components/job-detail-lines/job-lines-expander.component.jsx

@@ -12,10 +12,9 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import AlertComponent from "../alert/alert.component";
-import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container";
+import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container.jsx";
-
+import FeatureWrapper from "../feature-wrapper/feature-wrapper.component.jsx";
-import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
+import TaskListContainer from "../task-list/task-list.container.jsx";
-import TaskListContainer from "../task-list/task-list.container";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -83,7 +82,7 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
                   }
                 ]
           }
-        />
+        />{" "}
       </Col>
       <Col md={24} lg={8}>
         <Typography.Title level={4}>{t("parts_dispatch.labels.parts_dispatch")}</Typography.Title>
@@ -118,61 +117,57 @@ export function JobLinesExpander({ jobline, jobid, bodyshop, technician }) {
           }
         />
       </Col>
-
+      <FeatureWrapper featureName="bills" noauth={() => null}>
-      <Col md={24} lg={8}>
+        <Col md={24} lg={8}>
-        <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+          <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-        <BillDetailEditcontainer />
+          <BillDetailEditcontainer />
-        <Timeline
+          <Timeline
-          items={
+            items={
-            data.billlines.length > 0
+              data.billlines.length > 0
-              ? data.billlines.map((line) => ({
+                ? data.billlines.map((line) => ({
-                  key: line.id,
+                    key: line.id,
-                  children: (
-                    <Row wrap>
-                      <Col span={4}>
-                        {!technician ? (
-                          <>
-                            <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
-                              {line.bill.invoice_number}
-                            </Link>
-                          </>
-                        ) : (
-                          `${line.bill.invoice_number}`
-                        )}
-                      </Col>
-                      <Col span={4}>
-                        <span>
-                          {`${t("billlines.fields.actual_price")}: `}
-                          <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
-                        </span>
-                      </Col>
-                      <Col span={4}>
-                        <span>
-                          {`${t("billlines.fields.actual_cost")}: `}
-                          <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
-                        </span>
-                      </Col>
-                      <Col span={4}>
-                        <DateFormatter>{line.bill.date}</DateFormatter>
-                      </Col>
-                      <Col span={4}> {line.bill.vendor.name}</Col>
-                    </Row>
-                  )
-                }))
-              : [
-                  {
-                    key: "no-orders",
                     children: (
-                      <BlurWrapper featureName="bills">
+                      <Row wrap>
-                        <span>{t("bills.labels.nobilllines")}</span>
+                        <Col span={4}>
-                      </BlurWrapper>
+                          {!technician ? (
+                            <>
+                              <Link to={`/manage/jobs/${jobid}?tab=partssublet&billid=${line.bill.id}`}>
+                                {line.bill.invoice_number}
+                              </Link>
+                            </>
+                          ) : (
+                            `${line.bill.invoice_number}`
+                          )}
+                        </Col>
+                        <Col span={4}>
+                          <span>
+                            {`${t("billlines.fields.actual_price")}: `}
+                            <CurrencyFormatter>{line.actual_price}</CurrencyFormatter>
+                          </span>
+                        </Col>
+                        <Col span={4}>
+                          <span>
+                            {`${t("billlines.fields.actual_cost")}: `}
+                            <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
+                          </span>
+                        </Col>
+                        <Col span={4}>
+                          <DateFormatter>{line.bill.date}</DateFormatter>
+                        </Col>
+                        <Col span={4}> {line.bill.vendor.name}</Col>
+                      </Row>
                     )
-                  }
+                  }))
-                ]
+                : [
-          }
+                    {
-        />
+                      key: "no-orders",
-      </Col>
+                      children: t("bills.labels.nobilllines")
-
+                    }
+                  ]
+            }
+          />
+        </Col>
+      </FeatureWrapper>
       <Col md={24} lg={24}>
         <TaskListContainer
           parentJobId={jobid}

client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx

@@ -60,21 +60,24 @@ export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
     }
   };
 
-  const popcontent =
+  const popcontent = !technician && InstanceRenderManager({
-    !technician &&
+    imex: null,
-    InstanceRenderManager({
+    rome: (
-      imex: null,
+      <Form layout="vertical" onFinish={handleFinish} initialValues={{ act_price: line.act_price }}>
-      rome: (
+        <Form.Item name="act_price" label={t("jobs.labels.act_price_ppc")} rules={[{ required: true }]}>
-        <Form layout="vertical" onFinish={handleFinish} initialValues={{ act_price: line.act_price }}>
+          <CurrencyFormItemComponent />
-          <Form.Item name="act_price" label={t("jobs.labels.act_price_ppc")} rules={[{ required: true }]}>
+        </Form.Item>
-            <CurrencyFormItemComponent />
+        <Button
-          </Form.Item>
+          disabled={InstanceRenderManager({ imex: true, rome: false, promanager: true })}
-          <Button disabled={InstanceRenderManager({ imex: true, rome: false })} loading={loading} htmlType="primary">
+          loading={loading}
-            {t("general.actions.save")}
+          htmlType="primary"
-          </Button>
+        >
-        </Form>
+          {t("general.actions.save")}
-      )
+        </Button>
-    });
+      </Form>
+    ),
+    promanager: null
+  });
 
   return (
     <JobLineConvertToLabor jobline={line} job={job}>

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -216,9 +216,7 @@ export function JobLinesComponent({
     {
       title: t("joblines.fields.part_qty"),
       dataIndex: "part_qty",
-      key: "part_qty",
+      key: "part_qty"
-      sorter: (a, b) => a.part_qty - b.part_qty,
-      sortOrder: state.sortedInfo.columnKey === "part_qty" && state.sortedInfo.order
     },
     // {
     //   title: t('joblines.fields.tax_part'),

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -158,7 +158,8 @@ export function JobEmployeeAssignments({
           label={t(
             InstanceRenderManager({
               imex: "jobs.fields.employee_csr",
-              rome: "jobs.fields.employee_csr_writer"
+              rome: "jobs.fields.employee_csr_writer",
+              promanager: "USE_ROME"
             })
           )}
         >

client/src/components/job-lifecycle/job-lifecycle.component.jsx

@@ -8,26 +8,13 @@ import { isEmpty } from "lodash";
 import { useTranslation } from "react-i18next";
 
 import "./job-lifecycle.styles.scss";
-import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
-
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 // show text on bar if text can fit
-export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
+export function JobLifecycleComponent({ job, statuses, ...rest }) {
   const [loading, setLoading] = useState(true);
   const [lifecycleData, setLifecycleData] = useState(null);
   const { t } = useTranslation(); // Used for tracking external state changes.
-  const hasLifeCycleAccess = HasFeatureAccess({ bodyshop, featureName: "lifecycle" });
+
   const { data } = useQuery(
     gql`
       query get_job_test($id: uuid!) {
@@ -78,28 +65,14 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
     {
       title: t("job_lifecycle.columns.value"),
       dataIndex: "value",
-      key: "value",
+      key: "value"
-      render: (text, record) => (
-        <BlurWrapperComponent
-          featureName="lifecycle"
-          bypass
-          valueProp="children"
-          overrideValueFunction="RandomSmallString:2"
-        >
-          <span>{text}</span>
-        </BlurWrapperComponent>
-      )
     },
     {
       title: t("job_lifecycle.columns.start"),
       dataIndex: "start",
       key: "start",
-      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix(),
+      render: (text) => DateTimeFormatterFunction(text),
-      render: (text, record) => (
+      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix()
-        <BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
-          <span>{DateTimeFormatterFunction(text)}</span>
-        </BlurWrapperComponent>
-      )
     },
     {
       title: t("job_lifecycle.columns.relative_start"),
@@ -119,12 +92,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
         }
         return dayjs(a.end).unix() - dayjs(b.end).unix();
       },
-
+      render: (text) => (isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text))
-      render: (text, record) => (
-        <BlurWrapperComponent featureName="lifecycle" bypass valueProp="children" overrideValueFunction="RandomDate">
-          <span>{isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)}</span>
-        </BlurWrapperComponent>
-      )
     },
     {
       title: t("job_lifecycle.columns.relative_end"),
@@ -154,74 +122,67 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
               }
               style={{ width: "100%" }}
             >
-              {!hasLifeCycleAccess && (
+              <div
-                <Card type="inner" style={{ marginTop: "10px" }}>
+                id="bar-container"
-                  <UpsellComponent upsell={upsellEnum().lifecycle.general} />
+                style={{
-                </Card>
+                  display: "flex",
-              )}
+                  width: "100%",
-              <BlurWrapperComponent featureName="lifecycle" bypass>
+                  height: "100px",
-                <div
+                  textAlign: "center",
-                  id="bar-container"
+                  borderRadius: "5px",
-                  style={{
+                  borderWidth: "5px",
-                    display: "flex",
+                  borderStyle: "solid",
-                    width: "100%",
+                  borderColor: "#f0f2f5",
-                    height: "100px",
+                  margin: 0,
-                    textAlign: "center",
+                  padding: 0
-                    borderRadius: "5px",
+                }}
-                    borderWidth: "5px",
+              >
-                    borderStyle: "solid",
+                {lifecycleData.durations.summations.map((key, index, array) => {
-                    borderColor: "#f0f2f5",
+                  const isFirst = index === 0;
-                    margin: 0,
+                  const isLast = index === array.length - 1;
-                    padding: 0
+                  return (
-                  }}
+                    <div
-                >
+                      key={key.status}
-                  {lifecycleData.durations.summations.map((key, index, array) => {
+                      style={{
-                    const isFirst = index === 0;
+                        overflow: "hidden",
-                    const isLast = index === array.length - 1;
+                        display: "flex",
-                    return (
+                        flexDirection: "column",
-                      <div
+                        justifyContent: "center",
-                        key={key.status}
+                        alignItems: "center",
-                        style={{
+                        margin: 0,
-                          overflow: "hidden",
+                        padding: 0,
-                          display: "flex",
-                          flexDirection: "column",
-                          justifyContent: "center",
-                          alignItems: "center",
-                          margin: 0,
-                          padding: 0,
 
-                          borderTop: "1px solid #f0f2f5",
+                        borderTop: "1px solid #f0f2f5",
-                          borderBottom: "1px solid #f0f2f5",
+                        borderBottom: "1px solid #f0f2f5",
-                          borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
+                        borderLeft: isFirst ? "1px solid #f0f2f5" : undefined,
-                          borderRight: isLast ? "1px solid #f0f2f5" : undefined,
+                        borderRight: isLast ? "1px solid #f0f2f5" : undefined,
 
-                          backgroundColor: key.color,
+                        backgroundColor: key.color,
-                          width: `${key.percentage}%`
+                        width: `${key.percentage}%`
-                        }}
+                      }}
-                        aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                      aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
-                        title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
+                      title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
-                      >
+                    >
-                        {key.percentage > 15 ? (
+                      {key.percentage > 15 ? (
-                          <>
+                        <>
-                            <div>{key.roundedPercentage}</div>
+                          <div>{key.roundedPercentage}</div>
-                            <div
+                          <div
-                              style={{
+                            style={{
-                                backgroundColor: "#f0f2f5",
+                              backgroundColor: "#f0f2f5",
-                                borderRadius: "5px",
+                              borderRadius: "5px",
-                                paddingRight: "2px",
+                              paddingRight: "2px",
-                                paddingLeft: "2px",
+                              paddingLeft: "2px",
-                                fontSize: "0.8rem"
+                              fontSize: "0.8rem"
-                              }}
+                            }}
-                            >
+                          >
-                              {key.status}
+                            {key.status}
-                            </div>
+                          </div>
-                          </>
+                        </>
-                        ) : null}
+                      ) : null}
-                      </div>
+                    </div>
-                    );
+                  );
-                  })}
+                })}
-                </div>
+              </div>
-              </BlurWrapperComponent>
               <Card type="inner" title={t("job_lifecycle.content.legend_title")} style={{ marginTop: "10px" }}>
                 <div>
                   {lifecycleData.durations.summations.map((key) => (
@@ -236,16 +197,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
                           textAlign: "center"
                         }}
                       >
-                        {key.status} (
+                        {key.status} ({key.roundedPercentage})
-                        <BlurWrapperComponent
-                          featureName="lifecycle"
-                          bypass
-                          overrideValueFunction="RandomAmount"
-                          valueProp="children"
-                        >
-                          <span>{key.roundedPercentage}</span>
-                        </BlurWrapperComponent>
-                        )
                       </div>
                     </Tag>
                   ))}
@@ -315,4 +267,5 @@ export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) {
     </Card>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent);
+
+export default JobLifecycleComponent;

client/src/components/job-payments/job-payments.component.jsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
@@ -25,16 +26,21 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "payment" })),
-  setCardPaymentContext: (context) =>
+  setCardPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: "cardPayment" })),
-    dispatch(
+  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
-      setModalContext({
+  setMessage: (text) => dispatch(setMessage(text))
-        context: context,
-        modal: "cardPayment"
-      })
-    )
 });
 
-export function JobPayments({ job, jobRO, bodyshop, setPaymentContext, setCardPaymentContext, refetch }) {
+export function JobPayments({
+  job,
+  jobRO,
+  bodyshop,
+  setMessage,
+  openChatByPhone,
+  setPaymentContext,
+  setCardPaymentContext,
+  refetch
+}) {
   const {
     treatments: { ImEXPay }
   } = useSplitTreatments({
@@ -127,7 +133,7 @@ export function JobPayments({ job, jobRO, bodyshop, setPaymentContext, setCardPa
     }
   ];
 
-  //Same as in RO guard. If changed, update in both.
+    //Same as in RO guard. If changed, update in both. 
   const total = useMemo(() => {
     return (
       job.payments &&

client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -1,31 +1,19 @@
-import { CheckCircleOutlined } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
+import { CheckCircleOutlined } from "@ant-design/icons";
 import { Button, Card, Form, InputNumber, notification, Popover, Space } from "antd";
+import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   INSERT_SCOREBOARD_ENTRY,
   QUERY_SCOREBOARD_ENTRY,
   UPDATE_SCOREBOARD_ENTRY
 } from "../../graphql/scoreboard.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
-import dayjs from "../../utils/day";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component.jsx";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component.jsx";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
-const mapStateToProps = createStructuredSelector({
+export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps }) {
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-
-export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps }) {
   const { t } = useTranslation();
   const [insertScoreboardEntry] = useMutation(INSERT_SCOREBOARD_ENTRY);
   const [updateScoreboardEntry] = useMutation(UPDATE_SCOREBOARD_ENTRY);
@@ -174,14 +162,12 @@ export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps
     setVisibility(true);
     setLoading(false);
   };
-  const hasScoreboardAccess = HasFeatureAccess({ bodyshop, featureName: "scoreboard" });
+
   return (
     <Popover content={overlay} open={visibility} placement="bottom">
-      <Button loading={loading} disabled={disabled || !hasScoreboardAccess} onClick={handleClick} {...otherBtnProps}>
+      <Button loading={loading} disabled={disabled} onClick={handleClick} {...otherBtnProps}>
-        <LockWrapperComponent featureName="scoreboard">{t("jobs.actions.addtoscoreboard")}</LockWrapperComponent>
+        {t("jobs.actions.addtoscoreboard")}
       </Button>
     </Popover>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardAddButton);

client/src/components/job-totals-table/job-totals.table.labor.component.jsx

@@ -96,7 +96,8 @@ export default function JobTotalsTableLabor({ job }) {
           sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
           render: (text, record) => Dinero(record.total).toFormat()
         }
-      ]
+      ],
+      promanager: "USE_ROME"
     })
   ];
 
@@ -130,7 +131,8 @@ export default function JobTotalsTableLabor({ job }) {
                   <Table.Summary.Cell />
                   <Table.Summary.Cell />
                 </>
-              )
+              ),
+              promanager: "USE_ROME"
             })}
             <Table.Summary.Cell align="right">
               <strong>{Dinero(job.job_totals.rates.rates_subtotal).toFormat()}</strong>
@@ -183,7 +185,8 @@ export default function JobTotalsTableLabor({ job }) {
                     {Dinero(job.job_totals.rates.mapa.total).toFormat()}
                   </Table.Summary.Cell>
                 </>
-              )
+              ),
+              promanager: "USE_ROME"
             })}
           </Table.Summary.Row>
           <Table.Summary.Row>
@@ -233,7 +236,8 @@ export default function JobTotalsTableLabor({ job }) {
                     {Dinero(job.job_totals.rates.mash.total).toFormat()}
                   </Table.Summary.Cell>
                 </>
-              )
+              ),
+              promanager: "USE_ROME"
             })}
           </Table.Summary.Row>
           <Table.Summary.Row>
@@ -249,7 +253,8 @@ export default function JobTotalsTableLabor({ job }) {
                   <Table.Summary.Cell />
                   <Table.Summary.Cell />
                 </>
-              )
+              ),
+              promanager: "USE_ROME"
             })}
             <Table.Summary.Cell align="right">
               <strong>{Dinero(job.job_totals.rates.subtotal).toFormat()}</strong>

client/src/components/job-totals-table/job-totals.table.totals.component.jsx

@@ -7,7 +7,6 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import JobTotalsCashDiscount from "./jobs-totals.cash-discount-display.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -23,14 +22,6 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
 
   const data = useMemo(() => {
     return [
-      ...(job.job_totals?.totals?.ttl_adjustment
-        ? [
-            {
-              key: `Subtotal Adj.`,
-              total: job.job_totals?.totals?.ttl_adjustment
-            }
-          ]
-        : []),
       {
         key: t("jobs.labels.subtotal"),
         total: job.job_totals.totals.subtotal,
@@ -59,6 +50,7 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
             total: job.job_totals.totals.federal_tax
           }
         ],
+        promanager: "USE_ROME",
         rome: job.job_totals.totals.us_sales_tax_breakdown
           ? [
               {
@@ -110,7 +102,7 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
                 total: job.job_totals.totals.us_sales_tax_breakdown.ty4Tax
               },
               {
-                key: `${bodyshop.md_responsibility_centers.taxes.tax_ty5?.tax_type5 || "Adj."} - ${[
+                key: `${bodyshop.md_responsibility_centers.taxes.tax_ty5?.tax_type5 || "TT"} - ${[
                   job.cieca_pft.ty5_rate1,
                   job.cieca_pft.ty5_rate2,
                   job.cieca_pft.ty5_rate3,
@@ -121,14 +113,6 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
                   .join(", ")}%`,
                 total: job.job_totals.totals.us_sales_tax_breakdown.ty5Tax
               },
-              ...(job.job_totals?.totals?.ttl_tax_adjustment
-                ? [
-                    {
-                      key: `Tax Adj.`,
-                      total: job.job_totals?.totals?.ttl_tax_adjustment
-                    }
-                  ]
-                : []),
               {
                 key: t("jobs.labels.total_sales_tax"),
                 bold: true,
@@ -137,7 +121,6 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
                   .add(Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty3Tax))
                   .add(Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty4Tax))
                   .add(Dinero(job.job_totals.totals.us_sales_tax_breakdown.ty5Tax))
-                  .add(Dinero(job.job_totals.totals.ttl_tax_adjustment))
                   .toJSON()
               }
             ].filter((item) => item.total.amount !== 0)
@@ -149,27 +132,11 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
             ]
       }),
 
-      ...(bodyshop.intellipay_config?.enable_cash_discount
+      {
-        ? [
+        key: t("jobs.labels.total_repairs"),
-            {
+        total: job.job_totals.totals.total_repairs,
-              key: t("jobs.labels.total_repairs_cash_discount"),
+        bold: true
-              total: job.job_totals.totals.total_repairs,
+      },
-              bold: true
-            },
-            {
-              key: t("jobs.labels.total_repairs"),
-              render: <JobTotalsCashDiscount amountDinero={job.job_totals.totals.total_repairs} />,
-              bold: true
-            }
-          ]
-        : [
-            {
-              key: t("jobs.labels.total_repairs"),
-              total: job.job_totals.totals.total_repairs,
-              bold: true
-            }
-          ]),
-
       {
         key: t("jobs.fields.ded_amt"),
         total: job.job_totals.totals.custPayable.deductible
@@ -182,6 +149,7 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
           }
         ],
         rome: [],
+        promanager: "USE_ROME"
       }),
       {
         key: t("jobs.fields.other_amount_payable"),
@@ -201,7 +169,13 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
             },
             {
               key: t("jobs.labels.total_cust_payable"),
-              render: <JobTotalsCashDiscount amountDinero={job.job_totals.totals.custPayable.total} />,
+              total: Dinero(job.job_totals.totals.custPayable.total)
+                .add(
+                  Dinero(job.job_totals.totals.custPayable.total).percentage(
+                    bodyshop.intellipay_config?.cash_discount_percentage || 0
+                  )
+                )
+                .toJSON(),
               bold: true
             }
           ]
@@ -237,7 +211,7 @@ export function JobTotalsTableTotals({ bodyshop, job }) {
       dataIndex: "total",
       key: "total",
       align: "right",
-      render: (text, record) => (record.render ? record.render : Dinero(record.total).toFormat()),
+      render: (text, record) => Dinero(record.total).toFormat(),
       width: "20%",
       onCell: (record, rowIndex) => {
         return { style: { fontWeight: record.bold && "bold" } };

client/src/components/job-totals-table/jobs-totals.cash-discount-display.component.jsx

@@ -1,60 +0,0 @@
-import { notification, Spin } from "antd";
-import axios from "axios";
-import Dinero from "dinero.js";
-import React, { useCallback, useEffect, useState } from "react";
-
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = (dispatch) => ({});
-export default connect(mapStateToProps, mapDispatchToProps)(JobTotalsCashDiscount);
-
-export function JobTotalsCashDiscount({ bodyshop, amountDinero }) {
-  const [loading, setLoading] = useState(true);
-  const [fee, setFee] = useState(0);
-
-  const fetchData = useCallback(async () => {
-    if (amountDinero && bodyshop) {
-      setLoading(true);
-      let response;
-      try {
-        response = await axios.post("/intellipay/checkfee", {
-          bodyshop: { id: bodyshop.id, imexshopid: bodyshop.imexshopid, state: bodyshop.state },
-          amount: Dinero(amountDinero).toFormat("0.00")
-        });
-
-        if (response?.data?.error) {
-          notification.open({
-            type: "error",
-            message:
-              response.data?.error ||
-              "Error encountered when contacting IntelliPay service to determine cash discounted price."
-          });
-        } else {
-          setFee(response.data?.fee || 0);
-        }
-      } catch (error) {
-        notification.open({
-          type: "error",
-          message:
-            error.response?.data?.error ||
-            "Error encountered when contacting IntelliPay service to determine cash discounted price."
-        });
-      } finally {
-        setLoading(false);
-      }
-    }
-  }, [amountDinero, bodyshop]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData, bodyshop, amountDinero]);
-
-  if (loading) return <Spin size="small" />;
-  return Dinero(amountDinero)
-    .add(Dinero({ amount: Math.round(fee * 100) }))
-    .toFormat();
-}

client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx

@@ -51,6 +51,7 @@ export default function JobAdminDeleteIntake({ job }) {
   const InstanceRender = InstanceRenderManager({
     imex: true,
     rome: "USE_IMEX",
+    promanager: false
   });
 
   return InstanceRender ? (

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -1,6 +1,6 @@
 import { gql, useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Col, Row, notification } from "antd"; //import { Button, Col, Row, notification } from "antd";
+import { Col, Row, notification } from "antd";
 import Axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
@@ -110,17 +110,18 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
     InstanceRenderManager({
       executeFunction: true,
       rome: ResolveCCCLineIssues,
-      args: [estData.est_data, bodyshop]
+      args: [estData.est_data, bodyshop],
+      promanager: ResolveCCCLineIssues
     });
 
     //   } else {
     //IO-539 Check for Parts Rate on PAL for SGI use case.
-
+    //TODO:AIO Check that the async function is actually waiting before moving on.
     await InstanceRenderManager({
       executeFunction: true,
       imex: CheckTaxRates,
       rome: CheckTaxRatesUSA,
-
+      promanager: CheckTaxRatesUSA,
       args: [estData.est_data, bodyshop]
     });
 
@@ -235,7 +236,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
       await InstanceRenderManager({
         executeFunction: true,
         rome: ResolveCCCLineIssues,
-
+        promanager: ResolveCCCLineIssues,
         args: [supp, bodyshop]
       });
 
@@ -243,7 +244,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
         executeFunction: true,
         imex: CheckTaxRates,
         rome: CheckTaxRatesUSA,
-
+        promanager: CheckTaxRatesUSA,
         args: [supp, bodyshop]
       });
 
@@ -407,25 +408,26 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
         updateSchComp={updateSchComp}
         setSchComp={setSchComp}
       />
-      {/* {
+      {
-        currentUser.email.includes("@rome.") || currentUser.email.includes("@imex.") ? (
+        // currentUser.email.includes("@rome.") ||
-        <Button
+        // currentUser.email.includes("@imex.") ? (
-          onClick={async () => {
+        //     <Button
-            for (const record of data.available_jobs) {
+        //         onClick={async () => {
-              //Query the data
+        //             for (const record of data.available_jobs) {
-              console.log("Start Job", record.id);
+        //                 //Query the data
-              const { data } = await loadEstData({
+        //                 console.log("Start Job", record.id);
-                variables: { id: record.id }
+        //                 const {data} = await loadEstData({
-              });
+        //                     variables: {id: record.id},
-              console.log("Query has been awaited and is complete");
+        //                 });
-              await onOwnerFindModalOk(data);
+        //                 console.log("Query has been awaited and is complete");
-            }
+        //                 await onOwnerFindModalOk(data);
-          }}
+        //             }
-        >
+        //         }}
-          Add all jobs as new.
+        //     >
-        </Button>
+        //         Add all jobs as new.
-      ) : null
+        //     </Button>
-      } */}
+        // ) : null
+      }
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <JobsAvailableTableComponent
@@ -567,6 +569,7 @@ async function CheckTaxRates(estData, bodyshop) {
 }
 function ResolveCCCLineIssues(estData, bodyshop) {
   //Find all misc amounts, populate them to the act price.
+  //TODO Ensure that this doesnt get violated
   //This needs to be done before cleansing unq_seq since some misc prices could move over.
   estData.joblines.data.forEach((line) => {
     if (line.misc_amt && line.misc_amt !== 0) {
@@ -582,13 +585,47 @@ function ResolveCCCLineIssues(estData, bodyshop) {
           //  line.notes += ` | ET/UT Update (prev = ${line.mod_lbr_ty})`;
           line.mod_lbr_ty = "LAR";
         }
-      }
+      },
+      promanager: "USE_ROME"
     });
   });
 
+  //Group by line no
+  // For everything but the first one, strip out the price number in
+
+  InstanceRenderManager({
+    executeFunction: true,
+    args: [],
+    promanager: () => {
+      const groupedByLineRef = _.groupBy(estData.joblines.data, "line_ref");
+      Object.keys(groupedByLineRef).forEach((lineRef) => {
+        let index0ActPrice;
+        groupedByLineRef[lineRef].forEach((line, index) => {
+          //Let the first one keep it
+          if (index === 0) {
+            index0ActPrice = line.act_price;
+            return;
+          }
+          //Web Est seems to have additional costs with UNQ_SEQ 0. Keep them all?
+          if (line.unq_seq === 0) return;
+          if (index0ActPrice !== line.act_price) {
+            // line.notes += ` | Price override.`;
+            return;
+          }
+          const indexInEstData = estData.joblines.data.findIndex((l) => l.unq_seq === line.unq_seq);
+          //estData.joblines.data[indexInEstData].notes +=
+          // ` | Act Price delete. (prev act price = ${estData.joblines.data[indexInEstData].act_price})`;
+          estData.joblines.data[indexInEstData].act_price = 0;
+          estData.joblines.data[indexInEstData].db_price = 0;
+        });
+      });
+    }
+  });
+
   InstanceRenderManager({
     executeFunction: true,
     args: [],
+    promanager: null, //Require to prevent auto firing of Rome.
     rome: () => {
       //Generate the list of duplicated UNQ_SEQ that will feed into the next section to scrub the lines.
       const unqSeqHash = _.groupBy(estData.joblines.data, "unq_seq");

client/src/components/jobs-close-auto-allocate/jobs-close-auto-allocate.component.jsx

@@ -33,6 +33,7 @@ export function JobsCloseAutoAllocate({ bodyshop, joblines, form, disabled }) {
           InstanceRenderManager({
             imex: !jl.part_type && !jl.mod_lbr_ty,
             rome: !ret.profitcenter_part,
+            promanager: "USE_ROME"
           })
         ) {
           const lineDesc = jl.line_desc ? jl.line_desc.toLowerCase() : "";

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -151,7 +151,8 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
             label={t(
               InstanceRenderManager({
                 imex: "jobs.fields.employee_csr",
-                rome: "jobs.fields.employee_csr_writer"
+                rome: "jobs.fields.employee_csr_writer",
+                promanager: "USE_ROME"
               })
             )}
             rules={[

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -4,7 +4,7 @@ import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Dropdown, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
-import React, { useContext, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
@@ -23,14 +23,13 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import dayjs from "../../utils/day";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
-import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -127,7 +126,6 @@ export function JobsDetailHeaderActions({
   const [updateJob] = useMutation(UPDATE_JOB);
   const [voidJob] = useMutation(VOID_JOB);
   const [cancelAllAppointments] = useMutation(CANCEL_APPOINTMENTS_BY_JOB_ID);
-  const { socket } = useContext(SocketContext);
 
   const {
     treatments: { ImEXPay }
@@ -198,7 +196,6 @@ export function JobsDetailHeaderActions({
         message: t("appointments.successes.created")
       });
     } catch (error) {
-      notification.open({ type: "error", message: t("appointments.errors.saving", { error: error.message }) });
     } finally {
       setLoading(false);
       setVisibility(false);
@@ -209,7 +206,7 @@ export function JobsDetailHeaderActions({
     //delete the job.
     const result = await deleteJob({ variables: { id: job.id } });
 
-    if (!result.errors) {
+    if (!!!result.errors) {
       notification["success"]({
         message: t("jobs.successes.delete")
       });
@@ -267,7 +264,7 @@ export function JobsDetailHeaderActions({
           awaitRefetchQueries: true
         });
 
-        if (!result.errors) {
+        if (!!!result.errors) {
           notification["success"]({ message: t("csi.successes.created") });
         } else {
           notification["error"]({
@@ -302,8 +299,7 @@ export function JobsDetailHeaderActions({
           if (p && p.isValid()) {
             openChatByPhone({
               phone_num: p.formatInternational(),
-              jobid: job.id,
+              jobid: job.id
-              socket
             });
             setMessage(
               `${window.location.protocol}//${window.location.host}/csi/${result.data.insert_csi.returning[0].id}`
@@ -346,8 +342,7 @@ export function JobsDetailHeaderActions({
         if (p && p.isValid()) {
           openChatByPhone({
             phone_num: p.formatInternational(),
-            jobid: job.id,
+            jobid: job.id
-            socket
           });
           setMessage(`${window.location.protocol}//${window.location.host}/csi/${job.csiinvites[0].id}`);
         } else {
@@ -390,7 +385,7 @@ export function JobsDetailHeaderActions({
       }
     });
 
-    if (!result.errors) {
+    if (!!!result.errors) {
       notification["success"]({
         message: t("jobs.successes.voided")
       });
@@ -410,7 +405,7 @@ export function JobsDetailHeaderActions({
     }
   };
 
-  const handleExportCustData = async () => {
+  const handleExportCustData = async (e) => {
     logImEXEvent("job_export_cust_data");
     let PartnerResponse;
     if (bodyshop.accountingconfig && bodyshop.accountingconfig.qbo) {
@@ -487,7 +482,7 @@ export function JobsDetailHeaderActions({
     }
   };
 
-  const handleAlertToggle = () => {
+  const handleAlertToggle = (e) => {
     logImEXEvent("production_toggle_alert");
     //e.stopPropagation();
     updateJob({
@@ -510,7 +505,7 @@ export function JobsDetailHeaderActions({
     });
   };
 
-  const handleSuspend = () => {
+  const handleSuspend = (e) => {
     logImEXEvent("production_toggle_alert");
     //e.stopPropagation();
     updateJob({
@@ -523,7 +518,7 @@ export function JobsDetailHeaderActions({
     });
     insertAuditTrail({
       jobid: job.id,
-      operation: AuditTrailMapping.jobsuspend(job.suspended ? !job.suspended : true),
+      operation: AuditTrailMapping.jobsuspend(!!job.suspended ? !job.suspended : true),
       type: "jobsuspend"
     });
   };
@@ -604,7 +599,7 @@ export function JobsDetailHeaderActions({
                 required: true
                 //message: t("general.validation.required"),
               },
-              () => ({
+              ({ getFieldValue }) => ({
                 async validator(rule, value) {
                   if (value) {
                     const { start } = form.getFieldsValue();
@@ -673,74 +668,73 @@ export function JobsDetailHeaderActions({
       disabled: job.status !== bodyshop.md_ro_statuses.default_scheduled,
       label: t("menus.jobsactions.cancelallappointments")
     },
-    {
+    ...InstanceRenderManager({
-      key: "intake",
+      imex: [
-      id: "job-actions-intake",
+        {
-      disabled: !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO,
+          key: "intake",
-      label:
+          id: "job-actions-intake",
-        !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO ? (
+          disabled: !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO,
-          <LockerWrapperComponent featureName="checklist">{t("jobs.actions.intake")}</LockerWrapperComponent>
+          label:
-        ) : (
+            !!job.intakechecklist || !jobInPreProduction || !job.converted || jobRO ? (
-          <Link to={`/manage/jobs/${job.id}/intake`}>
+              t("jobs.actions.intake")
-            <LockerWrapperComponent featureName="checklist">{t("jobs.actions.intake")}</LockerWrapperComponent>
+            ) : (
-          </Link>
+              <Link to={`/manage/jobs/${job.id}/intake`}>{t("jobs.actions.intake")}</Link>
-        )
+            )
-    },
+        },
-    {
+        {
-      key: "deliver",
+          key: "deliver",
-      id: "job-actions-deliver",
+          id: "job-actions-deliver",
-      disabled: !jobInProduction || jobRO,
+          disabled: !jobInProduction || jobRO,
-      label: !jobInProduction ? (
+          label: !jobInProduction ? (
-        <LockerWrapperComponent disabled featureName="checklist">
+            t("jobs.actions.deliver")
-          {t("jobs.actions.deliver")}
+          ) : (
-        </LockerWrapperComponent>
+            <Link to={`/manage/jobs/${job.id}/deliver`}>{t("jobs.actions.deliver")}</Link>
-      ) : (
+          )
-        <Link to={`/manage/jobs/${job.id}/deliver`}>
+        },
-          <LockerWrapperComponent disabled featureName="checklist">
+        {
-            {t("jobs.actions.deliver")}
+          key: "checklist",
-          </LockerWrapperComponent>
+          id: "job-actions-checklist",
-        </Link>
+          disabled: !job.converted,
-      )
+          label: <Link to={`/manage/jobs/${job.id}/checklist`}>{t("jobs.actions.viewchecklist")}</Link>
-    },
+        }
-    {
+      ],
-      key: "checklist",
+      rome: "USE_IMEX",
-      id: "job-actions-checklist",
+      promanager: [
-      disabled: !job.converted,
+        {
-      label: (
+          key: "toggleproduction",
-        <Link to={`/manage/jobs/${job.id}/checklist`}>
+          id: "job-actions-toggleproduction",
-          <LockerWrapperComponent featureName="checklist">{t("jobs.actions.viewchecklist")}</LockerWrapperComponent>
+          disabled: !job.converted || jobRO,
-        </Link>
+          label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
-      )
+        }
-    },
+      ]
-    {
+    }),
-      key: "toggleproduction",
+    ...(InstanceRenderManager({
-      id: "job-actions-toggleproduction",
+      imex: true,
-      disabled: !job.converted || jobRO,
+      rome: "USE_IMEX",
-      label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
+      promanager: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-    },
+    })
+      ? [
+          {
+            key: "entertimetickets",
+            id: "job-actions-entertimetickets",
+            disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
+            label: t("timetickets.actions.enter"),
+            onClick: () => {
+              logImEXEvent("job_header_enter_time_ticekts");
 
-    {
+              setTimeTicketContext({
-      key: "entertimetickets",
+                actions: {},
-      id: "job-actions-entertimetickets",
+                context: {
-      disabled: !job.converted || (!bodyshop.tt_allow_post_to_invoiced && job.date_invoiced),
+                  jobId: job.id,
-      label: (
+                  created_by: currentUser.displayName
-        <LockerWrapperComponent featureName="timetickets">{t("timetickets.actions.enter")}</LockerWrapperComponent>
+                    ? currentUser.email.concat(" | ", currentUser.displayName)
-      ),
+                    : currentUser.email
-      onClick: () => {
+                }
-        logImEXEvent("job_header_enter_time_ticekts");
+              });
-
-        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
-          setTimeTicketContext({
-            actions: {},
-            context: {
-              jobId: job.id,
-              created_by: currentUser.displayName
-                ? currentUser.email.concat(" | ", currentUser.displayName)
-                : currentUser.email
             }
-          });
+          }
-      }
+        ]
-    }
+      : [])
   ];
 
   if (bodyshop.md_tasks_presets.enable_tasks) {
@@ -762,15 +756,14 @@ export function JobsDetailHeaderActions({
     key: "enterpayments",
     id: "job-actions-enterpayments",
     disabled: !job.converted,
-    label: <LockerWrapperComponent featureName="payments">{t("menus.header.enterpayment")}</LockerWrapperComponent>,
+    label: t("menus.header.enterpayment"),
     onClick: () => {
       logImEXEvent("job_header_enter_payment");
 
-      HasFeatureAccess({ featureName: "payments", bodyshop }) &&
+      setPaymentContext({
-        setPaymentContext({
+        actions: {},
-          actions: {},
+        context: { jobid: job.id }
-          context: { jobid: job.id }
+      });
-        });
     }
   });
 
@@ -791,18 +784,18 @@ export function JobsDetailHeaderActions({
     });
   }
 
-  menuItems.push({
+  if (HasFeatureAccess({ featureName: "courtesycars", bodyshop })) {
-    key: "cccontract",
+    menuItems.push({
-    id: "job-actions-cccontract",
+      key: "cccontract",
-    disabled: jobRO || !job.converted,
+      id: "job-actions-cccontract",
-    label: (
+      disabled: jobRO || !job.converted,
-      <Link state={{ jobId: job.id }} to="/manage/courtesycars/contracts/new">
+      label: (
-        <LockerWrapperComponent featureName="courtesycars">
+        <Link state={{ jobId: job.id }} to="/manage/courtesycars/contracts/new">
           {t("menus.jobsactions.newcccontract")}
-        </LockerWrapperComponent>
+        </Link>
-      </Link>
+      )
-    )
+    });
-  });
+  }
 
   menuItems.push({
     key: "createtask",
@@ -887,23 +880,30 @@ export function JobsDetailHeaderActions({
         }
       ]
     },
+    ...(InstanceRenderManager({
+      imex: true,
+      rome: true,
+      promanager: HasFeatureAccess({ featureName: "bills", bodyshop })
+    })
+      ? [
+          {
+            key: "postbills",
+            id: "job-actions-postbills",
+            disabled: !job.converted,
+            label: t("jobs.actions.postbills"),
+            onClick: () => {
+              logImEXEvent("job_header_enter_bills");
 
-    {
+              setBillEnterContext({
-      key: "postbills",
+                actions: { refetch: refetch },
-      id: "job-actions-postbills",
+                context: {
-      disabled: !job.converted,
+                  job: job
-      label: <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>,
+                }
-      onClick: () => {
+              });
-        logImEXEvent("job_header_enter_bills");
-        HasFeatureAccess({ featureName: "bills", bodyshop }) &&
-          setBillEnterContext({
-            actions: { refetch: refetch },
-            context: {
-              job: job
             }
-          });
+          }
-      }
+        ]
-    },
+      : []),
 
     {
       key: "addtopartsqueue",
@@ -918,7 +918,7 @@ export function JobsDetailHeaderActions({
           }
         });
 
-        if (!result.errors) {
+        if (!!!result.errors) {
           notification["success"]({
             message: t("jobs.successes.partsqueue")
           });
@@ -962,70 +962,80 @@ export function JobsDetailHeaderActions({
     }
   );
 
-  menuItems.push({
+  if (
-    key: "exportcustdata",
+    InstanceRenderManager({
-    id: "job-actions-exportcustdata",
+      imex: true,
-    disabled: !(job.converted && HasFeatureAccess({ bodyshop, featureName: "export" })),
+      rome: true,
-    label: <LockerWrapperComponent featureName="export">{t("jobs.actions.exportcustdata")}</LockerWrapperComponent>,
+      promanager: HasFeatureAccess({ featureName: "export", bodyshop })
-    onClick: handleExportCustData
+    })
-  });
+  ) {
-
+    menuItems.push({
-  const children = [
+      key: "exportcustdata",
-    {
+      id: "job-actions-exportcustdata",
-      key: "email",
+      disabled: !job.converted,
-      id: "job-actions-email",
+      label: t("jobs.actions.exportcustdata"),
-      disabled: !(job.ownr_ea && HasFeatureAccess({ bodyshop, featureName: "csi" })),
+      onClick: handleExportCustData
-      label: <LockerWrapperComponent featureName="checklist">{t("general.labels.email")}</LockerWrapperComponent>,
+    });
-      onClick: handleCreateCsi
+  }
-    },
+
-    {
+  if (HasFeatureAccess({ featureName: "csi", bodyshop })) {
-      key: "text",
+    const children = [
-      id: "job-actions-text",
+      {
-      disabled: !(job.ownr_ph1 && HasFeatureAccess({ bodyshop, featureName: "csi" })),
+        key: "email",
-      label: <LockerWrapperComponent featureName="checklist">{t("general.labels.text")}</LockerWrapperComponent>,
+        id: "job-actions-email",
-      onClick: handleCreateCsi
+        disabled: !!!job.ownr_ea,
-    },
+        label: t("general.labels.email"),
-    {
+        onClick: handleCreateCsi
-      key: "generate",
+      },
-      id: "job-actions-generate",
+      {
-      disabled: job.csiinvites?.length > 0 || !HasFeatureAccess({ bodyshop, featureName: "csi" }),
+        key: "text",
-      label: <LockerWrapperComponent featureName="checklist">{t("jobs.actions.generatecsi")}</LockerWrapperComponent>,
+        id: "job-actions-text",
-      onClick: handleCreateCsi
+        disabled: !!!job.ownr_ph1,
-    }
+        label: t("general.labels.text"),
-  ];
+        onClick: handleCreateCsi
-
+      },
-  if (job?.csiinvites?.length) {
+      {
-    children.push(
+        key: "generate",
-      {
+        id: "job-actions-generate",
-        type: "divider"
+        disabled: job.csiinvites && job.csiinvites.length > 0,
-      },
+        label: t("jobs.actions.generatecsi"),
-      ...job.csiinvites.map((item, idx) => {
+        onClick: handleCreateCsi
-        return item.completedon
+      }
-          ? {
+    ];
-              key: idx,
+
-              label: (
+    if (job?.csiinvites?.length) {
-                <Link to={`/manage/shop/csi?responseid=${item.id}`}>
+      children.push(
-                  <DateTimeFormatter>{item.completedon}</DateTimeFormatter>
+        {
-                </Link>
+          type: "divider"
-              )
+        },
-            }
+        ...job.csiinvites.map((item, idx) => {
-          : {
+          return item.completedon
-              key: idx,
+            ? {
-              onClick: () => {
+                key: idx,
-                navigator.clipboard.writeText(`${window.location.protocol}//${window.location.host}/csi/${item.id}`);
+                label: (
-              },
+                  <Link to={`/manage/shop/csi?responseid=${item.id}`}>
-              label: t("general.actions.copylink")
+                    <DateTimeFormatter>{item.completedon}</DateTimeFormatter>
-            };
+                  </Link>
-      })
+                )
-    );
+              }
+            : {
+                key: idx,
+                onClick: () => {
+                  navigator.clipboard.writeText(`${window.location.protocol}//${window.location.host}/csi/${item.id}`);
+                },
+                label: t("general.actions.copylink")
+              };
+        })
+      );
+    }
+    menuItems.push({
+      key: "sendcsi",
+      id: "job-actions-sendcsi",
+      label: t("jobs.actions.sendcsi"),
+      disabled: !job.converted,
+      children
+    });
   }
-  menuItems.push({
-    key: "sendcsi",
-    id: "job-actions-sendcsi",
-    label: <LockerWrapperComponent featureName="checklist">{t("jobs.actions.sendcsi")}</LockerWrapperComponent>,
-    disabled: !job.converted,
-    children
-  });
 
   menuItems.push({
     key: "jobcosting",
@@ -1065,7 +1075,7 @@ export function JobsDetailHeaderActions({
   menuItems.push({
     key: "manualevent",
     id: "job-actions-manualevent",
-    onClick: () => {
+    onClick: (e) => {
       setVisibility(true);
     },
     label: t("appointments.labels.manualevent")

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx

@@ -148,6 +148,14 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
           <Button type="primary" onClick={() => form.submit()} loading={loading}>
             {t("general.actions.save")}
           </Button>
+          <Button
+            disabled={scenario === "post"}
+            onClick={() => {
+              //  setOpen(false);
+            }}
+          >
+            {t("general.actions.close")}
+          </Button>
         </Space>
       </Form>
     </div>
@@ -160,8 +168,8 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
       getPopupContainer={(trigger) => trigger.parentNode}
       trigger="click"
     >
-      {scenario === "pre" && t("jobs.actions.intake_quick")}
+      {scenario === "pre" && t("jobs.actions.intake")}
-      {scenario === "prod" && t("jobs.actions.deliver_quick")}
+      {scenario === "prod" && t("jobs.actions.deliver")}
     </Popover>
   );
 }

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -4,9 +4,10 @@ import AlertComponent from "../alert/alert.component";
 import BillDetailEditcontainer from "../bill-detail-edit/bill-detail-edit.container";
 import BillsListTable from "../bills-list-table/bills-list-table.component";
 import JobBillsTotal from "../job-bills-total/job-bills-total.component";
-import PartsDispatchTable from "../parts-dispatch-table/parts-dispatch-table.component";
 import PartsOrderListTableComponent from "../parts-order-list-table/parts-order-list-table.component";
 import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
+import PartsDispatchTable from "../parts-dispatch-table/parts-dispatch-table.component";
+import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
 
 export default function JobsDetailPliComponent({
   job,
@@ -21,14 +22,16 @@ export default function JobsDetailPliComponent({
       {billsQuery.error ? <AlertComponent message={billsQuery.error.message} type="error" /> : null}
       <BillDetailEditcontainer />
       <Row gutter={[16, 16]}>
-        <Col span={24}>
+        <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-          <JobBillsTotal
+          <Col span={24}>
-            bills={billsQuery.data ? billsQuery.data.bills : []}
+            <JobBillsTotal
-            partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
+              bills={billsQuery.data ? billsQuery.data.bills : []}
-            loading={billsQuery.loading}
+              partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
-            jobTotals={job.job_totals}
+              loading={billsQuery.loading}
-          />
+              jobTotals={job.job_totals}
-        </Col>
+            />
+          </Col>
+        </FeatureWrapperComponent>
         <Col span={24}>
           <PartsOrderListTableComponent
             job={job}
@@ -36,9 +39,11 @@ export default function JobsDetailPliComponent({
             billsQuery={billsQuery}
           />
         </Col>
-        <Col span={24}>
+        <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-          <BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
+          <Col span={24}>
-        </Col>
+            <BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
+          </Col>
+        </FeatureWrapperComponent>
         <Col span={24}>
           <PartsDispatchTable job={job} handleOnRowClick={handlePartsDispatchOnRowClick} billsQuery={billsQuery} />
         </Col>

client/src/components/jobs-detail-rates/jobs-detail-rates.component.jsx

@@ -194,7 +194,8 @@ export function JobsDetailRates({ jobRO, form, job, bodyshop }) {
             <JobsDetailRatesOther form={form} />
             <JobsDetailRatesTaxes form={form} />
           </>
-        )
+        ),
+        promanager: "USE_ROME"
       })}
     </div>
   );

client/src/components/jobs-detail-rates/jobs-detail-rates.parts.component.jsx

@@ -989,7 +989,7 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
           <Form.Item label={t("jobs.fields.tax_str_rt")} name="tax_str_rt">
             <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
-          {InstanceRenderManager({ imex: true, rome: false }) ? (
+          {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
             <>
               <Form.Item label={t("jobs.fields.tax_paint_mat_rt")} name="tax_paint_mat_rt">
                 <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
@@ -1002,7 +1002,7 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
           <Form.Item label={t("jobs.fields.tax_sub_rt")} name="tax_sub_rt">
             <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
-          {InstanceRenderManager({ imex: true, rome: false }) ? (
+          {InstanceRenderManager({ imex: true, rome: false, promanager: "USE_ROME" }) ? (
             <Form.Item label={t("jobs.fields.tax_lbr_rt")} name="tax_lbr_rt">
               <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
             </Form.Item>

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -13,19 +13,8 @@ import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.sel
 
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
-const mapDispatchToProps = (dispatch) => ({});
 
 function JobsDocumentsComponent({
-  bodyshop,
   data,
   jobId,
   refetch,
@@ -114,8 +103,7 @@ function JobsDocumentsComponent({
     );
     setgalleryImages(documents);
   }, [data, setgalleryImages, t]);
-  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+
-  const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
   return (
     <div>
       <Row gutter={[16, 16]}>
@@ -130,14 +118,6 @@ function JobsDocumentsComponent({
             {!billId && <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={refetch} />}
           </Space>
         </Col>
-        {!hasMediaAccess && (
-          <Col span={24}>
-            <Card>
-              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
-            </Card>
-          </Col>
-        )}
-
         <Col span={24}>
           <Card>
             <DocumentsUploadComponent
@@ -149,13 +129,7 @@ function JobsDocumentsComponent({
             />
           </Card>
         </Col>
-        {hasMediaAccess && !hasMobileAccess && (
+
-          <Col span={24}>
-            <Card>
-              <UpsellComponent upsell={upsellEnum().media.mobile} />
-            </Card>
-          </Col>
-        )}
         <Col span={24}>
           <Card title={t("jobs.labels.documents-images")}>
             <Gallery
@@ -245,4 +219,4 @@ function JobsDocumentsComponent({
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsComponent);
+export default JobsDocumentsComponent;

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -1,5 +1,5 @@
 import { FileExcelFilled, SyncOutlined } from "@ant-design/icons";
-import { Alert, Button, Card, Col, Row, Space } from "antd";
+import { Alert, Button, Card, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
@@ -17,8 +17,6 @@ import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-
 
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -86,120 +84,98 @@ export function JobsDocumentsLocalGallery({
           { images: [], other: [] }
         )
       : { images: [], other: [] };
-  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+
   return (
     <div>
-      <Row gutter={[16, 16]}>
+      <Space wrap>
-        <Col span={24}>
+        <Button
-          <Space wrap>
+          onClick={() => {
-            <Button
+            if (job) {
-              onClick={() => {
+              if (invoice_number) {
-                if (job) {
+                getBillMedia({ jobid: job.id, invoice_number });
-                  if (invoice_number) {
+              } else {
-                    getBillMedia({ jobid: job.id, invoice_number });
+                getJobMedia(job.id);
-                  } else {
+              }
-                    getJobMedia(job.id);
+            }
-                  }
+          }}
-                }
+        >
-              }}
+          <SyncOutlined />
-            >
+        </Button>
-              <SyncOutlined />
+        <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
-            </Button>
+          <Button>{t("documents.labels.openinexplorer")}</Button>
-            <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
+        </a>
-              <Button>{t("documents.labels.openinexplorer")}</Button>
+        <JobsDocumentsLocalGalleryReassign jobid={job.id} />
-            </a>
+        <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
-            <JobsDocumentsLocalGalleryReassign jobid={job.id} />
+        <JobsLocalGalleryDownloadButton job={job} />
-            <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
+        <JobsDocumentsLocalDeleteButton jobid={job.id} />
-            <JobsLocalGalleryDownloadButton job={job} />
+      </Space>
-            <JobsDocumentsLocalDeleteButton jobid={job.id} />
+      <Card>
-          </Space>
+        <DocumentsLocalUploadComponent job={job} invoice_number={invoice_number} vendorid={vendorid} allowAllTypes />
-        </Col>
+      </Card>
-        {!hasMediaAccess && (
+      <Card title={t("jobs.labels.documents-images")}>
-          <Col span={24}>
+        <Gallery
-            <Card>
+          images={jobMedia.images}
-              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
+          onSelect={(index, image) => {
-            </Card>
+            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-          </Col>
+          }}
-        )}
+          {...(optimized && {
-        <Col span={24}>
+            customControls: [
-          <Card>
+              <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
-            <DocumentsLocalUploadComponent
+            ]
-              job={job}
+          })}
-              invoice_number={invoice_number}
+          onClick={(index) => {
-              vendorid={vendorid}
+            setModalState({ open: true, index: index });
-              allowAllTypes
+            // const media = allMedia[job.id].find(
-            />
+            //   (m) => m.optimized === item.src
-          </Card>
+            // );
-        </Col>
-        <Col span={24}>
-          <Card title={t("jobs.labels.documents-images")}>
-            <Gallery
-              images={jobMedia.images}
-              onSelect={(index, image) => {
-                toggleMediaSelected({ jobid: job.id, filename: image.filename });
-              }}
-              {...(optimized && {
-                customControls: [
-                  <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
-                ]
-              })}
-              onClick={(index) => {
-                setModalState({ open: true, index: index });
-                // const media = allMedia[job.id].find(
-                //   (m) => m.optimized === item.src
-                // );
 
-                // window.open(
+            // window.open(
-                //   media ? media.fullsize : item.fullsize,
+            //   media ? media.fullsize : item.fullsize,
-                //   "_blank",
+            //   "_blank",
-                //   "toolbar=0,location=0,menubar=0"
+            //   "toolbar=0,location=0,menubar=0"
-                // );
+            // );
-              }}
+          }}
-            />
+        />
-          </Card>
+      </Card>
-        </Col>
+      <Card title={t("jobs.labels.documents-other")}>
-        <Col span={24}>
+        <Gallery
-          <Card title={t("jobs.labels.documents-other")}>
+          images={jobMedia.other}
-            <Gallery
+          thumbnailStyle={() => {
-              images={jobMedia.other}
+            return {
-              thumbnailStyle={() => {
+              backgroundImage: <FileExcelFilled />,
-                return {
+              height: "100%",
-                  backgroundImage: <FileExcelFilled />,
+              width: "100%",
-                  height: "100%",
+              cursor: "pointer"
-                  width: "100%",
+            };
-                  cursor: "pointer"
+          }}
-                };
+          onClick={(index) => {
-              }}
+            window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
-              onClick={(index) => {
+          }}
-                window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
+          onSelect={(index, image) => {
-              }}
+            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-              onSelect={(index, image) => {
+          }}
-                toggleMediaSelected({ jobid: job.id, filename: image.filename });
+        />
-              }}
+      </Card>
-            />
+      {modalState.open && (
-          </Card>
+        <Lightbox
-        </Col>
+          mainSrc={jobMedia.images[modalState.index].fullsize}
-        {modalState.open && (
+          nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
-          <Lightbox
+          prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
-            mainSrc={jobMedia.images[modalState.index].fullsize}
+          onCloseRequest={() => setModalState({ open: false, index: 0 })}
-            nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
+          onMovePrevRequest={() =>
-            prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
+            setModalState({
-            onCloseRequest={() => setModalState({ open: false, index: 0 })}
+              ...modalState,
-            onMovePrevRequest={() =>
+              index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
-              setModalState({
+            })
-                ...modalState,
+          }
-                index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
+          onMoveNextRequest={() =>
-              })
+            setModalState({
-            }
+              ...modalState,
-            onMoveNextRequest={() =>
+              index: (modalState.index + 1) % jobMedia.images.length
-              setModalState({
+            })
-                ...modalState,
+          }
-                index: (modalState.index + 1) % jobMedia.images.length
+        />
-              })
+      )}
-            }
-          />
-        )}
-      </Row>
     </div>
   );
 }

client/src/components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -12,8 +12,7 @@ import { alphaSort } from "../../utils/sorters";
 import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
 import "./labor-allocations-table.styles.scss";
 import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   technician: selectTechnician
@@ -191,7 +190,6 @@ export function LaborAllocationsTable({
     warningCallback({ key: "labor", warning: t("jobs.labels.outstandinghours") });
   }
 
-  const hasTimeTicketAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
   return (
     <Row gutter={[16, 16]}>
       <Col span={24}>
@@ -201,16 +199,7 @@ export function LaborAllocationsTable({
             rowKey={(record) => `${record.cost_center} ${record.mod_lbr_ty}`}
             pagination={false}
             onChange={handleTableChange}
-            dataSource={hasTimeTicketAccess ? totals : []}
+            dataSource={totals}
-            locale={{
-              ...(!hasTimeTicketAccess && {
-                emptyText: (
-                  <Card>
-                    <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
-                  </Card>
-                )
-              })
-            }}
             scroll={{
               x: true
             }}
@@ -244,16 +233,7 @@ export function LaborAllocationsTable({
               columns={convertedTableCols}
               rowKey="id"
               pagination={false}
-              dataSource={hasTimeTicketAccess ? convertedLines : []}
+              dataSource={convertedLines}
-              locale={{
-                ...(!hasTimeTicketAccess && {
-                  emptyText: (
-                    <Card>
-                      <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
-                    </Card>
-                  )
-                })
-              }}
               scroll={{
                 x: true
               }}

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -10,9 +10,6 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import "./labor-allocations-table.styles.scss";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -199,7 +196,7 @@ export function PayrollLaborAllocationsTable({
   if (summary.difference !== 0 && typeof warningCallback === "function") {
     warningCallback({ key: "labor", warning: t("jobs.labels.outstandinghours") });
   }
-  const hasTimeTicketAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
+
   return (
     <Row gutter={[16, 16]}>
       <Col span={24}>
@@ -208,7 +205,6 @@ export function PayrollLaborAllocationsTable({
           extra={
             <Space>
               <Button
-                disabled={!hasTimeTicketAccess}
                 onClick={async () => {
                   const response = await axios.post("/payroll/payall", {
                     jobid: jobId
@@ -240,7 +236,7 @@ export function PayrollLaborAllocationsTable({
                   }
                 }}
               >
-                <LockWrapperComponent featureName="timetickets">{t("timetickets.actions.payall")}</LockWrapperComponent>
+                {t("timetickets.actions.payall")}
               </Button>
               <Button
                 onClick={async () => {
@@ -261,19 +257,10 @@ export function PayrollLaborAllocationsTable({
             rowKey={(record) => `${record.employeeid} ${record.mod_lbr_ty}`}
             pagination={false}
             onChange={handleTableChange}
-            dataSource={hasTimeTicketAccess ? totals : []}
+            dataSource={totals}
             scroll={{
               x: true
             }}
-            locale={{
-              ...(!hasTimeTicketAccess && {
-                emptyText: (
-                  <Card>
-                    <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
-                  </Card>
-                )
-              })
-            }}
             summary={() => (
               <Table.Summary.Row>
                 <Table.Summary.Cell>

client/src/components/loading-spinner/loading-spinner.component.jsx

@@ -12,6 +12,7 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
           position: "relative",
           alignContent: "center"
         }}
+        // TODO: Client Update - if anything funky happens check this out
         {...(props.children ? { tip: message ? message : null } : {})}
         delay={200}
         // TODO: Client Update - tip only works when there are actually children, and this component is used in a lot of places where there are no children

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

@@ -1,48 +0,0 @@
-import { LockOutlined } from "@ant-design/icons";
-import { Space } from "antd";
-import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
-import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-
-const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  recentItems: selectRecentItems,
-  selectedHeader: selectSelectedHeader,
-  bodyshop: selectBodyshop
-});
-
-const LockWrapper = ({ featureName, bodyshop, children, disabled = true, bypass }) => {
-  let renderedChildren = children;
-
-  //Mark the child prop as disabled.
-  if (disabled && !bypass) {
-    renderedChildren = React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
-          disabled: true
-        });
-      }
-      return child;
-    });
-  }
-
-  if (bypass) {
-    if (import.meta.env.DEV) {
-      console.trace("*** Lock Wrapper BYPASS USED", featureName);
-    }
-    return <span>{children}</span>;
-  }
-
-  return HasFeatureAccess({ featureName: featureName, bodyshop }) ? (
-    children
-  ) : (
-    <Space>
-      {!HasFeatureAccess({ featureName: featureName, bodyshop }) && <LockOutlined style={{ color: "tomato" }} />}
-      {renderedChildren}
-    </Space>
-  );
-};
-export default connect(mapStateToProps, null)(LockWrapper);

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -25,9 +25,6 @@ export default function OwnerDetailFormComponent({ form, loading }) {
         <Form.Item label={t("owners.fields.ownr_co_nm")} name="ownr_co_nm">
           <Input />
         </Form.Item>
-        <Form.Item label={t("owners.fields.accountingid")} name="accountingid">
-          <Input disabled/>
-        </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow header={t("owners.forms.address")}>
         <Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -20,8 +20,7 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
 import DataLabel from "../data-label/data-label.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
 import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
 import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
@@ -170,44 +169,40 @@ export function PartsOrderListTableDrawerComponent({
           <DeleteFilled />
         </Button>
       </Popconfirm>
-
+      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-      <Button
+        <Button
-        disabled={
+          disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
-          (jobRO ? !record.return : jobRO) ||
+          onClick={() => {
-          record.vendor.id === bodyshop.inhousevendorid ||
+            logImEXEvent("parts_order_receive_bill");
-          !HasFeatureAccess({ bodyshop, featureName: "bills" })
+            setBillEnterContext({
-        }
+              actions: { refetch: refetch },
-        onClick={() => {
+              context: {
-          logImEXEvent("parts_order_receive_bill");
+                job: job,
-          setBillEnterContext({
+                bill: {
-            actions: { refetch: refetch },
+                  vendorid: record.vendor.id,
-            context: {
+                  is_credit_memo: record.return,
-              job: job,
+                  billlines: record.parts_order_lines.map((pol) => ({
-              bill: {
+                    joblineid: pol.job_line_id || "noline",
-                vendorid: record.vendor.id,
+                    line_desc: pol.line_desc,
-                is_credit_memo: record.return,
+                    quantity: pol.quantity,
-                billlines: record.parts_order_lines.map((pol) => ({
+                    actual_price: pol.act_price,
-                  joblineid: pol.job_line_id || "noline",
+                    cost_center: pol.jobline?.part_type
-                  line_desc: pol.line_desc,
+                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                  quantity: pol.quantity,
+                        ? pol.jobline.part_type !== "PAE"
-                  actual_price: pol.act_price,
+                          ? pol.jobline.part_type
-                  cost_center: pol.jobline?.part_type
+                          : null
-                    ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                        : responsibilityCenters.defaults &&
-                      ? pol.jobline.part_type !== "PAE"
+                          (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
-                        ? pol.jobline.part_type
+                      : null
-                        : null
+                  }))
-                      : responsibilityCenters.defaults &&
+                }
-                        (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
-                    : null
-                }))
               }
-            }
+            });
-          });
+          }}
-        }}
+        >
-      >
+          {t("parts_orders.actions.receivebill")}
-        <LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
+        </Button>
-      </Button>
+      </FeatureWrapperComponent>
-
       <PrintWrapper
         templateObject={{
           name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -14,8 +14,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
 import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
@@ -141,49 +140,45 @@ export function PartsOrderListTableComponent({
           <DeleteFilled />
         </Button>
       </Popconfirm>
+      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
+        <Button
+          disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
+          onClick={() => {
+            logImEXEvent("parts_order_receive_bill");
 
-      <Button
+            setBillEnterContext({
-        disabled={
+              actions: { refetch: refetch },
-          (jobRO ? !record.return : jobRO) ||
+              context: {
-          record.vendor.id === bodyshop.inhousevendorid ||
+                job: job,
-          !HasFeatureAccess({ bodyshop, featureName: "bills" })
+                bill: {
-        }
+                  vendorid: record.vendor.id,
-        onClick={() => {
+                  is_credit_memo: record.return,
-          logImEXEvent("parts_order_receive_bill");
+                  billlines: record.parts_order_lines.map((pol) => {
+                    return {
+                      joblineid: pol.job_line_id || "noline",
+                      line_desc: pol.line_desc,
+                      quantity: pol.quantity,
 
-          setBillEnterContext({
+                      actual_price: pol.act_price,
-            actions: { refetch: refetch },
-            context: {
-              job: job,
-              bill: {
-                vendorid: record.vendor.id,
-                is_credit_memo: record.return,
-                billlines: record.parts_order_lines.map((pol) => {
-                  return {
-                    joblineid: pol.job_line_id || "noline",
-                    line_desc: pol.line_desc,
-                    quantity: pol.quantity,
 
-                    actual_price: pol.act_price,
+                      cost_center: pol.jobline?.part_type
-
+                        ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                    cost_center: pol.jobline?.part_type
+                          ? pol.jobline.part_type !== "PAE"
-                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                            ? pol.jobline.part_type
-                        ? pol.jobline.part_type !== "PAE"
+                            : null
-                          ? pol.jobline.part_type
+                          : responsibilityCenters.defaults &&
-                          : null
+                            (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
-                        : responsibilityCenters.defaults &&
+                        : null
-                          (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
+                    };
-                      : null
+                  })
-                  };
+                }
-                })
               }
-            }
+            });
-          });
+          }}
-        }}
+        >
-      >
+          {t("parts_orders.actions.receivebill")}
-        <LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
+        </Button>
-      </Button>
+      </FeatureWrapperComponent>
-
       <PrintWrapper
         templateObject={{
           name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,

client/src/components/payments-generate-link/payments-generate-link.component.jsx

@@ -3,14 +3,13 @@ import { Button, Form, message, Popover, Space } from "antd";
 import axios from "axios";
 import Dinero from "dinero.js";
 import { parsePhoneNumber } from "libphonenumber-js";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,7 +28,6 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [paymentLink, setPaymentLink] = useState(null);
-  const { socket } = useContext(SocketContext);
 
   const handleFinish = async ({ amount }) => {
     setLoading(true);
@@ -52,8 +50,7 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
     if (p) {
       openChatByPhone({
         phone_num: p.formatInternational(),
-        jobid: job.id,
+        jobid: job.id
-        socket
       });
       setMessage(
         t("payments.labels.smspaymentreminder", {
@@ -109,8 +106,7 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
                 const p = parsePhoneNumber(job.ownr_ph1, "CA");
                 openChatByPhone({
                   phone_num: p.formatInternational(),
-                  jobid: job.id,
+                  jobid: job.id
-                  socket
                 });
                 setMessage(
                   t("payments.labels.smspaymentreminder", {

client/src/components/print-center-item/print-center-item.component.jsx

@@ -8,8 +8,6 @@ import { selectPrintCenter } from "../../redux/modals/modals.selectors";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import { HasFeatureAccess } from './../feature-wrapper/feature-wrapper.component';
 
 const mapStateToProps = createStructuredSelector({
   printCenterModal: selectPrintCenter,
@@ -44,14 +42,7 @@ export function PrintCenterItemComponent({
     setLoading(false);
   };
 
-  if (disabled || (item.featureNameRestricted && !HasFeatureAccess({"featureName": item.featureNameRestricted, bodyshop})))
+  if (disabled) return <li className="print-center-item">{item.title} </li>;
-    return (
-      <li className="print-center-item">
-        <LockWrapperComponent featureName={item.featureNameRestricted} bodyshop={bodyshop}>
-          {item.title}
-        </LockWrapperComponent>
-      </li>
-    );
   return (
     <li>
       <Space wrap>

client/src/components/production-board-kanban/settings/defaultKanbanSettings.js

@@ -12,7 +12,8 @@ const statisticsItems = [
     name: "totalHrsOnBoard",
     label: InstanceRenderManager({
       imex: "total_hours_in_view",
-      rome: "total_hours_on_board"
+      rome: "total_hours_on_board",
+      promanager: "total_hours_on_board"
     })
   },
   {
@@ -20,7 +21,8 @@ const statisticsItems = [
     name: "totalAmountOnBoard",
     label: InstanceRenderManager({
       imex: "total_amount_in_view",
-      rome: "total_amount_on_board"
+      rome: "total_amount_on_board",
+      promanager: "total_amount_on_board"
     })
   },
   {
@@ -28,7 +30,8 @@ const statisticsItems = [
     name: "totalLABOnBoard",
     label: InstanceRenderManager({
       imex: "total_lab_in_view",
-      rome: "total_lab_on_board"
+      rome: "total_lab_on_board",
+      promanager: "total_lab_on_board"
     })
   },
   {
@@ -36,7 +39,8 @@ const statisticsItems = [
     name: "totalLAROnBoard",
     label: InstanceRenderManager({
       imex: "total_lar_in_view",
-      rome: "total_lar_on_board"
+      rome: "total_lar_on_board",
+      promanager: "total_lar_on_board"
     })
   },
   {
@@ -44,7 +48,8 @@ const statisticsItems = [
     name: "jobsOnBoard",
     label: InstanceRenderManager({
       imex: "total_jobs_in_view",
-      rome: "total_jobs_on_board"
+      rome: "total_jobs_on_board",
+      promanager: "total_jobs_on_board"
     })
   },
   {
@@ -52,7 +57,8 @@ const statisticsItems = [
     name: "tasksOnBoard",
     label: InstanceRenderManager({
       imex: "tasks_in_view",
-      rome: "tasks_on_board"
+      rome: "tasks_on_board",
+      promanager: "tasks_on_board"
     })
   },
   { id: 11, name: "tasksInProduction", label: "tasks_in_production" }

client/src/components/production-list-columns/production-list-columns.data.jsx

@@ -466,7 +466,8 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       title: i18n.t(
         InstanceRenderManager({
           imex: "jobs.fields.employee_csr",
-          rome: "jobs.fields.employee_csr_writer"
+          rome: "jobs.fields.employee_csr_writer",
+          promanager: "USE_ROME"
         })
       ),
       dataIndex: "employee_csr",

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -16,12 +16,10 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import dayjs from "../../utils/day";
 import EmployeeSearchSelectEmail from "../employee-search-select/employee-search-select-email.component";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
-import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
 import "./report-center-modal.styles.scss";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   reportCenterModal: selectReportCenter,
@@ -112,13 +110,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
         to: values.to,
         subject: Templates[values.key]?.subject
       },
-      values.sendbytext === "text"
+      values.sendbytext === "text" ? values.sendbytext : values.sendbyexcel === "excel" ? "x" : values.sendby === "email" ? "e" : "p",
-        ? values.sendbytext
-        : values.sendbyexcel === "excel"
-          ? "x"
-          : values.sendby === "email"
-            ? "e"
-            : "p",
       id
     );
     setLoading(false);
@@ -132,13 +124,10 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
   const grouped = _.groupBy(FilteredReportsList, "group");
 
   const groupExcludeKeyFilter = [
-    ...(!HasFeatureAccess({ featureName: "bills", bodyshop }) ? [{ key: "purchases", featureName: "bills" }] : []),
+    ...(!HasFeatureAccess({ featureName: "bills", bodyshop }) ? ["purchases"] : []),
-    ...(!HasFeatureAccess({ featureName: "timetickets", bodyshop })
+    ...(!HasFeatureAccess({ featureName: "timetickets", bodyshop }) ? ["payroll"] : [])
-      ? [{ key: "payroll", featureName: "timetickets" }]
-      : [])
   ];
 
-  //TODO: Find a way to filter out / blur on demand.
   return (
     <div>
       <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
@@ -156,9 +145,15 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
           ]}
         >
           <Radio.Group>
+            {/* {Object.keys(Templates).map((key) => (
+                <Radio key={key} value={key}>
+                  {Templates[key].title}
+                </Radio>
+              ))} */}
+
             <Row gutter={[16, 16]}>
               {Object.keys(grouped)
-                //.filter((key) => !groupExcludeKeyFilter.includes(key))
+                .filter((key) => !groupExcludeKeyFilter.includes(key))
                 .map((key) => (
                   <Col md={8} sm={12} key={key}>
                     <Card.Grid
@@ -170,41 +165,15 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                       }}
                     >
                       <Typography.Title level={4}>{t(`reportcenter.labels.groups.${key}`)}</Typography.Title>
-                      {groupExcludeKeyFilter.find((g) => g.key === key) ? (
+                      <ul style={{ listStyleType: "none", columns: "2 auto" }}>
-                        <BlurWrapperComponent
+                        {grouped[key].map((item) => (
-                          featureName={groupExcludeKeyFilter.find((g) => g.key === key).featureName}
+                          <li key={item.key}>
-                        >
+                            <Radio key={item.key} value={item.key}>
-                          <ul style={{ listStyleType: "none", columns: "2 auto" }}>
+                              {item.title}
-                            {grouped[key].map((item) => (
+                            </Radio>
-                              <li key={item.key}>
+                          </li>
-                                <Radio key={item.key} value={item.key}>
+                        ))}
-                                  {item.title}
+                      </ul>
-                                </Radio>
-                              </li>
-                            ))}
-                          </ul>
-                        </BlurWrapperComponent>
-                      ) : (
-                        <ul style={{ listStyleType: "none", columns: "2 auto" }}>
-                          {grouped[key].map((item) =>
-                            item.featureNameRestricted ? (
-                              <li key={item.key}>
-                                <LockWrapperComponent featureName={item.featureNameRestricted}>
-                                  <Radio key={item.key} value={item.key}>
-                                    {item.title}
-                                  </Radio>
-                                </LockWrapperComponent>
-                              </li>
-                            ) : (
-                              <li key={item.key}>
-                                <Radio key={item.key} value={item.key}>
-                                  {item.title}
-                                </Radio>
-                              </li>
-                            )
-                          )}
-                        </ul>
-                      )}
                     </Card.Grid>
                   </Col>
                 ))}
@@ -305,20 +274,6 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
                     {
                       required: true
                       //message: t("general.validation.required"),
-                    },
-                    {
-                      validator: (_, value) => {
-                        if (value && value[0] && value[1]) {
-                          const relatedRestrictedReport = restrictedReports.find((r) => r.key === key);
-                          if (relatedRestrictedReport) {
-                            const diffInDays = (value[1] - value[0]) / (1000 * 3600 * 24);
-                            if (diffInDays > relatedRestrictedReport.days) {
-                              return Promise.reject(t("general.validation.dateRangeExceeded"));
-                            }
-                          }
-                        }
-                        return Promise.resolve();
-                      }
                     }
                   ]}
                 >
@@ -377,14 +332,3 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
     </div>
   );
 }
-
-const restrictedReports = [
-  { key: "job_costing_ro", days: 183 },
-  { key: "job_costing_ro_date_summary", days: 183 },
-  { key: "job_costing_ro_csr", days: 183 },
-  { key: "job_costing_ro_ins_co", days: 183 },
-  { key: "job_costing_ro_date_detail", days: 183 },
-  { key: "job_costing_ro_estimator", days: 183 },
-  { key: "job_lifecycle_date_detail", days: 183 },
-  { key: "job_lifecycle_date_summary", days: 183 }
-];

client/src/components/schedule-calendar-wrapper/localizer.js

@@ -1,4 +1,11 @@
-import {DateLocalizer} from "react-big-calendar";
+import isBetween from "dayjs/plugin/isBetween";
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
+import localeData from "dayjs/plugin/localeData";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import minMax from "dayjs/plugin/minMax";
+import utc from "dayjs/plugin/utc";
+import { DateLocalizer } from "react-big-calendar";
 
 function arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -22,9 +29,7 @@ function iterableToArrayLimit(arr, i) {
     try {
       if (!_n && _i["return"] != null) _i["return"]();
     } finally {
-      if (_d) { // noinspection ThrowInsideFinallyBlockJS
+      if (_d) throw _e;
-        throw _e;
-      }
     }
   }
   return _arr;

client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx

@@ -6,9 +6,6 @@ import { connect } from "react-redux";
 import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, Tooltip } from "recharts";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
-import { UpsellMaskWrapper, upsellEnum } from "../upsell/upsell.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -36,10 +33,15 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
       []
     );
   }, [loadData, ssbuckets]);
-  const hasSmartSchedulingAccess = HasFeatureAccess({ featureName: "smartscheduling", bodyshop });
 
-  const chartContents = (
+  const popContent = (
-    <>
+    <div>
+      <Space>
+        {t("appointments.labels.expectedprodhrs")}
+        <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
+        {t("appointments.labels.expectedjobs")}
+        <strong>{loadData?.expectedJobCount}</strong>
+      </Space>
       <RadarChart
         // cx={300}
         // cy={250}
@@ -56,28 +58,6 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
         <Tooltip />
         <Legend />
       </RadarChart>
-    </>
-  );
-
-  const popContent = (
-    <div>
-      <Space>
-        {t("appointments.labels.expectedprodhrs")}
-        <BlurWrapperComponent featureName="smartscheduling">
-          <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
-        </BlurWrapperComponent>
-        {t("appointments.labels.expectedjobs")}
-        <BlurWrapperComponent featureName="smartscheduling">
-          <strong>{loadData?.expectedJobCount}</strong>
-        </BlurWrapperComponent>
-      </Space>
-      <BlurWrapperComponent featureName="smartscheduling">
-        {hasSmartSchedulingAccess ? (
-          chartContents
-        ) : (
-          <UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>{chartContents}</UpsellMaskWrapper>
-        )}
-      </BlurWrapperComponent>
     </div>
   );
 

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { Card, Popover, Space } from "antd";
+import { Popover, Space } from "antd";
 import _ from "lodash";
 import dayjs from "../../utils/day";
 
@@ -12,13 +12,11 @@ import { createStructuredSelector } from "reselect";
 import { selectScheduleLoad, selectScheduleLoadCalculating } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-import { default as BlurWrapper, default as BlurWrapperComponent } from "../feature-wrapper/blur-wrapper.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
+import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -53,7 +51,6 @@ export function ScheduleCalendarHeaderComponent({
 
   const { t } = useTranslation();
   const loadData = load[date.toISOString().substr(0, 10)];
-  const hasSmartSchedulingAccess = HasFeatureAccess({ featureName: "smartscheduling", bodyshop });
 
   const jobsOutPopup = () => (
     <div onClick={(e) => e.stopPropagation()}>
@@ -61,41 +58,38 @@ export function ScheduleCalendarHeaderComponent({
         <tbody>
           {loadData && loadData.allJobsOut ? (
             loadData.allJobsOut.map((j) => (
-              <BlurWrapperComponent key={j.id} featureName="smartscheduling">
+              <tr key={j.id}>
-                <tr>
+                <td style={{ padding: "2.5px" }}>
-                  <td style={{ padding: "2.5px" }}>
+                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> (
-                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
+                  {j.status})
-                  </td>
+                </td>
-                  <td style={{ padding: "2.5px" }}>
+                <td style={{ padding: "2.5px" }}>
-                    <OwnerNameDisplay ownerObject={j} />
+                  <OwnerNameDisplay ownerObject={j} />
-                  </td>
+                </td>
-                  <td style={{ padding: "2.5px" }}>
+                <td style={{ padding: "2.5px" }}>
-                    {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
+                  {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
-                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                    }/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
+                  }/${(
-                      1
+                    j.labhrs.aggregate?.sum?.mod_lb_hrs +
-                    )} ${t("general.labels.hours")})`}
+                    j.larhrs.aggregate?.sum?.mod_lb_hrs
-                  </td>
+                  ).toFixed(1)} ${t("general.labels.hours")})`}
-                  <td style={{ padding: "2.5px" }}>
+                </td>
-                    <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
+                <td style={{ padding: "2.5px" }}>
-                  </td>
+                  <DateTimeFormatter>
-                </tr>
+                    {j.scheduled_completion}
-              </BlurWrapperComponent>
+                  </DateTimeFormatter>
+                </td>
+              </tr>
             ))
           ) : (
             <tr>
-              <BlurWrapperComponent featureName="smartscheduling">
+              <td style={{ padding: "2.5px" }}>
-                <td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
+                {t("appointments.labels.nocompletingjobs")}
-              </BlurWrapperComponent>
+              </td>
             </tr>
           )}
         </tbody>
       </table>
-      {!hasSmartSchedulingAccess && (
-        <Card style={{ maxWidth: "30rem" }}>
-          <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
-        </Card>
-      )}
     </div>
   );
 
@@ -105,39 +99,33 @@ export function ScheduleCalendarHeaderComponent({
         <tbody>
           {loadData && loadData.allJobsIn ? (
             loadData.allJobsIn.map((j) => (
-              <BlurWrapperComponent key={j.id} featureName="smartscheduling">
+              <tr key={j.id}>
-                <tr>
+                <td style={{ padding: "2.5px" }}>
-                  <td style={{ padding: "2.5px" }}>
+                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                </td>
-                  </td>
+                <td style={{ padding: "2.5px" }}>
-                  <td style={{ padding: "2.5px" }}>
+                  <OwnerNameDisplay ownerObject={j} />
-                    <OwnerNameDisplay ownerObject={j} />
+                </td>
-                  </td>
+                <td style={{ padding: "2.5px" }}>
-                  <td style={{ padding: "2.5px" }}>
+                  {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
-                    {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                  }/${(
-                    }/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
+                    j.labhrs?.aggregate?.sum?.mod_lb_hrs +
-                      1
+                    j.larhrs?.aggregate?.sum?.mod_lb_hrs
-                    )} ${t("general.labels.hours")})`}
+                  ).toFixed(1)} ${t("general.labels.hours")})`}
-                  </td>
+                </td>
-                  <td style={{ padding: "2.5px" }}>
+                <td style={{ padding: "2.5px" }}>
-                    <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
+                  <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
-                  </td>
+                </td>
-                </tr>
+              </tr>
-              </BlurWrapperComponent>
             ))
           ) : (
             <tr>
-              <BlurWrapperComponent featureName="smartscheduling">
+              <td style={{ padding: "2.5px" }}>
-                <td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
+                {t("appointments.labels.noarrivingjobs")}
-              </BlurWrapperComponent>
+              </td>
             </tr>
           )}
-          {!hasSmartSchedulingAccess && (
-            <Card style={{ maxWidth: "30rem" }}>
-              <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
-            </Card>
-          )}
         </tbody>
       </table>
     </div>
@@ -145,36 +133,33 @@ export function ScheduleCalendarHeaderComponent({
 
   const LoadComponent = loadData ? (
     <div>
-      <Space align="center">
+        <Space align="center">
-        <Popover
+          <Popover
-          placement={"bottom"}
+            placement={"bottom"}
-          content={jobsInPopup}
+            content={jobsInPopup}
-          trigger="hover"
+            trigger="hover"
-          title={t("appointments.labels.arrivingjobs")}
+            title={t("appointments.labels.arrivingjobs")}
-        >
+          >
-          <Space size="small">
             <Icon component={MdFileDownload} style={{ color: "green" }} />
-            <BlurWrapper featureName="smartscheduling">
+            {(loadData.allHoursInBody || 0) &&
-              <span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
+              loadData.allHoursInBody.toFixed(1)}
-            </BlurWrapper>
+            /
-          </Space>
+            {(loadData.allHoursInRefinish || 0) &&
-        </Popover>
+              loadData.allHoursInRefinish.toFixed(1)}
-        <Popover
+            /{(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
-          placement={"bottom"}
+          </Popover>
-          content={jobsOutPopup}
+          <Popover
-          trigger="hover"
+            placement={"bottom"}
-          title={t("appointments.labels.completingjobs")}
+            content={jobsOutPopup}
-        >
+            trigger="hover"
-          <Space size="small">
+            title={t("appointments.labels.completingjobs")}
+          >
             <Icon component={MdFileUpload} style={{ color: "red" }} />
-            <BlurWrapper featureName="smartscheduling">
+            {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
-              <span>{(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}</span>
+          </Popover>
-            </BlurWrapper>
+          <ScheduleCalendarHeaderGraph loadData={loadData} />
-          </Space>
+        </Space>
-        </Popover>
+   
-        <ScheduleCalendarHeaderGraph loadData={loadData} />
-      </Space>
-
       <div>
         <ul style={{ listStyleType: "none", columns: "2 auto", padding: 0 }}>
           {Object.keys(ATSToday).map((key, idx) => (
@@ -222,7 +207,11 @@ export function ScheduleCalendarHeaderComponent({
       <ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>
         <div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
           {label}
-          {calculating ? <LoadingSkeleton /> : LoadComponent}
+          {InstanceRenderMgr({
+            imex: calculating ? <LoadingSkeleton /> : LoadComponent,
+            rome: "USE_IMEX",
+            promanager: <></>
+          })}
         </div>
       </ScheduleBlockDay>
     </div>

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -1,20 +1,20 @@
-import { Alert, Collapse, Space } from "antd";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React from "react";
 import { Calendar } from "react-big-calendar";
-import { Trans, useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { selectProblemJobs } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import dayjs from "../../utils/day";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import Event from "../job-at-change/schedule-event.container";
-import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
-import local from "./localizer";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
+import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
+import { selectProblemJobs } from "../../redux/application/application.selectors";
+import { Alert, Collapse, Space } from "antd";
+import { Trans, useTranslation } from "react-i18next";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import local from "./localizer";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -54,54 +54,58 @@ export function ScheduleCalendarWrapperComponent({
   return (
     <>
       <JobDetailCards />
-      {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) &&
+      {InstanceRenderManager({
-        problemJobs &&
+        imex:
-        (problemJobs.length > 2 ? (
+          problemJobs && problemJobs.length > 2 ? (
-          <Collapse style={{ marginBottom: "5px" }}>
+            <Collapse style={{ marginBottom: "5px" }}>
-            <Collapse.Panel
+              <Collapse.Panel
-              key="1"
+                key="1"
-              header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
+                header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
-            >
+              >
-              <Space direction="vertical" style={{ width: "100%" }}>
+                <Space direction="vertical" style={{ width: "100%" }}>
-                {problemJobs.map((problem) => (
+                  {problemJobs.map((problem) => (
-                  <Alert
+                    <Alert
-                    key={problem.id}
+                      key={problem.id}
-                    type="error"
+                      type="error"
-                    message={
+                      message={
-                      <Trans
+                        <Trans
-                        i18nKey="appointments.labels.dataconsistency"
+                          i18nKey="appointments.labels.dataconsistency"
-                        components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
+                          components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
-                        values={{
+                          values={{
-                          ro_number: problem.ro_number,
+                            ro_number: problem.ro_number,
-                          code: problem.code
+                            code: problem.code
-                        }}
+                          }}
-                      />
+                        />
-                    }
+                      }
-                  />
+                    />
-                ))}
+                  ))}
-              </Space>
+                </Space>
-            </Collapse.Panel>
+              </Collapse.Panel>
-          </Collapse>
+            </Collapse>
-        ) : (
+          ) : (
-          <Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
+            <Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
-            {problemJobs.map((problem) => (
+              {problemJobs.map((problem) => (
-              <Alert
+                <Alert
-                key={problem.id}
+                  key={problem.id}
-                type="error"
+                  type="error"
-                message={
+                  message={
-                  <Trans
+                    <Trans
-                    i18nKey="appointments.labels.dataconsistency"
+                      i18nKey="appointments.labels.dataconsistency"
-                    components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
+                      components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
-                    values={{
+                      values={{
-                      ro_number: problem.ro_number,
+                        ro_number: problem.ro_number,
-                      code: problem.code
+                        code: problem.code
-                    }}
+                      }}
-                  />
+                    />
-                }
+                  }
-              />
+                />
-            ))}
+              ))}
-          </Space>
+            </Space>
-        ))}
+          ),
+
+        rome: "USE_IMEX",
+        promanager: <span />
+      })}
 
       <Calendar
         events={data}

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -8,16 +8,13 @@ import { calculateScheduleLoad } from "../../redux/application/application.actio
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import "./schedule-job-modal.scss";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -67,8 +64,6 @@ export function ScheduleJobModalComponent({
     }
   };
 
-  const hasSmartSchedulingAccess = HasFeatureAccess({ bodyshop, featureName: "smartscheduling" });
-
   return (
     <Row gutter={[16, 16]}>
       <Col span={12}>
@@ -104,46 +99,39 @@ export function ScheduleJobModalComponent({
             <DateTimePicker onlyFuture />
           </Form.Item>
         </LayoutFormRow>
-        {
+        {InstanceRenderManager({
-          <>
+          imex: (
-            <Typography.Title level={4}>{t("appointments.labels.smartscheduling")}</Typography.Title>
+            <>
-            <Space wrap>
+              <Typography.Title level={4}>{t("appointments.labels.smartscheduling")}</Typography.Title>
-              <Button onClick={handleSmartScheduling} loading={loading}>
+              <Space wrap>
-                <LockWrapperComponent featureName="smartscheduling">
+                <Button onClick={handleSmartScheduling} loading={loading}>
                   {t("appointments.actions.calculate")}
-                </LockWrapperComponent>
-              </Button>
-
-              {smartOptions.map((d, idx) => (
-                <Button
-                  key={idx}
-                  className="imex-flex-row__margin"
-                  disabled={!hasSmartSchedulingAccess}
-                  onClick={() => {
-                    const ssDate = dayjs(d);
-                    if (ssDate.isBefore(dayjs())) {
-                      form.setFieldsValue({ start: dayjs() });
-                    } else {
-                      form.setFieldsValue({
-                        start: dayjs(d).add(8, "hour")
-                      });
-                    }
-                    handleDateBlur();
-                  }}
-                >
-                  <BlurWrapper featureName="smartscheduling">
-                    <span>
-                      <DateFormatter includeDay>{d}</DateFormatter>
-                    </span>
-                  </BlurWrapper>
                 </Button>
-              ))}
+                {smartOptions.map((d, idx) => (
-              {!smartOptions.length > 1 && hasSmartSchedulingAccess && (
+                  <Button
-                <UpsellComponent upsell={upsellEnum().smartscheduling.general} />
+                    className="imex-flex-row__margin"
-              )}
+                    key={idx}
-            </Space>
+                    onClick={() => {
-          </>
+                      const ssDate = dayjs(d);
-        }
+                      if (ssDate.isBefore(dayjs())) {
+                        form.setFieldsValue({ start: dayjs() });
+                      } else {
+                        form.setFieldsValue({
+                          start: dayjs(d).add(8, "hour")
+                        });
+                      }
+                      handleDateBlur();
+                    }}
+                  >
+                    <DateFormatter includeDay>{d}</DateFormatter>
+                  </Button>
+                ))}
+              </Space>
+            </>
+          ),
+          rome: "USE_IMEX",
+          promanager: <></>
+        })}
 
         <LayoutFormRow grow>
           <Form.Item name="notifyCustomer" valuePropName="checked" label={t("jobs.labels.appointmentconfirmation")}>

client/src/components/shop-info/shop-info.component.jsx

@@ -1,4 +1,3 @@
-
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Card, Tabs } from "antd";
 import React from "react";
@@ -22,8 +21,6 @@ import queryString from "query-string";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoIntellipay from "./shop-intellipay-config.component";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -90,14 +87,18 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
       children: <ShopInfoResponsibilityCenterComponent form={form} />,
       id: "tab-shop-responsibilitycenters"
     },
-
+    ...InstanceRenderManager({
-    {
+      imex: [
-      key: "checklists",
+        {
-      label: <LockWrapperComponent featureName="checklist">{t("bodyshop.labels.checklists")}</LockWrapperComponent>,
+          key: "checklists",
-      children: <ShopInfoIntakeChecklistComponent form={form} />,
+          label: t("bodyshop.labels.checklists"),
-      disabled: !HasFeatureAccess({ bodyshop, featureName: "checklist" }),
+          children: <ShopInfoIntakeChecklistComponent form={form} />,
-      id: "tab-shop-checklists"
+          id: "tab-shop-checklists"
-    },
+        }
+      ],
+      rome: "USE_IMEX",
+      promanager: []
+    }),
     {
       key: "laborrates",
       label: t("bodyshop.labels.laborrates"),
@@ -124,22 +125,29 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
           }
         ]
       : []),
-    ...(HasFeatureAccess({ featureName: "roguard", bodyshop })
+    ...InstanceRenderManager({
-      ? [
+      imex: [
-          {
+        {
-            key: "roguard",
+          key: "roguard",
-            label: t("bodyshop.labels.roguard.title"),
+          label: t("bodyshop.labels.roguard.title"),
-            children: <ShopInfoRoGuard form={form} />,
+          children: <ShopInfoRoGuard form={form} />,
-            id: "tab-shop-roguard"
+          id: "tab-shop-roguard"
-          }
+        }
-        ]
+      ],
-      : []),
+      rome: "USE_IMEX",
-
+      promanager: []
-    {
+    }),
-      key: "intellipay",
+    ...InstanceRenderManager({
-      label: InstanceRenderManager({ rome: t("bodyshop.labels.romepay"), imex: t("bodyshop.labels.imexpay") }),
+      imex: [],
-      children: <ShopInfoIntellipay form={form} />
+      rome: [
-    }
+        {
+          key: "intellipay",
+          label: InstanceRenderManager({ rome: t("bodyshop.labels.romepay"), imex: t("bodyshop.labels.imexpay") }),
+          children: <ShopInfoIntellipay form={form} />
+        }
+      ],
+      promanager: []
+    })
   ];
   return (
     <Card

client/src/components/shop-info/shop-info.parts-scan.jsx

@@ -1,188 +1,75 @@
-import {DeleteFilled} from "@ant-design/icons";
+import { DeleteFilled } from "@ant-design/icons";
-import {Button, Col, Form, Input, Row, Select, Space, Switch} from "antd";
+import { Button, Form, Input, Space } from "antd";
-import React, {useMemo} from "react";
+import React from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
-const predefinedPartTypes = [
+export default function ShopInfoPartsScan({ form }) {
-  "PAN", "PAC", "PAR", "PAL", "PAA", "PAM", "PAP", "PAS", "PASL", "PAG"
+  const { t } = useTranslation();
-];
-const predefinedModLbrTypes = [
-  "LAA", "LAB", "LAD", "LAE", "LAF", "LAG", "LAM", "LAR", "LAS", "LAU",
-  "LA1", "LA2", "LA3", "LA4"
-];
-
-const getFieldType = (field) => {
-  if (["line_desc", "part_number"].includes(field)) return "string";
-  if (["act_price", "part_qty", "mod_lb_hrs"].includes(field)) return "number";
-  if (["part_type", "mod_lbr_ty"].includes(field)) return "predefined";
-  return null;
-};
-
-export default function ShopInfoPartsScan({form}) {
-  const {t} = useTranslation();
-
-  const watchedFields = Form.useWatch("md_parts_scan", form);
-
-  const operationOptions = useMemo(() => ({
-    string: [
-      {label: t("bodyshop.operations.contains"), value: "contains"},
-      {label: t("bodyshop.operations.equals"), value: "equals"},
-      {label: t("bodyshop.operations.starts_with"), value: "startsWith"},
-      {label: t("bodyshop.operations.ends_with"), value: "endsWith"},
-    ],
-    number: [
-      {label: t("bodyshop.operations.equals"), value: "="},
-      {label: t("bodyshop.operations.greater_than"), value: ">"},
-      {label: t("bodyshop.operations.less_than"), value: "<"},
-    ],
-  }), [t]);
 
   return (
     <div>
       <LayoutFormRow header={t("bodyshop.labels.md_parts_scan")}>
         <Form.List name={["md_parts_scan"]}>
-          {(fields, {add, remove, move}) => (
+          {(fields, { add, remove, move }) => {
-            <div>
+            return (
-              {fields.map((field, index) => {
+              <div>
-                const selectedField = watchedFields?.[index]?.field || "line_desc";
+                {fields.map((field, index) => (
-                const fieldType = getFieldType(selectedField);
-
-                return (
                   <Form.Item key={field.key}>
-                    <Row gutter={[16, 16]} align="middle">
+                    <LayoutFormRow noDivider>
-                      {/* Select Field */}
+                      <Form.Item
-                      <Col span={6}>
+                        label={t("bodyshop.fields.md_parts_scan.expression")}
-                        <Form.Item
+                        key={`${index}expression`}
-                          label={t("bodyshop.fields.md_parts_scan.field")}
+                        name={[field.name, "expression"]}
-                          name={[field.name, "field"]}
+                        rules={[
-                          rules={[
+                          {
-                            {
+                            required: true
-                              required: true,
+                            //message: t("general.validation.required"),
-                              message: t("general.validation.required", {
+                          }
-                                label: t("bodyshop.fields.md_parts_scan.field"),
+                        ]}
-                              }),
+                      >
-                            },
+                        <Input />
-                          ]}
+                      </Form.Item>
-                        >
+                      <Form.Item
-                          <Select
+                        label={t("bodyshop.fields.md_parts_scan.flags")}
-                            options={[
+                        key={`${index}flags`}
-                              {label: t("joblines.fields.line_desc"), value: "line_desc"},
+                        name={[field.name, "flags"]}
-                              {label: t("joblines.fields.part_type"), value: "part_type"},
+                        rules={[
-                              {label: t("joblines.fields.act_price"), value: "act_price"},
+                          {
-                              {label: t("joblines.fields.part_qty"), value: "part_qty"},
+                            required: true
-                              {label: t("joblines.fields.mod_lbr_ty"), value: "mod_lbr_ty"},
+                            //message: t("general.validation.required"),
-                              {label: t("joblines.fields.mod_lb_hrs"), value: "mod_lb_hrs"},
+                          }
-                              {
+                        ]}
-                                label: `${t("joblines.fields.oem_partno")} / ${t("joblines.fields.alt_partno")}`,
+                      >
-                                value: "part_number"
+                        <Input />
-                              },
+                      </Form.Item>
-                            ]}
-                            onChange={() => {
-                              form.setFields([
-                                {name: ["md_parts_scan", index, "operation"], value: "contains"},
-                                {name: ["md_parts_scan", index, "value"], value: undefined},
-                              ]);
-                            }}
-                          />
-                        </Form.Item>
-                      </Col>
 
-                      {/* Operation */}
+                      <Space wrap>
-                      {fieldType !== "predefined" && fieldType && (
+                        <DeleteFilled
-                        <Col span={6}>
+                          onClick={() => {
-                          <Form.Item
+                            remove(field.name);
-                            label={t("bodyshop.fields.md_parts_scan.operation")}
+                          }}
-                            name={[field.name, "operation"]}
+                        />
-                            rules={[
+                        <FormListMoveArrows move={move} index={index} total={fields.length} />
-                              {
+                      </Space>
-                                required: true,
+                    </LayoutFormRow>
-                                message: t("general.validation.required", {
-                                  label: t("bodyshop.fields.md_parts_scan.operation"),
-                                }),
-                              },
-                            ]}
-                          >
-                            <Select options={operationOptions[fieldType]}/>
-                          </Form.Item>
-                        </Col>
-                      )}
-
-                      {/* Value */}
-                      {fieldType && (
-                        <Col span={6}>
-                          <Form.Item
-                            label={t("bodyshop.fields.md_parts_scan.value")}
-                            name={[field.name, "value"]}
-                            rules={[
-                              {
-                                required: true,
-                                message: t("general.validation.required", {
-                                  label: t("bodyshop.fields.md_parts_scan.value"),
-                                }),
-                              },
-                            ]}
-                          >
-                            {fieldType === "predefined" ? (
-                              <Select
-                                options={
-                                  selectedField === "part_type"
-                                    ? predefinedPartTypes.map((type) => ({
-                                      label: type,
-                                      value: type
-                                    }))
-                                    : predefinedModLbrTypes.map((type) => ({
-                                      label: type,
-                                      value: type
-                                    }))
-                                }
-                              />
-                            ) : (
-                              <Input/>
-                            )}
-                          </Form.Item>
-                        </Col>
-                      )}
-
-                      {/* Case Sensitivity */}
-                      {fieldType === "string" && (
-                        <Col span={4}>
-                          <Form.Item
-                            label={t("bodyshop.fields.md_parts_scan.caseInsensitive")}
-                            name={[field.name, "caseInsensitive"]}
-                            valuePropName="checked"
-                            labelCol={{span: 14}}
-                            wrapperCol={{span: 10}}
-                          >
-                            <Switch defaultChecked={true}/>
-                          </Form.Item>
-                        </Col>
-                      )}
-
-                      {/* Actions */}
-                      <Col span={2}>
-                        <Space>
-                          <DeleteFilled onClick={() => remove(field.name)}/>
-                          <FormListMoveArrows move={move} index={index} total={fields.length}/>
-                        </Space>
-                      </Col>
-                    </Row>
                   </Form.Item>
-                );
+                ))}
-              })}
+                <Form.Item>
-
+                  <Button
-              <Form.Item>
+                    type="dashed"
-                <Button
+                    onClick={() => {
-                  type="dashed"
+                      add();
-                  onClick={() => add({field: "line_desc", operation: "contains"})}
+                    }}
-                  style={{width: "100%"}}
+                    style={{ width: "100%" }}
-                >
+                  >
-                  {t("bodyshop.actions.addpartsrule")}
+                    {t("bodyshop.actions.addpartsrule")}
-                </Button>
+                  </Button>
-              </Form.Item>
+                </Form.Item>
-            </div>
+              </div>
-          )}
+            );
+          }}
         </Form.List>
       </LayoutFormRow>
     </div>

client/src/components/shop-info/shop-info.rbac.component.jsx

@@ -26,6 +26,7 @@ export function ShopInfoRbacComponent({ form, bodyshop }) {
     names: ["Simple_Inventory"],
     splitKey: bodyshop && bodyshop.imexshopid
   });
+  //TODO:AIO Ensure that there are no duplicates here, it seems like there may be.
   return (
     <RbacWrapper action="shop:rbac">
       <LayoutFormRow>