IO-3202 HasFeatureAccess Boolean

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
+

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

@@ -24,7 +24,6 @@
     "@sentry/vite-plugin": "^3.2.2",
     "@splitsoftware/splitio-react": "^2.0.1",
     "@tanem/react-nprogress": "^5.0.53",
-    "@vitejs/plugin-react": "^4.3.4",
     "antd": "^5.24.5",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^4.2.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": [
@@ -128,7 +134,12 @@
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@eslint/js": "^9.23.0",
+    "@playwright/test": "^1.51.1",
     "@sentry/webpack-plugin": "^3.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "browserslist": "^4.24.4",
     "browserslist-to-esbuild": "^2.1.1",
     "chalk": "^5.4.1",
@@ -136,8 +147,10 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react": "^7.37.4",
     "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",
@@ -147,6 +160,7 @@
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-pwa": "^0.21.2",
     "vite-plugin-style-import": "^2.0.0",
+    "vitest": "^3.0.9",
     "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/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-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/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/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/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/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

@@ -3679,7 +3679,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

@@ -3679,7 +3679,8 @@
         "signinerror": {
           "auth/user-disabled": "",
           "auth/user-not-found": "",
-          "auth/wrong-password": ""
+          "auth/wrong-password": "",
+          "auth/invalid-email": ""
         }
       }
     },

client/src/translations/fr/common.json

@@ -3679,7 +3679,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
+      }
+    }
+  }
+});

package.json

@@ -10,7 +10,9 @@
     "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"
   },
   "dependencies": {
     "@aws-sdk/client-cloudwatch-logs": "^3.772.0",
@@ -19,9 +21,12 @@
     "@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/lib-storage": "^3.774.0",
+    "@aws-sdk/s3-request-presigner": "^3.774.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",
@@ -79,6 +84,8 @@
     "globals": "^15.15.0",
     "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.0.9"
   }
 }

server.js

@@ -370,7 +370,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/graphql-client/queries.js

@@ -2768,6 +2768,67 @@ exports.GET_BODYSHOP_BY_ID = `
       id
       md_order_statuses
       shopname
+      imexshopid
+      intellipay_config
+      state
     }
   }
 `;
+
+exports.GET_DOCUMENTS_BY_JOB = `
+  query GET_DOCUMENTS_BY_JOB($jobId: uuid!) {
+    jobs_by_pk(id: $jobId) {
+      id
+      ro_number
+    }
+    documents_aggregate(where: { jobid: { _eq: $jobId } }) {
+      aggregate {
+        sum {
+          size
+        }
+      }
+    }
+    documents(order_by: { takenat: desc }, where: { jobid: { _eq: $jobId } }) {
+      id
+      name
+      key
+      type
+      size
+      takenat
+      extension
+      bill {
+        id
+        invoice_number
+        date
+        vendor {
+          id
+          name
+        }
+      }
+    }
+  }`;
+
+exports.QUERY_TEMPORARY_DOCS = `  query QUERY_TEMPORARY_DOCS {
+    documents(where: { jobid: { _is_null: true } }, order_by: { takenat: desc }) {
+      id
+      name
+      key
+      type
+      extension
+      size
+      takenat
+    }
+  }`;
+
+exports.GET_DOCUMENTS_BY_IDS = `
+  query GET_DOCUMENTS_BY_IDS($documentIds: [uuid!]!) {
+  documents(where: {id: {_in: $documentIds}}, order_by: {takenat: desc}) {
+    id
+    name
+    key
+    type
+    extension
+    size
+    takenat
+  }
+}`;

server/intellipay/intellipay.js

@@ -52,6 +52,7 @@ const getShopCredentials = async (bodyshop) => {
 const decodeComment = (comment) => {
   try {
     return comment ? JSON.parse(Buffer.from(comment, "base64").toString()) : null;
+  // eslint-disable-next-line no-unused-vars
   } catch (error) {
     return null; // Handle malformed base64 string gracefully
   }
@@ -361,24 +362,18 @@ exports.checkfee = async (req, res) => {
 exports.postback = async (req, res) => {
   const { body: values } = req;
   const decodedComment = decodeComment(values?.comment);
+
   const logResponseMeta = {
-    bodyshop: {
-      id: req.body?.bodyshop?.id,
-      imexshopid: req.body?.bodyshop?.imexshopid,
-      name: req.body?.bodyshop?.shopname,
-      state: req.body?.bodyshop?.state
-    },
     iprequest: values,
     decodedComment
   };
-  const ipMapping = req.body?.bodyshop?.intellipay_config?.payment_map;
 
-  logger.log("intellipay-postback-received", "DEBUG", req.user?.email, null, logResponseMeta);
+  logger.log("intellipay-postback-received", "DEBUG", "api", null, logResponseMeta);
 
   try {
     if ((!values.invoice || values.invoice === "") && !decodedComment) {
       //invoice is specified through the pay link. Comment by IO.
-      logger.log("intellipay-postback-ignored", "DEBUG", req.user?.email, null, {
+      logger.log("intellipay-postback-ignored", "DEBUG", "api", null, {
         message: "No invoice or comment provided",
         ...logResponseMeta
       });
@@ -391,7 +386,7 @@ exports.postback = async (req, res) => {
       //This has been triggered by IO and may have multiple jobs.
       const parsedComment = decodedComment;
 
-      logger.log("intellipay-postback-parsed-comment", "DEBUG", req.user?.email, null, {
+      logger.log("intellipay-postback-parsed-comment", "DEBUG", "api", null, {
         parsedComment,
         ...logResponseMeta
       });
@@ -405,8 +400,12 @@ exports.postback = async (req, res) => {
       const jobs = await gqlClient.request(queries.GET_JOBS_BY_PKS, {
         ids: partialPayments.map((p) => p.jobid)
       });
+      const bodyshop = await gqlClient.request(queries.GET_BODYSHOP_BY_ID, {
+        id: jobs.jobs[0].shopid
+      });
+      const ipMapping = bodyshop.bodyshops_by_pk.intellipay_config?.payment_map;
 
-      logger.log("intellipay-postback-jobs-fetched", "DEBUG", req.user?.email, null, {
+      logger.log("intellipay-postback-jobs-fetched", "DEBUG", "api", null, {
         jobs,
         parsedComment,
         ...logResponseMeta
@@ -424,7 +423,7 @@ exports.postback = async (req, res) => {
           payment_responses: {
             data: {
               amount: values.total,
-              bodyshopid: jobs.jobs[0].shopid,
+              bodyshopid: bodyshop.bodyshops_by_pk.id,
               jobid: p.jobid,
               declinereason: "Approved",
               ext_paymentid: values.paymentid,
@@ -435,7 +434,7 @@ exports.postback = async (req, res) => {
         }))
       });
 
-      logger.log("intellipay-postback-payment-success", "DEBUG", req.user?.email, null, {
+      logger.log("intellipay-postback-payment-success", "DEBUG", "api", null, {
         paymentResult,
         jobs,
         parsedComment,
@@ -458,7 +457,7 @@ exports.postback = async (req, res) => {
               .join("<br/>")
           })
         }).catch((error) => {
-          logger.log("intellipay-postback-email-error", "ERROR", req.user?.email, null, {
+          logger.log("intellipay-postback-email-error", "ERROR", "api", null, {
             message: error.message,
             jobs,
             paymentResult,
@@ -472,8 +471,14 @@ exports.postback = async (req, res) => {
         id: values.invoice
       });
 
-      logger.log("intellipay-postback-invoice-job-fetched", "DEBUG", req.user?.email, null, {
+      const bodyshop = await gqlClient.request(queries.GET_BODYSHOP_BY_ID, {
+        id: job.jobs_by_pk.shopid
+      });
+      const ipMapping = bodyshop.bodyshops_by_pk.intellipay_config?.payment_map;
+
+      logger.log("intellipay-postback-invoice-job-fetched", "DEBUG", "api", null, {
         job,
+        bodyshop,
         ...logResponseMeta
       });
 
@@ -488,7 +493,7 @@ exports.postback = async (req, res) => {
         }
       });
 
-      logger.log("intellipay-postback-invoice-payment-success", "DEBUG", req.user?.email, null, {
+      logger.log("intellipay-postback-invoice-payment-success", "DEBUG", "api", null, {
         paymentResult,
         ...logResponseMeta
       });
@@ -496,7 +501,7 @@ exports.postback = async (req, res) => {
       const responseResults = await gqlClient.request(queries.INSERT_PAYMENT_RESPONSE, {
         paymentResponse: {
           amount: values.total,
-          bodyshopid: job.jobs_by_pk.shopid,
+          bodyshopid: bodyshop.bodyshops_by_pk.id,
           paymentid: paymentResult.id,
           jobid: values.invoice,
           declinereason: "Approved",
@@ -506,14 +511,14 @@ exports.postback = async (req, res) => {
         }
       });
 
-      logger.log("intellipay-postback-invoice-response-success", "DEBUG", req.user?.email, null, {
+      logger.log("intellipay-postback-invoice-response-success", "DEBUG", "api", null, {
         responseResults,
         ...logResponseMeta
       });
       res.sendStatus(200);
     }
   } catch (error) {
-    logger.log("intellipay-postback-error", "ERROR", req.user?.email, null, {
+    logger.log("intellipay-postback-error", "ERROR", "api", null, {
       message: error?.message,
       ...logResponseMeta
     });

server/media/imgproxy-media.js

@@ -0,0 +1,348 @@
+const path = require("path");
+require("dotenv").config({
+  path: path.resolve(process.cwd(), `.env.${process.env.NODE_ENV || "development"}`)
+});
+const logger = require("../utils/logger");
+const {
+  S3Client,
+  PutObjectCommand,
+  GetObjectCommand,
+  CopyObjectCommand,
+  DeleteObjectCommand
+} = require("@aws-sdk/client-s3");
+const { Upload } = require("@aws-sdk/lib-storage");
+
+const { getSignedUrl } = require("@aws-sdk/s3-request-presigner");
+const crypto = require("crypto");
+const { InstanceRegion } = require("../utils/instanceMgr");
+const {
+  GET_DOCUMENTS_BY_JOB,
+  QUERY_TEMPORARY_DOCS,
+  GET_DOCUMENTS_BY_IDS,
+  DELETE_MEDIA_DOCUMENTS
+} = require("../graphql-client/queries");
+const archiver = require("archiver");
+const stream = require("node:stream");
+
+const imgproxyBaseUrl = process.env.IMGPROXY_BASE_URL; // `https://u4gzpp5wm437dnm75qa42tvza40fguqr.lambda-url.ca-central-1.on.aws` //Direct Lambda function access to bypass CDN.
+const imgproxyKey = process.env.IMGPROXY_KEY;
+const imgproxySalt = process.env.IMGPROXY_SALT;
+const imgproxyDestinationBucket = process.env.IMGPROXY_DESTINATION_BUCKET;
+
+//Generate a signed upload link for the S3 bucket.
+//All uploads must be going to the same shop and jobid.
+exports.generateSignedUploadUrls = async (req, res) => {
+  const { filenames, bodyshopid, jobid } = req.body;
+  try {
+    logger.log("imgproxy-upload-start", "DEBUG", req.user?.email, jobid, { filenames, bodyshopid, jobid });
+
+    const signedUrls = [];
+    for (const filename of filenames) {
+      const key = filename; 
+      const client = new S3Client({ region: InstanceRegion() });
+      const command = new PutObjectCommand({
+        Bucket: imgproxyDestinationBucket,
+        Key: key,
+        StorageClass: "INTELLIGENT_TIERING"
+      });
+      const presignedUrl = await getSignedUrl(client, command, { expiresIn: 360 });
+      signedUrls.push({ filename, presignedUrl, key });
+    }
+
+    logger.log("imgproxy-upload-success", "DEBUG", req.user?.email, jobid, { signedUrls });
+    res.json({
+      success: true,
+      signedUrls
+    });
+  } catch (error) {
+    res.status(400).json({
+      success: false,
+      message: error.message,
+      stack: error.stack
+    });
+    logger.log("imgproxy-upload-error", "ERROR", req.user?.email, jobid, {
+      message: error.message,
+      stack: error.stack
+    });
+  }
+};
+
+exports.getThumbnailUrls = async (req, res) => {
+  const { jobid, billid } = req.body;
+
+  try {
+    logger.log("imgproxy-thumbnails", "DEBUG", req.user?.email, jobid, { billid, jobid });
+
+    //Delayed as the key structure may change slightly from what it is currently and will require evaluating mobile components.
+    const client = req.userGraphQLClient;
+    //If there's no jobid and no billid, we're in temporary documents.
+    const data = await (jobid
+      ? client.request(GET_DOCUMENTS_BY_JOB, { jobId: jobid })
+      : client.request(QUERY_TEMPORARY_DOCS));
+
+    const thumbResizeParams = `rs:fill:250:250:1/g:ce`;
+    const s3client = new S3Client({ region: InstanceRegion() });
+    const proxiedUrls = [];
+
+    for (const document of data.documents) {
+      //Format to follow:
+      //<Cloudfront_to_lambda>/<hmac with SHA of entire request URI path (with base64 encoded URL if needed), beginning with unencoded/unhashed Salt>/<remainder of url - resize params >/< base 64 URL encoded to image path>
+
+      //When working with documents from Cloudinary, the URL does not include the extension.
+      let key;
+      if (/\.[^/.]+$/.test(document.key)) {
+        key = document.key;
+      } else {
+        key = `${document.key}.${document.extension.toLowerCase()}`;
+      }
+      // Build the S3 path to the object.
+      const fullS3Path = `s3://${imgproxyDestinationBucket}/${key}`;
+      const base64UrlEncodedKeyString = base64UrlEncode(fullS3Path);
+      //Thumbnail Generation Block
+      const thumbProxyPath = `${thumbResizeParams}/${base64UrlEncodedKeyString}`;
+      const thumbHmacSalt = createHmacSha256(`${imgproxySalt}/${thumbProxyPath}`);
+
+      //Full Size URL block
+
+      const fullSizeProxyPath = `${base64UrlEncodedKeyString}`;
+      const fullSizeHmacSalt = createHmacSha256(`${imgproxySalt}/${fullSizeProxyPath}`);
+
+      const s3Props = {};
+      if (!document.type.startsWith("image")) {
+        //If not a picture, we need to get a signed download link to the file using S3 (or cloudfront preferably)
+        const command = new GetObjectCommand({
+          Bucket: imgproxyDestinationBucket,
+          Key: key
+        });
+        const presignedGetUrl = await getSignedUrl(s3client, command, { expiresIn: 360 });
+        s3Props.presignedGetUrl = presignedGetUrl;
+
+        const originalProxyPath = `raw:1/${base64UrlEncodedKeyString}`;
+        const originalHmacSalt = createHmacSha256(`${imgproxySalt}/${originalProxyPath}`);
+        s3Props.originalUrlViaProxyPath = `${imgproxyBaseUrl}/${originalHmacSalt}/${originalProxyPath}`;
+      }
+
+      proxiedUrls.push({
+        originalUrl: `${imgproxyBaseUrl}/${fullSizeHmacSalt}/${fullSizeProxyPath}`,
+        thumbnailUrl: `${imgproxyBaseUrl}/${thumbHmacSalt}/${thumbProxyPath}`,
+        fullS3Path,
+        base64UrlEncodedKeyString,
+        thumbProxyPath,
+        ...s3Props,
+        ...document
+      });
+    }
+
+    res.json(proxiedUrls);
+    //Iterate over them, build the link based on the media type, and return the array.
+  } catch (error) {
+    logger.log("imgproxy-thumbnails-error", "ERROR", req.user?.email, jobid, {
+      jobid,
+      billid,
+      message: error.message,
+      stack: error.stack
+    });
+    res.status(400).json({ message: error.message, stack: error.stack });
+  }
+};
+
+exports.getBillFiles = async (req, res) => {
+  //Givena  bill ID, get the documents associated to it.
+};
+
+exports.downloadFiles = async (req, res) => {
+  //Given a series of document IDs or keys, generate a file (or a link) to download all images in bulk
+  const { jobid, billid, documentids } = req.body;
+  try {
+    logger.log("imgproxy-download", "DEBUG", req.user?.email, jobid, { billid, jobid, documentids });
+
+    //Delayed as the key structure may change slightly from what it is currently and will require evaluating mobile components.
+    const client = req.userGraphQLClient;
+    //Query for the keys of the document IDs
+    const data = await client.request(GET_DOCUMENTS_BY_IDS, { documentIds: documentids });
+    //Using the Keys, get all of the S3 links, zip them, and send back to the client.
+    const s3client = new S3Client({ region: InstanceRegion() });
+    const archiveStream = archiver("zip");
+    archiveStream.on("error", (error) => {
+      console.error("Archival encountered an error:", error);
+      throw new Error(error);
+    });
+    const passthrough = new stream.PassThrough();
+
+    archiveStream.pipe(passthrough);
+    for (const key of data.documents.map((d) => d.key)) {
+      const response = await s3client.send(new GetObjectCommand({ Bucket: imgproxyDestinationBucket, Key: key }));
+      // :: `response.Body` is a Buffer
+      console.log(path.basename(key));
+      archiveStream.append(response.Body, { name: path.basename(key) });
+    }
+
+    archiveStream.finalize();
+
+    const archiveKey = `archives/${jobid}/archive-${new Date().toISOString()}.zip`;
+
+    const parallelUploads3 = new Upload({
+      client: s3client,
+      queueSize: 4, // optional concurrency configuration
+      leavePartsOnError: false, // optional manually handle dropped parts
+      params: { Bucket: imgproxyDestinationBucket, Key: archiveKey, Body: passthrough }
+    });
+
+    parallelUploads3.on("httpUploadProgress", (progress) => {
+      console.log(progress);
+    });
+
+    const uploadResult = await parallelUploads3.done();
+    //Generate the presigned URL to download it.
+    const presignedUrl = await getSignedUrl(
+      s3client,
+      new GetObjectCommand({ Bucket: imgproxyDestinationBucket, Key: archiveKey }),
+      { expiresIn: 360 }
+    );
+
+    res.json({ success: true, url: presignedUrl });
+    //Iterate over them, build the link based on the media type, and return the array.
+  } catch (error) {
+    logger.log("imgproxy-thumbnails-error", "ERROR", req.user?.email, jobid, {
+      jobid,
+      billid,
+      message: error.message,
+      stack: error.stack
+    });
+    res.status(400).json({ message: error.message, stack: error.stack });
+  }
+};
+
+exports.deleteFiles = async (req, res) => {
+  //Mark a file for deletion in s3. Lifecycle deletion will actually delete the copy in the future.
+  //Mark as deleted from the documents section of the database.
+  const { ids } = req.body;
+  try {
+    logger.log("imgproxy-delete-files", "DEBUG", req.user.email, null, { ids });
+    const client = req.userGraphQLClient;
+
+    //Do this to make sure that they are only deleting things that they have access to
+    const data = await client.request(GET_DOCUMENTS_BY_IDS, { documentIds: ids });
+
+    const s3client = new S3Client({ region: InstanceRegion() });
+
+    const deleteTransactions = [];
+    data.documents.forEach((document) => {
+      deleteTransactions.push(
+        (async () => {
+          try {
+            // Delete the original object
+            const deleteResult = await s3client.send(
+              new DeleteObjectCommand({
+                Bucket: imgproxyDestinationBucket,
+                Key: document.key
+              })
+            );
+
+            return document;
+          } catch (error) {
+            return { document, error: error, bucket: imgproxyDestinationBucket };
+          }
+        })()
+      );
+    });
+
+    const result = await Promise.all(deleteTransactions);
+    const errors = result.filter((d) => d.error);
+
+    //Delete only the succesful deletes.
+    const deleteMutationResult = await client.request(DELETE_MEDIA_DOCUMENTS, {
+      ids: result.filter((t) => !t.error).map((d) => d.id)
+    });
+
+    res.json({ errors, deleteMutationResult });
+  } catch (error) {
+    logger.log("imgproxy-delete-files-error", "ERROR", req.user.email, null, {
+      ids,
+      message: error.message,
+      stack: error.stack
+    });
+    res.status(400).json({ message: error.message, stack: error.stack });
+  }
+};
+
+exports.moveFiles = async (req, res) => {
+  const { documents, tojobid } = req.body;
+  try {
+    logger.log("imgproxy-move-files", "DEBUG", req.user.email, null, { documents, tojobid });
+    const s3client = new S3Client({ region: InstanceRegion() });
+
+    const moveTransactions = [];
+    documents.forEach((document) => {
+      moveTransactions.push(
+        (async () => {
+          try {
+            // Copy the object to the new key
+            const copyresult = await s3client.send(
+              new CopyObjectCommand({
+                Bucket: imgproxyDestinationBucket,
+                CopySource: `${imgproxyDestinationBucket}/${document.from}`,
+                Key: document.to,
+                StorageClass: "INTELLIGENT_TIERING"
+              })
+            );
+
+            // Delete the original object
+            const deleteResult = await s3client.send(
+              new DeleteObjectCommand({
+                Bucket: imgproxyDestinationBucket,
+                Key: document.from
+              })
+            );
+
+            return document;
+          } catch (error) {
+            return { id: document.id, from: document.from, error: error, bucket: imgproxyDestinationBucket };
+          }
+        })()
+      );
+    });
+
+    const result = await Promise.all(moveTransactions);
+    const errors = result.filter((d) => d.error);
+
+    let mutations = "";
+    result
+      .filter((d) => !d.error)
+      .forEach((d, idx) => {
+        //Create mutation text
+        mutations =
+          mutations +
+          `
+      update_doc${idx}:update_documents_by_pk(pk_columns: { id: "${d.id}" }, _set: {key: "${d.to}", jobid: "${tojobid}"}){
+        id
+       }
+       `;
+      });
+
+    const client = req.userGraphQLClient;
+    if (mutations !== "") {
+      const mutationResult = await client.request(`mutation {
+            ${mutations}
+          }`);
+      res.json({ errors, mutationResult });
+    } else {
+      res.json({ errors: "No images were succesfully moved on remote server. " });
+    }
+  } catch (error) {
+    logger.log("imgproxy-move-files-error", "ERROR", req.user.email, null, {
+      documents,
+      tojobid,
+      message: error.message,
+      stack: error.stack
+    });
+    res.status(400).json({ message: error.message, stack: error.stack });
+  }
+};
+
+function base64UrlEncode(str) {
+  return Buffer.from(str).toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function createHmacSha256(data) {
+  return crypto.createHmac("sha256", imgproxyKey).update(data).digest("base64url");
+}

server/media/media.js

@@ -11,12 +11,14 @@ require("dotenv").config({
 var cloudinary = require("cloudinary").v2;
 cloudinary.config(process.env.CLOUDINARY_URL);
 
-exports.createSignedUploadURL = (req, res) => {
+const createSignedUploadURL = (req, res) => {
   logger.log("media-signed-upload", "DEBUG", req.user.email, null, null);
   res.send(cloudinary.utils.api_sign_request(req.body, process.env.CLOUDINARY_API_SECRET));
 };
 
-exports.downloadFiles = (req, res) => {
+exports.createSignedUploadURL = createSignedUploadURL;
+
+const downloadFiles = (req, res) => {
   const { ids } = req.body;
   logger.log("media-bulk-download", "DEBUG", req.user.email, ids, null);
 
@@ -26,8 +28,9 @@ exports.downloadFiles = (req, res) => {
   });
   res.send(url);
 };
+exports.downloadFiles = downloadFiles;
 
-exports.deleteFiles = async (req, res) => {
+const deleteFiles = async (req, res) => {
   const { ids } = req.body;
   const types = _.groupBy(ids, (x) => DetermineFileType(x.type));
 
@@ -88,7 +91,9 @@ exports.deleteFiles = async (req, res) => {
   }
 };
 
-exports.renameKeys = async (req, res) => {
+exports.deleteFiles = deleteFiles;
+
+const renameKeys = async (req, res) => {
   const { documents, tojobid } = req.body;
   logger.log("media-bulk-rename", "DEBUG", req.user.email, null, documents);
 
@@ -146,6 +151,7 @@ exports.renameKeys = async (req, res) => {
     res.json({ errors: "No images were succesfully moved on remote server. " });
   }
 };
+exports.renameKeys = renameKeys;
 
 //Also needs to be updated in upload utility and mobile app.
 function DetermineFileType(filetype) {

server/routes/mediaRoutes.js

@@ -1,13 +1,28 @@
 const express = require("express");
 const router = express.Router();
 const { createSignedUploadURL, downloadFiles, renameKeys, deleteFiles } = require("../media/media");
+const {
+  generateSignedUploadUrls: createSignedUploadURLImgproxy,
+  getThumbnailUrls: getThumbnailUrlsImgproxy,
+  downloadFiles: downloadFilesImgproxy,
+  moveFiles: moveFilesImgproxy,
+  deleteFiles: deleteFilesImgproxy
+} = require("../media/imgproxy-media");
 const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
+const withUserGraphQLClientMiddleware = require("../middleware/withUserGraphQLClientMiddleware");
 
 router.use(validateFirebaseIdTokenMiddleware);
+router.use(withUserGraphQLClientMiddleware);
 
 router.post("/sign", createSignedUploadURL);
 router.post("/download", downloadFiles);
 router.post("/rename", renameKeys);
 router.post("/delete", deleteFiles);
 
+router.post("/imgproxy/sign", createSignedUploadURLImgproxy);
+router.post("/imgproxy/thumbnails", getThumbnailUrlsImgproxy);
+router.post("/imgproxy/download", downloadFilesImgproxy);
+router.post("/imgproxy/rename", moveFilesImgproxy);
+router.post("/imgproxy/delete", deleteFilesImgproxy);
+
 module.exports = router;

server/tests/api.test.js

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import request from "supertest";
+import express from "express";
+
+const app = express();
+app.get("/api/health", (req, res) => res.json({ status: "ok" }));
+
+describe("API", () => {
+  it("returns health status", async () => {
+    const response = await request(app).get("/api/health");
+    expect(response.status).toBe(200);
+    expect(response.body).toEqual({ status: "ok" });
+  });
+});

server/tests/math.test.js

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "vitest";
+
+function add(a, b) {
+  return a + b;
+}
+
+describe("Math", () => {
+  it("adds two numbers correctly", () => {
+    expect(add(2, 3)).toBe(5);
+  });
+});

vitest.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    globals: true,
+    include: ["./server/tests/**/*.{test,spec}.[jt]s"], // Only search /tests in root
+    exclude: ["**/client/**", "**/node_modules/**", "**/dist/**"] // Explicitly exclude /client
+  }
+});