IO-3187 Admin Enhancements

add BCC

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

.gitignore

@@ -121,3 +121,10 @@ logs/oAuthClient-log.log
 /*.env.*
 .idea/*
 .idea
+
+# Vitest
+vitest-report*/ 
+vitest-coverage/
+*.vitest.log
+test-output.txt
+server/job/test/fixtures

Dockerfile

@@ -56,4 +56,5 @@ COPY . .
 EXPOSE 4000 9229
 
 # Start the application
-CMD ["nodemon", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]
+RUN echo "Starting the application..."
+CMD ["nodemon", "--ignore", "./server/job/test/fixtures", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]

_reference/localEmailViewer/package.json

@@ -11,8 +11,8 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "express": "^4.21.1",
-    "mailparser": "^3.7.1",
+    "express": "^5.1.0",
+    "mailparser": "^3.7.2",
     "node-fetch": "^3.3.2"
   }
 }

client/.env.development.imex

@@ -12,3 +12,5 @@ VITE_APP_AXIOS_BASE_API_URL=/api/
 VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"

client/.env.development.rome

@@ -14,3 +14,5 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_COUNTRY=USA
 VITE_APP_INSTANCE=ROME
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"

client/.gitignore

@@ -1,3 +1,14 @@
+# Vitest
+vitest-report*/ 
+vitest-coverage/
+*.vitest.log
+test-output.txt
+
+# Playwright
+playwright-report/
+test-results/
+playwright/.cache/
+*.playwright.log
 
 # Sentry Config File
 .sentryclirc

client/package.json

@@ -8,24 +8,23 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.22.3",
-    "@apollo/client": "^3.13.5",
+    "@ant-design/pro-layout": "^7.22.4",
+    "@apollo/client": "^3.13.6",
     "@emotion/is-prop-valid": "^1.3.1",
     "@fingerprintjs/fingerprintjs": "^4.6.1",
     "@firebase/analytics": "^0.10.12",
-    "@firebase/app": "^0.11.3",
-    "@firebase/auth": "^1.9.1",
+    "@firebase/app": "^0.11.4",
+    "@firebase/auth": "^1.10.0",
     "@firebase/firestore": "^4.7.10",
     "@firebase/messaging": "^0.12.17",
     "@jsreport/browser-client": "^3.1.0",
     "@reduxjs/toolkit": "^2.6.1",
-    "@sentry/cli": "^2.42.4",
-    "@sentry/react": "^9.9.0",
-    "@sentry/vite-plugin": "^3.2.2",
-    "@splitsoftware/splitio-react": "^2.0.1",
+    "@sentry/cli": "^2.43.0",
+    "@sentry/react": "^9.11.0",
+    "@sentry/vite-plugin": "^3.3.1",
+    "@splitsoftware/splitio-react": "^2.1.1",
     "@tanem/react-nprogress": "^5.0.53",
-    "@vitejs/plugin-react": "^4.3.4",
-    "antd": "^5.24.5",
+    "antd": "^5.24.6",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^4.2.0",
     "autosize": "^6.0.1",
@@ -58,7 +57,7 @@
     "react-dom": "^18.3.1",
     "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.1",
-    "react-grid-layout": "1.3.4",
+    "react-grid-layout": "^1.3.4",
     "react-i18next": "^15.4.1",
     "react-icons": "^5.5.0",
     "react-image-lightbox": "^5.1.4",
@@ -71,16 +70,16 @@
     "react-router-dom": "^6.30.0",
     "react-sticky": "^6.0.3",
     "react-virtuoso": "^4.12.5",
-    "recharts": "^2.15.0",
+    "recharts": "^2.15.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.86.0",
+    "sass": "^1.86.3",
     "socket.io-client": "^4.8.1",
-    "styled-components": "^6.1.16",
+    "styled-components": "^6.1.17",
     "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
     "vite-plugin-ejs": "^1.7.0",
@@ -100,7 +99,14 @@
     "build:production:imex": "env-cmd -f .env.production.imex npm run build",
     "build:production:rome": "env-cmd -f .env.production.rome npm run build",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
-    "eulaize": "node src/utils/eulaize.js"
+    "eulaize": "node src/utils/eulaize.js",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e:imex": "playwright test --config playwright.config.js",
+    "test:e2e:rome": "playwright test --config playwright.rome.config.js",
+    "test:e2e:imex:headed": "playwright test --config playwright.config.js --headed",
+    "test:e2e:rome:headed": "playwright test --config playwright.rome.config.js --headed",
+    "test:e2e:report": "playwright show-report"
   },
   "browserslist": {
     "production": [
@@ -124,29 +130,37 @@
     "@ant-design/icons": "^6.0.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.26.3",
-    "@dotenvx/dotenvx": "^1.39.0",
+    "@dotenvx/dotenvx": "^1.39.1",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.23.0",
-    "@sentry/webpack-plugin": "^3.2.2",
+    "@eslint/js": "^9.24.0",
+    "@playwright/test": "^1.51.1",
+    "@sentry/webpack-plugin": "^3.3.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "browserslist": "^4.24.4",
     "browserslist-to-esbuild": "^2.1.1",
     "chalk": "^5.4.1",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "globals": "^15.15.0",
+    "jsdom": "^26.0.0",
     "memfs": "^4.17.0",
     "os-browserify": "^0.3.0",
+    "playwright": "^1.51.1",
     "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^6.2.3",
+    "vite": "^6.2.5",
     "vite-plugin-babel": "^1.3.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-node-polyfills": "^0.23.0",
-    "vite-plugin-pwa": "^0.21.2",
+    "vite-plugin-pwa": "^1.0.0",
     "vite-plugin-style-import": "^2.0.0",
+    "vitest": "^3.1.1",
     "workbox-window": "^7.3.0"
   }
 }

client/playwright.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config({
+  path: "./.env.development.imex",
+  prefix: "TEST_"
+});
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  testMatch: "*.e2e.js",
+  timeout: 60 * 1000,
+  reporter: [["list"], ["html"]],
+  use: {
+    baseURL: "https://localhost:3000",
+    browser: "chromium",
+    ignoreHTTPSErrors: true
+  },
+  webServer: {
+    command: "npm run start:imex",
+    ignoreHTTPSErrors: true,
+    url: "https://localhost:3000/health", // Health check endpoint will tell us when the server is ready
+    reuseExistingServer: !process.env.CI // Reuse server locally, not in CI
+  }
+});

client/playwright.rome.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config({
+  path: "./.env.development.rome",
+  prefix: "TEST_"
+});
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  testMatch: "*.e2e.js",
+  timeout: 60 * 1000,
+  reporter: [["list"], ["html"]],
+  use: {
+    baseURL: "https://localhost:3000",
+    browser: "chromium",
+    ignoreHTTPSErrors: true
+  },
+  webServer: {
+    command: "npm run start:rome",
+    ignoreHTTPSErrors: true,
+    url: "https://localhost:3000/health", // Health check endpoint will tell us when the server is ready
+    reuseExistingServer: !process.env.CI // Reuse server locally, not in CI
+  }
+});

client/src/App/App.container.jsx

@@ -10,6 +10,7 @@ import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
 import themeProvider from "./themeProvider";
+import { CookiesProvider } from "react-cookie";
 
 // Base Split configuration
 const config = {
@@ -38,26 +39,28 @@ function AppContainer() {
   const { t } = useTranslation();
 
   return (
-    <ApolloProvider client={client}>
-      <ConfigProvider
-        input={{ autoComplete: "new-password" }}
-        locale={enLocale}
-        theme={themeProvider}
-        form={{
-          validateMessages: {
-            // eslint-disable-next-line no-template-curly-in-string
-            required: t("general.validation.required", { label: "${label}" })
-          }
-        }}
-      >
-        <GlobalLoadingBar />
-        <SplitFactoryProvider config={config}>
-          <SplitClientProvider>
-            <App />
-          </SplitClientProvider>
-        </SplitFactoryProvider>
-      </ConfigProvider>
-    </ApolloProvider>
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={{ autoComplete: "new-password" }}
+          locale={enLocale}
+          theme={themeProvider}
+          form={{
+            validateMessages: {
+              // eslint-disable-next-line no-template-curly-in-string
+              required: t("general.validation.required", { label: "${label}" })
+            }
+          }}
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
   );
 }
 

client/src/App/App.jsx

@@ -21,8 +21,8 @@ import "./App.styles.scss";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
-import { SocketProvider } from "../contexts/SocketIO/useSocket.jsx";
 import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";
+import SocketProvider from "../contexts/SocketIO/socketProvider.jsx";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -142,11 +142,10 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
     >
       <ProductFruitsWrapper
         currentUser={currentUser}
-        workspaceCode={InstanceRenderMgr({
-          imex: null,
-          rome: "9BkbEseqNqxw8jUH"
-        })}
+        bodyshop={bodyshop}
+        workspaceCode={bodyshop?.tours_enabled ? "9BkbEseqNqxw8jUH" : ""}
       />
+
       <NotificationProvider>
         <Routes>
           <Route

client/src/App/ProductFruitsWrapper.jsx

@@ -1,8 +1,16 @@
 import React from "react";
-import { ProductFruits } from "react-product-fruits";
 import PropTypes from "prop-types";
+import { ProductFruits } from "react-product-fruits";
+import dayjs from "dayjs";
+
+const ProductFruitsWrapper = React.memo(({ currentUser, bodyshop, workspaceCode }) => {
+  const featureProps = bodyshop?.features
+    ? Object.entries(bodyshop.features).reduce((acc, [key, value]) => {
+        acc[key] = value === true || (typeof value === "string" && dayjs(value).isAfter(dayjs()));
+        return acc;
+      }, {})
+    : {};
 
-const ProductFruitsWrapper = React.memo(({ currentUser, workspaceCode }) => {
   return (
     workspaceCode &&
     currentUser?.authorized === true &&
@@ -14,7 +22,8 @@ const ProductFruitsWrapper = React.memo(({ currentUser, workspaceCode }) => {
         language="en"
         user={{
           email: currentUser.email,
-          username: currentUser.email
+          username: currentUser.email,
+          props: featureProps
         }}
       />
     )
@@ -28,5 +37,6 @@ ProductFruitsWrapper.propTypes = {
     authorized: PropTypes.bool,
     email: PropTypes.string
   }),
-  workspaceCode: PropTypes.string
+  workspaceCode: PropTypes.string,
+  bodyshop: PropTypes.object
 };

client/src/components/alert/__snapshots__/alert.component.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Alert component should render Alert component 1`] = `ShallowWrapper {}`;

client/src/components/alert/alert.component.test.js

@@ -1,19 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import Alert from "./alert.component";
-
-describe("Alert component", () => {
-  let wrapper;
-  beforeEach(() => {
-    const mockProps = {
-      type: "error",
-      message: "Test error message."
-    };
-
-    wrapper = shallow(<Alert {...mockProps} />);
-  });
-
-  it("should render Alert component", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-});

client/src/components/alert/alert.component.test.jsx

@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import AlertComponent from "./alert.component";
+
+describe("AlertComponent", () => {
+  it("renders with default props", () => {
+    render(<AlertComponent message="Default Alert" />);
+    expect(screen.getByText("Default Alert")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveClass("ant-alert");
+  });
+
+  it("applies type prop correctly", () => {
+    render(<AlertComponent message="Success Alert" type="success" />);
+    const alert = screen.getByRole("alert");
+    expect(screen.getByText("Success Alert")).toBeInTheDocument();
+    expect(alert).toHaveClass("ant-alert-success");
+  });
+
+  it("displays description when provided", () => {
+    render(<AlertComponent message="Error Alert" description="Something went wrong" type="error" />);
+    expect(screen.getByText("Error Alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveClass("ant-alert-error");
+  });
+
+  it("is closable and shows icon when props are set", () => {
+    render(<AlertComponent message="Warning Alert" type="warning" showIcon closable />);
+    expect(screen.getByText("Warning Alert")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument(); // Close button
+  });
+});

client/src/components/allocations-assignment/__snapshots__/allocations-assignment.component.test.js.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AllocationsAssignmentComponent component should create an allocation on save 1`] = `ReactWrapper {}`;
-
-exports[`AllocationsAssignmentComponent component should render AllocationsAssignmentComponent component 1`] = `ReactWrapper {}`;

client/src/components/allocations-assignment/allocations-assignment.component.test.js

@@ -1,35 +0,0 @@
-import { mount } from "enzyme";
-import React from "react";
-import { MockBodyshop } from "../../utils/TestingHelpers";
-import { AllocationsAssignmentComponent } from "./allocations-assignment.component";
-
-describe("AllocationsAssignmentComponent component", () => {
-  let wrapper;
-
-  beforeEach(() => {
-    const mockProps = {
-      bodyshop: MockBodyshop,
-      handleAssignment: jest.fn(),
-      assignment: {},
-      setAssignment: jest.fn(),
-      visibilityState: [false, jest.fn()],
-      maxHours: 4
-    };
-
-    wrapper = mount(<AllocationsAssignmentComponent {...mockProps} />);
-  });
-
-  it("should render AllocationsAssignmentComponent component", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should render a list of employees", () => {
-    const empList = wrapper.find("#employeeSelector");
-    expect(empList.children()).to.have.lengthOf(2);
-  });
-
-  it("should create an allocation on save", () => {
-    wrapper.find("Button").simulate("click");
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -3,11 +3,11 @@ import { getToken } from "@firebase/messaging";
 import axios from "axios";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
   const { t } = useTranslation();

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

@@ -3,10 +3,10 @@ import { Button } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop

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

@@ -4,10 +4,10 @@ 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 { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop

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

@@ -3,11 +3,11 @@ import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { CONVERSATION_SUBSCRIPTION_BY_PK, GET_CONVERSATION_DETAILS } from "../../graphql/conversations.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,

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

@@ -4,11 +4,11 @@ import { Input, Spin, Tag, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop

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

@@ -1,7 +1,8 @@
 import { PictureFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Badge, Popover } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -9,6 +10,7 @@ import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
@@ -23,6 +25,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
 export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, conversation }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
 
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
     fetchPolicy: "network-only",
@@ -42,6 +51,10 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
     setSelectedMedia([]);
   }, [setSelectedMedia, conversation]);
 
+  //Knowingly taking on the technical debt of poor implementation below. Done this way to avoid an edge case where no component may be displayed.
+  //Cloudinary will be removed once the migration is completed.
+  //If Imageproxy is on, rely only on the LMS selector
+  //If not on, use the old methods.
   const content = (
     <div>
       {loading && <LoadingSpinner />}
@@ -49,17 +62,37 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}
-      {!bodyshop.uselocalmediaserver && data && (
-        <JobDocumentsGalleryExternal
-          data={data ? data.documents : []}
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-        />
-      )}
-      {bodyshop.uselocalmediaserver && open && (
-        <JobDocumentsLocalGalleryExternal
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-          jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
-        />
+
+      {Imgproxy.treatment === "on" ? (
+        <>
+          {!bodyshop.uselocalmediaserver && (
+            <JobsDocumentImgproxyGalleryExternal
+              jobId={conversation.job_conversations[0].jobid}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && open && (
+            <JobDocumentsLocalGalleryExternal
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {!bodyshop.uselocalmediaserver && data && (
+            <JobDocumentsGalleryExternal
+              data={data ? data.documents : []}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && open && (
+            <JobDocumentsLocalGalleryExternal
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}
+            />
+          )}
+        </>
       )}
     </div>
   );

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

@@ -5,7 +5,7 @@ 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 { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser

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

@@ -7,7 +7,7 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({

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

@@ -12,9 +12,9 @@ import ChatConversationListComponent from "../chat-conversation-list/chat-conver
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 
 import "./chat-popup.styles.scss";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,

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

@@ -8,10 +8,10 @@ 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 { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop

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

@@ -0,0 +1,122 @@
+import { UploadOutlined } from "@ant-design/icons";
+import { Progress, Result, Space, Upload } from "antd";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import formatBytes from "../../utils/formatbytes";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { handleUpload } from "./documents-upload-imgproxy.utility.js";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+
+export function DocumentsUploadImgproxyComponent({
+  children,
+  currentUser,
+  bodyshop,
+  jobId,
+  tagsArray,
+  billId,
+  callbackAfterUpload,
+  totalSize,
+  ignoreSizeLimit = false
+}) {
+  const { t } = useTranslation();
+  const [fileList, setFileList] = useState([]);
+  const notification = useNotification();
+
+  const pct = useMemo(() => {
+    return parseInt((totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100);
+  }, [bodyshop, totalSize]);
+
+  if (pct > 100 && !ignoreSizeLimit)
+    return (
+      <Result
+        status="error"
+        title={t("documents.labels.storageexceeded_title")}
+        subTitle={t("documents.labels.storageexceeded")}
+      />
+    );
+
+  const handleDone = (uid) => {
+    setTimeout(() => {
+      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
+    }, 2000);
+  };
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+
+  return (
+    <Upload.Dragger
+      multiple={true}
+      fileList={fileList}
+      disabled={!hasMediaAccess}
+      onChange={(f) => {
+        if (f.event && f.event.percent === 100) handleDone(f.file.uid);
+        setFileList(f.fileList);
+      }}
+      beforeUpload={(file, fileList) => {
+        if (ignoreSizeLimit) return true;
+        const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
+        const shouldStopUpload = (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >= 1;
+
+        //Check to see if old files plus newly uploaded ones will be too much.
+        if (shouldStopUpload) {
+          notification.error({
+            key: "cannotuploaddocuments",
+            message: t("documents.labels.upload_limitexceeded_title"),
+            description: t("documents.labels.upload_limitexceeded")
+          });
+          return Upload.LIST_IGNORE;
+        }
+        return true;
+      }}
+      customRequest={(ev) =>
+        handleUpload(
+          ev,
+          {
+            bodyshop: bodyshop,
+            uploaded_by: currentUser.email,
+            jobId: jobId,
+            billId: billId,
+            tagsArray: tagsArray,
+            callback: callbackAfterUpload
+          },
+          notification
+        )
+      }
+      accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
+      // showUploadList={false}
+    >
+      {children || (
+        <>
+          <p className="ant-upload-drag-icon">
+            <UploadOutlined />
+          </p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
+          {!ignoreSizeLimit && (
+            <Space wrap className="ant-upload-text">
+              <Progress type="dashboard" percent={pct} size="small" />
+              <span>
+                {t("documents.labels.usage", {
+                  percent: pct,
+                  used: formatBytes(totalSize),
+                  total: formatBytes(bodyshop && bodyshop.jobsizelimit)
+                })}
+              </span>
+            </Space>
+          )}
+        </>
+      )}
+    </Upload.Dragger>
+  );
+}
+
+export default connect(mapStateToProps, null)(DocumentsUploadImgproxyComponent);

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

@@ -0,0 +1,172 @@
+import axios from "axios";
+import exifr from "exifr";
+import i18n from "i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
+import client from "../../utils/GraphQLClient";
+
+//Context: currentUserEmail, bodyshop, jobid, invoiceid
+
+//Required to prevent headers from getting set and rejected from Cloudinary.
+var cleanAxios = axios.create();
+cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
+
+export const handleUpload = (ev, context, notification) => {
+  logImEXEvent("document_upload", { filetype: ev.file?.type });
+
+  const { onError, onSuccess, onProgress } = ev;
+  const { bodyshop, jobId } = context;
+
+  const fileName = ev.file?.name || ev.filename;
+
+  let extension = fileName.split(".").pop();
+  let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`;
+
+  uploadToS3(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification).catch(
+    (error) => {
+      console.error("Error uploading file to S3", error);
+      notification.error({
+        message: i18n.t("documents.errors.insert", {
+          message: error.message
+        })
+      });
+    }
+  );
+};
+
+//Handles only 1 file at a time.
+export const uploadToS3 = async (
+  key,
+  extension,
+  fileType,
+  file,
+  onError,
+  onSuccess,
+  onProgress,
+  context,
+  notification
+) => {
+  const { bodyshop, jobId, billId, uploaded_by, callback } = context;
+
+  //Get the signed url allowing us to PUT to S3.
+  const signedURLResponse = await axios.post("/media/imgproxy/sign", {
+    filenames: [key],
+    bodyshopid: bodyshop.id,
+    jobid: jobId
+  });
+
+  if (signedURLResponse.status !== 200) {
+    if (onError) onError(signedURLResponse.statusText);
+    notification.error({
+      message: i18n.t("documents.errors.getpresignurl", {
+        message: signedURLResponse.statusText
+      })
+    });
+    return;
+  }
+
+  //Key should be same as we provided to maintain backwards compatibility.
+  const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = signedURLResponse.data.signedUrls[0];
+
+  const options = {
+    onUploadProgress: (e) => {
+      if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
+    }
+  };
+
+  try {
+    const s3UploadResponse = await cleanAxios.put(preSignedUploadUrlToS3, file, options);
+    //Insert the document with the matching key.
+    let takenat;
+    if (fileType.includes("image")) {
+      try {
+        const exif = await exifr.parse(file);
+        takenat = exif && exif.DateTimeOriginal;
+      } catch (error) {
+        console.log("Unable to parse image file for EXIF Data", error.message);
+      }
+    }
+
+    const documentInsert = await client.mutate({
+      mutation: INSERT_NEW_DOCUMENT,
+      variables: {
+        docInput: [
+          {
+            ...(jobId ? { jobid: jobId } : {}),
+            ...(billId ? { billid: billId } : {}),
+            uploaded_by: uploaded_by,
+            key: s3Key,
+            type: fileType,
+            extension: s3UploadResponse.data.format || extension,
+            bodyshopid: bodyshop.id,
+            size: s3UploadResponse.data.bytes || file.size, //Leftover from Cloudinary. We don't do any optimization on upload, so it will always be file.size.
+            takenat
+          }
+        ]
+      }
+    });
+
+    if (!documentInsert.errors) {
+      if (onSuccess)
+        onSuccess({
+          uid: documentInsert.data.insert_documents.returning[0].id,
+          name: documentInsert.data.insert_documents.returning[0].name,
+          status: "done",
+          key: documentInsert.data.insert_documents.returning[0].key
+        });
+      notification.success({
+        key: "docuploadsuccess",
+        message: i18n.t("documents.successes.insert")
+      });
+      if (callback) {
+        callback();
+      }
+    } else {
+      if (onError) onError(JSON.stringify(documentInsert.errors));
+      notification.error({
+        message: i18n.t("documents.errors.insert", {
+          message: JSON.stringify(documentInsert.errors)
+        })
+      });
+      return;
+    }
+  } catch (error) {
+    console.log("Error uploading file to S3", error.message, error.stack);
+    notification.error({
+      message: i18n.t("documents.errors.insert", {
+        message: error.message
+      })
+    });
+    if (onError) onError(JSON.stringify(error.message));
+  }
+};
+
+function replaceAccents(str) {
+  // Verifies if the String has accents and replace them
+  if (str.search(/[\xC0-\xFF]/g) > -1) {
+    str = str
+      .replace(/[\xC0-\xC5]/g, "A")
+      .replace(/[\xC6]/g, "AE")
+      .replace(/[\xC7]/g, "C")
+      .replace(/[\xC8-\xCB]/g, "E")
+      .replace(/[\xCC-\xCF]/g, "I")
+      .replace(/[\xD0]/g, "D")
+      .replace(/[\xD1]/g, "N")
+      .replace(/[\xD2-\xD6\xD8]/g, "O")
+      .replace(/[\xD9-\xDC]/g, "U")
+      .replace(/[\xDD]/g, "Y")
+      .replace(/[\xDE]/g, "P")
+      .replace(/[\xE0-\xE5]/g, "a")
+      .replace(/[\xE6]/g, "ae")
+      .replace(/[\xE7]/g, "c")
+      .replace(/[\xE8-\xEB]/g, "e")
+      .replace(/[\xEC-\xEF]/g, "i")
+      .replace(/[\xF1]/g, "n")
+      .replace(/[\xF2-\xF6\xF8]/g, "o")
+      .replace(/[\xF9-\xFC]/g, "u")
+      .replace(/[\xFE]/g, "p")
+      .replace(/[\xFD\xFF]/g, "y");
+  }
+  return str;
+}

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

@@ -10,6 +10,8 @@ import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
 import JobsDocumentsLocalGalleryExternalComponent from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -23,6 +25,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(EmailDocumentsCompon
 
 export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState, bodyshop }) {
   const { t } = useTranslation();
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
 
   const [selectedMedia, setSelectedMedia] = selectedMediaState;
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
@@ -46,17 +55,37 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
         10485760 - new Blob([form.getFieldValue("html")]).size ? (
         <div style={{ color: "red" }}>{t("general.errors.sizelimit")}</div>
       ) : null}
-      {!bodyshop.uselocalmediaserver && data && (
-        <JobDocumentsGalleryExternal
-          data={data ? data.documents : []}
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-        />
-      )}
-      {bodyshop.uselocalmediaserver && (
-        <JobsDocumentsLocalGalleryExternalComponent
-          externalMediaState={[selectedMedia, setSelectedMedia]}
-          jobId={emailConfig.jobid}
-        />
+
+      {Imgproxy.treatment === "on" ? (
+        <>
+          {!bodyshop.uselocalmediaserver && data && (
+            <JobsDocumentImgproxyGalleryExternal
+              jobId={emailConfig.jobid}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && (
+            <JobsDocumentsLocalGalleryExternalComponent
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={emailConfig.jobid}
+            />
+          )}
+        </>
+      ) : (
+        <>
+          {!bodyshop.uselocalmediaserver && data && (
+            <JobDocumentsGalleryExternal
+              data={data ? data.documents : []}
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+            />
+          )}
+          {bodyshop.uselocalmediaserver && (
+            <JobsDocumentsLocalGalleryExternalComponent
+              externalMediaState={[selectedMedia, setSelectedMedia]}
+              jobId={emailConfig.jobid}
+            />
+          )}
+        </>
       )}
     </div>
   );

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

@@ -20,6 +20,7 @@ function FeatureWrapper({
   children,
   upsellComponent,
   bypass,
+  // eslint-disable-next-line no-unused-vars
   ...restProps
 }) {
   const { t } = useTranslation();
@@ -78,7 +79,11 @@ export function HasFeatureAccess({ featureName, bodyshop, bypass, debug = false
     }
     return true;
   }
-  return bodyshop?.features?.allAccess || dayjs(bodyshop?.features[featureName]).isAfter(dayjs());
+  return (
+    bodyshop?.features?.allAccess ||
+    bodyshop?.features?.[featureName] ||
+    dayjs(bodyshop?.features[featureName]).isAfter(dayjs())
+  );
 }
 
 export default connect(mapStateToProps, null)(FeatureWrapper);

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

@@ -40,7 +40,6 @@ import { RiSurveyLine } from "react-icons/ri";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
 import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
@@ -51,6 +50,7 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 import NotificationCenterContainer from "../notification-center/notification-center.container.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 // Redux mappings
 const mapStateToProps = createStructuredSelector({

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

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";

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

@@ -6,7 +6,8 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
+
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions.js";

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

@@ -1,9 +1,9 @@
 import { Col, Row } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobReconciliationBillsTable from "../job-reconciliation-bills-table/job-reconciliation-bills-table.component";
 import JobReconciliationPartsTable from "../job-reconciliation-parts-table/job-reconciliation-parts-table.component";
 import JobReconciliationTotals from "../job-reconciliation-totals/job-reconciliation-totals.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 export default function JobReconciliationModalComponent({ job, bills }) {
   const jobLineState = useState([]);
@@ -20,7 +20,7 @@ export default function JobReconciliationModalComponent({ job, bills }) {
 
   const filterFunction = InstanceRenderManager({
     imex: (j) =>
-      (j.part_type !== null && j.part_type !== "PAE") ||
+      (j.part_type !== null && j.part_type !== "PAE" && j.act_price !== 0 && j.part_qty !== 0) ||
       (j.line_desc && j.line_desc.toLowerCase().includes("towing") && j.lbr_op === "OP13") ||
       j.db_ref === "936004", //ADD SHIPPING LINE.
     rome: (j) =>

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

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
@@ -133,6 +133,16 @@ export function JobsDetailHeaderActions({
   const { socket } = useSocket();
   const notification = useNotification();
 
+  const isDevEnv = import.meta.env.DEV;
+  const isProdEnv = import.meta.env.PROD;
+  const userEmail = currentUser?.email || "";
+
+  const devEmails = ["imex.dev", "rome.dev"];
+  const prodEmails = ["imex.prod", "rome.prod", "imex.test", "rome.test"];
+
+  const hasValidEmail = (emails) => emails.some((email) => userEmail.endsWith(email));
+  const canSubmitForTesting = (isDevEnv && hasValidEmail(devEmails)) || (isProdEnv && hasValidEmail(prodEmails));
+
   const {
     treatments: { ImEXPay }
   } = useSplitTreatments({
@@ -171,7 +181,7 @@ export function JobsDetailHeaderActions({
       { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
       (newJobId) => {
         history(`/manage/jobs/${newJobId}`);
-        notification["success"]({
+        notification.success({
           message: t("jobs.successes.duplicated")
         });
       },
@@ -181,7 +191,7 @@ export function JobsDetailHeaderActions({
   const handleDuplicateConfirm = () =>
     DuplicateJob(client, job.id, { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported }, (newJobId) => {
       history(`/manage/jobs/${newJobId}`);
-      notification["success"]({
+      notification.success({
         message: t("jobs.successes.duplicated")
       });
     });
@@ -217,13 +227,13 @@ export function JobsDetailHeaderActions({
     const result = await deleteJob({ variables: { id: job.id } });
 
     if (!result.errors) {
-      notification["success"]({
+      notification.success({
         message: t("jobs.successes.delete")
       });
       //go back to jobs list.
       history(`/manage/`);
     } else {
-      notification["error"]({
+      notification.error({
         message: t("jobs.errors.deleted", {
           error: JSON.stringify(result.errors)
         })
@@ -275,9 +285,9 @@ export function JobsDetailHeaderActions({
         });
 
         if (!result.errors) {
-          notification["success"]({ message: t("csi.successes.created") });
+          notification.success({ message: t("csi.successes.created") });
         } else {
-          notification["error"]({
+          notification.error({
             message: t("csi.errors.creating", {
               message: JSON.stringify(result.errors)
             })
@@ -316,7 +326,7 @@ export function JobsDetailHeaderActions({
               `${window.location.protocol}//${window.location.host}/csi/${result.data.insert_csi.returning[0].id}`
             );
           } else {
-            notification["error"]({
+            notification.error({
               message: t("messaging.error.invalidphone")
             });
           }
@@ -328,7 +338,7 @@ export function JobsDetailHeaderActions({
           );
         }
       } else {
-        notification["error"]({
+        notification.error({
           message: t("csi.errors.notconfigured")
         });
       }
@@ -358,7 +368,7 @@ export function JobsDetailHeaderActions({
           });
           setMessage(`${window.location.protocol}//${window.location.host}/csi/${job.csiinvites[0].id}`);
         } else {
-          notification["error"]({
+          notification.error({
             message: t("messaging.error.invalidphone")
           });
         }
@@ -398,7 +408,7 @@ export function JobsDetailHeaderActions({
     });
 
     if (!result.errors) {
-      notification["success"]({
+      notification.success({
         message: t("jobs.successes.voided")
       });
       insertAuditTrail({
@@ -409,7 +419,7 @@ export function JobsDetailHeaderActions({
       //go back to jobs list.
       history(`/manage/`);
     } else {
-      notification["error"]({
+      notification.error({
         message: t("jobs.errors.voiding", {
           error: JSON.stringify(result.errors)
         })
@@ -442,7 +452,7 @@ export function JobsDetailHeaderActions({
         console.log("handle -> XML", QbXmlResponse);
       } catch (error) {
         console.log("Error getting QBXML from Server.", error);
-        notification["error"]({
+        notification.error({
           message: t("jobs.errors.exporting", {
             error: "Unable to retrieve QBXML. " + JSON.stringify(error.message)
           })
@@ -460,7 +470,7 @@ export function JobsDetailHeaderActions({
         });
       } catch (error) {
         console.log("Error connecting to quickbooks or partner.", error);
-        notification["error"]({
+        notification.error({
           message: t("jobs.errors.exporting-partner")
         });
 
@@ -556,7 +566,7 @@ export function JobsDetailHeaderActions({
       }
     });
     if (!jobUpdate.errors) {
-      notification["success"]({
+      notification.success({
         message: t("appointments.successes.canceled")
       });
       insertAuditTrail({
@@ -931,11 +941,11 @@ export function JobsDetailHeaderActions({
         });
 
         if (!result.errors) {
-          notification["success"]({
+          notification.success({
             message: t("jobs.successes.partsqueue")
           });
         } else {
-          notification["error"]({
+          notification.error({
             message: t("jobs.errors.saving", {
               error: JSON.stringify(result.errors)
             })
@@ -1111,6 +1121,27 @@ export function JobsDetailHeaderActions({
     });
   }
 
+  if (canSubmitForTesting) {
+    menuItems.push({
+      key: "submitfortesting",
+      id: "job-actions-submitfortesting",
+      label: t("menus.jobsactions.submit-for-testing"),
+      onClick: async () => {
+        try {
+          await axios.post("/job/totals-recorder", { id: job.id });
+          notification.success({
+            message: t("general.messages.submit-for-testing")
+          });
+        } catch (err) {
+          console.error(`Error submitting job for testing: ${err?.message}`);
+          notification.error({
+            message: t("general.errors.submit-for-testing-error")
+          });
+        }
+      }
+    });
+  }
+
   const menu = {
     items: menuItems,
     key: "popovermenu"

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

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { GET_JOB_BY_PK_QUICK_INTAKE, JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
@@ -12,7 +13,6 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
@@ -46,7 +46,16 @@ export function JobsDetailHeaderActionsToggleProduction({
       if (data?.jobs_by_pk) {
         form.setFieldsValue({
           actual_in: data.jobs_by_pk.actual_in ? data.jobs_by_pk.actual_in : dayjs(),
-          scheduled_completion: data.jobs_by_pk.scheduled_completion,
+          scheduled_completion: data.jobs_by_pk.scheduled_completion
+            ? data.jobs_by_pk.scheduled_completion
+            : data.jobs_by_pk.labhrs &&
+              data.jobs_by_pk.larhrs &&
+              dayjs().businessDaysAdd(
+                (data.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs ||
+                  0 + data.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs ||
+                  0) / bodyshop.target_touchtime,
+                "day"
+              ),
           actual_completion: data.jobs_by_pk.actual_completion,
           scheduled_delivery: data.jobs_by_pk.scheduled_delivery,
           actual_delivery: data.jobs_by_pk.actual_delivery

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

@@ -19,7 +19,13 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsDownloadButton);
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 export function JobsDocumentsDownloadButton({ bodyshop, galleryImages, identifier }) {
   const { t } = useTranslation();
   const [download, setDownload] = useState(null);

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

@@ -17,7 +17,13 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsGalleryReassign);
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 export function JobsDocumentsGalleryReassign({ bodyshop, galleryImages, callback }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();

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

@@ -1,29 +1,34 @@
 import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Col, Row, Space } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import DocumentsUploadComponent from "../documents-upload/documents-upload.component";
 import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
 import JobsDocumentsGalleryReassign from "./jobs-document-gallery.reassign.component";
 import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
 import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.selectall.component";
 
-import Lightbox from "react-image-lightbox";
-import "react-image-lightbox/style.css";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({});
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 function JobsDocumentsComponent({
   bodyshop,
   data,
@@ -114,6 +119,7 @@ function JobsDocumentsComponent({
     );
     setgalleryImages(documents);
   }, [data, setgalleryImages, t]);
+
   const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
   const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
   return (
@@ -137,7 +143,6 @@ function JobsDocumentsComponent({
             </Card>
           </Col>
         )}
-
         <Col span={24}>
           <Card>
             <DocumentsUploadComponent

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

@@ -2,29 +2,77 @@ import { useQuery } from "@apollo/client";
 import React from "react";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
+import JobDocumentsImgProxy from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobDocuments from "./jobs-documents-gallery.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsContainer);
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
+export function JobsDocumentsContainer({
+  jobId,
+  billId,
+  documentsList,
+  billsCallback,
+  refetchOverride,
+  ignoreSizeLimit,
+  bodyshop
+}) {
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
 
-export default function JobsDocumentsContainer({ jobId, billId, documentsList, billsCallback }) {
   const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
     variables: { jobId: jobId },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !!billId
+    skip: Imgproxy.treatment === "on" || !!billId
   });
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent type="error" message={error.message} />;
 
-  return (
-    <JobDocuments
-      data={(data && data.documents) || documentsList || []}
-      downloadIdentifier={data && data.jobs_by_pk.ro_number}
-      totalSize={data && data.documents_aggregate.aggregate.sum.size}
-      billId={billId}
-      jobId={jobId}
-      refetch={refetch}
-      billsCallback={billsCallback}
-    />
-  );
+  if (Imgproxy.treatment === "on") {
+    return (
+      <JobDocumentsImgProxy
+        data={(data && data.documents) || documentsList || []}
+        downloadIdentifier={data && data.jobs_by_pk.ro_number}
+        totalSize={data && data.documents_aggregate.aggregate.sum.size}
+        billId={billId}
+        jobId={jobId}
+        refetch={refetchOverride || refetch}
+        billsCallback={billsCallback}
+        ignoreSizeLimit={ignoreSizeLimit}
+      />
+    );
+  } else {
+    return (
+      <JobDocuments
+        data={(data && data.documents) || documentsList || []}
+        downloadIdentifier={data && data.jobs_by_pk.ro_number}
+        totalSize={data && data.documents_aggregate.aggregate.sum.size}
+        billId={billId}
+        jobId={jobId}
+        refetch={refetchOverride || refetch}
+        billsCallback={billsCallback}
+        ignoreSizeLimit={ignoreSizeLimit}
+      />
+    );
+  }
 }

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

@@ -5,8 +5,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-//Context: currentUserEmail, bodyshop, jobid, invoiceid
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 export default function JobsDocumentsDeleteButton({ galleryImages, deletionCallback }) {
   const { t } = useTranslation();
   const notification = useNotification();

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

@@ -3,6 +3,13 @@ import { Gallery } from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
 import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
 function JobsDocumentGalleryExternal({
   data,
 

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

@@ -2,6 +2,14 @@ import { Button, Space } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
+
 export default function JobsDocumentsGallerySelectAllComponent({ galleryImages, setGalleryImages }) {
   const { t } = useTranslation();
 

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.download.component.jsx

@@ -0,0 +1,87 @@
+import { Button, Space } from "antd";
+import axios from "axios";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import cleanAxios from "../../utils/CleanAxios";
+import formatBytes from "../../utils/formatbytes";
+//import yauzl from "yauzl";
+
+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))
+});
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyDownloadButton);
+
+export function JobsDocumentsImgproxyDownloadButton({ bodyshop, galleryImages, identifier }) {
+  const { t } = useTranslation();
+  const [download, setDownload] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const imagesToDownload = [
+    ...galleryImages.images.filter((image) => image.isSelected),
+    ...galleryImages.other.filter((image) => image.isSelected)
+  ];
+
+  function downloadProgress(progressEvent) {
+    setDownload((currentDownloadState) => {
+      return {
+        downloaded: progressEvent.loaded || 0,
+        speed: (progressEvent.loaded || 0) - ((currentDownloadState && currentDownloadState.downloaded) || 0)
+      };
+    });
+  }
+  function standardMediaDownload(bufferData) {
+    const a = document.createElement("a");
+    const url = window.URL.createObjectURL(new Blob([bufferData]));
+    a.href = url;
+    a.download = `${identifier || "documents"}.zip`;
+    a.click();
+  }
+  const handleDownload = async () => {
+    logImEXEvent("jobs_documents_download");
+    setLoading(true);
+    const zipUrl = await axios({
+      url: "/media/imgproxy/download",
+      method: "POST",
+      data: { documentids: imagesToDownload.map((_) => _.id) }
+    });
+
+    const theDownloadedZip = await cleanAxios({
+      url: zipUrl.data.url,
+      method: "GET",
+      responseType: "arraybuffer",
+      onDownloadProgress: downloadProgress
+    });
+    setLoading(false);
+    setDownload(null);
+
+    standardMediaDownload(theDownloadedZip.data);
+  };
+
+  return (
+    <>
+      <Button loading={download || loading} disabled={imagesToDownload.length < 1} onClick={handleDownload}>
+        <Space>
+          <span>{t("documents.actions.download")}</span>
+          {download && <span>{`(${formatBytes(download.downloaded)} @ ${formatBytes(download.speed)} / second)`}</span>}
+        </Space>
+      </Button>
+    </>
+  );
+}

client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx

@@ -0,0 +1,134 @@
+import { useApolloClient } from "@apollo/client";
+import { Button, Form, Popover, Space } from "antd";
+import axios from "axios";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { GET_DOC_SIZE_BY_JOB } from "../../graphql/documents.queries.js";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import JobSearchSelect from "../job-search-select/job-search-select.component.jsx";
+import { isFunction } from "lodash";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyGalleryReassign);
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+export function JobsDocumentsImgproxyGalleryReassign({ bodyshop, galleryImages, callback }) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const notification = useNotification();
+
+  const selectedImages = useMemo(() => {
+    return [
+      ...galleryImages.images.filter((image) => image.isSelected),
+      ...galleryImages.other.filter((image) => image.isSelected)
+    ];
+  }, [galleryImages]);
+  const client = useApolloClient();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleFinish = async ({ jobid }) => {
+    setLoading(true);
+
+    //Check to see if the space remaining on the new job is sufficient. If it isn't cancel this.
+    const newJobData = await client.query({
+      query: GET_DOC_SIZE_BY_JOB,
+      variables: { jobId: jobid }
+    });
+
+    const transferedDocSizeTotal = selectedImages.reduce((acc, val) => acc + val.size, 0);
+
+    const shouldPreventTransfer =
+      bodyshop.jobsizelimit - newJobData.data.documents_aggregate.aggregate.sum.size < transferedDocSizeTotal;
+
+    if (shouldPreventTransfer) {
+      notification.error({
+        key: "cannotuploaddocuments",
+        message: t("documents.labels.reassign_limitexceeded_title"),
+        description: t("documents.labels.reassign_limitexceeded")
+      });
+      setLoading(false);
+      return;
+    }
+
+    const res = await axios.post("/media/imgproxy/rename", {
+      tojobid: jobid,
+      documents: selectedImages.map((i) => {
+        //Need to check if the current key folder is null, or another job.
+        const currentKeys = i.key.split("/");
+        currentKeys[1] = jobid;
+        currentKeys.join("/");
+        return {
+          id: i.id,
+          from: i.key,
+          to: currentKeys.join("/"),
+          extension: i.extension,
+          type: i.type
+        };
+      })
+    });
+    //Add in confirmation & errors.
+    if (isFunction(callback)) callback();
+
+    if (res.errors) {
+      notification.error({
+        message: t("documents.errors.updating", {
+          message: JSON.stringify(res.errors)
+        })
+      });
+    }
+    if (!res.mutationResult?.errors) {
+      notification.success({
+        message: t("documents.successes.updated")
+      });
+    }
+    setOpen(false);
+    setLoading(false);
+  };
+
+  const popContent = (
+    <div>
+      <Form onFinish={handleFinish} layout="vertical" form={form}>
+        <Form.Item
+          label={t("documents.labels.newjobid")}
+          style={{ width: "20rem" }}
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+          name={"jobid"}
+        >
+          <JobSearchSelect notExported={false} notInvoiced={false} />
+        </Form.Item>
+      </Form>
+      <Space>
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.submit")}
+        </Button>
+        <Button onClick={() => setOpen(false)}>{t("general.actions.cancel")}</Button>
+      </Space>
+    </div>
+  );
+
+  return (
+    <Popover content={popContent} open={open}>
+      <Button disabled={selectedImages.length < 1} onClick={() => setOpen(true)} loading={loading}>
+        {t("documents.actions.reassign")}
+      </Button>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,266 @@
+import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Col, Row, Space } from "antd";
+import axios from "axios";
+import i18n from "i18next";
+import { isFunction } from "lodash";
+import { useCallback, useEffect, useState } from "react";
+import { Gallery } from "react-grid-gallery";
+import { useTranslation } from "react-i18next";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import DocumentsUploadImgproxyComponent from "../documents-upload-imgproxy/documents-upload-imgproxy.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import JobsDocumentsDownloadButton from "./jobs-document-imgproxy-gallery.download.component";
+import JobsDocumentsGalleryReassign from "./jobs-document-imgproxy-gallery.reassign.component";
+import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component";
+import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+function JobsDocumentsImgproxyComponent({
+  bodyshop,
+  data,
+  jobId,
+  refetch,
+  billId,
+  billsCallback,
+  totalSize,
+  downloadIdentifier,
+  ignoreSizeLimit
+}) {
+  const [galleryImages, setGalleryImages] = useState({ images: [], other: [] });
+  const { t } = useTranslation();
+  const [modalState, setModalState] = useState({ open: false, index: 0 });
+
+  const fetchThumbnails = useCallback(() => {
+    fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId });
+  }, [jobId, setGalleryImages]);
+
+  useEffect(() => {
+    if (data) {
+      fetchThumbnails();
+    }
+  }, [data, fetchThumbnails]);
+
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+  const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
+  return (
+    <div>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <Space wrap>
+            <Button
+              onClick={() => {
+                //Handle any doc refresh.
+
+                isFunction(refetch) && refetch();
+
+                //Do the imgproxy refresh too
+                fetchThumbnails();
+              }}
+            >
+              <SyncOutlined />
+            </Button>
+            <JobsDocumentsGallerySelectAllComponent galleryImages={galleryImages} setGalleryImages={setGalleryImages} />
+            <JobsDocumentsDownloadButton galleryImages={galleryImages} identifier={downloadIdentifier} />
+            <JobsDocumentsDeleteButton
+              galleryImages={galleryImages}
+              deletionCallback={billsCallback || fetchThumbnails || refetch}
+            />
+            {!billId && (
+              <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={fetchThumbnails || refetch} />
+            )}
+          </Space>
+        </Col>
+        {!hasMediaAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
+            </Card>
+          </Col>
+        )}
+        <Col span={24}>
+          <Card>
+            <DocumentsUploadImgproxyComponent
+              jobId={jobId}
+              totalSize={totalSize}
+              billId={billId}
+              callbackAfterUpload={billsCallback || fetchThumbnails || refetch}
+              ignoreSizeLimit={ignoreSizeLimit}
+            />
+          </Card>
+        </Col>
+        {hasMediaAccess && !hasMobileAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent upsell={upsellEnum().media.mobile} />
+            </Card>
+          </Col>
+        )}
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-images")}>
+            <Gallery
+              images={galleryImages.images}
+              onClick={(index, item) => {
+                setModalState({ open: true, index: index });
+                // window.open(
+                //   item.fullsize,
+                //   "_blank",
+                //   "toolbar=0,location=0,menubar=0"
+                // );
+              }}
+              onSelect={(index, image) => {
+                setGalleryImages({
+                  ...galleryImages,
+                  images: galleryImages.images.map((g, idx) =>
+                    index === idx ? { ...g, isSelected: !g.isSelected } : g
+                  )
+                });
+              }}
+            />
+          </Card>
+        </Col>
+        <Col span={24}>
+          <Card title={t("jobs.labels.documents-other")}>
+            <Gallery
+              images={galleryImages.other}
+              thumbnailStyle={() => {
+                return {
+                  backgroundImage: <FileExcelFilled />,
+                  height: "100%",
+                  width: "100%",
+                  cursor: "pointer"
+                };
+              }}
+              onClick={(index) => {
+                window.open(galleryImages.other[index].source, "_blank", "toolbar=0,location=0,menubar=0");
+              }}
+              onSelect={(index) => {
+                setGalleryImages({
+                  ...galleryImages,
+                  other: galleryImages.other.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g))
+                });
+              }}
+            />
+          </Card>
+        </Col>
+        {modalState.open && (
+          <Lightbox
+            toolbarButtons={[
+              <EditFilled
+                key="edit"
+                onClick={() => {
+                  const newWindow = window.open(
+                    `${window.location.protocol}//${window.location.host}/edit?documentId=${
+                      galleryImages.images[modalState.index].id
+                    }`,
+                    "_blank",
+                    "noopener,noreferrer"
+                  );
+                  if (newWindow) newWindow.opener = null;
+                }}
+              />
+            ]}
+            mainSrc={galleryImages.images[modalState.index].fullsize}
+            nextSrc={galleryImages.images[(modalState.index + 1) % galleryImages.images.length].fullsize}
+            prevSrc={
+              galleryImages.images[(modalState.index + galleryImages.images.length - 1) % galleryImages.images.length]
+                .fullsize
+            }
+            onCloseRequest={() => setModalState({ open: false, index: 0 })}
+            onMovePrevRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + galleryImages.images.length - 1) % galleryImages.images.length
+              })
+            }
+            onMoveNextRequest={() =>
+              setModalState({
+                ...modalState,
+                index: (modalState.index + 1) % galleryImages.images.length
+              })
+            }
+          />
+        )}
+      </Row>
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyComponent);
+
+export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => {
+  const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
+  const documents = result.data.reduce(
+    (acc, value) => {
+      if (value.type.startsWith("image")) {
+        acc.images.push({
+          src: value.thumbnailUrl,
+          fullsize: value.originalUrl,
+          height: 225,
+          width: 225,
+          isSelected: false,
+          key: value.key,
+          extension: value.extension,
+          id: value.id,
+          type: value.type,
+          size: value.size,
+          tags: [{ value: value.type, title: value.type }]
+        });
+      } else {
+        const fileName = value.key.split("/").pop();
+        acc.other.push({
+          source: value.originalUrlViaProxyPath,
+          src: value.thumbnailUrl,
+          fullsize: value.presignedGetUrl,
+          tags: [
+            {
+              value: fileName,
+              title: fileName
+            },
+
+            { value: value.type, title: value.type },
+            ...(value.bill
+              ? [
+                  {
+                    value: value.bill.vendor.name,
+                    title: i18n.t("vendors.fields.name")
+                  },
+                  { value: value.bill.date, title: i18n.t("bills.fields.date") },
+                  {
+                    value: value.bill.invoice_number,
+                    title: i18n.t("bills.fields.invoice_number")
+                  }
+                ]
+              : [])
+          ],
+          height: 225,
+          width: 225,
+          isSelected: false,
+          extension: value.extension,
+          key: value.key,
+          id: value.id,
+          type: value.type,
+          size: value.size
+        });
+      }
+      return acc;
+    },
+    { images: [], other: [] }
+  );
+
+  setStateCallback(imagesOnly ? documents.images : documents);
+};

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

@@ -0,0 +1,37 @@
+import { useQuery } from "@apollo/client";
+import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobDocuments from "./jobs-documents-imgproxy-gallery.component";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyContainer({ jobId, billId, documentsList, billsCallback }) {
+  const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: { jobId: jobId },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    skip: !!billId
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent type="error" message={error.message} />;
+
+  return (
+    <JobDocuments
+      data={(data && data.documents) || documentsList || []}
+      downloadIdentifier={data && data.jobs_by_pk.ro_number}
+      totalSize={data && data.documents_aggregate.aggregate.sum.size}
+      billId={billId}
+      jobId={jobId}
+      refetch={refetch}
+      billsCallback={billsCallback}
+    />
+  );
+}

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

@@ -0,0 +1,75 @@
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { Button, Popconfirm } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { isFunction } from "lodash";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyDeleteButton({ galleryImages, deletionCallback }) {
+  const { t } = useTranslation();
+  const notification = useNotification();
+
+  const imagesToDelete = [
+    ...galleryImages.images.filter((image) => image.isSelected),
+    ...galleryImages.other.filter((image) => image.isSelected)
+  ];
+  const [loading, setLoading] = useState(false);
+
+  const handleDelete = async () => {
+    logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
+    try {
+      setLoading(true);
+      const res = await axios.post("/media/imgproxy/delete", {
+        ids: imagesToDelete.map((d) => d.id)
+      });
+
+      if (res.data.error) {
+        notification.error({
+          message: t("documents.errors.deleting", {
+            error: JSON.stringify(res.data.error.response.errors)
+          })
+        });
+      } else {
+        notification.success({
+          key: "docdeletedsuccesfully",
+          message: t("documents.successes.delete")
+        });
+
+        if (isFunction(deletionCallback)) deletionCallback();
+      }
+    } catch (error) {
+      notification.error({
+        message: t("documents.errors.deleting", {
+          error: error.message
+        })
+      });
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Popconfirm
+      disabled={imagesToDelete.length < 1}
+      icon={<QuestionCircleOutlined style={{ color: "red" }} />}
+      onConfirm={handleDelete}
+      title={t("documents.labels.confirmdelete")}
+      okText={t("general.actions.delete")}
+      okButtonProps={{ danger: true }}
+      cancelText={t("general.actions.cancel")}
+    >
+      <Button disabled={imagesToDelete.length < 1} loading={loading}>
+        {t("documents.actions.delete")}
+      </Button>
+    </Popconfirm>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { Gallery } from "react-grid-gallery";
+import { fetchImgproxyThumbnails } from "./jobs-documents-imgproxy-gallery.component";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+function JobsDocumentImgproxyGalleryExternal({ jobId, externalMediaState }) {
+  const [galleryImages, setgalleryImages] = externalMediaState;
+
+  useEffect(() => {
+    if (jobId) fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId, imagesOnly: true });
+  }, [jobId, setgalleryImages]);
+
+  return (
+    <div className="clearfix">
+      <Gallery
+        images={galleryImages}
+        backdropClosesModal={true}
+        onSelect={(index, image) => {
+          setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
+        }}
+      />
+    </div>
+  );
+}
+
+export default JobsDocumentImgproxyGalleryExternal;

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

@@ -0,0 +1,63 @@
+import { Button, Space } from "antd";
+import { useTranslation } from "react-i18next";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyGallerySelectAllComponent({ galleryImages, setGalleryImages }) {
+  const { t } = useTranslation();
+
+  const handleSelectAll = () => {
+    setGalleryImages({
+      ...galleryImages,
+      other: galleryImages.other.map((i) => {
+        return { ...i, isSelected: true };
+      }),
+      images: galleryImages.images.map((i) => {
+        return { ...i, isSelected: true };
+      })
+    });
+  };
+  const handleSelectAllImages = () => {
+    setGalleryImages({
+      ...galleryImages,
+
+      images: galleryImages.images.map((i) => {
+        return { ...i, isSelected: true };
+      })
+    });
+  };
+  const handleSelectAllDocuments = () => {
+    setGalleryImages({
+      ...galleryImages,
+      other: galleryImages.other.map((i) => {
+        return { ...i, isSelected: true };
+      })
+    });
+  };
+  const handleDeselectAll = () => {
+    setGalleryImages({
+      ...galleryImages,
+      other: galleryImages.other.map((i) => {
+        return { ...i, isSelected: false };
+      }),
+      images: galleryImages.images.map((i) => {
+        return { ...i, isSelected: false };
+      })
+    });
+  };
+
+  return (
+    <Space wrap>
+      <Button onClick={handleSelectAll}>{t("general.actions.selectall")}</Button>
+      <Button onClick={handleSelectAllImages}>{t("documents.actions.selectallimages")}</Button>
+      <Button onClick={handleSelectAllDocuments}>{t("documents.actions.selectallotherdocuments")}</Button>
+      <Button onClick={handleDeselectAll}>{t("general.actions.deselectall")}</Button>
+    </Space>
+  );
+}

client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.styles.scss

@@ -0,0 +1,10 @@
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

client/src/components/notification-center/notification-center.container.jsx

@@ -3,10 +3,10 @@ import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
-import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import day from "../../utils/day.js";
+import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 // This will be used to poll for notifications when the socket is disconnected
 const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,16 +1,17 @@
 import { DeleteFilled, DownOutlined, WarningFilled } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import PartsOrderModalPriceChange from "./parts-order-modal-price-change.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -32,7 +33,7 @@ export function PartsOrderModalComponent({ bodyshop, vendorList, sendTypeState,
   });
 
   const { t } = useTranslation();
-  const handleClick = ({ item }) => {
+  const handleClick = ({ item, key, keyPath }) => {
     form.setFieldsValue({ comments: item.props.value });
   };
 
@@ -97,18 +98,17 @@ export function PartsOrderModalComponent({ bodyshop, vendorList, sendTypeState,
             <Checkbox />
           </Form.Item>
         )}
-        {!isReturn && (
-          <Form.Item name="order_type" initialValue="parts_order" label={t("parts_orders.labels.order_type")}>
-            <Radio.Group disabled={sendType === "oec"}>
-              <Radio value={"parts_order"}>{t("parts_orders.labels.parts_order")}</Radio>
-              <Radio value={"sublet"}>{t("parts_orders.labels.sublet_order")}</Radio>
-            </Radio.Group>
-          </Form.Item>
-        )}
+
+        <Form.Item name="order_type" initialValue="parts_order" label={t("parts_orders.labels.order_type")}>
+          <Radio.Group disabled={sendType === "oec"}>
+            <Radio value={"parts_order"}>{t("parts_orders.labels.parts_order")}</Radio>
+            <Radio value={"sublet"}>{t("parts_orders.labels.sublet_order")}</Radio>
+          </Radio.Group>
+        </Form.Item>
       </LayoutFormRow>
       <Divider orientation="left">{t("parts_orders.labels.inthisorder")}</Divider>
       <Form.List name={["parts_order_lines", "data"]}>
-        {(fields, { remove, move }) => {
+        {(fields, { add, remove, move }) => {
           return (
             <div>
               {fields.map((field, index) => (

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

@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -12,7 +12,7 @@ import { QUERY_KANBAN_SETTINGS } from "../../graphql/user.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ProductionBoardKanbanComponent from "./production-board-kanban.component";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import { logImEXEvent } from "../../firebase/firebase.utils.js";
 import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions.js";

client/src/components/production-list-table/production-list-table.container.jsx

@@ -10,7 +10,7 @@ import {
 import ProductionListTable from "./production-list-table.component";
 import _ from "lodash";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 export default function ProductionListTableContainer({ bodyshop, subscriptionType = "direct" }) {
   const client = useApolloClient();

client/src/components/profile-my/profile-my.component.jsx

@@ -8,7 +8,7 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
 import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.utils";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import NotificationSettingsForm from "../notification-settings/notification-settings-form.component.jsx";
 
 const mapStateToProps = createStructuredSelector({

client/src/contexts/SocketIO/socketProvider.jsx

@@ -1,4 +1,5 @@
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+// SocketProvider.js
+import { useEffect, useRef, useState } from "react";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
 import { store } from "../../redux/store";
@@ -15,10 +16,7 @@ import {
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-
-const SocketContext = createContext(null);
-
-const INITIAL_NOTIFICATIONS = 10;
+import { SocketContext, INITIAL_NOTIFICATIONS } from "./useSocket.js";
 
 /**
  * Socket Provider - Scenario Notifications / Web Socket related items
@@ -216,7 +214,6 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
       };
 
       const handleNotification = (data) => {
-        // Scenario Notifications have been disabled, bail.
         if (Realtime_Notifications_UI?.treatment !== "on") {
           return;
         }
@@ -336,7 +333,6 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
       };
 
       const handleSyncNotificationRead = ({ notificationId, timestamp }) => {
-        // Scenario Notifications have been disabled, bail.
         if (Realtime_Notifications_UI?.treatment !== "on") {
           return;
         }
@@ -378,7 +374,6 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
       };
 
       const handleSyncAllNotificationsRead = ({ timestamp }) => {
-        // Scenario Notifications have been disabled, bail.
         if (Realtime_Notifications_UI?.treatment !== "on") {
           return;
         }
@@ -490,11 +485,4 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
   );
 };
 
-const useSocket = () => {
-  const context = useContext(SocketContext);
-  // NOTE: Not sure if we absolutely require this, does cause slipups on dev env
-  if (!context) throw new Error("useSocket must be used within a SocketProvider");
-  return context;
-};
-
-export { SocketContext, SocketProvider, INITIAL_NOTIFICATIONS, useSocket };
+export default SocketProvider;

client/src/contexts/SocketIO/useSocket.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+const SocketContext = createContext(null);
+
+const INITIAL_NOTIFICATIONS = 10;
+
+const useSocket = () => {
+  const context = useContext(SocketContext);
+  if (!context) throw new Error("useSocket must be used within a SocketProvider");
+  return context;
+};
+
+export { SocketContext, INITIAL_NOTIFICATIONS, useSocket };

client/src/graphql/bodyshop.queries.js

@@ -57,6 +57,7 @@ export const QUERY_BODYSHOP = gql`
       logo_img_path
       md_ro_statuses
       md_order_statuses
+      tours_enabled
       md_functionality_toggles
       shopname
       state
@@ -186,6 +187,7 @@ export const UPDATE_SHOP = gql`
         phone
         federal_tax_id
         id
+        tours_enabled
         insurance_vendor_id
         logo_img_path
         md_ro_statuses

client/src/graphql/jobs.queries.js

@@ -2570,6 +2570,20 @@ export const GET_JOB_BY_PK_QUICK_INTAKE = gql`
       actual_completion
       scheduled_delivery
       actual_delivery
+      labhrs: joblines_aggregate(where: { _and: [{ mod_lbr_ty: { _neq: "LAR" } }, { removed: { _eq: false } }] }) {
+        aggregate {
+          sum {
+            mod_lb_hrs
+          }
+        }
+      }
+      larhrs: joblines_aggregate(where: { _and: [{ mod_lbr_ty: { _eq: "LAR" } }, { removed: { _eq: false } }] }) {
+        aggregate {
+          sum {
+            mod_lb_hrs
+          }
+        }
+      }
     }
   }
 `;

client/src/graphql/parts-orders.queries.js

@@ -78,6 +78,9 @@ export const QUERY_PARTS_ORDER_OEC = gql`
         }
         ro_number
         clm_no
+        cieca_stl
+        cieca_ttl
+        cieca_pfl
         asgn_no
         asgn_date
         state_tax_rate
@@ -164,6 +167,7 @@ export const QUERY_PARTS_ORDER_OEC = gql`
         loss_desc
         loss_of_use
         loss_type
+        materials
         ownr_addr1
         ownr_addr2
         ownr_city

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -56,7 +56,7 @@ import { DateTimeFormat } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 import JobWatcherToggleContainer from "../../components/job-watcher-toggle/job-watcher-toggle.container.jsx";
 
 const mapStateToProps = createStructuredSelector({

client/src/pages/manage/manage.page.component.jsx

@@ -20,7 +20,6 @@ import PartnerPingComponent from "../../components/partner-ping/partner-ping.com
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 import { requestForToken } from "../../firebase/firebase.utils";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
@@ -29,6 +28,7 @@ import WssStatusDisplayComponent from "../../components/wss-status-display/wss-s
 import { selectAlerts } from "../../redux/application/application.selectors.js";
 import { addAlerts } from "../../redux/application/application.actions.js";
 import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.js";
 
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 

client/src/pages/temporary-docs/temporary-docs.component.jsx

@@ -1,14 +1,15 @@
 import { useQuery } from "@apollo/client";
 import React from "react";
 import AlertComponent from "../../components/alert/alert.component";
-import JobsDocumentsComponent from "../../components/jobs-documents-gallery/jobs-documents-gallery.component";
+import JobsDocumentsContainer from "../../components/jobs-documents-gallery/jobs-documents-gallery.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_TEMPORARY_DOCS } from "../../graphql/documents.queries";
 
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gallery/jobs-documents-local-gallery.container";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -19,10 +20,18 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(TemporaryDocsComponent);
 
 export function TemporaryDocsComponent({ bodyshop }) {
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
+
   const { loading, error, data, refetch } = useQuery(QUERY_TEMPORARY_DOCS, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: bodyshop.uselocalmediaserver
+    skip: Imgproxy.treatment === "on"
   });
 
   if (loading) return <LoadingSpinner />;
@@ -32,12 +41,14 @@ export function TemporaryDocsComponent({ bodyshop }) {
     return <JobsDocumentsLocalGallery job={{ id: "temporary" }} />;
   }
   return (
-    <JobsDocumentsComponent
-      data={data ? data.documents : []}
-      jobId={null}
-      billId={null}
-      refetch={refetch}
-      ignoreSizeLimit
-    />
+    <>
+      <JobsDocumentsContainer
+        documentsList={data ? data.documents : []}
+        jobId={null}
+        billId={null}
+        refetchOverride={refetch}
+        ignoreSizeLimit
+      />
+    </>
   );
 }

client/src/redux/user/user.sagas.js

@@ -340,6 +340,7 @@ export function* SetAuthLevelFromShopDetails({ payload }) {
         args: [],
         imex: () => {
           window.$crisp.push(["set", "user:company", [payload.shopname]]);
+          window.$crisp.push(["set", "session:segments", [[`region:${payload.region_config}`]]]);
           if (authRecord[0] && authRecord[0].user.validemail) {
             window.$crisp.push(["set", "user:email", [authRecord[0].user.email]]);
           }

client/src/setupTests.js

@@ -1,4 +0,0 @@
-import { configure } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-
-configure({ adapter: new Adapter() });

client/src/translations/en_us/common.json

@@ -1220,7 +1220,8 @@
       "errors": {
         "fcm": "You must allow notification permissions to have real time messaging.  Click to try again.",
         "notfound": "No record was found.",
-        "sizelimit": "The selected items exceed the size limit."
+        "sizelimit": "The selected items exceed the size limit.",
+        "submit-for-testing": "Error submitting Job for testing."
       },
       "itemtypes": {
         "contract": "CC Contract",
@@ -1322,7 +1323,8 @@
         "partnernotrunning": "{{app}} has detected that the partner is not running. Please ensure it is running to enable full functionality.",
         "rbacunauth": "You are not authorized to view this content. Please reach out to your shop manager to change your access level.",
         "unsavedchanges": "You have unsaved changes.",
-        "unsavedchangespopup": "You have unsaved changes. Are you sure you want to leave?"
+        "unsavedchangespopup": "You have unsaved changes. Are you sure you want to leave?",
+        "submit-for-testing": "Submitted Job for testing successfully."
       },
       "validation": {
         "dateRangeExceeded": "The date range has been exceeded.",
@@ -2314,7 +2316,8 @@
         "duplicate": "Duplicate this Job",
         "duplicatenolines": "Duplicate this Job without Repair Data",
         "newcccontract": "Create Courtesy Car Contract",
-        "void": "Void Job"
+        "void": "Void Job",
+        "submit-for-testing": "Submit for Testing"
       },
       "jobsdetail": {
         "claimdetail": "Claim Details",
@@ -3679,7 +3682,8 @@
         "signinerror": {
           "auth/user-disabled": "User account disabled. ",
           "auth/user-not-found": "A user with this email does not exist.",
-          "auth/wrong-password": "The email and password combination you provided is incorrect."
+          "auth/wrong-password": "The email and password combination you provided is incorrect.",
+          "auth/invalid-email": "A user with this email does not exist."
         }
       }
     },

client/src/translations/es/common.json

@@ -1220,7 +1220,8 @@
       "errors": {
         "fcm": "",
         "notfound": "",
-        "sizelimit": ""
+        "sizelimit": "",
+        "submit-for-testing": ""
       },
       "itemtypes": {
         "contract": "",
@@ -1322,7 +1323,8 @@
         "partnernotrunning": "",
         "rbacunauth": "",
         "unsavedchanges": "Usted tiene cambios no guardados.",
-        "unsavedchangespopup": ""
+        "unsavedchangespopup": "",
+        "submit-for-testing": ""
       },
       "validation": {
         "dateRangeExceeded": "",
@@ -2314,7 +2316,8 @@
         "duplicate": "",
         "duplicatenolines": "",
         "newcccontract": "",
-        "void": ""
+        "void": "",
+        "submit-for-testing": ""
       },
       "jobsdetail": {
         "claimdetail": "Detalles de la reclamación",
@@ -3679,7 +3682,8 @@
         "signinerror": {
           "auth/user-disabled": "",
           "auth/user-not-found": "",
-          "auth/wrong-password": ""
+          "auth/wrong-password": "",
+          "auth/invalid-email": ""
         }
       }
     },

client/src/translations/fr/common.json

@@ -1220,7 +1220,8 @@
       "errors": {
         "fcm": "",
         "notfound": "",
-        "sizelimit": ""
+        "sizelimit": "",
+        "submit-for-testing": ""
       },
       "itemtypes": {
         "contract": "",
@@ -1322,7 +1323,9 @@
         "partnernotrunning": "",
         "rbacunauth": "",
         "unsavedchanges": "Vous avez des changements non enregistrés.",
-        "unsavedchangespopup": ""
+        "unsavedchangespopup": "",
+        "submit-for-testing": ""
+
       },
       "validation": {
         "dateRangeExceeded": "",
@@ -2314,7 +2317,8 @@
         "duplicate": "",
         "duplicatenolines": "",
         "newcccontract": "",
-        "void": ""
+        "void": "",
+        "submit-for-testing": ""
       },
       "jobsdetail": {
         "claimdetail": "Détails de la réclamation",
@@ -3679,7 +3683,8 @@
         "signinerror": {
           "auth/user-disabled": "",
           "auth/user-not-found": "",
-          "auth/wrong-password": ""
+          "auth/wrong-password": "",
+          "auth/invalid-email": ""
         }
       }
     },

client/src/utils/TestingHelpers.js

@@ -1,139 +0,0 @@
-export const MockBodyshop = {
-  address1: "123 Fake St",
-  address2: "Unit #100",
-  city: "Vancouver",
-  country: "Canada",
-  created_at: "2019-12-10T20:03:06.420853+00:00",
-  email: "snaptsoft@gmail.com",
-  federal_tax_id: "GST10150492",
-  id: "52b7357c-0edd-4c95-85c3-dfdbcdfad9ac",
-  insurance_vendor_id: "F123456",
-  logo_img_path: "https://www.snapt.ca/assets/logo-placeholder.png",
-  md_ro_statuses: {
-    statuses: [
-      "Open",
-      "Scheduled",
-      "Arrived",
-      "Repair Plan",
-      "Parts",
-      "Body",
-      "Prep",
-      "Paint",
-      "Reassembly",
-      "Sublet",
-      "Detail",
-      "Completed",
-      "Delivered",
-      "Invoiced",
-      "Exported"
-    ],
-    open_statuses: ["Open", "Scheduled", "Arrived", "Repair Plan", "Parts", "Body", "Prep", "Paint"],
-    default_arrived: "Arrived",
-    default_exported: "Exported",
-    default_imported: "Open",
-    default_invoiced: "Invoiced",
-    default_completed: "Completed",
-    default_delivered: "Delivered",
-    default_scheduled: "Scheduled"
-  },
-  md_order_statuses: {
-    statuses: ["Ordered", "Received", "Canceled", "Backordered"],
-    default_bo: "Backordered",
-    default_ordered: "Ordered",
-    default_canceled: "Canceled",
-    default_received: "Received"
-  },
-  shopname: "Testing Collision",
-  state: "BC",
-  state_tax_id: "PST1000-2991",
-  updated_at: "2020-03-23T22:06:03.509544+00:00",
-  zip_post: "V6B 1M9",
-  region_config: "CA_BC",
-  md_responsibility_centers: {
-    costs: [
-      "Aftermarket",
-      "ATS",
-      "Body",
-      "Detail",
-      "Daignostic",
-      "Electrical",
-      "Chrome",
-      "Frame",
-      "Mechanical",
-      "Refinish",
-      "Structural",
-      "Existing",
-      "Glass",
-      "LKQ",
-      "OEM",
-      "OEM Partial",
-      "Re-cored",
-      "Remanufactured",
-      "Other",
-      "Sublet",
-      "Towing"
-    ],
-    profits: [
-      "Aftermarket",
-      "ATS",
-      "Body",
-      "Detail",
-      "Daignostic",
-      "Electrical",
-      "Chrome",
-      "Frame",
-      "Mechanical",
-      "Refinish",
-      "Structural",
-      "Existing",
-      "Glass",
-      "LKQ",
-      "OEM",
-      "OEM Partial",
-      "Re-cored",
-      "Remanufactured",
-      "Other",
-      "Sublet",
-      "Towing"
-    ],
-    defaults: {
-      ATS: "ATS",
-      LAB: "Body",
-      LAD: "Diagnostic",
-      LAE: "Electrical",
-      LAF: "Frame",
-      LAG: "Glass",
-      LAM: "Mechanical",
-      LAR: "Refinish",
-      LAS: "Structural",
-      LAU: "Detail",
-      PAA: "Aftermarket",
-      PAC: "Chrome",
-      PAL: "LKQ",
-      PAM: "Remanufactured",
-      PAN: "OEM",
-      PAO: "Other",
-      PAP: "OEM Partial",
-      PAR: "16",
-      TOW: "Towing"
-    }
-  },
-  employees: [
-    {
-      id: "075b744c-8919-49ca-abb2-ccd51040326d",
-      first_name: "Patrick",
-      last_name: "BODY123",
-      employee_number: "101",
-      cost_center: "Body",
-      __typename: "employees"
-    },
-    {
-      id: "8cc787d3-1cfe-49d3-8a15-8469cd5c2e41",
-      first_name: "Patrick",
-      last_name: "Painter",
-      employee_number: "10211",
-      cost_center: "REFINISH",
-      __typename: "employees"
-    }
-  ]
-};

client/tests/Button.test.jsx

@@ -0,0 +1,14 @@
+// Button.test.jsx
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Button } from "antd";
+import "antd/dist/reset.css"; // Optional: include if needed for styling reset
+
+describe("AntD Button", () => {
+  it("renders with correct text", () => {
+    render(<Button>Click me</Button>);
+    const button = screen.getByRole("button", { name: /click me/i });
+    expect(button).toBeInTheDocument();
+  });
+});

client/tests/e2e/homepage.e2e.js

@@ -0,0 +1,6 @@
+import { test, expect } from "@playwright/test";
+
+test("homepage loads correctly", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("h1")).toContainText("ImEX Online");
+});

client/tests/e2e/signin.e2e.js

@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/test";
+import { login } from "./utils/login";
+
+test.describe("SignInComponent", () => {
+  test("successfully logs in with valid credentials", async ({ page }) => {
+    const email = process.env.TEST_USERNAME;
+    const password = process.env.TEST_PASSWORD;
+
+    await login(page, { email, password });
+
+    // Additional assertions after login (optional)
+    await expect(page).toHaveURL(/\/manage\//);
+  });
+
+  test("displays error on invalid credentials", async ({ page }) => {
+    await page.goto("/"); // Adjust if login route differs
+
+    // Fill form with invalid credentials
+    await page.fill('input[placeholder="Username"]', "wronguser@example.com");
+    await page.fill('input[placeholder="Password"]', "wrongpassword");
+    await page.click("button.login-btn");
+
+    // Check for error alert
+    const alert = page.locator(".ant-alert-error");
+    await expect(alert).toBeVisible();
+    await expect(alert).toContainText("A user with this email does not exist.");
+  });
+});

client/tests/e2e/utils/login.js

@@ -0,0 +1,21 @@
+import { expect } from "@playwright/test";
+
+export async function login(page, { email, password }) {
+  // Navigate to the login page
+  await page.goto("/"); // Adjust if your login route differs (e.g., '/login')
+
+  // Fill email field
+  await page.fill('input[placeholder="Username"]', email); // Matches Ant Design Input placeholder
+
+  // Fill password field
+  await page.fill('input[placeholder="Password"]', password);
+
+  // Click login button
+  await page.click("button.login-btn");
+
+  // Wait for navigation or success indicator (e.g., redirect to /manage/)
+  await page.waitForURL(/\/manage\//, { timeout: 10000 }); // Adjust based on redirect
+
+  // Verify successful login (e.g., check for a dashboard element)
+  await expect(page.locator("text=Manage")).toBeVisible(); // Adjust to your app’s post-login UI
+}

client/tests/setup.js

@@ -0,0 +1,5 @@
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+afterEach(() => cleanup());

client/tests/setupI18n.js

@@ -0,0 +1,27 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en_Translation from "../src/translations/en_us/common.json";
+import es_Translation from "../src/translations/es/common.json";
+import fr_Translation from "../src/translations/fr/common.json";
+
+const resources = {
+  "en-US": en_Translation,
+  "fr-CA": fr_Translation,
+  "es-MX": es_Translation
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: "en-US", // Default to en-US for tests (no LanguageDetector)
+  fallbackLng: "en-US",
+  debug: false, // Disable debug in tests
+  react: {
+    useSuspense: false // Disable Suspense for Vitest
+  },
+  interpolation: {
+    escapeValue: false, // React handles XSS
+    skipOnVariables: false
+  }
+});
+
+export default i18n;

client/vite.config.js

@@ -191,11 +191,13 @@ export default defineConfig({
           "@sentry/react": ["@sentry/react"],
           "@splitsoftware/splitio-react": ["@splitsoftware/splitio-react"],
           logrocket: ["logrocket"],
-          "@firebase/analytics": ["@firebase/analytics"],
-          "@firebase/app": ["@firebase/app"],
-          "@firebase/firestore": ["@firebase/firestore"],
-          "@firebase/auth": ["@firebase/auth"],
-          "@firebase/messaging": ["@firebase/messaging"],
+          firebase: [
+            "@firebase/analytics",
+            "@firebase/app",
+            "@firebase/firestore",
+            "@firebase/auth",
+            "@firebase/messaging"
+          ],
           markerjs2: ["markerjs2"],
           "@apollo/client": ["@apollo/client"],
           "libphonenumber-js": ["libphonenumber-js"]
@@ -218,7 +220,13 @@ export default defineConfig({
       "react-router-dom",
       "dayjs",
       "redux",
-      "react-redux"
+      "react-redux",
+      "@firebase/app",
+      "@firebase/analytics",
+      "@firebase/firestore",
+      "@firebase/auth",
+      "@firebase/messaging",
+      "@firebase/util"
     ],
     esbuildOptions: {
       // Update for Vite 6: Use proper file extensions

client/vitest.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "./tests/setup.js",
+    testTimeout: 10000 // 10 seconds (in milliseconds)
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ["import"] // Suppress @import warnings
+      }
+    }
+  }
+});

docker-compose.yml

@@ -117,6 +117,7 @@ services:
         aws --endpoint-url=http://localstack:4566 secretsmanager create-secret --name CHATTER_PRIVATE_KEY --secret-string file:///tmp/certs/io-ftp-test.key
         aws --endpoint-url=http://localstack:4566 logs create-log-group --log-group-name development --region ca-central-1
         aws --endpoint-url=http://localstack:4566 s3api create-bucket --bucket imex-large-log --create-bucket-configuration LocationConstraint=ca-central-1
+        aws --endpoint-url=http://localstack:4566 s3api create-bucket --bucket imex-job-totals --create-bucket-configuration LocationConstraint=ca-central-1
       "
   # Node App: The Main IMEX API
   node-app:

download-job-totals-fixtures.js

@@ -0,0 +1,77 @@
+const fs = require("fs");
+const path = require("path");
+const logger = require("./server/utils/logger"); // Assuming same logger utility
+const s3Client = require("./server/utils/s3"); // Using the S3 client utilities with LocalStack support
+
+// Set bucket name for development with LocalStack
+const S3_BUCKET_NAME = "imex-job-totals";
+
+// Set fixtures directory path
+const FIXTURES_DIR = path.join(__dirname, "server", "job", "test", "fixtures", "job-totals");
+
+const ensureFixturesDirectory = () => {
+  if (!fs.existsSync(FIXTURES_DIR)) {
+    fs.mkdirSync(FIXTURES_DIR, { recursive: true });
+    logger.log(`Created fixtures directory: ${FIXTURES_DIR}`, "info");
+  }
+};
+
+const downloadJsonFiles = async (userInfo = { email: "system" }) => {
+  logger.log(`Starting download of JSON files from bucket: ${S3_BUCKET_NAME}`, "debug", userInfo.email);
+
+  try {
+    ensureFixturesDirectory();
+    const contents = await s3Client.listFilesInS3Bucket(S3_BUCKET_NAME);
+
+    if (!contents.length) {
+      logger.log("No files found in bucket", "info", userInfo.email);
+      return;
+    }
+
+    logger.log(`Found ${contents.length} files in bucket`, "info", userInfo.email);
+
+    for (const item of contents) {
+      if (!item.Key.endsWith(".json")) {
+        logger.log(`Skipping non-JSON file: ${item.Key}`, "debug", userInfo.email);
+        continue;
+      }
+
+      logger.log(`Downloading: ${item.Key}`, "debug", userInfo.email);
+      const fileData = await s3Client.downloadFileFromS3({
+        bucketName: S3_BUCKET_NAME,
+        key: item.Key
+      });
+
+      const fileContent = await fileData.transformToString();
+      const fileName = path.basename(item.Key);
+      const filePath = path.join(FIXTURES_DIR, fileName);
+
+      fs.writeFileSync(filePath, fileContent);
+      logger.log(`Saved: ${filePath}`, "info", userInfo.email);
+    }
+
+    logger.log("Download completed successfully", "info", userInfo.email);
+  } catch (error) {
+    logger.log("Failed to download JSON files", "error", userInfo.email, null, {
+      error: error?.message,
+      stack: error?.stack
+    });
+    throw error; // Re-throw to trigger process exit with error code
+  }
+};
+
+// Run the download if script is executed directly
+if (require.main === module) {
+  (async () => {
+    try {
+      await downloadJsonFiles();
+      console.log("Script completed successfully");
+      process.exit(0); // Explicitly exit with success code
+    } catch (error) {
+      console.error("Fatal error downloading files:", error);
+      process.exit(1); // Explicitly exit with error code
+    }
+  })();
+}
+
+module.exports = downloadJsonFiles;

hasura/metadata/tables.yaml

@@ -965,6 +965,7 @@
           - insurance_vendor_id
           - intakechecklist
           - intellipay_config
+          - intellipay_merchant_id
           - jc_hourly_rates
           - jobsizelimit
           - last_name_first
@@ -1023,6 +1024,7 @@
           - template_header
           - textid
           - timezone
+          - tours_enabled
           - tt_allow_post_to_invoiced
           - tt_enforce_hours_for_tech_console
           - updated_at

hasura/migrations/1743531377681_alter_table_public_bodyshops_add_column_intellipay_merchant_id/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."bodyshops" add column "intellipay_merchant_id" text
+--  null unique;

hasura/migrations/1743531377681_alter_table_public_bodyshops_add_column_intellipay_merchant_id/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."bodyshops" add column "intellipay_merchant_id" text
+ null unique;

hasura/migrations/1744302073757_alter_table_public_bodyshops_add_column_tours_enabled/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."bodyshops" add column "tours_enabled" boolean
+--  not null default 'true';

hasura/migrations/1744302073757_alter_table_public_bodyshops_add_column_tours_enabled/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."bodyshops" add column "tours_enabled" boolean
+ not null default 'true';

package.json

@@ -10,25 +10,30 @@
     "setup": "rm -rf node_modules && npm i && cd client && rm -rf node_modules && npm i",
     "setup:win": "rimraf node_modules && npm i && cd client && rimraf node_modules && npm i",
     "start": "node server.js",
-    "makeitpretty": "prettier --write \"**/*.{css,js,json,jsx,scss}\""
+    "makeitpretty": "prettier --write \"**/*.{css,js,json,jsx,scss}\"",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "job-totals-fixtures:local": "docker exec node-app /usr/bin/node /app/download-job-totals-fixtures.js"
   },
   "dependencies": {
-    "@aws-sdk/client-cloudwatch-logs": "^3.772.0",
-    "@aws-sdk/client-elasticache": "^3.772.0",
-    "@aws-sdk/client-s3": "^3.772.0",
-    "@aws-sdk/client-secrets-manager": "^3.772.0",
-    "@aws-sdk/client-ses": "^3.772.0",
-    "@aws-sdk/credential-provider-node": "^3.772.0",
+    "@aws-sdk/client-cloudwatch-logs": "^3.782.0",
+    "@aws-sdk/client-elasticache": "^3.782.0",
+    "@aws-sdk/client-s3": "^3.782.0",
+    "@aws-sdk/client-secrets-manager": "^3.782.0",
+    "@aws-sdk/client-ses": "^3.782.0",
+    "@aws-sdk/credential-provider-node": "^3.782.0",
+    "@aws-sdk/lib-storage": "^3.782.0",
+    "@aws-sdk/s3-request-presigner": "^3.782.0",
     "@opensearch-project/opensearch": "^2.13.0",
     "@socket.io/admin-ui": "^0.5.1",
     "@socket.io/redis-adapter": "^8.3.0",
+    "archiver": "^7.0.1",
     "aws4": "^1.13.2",
     "axios": "^1.8.4",
     "bee-queue": "^1.7.1",
     "better-queue": "^3.8.12",
     "bluebird": "^3.7.2",
-    "body-parser": "^1.20.3",
-    "bullmq": "^5.44.4",
+    "bullmq": "^5.48.0",
     "chart.js": "^4.4.8",
     "cloudinary": "^2.6.0",
     "compression": "^1.8.0",
@@ -36,7 +41,7 @@
     "cors": "2.8.5",
     "crisp-status-reporter": "^1.2.2",
     "csrf": "^3.1.0",
-    "dd-trace": "^5.43.0",
+    "dd-trace": "^5.45.0",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
@@ -64,7 +69,7 @@
     "socket.io": "^4.8.1",
     "socket.io-adapter": "^2.5.5",
     "ssh2-sftp-client": "^11.0.0",
-    "twilio": "^5.5.1",
+    "twilio": "^5.5.2",
     "uuid": "^11.1.0",
     "winston": "^3.17.0",
     "winston-cloudwatch": "^6.3.0",
@@ -72,13 +77,16 @@
     "xmlbuilder2": "^3.1.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.23.0",
+    "@eslint/js": "^9.24.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "eslint": "^9.23.0",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint": "^9.24.0",
+    "eslint-plugin-react": "^7.37.5",
     "globals": "^15.15.0",
+    "mock-require": "^3.0.3",
     "p-limit": "^3.1.0",
     "prettier": "^3.5.3",
-    "source-map-explorer": "^2.5.2"
+    "source-map-explorer": "^2.5.2",
+    "supertest": "^7.1.0",
+    "vitest": "^3.1.1"
   }
 }

server.js

@@ -16,7 +16,6 @@ const cors = require("cors");
 const http = require("http");
 const Redis = require("ioredis");
 const express = require("express");
-const bodyParser = require("body-parser");
 const compression = require("compression");
 const cookieParser = require("cookie-parser");
 const { Server } = require("socket.io");
@@ -84,8 +83,8 @@ const SOCKETIO_CORS_ORIGIN_DEV = ["http://localhost:3333", "https://localhost:33
 const applyMiddleware = ({ app }) => {
   app.use(compression());
   app.use(cookieParser());
-  app.use(bodyParser.json({ limit: "50mb" }));
-  app.use(bodyParser.urlencoded({ limit: "50mb", extended: true }));
+  app.use(express.json({ limit: "50mb" }));
+  app.use(express.urlencoded({ limit: "50mb", extended: true }));
   app.use(cors({ credentials: true, exposedHeaders: ["set-cookie"] }));
 
   // Helper middleware
@@ -370,7 +369,7 @@ const loadQueues = async ({ pubClient, logger, redisHelpers, ioRedis }) => {
  */
 const main = async () => {
   const app = express();
-  const port = process.env.PORT || 5000;
+  const port = process.env.PORT || 4000;
 
   const server = http.createServer(app);
 

server/admin/adminops.js

@@ -39,12 +39,14 @@ exports.createShop = async (req, res) => {
 
   try {
     const result = await client.request(
-      `mutation INSERT_BODYSHOPS($bs: bodyshops_insert_input!){
-  insert_bodyshops_one(object:$bs){
-    id
-   
-  }
-}`,
+      `mutation INSERT_BODYSHOPS($bs: bodyshops_insert_input!) {
+        insert_bodyshops_one(object: $bs) {
+          id
+          vendors {
+            id
+          }
+        }
+      }`,
       {
         bs: {
           ...bodyshop,
@@ -54,12 +56,39 @@ exports.createShop = async (req, res) => {
               { countertype: "ihbnum", count: 1 },
               { countertype: "paymentnum", count: 1 }
             ]
+          },
+          vendors: {
+            data: [{ name: "In-House" }]
           }
         }
       }
     );
-    res.json(result);
+    const bodyshopId = result.insert_bodyshops_one.id;
+    const vendorId = result.insert_bodyshops_one.vendors[0].id;
+
+    if (!bodyshopId || !vendorId) {
+      throw new Error("Failed to create bodyshop or vendor");
+    }
+
+    const updateBodyshop = await client.request(
+      `mutation UPDATE_BODYSHOP($id: uuid!, $inhousevendorid: uuid!) {
+        update_bodyshops_by_pk(pk_columns: { id: $id }, _set: { inhousevendorid: $inhousevendorid }) {
+          id
+        }
+      }`,
+      {
+        id: bodyshopId,
+        inhousevendorid: vendorId
+      }
+    );
+    res.status(200).json(updateBodyshop);
   } catch (error) {
+    logger.log("admin-create-shop-error", "error", req.user.email, null, {
+      message: error.message,
+      stack: error.stack,
+      request: req.body,
+      ioadmin: true
+    });
     res.status(500).json(error);
   }
 };

server/data/usageReport.js

@@ -55,7 +55,12 @@ exports.default = async (req, res) => {
     const csv = converter.json2csv(shopList, { emptyFieldValue: "" });
     emailer
       .sendTaskEmail({
-        to: ["patrick.fic@convenient-brands.com", "bradley.rhoades@convenient-brands.com", "jrome@rometech.com"],
+        to: [
+          "patrick.fic@convenient-brands.com",
+          "bradley.rhoades@convenient-brands.com",
+          "jrome@rometech.com",
+          "ivana@imexsystems.ca"
+        ],
         subject: `RO Usage Report - ${moment().format("MM/DD/YYYY")}`,
         text: `
 Usage Report for ${moment().format("MM/DD/YYYY")} for Rome Online Customers. 

server/email/generateTemplate.js

@@ -1,5 +1,3 @@
-const moment = require("moment");
-const { default: RenderInstanceManager } = require("../utils/instanceMgr");
 const { header, end, start } = require("./html");
 
 // Required Strings
@@ -7,19 +5,6 @@ const { header, end, start } = require("./html");
 // - subHeader - The subheader of the email
 // - body - The body of the email
 
-// Optional Strings (Have default values)
-// - footer - The footer of the email
-// - dateLine - The date line of the email
-
-const defaultFooter = () => {
-  return RenderInstanceManager({
-    imex: "ImEX Online Collision Repair Management System",
-    rome: "Rome Technologies"
-  });
-};
-
-const now = () => moment().format("MM/DD/YYYY @ hh:mm a");
-
 /**
  * Generate the email template
  * @param strings
@@ -32,81 +17,48 @@ const generateEmailTemplate = (strings) => {
     header +
     start +
     `
-<table class="row">
-    <tbody>
-        <tr>
-          <th class="small-12 large-12 columns first last">
-            <table>
-                <tbody>
-                    <tr>
-                        <td>
-                            <h6 style="text-align:left"><strong>${strings.header}</strong></h6>
-                        </td>
-                    </tr>
-                     <tr>
-                        <td>
-                            <p style="font-size:90%">${strings.subHeader}</p>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-          </th>
-        </tr>
-    </tbody>
-</table>
+<!-- Report Title -->
+    ${
+      strings.header &&
+      `
+    <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+        <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 8px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+            <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                <h6 style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; color: inherit; word-wrap: normal; font-weight: normal; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 23px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; text-align: center;"><strong style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">${strings.header}</strong></h6>
+            </td></tr>
+        </tbody></table></th>
+    </tr></tbody></table>
+    `
+    }
+    ${
+      strings.subHeader &&
+      `
+    <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+        <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+            <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 95%;">${strings.subHeader}</p>
+            </td></tr>
+        </tbody></table></th>
+    </tr></tbody></table>
+    `
+    }
 <!-- End Report Title -->
-<!-- Task Detail -->
-<table class="row">
-    <tbody>
-        <tr>
-            <th class="small-12 large-12 columns first last">
-                <table>
-                    <tbody>
-                        <tr>
-                            <td>${strings.body}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </th>
-        </tr>
-    </tbody>
-</table>
-<!-- End Task Detail -->
-<!-- Footer -->
-<table class="row collapsed footer" id="non-printable">
-    <tbody>
-        <tr>
-            <th class="small-3 large-3 columns first">
-                <table>
-                    <tbody>
-                        <tr>
-                            <td><p style="font-size:70%; padding-right:10px">${strings?.dateLine || now()}</p></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </th>
-             <th class="small-6 large-6 columns">
-                <table>
-                    <tbody>
-                        <tr>
-                            <td><p style="font-size:70%; text-align:center">${strings?.footer || defaultFooter()}</p></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </th>
-            <th class="small-3 large-3 columns last">
-                <table>
-                    <tbody>
-                        <tr>
-                            <td><p style="font-size:70%">&nbsp;</p></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </th>
-        </tr>
-    </tbody>
-</table>` +
-    end
+    ${
+      strings.body &&
+      `
+<!-- Report Detail -->
+    <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+        <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+            <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                ${strings.body}
+            </td></tr>
+        </tbody></table></th>
+    </tr></tbody></table>
+<!-- End Report Detail -->
+    `
+    }
+    ` +
+    end(strings.dateLine)
   );
 };
 

server/email/sendemail.js

@@ -40,7 +40,9 @@ const logEmail = async (req, email) => {
       to: req?.body?.to,
       cc: req?.body?.cc,
       subject: req?.body?.subject,
-      email
+      email,
+      errorMessage: error?.message,
+      errorStack: error?.stack
       // info,
     });
   }
@@ -68,6 +70,7 @@ const sendServerEmail = async ({ subject, text }) => {
           ]
         }
       },
+      // eslint-disable-next-line no-unused-vars
       (err, info) => {
         logger.log("server-email-failure", err ? "error" : "debug", null, null, {
           message: err?.message,
@@ -80,6 +83,108 @@ const sendServerEmail = async ({ subject, text }) => {
   }
 };
 
+const sendWelcomeEmail = async ({ to, resetLink, dateLine, features, bcc }) => {
+  try {
+    await mailer.sendMail({
+      from: InstanceManager({
+        imex: `ImEX Online <noreply@imex.online>`,
+        rome: `Rome Online <noreply@romeonline.io>`
+      }),
+      to,
+      bcc,
+      subject: InstanceManager({
+        imex: "Welcome to the ImEX Online platform.",
+        rome: "Welcome to the Rome Online platform."
+      }),
+      html: generateEmailTemplate({
+        header: InstanceManager({
+          imex: "Welcome to the ImEX Online platform.",
+          rome: "Welcome to the Rome Online platform."
+        }),
+        subHeader: `Your ${InstanceManager({imex: features?.allAccess ? "ImEX Online": "ImEX Lite", rome: features?.allAccess ? "RO Manager" : "RO Basic"})} shop setup has been completed, and this email will include all the information you need to begin.`,
+        body: `
+                <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">To finish setting up your account, visit this link and enter your desired password. <a href=${resetLink} style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">Reset Password</a></p>
+              </td></tr>
+            </tbody></table></th>
+          </tr></tbody></table>
+          <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+            <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+              <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">To access your ${InstanceManager({imex: features.allAccess ? "ImEX Online": "ImEX Lite", rome: features.allAccess ? "RO Manager" : "RO Basic"})} shop, visit <a href=${InstanceManager({imex: "https://imex.online/", rome: "https://romeonline.io/"})} style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">${InstanceManager({imex: "imex.online", rome: "romeonline.io"})}</a>. Your username is your email, and your password is what you previously set up. Contact support for additional logins.</p>
+              </td></tr>
+            </tbody></table></th>
+          </tr></tbody></table>
+          ${InstanceManager({
+          rome: `
+            <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+              <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+                <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                  <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">To push estimates over from your estimating system, you must download the Web-Est EMS Unzipper & Rome Online Partner (Computers using Windows only). Here are some steps to help you get started.</p>
+                </td><tr>
+                <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                  <ul style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 1%; padding-left: 30px;">
+                    <li style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%;">Download and set up the Web-Est EMS Unzipper - <a href="https://help.imex.online/en/article/how-to-set-up-the-ems-unzip-downloader-on-web-est-n9hbcv/" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">How to setup the EMS Unzip Downloader on Web-Est</a></li>
+                    <li style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%;">Download and set up Rome Online Partner - <a href="https://help.imex.online/en/article/setting-up-the-rome-online-partner-1xsw8tb/" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">Setting up the Rome Online Partner</a></li>
+                  </ul>
+                </td></tr>
+              </tbody></table></th>
+            </tr></tbody></table>
+            <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+              <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+                <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                  <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">Once you successfully set up the partner, now it's time to do some initial in-product items: Please note, <b>an estimate must be exported from the estimating platform to use tours.</b></p>
+                </td><tr>
+                <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                  <ul style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 1%; padding-left: 30px;">
+                    <li style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%;">Send estimate from Web-Est to RO Basic - <a href="https://help.imex.online/en/article/how-to-send-estimates-from-web-est-to-the-management-system-ox0h9a/" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">How to setup the EMS Unzip Downloader on Web-Est</a></li>
+                    <li style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%;">Once completed, learn how to use RO Basic by accessing the tours at the bottom middle of the screen (labeled “Training Tours”). These walkthroughs will show you how to navigate from creating an RO to closing an RO - <a href="https://www.youtube.com/watch?v=gcbSe5med0I" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">ROME Collision Management Youtube Training Videos</a></li>
+                  </ul>
+                </td></tr>
+              </tbody></table></th>
+            </tr></tbody></table>
+            <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+              <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+                <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                  <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">If you need any assistance with setting up the programs, or if you want a dedicated Q&A session with one of our customer success specialists, schedule by clicking this link - <a href="https://rometech.zohobookings.com/#/PSAT" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">Rome Basic Training Booking</a></p>
+                </td></tr>
+              </tbody></table></th>
+            </tr></tbody></table>
+            <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+              <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+                <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                  <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">If you have additional questions or need any support, feel free to use the RO Basic support chat (blue chat box located in the bottom right corner) or give us a call at <a href="tel:14103576700" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">(410) 357-6700</a>. We are here to help make your experience seamless!</p>
+                </td></tr>
+              </tbody></table></th>
+            </tr></tbody></table>
+          `
+          })}
+          <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+            <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 16px; width: 734px; padding-left: 8px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+              <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">In addition to the training tour, you can also book a live one-on-one demo to see exactly how our system can help streamline the repair process at your shop, schedule by clicking this link - <a href="https://outlook.office.com/bookwithme/user/0aa3ae2c6d59497d9f93fb72479848dc@imexsystems.ca/meetingtype/Qy7CsXl5MkuUJ0NRD7B1AA2?anonymous&ep=mlink" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">${InstanceManager({imex: "ImEX Lite", rome: "Rome Basic"})} Demo Booking</a></p>
+              </td></tr>
+            </tbody></table></th>
+          </tr></tbody></table>
+          <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+            <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 8px; width: 734px; padding-left: 0px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+              <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">Thanks,</p>
+              </td></tr>
+            </tbody></table></th>
+          </tr></tbody></table>
+          <table class="row" style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; padding: 0; width: 100%; position: relative; display: table;"><tbody style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; display: table-row-group;"><tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;">
+            <th class="small-12 large-12 columns first last" style="word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; line-height: 1.2; margin: 0 auto; Margin: 0 auto; padding-bottom: 8px; width: 734px; padding-left: 0px; padding-right: 8px; border-collapse: collapse;"><table style="border-spacing: 0; border-collapse: collapse; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; width: 100%;">
+              <tr style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; vertical-align: top; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif;"><td style="word-wrap: break-word; vertical-align: top; color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0; Margin: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 15px; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; border-collapse: collapse;">
+                <p style="color: #0a0a0a; font-weight: normal; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; margin: 0 0 0 0px; Margin: 0 0 0 0px; line-height: 1.2; margin-bottom: 0px; Margin-bottom: 0px; font-size: 90%;">The ${InstanceManager({imex: "ImEX Online", rome: "Rome Online"})} Team</p>
+        `,
+        dateLine
+      })
+    });
+  } catch (error) {
+    logger.log("server-email-failure", "error", null, null, { error });
+  }
+};
+
 const sendTaskEmail = async ({ to, subject, type = "text", html, text, attachments }) => {
   try {
     mailer.sendMail(
@@ -93,6 +198,7 @@ const sendTaskEmail = async ({ to, subject, type = "text", html, text, attachmen
         ...(type === "text" ? { text } : { html }),
         attachments: attachments || null
       },
+      // eslint-disable-next-line no-unused-vars
       (err, info) => {
         // (message, type, user, record, meta
         logger.log("server-email", err ? "error" : "debug", null, null, { message: err?.message, stack: err?.stack });
@@ -143,22 +249,20 @@ const sendEmail = async (req, res) => {
       to: req.body.to,
       cc: req.body.cc,
       subject: req.body.subject,
-      attachments:
-        [
-          ...((req.body.attachments &&
-            req.body.attachments.map((a) => {
-              return {
-                filename: a.filename,
-                path: a.path
-              };
-            })) ||
-            []),
-          ...downloadedMedia.map((a) => {
+      attachments: [
+        ...(req.body.attachments &&
+          req.body.attachments.map((a) => {
             return {
-              path: a
+              filename: a.filename,
+              path: a.path
             };
-          })
-        ] || null,
+          })),
+        ...downloadedMedia.map((a) => {
+          return {
+            path: a
+          };
+        })
+      ],
       html: isObject(req.body?.templateStrings) ? generateEmailTemplate(req.body.templateStrings) : req.body.html,
       ses: {
         // optional extra arguments for SendRawEmail
@@ -273,6 +377,7 @@ ${body.bounce?.bouncedRecipients.map(
 )}
         `
         },
+        // eslint-disable-next-line no-unused-vars
         (err, info) => {
           logger.log("sns-error", err ? "error" : "debug", "api", null, {
             errorMessage: err?.message,
@@ -294,5 +399,6 @@ module.exports = {
   sendEmail,
   sendServerEmail,
   sendTaskEmail,
-  emailBounce
+  emailBounce,
+  sendWelcomeEmail
 };

server/email/tasksEmails.js

@@ -17,11 +17,13 @@ const { formatTaskPriority } = require("../notifications/stringHelpers");
 const tasksEmailQueue = taskEmailQueue();
 
 // Cleanup function for the Tasks Email Queue
+// eslint-disable-next-line no-unused-vars
 const tasksEmailQueueCleanup = async () => {
   try {
     // Example async operation
     // console.log("Performing Tasks Email Reminder process cleanup...");
     await new Promise((resolve) => tasksEmailQueue.destroy(() => resolve()));
+  // eslint-disable-next-line no-unused-vars
   } catch (err) {
     // console.error("Tasks Email Reminder process cleanup failed:", err);
   }
@@ -254,10 +256,15 @@ const tasksRemindEmail = async (req, res) => {
           header: `${allTasks.length} Tasks require your attention`,
           subHeader: `Please click on the Tasks below to view the Task.`,
           dateLine,
-          body: `<ul>
+          body: `
+            <ul style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; margin: 1%; padding-left: 30px;">
               ${allTasks
                 .map((task) =>
-                  `<li><a href="${InstanceEndpoints()}/manage/tasks/alltasks?taskid=${task.id}">${task.title} - Priority: ${formatTaskPriority(task.priority)} ${task.due_date ? `${formatDate(task.due_date)}` : ""} | Bodyshop: ${task.bodyshop.shopname}</a></li>`.trim()
+                  `
+                    <li style="font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%;">
+                      <a href="${InstanceEndpoints()}/manage/tasks/alltasks?taskid=${task.id}" style="color: #2199e8; text-decoration: none; font-weight: normal; padding: 0; text-align: left; font-family: 'Montserrat', 'Montserrat Alternates', sans-serif; font-size: 90%; line-height: 1.2;">${task.title} - Priority: ${formatTaskPriority(task.priority)} ${task.due_date ? `${formatDate(task.due_date)}` : ""} | Bodyshop: ${task.bodyshop.shopname}</a>
+                    </li>
+                  `.trim()  
                 )
                 .join("")}
             </ul>`

server/firebase/firebase-handler.js

@@ -1,14 +1,10 @@
-const path = require("path");
-require("dotenv").config({
-  path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || "development"}`)
-});
-
-const admin = require("firebase-admin");
-const logger = require("../utils/logger");
-//const { sendProManagerWelcomeEmail } = require("../email/sendemail");
-const client = require("../graphql-client/graphql-client").client;
 const serviceAccount = require(process.env.FIREBASE_ADMINSDK_JSON);
-//const generateEmailTemplate = require("../email/generateTemplate");
+const admin = require("firebase-admin");
+const moment = require("moment-timezone");
+const logger = require("../utils/logger");
+const client = require("../graphql-client/graphql-client").client;
+const { sendWelcomeEmail } = require("../email/sendemail");
+const { GET_USER_BY_EMAIL } = require("../graphql-client/queries");
 
 admin.initializeApp({
   credential: admin.credential.cert(serviceAccount),
@@ -201,6 +197,94 @@ const unsubscribe = async (req, res) => {
   }
 };
 
+const getWelcomeEmail = async (req, res) => {
+  const { authid, email, bcc } = req.body;
+
+  try {
+    // Fetch user from Firebase
+    const userRecord = await admin.auth().getUser(authid);
+    if (!userRecord) {
+      throw { status: 404, message: "User not found in Firebase." };
+    }
+
+    // Fetch user data from the database using GraphQL
+    const dbUserResult = await client.request(GET_USER_BY_EMAIL, { email: email.toLowerCase() });
+
+    const dbUser = dbUserResult?.users?.[0];
+    if (!dbUser) {
+      throw { status: 404, message: "User not found in database." };
+    }
+
+    // Validate email before proceeding
+    if (!dbUser.validemail) {
+      logger.log("admin-send-welcome-email-skip", "debug", req.user.email, null, {
+        message: "User email is not valid, skipping email.",
+        email
+      });
+      return res.status(200).json({ message: "User email is not valid, email not sent." });
+    }
+
+    // Generate password reset link
+    const resetLink = await admin.auth().generatePasswordResetLink(dbUser.email);
+
+    // Send welcome email
+    await sendWelcomeEmail({
+      to: dbUser.email,
+      resetLink,
+      dateLine: moment().tz(dbUser.associations?.[0]?.bodyshop?.timezone).format("MM/DD/YYYY @ hh:mm a"),
+      features: dbUser.associations?.[0]?.bodyshop?.features,
+      bcc
+    });
+
+    // Log success and return response
+    logger.log("admin-send-welcome-email", "debug", req.user.email, null, {
+      request: req.body,
+      ioadmin: true,
+      emailSentTo: email
+    });
+
+    return res.status(200).json({ message: "Welcome email sent successfully." });
+  } catch (error) {
+    logger.log("admin-send-welcome-email-error", "ERROR", req.user.email, null, { error });
+
+    if (!res.headersSent) {
+      return res.status(error.status || 500).json({
+        message: error.message || "Error sending welcome email.",
+        error
+      });
+    }
+  }
+};
+
+const getResetLink = async (req, res) => {
+  const { authid, email } = req.body;
+  logger.log("admin-reset-link", "debug", req.user.email, null, { authid, email });
+
+  try {
+    // Fetch user from Firebase
+    const userRecord = await admin.auth().getUser(authid);
+    if (!userRecord) {
+      throw { status: 404, message: "User not found in Firebase." };
+    }
+
+    // Generate password reset link
+    const resetLink = await admin.auth().generatePasswordResetLink(email);
+
+    // Log success and return response
+    logger.log("admin-reset-link-success", "debug", req.user.email, null, {
+      request: req.body,
+      ioadmin: true
+    });
+
+    return res.status(200).json({ message: "Reset link generated successfully.", resetLink });
+  } catch (error) {
+    return res.status(error.status || 500).json({
+      message: error.message || "Error generating reset link.",
+      error
+    });
+  }
+};
+
 module.exports = {
   admin,
   createUser,
@@ -208,23 +292,7 @@ module.exports = {
   getUser,
   sendNotification,
   subscribe,
-  unsubscribe
+  unsubscribe,
+  getWelcomeEmail,
+  getResetLink
 };
-
-//Admin claims code.
-// const uid = "JEqqYlsadwPEXIiyRBR55fflfko1";
-
-// admin
-//   .auth()
-//   .getUser(uid)
-//   .then((user) => {
-//     console.log(user);
-//     admin.auth().setCustomUserClaims(uid, {
-//       ioadmin: true,
-//       "https://hasura.io/jwt/claims": {
-//         "x-hasura-default-role": "debug",
-//         "x-hasura-allowed-roles": ["admin"],
-//         "x-hasura-user-id": uid,
-//       },
-//     });
-//   });