IO-2824 Dev Server Instance Switch

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

.circleci/config.yml

@@ -5,7 +5,6 @@ orbs:
   aws-s3: circleci/aws-s3@4.0.0
   aws-cli: circleci/aws-cli@4.0
   eb: circleci/aws-elastic-beanstalk@2.0.1
-  jira: circleci/jira@2.1.0
 jobs:
   imex-api-deploy:
     docker:
@@ -19,12 +18,6 @@ jobs:
             eb status --verbose
             eb deploy
             eb status
-      - jira/notify:
-          environment: Production (ImEX) - API
-          environment_type: production
-          job_type: deployment
-          pipeline_id: << pipeline.id >>
-          pipeline_number: << pipeline.number >>
 
   imex-hasura-migrate:
     docker:
@@ -40,16 +33,11 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            npm install hasura-cli -g
             hasura migrate apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
-      - jira/notify:
-          environment: Production (ImEX) - Hasura
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
   imex-app-build:
     docker:
       - image: cimg/node:18.18.2
@@ -74,7 +62,6 @@ jobs:
           to: "s3://imex-online-production/"
           arguments: "--exclude '*.map'"
 
-
   imex-app-beta-build:
     docker:
       - image: cimg/node:18.18.2
@@ -99,12 +86,6 @@ jobs:
           from: dist
           to: "s3://imex-online-beta/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Production (ImEX) - Front End
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   rome-api-deploy:
     docker:
@@ -118,12 +99,7 @@ jobs:
             eb status --verbose
             eb deploy
             eb status
-      - jira/notify:
-          environment: Production (Rome) - API
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
   rome-hasura-migrate:
     docker:
       - image: cimg/node:18.18.2
@@ -138,16 +114,11 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            npm install hasura-cli -g
             hasura migrate apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
-      - jira/notify:
-          environment: Production (Rome) - Hasura
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
   rome-app-build:
     docker:
       - image: cimg/node:18.18.2
@@ -172,12 +143,6 @@ jobs:
           from: dist
           to: "s3://rome-online-production/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Production (Rome) - Front End
-          environment_type: production
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   promanager-app-build:
     docker:
@@ -203,12 +168,6 @@ jobs:
           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:
@@ -224,18 +183,10 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            npm install hasura-cli -g
             hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-            sleep 5
             hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-            sleep 10
             hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
-      - jira/notify:
-          environment: Test (Rome) - Hasura
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   test-rome-app-build:
     docker:
@@ -261,12 +212,6 @@ jobs:
           from: dist
           to: "s3://rome-online-test/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Test (Rome) - Front End
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   test-promanager-app-build:
     docker:
@@ -292,12 +237,6 @@ jobs:
           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:
@@ -313,18 +252,10 @@ jobs:
       - run:
           name: Execute migration
           command: |
-            curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
+            npm install hasura-cli -g
             hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
-            sleep 15
             hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
-            sleep 30
             hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
-      - jira/notify:
-          environment: Test (ImEX) - Hasura
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
 
   imex-test-app-build:
     docker:
@@ -371,12 +302,7 @@ jobs:
           from: dist
           to: "s3://imex-online-test-beta/"
           arguments: "--exclude '*.map'"
-      - jira/notify:
-          environment: Test (ImEX) - Front End
-          environment_type: testing
-          pipeline_id: << pipeline.id >>
-          job_type: deployment
-          pipeline_number: << pipeline.number >>
+
 
   admin-app-build:
     docker:
@@ -427,7 +353,7 @@ workflows:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
-              only: master-AIO
+              only: master
       - rome-api-deploy:
           filters:
             branches:
@@ -437,7 +363,7 @@ workflows:
             branches:
               only: master-AIO
       - rome-hasura-migrate:
-          secret: ${HASURA_ROME_PROD_SECRET}
+          secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
               only: master-AIO

.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 +0,0 @@
-* text eol=lf

.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/nginx/conf.d/proxy.conf

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

.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,35 +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"
   ]
 }

Dockerfile

@@ -1,47 +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 \
-    python3-pip \
-    && dnf clean all
-
-# 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"]

README.MD

@@ -2,7 +2,7 @@ NGROK TEsting:
 ./ngrok.exe http http://localhost:4000 -host-header="localhost:4000"
 
 Finding deadfiles - run from client directory
-npx deadfile ./src/index.jsx --exclude build templates
+npx deadfile ./src/index.js --exclude build templates
 
 #Crushing all hasura migrations by creating a new initialization from the server.
 hasura migrate create "Init" --from-server --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
@@ -11,4 +11,4 @@ Production-ImEXOnline!@#'
 hasura migrate status --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
 
 Generate the license file:
-$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite
+$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite

_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/Documents/productionBoardNotes.md

@@ -1,41 +0,0 @@
-# Production Board Notes:
-
-## General Notes
-
-- You can single click the lane footer to collapse/un-collapse the lane
-- You can double click the lane header to collapse/un-collapse the lane
-- If you need to scroll horizontally, you can hold shift and use the mouse scroll wheel, or press the mouse scroll wheel while scrolling
-
-## Board Settings
-
-#### Layout
-
-- Board Orientation (Vertical or Horizontal) 
-  - This determines the orientation of the card layout on the board.
-  - Horizontal is the default setting, and how the prior board was set up.
-  - Vertical is the new setting and allows lanes to be displayed vertically, with a grid of cards
-- Card Size (Small, Medium, Large)
-  - This determines the size of the cards on the board.
-  - Small is the default setting, and how the prior board was set up.
-  - Medium and Large are new settings and allow for larger cards to be displayed on the board.
-- Compact Cards (Tall or Wide)
-   - Formally called 'Compact'
-   - When on, data is displayed on the card vertically
-   - when turned off, some fields may share horizontal space, tightening the card layout
-- Colored Cards (On or Off)
-  - When on, cards are colored based on the Status color
-- Kiosk Mode (On or Off)
-   - This should be turned on if the shop is using it on a tablet (Ipad)
-
-#### Information
-
-These allow users to turn fields on or off, turning them all off will show the card in the most minimal form
-
-
-### Statistics
-
-- The statistics section allows users to see accumulations of both jobs on the board, and jobs in production.
-- you can click a statistic to turn it on and off, and drag and drop the statistics to rearrange them
-
-### Filters
-- Allows you to set, and persist filters for estimators and insurance companies

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

_reference/prHelper/index.html

@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>IMEX IO Extractor</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      padding: 20px;
-    }
-    textarea {
-      width: 100%;
-      height: 200px;
-    }
-    .output-box {
-      margin-top: 20px;
-      padding: 10px;
-      border: 1px solid #ccc;
-      background-color: #f9f9f9;
-      min-height: 40px;
-    }
-    .copy-button {
-      margin-top: 10px;
-    }
-  </style>
-</head>
-<body>
-<h1>IMEX IO Extractor</h1>
-<textarea id="inputText" placeholder="Paste your text here..."></textarea>
-<br>
-<button onclick="extractIO()">Extract</button>
-
-<div class="output-box" id="outputBox" contenteditable="true"></div>
-<button class="copy-button" onclick="copyToClipboard()">Copy to Clipboard</button>
-
-<script>
-  function extractIO() {
-    const inputText = document.getElementById('inputText').value;
-    const ioNumbers = [...new Set(inputText.match(/IO-\d{4}/g))] // Extract unique IO-#### matches
-      .map(io => ({ io, num: parseInt(io.split('-')[1]) }))    // Extract number part for sorting
-      .sort((a, b) => a.num - b.num)                           // Sort by the number
-      .map(item => item.io);                                   // Extract sorted IO-####
-
-    document.getElementById('outputBox').innerText = ioNumbers.join(', '); // Display horizontally
-  }
-
-  function copyToClipboard() {
-    const outputBox = document.getElementById('outputBox');
-    const range = document.createRange();
-    range.selectNodeContents(outputBox);
-    const selection = window.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(range);
-    document.execCommand('copy');
-  }
-</script>
-</body>
-</html>

_reference/test api setup.md

@@ -4,7 +4,7 @@ Clone Repository for:
 {
   "name": "node-webhook-scripts",
   "version": "1.0.0",
-  "main": "index.jsx",
+  "main": "index.js",
   "dependencies": {
     "express": "^4.16.4"
   },

_reference/test-ecoystem.config.js

@@ -11,7 +11,7 @@ module.exports = {
 
     {
       name: "Bitbucket Webhook",
-      script: "./webhook/index.jsx",
+      script: "./webhook/index.js",
       env: {
         NODE_ENV: "production"
       }

certs/cert.pem

@@ -1,20 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIDWzCCAkOgAwIBAgIUD/QBSAXy/AlJ/cS4DaPWJLpChxgwDQYJKoZIhvcNAQEL
-BQAwPTELMAkGA1UEBhMCQ0ExCzAJBgNVBAgMAk9OMSEwHwYDVQQKDBhJbnRlcm5l
-dCBXaWRnaXRzIFB0eSBMdGQwHhcNMjQwOTA5MTU0MjA1WhcNMjUwOTA5MTU0MjA1
-WjA9MQswCQYDVQQGEwJDQTELMAkGA1UECAwCT04xITAfBgNVBAoMGEludGVybmV0
-IFdpZGdpdHMgUHR5IEx0ZDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB
-AKSd0l7NJCNBwvtPU+dVPQkteg0AfC3sGqRnZMQteCRVa2oIgC4NoF3A9BK/yHbF
-ZF25OnXTck5vzc8yb3v73ndfTD9ASKNoiaZE84/GFBsxqlKR8cs0qVwzuAsdijMv
-vlMPNlMRyE1Rb7nR6HXGkPXNyxgMko03NXPkvIje9zRudm0Lf8L4q/hPyPkS7Mrm
-/uQfAAJe+xFcupkEX2XY7r0x1C+z6E8lA1UcuhK3SHdW7CWYqp1vU5/dnnUiXwCa
-GiC6Y1bCJB0pDAVISzy3JUDdINZdiqGR+y8ho3pstChf2mp/76s3N9eG9KA/qaFK
-BrGk2PvCoZ8/Aj1aMsRYFHECAwEAAaNTMFEwHQYDVR0OBBYEFDLJ2fbWP4VUJgOp
-PSs+NGHcVgRmMB8GA1UdIwQYMBaAFDLJ2fbWP4VUJgOpPSs+NGHcVgRmMA8GA1Ud
-EwEB/wQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBABfv5ut/y03atq0NMB0jeDY4
-AvW4ukk0k1svyqxFZCw9o7m2lHb/IjmVrZG1Sj4JWrrSv0s02ccb26/t6vazNa5L
-Powe3eyfHgfjTZJmgs8hyeMwKS0wWk/SPuu9JDhIJakiquqD+UVBGkHpP+XYvhDv
-vhS2XRlW+aEjpUmr1oCyyrc6WbzrYRNadqEsn/AxwcMyUbht3Ugjkg+OpidcTIQp
-5lv63waKo6I1vQofzBQ3L7JYsKo8kC0vAP7wkLxvzBii335uZJzzpFYFVOyVNezi
-dJdazPbRYbXz4LjltdEn/SNfRuKX8ZRiN2OSo7OfSrZaMTS87SfCSFJGgQM8Yrk=
------END CERTIFICATE-----

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

certs/key.pem

@@ -1,28 +0,0 @@
------BEGIN PRIVATE KEY-----
-MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCkndJezSQjQcL7
-T1PnVT0JLXoNAHwt7BqkZ2TELXgkVWtqCIAuDaBdwPQSv8h2xWRduTp103JOb83P
-Mm97+953X0w/QEijaImmRPOPxhQbMapSkfHLNKlcM7gLHYozL75TDzZTEchNUW+5
-0eh1xpD1zcsYDJKNNzVz5LyI3vc0bnZtC3/C+Kv4T8j5EuzK5v7kHwACXvsRXLqZ
-BF9l2O69MdQvs+hPJQNVHLoSt0h3VuwlmKqdb1Of3Z51Il8AmhogumNWwiQdKQwF
-SEs8tyVA3SDWXYqhkfsvIaN6bLQoX9pqf++rNzfXhvSgP6mhSgaxpNj7wqGfPwI9
-WjLEWBRxAgMBAAECggEAUNpHYlLFxh9dokujPUMreF+Cy/IKDBAkQc2au5RNpyLh
-YDIOqw/8TTAhcTgLQPLQygvZP9f8E7RsVLFD+pSJ/v2qmIJ9au1Edor1Sg+S/oxV
-SLrwFMunx2aLpcH7iAqSI3+cQg7A3+D4zD7iOz6tIl3Su9wo+v073tFhHKTOrEwv
-Qgr9Jf3viIiKV1ym+uQEVQndocfsj46FnFpXTQ2qs7kAF6FgAOLDGfQQwzkiqEBD
-NsqsDmbYIx6foZL+DEz1ZVO2M5B+xxpbNK82KwuQilVpimW8ui4LZHCe+RIFzt9+
-BK6KGlLpSEwTFliivI3nahy18JzskZsfyah0CPZlQQKBgQDVv+A0qIPGvOP3Sx+9
-HyeQCV23SkvvSvw8p8pMB0gvwv63YdJ7N/rJzBGS6YUHFWWZZgEeTgkJ6VJvoe0r
-8JL1el9uSUa7f0eayjmFBOGuzpktNVdIn2Tg7A9MWA4JqPNNC69RMOh86ewGD4J3
-a8Hz2a1bHxAmy/AZt2ukypY6eQKBgQDFJ7kqeOPkRBz9WbALRgVIXo8YWf5di0sQ
-r0HC03GAISHQ725A2IFBPHJWeqj0jaMiIZD0y+Obgp7KAskrJaLfsd7Ug775kFfw
-oUI9UAl6kRuPKvm3BaVAm46SQm+56VsgxTi73YN0NUp75THHZgAJjepF9zSpVJxq
-VY9DjEGruQKBgQCQCpGIatcCol/tUg69X7VFd0pULhkl1J5OMbQ9r9qRdRI5eg5h
-QsQaIQ7mtb8TmvOwf/DY/zVQHI+U8sXlCmW+TwzoQTENQSR7xzMj1LpRFqBaustr
-AR72A537kItFLzll/i3SxOam5uxK2UDOQSuerF4KPdCglGXkrpo3nt3F4QKBgQCa
-RArPAOjQo7tLQfJN3+wiRFsTYtd1uphx5bA/EdOtvj8HjVFnzADXWsTchf3N3UXY
-XwtdgGwIMpys1KEz8a8P+c2x26SDAj7NOmDqOMYx8Xju/WGHpBM6Cn30U6e4gK+d
-ZLSPyzQgqdIuP5hDvbwpvbGiLVw3Ys1BJtGCuSxpgQJ/eHnRiuSi5Zq5jGg+GpA+
-FEEc9NCy772rR+4uzEOqyIwqewffqzSuVWuIsY/8MP3fh+NDxl/mU6cB5QVeD54Z
-JZUKwmpM26muiM6WvVnM4ExPdSGA2+l4pZjby/KKd6F/w0tgZ1jb9Pb2/0vN3qVA
-Y4U4XNTMt2fxUACqiL4SHA==
------END PRIVATE KEY-----

client/.env.development.imex

@@ -1,5 +1,5 @@
-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_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/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
@@ -8,7 +8,7 @@ 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_AXIOS_BASE_API_URL=http://localhost:4000
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX

client/.env.development.promanager

@@ -1,6 +1,7 @@
-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_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/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_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
@@ -8,7 +9,7 @@ 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_AXIOS_BASE_API_URL=http://localhost:4000
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=PROMANAGER

client/.env.development.rome

@@ -1,5 +1,5 @@
-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_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/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_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"}
@@ -9,7 +9,7 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
 VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-VITE_APP_AXIOS_BASE_API_URL=/api/
+VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
 VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_COUNTRY=USA

client/.gitignore

@@ -1,4 +1,3 @@
 
 # Sentry Config File
 .sentryclirc
-/dev-dist

client/craco.config.js

@@ -0,0 +1,53 @@
+// craco.config.js
+const TerserPlugin = require("terser-webpack-plugin");
+const CracoLessPlugin = require("craco-less");
+const { convertLegacyToken } = require("@ant-design/compatible/lib");
+const { theme } = require("antd/lib");
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
+const v4Token = convertLegacyToken(mapToken);
+
+// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: { ...v4Token },
+            javascriptEnabled: true
+          }
+        }
+      }
+    }
+  ],
+  webpack: {
+    configure: (webpackConfig) => {
+      return {
+        ...webpackConfig,
+        // Required for Dev Server
+        devServer: {
+          ...webpackConfig.devServer,
+          allowedHosts: "all"
+        },
+        optimization: {
+          ...webpackConfig.optimization,
+          // Workaround for CircleCI bug caused by the number of CPUs shown
+          // https://github.com/facebook/create-react-app/issues/8320
+          minimizer: webpackConfig.optimization.minimizer.map((item) => {
+            if (item instanceof TerserPlugin) {
+              item.options.parallel = 2;
+            }
+
+            return item;
+          })
+        }
+      };
+    }
+  },
+  devtool: "source-map"
+};

client/cypress.config.js

@@ -12,6 +12,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       return require("./cypress/plugins/index.js")(on, config);
     },
-    baseUrl: "https://localhost:3000"
+    baseUrl: "http://localhost:3000"
   }
 });

client/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 // ***********************************************************
-// This example plugins/index.jsx can be used to load plugins
+// This example plugins/index.js can be used to load plugins
 //
 // You can change the location of this file or turn off loading
 // the plugins file with the 'pluginsFile' configuration option.

client/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.jsx is processed and
+// This example support/index.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

client/index.html

@@ -1,126 +1,174 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8"/>
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-  <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
-  <link rel="icon" href="/favicon.png"/>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <link rel="icon" href="/ro-favicon.png"/>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-  <link rel="icon" href="/pm/pm-favicon.ico"/>
-  <% } %>
+  <head>
+    <meta charset="utf-8" />
+    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+    <link rel="icon" href="/favicon.png" />
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <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="theme-color" content="#1690ff"/>
-  <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
-  <!-- TODO:AIo Update the individual logos for each.-->
-  <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.
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1690ff" />
+    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+    <!-- TODO:AIo Update the individual logos for each.-->
+    <link rel="apple-touch-icon" href="public/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.
 
-    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-    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') { %>
-  <meta name="description" content="ImEX Online"/>
-  <title>ImEX Online</title>
-  <script type="text/javascript">
-    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
-    (function () {
-      d = document;
-      s = d.createElement('script');
-      s.src = 'https://client.crisp.chat/l.js';
-      s.async = 1;
-      d.getElementsByTagName('head')[0].appendChild(s);
-    })();
-  </script>
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
-  <meta name="description" content="Rome Online"/>
-  <title>Rome Online</title>
-  <script type="text/javascript" id="zsiqchat">
-    var $zoho = $zoho || {};
-    $zoho.salesiq = $zoho.salesiq || {
-      widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
-      values: {},
-      ready: function () {
-      }
-    };
-    var d = document;
-    s = d.createElement("script");
-    s.type = "text/javascript";
-    s.id = "zsiqscript";
-    s.defer = true;
-    s.src = "https://salesiq.zohopublic.com/widget";
-    t = d.getElementsByTagName("script")[0];
-    t.parentNode.insertBefore(s, t);
-  </script>
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      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') { %>
+    <meta name="description" content="ImEX Online" />
+    <title>ImEX Online</title>
+    <script type="text/javascript">
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
+      (function () {
+        d = document;
+        s = d.createElement('script');
+        s.src = 'https://client.crisp.chat/l.js';
+        s.async = 1;
+        d.getElementsByTagName('head')[0].appendChild(s);
+      })();
+    </script>
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <meta name="description" content="Rome Online" />
+    <title>Rome Online</title>
 
-  <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
-  <title>ProManager</title>
-  <meta name="description" content="ProManager"/>
+    <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
 
-  <% } %>
-  <script>
-    !(function () {
-      '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 || []);
+    <call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001 party="LiveChat528346"></call-us-selector>
 
-        function t(e) {
-          return function () {
-            var t = Array.prototype.slice.call(arguments);
-            return t.unshift(e), n.push(t), n;
-          };
-        }
+    <!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
+    
+    <!--<call-us
+    
+    phonesystem-url=https://rometech.east.3cx.us:5001
+    
+    style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
+    
+    id="wp-live-chat-by-3CX"
+    
+    minimized="true"
+    
+    animation-style="noanimation"
+    
+    party="LiveChat528346"
+    
+    minimized-style="bubbleright"
+    
+    allow-call="true"
+    
+    allow-video="false"
+    
+    allow-soundnotifications="true"
+    
+    enable-mute="true"
+    
+    enable-onmobile="true"
+    
+    offline-enabled="true"
+    
+    enable="true"
+    
+    ignore-queueownership="false"
+    
+    authentication="both"
+    
+    show-operator-actual-name="true"
+    
+    aknowledge-received="true"
+    
+    gdpr-enabled="false"
+    
+    message-userinfo-format="name"
+    
+    message-dateformat="both"
+    
+    lang="browser"
+    
+    button-icon-type="default"
+    
+    greeting-visibility="none"
+    
+    greeting-offline-visibility="none"
+    
+    chat-delay="2000"
+    
+    enable-direct-call="true"
+    
+    enable-ga="false"
+    
+    ></call-us>-->
+    
+    <script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js id="tcx-callus-js" charset="utf-8"></script>
 
-        !(function () {
-          for (var o = 0; o < e.length; o++) {
-            var r = e[o];
-            n[r] = t(r);
+
+
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
+    <title>ProManager</title>
+    <meta name="description" content="ProManager" />
+
+    <% } %>
+    <script>
+      !(function () {
+        '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 () {
+              var t = Array.prototype.slice.call(arguments);
+              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>
+          !(function () {
+            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>
+    <script type="module" src="src/index.jsx"></script>
+  </body>
 </html>

client/package.json

@@ -2,98 +2,93 @@
   "name": "bodyshop",
   "version": "0.2.1",
   "engines": {
-    "node": ">=18.18.2"
+    "node": "18.18.2"
   },
   "type": "module",
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
-    "@apollo/client": "^3.11.8",
-    "@emotion/is-prop-valid": "^1.3.1",
-    "@fingerprintjs/fingerprintjs": "^4.5.0",
+    "@ant-design/compatible": "^5.1.2",
+    "@ant-design/pro-layout": "^7.17.16",
+    "@apollo/client": "^3.8.10",
+    "@asseinfo/react-kanban": "^2.2.0",
+    "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/cli": "^2.36.2",
-    "@sentry/react": "^7.114.0",
-    "@splitsoftware/splitio-react": "^1.13.0",
+    "@reduxjs/toolkit": "^2.2.1",
+    "@sentry/cli": "^2.28.6",
+    "@sentry/react": "^7.104.0",
+    "@splitsoftware/splitio-react": "^1.11.0",
     "@tanem/react-nprogress": "^5.0.51",
-    "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "antd": "^5.15.3",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
-    "autosize": "^6.0.1",
-    "axios": "^1.7.7",
-    "classnames": "^2.5.1",
-    "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.13",
+    "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
     "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.13.2",
-    "graphql": "^16.9.0",
-    "i18next": "^23.15.1",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.9",
-    "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.2",
-    "memoize-one": "^6.0.0",
-    "normalize-url": "^8.0.1",
-    "object-hash": "^3.0.0",
+    "firebase": "^10.8.1",
+    "graphql": "^16.6.0",
+    "i18next": "^23.10.0",
+    "i18next-browser-languagedetector": "^7.0.2",
+    "libphonenumber-js": "^1.10.57",
+    "logrocket": "^8.0.1",
+    "markerjs2": "^2.32.0",
+    "normalize-url": "^8.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^9.1.0",
-    "raf-schd": "^4.0.3",
-    "react": "^18.3.1",
-    "react-big-calendar": "^1.14.1",
+    "query-string": "^9.0.0",
+    "react": "^18.2.0",
+    "react-big-calendar": "^1.11.0",
     "react-color": "^2.19.3",
-    "react-cookie": "^7.2.0",
-    "react-dom": "^18.3.1",
+    "react-cookie": "^7.1.0",
+    "react-dom": "^18.2.0",
     "react-drag-listview": "^2.0.0",
-    "react-grid-gallery": "^1.0.1",
+    "react-grid-gallery": "^1.0.0",
     "react-grid-layout": "1.3.4",
-    "react-i18next": "^14.1.3",
-    "react-icons": "^5.3.0",
+    "react-i18next": "^14.0.5",
+    "react-icons": "^5.0.1",
     "react-image-lightbox": "^5.1.4",
+    "react-joyride": "^2.7.4",
     "react-markdown": "^9.0.1",
-    "react-number-format": "^5.4.2",
-    "react-popopo": "^2.1.9",
-    "react-product-fruits": "^2.2.61",
-    "react-redux": "^9.1.2",
+    "react-number-format": "^5.3.3",
+    "react-product-fruits": "^2.2.6",
+    "react-redux": "^9.1.0",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.22.2",
+    "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
     "react-virtualized": "^9.22.5",
-    "react-virtuoso": "^4.10.4",
-    "recharts": "^2.12.7",
+    "recharts": "^2.12.2",
     "redux": "^5.0.1",
-    "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
-    "reselect": "^5.1.1",
-    "sass": "^1.79.3",
-    "socket.io-client": "^4.8.0",
-    "styled-components": "^6.1.13",
+    "reselect": "^5.1.0",
+    "sass": "^1.71.1",
+    "socket.io-client": "^4.7.4",
+    "styled-components": "^6.1.8",
     "subscriptions-transport-ws": "^0.11.0",
-    "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.6",
+    "terser-webpack-plugin": "^5.3.10",
+    "userpilot": "^1.3.1",
     "vite-plugin-ejs": "^1.7.0",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^3.5.2",
+    "workbox-core": "^7.0.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-navigation-preload": "^7.0.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-routing": "^7.0.0",
+    "workbox-strategies": "^7.0.0"
   },
   "scripts": {
-    "postinstall": "echo 'when updating react-big-calendar, remember to check to localizer in the calendar wrapper'",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "vite",
-    "build": "dotenvx run --env-file=.env.development.imex -- vite build",
+    "build": "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",
@@ -132,33 +127,33 @@
     "@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",
-    "@sentry/webpack-plugin": "^2.22.4",
-    "@testing-library/cypress": "^10.0.2",
-    "browserslist": "^4.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@dotenvx/dotenvx": "^0.15.4",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@sentry/webpack-plugin": "^2.14.2",
+    "@swc/core": "^1.3.107",
+    "@swc/plugin-styled-components": "^1.5.108",
+    "@testing-library/cypress": "^10.0.1",
+    "browserslist": "^4.22.3",
     "browserslist-to-esbuild": "^2.1.1",
-    "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.14.2",
+    "cypress": "^13.6.6",
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
-    "memfs": "^4.12.0",
+    "memfs": "^4.6.0",
     "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.7",
+    "vite": "^5.0.11",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-pwa": "^0.20.5",
-    "vite-plugin-style-import": "^2.0.0",
-    "workbox-window": "^7.1.0"
+    "vite-plugin-legacy": "^2.1.0",
+    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite-plugin-pwa": "^0.19.0",
+    "vite-plugin-style-import": "^2.0.0"
   }
 }

client/public/3rdparty-api.txt

@@ -16422,7 +16422,7 @@ For when you don't want to write the same thing over and over to cache a method
 $ npm install --save-dev stubs
 ```
 ```js
-var mylib = require('./lib/index.jsx')
+var mylib = require('./lib/index.js')
 var stubs = require('stubs')
 
 // make it a noop

client/public/3rdparty-app.txt

@@ -16567,7 +16567,7 @@ even more slower.
 ## Benchmarks
 
 ```bash
-$ node benchmarks/index.jsx
+$ node benchmarks/index.js
 Benchmarking: sign
 elliptic#sign x 262 ops/sec ±0.51% (177 runs sampled)
 eccjs#sign x 55.91 ops/sec ±0.90% (144 runs sampled)

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

@@ -7,7 +7,9 @@ import { connect } from "react-redux";
 import { Route, Routes } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
-import ErrorBoundary from "../components/error-boundary/error-boundary.component"; // Component Imports
+import ErrorBoundary from "../components/error-boundary/error-boundary.component";
+
+//Component Imports
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
 import LandingPage from "../pages/landing/landing.page";
@@ -18,24 +20,23 @@ import { checkUserSession } from "../redux/user/user.actions";
 import { selectBodyshop, selectCurrentEula, selectCurrentUser } from "../redux/user/user.selectors";
 import PrivateRoute from "../components/PrivateRoute";
 import "./App.styles.scss";
+import handleBeta from "../utils/betaHandler";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
-import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
-import { SocketProvider } from "../contexts/SocketIO/socketContext.jsx";
+import { ProductFruits } from "react-product-fruits";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
 const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
+
 const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
 const MobilePaymentContainer = lazy(() => import("../pages/mobile-payment/mobile-payment.container"));
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   online: selectOnline,
   bodyshop: selectBodyshop,
   currentEula: selectCurrentEula
 });
-
 const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
   setOnline: (isOnline) => dispatch(setOnline(isOnline))
@@ -59,11 +60,11 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
 
   // Associate event listeners, memoize to prevent multiple listeners being added
   useEffect(() => {
-    const offlineListener = () => {
+    const offlineListener = (e) => {
       setOnline(false);
     };
 
-    const onlineListener = () => {
+    const onlineListener = (e) => {
       setOnline(true);
     };
 
@@ -97,7 +98,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           InstanceRenderMgr({
             imex: "gvfvfw/bodyshopapp",
             rome: "rome-online/rome-online",
-            promanager: "" // TODO: AIO Add in log rocket for promanager instances.
+            promanager: "" //TODO:AIO Add in log rocket for promanager instances.
           })
         );
       }
@@ -108,20 +109,26 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
     return <LoadingSpinner message={t("general.labels.loggingin")} />;
   }
 
-  if (!online) {
+  handleBeta();
+
+  if (!online)
     return (
       <Result
         status="warning"
         title={t("general.labels.nointernet")}
         subTitle={t("general.labels.nointernet_sub")}
         extra={
-          <Button type="primary" onClick={() => window.location.reload()}>
+          <Button
+            type="primary"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
             {t("general.actions.refresh")}
           </Button>
         }
       />
     );
-  }
 
   if (currentEula && !currentUser.eulaIsAccepted) {
     return <Eula />;
@@ -140,13 +147,18 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
         />
       }
     >
-      <ProductFruitsWrapper
-        currentUser={currentUser}
+      <ProductFruits
         workspaceCode={InstanceRenderMgr({
           imex: null,
           rome: "9BkbEseqNqxw8jUH",
           promanager: "aoJoEifvezYI0Z0P"
         })}
+        debug
+        language="en"
+        user={{
+          email: currentUser.email,
+          username: currentUser.email
+        }}
       />
 
       <Routes>
@@ -202,9 +214,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           path="/manage/*"
           element={
             <ErrorBoundary>
-              <SocketProvider bodyshop={bodyshop}>
-                <PrivateRoute isAuthorized={currentUser.authorized} />
-              </SocketProvider>
+              <PrivateRoute isAuthorized={currentUser.authorized} />
             </ErrorBoundary>
           }
         >
@@ -214,9 +224,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           path="/tech/*"
           element={
             <ErrorBoundary>
-              <SocketProvider bodyshop={bodyshop}>
-                <PrivateRoute isAuthorized={currentUser.authorized} />
-              </SocketProvider>
+              <PrivateRoute isAuthorized={currentUser.authorized} />
             </ErrorBoundary>
           }
         >

client/src/App/App.styles.scss

@@ -161,15 +161,3 @@
 .rowWithColor > td {
   background-color: var(--bgColor) !important;
 }
-
-.muted-button {
-  color: lightgray;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 16px; /* Adjust as needed */
-}
-
-.muted-button:hover {
-  color: darkgrey;
-}

client/src/App/ProductFruitsWrapper.jsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { ProductFruits } from "react-product-fruits";
-import PropTypes from "prop-types";
-
-const ProductFruitsWrapper = React.memo(({ currentUser, workspaceCode }) => {
-  return (
-    workspaceCode &&
-    currentUser?.authorized === true &&
-    currentUser?.email && (
-      <ProductFruits
-        lifeCycle="unmount"
-        workspaceCode={workspaceCode}
-        debug
-        language="en"
-        user={{
-          email: currentUser.email,
-          username: currentUser.email
-        }}
-      />
-    )
-  );
-});
-
-export default ProductFruitsWrapper;
-
-ProductFruitsWrapper.propTypes = {
-  currentUser: PropTypes.shape({
-    authorized: PropTypes.bool,
-    email: PropTypes.string
-  }),
-  workspaceCode: PropTypes.string
-};

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,19 +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 JobMarkSelectedExported from "../jobs-mark-selected-exported/jobs-mark-selected-exported";
+
+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 OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 
@@ -171,22 +170,13 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
       extra={
         <Space wrap>
           {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
-            <>
-              <JobMarkSelectedExported
-                jobIds={selectedJobs}
-                disabled={transInProgress || selectedJobs.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedJobs}
-                refetch={refetch}
-              />
-              <JobsExportAllButton
-                jobIds={selectedJobs}
-                disabled={transInProgress || selectedJobs.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedJobs}
-                refetch={refetch}
-              />
-            </>
+            <JobsExportAllButton
+              jobIds={selectedJobs}
+              disabled={transInProgress || selectedJobs.length === 0}
+              loadingCallback={setTransInProgress}
+              completedCallback={setSelectedJobs}
+              refetch={refetch}
+            />
           )}
           {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
           <Input.Search
@@ -201,7 +191,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-detail-edit/bill-detail-edit-component.jsx

@@ -1,6 +1,6 @@
-import { PageHeader } from "@ant-design/pro-layout";
 import { useMutation, useQuery } from "@apollo/client";
 import { Button, Divider, Form, Popconfirm, Space } from "antd";
+import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,7 +13,6 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import dayjs from "../../utils/day";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
@@ -23,6 +22,7 @@ import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-galler
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import BillDetailEditReturn from "./bill-detail-edit-return.component";
+import { PageHeader } from "@ant-design/pro-layout";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -98,7 +98,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
     });
 
     billlines.forEach((billline) => {
-      const { deductedfromlbr, inventories, jobline, original_actual_price, create_ppc, ...il } = billline;
+      const { deductedfromlbr, inventories, jobline, ...il } = billline;
       delete il.__typename;
 
       if (il.id) {
@@ -153,7 +153,6 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
   if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
   const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
-  const isinhouse = data && data.bills_by_pk && data.bills_by_pk.isinhouse;
 
   return (
     <>
@@ -189,7 +188,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
             }
           />
           <Form form={form} onFinish={handleFinish} initialValues={transformData(data)} layout="vertical">
-            <BillFormContainer form={form} billEdit disabled={exported} disableInHouse={isinhouse} />
+            <BillFormContainer form={form} billEdit disabled={exported} />
             <Divider orientation="left">{t("general.labels.media")}</Divider>
             {bodyshop.uselocalmediaserver ? (
               <JobsDocumentsLocalGallery

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

@@ -14,6 +14,7 @@ import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AlertComponent from "../alert/alert.component";
 import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
@@ -21,7 +22,6 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
 import { CalculateBillTotal } from "./bill-form.totals.utility";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -41,8 +41,7 @@ export function BillFormComponent({
   job,
   loadOutstandingReturns,
   loadInventory,
-  preferredMake,
-  disableInHouse
+  preferredMake
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -178,7 +177,7 @@ export function BillFormComponent({
           ]}
         >
           <VendorSearchSelect
-            disabled={disabled || disableInHouse}
+            disabled={disabled}
             options={vendorAutoCompleteOptions}
             preferredMake={preferredMake}
             onSelect={handleVendorSelect}
@@ -244,7 +243,7 @@ export function BillFormComponent({
             })
           ]}
         >
-          <Input disabled={disabled || disableInvNumber || disableInHouse} />
+          <Input disabled={disabled || disableInvNumber} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.date")}
@@ -276,7 +275,7 @@ export function BillFormComponent({
             })
           ]}
         >
-          <DateTimePicker isDateOnly disabled={disabled} />
+          <FormDatePicker disabled={disabled} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.is_credit_memo")}

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

@@ -16,7 +16,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber, disableInHouse }) {
+export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber }) {
   const {
     treatments: { Simple_Inventory }
   } = useSplitTreatments({
@@ -47,7 +47,6 @@ export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableI
         job={lineData ? lineData.jobs_by_pk : null}
         responsibilityCenters={bodyshop.md_responsibility_centers || null}
         disableInvNumber={disableInvNumber}
-        disableInHouse={disableInHouse}
         loadOutstandingReturns={loadOutstandingReturns}
         loadInventory={loadInventory}
         preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}

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={{
-              width: "20rem",
-              maxWidth: "20rem",
-              minWidth: "10rem",
-              whiteSpace: "normal",
-              height: "auto",
-              minHeight: "32px" // default height of Ant Design inputs
-            }}
+            style={{ width: "100%", minWidth: "10rem" }}
             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"),

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

@@ -3,6 +3,8 @@ import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
+//To be used as a form element only.
+const { Option } = Select;
 const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
   const { t } = useTranslation();
 
@@ -11,7 +13,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 +45,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 +59,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/card-payment-modal/card-payment-modal.component..jsx

@@ -1,6 +1,6 @@
-import { DeleteFilled, CopyFilled } from "@ant-design/icons";
+import { DeleteFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, message, notification } from "antd";
+import { Button, Card, Col, Form, Input, Row, Space, Spin, Statistic, notification } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,12 +14,10 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
-import { getCurrentUser } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   cardPaymentModal: selectCardPayment,
-  bodyshop: selectBodyshop,
-  currentUser: getCurrentUser
+  bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -27,17 +25,11 @@ const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment"))
 });
 
-const CardPaymentModalComponent = ({
-  bodyshop,
-  currentUser,
-  cardPaymentModal,
-  toggleModalVisible,
-  insertAuditTrail
-}) => {
+const CardPaymentModalComponent = ({ bodyshop, cardPaymentModal, toggleModalVisible, insertAuditTrail }) => {
   const { context, actions } = cardPaymentModal;
 
   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);
@@ -45,7 +37,7 @@ const CardPaymentModalComponent = ({
 
   const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
     variables: { jobids: [context.jobid] },
-    skip: !context?.jobid
+    skip: true
   });
 
   //Initialize the intellipay window.
@@ -59,7 +51,8 @@ const CardPaymentModalComponent = ({
       //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 && actions.refetch && typeof actions.refetch === "function") actions.refetch();
+        if (actions && actions.refetch && typeof actions.refetch === "function")
+          actions.refetch();
         setLoading(false);
         toggleModalVisible();
       }, 750);
@@ -93,6 +86,7 @@ const CardPaymentModalComponent = ({
     });
   };
 
+
   const handleIntelliPayCharge = async () => {
     setLoading(true);
     //Validate
@@ -107,7 +101,7 @@ const CardPaymentModalComponent = ({
       const response = await axios.post("/intellipay/lightbox_credentials", {
         bodyshop,
         refresh: !!window.intellipay,
-        paymentSplitMeta: form.getFieldsValue()
+        paymentSplitMeta: form.getFieldsValue(),
       });
 
       if (window.intellipay) {
@@ -132,42 +126,6 @@ const CardPaymentModalComponent = ({
     }
   };
 
-  const handleIntelliPayChargeShortLink = async () => {
-    setLoading(true);
-    //Validate
-    try {
-      await form.validateFields();
-    } catch (error) {
-      setLoading(false);
-      return;
-    }
-
-    try {
-      const { payments } = form.getFieldsValue();
-      const response = await axios.post("/intellipay/generate_payment_url", {
-        bodyshop,
-        amount: payments?.reduce((acc, val) => {
-          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()
-      });
-      if (response.data) {
-        setPaymentLink(response.data?.shorUrl);
-        navigator.clipboard.writeText(response.data?.shorUrl);
-        message.success(t("general.actions.copied"));
-      }
-      setLoading(false);
-    } catch (error) {
-      notification.open({
-        type: "error",
-        message: t("job_payments.notifications.error.openingip")
-      });
-      setLoading(false);
-    }
-  };
-
   return (
     <Card title="Card Payment">
       <Spin spinning={loading}>
@@ -244,14 +202,16 @@ const CardPaymentModalComponent = ({
 
           <Form.Item
             shouldUpdate={(prevValues, curValues) =>
-              prevValues.payments?.map((p) => p?.jobid + p?.amount).join() !==
-              curValues.payments?.map((p) => p?.jobid + p?.amount).join()
+              prevValues.payments?.map((p) => p?.jobid).join() !== curValues.payments?.map((p) => p?.jobid).join()
             }
           >
             {() => {
               //If all of the job ids have been fileld in, then query and update the IP field.
               const { payments } = form.getFieldsValue();
-              if (payments?.length > 0 && payments?.filter((p) => p?.jobid).length === payments?.length) {
+              if (
+                payments?.length > 0 &&
+                payments?.filter((p) => p?.jobid).length === payments?.length
+              ) {
                 refetch({ jobids: payments.map((p) => p.jobid) });
               }
               return (
@@ -286,6 +246,7 @@ const CardPaymentModalComponent = ({
               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} />
@@ -312,36 +273,11 @@ const CardPaymentModalComponent = ({
                   >
                     {t("job_payments.buttons.proceedtopayment")}
                   </Button>
-                  <Space direction="vertical" align="center">
-                    <Button
-                      type="primary"
-                      //  data-ipayname="submit"
-                      className="ipayfield"
-                      loading={queryLoading || loading}
-                      disabled={!(totalAmountToCharge > 0)}
-                      onClick={handleIntelliPayChargeShortLink}
-                    >
-                      {t("job_payments.buttons.create_short_link")}
-                    </Button>
-                  </Space>
                 </Space>
               );
             }}
           </Form.Item>
         </Form>
-        {paymentLink && (
-          <Space
-            style={{ cursor: "pointer", float: "right" }}
-            align="end"
-            onClick={() => {
-              navigator.clipboard.writeText(paymentLink);
-              message.success(t("general.actions.copied"));
-            }}
-          >
-            <div>{paymentLink}</div>
-            <CopyFilled />
-          </Space>
-        )}
       </Spin>
     </Card>
   );

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

@@ -1,30 +1,89 @@
 import { useApolloClient } from "@apollo/client";
-import React, { useContext, useEffect } from "react";
+import { getToken, onMessage } from "@firebase/messaging";
+import { Button, notification, Space } from "antd";
+import axios from "axios";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+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 SocketContext from "../../contexts/SocketIO/socketContext";
-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;
 
-    //Register WS handlers
-    if (socket && socket.connected) {
-      registerMessagingHandlers({ socket, client });
+    async function SubscribeToTopic() {
+      try {
+        const r = 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>
+          )
+        });
+      }
     }
 
+    SubscribeToTopic();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bodyshop]);
+
+  useEffect(() => {
+    function handleMessage(payload) {
+      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) {
-        unregisterMessagingHandlers({ socket });
-      }
+      stopMessageListener && stopMessageListener();
+      channel && channel.removeEventListener("message", handleMessage);
     };
-  }, [bodyshop, socket, t, client]);
+  }, [client]);
 
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 

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

@@ -1,429 +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.PROD) {
-    return;
-  }
-  console.log(`==================== ${message} ====================`);
-  console.dir({ ...args });
-};
-
-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 };
-
-    // 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"
-    });
-
-    // 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);
-
-        // Avoid adding duplicate conversations
-        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) {
-      let conversationDetails;
-
-      // Attempt to read existing conversation details from cache
-      try {
-        conversationDetails = client.cache.readFragment({
-          id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-          fragment: gql`
-            fragment ExistingConversation on conversations {
-              id
-              phone_num
-              updated_at
-              archived
-              label
-              unreadcnt
-              job_conversations {
-                jobid
-                conversationid
-              }
-              messages_aggregate {
-                aggregate {
-                  count
-                }
-              }
-              __typename
-            }
-          `
-        });
-      } catch (error) {
-        logLocal("handleNewMessageSummary - Cache miss for conversation, fetching from server", { conversationId });
-      }
-
-      // Fetch conversation details from server if not in cache
-      if (!conversationDetails) {
-        try {
-          const { data } = await client.query({
-            query: GET_CONVERSATION_DETAILS,
-            variables: { conversationId },
-            fetchPolicy: "network-only"
-          });
-          conversationDetails = data?.conversations_by_pk;
-        } catch (error) {
-          console.error("Failed to fetch conversation details from server:", error);
-          return;
-        }
-      }
-
-      // Validate that conversation details were retrieved
-      if (!conversationDetails) {
-        console.error("Unable to retrieve conversation details. Skipping cache update.");
-        return;
-      }
-
-      try {
-        // Check if the conversation is already in the cache
-        const queryResults = client.cache.readQuery({
-          query: CONVERSATION_LIST_QUERY,
-          variables: queryVariables
-        });
-
-        const isAlreadyInCache = queryResults?.conversations.some((conv) => conv.id === conversationId);
-
-        if (!isAlreadyInCache) {
-          const enrichedConversation = enrichConversation(conversationDetails, isoutbound);
-
-          client.cache.modify({
-            id: "ROOT_QUERY",
-            fields: {
-              conversations(existingConversations = []) {
-                return [enrichedConversation, ...existingConversations];
-              }
-            }
-          });
-        }
-
-        // Update fields for the existing conversation in the cache
-        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);
-      }
-    }
-  };
-
-  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":
-          client.cache.modify({
-            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-            fields: {
-              job_conversations: (existing = []) => [...existing, ...job_conversations]
-            }
-          });
-          break;
-
-        case "tag-removed":
-          client.cache.modify({
-            id: client.cache.identify({ __typename: "conversations", id: conversationId }),
-            fields: {
-              job_conversations: (existing = [], { readField }) =>
-                existing.filter((jobRef) => readField("jobid", jobRef) !== fields.jobId)
-            }
-          });
-          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");
-  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,41 +1,21 @@
 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({
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatArchiveButton({ conversation, bodyshop }) {
+export default function ChatArchiveButton({ conversation }) {
   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({
-      variables: { id: conversation.id, archived: !conversation.archived }
+    await updateConversation({
+      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);
   };
 
@@ -45,5 +25,3 @@ export function ChatArchiveButton({ conversation, bodyshop }) {
     </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 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,8 +19,18 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
 });
 
-function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
-  const renderConversation = (index) => {
+function ChatConversationListComponent({
+  conversationList,
+  selectedConversation,
+  setSelectedConversation,
+  loadMoreConversations
+}) {
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 60
+  });
+
+  const rowRenderer = ({ index, key, style, parent }) => {
     const item = conversationList[index];
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
@@ -42,8 +52,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         )}
       </>
     );
-
-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
+    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0} />;
 
     const getCardStyle = () =>
       item.id === selectedConversation
@@ -51,29 +60,40 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         : { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };
 
     return (
-      <List.Item
-        key={item.id}
-        onClick={() => setSelectedConversation(item.id)}
-        className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
-      >
-        <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
-          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
-          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
-        </Card>
-      </List.Item>
+      <CellMeasurer key={key} cache={cache} parent={parent} columnIndex={0} rowIndex={index}>
+        <List.Item
+          onClick={() => setSelectedConversation(item.id)}
+          style={style}
+          className={`chat-list-item
+    ${item.id === selectedConversation ? "chat-list-selected-conversation" : null}`}
+        >
+          <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
+            <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
+            <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
+          </Card>
+        </List.Item>
+      </CellMeasurer>
     );
   };
 
-  // CAN DO: Can go back into virtuoso for additional fetch
-  // endReached={loadMoreConversations} // Calls loadMoreConversations when scrolled to the bottom
-
   return (
     <div className="chat-list-container">
-      <Virtuoso
-        data={conversationList}
-        itemContent={(index) => renderConversation(index)}
-        style={{ height: "100%", width: "100%" }}
-      />
+      <AutoSizer>
+        {({ height, width }) => (
+          <VirtualizedList
+            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,24 +1,13 @@
 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({
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
+export default function ChatConversationTitleTags({ jobConversations }) {
   const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
-  const { socket } = useContext(SocketContext);
 
   const handleRemoveTag = (jobId) => {
     const convId = jobConversations[0].conversationid;
@@ -38,16 +27,6 @@ export function ChatConversationTitleTags({ jobConversations, bodyshop }) {
             }
           });
         }
-      }).then(() => {
-        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,
@@ -75,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,14 +6,8 @@ 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({});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatConversationTitle({ conversation }) {
+export default function ChatConversationTitle({ conversation }) {
   return (
     <Space wrap>
       <PhoneNumberFormatter>{conversation && conversation.phone_num}</PhoneNumberFormatter>
@@ -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({
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatConversationComponent({
-  subState,
-  conversation,
-  messages,
-  handleMarkConversationAsRead,
-  bodyshop
-}) {
+export default function ChatConversationComponent({ subState, conversation, messages, handleMarkConversationAsRead }) {
   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,24 +1,22 @@
-import { useApolloClient, useQuery } from "@apollo/client";
-import axios from "axios";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useMutation, useQuery, useSubscription } from "@apollo/client";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import SocketContext from "../../contexts/SocketIO/socketContext";
-import { GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
+import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } 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
 });
 
-export function ChatConversationContainer({ bodyshop, selectedConversation }) {
-  const client = useApolloClient();
-  const { socket } = useContext(SocketContext);
-  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
+export default connect(mapStateToProps, null)(ChatConversationContainer);
 
+export function ChatConversationContainer({ bodyshop, selectedConversation }) {
   const {
     loading: convoLoading,
     error: convoError,
@@ -29,123 +27,55 @@ export function ChatConversationContainer({ bodyshop, selectedConversation }) {
     nextFetchPolicy: "network-only"
   });
 
-  const updateCacheWithReadMessages = useCallback(
-    (conversationId, messageIds) => {
-      if (!conversationId || !messageIds || messageIds.length === 0) return;
+  const { loading, error, data } = useSubscription(CONVERSATION_SUBSCRIPTION_BY_PK, {
+    variables: { conversationId: selectedConversation }
+  });
 
-      // Mark individual messages as read
-      messageIds.forEach((messageId) => {
-        client.cache.modify({
-          id: client.cache.identify({ __typename: "messages", id: messageId }),
-          fields: {
-            read() {
-              return true; // Mark message as read
-            }
-          }
-        });
-      });
+  const [markingAsReadInProgress, setMarkingAsReadInProgress] = useState(false);
 
-      // Update aggregate unread count for the conversation
-      client.cache.modify({
-        id: client.cache.identify({ __typename: "conversations", id: conversationId }),
+  const [markConversationRead] = useMutation(MARK_MESSAGES_AS_READ_BY_CONVERSATION, {
+    variables: { conversationId: selectedConversation },
+    refetchQueries: ["UNREAD_CONVERSATION_COUNT"],
+    update(cache) {
+      cache.modify({
+        id: cache.identify({
+          __typename: "conversations",
+          id: selectedConversation
+        }),
         fields: {
-          messages_aggregate(existingAggregate) {
-            return {
-              ...existingAggregate,
-              aggregate: {
-                ...existingAggregate.aggregate,
-                count: 0 // No unread messages remaining
-              }
-            };
+          messages_aggregate(cached) {
+            return { aggregate: { count: 0 } };
           }
         }
       });
-    },
-    [client.cache]
-  );
-
-  // Handle WebSocket events
-  useEffect(() => {
-    if (!socket || !socket.connected) return;
-
-    const handleConversationChange = (data) => {
-      if (data.type === "conversation-marked-read") {
-        const { conversationId, messageIds } = data;
-        console.log("Conversation change received:", data);
-        updateCacheWithReadMessages(conversationId, messageIds);
-      }
-    };
-
-    socket.on("conversation-changed", handleConversationChange);
-
-    return () => {
-      socket.off("conversation-changed", handleConversationChange);
-    };
-  }, [socket, client, updateCacheWithReadMessages]);
-
-  // Handle joining/leaving conversation
-  useEffect(() => {
-    if (!socket || !socket.connected) return;
-
-    socket.emit("join-bodyshop-conversation", {
-      bodyshopId: bodyshop.id,
-      conversationId: selectedConversation
-    });
-
-    return () => {
-      socket.emit("leave-bodyshop-conversation", {
-        bodyshopId: bodyshop.id,
-        conversationId: selectedConversation
-      });
-    };
-  }, [selectedConversation, bodyshop, socket]);
-
-  // Handle marking conversation as read
-  const handleMarkConversationAsRead = async () => {
-    if (!convoData || !selectedConversation || markingAsReadInProgress) return;
-
-    const conversation = convoData.conversations_by_pk;
-    if (!conversation) {
-      console.warn(`No data found for conversation ID: ${selectedConversation}`);
-      return;
     }
+  });
 
-    const unreadMessageIds = conversation.messages
-      ?.filter((message) => !message.read && !message.isoutbound)
-      .map((message) => message.id);
+  const unreadCount =
+    data &&
+    data.messages &&
+    data.messages.reduce((acc, val) => {
+      return !val.read && !val.isoutbound ? acc + 1 : acc;
+    }, 0);
 
-    if (unreadMessageIds?.length > 0) {
+  const handleMarkConversationAsRead = async () => {
+    if (unreadCount > 0 && !!selectedConversation && !markingAsReadInProgress) {
       setMarkingAsReadInProgress(true);
-
-      try {
-        const payload = {
-          conversation,
-          imexshopid: bodyshop?.imexshopid,
-          bodyshopid: bodyshop?.id
-        };
-
-        console.log("Marking conversation as read:", payload);
-
-        await axios.post("/sms/markConversationRead", payload);
-
-        // Update local cache
-        updateCacheWithReadMessages(selectedConversation, unreadMessageIds);
-      } catch (error) {
-        console.error("Error marking conversation as read:", error.response?.data || error.message);
-      } finally {
-        setMarkingAsReadInProgress(false);
-      }
+      await markConversationRead({});
+      await axios.post("/sms/markConversationRead", {
+        conversationid: selectedConversation,
+        imexshopid: bodyshop.imexshopid
+      });
+      setMarkingAsReadInProgress(false);
     }
   };
 
   return (
     <ChatConversationComponent
-      subState={[convoLoading, convoError]}
+      subState={[loading || convoLoading, error || convoError]}
       conversation={convoData ? convoData.conversations_by_pk : {}}
-      messages={convoData ? convoData.conversations_by_pk.messages : []}
+      messages={data ? data.messages : []}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
     />
   );
 }
-
-export default connect(mapStateToProps, null)(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({
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = (dispatch) => ({});
-
-export function ChatLabel({ conversation, bodyshop }) {
+export default function ChatLabel({ conversation }) {
   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,55 +1,106 @@
+import Icon from "@ant-design/icons";
+import { Tooltip } from "antd";
+import i18n from "i18next";
+import dayjs from "../../utils/day";
 import React, { useEffect, useRef } from "react";
-import { Virtuoso } from "react-virtuoso";
-import { renderMessage } from "./renderMessage";
+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";
 
-const SCROLL_DELAY_MS = 50;
-const INITIAL_SCROLL_DELAY_MS = 100;
-
 export default function ChatMessageListComponent({ messages }) {
-  const virtuosoRef = useRef(null);
+  const virtualizedListRef = useRef(null);
 
-  // Scroll to the bottom after a short delay when the component mounts
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (virtuosoRef?.current?.scrollToIndex && messages?.length) {
-        virtuosoRef.current.scrollToIndex({
-          index: messages.length - 1,
-          behavior: "auto" // Instantly scroll to the bottom
-        });
-      }
-    }, INITIAL_SCROLL_DELAY_MS);
+  const _cache = new CellMeasurerCache({
+    fixedWidth: true,
+    // minHeight: 50,
+    defaultHeight: 100
+  });
 
-    // Cleanup the timeout on unmount
-    return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // ESLint is disabled for this line because we only want this to load once (valid exception)
+  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.
+  };
 
-  // Scroll to the bottom after the new messages are rendered
-  useEffect(() => {
-    if (virtuosoRef?.current?.scrollToIndex && messages?.length) {
-      const timeout = setTimeout(() => {
-        virtuosoRef.current.scrollToIndex({
-          index: messages.length - 1,
-          align: "end", // Ensure the last message is fully visible
-          behavior: "smooth" // Smooth scrolling
-        });
-      }, SCROLL_DELAY_MS); // Slight delay to ensure layout recalculates
+  useEffect(scrollToBottom, [messages]);
 
-      // Cleanup timeout on dependency changes
-      return () => clearTimeout(timeout);
-    }
-  }, [messages]); // Triggered when new messages are added
+  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>
+    );
+  };
 
   return (
     <div className="chat">
-      <Virtuoso
-        ref={virtuosoRef}
-        data={messages}
-        itemContent={(index) => renderMessage(messages, index)} // Pass `messages` to renderMessage
-        followOutput="smooth" // Ensure smooth scrolling when new data is appended
-        style={{ height: "100%", width: "100%" }}
-      />
+      <AutoSizer>
+        {({ height, width }) => (
+          <List
+            ref={virtualizedListRef}
+            width={width}
+            height={height}
+            rowHeight={_cache.rowHeight}
+            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,30 +1,37 @@
 .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;
   margin: 0.8rem 0rem;
-  overflow: hidden; // Ensure the content scrolls correctly
 }
 
 .messages {
+  //margin-top: 30px;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem; // Add padding to avoid edge clipping
 }
 
 .message {
   border-radius: 20px;
   padding: 0.25rem 0.8rem;
+  //margin-top: 5px;
+  // margin-bottom: 5px;
+  //display: inline-block;
 
   .message-img {
     max-width: 10rem;
@@ -49,7 +56,7 @@
   position: relative;
 }
 
-.yours .message:last-child:before {
+.yours .message.last:before {
   content: "";
   position: absolute;
   z-index: 0;
@@ -61,7 +68,7 @@
   border-bottom-right-radius: 15px;
 }
 
-.yours .message:last-child:after {
+.yours .message.last:after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -81,11 +88,12 @@
   color: white;
   margin-left: 25%;
   background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  background-attachment: fixed;
   position: relative;
   padding-bottom: 0.6rem;
 }
 
-.mine .message:last-child:before {
+.mine .message.last:before {
   content: "";
   position: absolute;
   z-index: 0;
@@ -94,10 +102,11 @@
   height: 20px;
   width: 20px;
   background: linear-gradient(to bottom, #00d0ea 0%, #0085d1 100%);
+  background-attachment: fixed;
   border-bottom-left-radius: 15px;
 }
 
-.mine .message:last-child:after {
+.mine .message.last:after {
   content: "";
   position: absolute;
   z-index: 1;

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

@@ -1,42 +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>
-            {message.image_path &&
-              message.image_path.map((i, idx) => (
-                <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
-                  <a href={i} target="__blank" rel="noopener noreferrer">
-                    <img alt="Received" className="message-img" src={i} />
-                  </a>
-                </div>
-              ))}
-            <div>{message.text}</div>
-          </div>
-        </Tooltip>
-        {message.status && (message.status === "sent" || message.status === "delivered") && (
-          <div className="message-status">
-            <Icon component={message.status === "sent" ? MdDone : MdDoneAll} className="message-icon" />
-          </div>
-        )}
-      </div>
-      {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,11 +1,11 @@
 import { InfoCircleOutlined, MessageOutlined, ShrinkOutlined, SyncOutlined } from "@ant-design/icons";
-import { useApolloClient, useLazyQuery } 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";
-import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
+import { CONVERSATION_LIST_QUERY, UNREAD_CONVERSATION_COUNT } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import { selectChatVisible, selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
@@ -13,88 +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 { socket } = useContext(SocketContext);
-  const client = useApolloClient(); // Apollo Client instance for cache operations
+  const [pollInterval, setpollInterval] = useState(0);
 
-  // Lazy query for conversations
-  const [getConversations, { loading, data, refetch }] = useLazyQuery(CONVERSATION_LIST_QUERY, {
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
+    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 } : {})
   });
 
-  // Socket connection status
+  const fcmToken = sessionStorage.getItem("fcmtoken");
+
   useEffect(() => {
-    const handleSocketStatus = () => {
-      if (socket?.connected) {
-        setPollInterval(15 * 60 * 1000); // 15 minutes
-      } else {
-        setPollInterval(60 * 1000); // 60 seconds
-      }
-    };
-
-    handleSocketStatus();
-
-    if (socket) {
-      socket.on("connect", handleSocketStatus);
-      socket.on("disconnect", handleSocketStatus);
+    if (fcmToken) {
+      setpollInterval(0);
+    } else {
+      setpollInterval(60000);
     }
+  }, [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 unreadCount = (() => {
-    try {
-      const cachedData = client.readQuery({
-        query: CONVERSATION_LIST_QUERY,
-        variables: { offset: 0 }
+  const loadMoreConversations = useCallback(() => {
+    if (data)
+      fetchMore({
+        variables: {
+          offset: data.conversations.length
+        }
       });
+  }, [data, fetchMore]);
 
-      if (!cachedData?.conversations) return 0;
-
-      // Aggregate unread message count
-      return cachedData.conversations.reduce((total, conversation) => {
-        const unread = conversation.messages_aggregate?.aggregate?.count || 0;
-        return total + unread;
-      }, 0);
-    } catch (error) {
-      console.warn("Unread count not found in cache:", error);
-      return 0; // Fallback if not in cache
-    }
-  })();
+  const unreadCount = unreadData?.messages_aggregate.aggregate.count || 0;
 
   return (
     <Badge count={unreadCount}>
@@ -120,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 };

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

@@ -2,27 +2,16 @@ 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({
-  bodyshop: selectBodyshop
-});
-
-const mapDispatchToProps = () => ({});
-
-export function ChatTagRoContainer({ conversation, bodyshop }) {
+export default function ChatTagRoContainer({ conversation }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const { socket } = useContext(SocketContext);
 
   const [loadRo, { loading, data }] = useLazyQuery(SEARCH_FOR_JOBS);
 
@@ -43,31 +32,7 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
 
   const handleInsertTag = (value, option) => {
     logImEXEvent("messaging_add_job_tag");
-
-    insertTag({
-      variables: { jobId: option.key }
-    }).then(() => {
-      if (socket) {
-        // Find the job details from the search data
-        const selectedJob = data?.search_jobs.find((job) => job.id === option.key);
-        if (!selectedJob) return;
-        const newJobConversation = {
-          __typename: "job_conversations",
-          jobid: selectedJob.id,
-          conversationid: conversation.id,
-          job: {
-            __typename: "jobs",
-            ...selectedJob
-          }
-        };
-        socket.emit("conversation-modified", {
-          conversationId: conversation.id,
-          bodyshopId: bodyshop.id,
-          type: "tag-added",
-          job_conversations: [newJobConversation]
-        });
-      }
-    });
+    insertTag({ variables: { jobId: option.key } });
     setOpen(false);
   };
 
@@ -95,5 +60,3 @@ export function ChatTagRoContainer({ conversation, bodyshop }) {
     </div>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChatTagRoContainer);

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 {
-  default as DateTimePicker,
-  default as FormDateTimePicker
-} from "../form-date-time-picker/form-date-time-picker.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import 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 (
-    <>
-      {!create && <FormFieldsChanged form={form} />}
+    <div>
+      <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 && (
-            <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+          {selectedJobState && (
+            <div>
+              <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+            </div>
           )}
-          {/* {<ContractLicenseDecodeButton form={form} />} */}
+          {
+            //<ContractLicenseDecodeButton form={form} />
+          }
         </Space>
-      </LayoutFormRow>
-      <LayoutFormRow noDivider={true}>
+      </div>
+      <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"
@@ -193,7 +196,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
                     }
                   ]}
                 >
-                  <DateTimePicker isDateOnly />
+                  <FormDatePicker />
                 </Form.Item>
                 {dlExpiresBeforeReturn && (
                   <Space style={{ color: "tomato" }}>
@@ -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>
@@ -270,7 +274,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputPhone />
         </Form.Item>
         <Form.Item label={t("contracts.fields.driver_dob")} name="driver_dob">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
       </LayoutFormRow>
       <ContractsRatesChangeButton form={form} />
@@ -311,6 +315,6 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-    </>
+    </div>
   );
 }

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

@@ -10,12 +10,16 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
 import CourtesyCarReadiness from "../courtesy-car-readiness-select/courtesy-car-readiness-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
-export default function CourtesyCarCreateFormComponent({ form, saveLoading, newCC }) {
+export default function CourtesyCarCreateFormComponent({
+  form,
+  saveLoading,
+  newCC,
+}) {
   const { t } = useTranslation();
   const client = useApolloClient();
 
@@ -157,16 +161,16 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
           <Input />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.purchasedate")} name="purchasedate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.servicestartdate")} name="servicestartdate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.serviceenddate")} name="serviceenddate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item label={t("courtesycars.fields.leaseenddate")} name="leaseenddate">
-          <DateTimePicker isDateOnly />
+          <FormDatePicker />
         </Form.Item>
       </LayoutFormRow>
 
@@ -224,7 +228,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
         </div>
         <div>
           <Form.Item label={t("courtesycars.fields.nextservicedate")} name="nextservicedate">
-            <DateTimePicker isDateOnly />
+            <FormDatePicker />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}>
             {() => {
@@ -256,7 +260,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
         </Form.Item>
         <div>
           <Form.Item label={t("courtesycars.fields.registrationexpires")} name="registrationexpires">
-            <DateTimePicker isDateOnly />
+            <FormDatePicker />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.registrationexpires !== c.registrationexpires}>
             {() => {
@@ -289,7 +293,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
               }
             ]}
           >
-            <DateTimePicker isDateOnly />
+            <FormDatePicker />
           </Form.Item>
           <Form.Item shouldUpdate={(p, c) => p.insuranceexpires !== c.insuranceexpires}>
             {() => {

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

@@ -2,7 +2,7 @@ import { Form, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 export default function CourtesyCarReturnModalComponent() {
   const { t } = useTranslation();
@@ -19,7 +19,7 @@ export default function CourtesyCarReturnModalComponent() {
           }
         ]}
       >
-        <DateTimePicker isDateOnly />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.kmend")}

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

@@ -1,14 +1,15 @@
 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();
 
 export default function JobLifecycleDashboardComponent({ data, bodyshop, ...cardProps }) {
+  console.log("🚀 ~ JobLifecycleDashboardComponent ~ bodyshop:", bodyshop);
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [lifecycleData, setLifecycleData] = useState(null);
@@ -46,11 +47,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",
@@ -147,7 +143,7 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
           >
             <div>
               {lifecycleData.summations.map((key) => (
-                <Tag key={key.status} color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
+                <Tag color={key.color} style={{ width: "13vh", padding: "4px", margin: "4px" }}>
                   <div
                     aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
                     title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
@@ -169,7 +165,6 @@ export default function JobLifecycleDashboardComponent({ data, bodyshop, ...card
               size="small"
               pagination={false}
               columns={columns}
-              rowKey={(record) => record.status}
               dataSource={lifecycleData.summations.sort((a, b) => b.value - a.value).slice(0, 3)}
             />
           </Card>

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

@@ -36,6 +36,9 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
     };
   });
 
+  console.log("Scheduled Out Today");
+  console.dir(scheduledOutToday);
+
   const tvFontSize = 18;
   const tvFontWeight = "bold";
 
@@ -86,6 +89,8 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
       sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
       sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => {
+        console.log("Render record out today");
+        console.dir(record);
         return record.ownerid ? (
           <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
             <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>

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

@@ -40,11 +40,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/dms-post-form/dms-post-form.component.jsx

@@ -14,6 +14,7 @@ import {
   Typography
 } from "antd";
 import Dinero from "dinero.js";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -21,12 +22,11 @@ import { createStructuredSelector } from "reselect";
 import { determineDmsType } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import i18n from "../../translations/i18n";
-import dayjs from "../../utils/day";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
 import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -89,7 +89,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
             job.area_of_damage && job.area_of_damage.impact1
               ? " " +
                 t("jobs.labels.dms.damageto", {
-                  area_of_damage: (job.area_of_damage && job.area_of_damage.impact1.padStart(2, "0")) || "UNKNOWN"
+                  area_of_damage: (job.area_of_damage && job.area_of_damage.impact1) || "UNKNOWN"
                 })
               : ""
           }`.slice(0, 239),
@@ -164,7 +164,7 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
                 <Input disabled />
               </Form.Item>
               <Form.Item name="inservicedate" label={t("jobs.fields.dms.inservicedate")}>
-                <DateTimePicker isDateOnly />
+                <FormDatePicker />
               </Form.Item>
             </LayoutFormRow>
             <Space>

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

@@ -4,14 +4,14 @@ import Markdown from "react-markdown";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
+import { FormDatePicker } from "../form-date-picker/form-date-picker.component";
 import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries";
 import { useMutation } from "@apollo/client";
 import { acceptEula } from "../../redux/user/user.actions";
 import { useTranslation } from "react-i18next";
-import 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";
 
 const Eula = ({ currentEula, currentUser, acceptEula }) => {
   const [formReady, setFormReady] = useState(false);
@@ -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")));
@@ -216,7 +216,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
               }
             ]}
           >
-            <DateTimePicker isDateOnly onChange={handleChange} onlyToday aria-label={t("eula.labels.date_accepted")} />
+            <FormDatePicker onChange={handleChange} onlyToday aria-label={t("eula.labels.date_accepted")} />
           </Form.Item>
         </Col>
       </Row>

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

@@ -0,0 +1,123 @@
+import { DatePicker } from "antd";
+import dayjs from "../../utils/day";
+import React, { useRef } from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
+
+const dateFormat = "MM/DD/YYYY";
+
+export function FormDatePicker({
+  bodyshop,
+  value,
+  onChange,
+  onBlur,
+  onlyFuture,
+  onlyToday,
+  isDateOnly = true,
+  ...restProps
+}) {
+  const ref = useRef();
+
+  const handleChange = (newDate) => {
+    if (value !== newDate && onChange) {
+      onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key.toLowerCase() === "t") {
+      if (onChange) {
+        onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
+      }
+    } else if (e.key.toLowerCase() === "enter") {
+      if (ref.current && ref.current.blur) ref.current.blur();
+    }
+  };
+
+  const handleBlur = (e) => {
+    const v = e.target.value;
+    if (!v) return;
+
+    const formats = [
+      "MMDDYY",
+      "MMDDYYYY",
+      "MM/DD/YY",
+      "MM/DD/YYYY",
+      "M/DD/YY",
+      "M/DD/YYYY",
+      "MM/D/YY",
+      "MM/D/YYYY",
+      "M/D/YY",
+      "M/D/YYYY",
+      "D/MM/YY",
+      "D/MM/YYYY",
+      "DD/M/YY",
+      "DD/M/YYYY",
+      "D/M/YY",
+      "D/M/YYYY"
+    ];
+
+    let _a;
+
+    // Iterate through formats to find the correct one
+    for (let format of formats) {
+      _a = dayjs(v, format);
+      if (v === _a.format(format)) {
+        break;
+      }
+    }
+
+    if (_a.isValid() && value && value.isValid && value.isValid()) {
+      _a.set({
+        hours: value.hours(),
+        minutes: value.minutes(),
+        seconds: value.seconds(),
+        milliseconds: value.milliseconds()
+      });
+    }
+
+    if (_a.isValid() && onChange) {
+      if (onlyFuture) {
+        if (dayjs().subtract(1, "day").isBefore(_a)) {
+          onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+        } else {
+          onChange(isDateOnly ? dayjs().format("YYYY-MM-DD") : dayjs());
+        }
+      } else {
+        onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+      }
+    }
+  };
+
+  return (
+    <div onKeyDown={handleKeyDown}>
+      <DatePicker
+        ref={ref}
+        value={value ? dayjs(value) : null}
+        onChange={handleChange}
+        format={dateFormat}
+        onBlur={onBlur || handleBlur}
+        showToday={false}
+        disabledTime
+        disabledDate={(d) => {
+          if (onlyToday) {
+            return !dayjs().isSame(d, "day");
+          } else if (onlyFuture) {
+            return dayjs().subtract(1, "day").isAfter(d);
+          }
+        }}
+        {...restProps}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { DatePicker } from "antd";
+import dayjs from "../../utils/day.js";
+import React, { useRef } from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(FormDateTimePickerEnhanced);
+
+const dateFormat = "MM/DD/YYYY h:mm a";
+
+export function FormDateTimePickerEnhanced({
+  bodyshop,
+  value,
+  onBlur,
+  onlyFuture,
+  onlyToday,
+  isDateOnly = true,
+  ...restProps
+}) {
+  const ref = useRef();
+  return (
+    <div>
+      <DatePicker
+        ref={ref}
+        value={value ? dayjs(value) : null}
+        format={dateFormat}
+        onBlur={onBlur}
+        showToday={false}
+        disabledDate={(d) => {
+          if (onlyToday) {
+            return !dayjs().isSame(d, "day");
+          } else if (onlyFuture) {
+            return dayjs().subtract(1, "day").isAfter(d);
+          }
+        }}
+        {...restProps}
+      />
+    </div>
+  );
+}

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

@@ -1,157 +1,46 @@
-import { DatePicker, Space, TimePicker } 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 React, { forwardRef } from "react";
+//import DatePicker from "react-datepicker";
+//import "react-datepicker/src/stylesheets/datepicker.scss";
+import { Space, TimePicker } from "antd";
 import dayjs from "../../utils/day";
-import { fuzzyMatchDate } from "./formats.js";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+//To be used as a form element only.
 
-const mapStateToProps = createStructuredSelector({
-  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);
-      }
-      setIsManualInput(false);
-    },
-    [onChange, bodyshop?.timezone]
-  );
-
-  const handleBlur = useCallback(
-    (e) => {
-      // Bail if this is not a manual input
-      if (!isManualInput) {
-        return;
-      }
-      // Reset manual input flag
-      setIsManualInput(false);
-
-      const v = e?.target?.value;
-
-      if (!v) return;
-
-      let parsedDate = isDateOnly ? fuzzyMatchDate(v)?.startOf("day") : fuzzyMatchDate(v);
-
-      if (parsedDate && onChange) {
-        onChange(parsedDate);
-      }
-    },
-    [isManualInput, isDateOnly, onChange]
-  );
-
-  const handleKeyDown = useCallback(
-    (e) => {
-      setIsManualInput(true);
-
-      if (e.key.toLowerCase() === "t" && onChange) {
-        e.preventDefault();
-        setIsManualInput(false);
-        onChange(dayjs());
-      } else if (e.key.toLowerCase() === "enter") {
-        handleBlur(e);
-      }
-    },
-    [onChange, handleBlur]
-  );
-
-  const handleDisabledDate = useCallback(
-    (current) => {
-      if (onlyToday) {
-        return !dayjs().isSame(current, "day");
-      } else if (onlyFuture) {
-        return dayjs().subtract(1, "day").isAfter(current);
-      }
-      return false;
-    },
-    [onlyToday, onlyFuture]
-  );
+const DateTimePicker = ({ value, onChange, onBlur, id, onlyFuture, ...restProps }, ref) => {
+  // const handleChange = (newDate) => {
+  //   if (value !== newDate && onChange) {
+  //     onChange(newDate);
+  //   }
+  // };
 
   return (
-    <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
-      {isSeparatedTime && (
-        <Space direction="vertical" style={{ width: "100%" }}>
-          <DatePicker
-            showTime={false}
-            format="MM/DD/YYYY"
-            value={value ? dayjs(value) : null}
-            onChange={handleChange}
-            placeholder={t("general.labels.date")}
-            onBlur={handleBlur}
-            disabledDate={handleDisabledDate}
-            isDateOnly={true}
-            {...restProps}
-          />
-          {value && (
-            <TimePicker
-              format="hh:mm a"
-              minuteStep={15}
-              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>
+    <Space direction="vertical" style={{ width: "100%" }} id={id}>
+      <FormDatePicker
+        {...restProps}
+        {...(onlyFuture && {
+          disabledDate: (d) => dayjs().subtract(1, "day").isAfter(d)
+        })}
+        value={value}
+        onBlur={onBlur}
+        onChange={onChange}
+        onlyFuture={onlyFuture}
+        isDateOnly={false}
+      />
+
+      <TimePicker
+        value={value ? dayjs(value) : null}
+        {...(onlyFuture && {
+          disabledDate: (d) => dayjs().isAfter(d)
+        })}
+        onChange={onChange}
+        disableSeconds={true}
+        minuteStep={15}
+        onBlur={onBlur}
+        format="hh:mm a"
+        {...restProps}
+      />
+    </Space>
   );
 };
 
-DateTimePicker.propTypes = {
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  id: PropTypes.string,
-  onlyFuture: PropTypes.bool,
-  onlyToday: PropTypes.bool,
-  isDateOnly: PropTypes.bool,
-  isSeparatedTime: PropTypes.bool
-};
-
-export default connect(mapStateToProps, null)(DateTimePicker);
+export default forwardRef(DateTimePicker);

client/src/components/form-date-time-picker/formats.js

@@ -1,63 +0,0 @@
-import dayjs from "../../utils/day";
-
-const dateFormats = [
-  "MMDDYYYY",
-  "MMDDYY",
-  "M/D/YYYY",
-  "MM/D/YYYY",
-  "M/DD/YYYY",
-  "MM/DD/YYYY",
-  "M/D/YY",
-  "MM/D/YY",
-  "M/DD/YY",
-  "MM/DD/YY"
-];
-
-const timeFormats = ["h:mm A", "h:mmA", "h A", "hA", "hh:mm A", "hh:mm:ss A"];
-
-const dateTimeFormats = [
-  ...["M/D/YYYY", "MM/D/YYYY", "M/DD/YYYY", "MM/DD/YYYY", "M/D/YY", "MM/D/YY", "M/DD/YY", "MM/DD/YY"].flatMap(
-    (dateFormat) => timeFormats.map((timeFormat) => `${dateFormat} ${timeFormat}`)
-  ),
-
-  ...["MMDDYYYY", "MMDDYY"].flatMap((dateFormat) => timeFormats.map((timeFormat) => `${dateFormat} ${timeFormat}`)),
-
-  "M/D/YYYY",
-  "MM/D/YYYY",
-  "M/DD/YYYY",
-  "MM/DD/YYYY",
-  "M/D/YY",
-  "MM/D/YY",
-  "M/DD/YY",
-  "MM/DD/YY",
-  "MMDDYYYY",
-  "MMDDYY"
-];
-
-const sanitizeInput = (input) =>
-  input
-    .trim()
-    .toUpperCase()
-    .replace(/\s*(am|pm)\s*/i, " $1")
-    .replaceAll(".", "/")
-    .replaceAll("-", "/");
-
-export const fuzzyMatchDate = (dateString) => {
-  const sanitizedInput = sanitizeInput(dateString);
-
-  for (const format of dateFormats) {
-    const parsedDate = dayjs(sanitizedInput, format, true);
-    if (parsedDate.isValid()) {
-      return parsedDate;
-    }
-  }
-
-  for (const format of dateTimeFormats) {
-    const parsedDateTime = dayjs(sanitizedInput, format, true);
-    if (parsedDateTime.isValid()) {
-      return parsedDateTime; // Return the dayjs object
-    }
-  }
-
-  return null; // If no matching format is found
-};

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
-      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([])}
-    >
+    <AutoComplete options={data} onSearch={handleSearch} 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
-      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);
-      }}
-    >
+    <AutoComplete options={options} onSearch={handleSearch} defaultActiveFirstOption>
       <Input.Search
         size="large"
         placeholder={t("general.labels.globalsearch")}