IO-2742-redis - Merge Release / Up deps (prior to parking)

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:

.dockerignore

@@ -1,24 +0,0 @@
-# Directories to exclude
-.circleci
-.idea
-.platform
-.vscode
-_reference
-client
-redis/dockerdata
-hasura
-node_modules
-# Files to exclude
-.ebignore
-.editorconfig
-.eslintrc.json
-.gitignore
-.prettierrc.js
-Dockerfile
-README.MD
-bodyshop_translations.babel
-docker-compose.yml
-ecosystem.config.js
-
-# Optional: Exclude logs and temporary files
-*.log

.gitattributes

@@ -1,81 +0,0 @@
-# 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/00-install-fonts.sh

@@ -1,24 +0,0 @@
-#!/bin/bash
-
-# Install required packages
-dnf install -y fontconfig freetype
-
-# Move to the /tmp directory for temporary download and extraction
-cd /tmp
-
-# Download the Montserrat font zip file
-wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip
-
-# Unzip the downloaded font file
-unzip montserrat.zip -d montserrat
-
-# Move the font files to the system fonts directory
-mv montserrat/montserrat/*.ttf /usr/share/fonts
-
-# Rebuild the font cache
-fc-cache -fv
-
-# Clean up
-rm -rf /tmp/montserrat /tmp/montserrat.zip
-
-echo "Montserrat fonts installed and cached successfully."

.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."

.platform/nginx/conf.d/proxy.conf

@@ -1,2 +1 @@
-client_max_body_size 50M;
+client_max_body_size 50M;
-client_body_buffer_size 5M;

.vscode/launch.json

@@ -14,21 +14,6 @@
       "request": "launch",
       "url": "http://localhost:3000",
       "webRoot": "${workspaceRoot}/client/src"
-    },
-    {
-      "name": "Attach to Node.js in Docker",
-      "type": "node",
-      "request": "attach",
-      "address": "localhost",
-      "port": 9229,
-      "localRoot": "${workspaceFolder}",
-      "remoteRoot": "/app",
-      "protocol": "inspector",
-      "restart": true,
-      "sourceMaps": true,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
     }
   ]
 }

.vscode/settings.json

@@ -8,36 +8,5 @@
       "pattern": "**/IMEX.xml",
       "systemId": "logs/IMEX.xsd"
     }
-  ],
+  ]
-  "cSpell.words": [
-    "antd",
-    "appointmentconfirmation",
-    "appt",
-    "autohouse",
-    "autohouseid",
-    "billlines",
-    "bodyshop",
-    "bodyshopid",
-    "bodyshops",
-    "CIECA",
-    "claimscorp",
-    "claimscorpid",
-    "Dinero",
-    "driveable",
-    "IMEX",
-    "imexshopid",
-    "jobid",
-    "joblines",
-    "Kaizen",
-    "labhrs",
-    "larhrs",
-    "mixdata",
-    "ownr",
-    "promanager",
-    "shopname",
-    "smartscheduling",
-    "timetickets",
-    "touchtime"
-  ],
-  "eslint.workingDirectories": ["./", "./client"]
 }

Dockerfile

@@ -1,59 +0,0 @@
-# Use Amazon Linux 2023 as the base image
-FROM amazonlinux:2023
-
-# Install Git and Node.js (Amazon Linux 2023 uses the DNF package manager)
-RUN dnf install -y git \
-    && curl -sL https://rpm.nodesource.com/setup_20.x | bash - \
-    && dnf install -y nodejs \
-    && dnf clean all
-
-# Install dependencies required by node-canvas
-RUN dnf install -y \
-    gcc \
-    gcc-c++ \
-    cairo-devel \
-    pango-devel \
-    libjpeg-turbo-devel \
-    giflib-devel \
-    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
-
-# This is because our test route uses a git commit hash
-RUN git config --global --add safe.directory /app
-
-# Copy package.json and package-lock.json
-COPY package.json ./
-
-# Install Nodemon
-RUN npm install -g nodemon
-
-# Install dependencies
-RUN npm i --no-package-lock
-
-# Copy the rest of your application code
-COPY . .
-
-# Expose the port your app runs on (adjust if necessary)
-EXPOSE 4000 9229
-
-# Start the application
-CMD ["nodemon", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]

_reference/BodyshopFeatures.json

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

_reference/Documents/dockerreadme.md

@@ -1,64 +0,0 @@
-# Setting up External Networking and Static IP for WSL2 using Hyper-V
-
-This guide will walk you through the steps to configure your WSL2 (Windows Subsystem for Linux) instance to use an external Hyper-V virtual switch, enabling it to connect directly to your local network. Additionally, you'll learn how to assign a static IP address to your WSL2 instance.
-
-## Prerequisites
-
-1. **Windows 11**
-2. **Docker Desktop For Windows (Latest Version)
-
-# Docker Setup
-Inside the root of the project exists the `docker-compose.yaml` file, you can simply run
-`docker-compose up` to launch the backend.
-
-Things to note:
-- When installing NPM packages, you will need to rebuild the `node-app` container 
-- Making changes to the server files will restart the `node-app`
-
-# Local Stack 
-- LocalStack Front end (Optional) - https://apps.microsoft.com/detail/9ntrnft9zws2?hl=en-us&gl=US
-- http://localhost:4566/_aws/ses will allow you to see emails sent
-
-# Docker Commands
-
-##  General `docker-compose` Commands:
-1. Bring up the services, force a rebuild of all services, and do not use the cache: `docker-compose up --build --no-cache`
-2. Start Containers in Detached Mode: This will run the containers in the background (detached mode): `docker-compose up -d`
-3. Stop and Remove Containers: Stops and removes the containers gracefully: `docker-compose down`
-4. Stop containers without removing them: `docker-compose stop`
-5. Remove Containers, Volumes, and Networks: `docker-compose down --volumes`
-6. Force rebuild of containers: `docker-compose build --no-cache`
-7. View running Containers:  `docker-compose ps`
-8. View a specific containers logs: `docker-compose logs <container-name>`
-9. Scale services (multiple instances of a service): `docker-compose up --scale <container-name>=<instances number> -d`
-10. Watch a specific containers logs in realtime with timestamps: `docker-compose logs -f --timestamps <container-name>`
-
-## Volume Management Commands
-1. List  Docker volumes: `docker volume ls`
-2. Remove Unused volumes `docker volume prune`
-3. Remove specific volumes `docker volume rm <volume-name>`
-4. Inspect a volume: `docker volume inspect <volume-name>`
-
-## Container Image Management Commands:
-1. List running containers: `docker ps`
-2. List all containers: `docker os -a`
-3. Remove Stopped containers: `docker container prune`
-4. Remove a specific container: `docker container rm <container-name>`
-5. Remove a specific image: `docker rmi <image-name>:<version>`
-6. Remove all unused images: `docker image prune -a`
-
-## Network Management Commands:
-1. List networks: `docker network ls`
-2. Inspect a specific network: `docker network inspect <network-name>`
-3. Remove a specific network: `docker network rm <network-name>`
-4. Remove unused networks: `docker network prune`
-
-## Debugging and maintenance:
-1. Enter a Running container: `docker exec -it <container name> /bin/bash` (could also be `/bin/sh` or for example `redis-cli` on a redis node)
-2. View container resource usage: `docker stats`
-3. Check Disk space used by Docker: `docker system df`
-4. Remove all unused Data (Nuclear option): `docker system prune`
-
-## Specific examples
-1. To simulate a Clean state, one should run `docker system prune` followed by `docker volume prune -a`
-2. You can run `docker-compose up` without the `-d` option, and you will get what is identical to the experience you were used to, this includes being able to control-c and bring the entire stack down

_reference/localEmailViewer/.gitignore

@@ -1 +0,0 @@
-node_modules

_reference/localEmailViewer/README.md

@@ -1,7 +0,0 @@
-This will connect to your dockers local stack session and render the email in HTML.
-
-```shell
-node index.js
-```
-
-http://localhost:3334

_reference/localEmailViewer/index.js

@@ -1,116 +0,0 @@
-// index.js
-
-import express from 'express';
-import fetch from 'node-fetch';
-import {simpleParser} from 'mailparser';
-
-const app = express();
-const PORT = 3334;
-
-app.get('/', async (req, res) => {
-    try {
-        const response = await fetch('http://localhost:4566/_aws/ses');
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
-        }
-        const data = await response.json();
-        const messagesHtml = await parseMessages(data.messages);
-        res.send(renderHtml(messagesHtml));
-    } catch (error) {
-        console.error('Error fetching messages:', error);
-        res.status(500).send('Error fetching messages');
-    }
-});
-
-async function parseMessages(messages) {
-    const parsedMessages = await Promise.all(
-        messages.map(async (message, index) => {
-            try {
-                const parsed = await simpleParser(message.RawData);
-                return `
-                    <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: lightgray">
-                     <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: white">
-                        <div class="mb-2">
-                            <span class="font-bold text-lg">Message ${index + 1}</span>
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">From:</span> ${message.Source}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Region:</span> ${message.Region}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Timestamp:</span> ${message.Timestamp}
-                        </div>
-                     </div>
-                        <div class="prose">
-                            ${parsed.html || parsed.textAsHtml || 'No HTML content available'}
-                        </div>
-                    </div>
-                `;
-            } catch (error) {
-                console.error('Error parsing email:', error);
-                return `
-                    <div class="bg-white shadow-md rounded-lg p-4 mb-6">
-                        <div class="mb-2">
-                            <span class="font-bold text-lg">Message ${index + 1}</span>
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">From:</span> ${message.Source}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Region:</span> ${message.Region}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Timestamp:</span> ${message.Timestamp}
-                        </div>
-                        <div class="text-red-500">
-                            Error parsing email content
-                        </div>
-                    </div>
-                `;
-            }
-        })
-    );
-    return parsedMessages.join('');
-}
-
-function renderHtml(messagesHtml) {
-    return `
-        <!DOCTYPE html>
-        <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Email Messages Viewer</title>
-            <script src="https://cdn.tailwindcss.com"></script>
-            <style>
-                body {
-                    background-color: #f3f4f6;
-                    font-family: Arial, sans-serif;
-                }
-                .container {
-                    max-width: 800px;
-                    margin: 50px auto;
-                    padding: 20px;
-                }
-                .prose {
-                    line-height: 1.6;
-                }
-            </style>
-        </head>
-        <body>
-            <div class="container bg-white shadow-lg rounded-lg p-6">
-                <h1 class="text-2xl font-bold text-center mb-6">Email Messages Viewer</h1>
-                <div id="messages-container">
-                    ${messagesHtml}
-                </div>
-            </div>
-        </body>
-        </html>
-    `;
-}
-
-app.listen(PORT, () => {
-    console.log(`Server is running on http://localhost:${PORT}`);
-});

_reference/localEmailViewer/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "localemailviewer",
-  "version": "1.0.0",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "express": "^4.21.1",
-    "mailparser": "^3.7.1",
-    "node-fetch": "^3.3.2"
-  }
-}

certs/id_rsa.key

@@ -1,27 +0,0 @@
------BEGIN OPENSSH PRIVATE KEY-----
-b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAABFwAAAAdzc2gtcn
-NhAAAAAwEAAQAAAQEAvNl5fuVmLNv72BZNxnTqX5CHf5Xi8UxjYaYxHITSCx7blnhpVYLd
-qXvcOWXzbsfjch/den73QiW4n2FYz75oGMhUGlOYzdWKA9I9Sj09Qy1R06RhwDiZGd5qaM
-swEeXpkNmi2u4Qd2kJeDfUQUigjC09V81O/vrniGtQAJScfiG/itdm+Ufn09Z4MYk0HWjq
-iDokNEskoEPsibYIrb+Q6vdtuPkZO+wU/smXhPtgw5ST6oQdmm/gVNsRg5XNzxrire+z1G
-WatnnVL3hPnnfpnf8W589dyms7GGJwhPerSGTN1bn0T4+9C69Cd7LBJtxiuFdRmdlGLLLP
-RR48Rur71wAAA9AEfVsdBH1bHQAAAAdzc2gtcnNhAAABAQC82Xl+5WYs2/vYFk3GdOpfkI
-d/leLxTGNhpjEchNILHtuWeGlVgt2pe9w5ZfNux+NyH916fvdCJbifYVjPvmgYyFQaU5jN
-1YoD0j1KPT1DLVHTpGHAOJkZ3mpoyzAR5emQ2aLa7hB3aQl4N9RBSKCMLT1XzU7++ueIa1
-AAlJx+Ib+K12b5R+fT1ngxiTQdaOqIOiQ0SySgQ+yJtgitv5Dq9224+Rk77BT+yZeE+2DD
-lJPqhB2ab+BU2xGDlc3PGuKt77PUZZq2edUveE+ed+md/xbnz13KazsYYnCE96tIZM3Vuf
-RPj70Lr0J3ssEm3GK4V1GZ2UYsss9FHjxG6vvXAAAAAwEAAQAAAQAQTosSLQbMmtY9S3e9
-yjyusdExcCTfhyQRu4MEHmfws+JsNMuLqbgwOVTD1AzYJQR7x0qdmDcLjCxL/uDnV16vvS
-Sd/Vf1dhnryIyoS29tzI0DRG94ZKq7tBvmHp1w/jRT4KcSVnovhW9e5Rs74+SRFhr06PKI
-S+wQOIv48Nwue9+QUMsMCpWgKXHx7SHNTHvnAfqdhi9O29SWlMA+v+mELZ5Cl+HU0UTt2I
-A1BxOe1N8FjN7KE2viJexsl3is1PuqMkpLl/wyHBJTVzUadl6DRALJQIm7/YO5goE72YOV
-Lpo27do3zjhC87dlKdATvZUzfKV0LuUVdxq/PNDZMUbBAAAAgQDShAqDZiDrdTUaGXfUVm
-QzcnVNbh2/KgZh4uux9QNHST562W6cnN7qxoRwVrM4BCOk1Kl73QQZW4nDvXX3PVC5j038
-8AXkcBHS9j9f4h72ue7D2jqlbHFa7aGU9zYgk9mbBF+GX3tDntkAIQjLtwOLfj1iiJ/clX
-mHFUAY1V4L8AAAAIEA3E4t/v0yU5D9AOI0r17UNYqfeyDoKAEDR4QbbFjO1l0kLnEJy7Zx
-Mhj18GilYg2y0P0v8dSM/oWXS8Hua2t5i9Exlv6gHhGlQ80mwYcVGIxewZ/pPeCPw0U+kt
-EKUjt09m9Oe7+6xHQsTBj9hY8/vqPmQwRalZFcLdhHiDiVKTcAAACBANtykaPXdVzEFx7D
-UOlsjVL7zM0EVOFXf9JJQ6BhazhmsEI2PYt3IpgGMo8cXkoUofAOIYjf421AabN1BqSO5J
-XTMxM0ZV3JmLLi804Mu9h1iFrVTBdLYOMJdc2VCo1EwHWpo9SXOyjxce/znvcIOU04aZhu
-TaPg816X+E+gw5JhAAAAFGRhdmVARGF2ZVJpY2hlci1JTUVYAQIDBAUG
------END OPENSSH PRIVATE KEY-----

certs/id_rsa.pub

@@ -1 +0,0 @@
-ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC82Xl+5WYs2/vYFk3GdOpfkId/leLxTGNhpjEchNILHtuWeGlVgt2pe9w5ZfNux+NyH916fvdCJbifYVjPvmgYyFQaU5jN1YoD0j1KPT1DLVHTpGHAOJkZ3mpoyzAR5emQ2aLa7hB3aQl4N9RBSKCMLT1XzU7++ueIa1AAlJx+Ib+K12b5R+fT1ngxiTQdaOqIOiQ0SySgQ+yJtgitv5Dq9224+Rk77BT+yZeE+2DDlJPqhB2ab+BU2xGDlc3PGuKt77PUZZq2edUveE+ed+md/xbnz13KazsYYnCE96tIZM3VufRPj70Lr0J3ssEm3GK4V1GZ2UYsss9FHjxG6vvX dave@DaveRicher-IMEX

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.json

@@ -8,7 +8,7 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
+    "@ant-design/pro-layout": "^7.20.2",
     "@apollo/client": "^3.11.8",
     "@emotion/is-prop-valid": "^1.3.1",
     "@fingerprintjs/fingerprintjs": "^4.5.0",
@@ -19,7 +19,7 @@
     "@splitsoftware/splitio-react": "^1.13.0",
     "@tanem/react-nprogress": "^5.0.51",
     "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "antd": "^5.21.0",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "autosize": "^6.0.1",
@@ -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.container.jsx

@@ -2,6 +2,8 @@ import { ApolloProvider } from "@apollo/client";
 import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
+import dayjs from "../utils/day";
+import "dayjs/locale/en";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
@@ -17,6 +19,8 @@ if (import.meta.env.DEV) {
   Userpilot.initialize("NX-69145f08");
 }
 
+dayjs.locale("en");
+
 const config = {
   core: {
     authorizationKey: import.meta.env.VITE_APP_SPLIT_API,

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/accounting-payables-table/accounting-payables-table.component.jsx

@@ -9,7 +9,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { exportPageLimit } from "../../utils/config";
+import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
@@ -175,7 +175,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -8,7 +8,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
-import { exportPageLimit } from "../../utils/config";
+import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
@@ -177,7 +177,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -1,18 +1,18 @@
 import { Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { exportPageLimit } from "../../utils/config";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
-import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { DateFormatter } from "../../utils/DateFormatter";
+import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import JobMarkSelectedExported from "../jobs-mark-selected-exported/jobs-mark-selected-exported";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
@@ -201,7 +201,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: exportPageLimit }}
+        pagination={{ position: "top" }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -7,10 +7,10 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
 import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -72,14 +72,7 @@ export function BillEnterModalLinesComponent({
           <BillLineSearchSelect
             disabled={disabled}
             options={lineData}
-            style={{
+            style={{ width: "100%", minWidth: "10rem" }}
-              width: "20rem",
-              maxWidth: "20rem",
-              minWidth: "10rem",
-              whiteSpace: "normal",
-              height: "auto",
-              minHeight: "32px" // default height of Ant Design inputs
-            }}
             allowRemoved={form.getFieldValue("is_credit_memo") || false}
             onSelect={(value, opt) => {
               setFieldsValue({
@@ -112,7 +105,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.line_desc"),
         dataIndex: "line_desc",
         editable: true,
-        width: "20rem",
+
         formItemProps: (field) => {
           return {
             key: `${field.index}line_desc`,
@@ -126,7 +119,7 @@ export function BillEnterModalLinesComponent({
             ]
           };
         },
-        formInput: (record, index) => <Input.TextArea disabled={disabled} autoSize />
+        formInput: (record, index) => <Input disabled={disabled} />
       },
       {
         title: t("billlines.fields.quantity"),
@@ -228,6 +221,7 @@ export function BillEnterModalLinesComponent({
                 }}
               </Form.Item>
             )
+            //Do not need to set for promanager as it will default to Rome.
           })
       },
       {
@@ -461,6 +455,7 @@ export function BillEnterModalLinesComponent({
 
       ...InstanceRenderManager({
         rome: [],
+        promanager: [],
         imex: [
           {
             title: t("billlines.fields.federal_tax_applicable"),
@@ -474,6 +469,7 @@ export function BillEnterModalLinesComponent({
                 initialValue: InstanceRenderManager({
                   imex: true,
                   rome: false,
+                  promanager: false
                 }),
                 name: [field.name, "applicable_taxes", "federal"]
               };
@@ -500,6 +496,7 @@ export function BillEnterModalLinesComponent({
 
       ...InstanceRenderManager({
         rome: [],
+        promanager: [],
         imex: [
           {
             title: t("billlines.fields.local_tax_applicable"),

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

@@ -11,7 +11,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
       disabled={disabled}
       ref={ref}
       showSearch
-      popupMatchSelectWidth={true}
+      popupMatchSelectWidth={false}
       optionLabelProp={"name"}
       //  optionFilterProp="line_desc"
       filterOption={(inputValue, option) => {
@@ -43,7 +43,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
             item.oem_partno ? ` - ${item.oem_partno}` : ""
           }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
           label: (
-            <div style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
+            <>
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                   item.oem_partno ? ` - ${item.oem_partno}` : ""
@@ -57,7 +57,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
               <span style={{ float: "right", paddingleft: "1rem" }}>
                 {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
               </span>
-            </div>
+            </>
           )
         }))
       ]}

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,7 +1,7 @@
 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 { AutoSizer, CellMeasurer, CellMeasurerCache, List as VirtualizedList } from "react-virtualized";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
@@ -19,26 +19,19 @@ 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,
+  loadMoreConversations
+}) {
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 60
+  });
 
-  // Re-render every minute
+  const rowRenderer = ({ index, key, style, parent }) => {
-  useEffect(() => {
+    const item = conversationList[index];
-    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 cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
       item.job_conversations.length > 0
@@ -59,8 +52,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         )}
       </>
     );
-
+    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0} />;
-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
 
     const getCardStyle = () =>
       item.id === selectedConversation
@@ -68,26 +60,40 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         : { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };
 
     return (
-      <List.Item
+      <CellMeasurer key={key} cache={cache} parent={parent} columnIndex={0} rowIndex={index}>
-        key={item.id}
+        <List.Item
-        onClick={() => setSelectedConversation(item.id)}
+          onClick={() => setSelectedConversation(item.id)}
-        className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
+          style={style}
-      >
+          className={`chat-list-item
-        <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
+    ${item.id === selectedConversation ? "chat-list-selected-conversation" : null}`}
-          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
+        >
-          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
+          <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
-        </Card>
+            <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
-      </List.Item>
+            <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
+          </Card>
+        </List.Item>
+      </CellMeasurer>
     );
   };
 
   return (
     <div className="chat-list-container">
-      <Virtuoso
+      <AutoSizer>
-        data={sortedConversationList}
+        {({ height, width }) => (
-        itemContent={(index) => renderConversation(index)}
+          <VirtualizedList
-        style={{ height: "100%", width: "100%" }}
+            height={height}
-      />
+            width={width}
+            rowCount={conversationList.length}
+            rowHeight={cache.rowHeight}
+            rowRenderer={rowRenderer}
+            onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
+              if (scrollTop + clientHeight === scrollHeight) {
+                loadMoreConversations();
+              }
+            }}
+          />
+        )}
+      </AutoSizer>
     </div>
   );
 }

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

@@ -1,7 +1,7 @@
 .chat-list-container {
-  height: 100%; /* Ensure it takes up the full available height */
+  overflow: hidden;
+  height: 100%;
   border: 1px solid gainsboro;
-  overflow: auto; /* Allow scrolling for the Virtuoso component */
 }
 
 .chat-list-item {
@@ -14,24 +14,3 @@
     color: #ff7a00;
   }
 }
-
-/* Virtuoso item container adjustments */
-.chat-list-container > div {
-  height: 100%; /* Ensure Virtuoso takes full height */
-  display: flex;
-  flex-direction: column;
-}
-
-/* Add spacing and better alignment for items */
-.chat-list-item {
-  padding: 0.5rem 0; /* Add spacing between list items */
-
-  .ant-card {
-    border-radius: 8px; /* Slight rounding for card edges */
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for better definition */
-  }
-
-  &:hover .ant-card {
-    border-color: #ff7a00; /* Highlight border on hover */
-  }
-}

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,25 +1,22 @@
-import { gql, useApolloClient, useQuery, useSubscription } from "@apollo/client";
+import { useMutation, useQuery, useSubscription } from "@apollo/client";
-import axios from "axios";
+import React, { useState } from "react";
-import React, { useCallback, useContext, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext";
+import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
-import { GET_CONVERSATION_DETAILS, CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
+import { MARK_MESSAGES_AS_READ_BY_CONVERSATION } from "../../graphql/messages.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
+import axios from "axios";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
   bodyshop: selectBodyshop
 });
 
-function ChatConversationContainer({ bodyshop, selectedConversation }) {
+export default connect(mapStateToProps, null)(ChatConversationContainer);
-  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
-  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
 
-  // Fetch conversation details
+export function ChatConversationContainer({ bodyshop, selectedConversation }) {
   const {
     loading: convoLoading,
     error: convoError,
@@ -30,145 +27,55 @@ function ChatConversationContainer({ bodyshop, selectedConversation }) {
     nextFetchPolicy: "network-only"
   });
 
-  // Subscription for conversation updates
+  const { loading, error, data } = useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
-  useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
+    variables: { conversationId: selectedConversation }
-    skip: socket?.connected,
+  });
+
+  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
+
+  const [markConversationRead] = useMutation(MARK_MESSAGES_AS_READ_BY_CONVERSATION, {
     variables: { conversationId: selectedConversation },
-    onData: ({ data: subscriptionResult, client }) => {
+    refetchQueries: ["UNREAD_CONVERSATION_COUNT"],
-      // Extract the messages array from the result
+    update(cache) {
-      const messages = subscriptionResult?.data?.messages;
+      cache.modify({
-      if (!messages || messages.length === 0) {
+        id: cache.identify({
-        console.warn("No messages found in subscription result.");
+          __typename: "conversations",
-        return;
+          id: selectedConversation
-      }
+        }),
-
+        fields: {
-      messages.forEach((message) => {
+          messages_aggregate(cached) {
-        const messageRef = client.cache.identify(message);
+            return { aggregate: { count: 0 } };
-        // 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;
-            }
           }
-        });
+        }
       });
     }
   });
 
-  const updateCacheWithReadMessages = useCallback(
+  const unreadCount =
-    (conversationId, messageIds) => {
+    data &&
-      if (!conversationId || !messageIds?.length) return;
+    data.messages &&
+    data.messages.reduce((acc, val) => {
+      return !val.read && !val.isoutbound ? acc + 1 : acc;
+    }, 0);
 
-      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 (unreadCount > 0 && !!selectedConversation && !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 {
+      await markConversationRead({});
-        await axios.post("/sms/markConversationRead", {
+      await axios.post("/sms/markConversationRead", {
-          conversation,
+        conversationid: selectedConversation,
-          imexshopid: bodyshop?.imexshopid,
+        imexshopid: bodyshop.imexshopid
-          bodyshopid: bodyshop?.id
+      });
-        });
+      setMarkingAsReadInProgress(false);
-
-        updateCacheWithReadMessages(selectedConversation, unreadMessageIds);
-      } catch (error) {
-        console.error("Error marking conversation as read:", error.message);
-      } finally {
-        setMarkingAsReadInProgress(false);
-      }
     }
   };
 
   return (
     <ChatConversationComponent
-      subState={[convoLoading, convoError]}
+      subState={[loading || convoLoading, error || convoError]}
-      conversation={convoData?.conversations_by_pk || {}}
+      conversation={convoData ? convoData.conversations_by_pk : {}}
-      messages={convoData?.conversations_by_pk?.messages || []}
+      messages={data ? data.messages : []}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
     />
   );
 }
-
-export default connect(mapStateToProps)(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,87 +1,106 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import Icon from "@ant-design/icons";
-import { Virtuoso } from "react-virtuoso";
+import { Tooltip } from "antd";
-import { renderMessage } from "./renderMessage";
+import i18n from "i18next";
+import dayjs from "../../utils/day";
+import React, { useEffect, useRef } from "react";
+import { MdDone, MdDoneAll } from "react-icons/md";
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 import "./chat-message-list.styles.scss";
 
 export default function ChatMessageListComponent({ messages }) {
-  const virtuosoRef = useRef(null);
+  const virtualizedListRef = useRef(null);
-  const [atBottom, setAtBottom] = useState(true);
-  const loadedImagesRef = useRef(0);
 
-  const handleScrollStateChange = (isAtBottom) => {
+  const _cache = new CellMeasurerCache({
-    setAtBottom(isAtBottom);
+    fixedWidth: true,
+    // minHeight: 50,
+    defaultHeight: 100
+  });
+
+  const scrollToBottom = (renderedrows) => {
+    //console.log("Scrolling to", messages.length);
+    // !!virtualizedListRef.current &&
+    //   virtualizedListRef.current.scrollToRow(messages.length);
+    // Outstanding isue on virtualization: https://github.com/bvaughn/react-virtualized/issues/1179
+    //Scrolling does not work on this version of React.
   };
 
-  const resetImageLoadState = () => {
+  useEffect(scrollToBottom, [messages]);
-    loadedImagesRef.current = 0;
+
+  const _rowRenderer = ({ index, key, parent, style }) => {
+    return (
+      <CellMeasurer cache={_cache} key={key} rowIndex={index} parent={parent}>
+        {({ measure, registerChild }) => (
+          <div
+            ref={registerChild}
+            onLoad={measure}
+            style={style}
+            className={`${messages[index].isoutbound ? "mine messages" : "yours messages"}`}
+          >
+            <div className="message msgmargin">
+              {MessageRender(messages[index])}
+              {StatusRender(messages[index].status)}
+            </div>
+            {messages[index].isoutbound && (
+              <div style={{ fontSize: 10 }}>
+                {i18n.t("messaging.labels.sentby", {
+                  by: messages[index].userid,
+                  time: dayjs(messages[index].created_at).format("MM/DD/YYYY @ hh:mm a")
+                })}
+              </div>
+            )}
+          </div>
+        )}
+      </CellMeasurer>
+    );
   };
 
-  const preloadImages = useCallback((imagePaths, onComplete) => {
-    resetImageLoadState();
-
-    if (imagePaths.length === 0) {
-      onComplete();
-      return;
-    }
-
-    imagePaths.forEach((url) => {
-      const img = new Image();
-      img.src = url;
-      img.onload = img.onerror = () => {
-        loadedImagesRef.current += 1;
-        if (loadedImagesRef.current === imagePaths.length) {
-          onComplete();
-        }
-      };
-    });
-  }, []);
-
-  // Ensure all images are loaded on initial render
-  useEffect(() => {
-    const imagePaths = messages
-      .filter((message) => message.image && message.image_path?.length > 0)
-      .flatMap((message) => message.image_path);
-
-    preloadImages(imagePaths, () => {
-      if (virtuosoRef.current) {
-        virtuosoRef.current.scrollToIndex({
-          index: messages.length - 1,
-          align: "end",
-          behavior: "auto"
-        });
-      }
-    });
-  }, [messages, preloadImages]);
-
-  // Handle scrolling when new messages are added
-  useEffect(() => {
-    if (!atBottom) return;
-
-    const latestMessage = messages[messages.length - 1];
-    const imagePaths = latestMessage?.image_path || [];
-
-    preloadImages(imagePaths, () => {
-      if (virtuosoRef.current) {
-        virtuosoRef.current.scrollToIndex({
-          index: messages.length - 1,
-          align: "end",
-          behavior: "smooth"
-        });
-      }
-    });
-  }, [messages, atBottom, preloadImages]);
-
   return (
     <div className="chat">
-      <Virtuoso
+      <AutoSizer>
-        ref={virtuosoRef}
+        {({ height, width }) => (
-        data={messages}
+          <List
-        overscan={!!messages.reduce((acc, message) => acc + (message.image_path?.length || 0), 0) ? messages.length : 0}
+            ref={virtualizedListRef}
-        itemContent={(index) => renderMessage(messages, index)}
+            width={width}
-        followOutput={(isAtBottom) => handleScrollStateChange(isAtBottom)}
+            height={height}
-        initialTopMostItemIndex={messages.length - 1}
+            rowHeight={_cache.rowHeight}
-        style={{ height: "100%", width: "100%" }}
+            rowRenderer={_rowRenderer}
-      />
+            rowCount={messages.length}
+            overscanRowCount={10}
+            estimatedRowSize={150}
+            scrollToIndex={messages.length}
+          />
+        )}
+      </AutoSizer>
     </div>
   );
 }
+
+const MessageRender = (message) => {
+  return (
+    <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
+      <div>
+        {message.image_path &&
+          message.image_path.map((i, idx) => (
+            <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
+              <a href={i} target="__blank">
+                <img alt="Received" className="message-img" src={i} />
+              </a>
+            </div>
+          ))}
+        <div>{message.text}</div>
+      </div>
+    </Tooltip>
+  );
+};
+
+const StatusRender = (status) => {
+  switch (status) {
+    case "sent":
+      return <Icon component={MdDone} className="message-icon" />;
+    case "delivered":
+      return <Icon component={MdDoneAll} className="message-icon" />;
+    default:
+      return null;
+  }
+};

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

@@ -1,131 +1,119 @@
+.message-icon {
+  //position: absolute;
+  // bottom: 0rem;
+  color: whitesmoke;
+  border: #000000;
+  position: absolute;
+  margin: 0 0.1rem;
+  bottom: 0.1rem;
+  right: 0.3rem;
+
+  z-index: 5;
+}
+
 .chat {
+  flex: 1;
+  //width: 300px;
+  //border: solid 1px #eee;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  margin: 0.8rem 0rem;
-  width: 100%;
-}
-.archive-button {
-  height: 20px;
-  border-radius: 4px;
-}
-.chat-title {
-  margin-bottom: 5px;
 }
+
 .messages {
+  //margin-top: 30px;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem; // Prevent edge clipping
 }
 
 .message {
-  position: relative;
   border-radius: 20px;
   padding: 0.25rem 0.8rem;
-  word-wrap: break-word;
+  //margin-top: 5px;
+  // margin-bottom: 5px;
+  //display: inline-block;
 
-  &-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: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: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%);
+  background-attachment: fixed;
+  position: relative;
+  padding-bottom: 0.6rem;
+}
+
+.mine .message.last:before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  right: -8px;
+  height: 20px;
+  width: 20px;
+  background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  background-attachment: fixed;
+  border-bottom-left-radius: 15px;
+}
+
+.mine .message.last: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,7 +1,7 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useApolloClient, useLazyQuery, useQuery } from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,102 +13,61 @@ import ChatConversationContainer from "../chat-conversation/chat-conversation.co
 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";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
   chatVisible: selectChatVisible
 });
-
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible())
 });
 
 export function ChatPopupComponent({ chatVisible, selectedConversation, toggleChatVisible }) {
   const { t } = useTranslation();
-  const [pollInterval, setPollInterval] = useState(0);
+  const [pollInterval, setpollInterval] = useState(0);
-  const { socket } = useContext(SocketContext);
-  const client = useApolloClient(); // Apollo Client instance for cache operations
 
-  // Lazy query for conversations
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
-  const [getConversations, { loading, data, refetch }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    ...(pollInterval > 0 ? { pollInterval } : {})
+  });
+
+  const [getConversations, { loading, data, refetch, fetchMore }] = 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 fcmToken = sessionStorage.getItem("fcmtoken");
-  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 (fcmToken) {
-      if (socket?.connected) {
+      setpollInterval(0);
-        setPollInterval(15 * 60 * 1000); // 15 minutes
+    } else {
-      } else {
+      setpollInterval(60000);
-        setPollInterval(60 * 1000); // 60 seconds
-      }
-    };
-
-    handleSocketStatus();
-
-    if (socket) {
-      socket.on("connect", handleSocketStatus);
-      socket.on("disconnect", handleSocketStatus);
     }
+  }, [fcmToken]);
 
-    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 loadMoreConversations = useCallback(() => {
-  const unreadCount = (() => {
+    if (data)
-    if (chatVisible) {
+      fetchMore({
-      try {
+        variables: {
-        const cachedData = client.readQuery({
+          offset: data.conversations.length
-          query: CONVERSATION_LIST_QUERY,
+        }
-          variables: { offset: 0 }
+      });
-        });
+  }, [data, fetchMore]);
 
-        if (!cachedData?.conversations) return 0;
+  const unreadCount = unreadData?.messages_aggregate.aggregate.count || 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}>
@@ -122,7 +81,7 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
                 <InfoCircleOutlined />
               </Tooltip>
               <SyncOutlined style={{ cursor: "pointer" }} onClick={() => refetch()} />
-              {!socket?.connected && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
+              {pollInterval > 0 && <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>}
             </Space>
             <ShrinkOutlined
               onClick={() => toggleChatVisible()}
@@ -134,7 +93,10 @@ export function ChatPopupComponent({ chatVisible, selectedConversation, toggleCh
                 {loading ? (
                   <LoadingSpinner />
                 ) : (
-                  <ChatConversationListComponent conversationList={data ? data.conversations : []} />
+                  <ChatConversationListComponent
+                    conversationList={data ? data.conversations : []}
+                    loadMoreConversations={loadMoreConversations}
+                  />
                 )}
               </Col>
               <Col span={16}>{selectedConversation ? <ChatConversationContainer /> : null}</Col>

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

@@ -25,7 +25,6 @@ const mapDispatchToProps = (dispatch) => ({
 function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSending, message, setMessage }) {
   const inputArea = useRef(null);
   const [selectedMedia, setSelectedMedia] = useState([]);
-
   useEffect(() => {
     inputArea.current.focus();
   }, [isSending, setMessage]);
@@ -38,15 +37,14 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
     logImEXEvent("messaging_send_message");
 
     if (selectedImages.length < 11) {
-      const newMessage = {
+      sendMessage({
         to: conversation.phone_num,
         body: message || "",
         messagingServiceSid: bodyshop.messagingservicesid,
         conversationid: conversation.id,
         selectedMedia: selectedImages,
         imexshopid: bodyshop.imexshopid
-      };
+      });
-      sendMessage(newMessage);
       setSelectedMedia(
         selectedMedia.map((i) => {
           return { ...i, isSelected: false };
@@ -81,7 +79,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
         />
       </span>
       <SendOutlined
-        className="chat-send-message-button"
+        className="imex-flex-row__margin"
         //  disabled={message === "" || !message}
         onClick={handleEnter}
       />

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/contract-form/contract-form.component.jsx

@@ -1,17 +1,15 @@
 import { WarningFilled } from "@ant-design/icons";
 import { Form, Input, InputNumber, Space } from "antd";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
-import dayjs from "../../utils/day";
 //import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 import ContractsRatesChangeButton from "../contracts-rates-change-button/contracts-rates-change-button.component";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
-import {
+import FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
-  default as DateTimePicker,
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
-  default as FormDateTimePicker
-} from "../form-date-time-picker/form-date-time-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -20,10 +18,10 @@ import ContractFormJobPrefill from "./contract-form-job-prefill.component";
 export default function ContractFormComponent({ form, create = false, selectedJobState, selectedCar }) {
   const { t } = useTranslation();
   return (
-    <>
+    <div>
-      {!create && <FormFieldsChanged form={form} />}
+      <FormFieldsChanged form={form} />
       <LayoutFormRow>
-        {!create && (
+        {create ? null : (
           <Form.Item
             label={t("contracts.fields.status")}
             name="status"
@@ -52,7 +50,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         <Form.Item label={t("contracts.fields.scheduledreturn")} name="scheduledreturn">
           <FormDateTimePicker />
         </Form.Item>
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
             <FormDateTimePicker />
           </Form.Item>
@@ -124,7 +122,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
             }}
           </Form.Item>
         )}
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.kmend")} name="kmend">
             <InputNumber />
           </Form.Item>
@@ -147,21 +145,25 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         >
           <CourtesyCarFuelSlider />
         </Form.Item>
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.fuelin")} name="fuelin" span={8}>
             <CourtesyCarFuelSlider />
           </Form.Item>
         )}
       </LayoutFormRow>
-      <LayoutFormRow header={t("contracts.labels.driverinformation")}>
+      <div>
         <Space wrap>
-          {create && selectedJobState && (
+          {selectedJobState && (
-            <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+            <div>
+              <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+            </div>
           )}
-          {/* {<ContractLicenseDecodeButton form={form} />} */}
+          {
+            //<ContractLicenseDecodeButton form={form} />
+          }
         </Space>
-      </LayoutFormRow>
+      </div>
-      <LayoutFormRow noDivider={true}>
+      <LayoutFormRow header={t("contracts.labels.driverinformation")}>
         <Form.Item
           label={t("contracts.fields.driver_dlnumber")}
           name="driver_dlnumber"
@@ -181,8 +183,9 @@ export default function ContractFormComponent({ form, create = false, selectedJo
             const dlExpiresBeforeReturn = dayjs(form.getFieldValue("driver_dlexpiry")).isBefore(
               dayjs(form.getFieldValue("scheduledreturn"))
             );
+
             return (
-              <>
+              <div>
                 <Form.Item
                   label={t("contracts.fields.driver_dlexpiry")}
                   name="driver_dlexpiry"
@@ -201,10 +204,11 @@ export default function ContractFormComponent({ form, create = false, selectedJo
                     <span>{t("contracts.labels.dlexpirebeforereturn")}</span>
                   </Space>
                 )}
-              </>
+              </div>
             );
           }}
         </Form.Item>
+
         <Form.Item label={t("contracts.fields.driver_dlst")} name="driver_dlst">
           <Input />
         </Form.Item>
@@ -311,6 +315,6 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-    </>
+    </div>
   );
 }

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

@@ -1,10 +1,10 @@
 import { Card, Table, Tag } from "antd";
-import axios from "axios";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import dayjs from "../../../utils/day";
 import LoadingSkeleton from "../../loading-skeleton/loading-skeleton.component";
+import { useTranslation } from "react-i18next";
+import React, { useEffect, useState } from "react";
+import dayjs from "../../../utils/day";
 import DashboardRefreshRequired from "../refresh-required.component";
+import axios from "axios";
 
 const fortyFiveDaysAgo = () => dayjs().subtract(45, "day").toLocaleString();
 
@@ -46,11 +46,6 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
       dataIndex: "humanReadable",
       key: "humanReadable"
     },
-    {
-      title: t("job_lifecycle.columns.average_human_readable"),
-      dataIndex: "averageHumanReadable",
-      key: "averageHumanReadable"
-    },
     {
       title: t("job_lifecycle.columns.status_count"),
       key: "statusCount",

client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

@@ -1,62 +1,66 @@
 import { SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Form, Input, Table } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { pageLimit } from "../../utils/config";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx"; // Import SocketContext
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
+export default connect(mapStateToProps)(DmsAllocationsSummaryAp);
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
 
-export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummaryAp);
+export function DmsAllocationsSummaryAp({ bodyshop, billids, title }) {
-
-export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
+  const { socket } = useContext(SocketContext);
 
   useEffect(() => {
-    socket.on("ap-export-success", (billid) => {
+    if (!socket || !socket.connected) return;
+
+    const handleSuccess = async (billid) => {
       setAllocationsSummary((allocationsSummary) =>
         allocationsSummary.map((a) => {
           if (a.billid !== billid) return a;
           return { ...a, status: "Successful" };
         })
       );
-    });
-    socket.on("ap-export-failure", ({ billid, error }) => {
-      allocationsSummary.map((a) => {
-        if (a.billid !== billid) return a;
-        return { ...a, status: error };
-      });
-    });
 
-    if (socket.disconnected) socket.connect();
+      try {
-    return () => {
+        await new Promise((resolve, reject) => {
-      socket.removeListener("ap-export-success");
+          socket.emit("clear-dms-session", (response) => {
-      socket.removeListener("ap-export-failure");
+            if (response && response.status === "ok") {
-      //socket.disconnect();
+              resolve();
+            } else {
+              reject(new Error("Failed to clear DMS session"));
+            }
+          });
+        });
+      } catch (error) {
+        console.error("Failed to clear DMS session", error);
+      }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
-  }, []);
+    socket.on("ap-export-success", handleSuccess);
+
+    return () => {
+      socket.off("ap-export-success", handleSuccess);
+    };
+  }, [socket]);
 
   useEffect(() => {
-    if (socket.connected) {
+    if (socket && socket.connected) {
       socket.emit("pbs-calculate-allocations-ap", billids, (ack) => {
         setAllocationsSummary(ack);
-
         socket.allocationsSummary = ack;
       });
     }
   }, [socket, socket.connected, billids]);
-  console.log(allocationsSummary);
+
   const columns = [
     {
       title: t("general.labels.status"),
@@ -68,35 +72,40 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       dataIndex: ["Posting", "Reference"],
       key: "reference"
     },
-
     {
       title: t("jobs.fields.dms.lines"),
       dataIndex: "Lines",
       key: "Lines",
       render: (text, record) => (
         <table style={{ tableLayout: "auto", width: "100%" }}>
-          <tr>
+          <thead>
-            <th>{t("bills.fields.invoice_number")}</th>
+            <tr>
-            <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
+              <th>{t("bills.fields.invoice_number")}</th>
-            <th>{t("jobs.fields.dms.amount")}</th>
+              <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
-          </tr>
+              <th>{t("jobs.fields.dms.amount")}</th>
-          {record.Posting.Lines.map((l, idx) => (
-            <tr key={idx}>
-              <td>{l.InvoiceNumber}</td>
-              <td>{l.Account}</td>
-              <td>{l.Amount}</td>
             </tr>
-          ))}
+          </thead>
+          <tbody>
+            {record.Posting.Lines.map((l, idx) => (
+              <tr key={idx}>
+                <td>{l.InvoiceNumber}</td>
+                <td>{l.Account}</td>
+                <td>{l.Amount}</td>
+              </tr>
+            ))}
+          </tbody>
         </table>
       )
     }
   ];
 
   const handleFinish = async (values) => {
-    socket.emit(`pbs-export-ap`, {
+    if (socket) {
-      billids,
+      socket.emit("pbs-export-ap", {
-      txEnvelope: values
+        billids,
-    });
+        txEnvelope: values
+      });
+    }
   };
 
   return (
@@ -105,7 +114,9 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       extra={
         <Button
           onClick={() => {
-            socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
+            if (socket) {
+              socket.emit("pbs-calculate-allocations-ap", billids, (ack) => setAllocationsSummary(ack));
+            }
           }}
         >
           <SyncOutlined />
@@ -124,12 +135,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
           name="journal"
           label={t("jobs.fields.dms.journal")}
           initialValue={bodyshop.cdk_configuration && bodyshop.cdk_configuration.default_journal}
-          rules={[
+          rules={[{ required: true }]}
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
         >
           <Input />
         </Form.Item>

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -24,7 +24,7 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
   const [allocationsSummary, setAllocationsSummary] = useState([]);
 
   useEffect(() => {
-    if (socket.connected) {
+    if (socket && socket.connected) {
       socket.emit("cdk-calculate-allocations", jobId, (ack) => {
         setAllocationsSummary(ack);
         socket.allocationsSummary = ack;

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

@@ -1,37 +1,51 @@
 import { Button, Checkbox, Col, Table } from "antd";
-import React, { useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { socket } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { alphaSort } from "../../utils/sorters";
+import SocketContext from "../../contexts/SocketIO/socketContext"; // Import Socket Context
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => ({});
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+
-});
 export default connect(mapStateToProps, mapDispatchToProps)(DmsCustomerSelector);
 
 export function DmsCustomerSelector({ bodyshop }) {
   const { t } = useTranslation();
-  const [customerList, setcustomerList] = useState([]);
+  const { socket } = useContext(SocketContext); // Use Socket Context
+  const [customerList, setCustomerList] = useState([]);
   const [open, setOpen] = useState(false);
   const [selectedCustomer, setSelectedCustomer] = useState(null);
   const [dmsType, setDmsType] = useState("cdk");
 
-  socket.on("cdk-select-customer", (customerList, callback) => {
+  useEffect(() => {
-    setOpen(true);
+    if (socket) {
-    setDmsType("cdk");
+      const handleCdkSelectCustomer = (customerList) => {
-    setcustomerList(customerList);
+        setOpen(true);
-  });
+        setDmsType("cdk");
-  socket.on("pbs-select-customer", (customerList, callback) => {
+        setCustomerList(customerList);
-    setOpen(true);
+      };
-    setDmsType("pbs");
+
-    setcustomerList(customerList);
+      const handlePbsSelectCustomer = (customerList) => {
-  });
+        setOpen(true);
+        setDmsType("pbs");
+        setCustomerList(customerList);
+      };
+
+      socket.on("cdk-select-customer", handleCdkSelectCustomer);
+      socket.on("pbs-select-customer", handlePbsSelectCustomer);
+
+      // Clean up listeners on unmount
+      return () => {
+        socket.off("cdk-select-customer", handleCdkSelectCustomer);
+        socket.off("pbs-select-customer", handlePbsSelectCustomer);
+      };
+    }
+  }, [socket]);
 
   const onUseSelected = () => {
     setOpen(false);
@@ -69,17 +83,11 @@ export function DmsCustomerSelector({ bodyshop }) {
       key: "name1",
       sorter: (a, b) => alphaSort(a.name1 && a.name1.fullName, b.name1 && b.name1.fullName)
     },
-
     {
       title: t("jobs.fields.dms.address"),
-      //dataIndex: ["name2", "fullName"],
       key: "address",
-      render: (record, value) =>
+      render: (record) =>
-        `${
+        `${record.address?.addressLine?.[0]}, ${record.address?.city} ${record.address?.stateOrProvince} ${record.address?.postalCode}`
-          record.address && record.address.addressLine && record.address.addressLine[0]
-        }, ${record.address && record.address.city} ${
-          record.address && record.address.stateOrProvince
-        } ${record.address && record.address.postalCode}`
     }
   ];
 
@@ -95,15 +103,15 @@ export function DmsCustomerSelector({ bodyshop }) {
       sorter: (a, b) => alphaSort(a.LastName, b.LastName),
       render: (text, record) => `${record.FirstName || ""} ${record.LastName || ""}`
     },
-
     {
       title: t("jobs.fields.dms.address"),
       key: "address",
-      render: (record, value) => `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`
+      render: (record) => `${record.Address}, ${record.City} ${record.State} ${record.ZipCode}`
     }
   ];
 
   if (!open) return null;
+
   return (
     <Col span={24}>
       <Table
@@ -125,7 +133,6 @@ export function DmsCustomerSelector({ bodyshop }) {
         columns={dmsType === "cdk" ? cdkColumns : pbsColumns}
         rowKey={(record) => (dmsType === "cdk" ? record.id.value : record.ContactId)}
         dataSource={customerList}
-        //onChange={handleTableChange}
         rowSelection={{
           onSelect: (record) => {
             setSelectedCustomer(dmsType === "cdk" ? record.id.value : record.ContactId);

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

@@ -4,11 +4,8 @@ import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 
-const mapStateToProps = createStructuredSelector({
+const mapStateToProps = createStructuredSelector({});
-  bodyshop: selectBodyshop
-});
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -17,7 +14,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export default connect(mapStateToProps, mapDispatchToProps)(DmsLogEvents);
 
-export function DmsLogEvents({ socket, logs, bodyshop }) {
+export function DmsLogEvents({ logs }) {
   return (
     <Timeline
       pending
@@ -40,11 +37,13 @@ export function DmsLogEvents({ socket, logs, bodyshop }) {
 
 function LogLevelHierarchy(level) {
   switch (level) {
+    case "TRACE":
+      return "pink";
     case "DEBUG":
       return "orange";
     case "INFO":
       return "blue";
-    case "WARN":
+    case "WARNING":
       return "yellow";
     case "ERROR":
       return "red";

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/eula/eula.component.jsx

@@ -8,7 +8,7 @@ import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries";
 import { useMutation } from "@apollo/client";
 import { acceptEula } from "../../redux/user/user.actions";
 import { useTranslation } from "react-i18next";
-import dayjs from "../../utils/day";
+import day from "../../utils/day";
 
 import "./eula.styles.scss";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
@@ -208,7 +208,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
               {
                 required: true,
                 validator: (_, value) => {
-                  if (dayjs(value).isSame(dayjs(), "day")) {
+                  if (day(value).isSame(day(), "day")) {
                     return Promise.resolve();
                   }
                   return Promise.reject(new Error(t("eula.messages.date_accepted")));

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/form-date-time-picker/form-date-time-picker.component.jsx

@@ -1,40 +1,22 @@
-import { DatePicker, Space, TimePicker } from "antd";
+import { DatePicker } from "antd";
 import PropTypes from "prop-types";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import dayjs from "../../utils/day";
 import { fuzzyMatchDate } from "./formats.js";
 
-const mapStateToProps = createStructuredSelector({
+const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, onlyToday, isDateOnly = false, ...restProps }) => {
-  bodyshop: selectBodyshop
-});
-
-const DateTimePicker = ({
-  value,
-  onChange,
-  onBlur,
-  id,
-  onlyFuture,
-  onlyToday,
-  isDateOnly = false,
-  isSeparatedTime = false,
-  bodyshop,
-  ...restProps
-}) => {
   const [isManualInput, setIsManualInput] = useState(false);
   const { t } = useTranslation();
 
   const handleChange = useCallback(
     (newDate) => {
       if (onChange) {
-        onChange(bodyshop?.timezone && newDate ? dayjs(newDate).tz(bodyshop.timezone, true) : newDate);
+        onChange(newDate || null);
       }
       setIsManualInput(false);
     },
-    [onChange, bodyshop?.timezone]
+    [onChange]
   );
 
   const handleBlur = useCallback(
@@ -88,57 +70,24 @@ const DateTimePicker = ({
 
   return (
     <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
-      {isSeparatedTime && (
+      <DatePicker
-        <Space direction="vertical" style={{ width: "100%" }}>
+        showTime={
-          <DatePicker
+          isDateOnly
-            showTime={false}
+            ? false
-            format="MM/DD/YYYY"
+            : {
-            value={value ? dayjs(value) : null}
+                format: "hh:mm a",
-            onChange={handleChange}
+                minuteStep: 15,
-            placeholder={t("general.labels.date")}
+                defaultValue: dayjs(dayjs(), "HH:mm:ss")
-            onBlur={handleBlur}
+              }
-            disabledDate={handleDisabledDate}
+        }
-            isDateOnly={true}
+        format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
-            {...restProps}
+        value={value ? dayjs(value) : null}
-          />
+        onChange={handleChange}
-          {value && (
+        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
-            <TimePicker
+        onBlur={onBlur || handleBlur}
-              format="hh:mm a"
+        disabledDate={handleDisabledDate}
-              minuteStep={15}
+        {...restProps}
-              defaultOpenValue={dayjs(value)
+      />
-                .hour(dayjs().hour())
-                .minute(Math.floor(dayjs().minute() / 15) * 15)
-                .second(0)}
-              onChange={(value) => {
-                handleChange(value);
-                onBlur();
-              }}
-              placeholder={t("general.labels.time")}
-              {...restProps}
-            />
-          )}
-        </Space>
-      )}
-      {!isSeparatedTime && (
-        <DatePicker
-          showTime={
-            isDateOnly
-              ? false
-              : {
-                  format: "hh:mm a",
-                  minuteStep: 15,
-                  defaultValue: dayjs(dayjs(), "HH:mm:ss")
-                }
-          }
-          format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
-          value={value ? dayjs(value) : null}
-          onChange={handleChange}
-          placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
-          onBlur={onBlur || handleBlur}
-          disabledDate={handleDisabledDate}
-          {...restProps}
-        />
-      )}
     </div>
   );
 };
@@ -150,8 +99,7 @@ DateTimePicker.propTypes = {
   id: PropTypes.string,
   onlyFuture: PropTypes.bool,
   onlyToday: PropTypes.bool,
-  isDateOnly: PropTypes.bool,
+  isDateOnly: PropTypes.bool
-  isSeparatedTime: PropTypes.bool
 };
 
-export default connect(mapStateToProps, null)(DateTimePicker);
+export default React.memo(DateTimePicker);

client/src/components/global-search/global-search-os.component.jsx

@@ -3,15 +3,13 @@ import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
 
 export default function GlobalSearchOs() {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(false);
 
@@ -179,18 +177,7 @@ export default function GlobalSearchOs() {
   };
 
   return (
-    <AutoComplete
+    <AutoComplete options={data} onSearch={handleSearch} defaultActiveFirstOption onClear={() => setData([])}>
-      options={data}
-      onSearch={handleSearch}
-      onKeyDown={(e) => {
-        if (e.key !== "Enter") return;
-        const firstUrlForSearch = data?.[0]?.options?.[0]?.label?.props?.to;
-        if (!firstUrlForSearch) return;
-        navigate(firstUrlForSearch);
-      }}
-      defaultActiveFirstOption
-      onClear={() => setData([])}
-    >
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

client/src/components/global-search/global-search.component.jsx

@@ -3,7 +3,7 @@ import { AutoComplete, Divider, Input, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
@@ -13,7 +13,6 @@ import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.compon
 export default function GlobalSearch() {
   const { t } = useTranslation();
   const [callSearch, { loading, error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
-  const navigate = useNavigate();
 
   const executeSearch = (v) => {
     if (v && v.variables.search && v.variables.search !== "" && v.variables.search.length >= 3) callSearch(v);
@@ -21,6 +20,7 @@ export default function GlobalSearch() {
   const debouncedExecuteSearch = _.debounce(executeSearch, 750);
 
   const handleSearch = (value) => {
+    console.log("Handle Search");
     debouncedExecuteSearch({ variables: { search: value } });
   };
 
@@ -156,17 +156,7 @@ export default function GlobalSearch() {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <AutoComplete
+    <AutoComplete options={options} onSearch={handleSearch} defaultActiveFirstOption>
-      options={options}
-      onSearch={handleSearch}
-      defaultActiveFirstOption
-      onKeyDown={(e) => {
-        if (e.key !== "Enter") return;
-        const firstUrlForSearch = options?.[0]?.options?.[0]?.label?.props?.to;
-        if (!firstUrlForSearch) return;
-        navigate(firstUrlForSearch);
-      }}
-    >
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}

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,
@@ -116,51 +116,49 @@ function Header({
 
   const { t } = useTranslation();
 
-  // const deleteBetaCookie = () => {
+  const deleteBetaCookie = () => {
-  //   const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
+    const cookieExists = document.cookie.split("; ").some((row) => row.startsWith(`betaSwitchImex=`));
-  //   if (cookieExists) {
+    if (cookieExists) {
-  //     const domain = window.location.hostname.split(".").slice(-2).join(".");
+      const domain = window.location.hostname.split(".").slice(-2).join(".");
-  //     document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
+      document.cookie = `betaSwitchImex=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.${domain}`;
-  //   }
+      console.log(`betaSwitchImex cookie deleted`);
-  // };
+    } else {
-  //
+      console.log(`betaSwitchImex cookie does not exist`);
-  // deleteBetaCookie();
+    }
+  };
+
+  deleteBetaCookie();
 
   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 +173,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 +220,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 +262,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 +282,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 +290,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 +301,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 +388,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 +442,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 +494,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 +553,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 +573,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 +610,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 +620,8 @@ function Header({
         },
         ...(InstanceRenderManager({
           imex: true,
-          rome: false
+          rome: false,
+          promanager: false
         })
           ? [
               {
@@ -676,19 +635,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";
@@ -23,8 +23,6 @@ import ScheduleEventColor from "./schedule-event.color.component";
 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 +48,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
@@ -131,9 +127,6 @@ export function ScheduleEventComponent({
             {(event.job && event.job.alt_transport) || ""}
             <ScheduleAtChange job={event && event.job} />
           </DataLabel>
-          <DataLabel label={t("jobs.fields.comment")} valueStyle={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-            <ProductionListColumnComment record={event && event.job} />
-          </DataLabel>
           <ScheduleEventNote event={event} />
         </div>
       ) : (
@@ -193,8 +186,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", {
@@ -324,7 +316,6 @@ export function ScheduleEventComponent({
       })`}
 
       {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
-      {event?.job?.comment && `C: ${event.job.comment}`}
     </Space>
   ) : (
     <div

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")}