IO-2481 Parts Queue Query

prettyier

.circleci/config.yml

@@ -8,13 +8,13 @@ orbs:
 jobs:
   api-deploy:
     docker:
-      - image: "cimg/base:stable"
+      - image: cimg/node:18.18.2
     steps:
       - checkout
       - eb/setup
       - run:
           command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 16 running on 64bit Amazon Linux 2"
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
             eb status --verbose
             eb deploy
             eb status

.gitignore

@@ -118,5 +118,5 @@ logs/oAuthClient-log.log
 .node-persist/**
 
 /*.env.*
-
-client/cypress/e2e/[1,2]-*
+.idea/*
+.idea

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

client/cypress.config.js

@@ -1,17 +0,0 @@
-const { defineConfig } = require("cypress");
-
-module.exports = defineConfig({
-  experimentalStudio: true,
-
-  env: {
-    FIREBASE_USERNAME: "cypress@imex.test",
-    FIREBASE_PASSWORD: "cypress",
-  },
-
-  e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
-    baseUrl: "http://localhost:3000",
-  },
-});

client/cypress.env.json

@@ -1,4 +0,0 @@
-{
-  "graphql_dev_endpoint": "https://db.dev.bodyshop.app/v1/graphql",
-  "uploaded_by_email": "john@imex.dev"
-}

client/cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "experimentalStudio": true,
+  "env": {
+    "FIREBASE_USERNAME": "cypress@imex.test",
+    "FIREBASE_PASSWORD": "cypress"
+  }
+}

client/cypress/e2e/intake/intake-checklist.cy.js

@@ -1,232 +0,0 @@
-import moment from "moment";
-import job from "../../fixtures/jobs/job-3.json";
-
-describe(
-  "Adding job to checklist",
-  {
-    defaultCommandTimeout: 10000,
-  },
-  () => {
-    beforeEach(() => {
-      cy.visit("/manage/jobs");
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_BODYSHOP") {
-          req.alias = "bodyshop";
-        }
-      });
-
-      cy.get('[data-cy="active-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("active-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@active-jobs-table")
-        .contains(job.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-    });
-
-    it("adds checklists to the job and set the job to production", () => {
-      const tomorrow = moment(new Date()).format("YYYY-MM-DD");
-
-      cy.get('[data-cy="job-actions-button"]').click();
-      // Go to intake
-      cy.get('[data-cy="job-intake-button"]').should("not.be.disabled").click();
-      cy.url().should("include", "/intake");
-      // Fill out the form
-      cy.get('[data-cy="checklist-form"]').should("be.visible");
-
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        // intakechecklist
-        const checklists = bodyshop.intakechecklist.form;
-
-        checklists.forEach((item, index) => {
-          if (item.type === "text") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("input:text")
-              .type("Random Word");
-          } else if (item.type === "textarea") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("textarea")
-              .type("Random Word");
-          } else if (item.type === "checkbox") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("input:checkbox")
-              .check();
-          } else if (item.type === "slider") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find(".ant-slider-dot:eq(1)")
-              .click({ force: true });
-          } else if (item.type === "rate") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find(".ant-rate > li")
-              .eq(3)
-              .find("div[role='radio']")
-              .click({ force: true });
-          }
-        });
-      });
-
-      // Check if `Add Job to Production` is switched to on
-      cy.get('[data-cy="add-to-production-switch"]').should(
-        "have.attr",
-        "aria-checked",
-        "true"
-      );
-      // Select dates for completion and delivery
-      cy.get("#scheduled_completion").find(".ant-picker-input").first().click();
-      cy.get(`[title="${tomorrow}"]`).should("be.visible").click();
-      // Add time selection
-      cy.get("#scheduled_delivery").find(".ant-picker-input").first().click();
-      cy.get(`[title="${tomorrow}"]`)
-        .should("be.visible")
-        .click({ multiple: true, force: true });
-      // Add time selection
-      // Add note
-      cy.get('[data-cy="checklist-production-note"]').type("automated testing");
-      // Submit the form
-      cy.get('[data-cy="checklist-submit-button"]').click();
-
-      cy.url().should("include", "/manage/jobs");
-      cy.contains("In Production");
-    });
-
-    it("adds checklists to the job and remove the job to production", () => {
-      const tomorrow = moment(new Date()).format("YYYY-MM-DD");
-
-      cy.get('[data-cy="job-actions-button"]').click();
-      // Go to deliver
-      cy.get('[data-cy="job-deliver"]').should("not.be.disabled").click();
-      cy.url().should("include", "/deliver");
-      // Fill out the form
-      cy.get('[data-cy="checklist-form"]').should("be.visible");
-
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        // deliverchecklist
-        const checklists = bodyshop.deliverchecklist.form;
-
-        checklists.forEach((item, index) => {
-          if (item.type === "text") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("input:text")
-              .type("Random Word");
-          } else if (item.type === "textarea") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("textarea")
-              .type("Random Word");
-          } else if (item.type === "checkbox") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("input:checkbox")
-              .check();
-          } else if (item.type === "slider") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find(".ant-slider-dot:eq(1)")
-              .click({ force: true });
-          } else if (item.type === "rate") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find(".ant-rate > li")
-              .eq(3)
-              .find("div[role='radio']")
-              .click({ force: true });
-          }
-        });
-      });
-
-      // Select dates for completion and delivery
-      cy.get("#actual_completion").find(".ant-picker-input").first().click();
-      cy.get(`[title="${tomorrow}"]`).should("be.visible").click();
-      cy.get("#actual_delivery").find(".ant-picker-input").first().click();
-      cy.get(`[title="${tomorrow}"]`)
-        .should("be.visible")
-        .click({ multiple: true, force: true });
-
-      cy.get('[data-cy="remove-from-production"]').should(
-        "have.attr",
-        "aria-checked",
-        "true"
-      );
-
-      // Submit the form
-      cy.get('[data-cy="checklist-submit-button"]').click();
-
-      //   Job checklist completed.
-      cy.url().should("include", "/manage/jobs");
-      cy.contains("Delivered");
-    });
-
-    it("renders and check the checklists correctly", () => {
-      // Click the actions button
-      cy.get('[data-cy="job-actions-button"]').click();
-      // Go to checklists
-      cy.get('[data-cy="job-checklist"]').should("not.be.disabled").click();
-
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        // intakechecklist
-        const intakechecklist = bodyshop.intakechecklist.form;
-        // deliverchecklist
-        const deliverchecklist = bodyshop.deliverchecklist.form;
-
-        const checklists = [...intakechecklist, ...deliverchecklist];
-
-        cy.get('[data-cy="intake-checklist"]')
-          .should("be.visible")
-          .find("input")
-          .should("be.disabled");
-
-        cy.get('[data-cy="deliver-checklist"]')
-          .should("be.visible")
-          .find("input")
-          .should("be.disabled");
-
-        checklists.forEach((item, index) => {
-          if (item.type === "text") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("input:text")
-              .should("have.value", "Random Word");
-          } else if (item.type === "textarea") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("textarea")
-              .should("have.value", "Random Word");
-          } else if (item.type === "checkbox") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find("input:checkbox")
-              .should("be.checked");
-          } else if (item.type === "slider") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find(".ant-slider-handle")
-              .should("have.attr", "aria-valuenow", item.max / 2);
-          } else if (item.type === "rate") {
-            cy.get('[data-cy="config-form-components"] > div')
-              .eq(index)
-              .find(".ant-rate > .ant-rate-star-full")
-              .should("have.length", 3);
-          }
-        });
-      });
-    });
-  }
-);

client/cypress/e2e/job-import/converting.cy.js

@@ -1,149 +0,0 @@
-import job from "../../fixtures/jobs/job-3.json";
-
-const errorMessages = {
-  class: "Class is required. ",
-  referral_source: "Referral Source is required. ",
-  employee_csr: "Customer Service Rep. is required. ",
-  category: "Category is required. ",
-};
-
-describe(
-  "Converting a job with ",
-  {
-    defaultCommandTimeout: 10000,
-  },
-  () => {
-    beforeEach(() => {
-      cy.visit("/manage/jobs");
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_BODYSHOP") {
-          req.alias = "bodyshop";
-        }
-      });
-
-      cy.get('[data-cy="active-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("active-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@active-jobs-table")
-        .contains(job.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-
-      cy.get('[data-cy="job-convert-button"]').click();
-    });
-
-    it("shows the error messages of required fields", () => {
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        const data = {
-          ins_cos: bodyshop.md_ins_cos,
-          config: {
-            class: bodyshop.enforce_class,
-            referral_source: bodyshop.enforce_referral,
-            employee_csr: bodyshop.enforce_conversion_csr,
-            category: bodyshop.enforce_conversion_category,
-          },
-        };
-
-        cy.get('[data-cy="convert-button"]').click();
-
-        cy.get("#ins_co_nm_help")
-          .find(".ant-form-item-explain-error")
-          .should("have.text", "Insurance Company Name is required. ");
-
-        for (const id in data.config) {
-          if (data.config[id]) {
-            cy.get(`#${id}_help`)
-              .find(".ant-form-item-explain-error")
-              .should("have.text", errorMessages[id]);
-          }
-        }
-      });
-    });
-
-    it("shows error of required fields when insurance company is selected", () => {
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        const data = {
-          ins_cos: bodyshop.md_ins_cos,
-          config: {
-            class: bodyshop.enforce_class,
-            referral_source: bodyshop.enforce_referral,
-            employee_csr: bodyshop.enforce_conversion_csr,
-            category: bodyshop.enforce_conversion_category,
-          },
-        };
-
-        cy.get(".ant-select-selection-search").find("#ins_co_nm").click();
-        cy.get("#ins_co_nm_list")
-          .next()
-          .find(".ant-select-item-option-content")
-          .first()
-          .click();
-
-        cy.get("#ca_gst_registrant").should("have.class", "ant-switch").click();
-        cy.get("#driveable").should("have.class", "ant-switch").click();
-        cy.get("#towin").should("have.class", "ant-switch").click();
-
-        cy.get('[data-cy="convert-button"]').click();
-
-        for (const id in data.config) {
-          if (data.config[id]) {
-            cy.get(`#${id}_help`)
-              .find(".ant-form-item-explain-error")
-              .should("have.text", errorMessages[id]);
-          }
-        }
-      });
-    });
-
-    it("checks for the job to convert", () => {
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        const data = {
-          ins_cos: bodyshop.md_ins_cos,
-          config: {
-            class: bodyshop.enforce_class,
-            referral_source: bodyshop.enforce_referral,
-            employee_csr: bodyshop.enforce_conversion_csr,
-            category: bodyshop.enforce_conversion_category,
-          },
-        };
-
-        cy.get(".ant-select-selection-search").find("#ins_co_nm").click();
-        cy.get("#ins_co_nm_list")
-          .next()
-          .find(".ant-select-item-option-content")
-          .first()
-          .click();
-
-        for (const id in data.config) {
-          if (data.config[id]) {
-            cy.get(".ant-select-selection-search").find(`#${id}`).click();
-            cy.get(`#${id}_list`)
-              .next()
-              .find(".ant-select-item-option-content")
-              .first()
-              .click();
-          }
-        }
-
-        cy.get("#ca_gst_registrant").should("have.class", "ant-switch").click();
-        cy.get("#driveable").should("have.class", "ant-switch").click();
-        cy.get("#towin").should("have.class", "ant-switch").click();
-
-        // cy.get('[data-cy="convert-button"]').click();
-        // cy.get(".ant-notification-notice-message").contains("successfully");
-      });
-    });
-  }
-);

client/cypress/e2e/job-import/job-import.cy.js

@@ -1,500 +0,0 @@
-import job from "../../fixtures/jobs/job-3.json";
-import job2 from "../../fixtures/jobs/job-4.json";
-import jobSupplement from "../../fixtures/jobs/job-3-supplement.json";
-import jobMetadata from "../../fixtures/jobs/job-3-jobmetadata.json";
-import jobSupplementMetadata from "../../fixtures/jobs/job-3-supplment-jobmetadata.json";
-import Dinero from "dinero.js";
-
-const createJobEstimate = (job, bodyshopid) => {
-  return {
-    owner: {
-      data: {
-        shopid: bodyshopid,
-        ...job.owner.data,
-      },
-    },
-    vehicle: {
-      data: {
-        shopid: bodyshopid,
-        ...job.vehicle.data,
-      },
-    },
-    shopid: bodyshopid,
-    ...job,
-  };
-};
-
-describe(
-  "Importing an available job",
-  {
-    defaultCommandTimeout: 10000,
-    requestTimeout: 10000,
-  },
-  () => {
-    // assuming that user is logged in
-    beforeEach(() => {
-      cy.visit("/manage/available");
-      // intercept bodyshop query for id
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_BODYSHOP") {
-          req.alias = "bodyshop";
-        }
-      });
-
-      cy.wait("@bodyshop").then(({ response }) => {
-        const id = response.body.data.bodyshops[0].id;
-
-        cy.wrap(id).as("bodyshopid");
-      });
-    });
-
-    it("Enters a job programatically", () => {
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_AVAILABLE_JOBS") {
-          req.alias = "availableJobs";
-        }
-      });
-
-      cy.wait("@availableJobs").then(({ request }) => {
-        const token = request.headers.authorization;
-
-        cy.get("@bodyshopid").then((bodyshopid) => {
-          const job_est_data = createJobEstimate(job, bodyshopid);
-
-          cy.insertAvailableJob({
-            bodyshopid,
-            job,
-            token,
-            job_est_data,
-          });
-        });
-      });
-    });
-
-    it("creates a new owner record for the job", () => {
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_AVAILABLE_JOBS") {
-          req.alias = "availableJobs";
-        }
-      });
-
-      cy.wait("@availableJobs");
-
-      cy.get('[data-cy="available-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .contains(job.clm_no)
-        .parent()
-        .as("row");
-
-      cy.get("@row")
-        .find('[data-cy="add-job-as-new-button"]')
-        .should("be.enabled")
-        .click();
-
-      cy.get('[data-cy="new_owner_checkbox"]').should("be.checked");
-      cy.get('[data-cy="existing-owners-ok-button"]')
-        .should("be.enabled")
-        .click();
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "INSERT_JOB") {
-          req.alias = "insertJob";
-        }
-      });
-
-      cy.wait("@insertJob").then(({ response }) => {
-        const id = response.body.data.insert_jobs.returning[0].id;
-
-        cy.get(".ant-notification-notice-message")
-          .contains("Job created successfully. Click to view.")
-          .click();
-
-        cy.url().should("include", `/manage/jobs/${id}`);
-      });
-
-      cy.get('[data-cy="tab-totals"]').should("be.visible").click();
-
-      cy.get('[data-cy="job-totals-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("totals-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@totals-table")
-        .eq(0)
-        .find("td:not(.ant-table-selection-column)")
-        .eq(1)
-        .invoke("text")
-        .should(
-          "be.equal",
-          Dinero({
-            amount: jobMetadata.totals.subtotal.amount,
-          }).toFormat()
-        );
-    });
-
-    it("imports a supplement for an existing job", () => {
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_AVAILABLE_JOBS") {
-          req.alias = "availableJobs";
-        }
-      });
-
-      cy.wait("@availableJobs").then(({ request }) => {
-        const token = request.headers.authorization;
-
-        cy.get("@bodyshopid").then((bodyshopid) => {
-          const job_est_data = createJobEstimate(jobSupplement, bodyshopid);
-
-          cy.insertAvailableJob({
-            bodyshopid,
-            job: jobSupplement,
-            token,
-            job_est_data,
-          });
-        });
-      });
-
-      cy.get('[data-cy="refetch-available-jobs-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="available-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .contains(jobSupplement.clm_no)
-        .parent()
-        .as("row");
-
-      cy.get('[data-cy="add-job-as-supplement"]').should("be.enabled").click();
-
-      cy.get('[data-cy="existing-jobs-table"]')
-        .find(".ant-table-tbody tr")
-        .should("not.have.class", "ant-table-placeholder")
-        .first()
-        .click();
-
-      cy.get('[data-cy="existing-jobs-ok-button"]')
-        .should("not.be", "disabled")
-        .click();
-
-      cy.get(".ant-notification-notice-message")
-        .contains("Job supplemented successfully.")
-        .click();
-
-      cy.url().should("include", "/manage/jobs");
-
-      cy.get('[data-cy="tab-totals"]').should("be.visible").click();
-
-      cy.get('[data-cy="job-totals-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("totals-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@totals-table")
-        .eq(0)
-        .find("td:not(.ant-table-selection-column)")
-        .eq(1)
-        .invoke("text")
-        .should(
-          "be.equal",
-          Dinero({
-            amount: jobSupplementMetadata.totals.subtotal.amount,
-          }).toFormat()
-        );
-    });
-
-    it("imports a supplement and override estimate header", () => {
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_AVAILABLE_JOBS") {
-          req.alias = "availableJobs";
-        }
-      });
-
-      cy.wait("@availableJobs").then(({ request }) => {
-        const token = request.headers.authorization;
-
-        cy.get("@bodyshopid").then((bodyshopid) => {
-          const job_est_data = createJobEstimate(jobSupplement, bodyshopid);
-
-          cy.insertAvailableJob({
-            bodyshopid,
-            job: jobSupplement,
-            token,
-            job_est_data,
-          });
-        });
-      });
-
-      cy.get('[data-cy="refetch-available-jobs-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="available-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .contains(jobSupplement.clm_no)
-        .parent()
-        .as("row");
-
-      cy.get('[data-cy="add-job-as-supplement"]').should("be.enabled").click();
-
-      cy.get('[data-cy="existing-jobs-table"]')
-        .find(".ant-table-tbody tr")
-        .should("not.have.class", "ant-table-placeholder")
-        .first()
-        .click();
-
-      // click override
-      cy.get('[data-cy="override-header-checkbox"]').check();
-
-      cy.get('[data-cy="existing-jobs-ok-button"]')
-        .should("not.be", "disabled")
-        .click();
-
-      cy.get(".ant-notification-notice-message")
-        .contains("Job supplemented successfully.")
-        .click();
-
-      cy.url().should("include", "/manage/jobs");
-
-      cy.get('[data-cy="tab-totals"]').should("be.visible").click();
-
-      cy.get('[data-cy="job-totals-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("totals-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@totals-table")
-        .eq(0)
-        .find("td:not(.ant-table-selection-column)")
-        .eq(1)
-        .invoke("text")
-        .should(
-          "be.equal",
-          Dinero({
-            amount: jobSupplementMetadata.totals.subtotal.amount,
-          }).toFormat()
-        );
-    });
-
-    it("imports a job with an existing owner", () => {
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_AVAILABLE_JOBS") {
-          req.alias = "availableJobs";
-        }
-      });
-
-      cy.wait("@availableJobs").then(({ request }) => {
-        const token = request.headers.authorization;
-
-        cy.get("@bodyshopid").then((bodyshopid) => {
-          const job_est_data = createJobEstimate(job2, bodyshopid);
-
-          cy.insertAvailableJob({
-            bodyshopid,
-            job: job2,
-            token,
-            job_est_data,
-          });
-        });
-      });
-
-      cy.get('[data-cy="refetch-available-jobs-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="add-job-as-new-button"]').should("be.enabled").click();
-
-      cy.get('[data-cy="existing-owner-table"]', { timeout: 20000 })
-        .find(".ant-table-tbody tr")
-        .should("not.have.class", "ant-table-placeholder")
-        .then(($table) => {
-          cy.wrap($table).first().click();
-
-          cy.get('[data-cy="new_owner_checkbox"]').should("not.be", "checked");
-        });
-
-      cy.get('[data-cy="existing-owners-ok-button"]').click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Job created successfully. Click to view."
-      );
-
-      cy.visit("/manage/owners");
-      // Navigate to owner records
-      cy.get('[data-cy="owners-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("owners-table")
-        .should("not.have.class", "ant-table-placeholder");
-      // Get owner name
-      cy.get("@owners-table")
-        .contains(`${job2.owner.data.ownr_fn} ${job2.owner.data.ownr_ln}`)
-        .click();
-
-      // check list if claim number is there
-      cy.get('[data-cy="owner-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("owner-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-      // Get owner name
-      cy.get("@owner-jobs-table").contains(job2.clm_no).should("exist");
-    });
-  }
-);
-
-const errorMessages = {
-  class: "Class is required. ",
-  referral_source: "Referral Source is required. ",
-  employee_csr: "Customer Service Rep. is required. ",
-  category: "Category is required. ",
-};
-
-describe(
-  "Converting an active job",
-  {
-    defaultCommandTimeout: 10000,
-  },
-  () => {
-    beforeEach(() => {
-      cy.visit("/manage/jobs");
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_BODYSHOP") {
-          req.alias = "bodyshop";
-        }
-      });
-
-      cy.get('[data-cy="active-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("active-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@active-jobs-table")
-        .contains(job.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-
-      cy.get('[data-cy="job-convert-button"]').click();
-    });
-
-    it("shows the error messages of required fields", () => {
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        const data = {
-          ins_cos: bodyshop.md_ins_cos,
-          config: {
-            class: bodyshop.enforce_class,
-            referral_source: bodyshop.enforce_referral,
-            employee_csr: bodyshop.enforce_conversion_csr,
-            category: bodyshop.enforce_conversion_category,
-          },
-        };
-
-        cy.get('[data-cy="convert-button"]').click();
-
-        cy.get("#ins_co_nm_help")
-          .find(".ant-form-item-explain-error")
-          .should("have.text", "Insurance Company Name is required. ");
-
-        for (const id in data.config) {
-          if (data.config[id]) {
-            cy.get(`#${id}_help`)
-              .find(".ant-form-item-explain-error")
-              .should("have.text", errorMessages[id]);
-          }
-        }
-      });
-    });
-
-    it("shows error of required fields when insurance company is selected", () => {
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        const data = {
-          ins_cos: bodyshop.md_ins_cos,
-          config: {
-            class: bodyshop.enforce_class,
-            referral_source: bodyshop.enforce_referral,
-            employee_csr: bodyshop.enforce_conversion_csr,
-            category: bodyshop.enforce_conversion_category,
-          },
-        };
-
-        cy.get(".ant-select-selection-search").find("#ins_co_nm").click();
-        cy.get("#ins_co_nm_list")
-          .next()
-          .find(".ant-select-item-option-content")
-          .first()
-          .click();
-
-        cy.get("#ca_gst_registrant").should("have.class", "ant-switch").click();
-        cy.get("#driveable").should("have.class", "ant-switch").click();
-        cy.get("#towin").should("have.class", "ant-switch").click();
-
-        cy.get('[data-cy="convert-button"]').click();
-
-        for (const id in data.config) {
-          if (data.config[id]) {
-            cy.get(`#${id}_help`)
-              .find(".ant-form-item-explain-error")
-              .should("have.text", errorMessages[id]);
-          }
-        }
-      });
-    });
-
-    it("checks for the job to convert", () => {
-      cy.wait("@bodyshop").then(({ response }) => {
-        const bodyshop = response.body.data.bodyshops[0];
-
-        const data = {
-          ins_cos: bodyshop.md_ins_cos,
-          config: {
-            class: bodyshop.enforce_class,
-            referral_source: bodyshop.enforce_referral,
-            employee_csr: bodyshop.enforce_conversion_csr,
-            category: bodyshop.enforce_conversion_category,
-          },
-        };
-
-        cy.get(".ant-select-selection-search").find("#ins_co_nm").click();
-        cy.get("#ins_co_nm_list")
-          .next()
-          .find(".ant-select-item-option-content")
-          .first()
-          .click();
-
-        for (const id in data.config) {
-          if (data.config[id]) {
-            cy.get(".ant-select-selection-search").find(`#${id}`).click();
-            cy.get(`#${id}_list`)
-              .next()
-              .find(".ant-select-item-option-content")
-              .first()
-              .click();
-          }
-        }
-
-        cy.get("#ca_gst_registrant").should("have.class", "ant-switch").click();
-        cy.get("#driveable").should("have.class", "ant-switch").click();
-        cy.get("#towin").should("have.class", "ant-switch").click();
-
-        cy.get('[data-cy="convert-button"]').click();
-        cy.get(".ant-notification-notice-message").contains(
-          "Job converted successfully."
-        );
-      });
-    });
-  }
-);

client/cypress/e2e/login-and-navigation/login.cy.js

@@ -1,32 +0,0 @@
-describe("logging in to the application", () => {
-  // FIXME error message
-  it("logs in the using wrong credentials", () => {
-    cy.login("fakeusername", "veryverylongpassword_123@#");
-    cy.contains("invalid-email");
-  });
-
-  it("logs in the using wrong password", () => {
-    cy.login("john@imex.dev", "veryverylongpassword_123@#");
-    cy.contains(
-      "The email and password combination you provided is incorrect."
-    );
-  });
-
-  it("logs in a non-existent credentials", () => {
-    cy.login("franz@imex.dev", "veryverylongpassword_123@#");
-    cy.contains("A user with this email does not exist.");
-  });
-
-  //   TODO create disabled account
-  //   it("logs in with a disabled account", () => {
-  //     cy.login("disabled_account@imex.dev", "john123");
-  //     cy.contains("User account disabled.");
-  //   });
-
-  //   TODO log in to the application
-  //   it("logs in the using the right credentials", () => {
-  //     cy.login("john@imex.dev", "john123");
-
-  //     cy.url().should('include', '/manage')
-  //   });
-});

client/cypress/e2e/login-and-navigation/reset-password.cy.js

@@ -1,17 +0,0 @@
-describe("resetting user password", () => {
-  it("resets forgotten password with an invalid email", () => {
-    cy.passwordReset("franz");
-    cy.contains("Email is not a valid email");
-  });
-
-  //   FIXME error message
-  it("resets forgotten password with a user that does not exist", () => {
-    cy.passwordReset("franz@imex.dev");
-    cy.contains("user-not-found");
-  });
-
-  it("resets forgotten password using the right credentials", () => {
-    cy.passwordReset("john@imex.dev");
-    cy.contains("A password reset link has been sent to you.");
-  });
-});

client/cypress/e2e/parts-ordering/parts-ordering.cy.js

@@ -1,131 +0,0 @@
-import job from "../../fixtures/jobs/job-3.json";
-import job2 from "../../fixtures/jobs/job-4.json";
-import moment from "moment";
-
-describe(
-  "Ordering parts for the job",
-  {
-    defaultCommandTimeout: 10000,
-  },
-  () => {
-    beforeEach(() => {
-      cy.visit("/manage/jobs");
-
-      cy.get('[data-cy="active-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("active-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-    });
-
-    it("order parts for the job", () => {
-      const today = moment(new Date()).format("YYYY-MM-DD");
-
-      cy.get("@active-jobs-table")
-        .contains(job.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-
-      // Go to repair data tab
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-      // Click on filter parts only
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Select multiple rows
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-checkbox-input")
-        .click();
-      // Click Order Parts
-      cy.get('[data-cy="order-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Modal should be visible
-      cy.get('[data-cy="parts-order-modal"]').should("be.visible");
-      // Fill required fields
-      cy.get(".ant-select-selection-search").find(`#vendorid`).click();
-      cy.get(`#vendorid_list`)
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click({ force: true });
-      cy.get("#deliver_by").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="part-order-select-none"]').check();
-      cy.get('[data-cy="order-part-submit"]').should("not.be.disabled").click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Parts order created successfully."
-      );
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-table-cell")
-        .eq(15)
-        .contains("Ordered");
-    });
-
-    it.only("order multiple  parts for the job", () => {
-      const today = moment(new Date()).format("YYYY-MM-DD");
-
-      cy.get("@active-jobs-table")
-        .contains(job2.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-
-      // Go to repair data tab
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-      // Click on filter parts only
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Select multiple rows
-      cy.get('[data-cy="repair-data-table"]')
-        .find("input:checkbox")
-        .first()
-        .click();
-      // Click Order Parts
-      cy.get('[data-cy="order-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Modal should be visible
-      cy.get('[data-cy="parts-order-modal"]').should("be.visible");
-      // Fill required fields
-      cy.get(".ant-select-selection-search").find(`#vendorid`).click();
-      cy.get(`#vendorid_list`)
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click({ force: true });
-      cy.get("#deliver_by").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="part-order-comments"]').type("testing from cypress");
-
-      cy.get('[data-cy="part-order-select-none"]').check();
-      cy.get('[data-cy="order-part-submit"]').should("not.be.disabled").click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Parts order created successfully."
-      );
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-table-cell")
-        .eq(15)
-        .contains("Ordered");
-    });
-  }
-);

client/cypress/e2e/payments/entering-payments.cy.js

@@ -1,89 +0,0 @@
-describe(
-  "Entering payment for the job",
-  {
-    defaultCommandTimeout: 5000,
-  },
-  () => {
-    beforeEach(() => {
-      cy.visit("/manage");
-
-      cy.get("body").then(($body) => {
-        if ($body.text().includes("Login")) {
-          // Log in
-          cy.get('[data-cy="username"]').type("john@imex.dev");
-          cy.get('[data-cy="password"]').type("john123");
-          cy.get('[data-cy="sign-in-button"]').click();
-        }
-
-        cy.get(".ant-table-tbody")
-          .should("be.visible")
-          .find("tr")
-          .should("not.have.class", "ant-table-placeholder");
-
-        cy.get(".ant-table-row")
-          .not(':contains("Open")')
-          .first()
-          .find("a")
-          .first()
-          .click();
-
-        cy.url().should("include", "/manage/jobs");
-
-        // Go to totals data tab
-        cy.get('[data-cy="tab-totals"]').should("be.visible").click();
-      });
-    });
-
-    it("enters a payment manually", () => {
-      cy.get('[data-cy="job-payment-button"]').should("be.visible").click();
-
-      // fill out form
-      cy.get('[data-cy="payment-amount"]').type(100);
-      cy.get('[data-cy="payment-transactionid"]').type("QBD-P-03");
-      cy.get('[data-cy="payment-memo"]').type("e2e testing");
-      cy.get('[data-cy="payment-date"]').click();
-      cy.get('[title="2023-07-03"]').should("be.visible").click();
-
-      cy.antdSelect("payer");
-      cy.antdSelect("type");
-
-      cy.get('[data-cy="payment-form-save"]').click();
-    });
-
-    // TODO Add payment using intellipay
-
-    it("marks payment as exported", () => {
-      cy.get('[data-cy="payments-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("payments-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@payments-table")
-        .first()
-        .find('[data-cy="edit-payment-button"]')
-        .click();
-
-      cy.get('[data-cy="payment-markexported"]')
-        .should("not.be.disabled")
-        .click();
-    });
-
-    it("marks payment for re-export", () => {
-      cy.get('[data-cy="payments-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("payments-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@payments-table")
-        .last()
-        .find('[data-cy="edit-payment-button"]')
-        .click();
-
-      cy.get('[data-cy="payment-markforreexport"]')
-        .should("not.be.disabled")
-        .click();
-    });
-  }
-);

client/cypress/e2e/posting-bills/part-ordering.cy.js

@@ -1,431 +0,0 @@
-import job from "../../fixtures/jobs/job-3.json";
-import moment from "moment";
-
-const uuid = () => Cypress._.random(0, 1e6);
-
-describe(
-  "Billing job parts orders",
-  {
-    defaultCommandTimeout: 10000,
-  },
-  () => {
-    const today = moment(new Date()).format("YYYY-MM-DD");
-
-    beforeEach(() => {
-      cy.viewport(1280, 720);
-      cy.visit("/manage/jobs");
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "SEARCH_VENDOR_AUTOCOMPLETE") {
-          req.alias = "vendors";
-        }
-      });
-
-      cy.get('[data-cy="active-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("active-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@active-jobs-table")
-        .contains(job.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-    });
-
-    it("receives a part bill", () => {
-      // Order a part
-      // Go to repair data tab
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-      // Click on filter parts only
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Select multiple rows
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-checkbox-input")
-        .click();
-      // Click Order Parts
-      cy.get('[data-cy="order-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Modal should be visible
-      cy.get('[data-cy="parts-order-modal"]').should("be.visible");
-      // Fill required fields
-      cy.get(".ant-select-selection-search").find(`#vendorid`).click();
-      cy.get(`#vendorid_list`)
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click({ force: true });
-      cy.get("#deliver_by").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="part-order-comments"]').type("testing from cypress");
-
-      cy.get('[data-cy="part-order-select-none"]').check();
-      cy.get('[data-cy="order-part-submit"]').should("not.be.disabled").click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Parts order created successfully."
-      );
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-table-cell")
-        .eq(15)
-        .contains("Ordered");
-
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-      // Find the first row in the parts order
-      cy.get('[data-cy="part-orders-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("orders-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@orders-table")
-        .first()
-        .should("be.visible")
-        .find('[data-cy="receive-bill-button"]')
-        .click();
-
-      // fill out form
-      cy.get('[data-cy="bill-form-invoice"]').type(uuid());
-
-      cy.get("#bill-form-date").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="bill-form-parts-bin"]').find("input").click();
-      cy.get("#location_list")
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click();
-
-      cy.get('[data-cy="bill-line-table"]').each(($row) => {
-        // get retail amount
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-price"]')
-          .click({ force: true, multiple: true });
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-cost"]')
-          .click({ multiple: true });
-      });
-
-      cy.get('[data-cy="bill-line-actual-cost"]').then((cells) => {
-        const totals = cells.toArray().map((el) => Number(el.value));
-        const sum = Cypress._.sum(totals);
-
-        cy.get('[data-cy="bill-form-bill-total"]').type(sum);
-      });
-      // Click save
-      cy.get('[data-cy="bill-form-save-button"]').click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Invoice added successfully."
-      );
-
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-table-cell")
-        .eq(15)
-        .contains("Received");
-    });
-
-    it("backorders part from order", () => {
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      cy.get('[data-cy="part-orders-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("orders-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@orders-table")
-        .first()
-        .should("be.visible")
-        .find('[data-cy="view-part-order-button"]')
-        .click();
-
-      cy.get('[data-cy="mark-backorder-button"]').click();
-      cy.get(".backorder-date").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="mark-for-backorder-button"]').click();
-
-      cy.get(".ant-drawer-close").click();
-
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-table-cell")
-        .eq(15)
-        .contains("Backordered");
-    });
-
-    it("order parts inhouse", () => {
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-      // Click on filter parts only
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Select multiple rows
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-checkbox-input")
-        .click();
-      // Click Order Parts
-      cy.get('[data-cy="order-parts-inhouse-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.antdSelect("bill-vendor");
-
-      cy.antdSelect("bill-cost-center");
-
-      cy.get('[data-cy="bill-form-save-button"]').click({ force: true });
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Invoice added successfully."
-      );
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find(".ant-table-cell")
-        .eq(15)
-        .contains("Received");
-    });
-
-    it("check inhouse bill to have extra actions", () => {
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      cy.get('[data-cy="bills-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("bills-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@bills-table")
-        .contains("$0.00")
-        .parent()
-        .parent()
-        .first()
-        .find('[data-cy="print-wrapper"]')
-        .should("exist");
-    });
-
-    it("posts bill directly", () => {
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      cy.get('[data-cy="bills-post-button"]').should("be.visible").click();
-
-      // Add New Line
-      cy.get('[data-cy="bill-line-add-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Select Vendor
-      cy.antdSelect("bill-vendor");
-      // Select Line
-      cy.antdSelect("bill-line");
-
-      cy.get('[data-cy="bill-line-line-desc"]').type("Line Description");
-      // Fill the Form
-      cy.get('[data-cy="bill-form-invoice"]').type(uuid());
-
-      cy.get("#bill-form-date").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="bill-form-parts-bin"]').find("input").click();
-      cy.get("#location_list")
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click();
-
-      cy.get('[data-cy="bill-line-table"]').each(($row) => {
-        // get retail amount
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-price"]')
-          .click({ force: true, multiple: true });
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-cost"]')
-          .click({ multiple: true });
-      });
-
-      cy.get('[data-cy="bill-line-actual-cost"]').then((cells) => {
-        const totals = cells.toArray().map((el) => Number(el.value));
-        const sum = Cypress._.sum(totals);
-
-        cy.get('[data-cy="bill-form-bill-total"]').type(sum);
-      });
-
-      cy.antdSelect("bill-cost-center");
-
-      // Click save
-      cy.get('[data-cy="bill-form-save-button"]').click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Invoice added successfully."
-      );
-    });
-
-    it("posts a bill with save and new", () => {
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      cy.get('[data-cy="bills-post-button"]').should("be.visible").click();
-
-      // Add New Line
-      cy.get('[data-cy="bill-line-add-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Select Vendor
-      cy.antdSelect("bill-vendor");
-      // Select Line
-      cy.antdSelect("bill-line", "-- Not On Estimate --");
-      // Fill the Form
-      cy.get('[data-cy="bill-form-invoice"]').type(uuid());
-
-      cy.get("#bill-form-date").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="bill-form-parts-bin"]').find("input").click();
-      cy.get("#location_list")
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click();
-
-      cy.get('[data-cy="bill-line-table"]').each(($row) => {
-        // get retail amount
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-price"]')
-          .click({ force: true, multiple: true });
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-cost"]')
-          .click({ multiple: true });
-      });
-
-      cy.get('[data-cy="bill-line-actual-cost"]').then((cells) => {
-        const totals = cells.toArray().map((el) => Number(el.value));
-        const sum = Cypress._.sum(totals);
-
-        cy.get('[data-cy="bill-form-bill-total"]').type(sum);
-      });
-
-      cy.antdSelect("bill-cost-center");
-
-      // Click save
-      cy.get('[data-cy="bill-form-savenew-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Invoice added successfully."
-      );
-    });
-
-    it("uploads a document to a bill", () => {
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      cy.get('[data-cy="bills-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("bills-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@bills-table")
-        .first()
-        .should("be.visible")
-        .find('[data-cy="edit-bill-button"]')
-        .click();
-
-      cy.location("search").should("include", "billid");
-      cy.get('[data-cy="bill-edit-form"]')
-        .find(".ant-upload #bill-document-upload")
-        .selectFile("job.json", { force: true });
-    });
-
-    it("marks bill as exported", () => {
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      cy.get('[data-cy="bills-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("bills-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@bills-table")
-        .find('[data-cy="bill-exported-checkbox"]')
-        .not(":checked")
-        .first()
-        .as("export-status")
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .find('[data-cy="edit-bill-button"]')
-        .click();
-
-      cy.location("search").should("include", "billid");
-      cy.get('[data-cy="bill-mark-export-button"]')
-        .as("mark-for-export")
-        .click();
-      cy.get("@mark-for-export").should("be.disabled");
-    });
-
-    it("marks bill for re-export", () => {
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      cy.get('[data-cy="bills-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("bills-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@bills-table")
-        .find('[data-cy="bill-exported-checkbox"]')
-        .filter(":checked")
-        .first()
-        .as("export-status")
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .find('[data-cy="edit-bill-button"]')
-        .click();
-
-      cy.location("search").should("include", "billid");
-      cy.get('[data-cy="bill-mark-reexport-button"]')
-        .as("mark-for-reexport")
-        .click();
-      cy.get("@mark-for-reexport").should("be.disabled");
-    });
-  }
-);

client/cypress/e2e/posting-bills/posting-bills.cy.js

@@ -1,487 +0,0 @@
-import job2 from "../../fixtures/jobs/job-4.json";
-import moment from "moment";
-import Dinero from "dinero.js";
-
-const uuid = () => Cypress._.random(0, 1e6);
-
-describe(
-  "Validating and calculating bills",
-  {
-    defaultCommandTimeout: 10000,
-  },
-  () => {
-    const today = moment(new Date()).format("YYYY-MM-DD");
-    const jobLines = job2.joblines.data.filter(
-      (line) => line.part_type === "PAS" || line.part_type === "PAE"
-    );
-    const linesTotal = jobLines.reduce(
-      (prev, line) => prev + line.act_price,
-      0
-    );
-
-    beforeEach(() => {
-      cy.viewport(1280, 720);
-      cy.visit("/manage/jobs");
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "SEARCH_VENDOR_AUTOCOMPLETE") {
-          req.alias = "vendors";
-        }
-      });
-
-      cy.get('[data-cy="active-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("active-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@active-jobs-table")
-        .contains(job2.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-
-      // Go to repair data tab
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-    });
-
-    it("validates auto reconciliation through posting bill", () => {
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-      // Click on filter parts only
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Select multiple rows
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-checkbox-input")
-        .first()
-        .click();
-      // Click Order Parts
-      cy.get('[data-cy="order-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-      // Modal should be visible
-      cy.get('[data-cy="parts-order-modal"]').should("be.visible");
-      // Fill required fields
-      cy.get(".ant-select-selection-search").find(`#vendorid`).click();
-      cy.get(`#vendorid_list`)
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click({ force: true });
-      cy.get("#deliver_by").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="part-order-comments"]').type("testing from cypress");
-
-      cy.get('[data-cy="part-order-select-none"]').check();
-      cy.get('[data-cy="order-part-submit"]').should("not.be.disabled").click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Parts order created successfully."
-      );
-
-      cy.get('[data-cy="tab-partssublet"]').should("be.visible").click();
-
-      // Find the first row in the parts order
-      cy.get('[data-cy="part-orders-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("orders-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@orders-table")
-        .first()
-        .should("be.visible")
-        .find('[data-cy="receive-bill-button"]')
-        .click();
-
-      // fill out form
-      cy.get('[data-cy="bill-form-invoice"]').type(uuid());
-
-      cy.get("#bill-form-date").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="bill-form-parts-bin"]').find("input").click();
-      cy.get("#location_list")
-        .next()
-        .find(".ant-select-item-option-content")
-        .first()
-        .click();
-
-      cy.get('[data-cy="bill-line-table"]').each(($row) => {
-        // get retail amount
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-price"]')
-          .as("retailPrice")
-          .click({ force: true, multiple: true });
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-cost"]')
-          .click({ multiple: true });
-      });
-
-      cy.get('[data-cy="bill-line-actual-cost"]').then((cells) => {
-        const totals = cells.toArray().map((el) => Number(el.value));
-        const sum = Cypress._.sum(totals);
-
-        cy.get('[data-cy="bill-form-bill-total"]').type(sum);
-
-        // Get taxes add it to the sum
-        cy.get('[data-cy="bill-form-tax"]').then((taxes) => {
-          const subtotals = taxes
-            .toArray()
-            .map((el) => Number(el.innerText.substring(1)));
-          const totalTax = Cypress._.sum(subtotals);
-
-          const billAmount = sum + totalTax;
-
-          cy.get('[data-cy="bill-form-bill-total"]')
-            .find("input")
-            .clear()
-            .type(billAmount);
-        });
-      });
-
-      cy.get("#bill-form-discrepancy").should("have.text", "$0.00");
-
-      // Click save
-      cy.get('[data-cy="bill-form-save-button"]').click();
-
-      cy.get("@retailPrice")
-        .invoke("val")
-        .then((val) => {
-          const discrepancy = linesTotal - Number(val);
-
-          cy.get("#retailtotal").should("have.text", `$${val}`);
-
-          cy.get(".discrepancy").each(($statistic) => {
-            cy.wrap($statistic).should(
-              "have.text",
-              Dinero({
-                amount: discrepancy,
-                precision: 0,
-              }).toFormat()
-            );
-          });
-        });
-    });
-
-    it("returning item and validating statistics", () => {
-      cy.get('[data-cy="bills-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("bills-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@bills-table")
-        .find('[data-cy="credit-memo-checkbox"]')
-        .filter(":not(:checked)")
-        .first()
-        .should("not.be.disabled")
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .find('[data-cy="return-items-button"]')
-        .click();
-
-      cy.get('[data-cy="billline-checkbox"]').check();
-      cy.get('[data-cy="billline-return-items-ok-button"]').click();
-      cy.get('[data-cy="billline-actual-price"]')
-        .find(".ant-form-item-control-input-content")
-        .then((prices) => {
-          const totals = prices
-            .toArray()
-            .map((el) => Number(el.innerText.substring(1)));
-          const sum = Cypress._.sum(totals);
-
-          const price = Dinero({
-            amount: sum * 100,
-          }).toFormat();
-
-          cy.get('[data-cy="order-quantity"]').each((input) => {
-            cy.wrap(input).type("1");
-          });
-          cy.get('[data-cy="part-order-select-none"]').click();
-
-          cy.get('[data-cy="order-part-submit"]').click();
-
-          cy.get("#totalReturns").should("have.text", price);
-          cy.get("#calculatedcreditsnotreceived").should("have.text", price);
-          cy.get("#creditsnotreceived").should("have.text", price);
-        });
-    });
-
-    it("receives credit memo without return part", () => {
-      // Find the first row in the parts order
-      cy.get('[data-cy="part-orders-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("orders-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@orders-table")
-        .find('[data-cy="part-order-return-checkbox"]')
-        .filter(":checked")
-        .first()
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .find('[data-cy="receive-bill-button"]')
-        .click();
-
-      // fill out form
-      cy.get('[data-cy="bill-form-invoice"]').type(uuid());
-
-      cy.get("#bill-form-date").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="bill-line-table"]').each(($row) => {
-        // get retail amount
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-price"]')
-          .click({ force: true, multiple: true });
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-cost"]')
-          .click({ multiple: true });
-      });
-
-      cy.get('[data-cy="is-credit-memo-switch"]').click();
-
-      cy.get('[data-cy="is-credit-memo-switch"]').should(
-        "have.attr",
-        "aria-checked",
-        "false"
-      );
-
-      cy.get('[data-cy="bill-line-actual-cost"]').then((cells) => {
-        cy.get('[data-cy="bill-line-actual-price"]').then((priceCells) => {
-          const totals = cells.toArray().map((el) => Number(el.value));
-          const priceTotals = priceCells
-            .toArray()
-            .map((el) => Number(el.value));
-          const sum = Cypress._.sum(totals);
-          const priceSum = Cypress._.sum(priceTotals);
-
-          cy.get('[data-cy="bill-form-bill-total"]').type(sum);
-
-          // Get taxes add it to the sum
-          cy.get('[data-cy="bill-form-tax"]').then((taxes) => {
-            const subtotals = taxes
-              .toArray()
-              .map((el) => Number(el.innerText.substring(1)));
-            const totalTax = Cypress._.sum(subtotals);
-
-            const billAmount = sum + totalTax;
-
-            cy.get('[data-cy="bill-form-bill-total"]')
-              .find("input")
-              .clear()
-              .type(billAmount);
-          });
-
-          cy.get("#bill-form-discrepancy").should("have.text", "$0.00");
-
-          cy.get(`.ant-select-bill-cost-center > .ant-select-selector`).each(
-            (select) => {
-              cy.wrap(select).click();
-
-              cy.wrap(select)
-                .find("input")
-                .invoke("attr", "id")
-                .then((id) => {
-                  cy.get(`#${id}_list`)
-                    .next()
-                    .find(".ant-select-item-option-content")
-                    .first()
-                    .click({ force: true });
-                });
-            }
-          );
-
-          cy.get('[data-cy="bill-form-save-button"]').click();
-
-          cy.get("#totalReturns")
-            .invoke("text")
-            .then((value) => {
-              const totalReturns =
-                Number(value.substring(1)) - priceSum < 0
-                  ? 0
-                  : Number(value.substring(1)) - priceSum;
-
-              cy.get("#calculatedcreditsnotreceived").should(
-                "have.text",
-                Dinero({
-                  amount: totalReturns,
-                  precision: 0,
-                }).toFormat()
-              );
-            });
-        });
-      });
-    });
-
-    it("receives credit memo with return part", () => {
-      // Find the first row in the parts order
-      cy.get('[data-cy="part-orders-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("orders-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@orders-table")
-        .find('[data-cy="part-order-return-checkbox"]')
-        .filter(":checked")
-        .first()
-        .parent()
-        .parent()
-        .parent()
-        .parent()
-        .find('[data-cy="receive-bill-button"]')
-        .click();
-
-      // fill out form
-      cy.get('[data-cy="bill-form-invoice"]').type(uuid());
-
-      cy.get("#bill-form-date").click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.get('[data-cy="bill-line-table"]').each(($row) => {
-        // get retail amount
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-price"]')
-          .click({ force: true, multiple: true });
-        cy.wrap($row)
-          .find('[data-cy="bill-line-actual-cost"]')
-          .click({ multiple: true });
-      });
-
-      cy.get('[data-cy="is-credit-memo-switch"]').should(
-        "have.attr",
-        "aria-checked",
-        "true"
-      );
-
-      cy.get('[data-cy="bill-line-actual-cost"]').then((cells) => {
-        cy.get('[data-cy="bill-line-actual-price"]').then((priceCells) => {
-          const totals = cells.toArray().map((el) => Number(el.value));
-          const priceTotals = priceCells
-            .toArray()
-            .map((el) => Number(el.value));
-          const sum = Cypress._.sum(totals);
-          const priceSum = Cypress._.sum(priceTotals);
-
-          cy.get('[data-cy="bill-form-bill-total"]').type(sum);
-
-          // Get taxes add it to the sum
-          cy.get('[data-cy="bill-form-tax"]').then((taxes) => {
-            const subtotals = taxes
-              .toArray()
-              .map((el) => Number(el.innerText.substring(1)));
-            const totalTax = Cypress._.sum(subtotals);
-
-            const billAmount = sum + totalTax;
-
-            cy.get('[data-cy="bill-form-bill-total"]')
-              .find("input")
-              .clear()
-              .type(billAmount);
-          });
-
-          cy.get("#bill-form-discrepancy").should("have.text", "$0.00");
-
-          cy.get(`.ant-select-bill-cost-center > .ant-select-selector`).each(
-            (select) => {
-              cy.wrap(select).click();
-
-              cy.wrap(select)
-                .find("input")
-                .invoke("attr", "id")
-                .then((id) => {
-                  cy.get(`#${id}_list`)
-                    .next()
-                    .find(".ant-select-item-option-content")
-                    .first()
-                    .click({ force: true });
-                });
-            }
-          );
-
-          cy.get('[data-cy="mark-as-received-checkbox"]').check({
-            multiple: true,
-          });
-
-          cy.get('[data-cy="bill-form-save-button"]').click();
-
-          cy.get("#totalReturns")
-            .invoke("text")
-            .then((value) => {
-              const totalReturns =
-                Number(value.substring(1)) - priceSum < 0
-                  ? 0
-                  : Number(value.substring(1)) - priceSum;
-
-              cy.get("#creditsnotreceived").should(
-                "have.text",
-                Dinero({
-                  amount: totalReturns,
-                  precision: 0,
-                }).toFormat()
-              );
-            });
-        });
-      });
-    });
-
-    it("views the row expander if it has the order and bill", () => {
-      cy.get('[data-cy="tab-repairdata"]').should("be.visible").click();
-
-      cy.get('[data-cy="filter-parts-button"]')
-        .should("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find("td")
-        .first()
-        .click();
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find("td")
-        .eq(13)
-        .find("div")
-        .should("exist");
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find("td")
-        .eq(14)
-        .find("div")
-        .should("exist");
-
-      cy.get('[data-cy="repair-data-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .first()
-        .find("td")
-        .eq(15)
-        .find("div")
-        .should("have.text", "Returned");
-
-      cy.get('[data-cy="parts-bills-order"]')
-        .should("be.visible")
-        .find("li")
-        .first()
-        .should("not.have.text", "This part has not yet been ordered.");
-    });
-  }
-);

client/cypress/e2e/time-tickets/time-tickets.cy.js

@@ -1,318 +0,0 @@
-import moment from "moment";
-import job2 from "../../fixtures/jobs/job-4.json";
-import Dinero from "dinero.js";
-
-const uuid = () => Cypress._.random(0, 1e6);
-
-describe(
-  "Entering payment for the job",
-  {
-    defaultCommandTimeout: 5000,
-  },
-  () => {
-    const today = moment().format("YYYY-MM-DD");
-    const LABOR_HOURS = 1;
-    const COST_CENTER = "Body";
-
-    beforeEach(() => {
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_ACTIVE_EMPLOYEES") {
-          req.alias = "employees";
-        }
-      });
-
-      cy.intercept("POST", Cypress.env("graphql_dev_endpoint"), (req) => {
-        if (req.body.operationName === "QUERY_BODYSHOP") {
-          req.alias = "bodyshop";
-        }
-      });
-
-      cy.visit("/manage");
-
-      cy.get('[data-cy="active-jobs-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("active-jobs-table")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@active-jobs-table")
-        .contains(job2.clm_no)
-        .first()
-        .parent()
-        .find('[data-cy="active-job-link"]')
-        .click();
-
-      cy.url().should("include", "/manage/jobs");
-    });
-
-    it("checks input validations", () => {
-      cy.get('[data-cy="job-actions-button"]').click();
-
-      cy.get('[data-cy="actions-timetickets"]')
-        .should("be.visible")
-        .and("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="timeticket-save-button"]').first().click();
-
-      cy.get('[data-cy="form-timeticket"]')
-        .find(".ant-form-item-explain-error")
-        .should("have.length", 4);
-
-      cy.get('[data-cy="form-timeticket-date"]').click();
-      cy.get(`[title="${today}"]`).should("be.visible").click({ force: true });
-
-      cy.antdSelect("timeticket-employee");
-
-      cy.antdSelect("cost-center");
-
-      cy.get('[data-cy="labor-allocations-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("labor-allocations")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get("@labor-allocations")
-        .eq(0)
-        .find("td:not(.ant-table-selection-column)")
-        .eq(4)
-        .find("strong")
-        .invoke("text")
-        .as("bodyDiff")
-        .then((diff) => {
-          // TODO dynamically select the employee prior to what is the labor and cost
-          cy.get('[data-cy="form-timeticket-productivehrs"]').type(
-            Number(diff) + 1
-          );
-
-          cy.get(".ant-form-item-explain-error").should(
-            "have.text",
-            "The number of hours entered is more than what is available for this cost center."
-          );
-        });
-    });
-
-    it("adds new time ticket to a job with flat rate", () => {
-      cy.get('[data-cy="job-actions-button"]').click();
-
-      cy.get('[data-cy="actions-timetickets"]')
-        .should("be.visible")
-        .and("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="labor-allocations-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("labor-allocations")
-        .should("not.have.class", "ant-table-placeholder");
-
-      // Get Difference for Body
-      cy.get('[data-cy="form-timeticket-date"]').click();
-      cy.get(`[title="${today}"]`).should("be.visible").click();
-
-      cy.get("@labor-allocations")
-        .eq(0)
-        .find("td:not(.ant-table-selection-column)")
-        .eq(4)
-        .find("strong")
-        .invoke("text")
-        .as("bodyDiff")
-        .then((diff) => {
-          cy.get('[data-cy="form-timeticket-productivehrs"]').type(LABOR_HOURS);
-
-          cy.get('[data-cy="form-timeticket-actualhrs"]').type(LABOR_HOURS);
-        });
-
-      cy.wait("@employees").then(({ response }) => {
-        const employees = response.body.data.employees;
-        const employee = employees.find((e) => e.flat_rate);
-        const employee_name = `${employee.first_name} ${employee.last_name}`;
-
-        cy.antdSelectValue("timeticket-employee", employee_name);
-
-        cy.antdSelectValue("cost-center", COST_CENTER);
-      });
-
-      cy.get('[data-cy="form-timeticket-memo"]').type(uuid());
-
-      cy.get('[data-cy="timeticket-save-button"]').first().click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Time ticket entered successfully."
-      );
-    });
-
-    it("adds new time ticket to a job with straight rate", () => {
-      cy.get('[data-cy="job-actions-button"]').click();
-
-      cy.get('[data-cy="actions-timetickets"]')
-        .should("be.visible")
-        .and("not.be.disabled")
-        .click();
-
-      cy.get('[data-cy="labor-allocations-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("labor-allocations")
-        .should("not.have.class", "ant-table-placeholder");
-
-      // Get Difference for Body
-      cy.get('[data-cy="form-timeticket-date"]').click();
-      cy.get(`[title="${today}"]`).should("be.visible").click();
-
-      cy.get("@labor-allocations")
-        .eq(0)
-        .find("td:not(.ant-table-selection-column)")
-        .eq(4)
-        .find("strong")
-        .invoke("text")
-        .as("bodyDiff")
-        .then((diff) => {
-          cy.get('[data-cy="form-timeticket-productivehrs"]').type(LABOR_HOURS);
-
-          cy.get('[data-cy="form-timeticket-actualhrs"]').type(LABOR_HOURS);
-        });
-
-      cy.wait("@employees").then(({ response }) => {
-        const employees = response.body.data.employees;
-        const employee = employees.find((e) => !e.flat_rate);
-        const employee_name = `${employee.first_name} ${employee.last_name}`;
-
-        cy.antdSelectValue("timeticket-employee", employee_name);
-
-        cy.antdSelectValue("cost-center", COST_CENTER);
-      });
-
-      cy.get('[data-cy="form-timeticket-memo"]').type(uuid());
-
-      cy.get('[data-cy="timeticket-save-button"]').first().click();
-
-      cy.get(".ant-notification-notice-message").contains(
-        "Time ticket entered successfully."
-      );
-    });
-
-    it("checks hours calculated to the allocations table", () => {
-      cy.get('[data-cy="tab-labor"]').should("be.visible").click();
-
-      cy.get('[data-cy="labor-allocations-table"]')
-        .find(".ant-table-tbody")
-        .find("> tr:not(.ant-table-measure-row)")
-        .as("labor-allocations")
-        .should("not.have.class", "ant-table-placeholder");
-
-      cy.get('[data-cy="labor-total-hrs-claimed"]')
-        .invoke("text")
-        .then((hours) => {
-          cy.wrap(hours).should("not.equal", "0");
-        });
-    });
-
-    it("checks the job costing calculations", () => {
-      cy.get('[data-cy="job-actions-button"]').click();
-
-      cy.get('[data-cy="actions-jobcosting"]')
-        .should("be.visible")
-        .and("not.be.disabled")
-        .click();
-
-      cy.wait("@bodyshop").then(({ request }) => {
-        const token = request.headers.authorization;
-
-        const query = `query QUERY_ACTIVE_EMPLOYEES {
-          employees(where: { active: { _eq: true } }) {
-            last_name
-            id
-            first_name
-            employee_number
-            active
-            termination_date
-            hire_date
-            flat_rate
-            rates
-            pin
-            user_email
-          }
-        }`;
-
-        cy.request({
-          url: "http://localhost:4000/test/query",
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: token,
-          },
-          body: {
-            query,
-          },
-        }).then((response) => {
-          const cost_center = COST_CENTER;
-          const employees = response.body.employees;
-          const total_cost = employees.reduce((prev, employee) => {
-            const rate =
-              employee.rates.find((rate) => rate.cost_center === cost_center)
-                .rate ?? 0;
-
-            return prev + rate * LABOR_HOURS;
-          }, 0);
-
-          cy.get('[data-cy="responsibilitycenter"]')
-            .contains(cost_center)
-            .parent()
-            .parent()
-            .find('[data-cy="cost"]')
-            .should(
-              "have.text",
-              Dinero({
-                amount: total_cost,
-                precision: 0,
-              }).toFormat()
-            );
-        });
-      });
-    });
-
-    it.only("clocks in and out of the tech page for the timeticket", () => {
-      // TODO go to tech page for the clock in and out
-      cy.visit("/tech");
-
-      cy.get('[data-cy="tech-employee-id"]').type("a");
-      cy.get('[data-cy="tech-employee-password"]').type("a{enter}");
-
-      cy.contains("Logged in as");
-      // go to clock in
-      cy.get('[data-cy="sider-joblock"]').click({ force: true });
-      // find the job ro
-      cy.get('[data-cy="clock-ro-select"]').type("273");
-      cy.get('[data-cy="clock-ro-select"] .ant-select-selection-search input')
-        .invoke("attr", "id")
-        .then((selElm) => {
-          const dropDownSelector = `#${selElm}_list`;
-
-          cy.get(dropDownSelector)
-            .next()
-            .find(".ant-select-item-option-content")
-            .first()
-            .click({ force: true });
-        });
-      // select cost center
-      cy.get('[data-cy="clock-cost-center-select"]').click();
-      cy.get(
-        '[data-cy="clock-cost-center-select"] .ant-select-selection-search input'
-      )
-        .invoke("attr", "id")
-        .then((selElm) => {
-          const dropDownSelector = `#${selElm}_list`;
-
-          cy.get(dropDownSelector)
-            .next()
-            .find(".ant-select-item-option-content")
-            .contains("Body")
-            .first()
-            .click({ force: true });
-        });
-
-      // clock in and out of the job
-    });
-  }
-);

client/cypress/fixtures/jobs/job-3-jobmetadata.json

@@ -1,316 +0,0 @@
-{
-  "parts": {
-    "parts": {
-      "list": {
-        "PAE": {
-          "total": {
-            "amount": 0,
-            "currency": "USD",
-            "precision": 2
-          }
-        },
-        "PAN": {
-          "total": {
-            "amount": 26661,
-            "currency": "USD",
-            "precision": 2
-          }
-        }
-      },
-      "total": {
-        "amount": 26661,
-        "currency": "USD",
-        "precision": 2
-      },
-      "subtotal": {
-        "amount": 26661,
-        "currency": "USD",
-        "precision": 2
-      },
-      "prt_dsmk_total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "sublets": {
-      "total": {
-        "amount": 5000,
-        "currency": "USD",
-        "precision": 2
-      },
-      "subtotal": {
-        "amount": 5000,
-        "currency": "USD",
-        "precision": 2
-      }
-    }
-  },
-  "rates": {
-    "la1": {
-      "rate": 92.49,
-      "hours": 3.5,
-      "total": {
-        "amount": 32372,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "la2": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "la3": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "la4": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "laa": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lab": {
-      "rate": 85.16,
-      "hours": 29.7,
-      "total": {
-        "amount": 252925,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lad": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lae": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "laf": {
-      "rate": 97.34,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lag": {
-      "rate": 85.16,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lam": {
-      "rate": 109.5,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lar": {
-      "rate": 85.16,
-      "hours": 8.500000000000002,
-      "total": {
-        "amount": 72386,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "las": {
-      "rate": 85.16,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lau": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "mapa": {
-      "rate": 55.38,
-      "hours": 8.500000000000002,
-      "total": {
-        "amount": 47073,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "mash": {
-      "rate": 6.85,
-      "hours": 33.199999999999996,
-      "total": {
-        "amount": 22742,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "subtotal": {
-      "amount": 427498,
-      "currency": "USD",
-      "precision": 2
-    },
-    "rates_subtotal": {
-      "amount": 357683,
-      "currency": "USD",
-      "precision": 2
-    }
-  },
-  "totals": {
-    "subtotal": {
-      "amount": 495355,
-      "currency": "USD",
-      "precision": 2
-    },
-    "local_tax": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "state_tax": {
-      "amount": 34675,
-      "currency": "USD",
-      "precision": 2
-    },
-    "custPayable": {
-      "total": {
-        "amount": 30000,
-        "currency": "USD",
-        "precision": 2
-      },
-      "dep_taxes": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      },
-      "deductible": {
-        "amount": 30000,
-        "currency": "USD",
-        "precision": 2
-      },
-      "federal_tax": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      },
-      "other_customer_amount": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "federal_tax": {
-      "amount": 24768,
-      "currency": "USD",
-      "precision": 2
-    },
-    "net_repairs": {
-      "amount": 524798,
-      "currency": "USD",
-      "precision": 2
-    },
-    "statePartsTax": {
-      "amount": 2216,
-      "currency": "USD",
-      "precision": 2
-    },
-    "total_repairs": {
-      "amount": 554798,
-      "currency": "USD",
-      "precision": 2
-    }
-  },
-  "additional": {
-    "pvrt": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "total": {
-      "amount": 36196,
-      "currency": "USD",
-      "precision": 2
-    },
-    "towing": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "storage": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "shipping": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "adjustments": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "additionalCosts": {
-      "amount": 36196,
-      "currency": "USD",
-      "precision": 2
-    },
-    "additionalCostItems": [
-      {
-        "key": "ATS Amount",
-        "total": {
-          "amount": 36196,
-          "currency": "USD",
-          "precision": 2
-        }
-      }
-    ]
-  }
-}

client/cypress/fixtures/jobs/job-3-supplment-jobmetadata.json

@@ -1,316 +0,0 @@
-{
-  "parts": {
-    "parts": {
-      "list": {
-        "PAE": {
-          "total": {
-            "amount": 0,
-            "currency": "USD",
-            "precision": 2
-          }
-        },
-        "PAN": {
-          "total": {
-            "amount": 36661,
-            "currency": "USD",
-            "precision": 2
-          }
-        }
-      },
-      "total": {
-        "amount": 36661,
-        "currency": "USD",
-        "precision": 2
-      },
-      "subtotal": {
-        "amount": 36661,
-        "currency": "USD",
-        "precision": 2
-      },
-      "prt_dsmk_total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "sublets": {
-      "total": {
-        "amount": 5000,
-        "currency": "USD",
-        "precision": 2
-      },
-      "subtotal": {
-        "amount": 5000,
-        "currency": "USD",
-        "precision": 2
-      }
-    }
-  },
-  "rates": {
-    "la1": {
-      "rate": 92.49,
-      "hours": 3.5,
-      "total": {
-        "amount": 32372,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "la2": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "la3": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "la4": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "laa": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lab": {
-      "rate": 85.16,
-      "hours": 29.7,
-      "total": {
-        "amount": 252925,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lad": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lae": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "laf": {
-      "rate": 97.34,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lag": {
-      "rate": 85.16,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lam": {
-      "rate": 109.5,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lar": {
-      "rate": 85.16,
-      "hours": 8.500000000000002,
-      "total": {
-        "amount": 72386,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "las": {
-      "rate": 85.16,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "lau": {
-      "rate": 0,
-      "hours": 0,
-      "total": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "mapa": {
-      "rate": 55.38,
-      "hours": 8.500000000000002,
-      "total": {
-        "amount": 47073,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "mash": {
-      "rate": 6.85,
-      "hours": 33.199999999999996,
-      "total": {
-        "amount": 22742,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "subtotal": {
-      "amount": 427498,
-      "currency": "USD",
-      "precision": 2
-    },
-    "rates_subtotal": {
-      "amount": 357683,
-      "currency": "USD",
-      "precision": 2
-    }
-  },
-  "totals": {
-    "subtotal": {
-      "amount": 505355,
-      "currency": "USD",
-      "precision": 2
-    },
-    "local_tax": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "state_tax": {
-      "amount": 35375,
-      "currency": "USD",
-      "precision": 2
-    },
-    "custPayable": {
-      "total": {
-        "amount": 30000,
-        "currency": "USD",
-        "precision": 2
-      },
-      "dep_taxes": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      },
-      "deductible": {
-        "amount": 30000,
-        "currency": "USD",
-        "precision": 2
-      },
-      "federal_tax": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      },
-      "other_customer_amount": {
-        "amount": 0,
-        "currency": "USD",
-        "precision": 2
-      }
-    },
-    "federal_tax": {
-      "amount": 25268,
-      "currency": "USD",
-      "precision": 2
-    },
-    "net_repairs": {
-      "amount": 535998,
-      "currency": "USD",
-      "precision": 2
-    },
-    "statePartsTax": {
-      "amount": 2916,
-      "currency": "USD",
-      "precision": 2
-    },
-    "total_repairs": {
-      "amount": 565998,
-      "currency": "USD",
-      "precision": 2
-    }
-  },
-  "additional": {
-    "pvrt": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "total": {
-      "amount": 36196,
-      "currency": "USD",
-      "precision": 2
-    },
-    "towing": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "storage": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "shipping": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "adjustments": {
-      "amount": 0,
-      "currency": "USD",
-      "precision": 2
-    },
-    "additionalCosts": {
-      "amount": 36196,
-      "currency": "USD",
-      "precision": 2
-    },
-    "additionalCostItems": [
-      {
-        "key": "ATS Amount",
-        "total": {
-          "amount": 36196,
-          "currency": "USD",
-          "precision": 2
-        }
-      }
-    ]
-  }
-}

client/cypress/fixtures/profile.json

@@ -0,0 +1,5 @@
+{
+  "id": 8739,
+  "name": "Jane",
+  "email": "jane@example.com"
+}

client/cypress/fixtures/users.json

@@ -0,0 +1 @@
+[]

client/cypress/integration/01-General Render/01-home.spec.js

@@ -0,0 +1,23 @@
+/// <reference types="Cypress" />
+const { FIREBASE_USERNAME, FIREBASE_PASSWORcD } = Cypress.env();
+describe("Renders the General Page", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+  it("Renders Correctly", () => {});
+  it("Has the Slogan", () => {
+    cy.findByText("A whole x22new kind of shop management system.").should(
+      "exist"
+    );
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get(
+      ".ant-menu-item-active > .ant-menu-title-content > .header0-item-block"
+    ).click();
+    cy.get("#email").clear();
+    cy.get("#email").type("patrick@imex.dev");
+    cy.get("#password").clear();
+    cy.get("#password").type("patrick123{enter}");
+    cy.get(".ant-form > .ant-btn").click();
+    /* ==== End Cypress Studio ==== */
+  });
+});

client/cypress/integration/1-getting-started/todo.spec.js

@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress!
+//
+// This spec file contains a variety of sample tests
+// for a todo list app that are designed to demonstrate
+// the power of writing tests in Cypress.
+//
+// To learn more about how Cypress works and
+// what makes it such an awesome testing tool,
+// please read our getting started guide:
+// https://on.cypress.io/introduction-to-cypress
+
+describe('example to-do app', () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit('https://example.cypress.io/todo')
+  })
+
+  it('displays two todo items by default', () => {
+    // We use the `cy.get()` command to get all elements that match the selector.
+    // Then, we use `should` to assert that there are two matched items,
+    // which are the two default items.
+    cy.get('.todo-list li').should('have.length', 2)
+
+    // We can go even further and check that the default todos each contain
+    // the correct text. We use the `first` and `last` functions
+    // to get just the first and last matched elements individually,
+    // and then perform an assertion with `should`.
+    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
+    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
+  })
+
+  it('can add new todo items', () => {
+    // We'll store our item text in a variable so we can reuse it
+    const newItem = 'Feed the cat'
+
+    // Let's get the input element and use the `type` command to
+    // input our new list item. After typing the content of our item,
+    // we need to type the enter key as well in order to submit the input.
+    // This input has a data-test attribute so we'll use that to select the
+    // element in accordance with best practices:
+    // https://on.cypress.io/selecting-elements
+    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
+
+    // Now that we've typed our new item, let's check that it actually was added to the list.
+    // Since it's the newest item, it should exist as the last element in the list.
+    // In addition, with the two default items, we should have a total of 3 elements in the list.
+    // Since assertions yield the element that was asserted on,
+    // we can chain both of these assertions together into a single statement.
+    cy.get('.todo-list li')
+      .should('have.length', 3)
+      .last()
+      .should('have.text', newItem)
+  })
+
+  it('can check off an item as completed', () => {
+    // In addition to using the `get` command to get an element by selector,
+    // we can also use the `contains` command to get an element by its contents.
+    // However, this will yield the <label>, which is lowest-level element that contains the text.
+    // In order to check the item, we'll find the <input> element for this <label>
+    // by traversing up the dom to the parent element. From there, we can `find`
+    // the child checkbox <input> element and use the `check` command to check it.
+    cy.contains('Pay electric bill')
+      .parent()
+      .find('input[type=checkbox]')
+      .check()
+
+    // Now that we've checked the button, we can go ahead and make sure
+    // that the list element is now marked as completed.
+    // Again we'll use `contains` to find the <label> element and then use the `parents` command
+    // to traverse multiple levels up the dom until we find the corresponding <li> element.
+    // Once we get that element, we can assert that it has the completed class.
+    cy.contains('Pay electric bill')
+      .parents('li')
+      .should('have.class', 'completed')
+  })
+
+  context('with a checked task', () => {
+    beforeEach(() => {
+      // We'll take the command we used above to check off an element
+      // Since we want to perform multiple tests that start with checking
+      // one element, we put it in the beforeEach hook
+      // so that it runs at the start of every test.
+      cy.contains('Pay electric bill')
+        .parent()
+        .find('input[type=checkbox]')
+        .check()
+    })
+
+    it('can filter for uncompleted tasks', () => {
+      // We'll click on the "active" button in order to
+      // display only incomplete items
+      cy.contains('Active').click()
+
+      // After filtering, we can assert that there is only the one
+      // incomplete item in the list.
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Walk the dog')
+
+      // For good measure, let's also assert that the task we checked off
+      // does not exist on the page.
+      cy.contains('Pay electric bill').should('not.exist')
+    })
+
+    it('can filter for completed tasks', () => {
+      // We can perform similar steps as the test above to ensure
+      // that only completed tasks are shown
+      cy.contains('Completed').click()
+
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Pay electric bill')
+
+      cy.contains('Walk the dog').should('not.exist')
+    })
+
+    it('can delete all completed tasks', () => {
+      // First, let's click the "Clear completed" button
+      // `contains` is actually serving two purposes here.
+      // First, it's ensuring that the button exists within the dom.
+      // This button only appears when at least one task is checked
+      // so this command is implicitly verifying that it does exist.
+      // Second, it selects the button so we can click it.
+      cy.contains('Clear completed').click()
+
+      // Then we can make sure that there is only one element
+      // in the list and our element does not exist
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .should('not.have.text', 'Pay electric bill')
+
+      // Finally, make sure that the clear button no longer exists.
+      cy.contains('Clear completed').should('not.exist')
+    })
+  })
+})

client/cypress/integration/2-advanced-examples/actions.spec.js

@@ -0,0 +1,299 @@
+/// <reference types="cypress" />
+
+context('Actions', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/actions')
+  })
+
+  // https://on.cypress.io/interacting-with-elements
+
+  it('.type() - type into a DOM element', () => {
+    // https://on.cypress.io/type
+    cy.get('.action-email')
+      .type('fake@email.com').should('have.value', 'fake@email.com')
+
+      // .type() with special character sequences
+      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
+      .type('{del}{selectall}{backspace}')
+
+      // .type() with key modifiers
+      .type('{alt}{option}') //these are equivalent
+      .type('{ctrl}{control}') //these are equivalent
+      .type('{meta}{command}{cmd}') //these are equivalent
+      .type('{shift}')
+
+      // Delay each keypress by 0.1 sec
+      .type('slow.typing@email.com', { delay: 100 })
+      .should('have.value', 'slow.typing@email.com')
+
+    cy.get('.action-disabled')
+      // Ignore error checking prior to type
+      // like whether the input is visible or disabled
+      .type('disabled error checking', { force: true })
+      .should('have.value', 'disabled error checking')
+  })
+
+  it('.focus() - focus on a DOM element', () => {
+    // https://on.cypress.io/focus
+    cy.get('.action-focus').focus()
+      .should('have.class', 'focus')
+      .prev().should('have.attr', 'style', 'color: orange;')
+  })
+
+  it('.blur() - blur off a DOM element', () => {
+    // https://on.cypress.io/blur
+    cy.get('.action-blur').type('About to blur').blur()
+      .should('have.class', 'error')
+      .prev().should('have.attr', 'style', 'color: red;')
+  })
+
+  it('.clear() - clears an input or textarea element', () => {
+    // https://on.cypress.io/clear
+    cy.get('.action-clear').type('Clear this text')
+      .should('have.value', 'Clear this text')
+      .clear()
+      .should('have.value', '')
+  })
+
+  it('.submit() - submit a form', () => {
+    // https://on.cypress.io/submit
+    cy.get('.action-form')
+      .find('[type="text"]').type('HALFOFF')
+
+    cy.get('.action-form').submit()
+      .next().should('contain', 'Your form has been submitted!')
+  })
+
+  it('.click() - click on a DOM element', () => {
+    // https://on.cypress.io/click
+    cy.get('.action-btn').click()
+
+    // You can click on 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // clicking in the center of the element is the default
+    cy.get('#action-canvas').click()
+
+    cy.get('#action-canvas').click('topLeft')
+    cy.get('#action-canvas').click('top')
+    cy.get('#action-canvas').click('topRight')
+    cy.get('#action-canvas').click('left')
+    cy.get('#action-canvas').click('right')
+    cy.get('#action-canvas').click('bottomLeft')
+    cy.get('#action-canvas').click('bottom')
+    cy.get('#action-canvas').click('bottomRight')
+
+    // .click() accepts an x and y coordinate
+    // that controls where the click occurs :)
+
+    cy.get('#action-canvas')
+      .click(80, 75) // click 80px on x coord and 75px on y coord
+      .click(170, 75)
+      .click(80, 165)
+      .click(100, 185)
+      .click(125, 190)
+      .click(150, 185)
+      .click(170, 165)
+
+    // click multiple elements by passing multiple: true
+    cy.get('.action-labels>.label').click({ multiple: true })
+
+    // Ignore error checking prior to clicking
+    cy.get('.action-opacity>.btn').click({ force: true })
+  })
+
+  it('.dblclick() - double click on a DOM element', () => {
+    // https://on.cypress.io/dblclick
+
+    // Our app has a listener on 'dblclick' event in our 'scripts.js'
+    // that hides the div and shows an input on double click
+    cy.get('.action-div').dblclick().should('not.be.visible')
+    cy.get('.action-input-hidden').should('be.visible')
+  })
+
+  it('.rightclick() - right click on a DOM element', () => {
+    // https://on.cypress.io/rightclick
+
+    // Our app has a listener on 'contextmenu' event in our 'scripts.js'
+    // that hides the div and shows an input on right click
+    cy.get('.rightclick-action-div').rightclick().should('not.be.visible')
+    cy.get('.rightclick-action-input-hidden').should('be.visible')
+  })
+
+  it('.check() - check a checkbox or radio element', () => {
+    // https://on.cypress.io/check
+
+    // By default, .check() will check all
+    // matching checkbox or radio elements in succession, one after another
+    cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
+      .check().should('be.checked')
+
+    cy.get('.action-radios [type="radio"]').not('[disabled]')
+      .check().should('be.checked')
+
+    // .check() accepts a value argument
+    cy.get('.action-radios [type="radio"]')
+      .check('radio1').should('be.checked')
+
+    // .check() accepts an array of values
+    cy.get('.action-multiple-checkboxes [type="checkbox"]')
+      .check(['checkbox1', 'checkbox2']).should('be.checked')
+
+    // Ignore error checking prior to checking
+    cy.get('.action-checkboxes [disabled]')
+      .check({ force: true }).should('be.checked')
+
+    cy.get('.action-radios [type="radio"]')
+      .check('radio3', { force: true }).should('be.checked')
+  })
+
+  it('.uncheck() - uncheck a checkbox element', () => {
+    // https://on.cypress.io/uncheck
+
+    // By default, .uncheck() will uncheck all matching
+    // checkbox elements in succession, one after another
+    cy.get('.action-check [type="checkbox"]')
+      .not('[disabled]')
+      .uncheck().should('not.be.checked')
+
+    // .uncheck() accepts a value argument
+    cy.get('.action-check [type="checkbox"]')
+      .check('checkbox1')
+      .uncheck('checkbox1').should('not.be.checked')
+
+    // .uncheck() accepts an array of values
+    cy.get('.action-check [type="checkbox"]')
+      .check(['checkbox1', 'checkbox3'])
+      .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
+
+    // Ignore error checking prior to unchecking
+    cy.get('.action-check [disabled]')
+      .uncheck({ force: true }).should('not.be.checked')
+  })
+
+  it('.select() - select an option in a <select> element', () => {
+    // https://on.cypress.io/select
+
+    // at first, no option should be selected
+    cy.get('.action-select')
+      .should('have.value', '--Select a fruit--')
+
+    // Select option(s) with matching text content
+    cy.get('.action-select').select('apples')
+    // confirm the apples were selected
+    // note that each value starts with "fr-" in our HTML
+    cy.get('.action-select').should('have.value', 'fr-apples')
+
+    cy.get('.action-select-multiple')
+      .select(['apples', 'oranges', 'bananas'])
+      // when getting multiple values, invoke "val" method first
+      .invoke('val')
+      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+    // Select option(s) with matching value
+    cy.get('.action-select').select('fr-bananas')
+      // can attach an assertion right away to the element
+      .should('have.value', 'fr-bananas')
+
+    cy.get('.action-select-multiple')
+      .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+      .invoke('val')
+      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+
+    // assert the selected values include oranges
+    cy.get('.action-select-multiple')
+      .invoke('val').should('include', 'fr-oranges')
+  })
+
+  it('.scrollIntoView() - scroll an element into view', () => {
+    // https://on.cypress.io/scrollintoview
+
+    // normally all of these buttons are hidden,
+    // because they're not within
+    // the viewable area of their parent
+    // (we need to scroll to see them)
+    cy.get('#scroll-horizontal button')
+      .should('not.be.visible')
+
+    // scroll the button into view, as if the user had scrolled
+    cy.get('#scroll-horizontal button').scrollIntoView()
+      .should('be.visible')
+
+    cy.get('#scroll-vertical button')
+      .should('not.be.visible')
+
+    // Cypress handles the scroll direction needed
+    cy.get('#scroll-vertical button').scrollIntoView()
+      .should('be.visible')
+
+    cy.get('#scroll-both button')
+      .should('not.be.visible')
+
+    // Cypress knows to scroll to the right and down
+    cy.get('#scroll-both button').scrollIntoView()
+      .should('be.visible')
+  })
+
+  it('.trigger() - trigger an event on a DOM element', () => {
+    // https://on.cypress.io/trigger
+
+    // To interact with a range input (slider)
+    // we need to set its value & trigger the
+    // event to signal it changed
+
+    // Here, we invoke jQuery's val() method to set
+    // the value and trigger the 'change' event
+    cy.get('.trigger-input-range')
+      .invoke('val', 25)
+      .trigger('change')
+      .get('input[type=range]').siblings('p')
+      .should('have.text', '25')
+  })
+
+  it('cy.scrollTo() - scroll the window or element to a position', () => {
+    // https://on.cypress.io/scrollto
+
+    // You can scroll to 9 specific positions of an element:
+    //  -----------------------------------
+    // | topLeft        top       topRight |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | left          center        right |
+    // |                                   |
+    // |                                   |
+    // |                                   |
+    // | bottomLeft   bottom   bottomRight |
+    //  -----------------------------------
+
+    // if you chain .scrollTo() off of cy, we will
+    // scroll the entire window
+    cy.scrollTo('bottom')
+
+    cy.get('#scrollable-horizontal').scrollTo('right')
+
+    // or you can scroll to a specific coordinate:
+    // (x axis, y axis) in pixels
+    cy.get('#scrollable-vertical').scrollTo(250, 250)
+
+    // or you can scroll to a specific percentage
+    // of the (width, height) of the element
+    cy.get('#scrollable-both').scrollTo('75%', '25%')
+
+    // control the easing of the scroll (default is 'swing')
+    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
+
+    // control the duration of the scroll (in ms)
+    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
+  })
+})

client/cypress/integration/2-advanced-examples/aliasing.spec.js

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+context('Aliasing', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/aliasing')
+  })
+
+  it('.as() - alias a DOM element for later use', () => {
+    // https://on.cypress.io/as
+
+    // Alias a DOM element for use later
+    // We don't have to traverse to the element
+    // later in our code, we reference it with @
+
+    cy.get('.as-table').find('tbody>tr')
+      .first().find('td').first()
+      .find('button').as('firstBtn')
+
+    // when we reference the alias, we place an
+    // @ in front of its name
+    cy.get('@firstBtn').click()
+
+    cy.get('@firstBtn')
+      .should('have.class', 'btn-success')
+      .and('contain', 'Changed')
+  })
+
+  it('.as() - alias a route for later use', () => {
+    // Alias the route to wait for its response
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // https://on.cypress.io/wait
+    cy.wait('@getComment').its('response.statusCode').should('eq', 200)
+  })
+})

client/cypress/integration/2-advanced-examples/assertions.spec.js

@@ -0,0 +1,177 @@
+/// <reference types="cypress" />
+
+context('Assertions', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/assertions')
+  })
+
+  describe('Implicit Assertions', () => {
+    it('.should() - make an assertion about the current subject', () => {
+      // https://on.cypress.io/should
+      cy.get('.assertion-table')
+        .find('tbody tr:last')
+        .should('have.class', 'success')
+        .find('td')
+        .first()
+        // checking the text of the <td> element in various ways
+        .should('have.text', 'Column content')
+        .should('contain', 'Column content')
+        .should('have.html', 'Column content')
+        // chai-jquery uses "is()" to check if element matches selector
+        .should('match', 'td')
+        // to match text content against a regular expression
+        // first need to invoke jQuery method text()
+        // and then match using regular expression
+        .invoke('text')
+        .should('match', /column content/i)
+
+      // a better way to check element's text content against a regular expression
+      // is to use "cy.contains"
+      // https://on.cypress.io/contains
+      cy.get('.assertion-table')
+        .find('tbody tr:last')
+        // finds first <td> element with text content matching regular expression
+        .contains('td', /column content/i)
+        .should('be.visible')
+
+      // for more information about asserting element's text
+      // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
+    })
+
+    it('.and() - chain multiple assertions together', () => {
+      // https://on.cypress.io/and
+      cy.get('.assertions-link')
+        .should('have.class', 'active')
+        .and('have.attr', 'href')
+        .and('include', 'cypress.io')
+    })
+  })
+
+  describe('Explicit Assertions', () => {
+    // https://on.cypress.io/assertions
+    it('expect - make an assertion about a specified subject', () => {
+      // We can use Chai's BDD style assertions
+      expect(true).to.be.true
+      const o = { foo: 'bar' }
+
+      expect(o).to.equal(o)
+      expect(o).to.deep.equal({ foo: 'bar' })
+      // matching text using regular expression
+      expect('FooBar').to.match(/bar$/i)
+    })
+
+    it('pass your own callback function to should()', () => {
+      // Pass a function to should that can have any number
+      // of explicit assertions within it.
+      // The ".should(cb)" function will be retried
+      // automatically until it passes all your explicit assertions or times out.
+      cy.get('.assertions-p')
+        .find('p')
+        .should(($p) => {
+          // https://on.cypress.io/$
+          // return an array of texts from all of the p's
+          // @ts-ignore TS6133 unused variable
+          const texts = $p.map((i, el) => Cypress.$(el).text())
+
+          // jquery map returns jquery object
+          // and .get() convert this to simple array
+          const paragraphs = texts.get()
+
+          // array should have length of 3
+          expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+
+          // use second argument to expect(...) to provide clear
+          // message with each assertion
+          expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
+            'Some text from first p',
+            'More text from second p',
+            'And even more text from third p',
+          ])
+        })
+    })
+
+    it('finds element by class name regex', () => {
+      cy.get('.docs-header')
+        .find('div')
+        // .should(cb) callback function will be retried
+        .should(($div) => {
+          expect($div).to.have.length(1)
+
+          const className = $div[0].className
+
+          expect(className).to.match(/heading-/)
+        })
+        // .then(cb) callback is not retried,
+        // it either passes or fails
+        .then(($div) => {
+          expect($div, 'text content').to.have.text('Introduction')
+        })
+    })
+
+    it('can throw any error', () => {
+      cy.get('.docs-header')
+        .find('div')
+        .should(($div) => {
+          if ($div.length !== 1) {
+            // you can throw your own errors
+            throw new Error('Did not find 1 element')
+          }
+
+          const className = $div[0].className
+
+          if (!className.match(/heading-/)) {
+            throw new Error(`Could not find class "heading-" in ${className}`)
+          }
+        })
+    })
+
+    it('matches unknown text between two elements', () => {
+      /**
+       * Text from the first element.
+       * @type {string}
+      */
+      let text
+
+      /**
+       * Normalizes passed text,
+       * useful before comparing text with spaces and different capitalization.
+       * @param {string} s Text to normalize
+      */
+      const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
+
+      cy.get('.two-elements')
+        .find('.first')
+        .then(($first) => {
+          // save text from the first element
+          text = normalizeText($first.text())
+        })
+
+      cy.get('.two-elements')
+        .find('.second')
+        .should(($div) => {
+          // we can massage text before comparing
+          const secondText = normalizeText($div.text())
+
+          expect(secondText, 'second text').to.equal(text)
+        })
+    })
+
+    it('assert - assert shape of an object', () => {
+      const person = {
+        name: 'Joe',
+        age: 20,
+      }
+
+      assert.isObject(person, 'value is object')
+    })
+
+    it('retries the should callback until assertions pass', () => {
+      cy.get('#random-number')
+        .should(($div) => {
+          const n = parseFloat($div.text())
+
+          expect(n).to.be.gte(1).and.be.lte(10)
+        })
+    })
+  })
+})

client/cypress/integration/2-advanced-examples/connectors.spec.js

@@ -0,0 +1,97 @@
+/// <reference types="cypress" />
+
+context('Connectors', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/connectors')
+  })
+
+  it('.each() - iterate over an array of elements', () => {
+    // https://on.cypress.io/each
+    cy.get('.connectors-each-ul>li')
+      .each(($el, index, $list) => {
+        console.log($el, index, $list)
+      })
+  })
+
+  it('.its() - get properties on the current subject', () => {
+    // https://on.cypress.io/its
+    cy.get('.connectors-its-ul>li')
+      // calls the 'length' property yielding that value
+      .its('length')
+      .should('be.gt', 2)
+  })
+
+  it('.invoke() - invoke a function on the current subject', () => {
+    // our div is hidden in our script.js
+    // $('.connectors-div').hide()
+
+    // https://on.cypress.io/invoke
+    cy.get('.connectors-div').should('be.hidden')
+      // call the jquery method 'show' on the 'div.container'
+      .invoke('show')
+      .should('be.visible')
+  })
+
+  it('.spread() - spread an array as individual args to callback function', () => {
+    // https://on.cypress.io/spread
+    const arr = ['foo', 'bar', 'baz']
+
+    cy.wrap(arr).spread((foo, bar, baz) => {
+      expect(foo).to.eq('foo')
+      expect(bar).to.eq('bar')
+      expect(baz).to.eq('baz')
+    })
+  })
+
+  describe('.then()', () => {
+    it('invokes a callback function with the current subject', () => {
+      // https://on.cypress.io/then
+      cy.get('.connectors-list > li')
+        .then(($lis) => {
+          expect($lis, '3 items').to.have.length(3)
+          expect($lis.eq(0), 'first item').to.contain('Walk the dog')
+          expect($lis.eq(1), 'second item').to.contain('Feed the cat')
+          expect($lis.eq(2), 'third item').to.contain('Write JavaScript')
+        })
+    })
+
+    it('yields the returned value to the next command', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+
+          return 2
+        })
+        .then((num) => {
+          expect(num).to.equal(2)
+        })
+    })
+
+    it('yields the original subject without return', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+          // note that nothing is returned from this callback
+        })
+        .then((num) => {
+          // this callback receives the original unchanged value 1
+          expect(num).to.equal(1)
+        })
+    })
+
+    it('yields the value yielded by the last Cypress command inside', () => {
+      cy.wrap(1)
+        .then((num) => {
+          expect(num).to.equal(1)
+          // note how we run a Cypress command
+          // the result yielded by this Cypress command
+          // will be passed to the second ".then"
+          cy.wrap(2)
+        })
+        .then((num) => {
+          // this callback receives the value yielded by "cy.wrap(2)"
+          expect(num).to.equal(2)
+        })
+    })
+  })
+})

client/cypress/integration/2-advanced-examples/cookies.spec.js

@@ -0,0 +1,77 @@
+/// <reference types="cypress" />
+
+context('Cookies', () => {
+  beforeEach(() => {
+    Cypress.Cookies.debug(true)
+
+    cy.visit('https://example.cypress.io/commands/cookies')
+
+    // clear cookies again after visiting to remove
+    // any 3rd party cookies picked up such as cloudflare
+    cy.clearCookies()
+  })
+
+  it('cy.getCookie() - get a browser cookie', () => {
+    // https://on.cypress.io/getcookie
+    cy.get('#getCookie .set-a-cookie').click()
+
+    // cy.getCookie() yields a cookie object
+    cy.getCookie('token').should('have.property', 'value', '123ABC')
+  })
+
+  it('cy.getCookies() - get browser cookies', () => {
+    // https://on.cypress.io/getcookies
+    cy.getCookies().should('be.empty')
+
+    cy.get('#getCookies .set-a-cookie').click()
+
+    // cy.getCookies() yields an array of cookies
+    cy.getCookies().should('have.length', 1).should((cookies) => {
+      // each cookie has these properties
+      expect(cookies[0]).to.have.property('name', 'token')
+      expect(cookies[0]).to.have.property('value', '123ABC')
+      expect(cookies[0]).to.have.property('httpOnly', false)
+      expect(cookies[0]).to.have.property('secure', false)
+      expect(cookies[0]).to.have.property('domain')
+      expect(cookies[0]).to.have.property('path')
+    })
+  })
+
+  it('cy.setCookie() - set a browser cookie', () => {
+    // https://on.cypress.io/setcookie
+    cy.getCookies().should('be.empty')
+
+    cy.setCookie('foo', 'bar')
+
+    // cy.getCookie() yields a cookie object
+    cy.getCookie('foo').should('have.property', 'value', 'bar')
+  })
+
+  it('cy.clearCookie() - clear a browser cookie', () => {
+    // https://on.cypress.io/clearcookie
+    cy.getCookie('token').should('be.null')
+
+    cy.get('#clearCookie .set-a-cookie').click()
+
+    cy.getCookie('token').should('have.property', 'value', '123ABC')
+
+    // cy.clearCookies() yields null
+    cy.clearCookie('token').should('be.null')
+
+    cy.getCookie('token').should('be.null')
+  })
+
+  it('cy.clearCookies() - clear browser cookies', () => {
+    // https://on.cypress.io/clearcookies
+    cy.getCookies().should('be.empty')
+
+    cy.get('#clearCookies .set-a-cookie').click()
+
+    cy.getCookies().should('have.length', 1)
+
+    // cy.clearCookies() yields null
+    cy.clearCookies()
+
+    cy.getCookies().should('be.empty')
+  })
+})

client/cypress/integration/2-advanced-examples/cypress_api.spec.js

@@ -0,0 +1,202 @@
+/// <reference types="cypress" />
+
+context('Cypress.Commands', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // https://on.cypress.io/custom-commands
+
+  it('.add() - create a custom command', () => {
+    Cypress.Commands.add('console', {
+      prevSubject: true,
+    }, (subject, method) => {
+      // the previous subject is automatically received
+      // and the commands arguments are shifted
+
+      // allow us to change the console method used
+      method = method || 'log'
+
+      // log the subject to the console
+      // @ts-ignore TS7017
+      console[method]('The subject is', subject)
+
+      // whatever we return becomes the new subject
+      // we don't want to change the subject so
+      // we return whatever was passed in
+      return subject
+    })
+
+    // @ts-ignore TS2339
+    cy.get('button').console('info').then(($button) => {
+      // subject is still $button
+    })
+  })
+})
+
+context('Cypress.Cookies', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // https://on.cypress.io/cookies
+  it('.debug() - enable or disable debugging', () => {
+    Cypress.Cookies.debug(true)
+
+    // Cypress will now log in the console when
+    // cookies are set or cleared
+    cy.setCookie('fakeCookie', '123ABC')
+    cy.clearCookie('fakeCookie')
+    cy.setCookie('fakeCookie', '123ABC')
+    cy.clearCookie('fakeCookie')
+    cy.setCookie('fakeCookie', '123ABC')
+  })
+
+  it('.preserveOnce() - preserve cookies by key', () => {
+    // normally cookies are reset after each test
+    cy.getCookie('fakeCookie').should('not.be.ok')
+
+    // preserving a cookie will not clear it when
+    // the next test starts
+    cy.setCookie('lastCookie', '789XYZ')
+    Cypress.Cookies.preserveOnce('lastCookie')
+  })
+
+  it('.defaults() - set defaults for all cookies', () => {
+    // now any cookie with the name 'session_id' will
+    // not be cleared before each new test runs
+    Cypress.Cookies.defaults({
+      preserve: 'session_id',
+    })
+  })
+})
+
+context('Cypress.arch', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get CPU architecture name of underlying OS', () => {
+    // https://on.cypress.io/arch
+    expect(Cypress.arch).to.exist
+  })
+})
+
+context('Cypress.config()', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get and set configuration options', () => {
+    // https://on.cypress.io/config
+    let myConfig = Cypress.config()
+
+    expect(myConfig).to.have.property('animationDistanceThreshold', 5)
+    expect(myConfig).to.have.property('baseUrl', null)
+    expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
+    expect(myConfig).to.have.property('requestTimeout', 5000)
+    expect(myConfig).to.have.property('responseTimeout', 30000)
+    expect(myConfig).to.have.property('viewportHeight', 660)
+    expect(myConfig).to.have.property('viewportWidth', 1000)
+    expect(myConfig).to.have.property('pageLoadTimeout', 60000)
+    expect(myConfig).to.have.property('waitForAnimations', true)
+
+    expect(Cypress.config('pageLoadTimeout')).to.eq(60000)
+
+    // this will change the config for the rest of your tests!
+    Cypress.config('pageLoadTimeout', 20000)
+
+    expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
+
+    Cypress.config('pageLoadTimeout', 60000)
+  })
+})
+
+context('Cypress.dom', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // https://on.cypress.io/dom
+  it('.isHidden() - determine if a DOM element is hidden', () => {
+    let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
+    let visibleP = Cypress.$('.dom-p p.visible').get(0)
+
+    // our first paragraph has css class 'hidden'
+    expect(Cypress.dom.isHidden(hiddenP)).to.be.true
+    expect(Cypress.dom.isHidden(visibleP)).to.be.false
+  })
+})
+
+context('Cypress.env()', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  // We can set environment variables for highly dynamic values
+
+  // https://on.cypress.io/environment-variables
+  it('Get environment variables', () => {
+    // https://on.cypress.io/env
+    // set multiple environment variables
+    Cypress.env({
+      host: 'veronica.dev.local',
+      api_server: 'http://localhost:8888/v1/',
+    })
+
+    // get environment variable
+    expect(Cypress.env('host')).to.eq('veronica.dev.local')
+
+    // set environment variable
+    Cypress.env('api_server', 'http://localhost:8888/v2/')
+    expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
+
+    // get all environment variable
+    expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
+    expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
+  })
+})
+
+context('Cypress.log', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Control what is printed to the Command Log', () => {
+    // https://on.cypress.io/cypress-log
+  })
+})
+
+context('Cypress.platform', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get underlying OS name', () => {
+    // https://on.cypress.io/platform
+    expect(Cypress.platform).to.be.exist
+  })
+})
+
+context('Cypress.version', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get current version of Cypress being run', () => {
+    // https://on.cypress.io/version
+    expect(Cypress.version).to.be.exist
+  })
+})
+
+context('Cypress.spec', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/cypress-api')
+  })
+
+  it('Get current spec information', () => {
+    // https://on.cypress.io/spec
+    // wrap the object so we can inspect it easily by clicking in the command log
+    cy.wrap(Cypress.spec).should('include.keys', ['name', 'relative', 'absolute'])
+  })
+})

client/cypress/integration/2-advanced-examples/files.spec.js

@@ -0,0 +1,88 @@
+/// <reference types="cypress" />
+
+/// JSON fixture file can be loaded directly using
+// the built-in JavaScript bundler
+// @ts-ignore
+const requiredExample = require('../../fixtures/example')
+
+context('Files', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/files')
+  })
+
+  beforeEach(() => {
+    // load example.json fixture file and store
+    // in the test context object
+    cy.fixture('example.json').as('example')
+  })
+
+  it('cy.fixture() - load a fixture', () => {
+    // https://on.cypress.io/fixture
+
+    // Instead of writing a response inline you can
+    // use a fixture file's content.
+
+    // when application makes an Ajax request matching "GET **/comments/*"
+    // Cypress will intercept it and reply with the object in `example.json` fixture
+    cy.intercept('GET', '**/comments/*', { fixture: 'example.json' }).as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.fixture-btn').click()
+
+    cy.wait('@getComment').its('response.body')
+      .should('have.property', 'name')
+      .and('include', 'Using fixtures to represent data')
+  })
+
+  it('cy.fixture() or require - load a fixture', function () {
+    // we are inside the "function () { ... }"
+    // callback and can use test context object "this"
+    // "this.example" was loaded in "beforeEach" function callback
+    expect(this.example, 'fixture in the test context')
+      .to.deep.equal(requiredExample)
+
+    // or use "cy.wrap" and "should('deep.equal', ...)" assertion
+    cy.wrap(this.example)
+      .should('deep.equal', requiredExample)
+  })
+
+  it('cy.readFile() - read file contents', () => {
+    // https://on.cypress.io/readfile
+
+    // You can read a file and yield its contents
+    // The filePath is relative to your project's root.
+    cy.readFile('cypress.json').then((json) => {
+      expect(json).to.be.an('object')
+    })
+  })
+
+  it('cy.writeFile() - write to a file', () => {
+    // https://on.cypress.io/writefile
+
+    // You can write to a file
+
+    // Use a response from a request to automatically
+    // generate a fixture file for use later
+    cy.request('https://jsonplaceholder.cypress.io/users')
+      .then((response) => {
+        cy.writeFile('cypress/fixtures/users.json', response.body)
+      })
+
+    cy.fixture('users').should((users) => {
+      expect(users[0].name).to.exist
+    })
+
+    // JavaScript arrays and objects are stringified
+    // and formatted into text.
+    cy.writeFile('cypress/fixtures/profile.json', {
+      id: 8739,
+      name: 'Jane',
+      email: 'jane@example.com',
+    })
+
+    cy.fixture('profile').should((profile) => {
+      expect(profile.name).to.eq('Jane')
+    })
+  })
+})

client/cypress/integration/2-advanced-examples/local_storage.spec.js

@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+
+context('Local Storage', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/local-storage')
+  })
+  // Although local storage is automatically cleared
+  // in between tests to maintain a clean state
+  // sometimes we need to clear the local storage manually
+
+  it('cy.clearLocalStorage() - clear all data in local storage', () => {
+    // https://on.cypress.io/clearlocalstorage
+    cy.get('.ls-btn').click().should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // clearLocalStorage() yields the localStorage object
+    cy.clearLocalStorage().should((ls) => {
+      expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem('prop2')).to.be.null
+      expect(ls.getItem('prop3')).to.be.null
+    })
+
+    cy.get('.ls-btn').click().should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // Clear key matching string in Local Storage
+    cy.clearLocalStorage('prop1').should((ls) => {
+      expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem('prop2')).to.eq('blue')
+      expect(ls.getItem('prop3')).to.eq('magenta')
+    })
+
+    cy.get('.ls-btn').click().should(() => {
+      expect(localStorage.getItem('prop1')).to.eq('red')
+      expect(localStorage.getItem('prop2')).to.eq('blue')
+      expect(localStorage.getItem('prop3')).to.eq('magenta')
+    })
+
+    // Clear keys matching regex in Local Storage
+    cy.clearLocalStorage(/prop1|2/).should((ls) => {
+      expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem('prop2')).to.be.null
+      expect(ls.getItem('prop3')).to.eq('magenta')
+    })
+  })
+})

client/cypress/integration/2-advanced-examples/location.spec.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+context('Location', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/location')
+  })
+
+  it('cy.hash() - get the current URL hash', () => {
+    // https://on.cypress.io/hash
+    cy.hash().should('be.empty')
+  })
+
+  it('cy.location() - get window.location', () => {
+    // https://on.cypress.io/location
+    cy.location().should((location) => {
+      expect(location.hash).to.be.empty
+      expect(location.href).to.eq('https://example.cypress.io/commands/location')
+      expect(location.host).to.eq('example.cypress.io')
+      expect(location.hostname).to.eq('example.cypress.io')
+      expect(location.origin).to.eq('https://example.cypress.io')
+      expect(location.pathname).to.eq('/commands/location')
+      expect(location.port).to.eq('')
+      expect(location.protocol).to.eq('https:')
+      expect(location.search).to.be.empty
+    })
+  })
+
+  it('cy.url() - get the current URL', () => {
+    // https://on.cypress.io/url
+    cy.url().should('eq', 'https://example.cypress.io/commands/location')
+  })
+})

client/cypress/integration/2-advanced-examples/misc.spec.js

@@ -0,0 +1,104 @@
+/// <reference types="cypress" />
+
+context('Misc', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/misc')
+  })
+
+  it('.end() - end the command chain', () => {
+    // https://on.cypress.io/end
+
+    // cy.end is useful when you want to end a chain of commands
+    // and force Cypress to re-query from the root element
+    cy.get('.misc-table').within(() => {
+      // ends the current chain and yields null
+      cy.contains('Cheryl').click().end()
+
+      // queries the entire table again
+      cy.contains('Charles').click()
+    })
+  })
+
+  it('cy.exec() - execute a system command', () => {
+    // execute a system command.
+    // so you can take actions necessary for
+    // your test outside the scope of Cypress.
+    // https://on.cypress.io/exec
+
+    // we can use Cypress.platform string to
+    // select appropriate command
+    // https://on.cypress/io/platform
+    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
+
+    // on CircleCI Windows build machines we have a failure to run bash shell
+    // https://github.com/cypress-io/cypress/issues/5169
+    // so skip some of the tests by passing flag "--env circle=true"
+    const isCircleOnWindows = Cypress.platform === 'win32' && Cypress.env('circle')
+
+    if (isCircleOnWindows) {
+      cy.log('Skipping test on CircleCI')
+
+      return
+    }
+
+    // cy.exec problem on Shippable CI
+    // https://github.com/cypress-io/cypress/issues/6718
+    const isShippable = Cypress.platform === 'linux' && Cypress.env('shippable')
+
+    if (isShippable) {
+      cy.log('Skipping test on ShippableCI')
+
+      return
+    }
+
+    cy.exec('echo Jane Lane')
+      .its('stdout').should('contain', 'Jane Lane')
+
+    if (Cypress.platform === 'win32') {
+      cy.exec('print cypress.json')
+        .its('stderr').should('be.empty')
+    } else {
+      cy.exec('cat cypress.json')
+        .its('stderr').should('be.empty')
+
+      cy.exec('pwd')
+        .its('code').should('eq', 0)
+    }
+  })
+
+  it('cy.focused() - get the DOM element that has focus', () => {
+    // https://on.cypress.io/focused
+    cy.get('.misc-form').find('#name').click()
+    cy.focused().should('have.id', 'name')
+
+    cy.get('.misc-form').find('#description').click()
+    cy.focused().should('have.id', 'description')
+  })
+
+  context('Cypress.Screenshot', function () {
+    it('cy.screenshot() - take a screenshot', () => {
+      // https://on.cypress.io/screenshot
+      cy.screenshot('my-image')
+    })
+
+    it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
+      Cypress.Screenshot.defaults({
+        blackout: ['.foo'],
+        capture: 'viewport',
+        clip: { x: 0, y: 0, width: 200, height: 200 },
+        scale: false,
+        disableTimersAndAnimations: true,
+        screenshotOnRunFailure: true,
+        onBeforeScreenshot () { },
+        onAfterScreenshot () { },
+      })
+    })
+  })
+
+  it('cy.wrap() - wrap an object', () => {
+    // https://on.cypress.io/wrap
+    cy.wrap({ foo: 'bar' })
+      .should('have.property', 'foo')
+      .and('include', 'bar')
+  })
+})

client/cypress/integration/2-advanced-examples/navigation.spec.js

@@ -0,0 +1,56 @@
+/// <reference types="cypress" />
+
+context('Navigation', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io')
+    cy.get('.navbar-nav').contains('Commands').click()
+    cy.get('.dropdown-menu').contains('Navigation').click()
+  })
+
+  it('cy.go() - go back or forward in the browser\'s history', () => {
+    // https://on.cypress.io/go
+
+    cy.location('pathname').should('include', 'navigation')
+
+    cy.go('back')
+    cy.location('pathname').should('not.include', 'navigation')
+
+    cy.go('forward')
+    cy.location('pathname').should('include', 'navigation')
+
+    // clicking back
+    cy.go(-1)
+    cy.location('pathname').should('not.include', 'navigation')
+
+    // clicking forward
+    cy.go(1)
+    cy.location('pathname').should('include', 'navigation')
+  })
+
+  it('cy.reload() - reload the page', () => {
+    // https://on.cypress.io/reload
+    cy.reload()
+
+    // reload the page without using the cache
+    cy.reload(true)
+  })
+
+  it('cy.visit() - visit a remote url', () => {
+    // https://on.cypress.io/visit
+
+    // Visit any sub-domain of your current domain
+
+    // Pass options to the visit
+    cy.visit('https://example.cypress.io/commands/navigation', {
+      timeout: 50000, // increase total time for the visit to resolve
+      onBeforeLoad (contentWindow) {
+        // contentWindow is the remote page's window object
+        expect(typeof contentWindow === 'object').to.be.true
+      },
+      onLoad (contentWindow) {
+        // contentWindow is the remote page's window object
+        expect(typeof contentWindow === 'object').to.be.true
+      },
+    })
+    })
+})

client/cypress/integration/2-advanced-examples/network_requests.spec.js

@@ -0,0 +1,163 @@
+/// <reference types="cypress" />
+
+context('Network Requests', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/network-requests')
+  })
+
+  // Manage HTTP requests in your app
+
+  it('cy.request() - make an XHR request', () => {
+    // https://on.cypress.io/request
+    cy.request('https://jsonplaceholder.cypress.io/comments')
+      .should((response) => {
+        expect(response.status).to.eq(200)
+        // the server sometimes gets an extra comment posted from another machine
+        // which gets returned as 1 extra object
+        expect(response.body).to.have.property('length').and.be.oneOf([500, 501])
+        expect(response).to.have.property('headers')
+        expect(response).to.have.property('duration')
+      })
+  })
+
+  it('cy.request() - verify response using BDD syntax', () => {
+    cy.request('https://jsonplaceholder.cypress.io/comments')
+    .then((response) => {
+      // https://on.cypress.io/assertions
+      expect(response).property('status').to.equal(200)
+      expect(response).property('body').to.have.property('length').and.be.oneOf([500, 501])
+      expect(response).to.include.keys('headers', 'duration')
+    })
+  })
+
+  it('cy.request() with query parameters', () => {
+    // will execute request
+    // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
+    cy.request({
+      url: 'https://jsonplaceholder.cypress.io/comments',
+      qs: {
+        postId: 1,
+        id: 3,
+      },
+    })
+    .its('body')
+    .should('be.an', 'array')
+    .and('have.length', 1)
+    .its('0') // yields first element of the array
+    .should('contain', {
+      postId: 1,
+      id: 3,
+    })
+  })
+
+  it('cy.request() - pass result to the second request', () => {
+    // first, let's find out the userId of the first user we have
+    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
+      .its('body') // yields the response object
+      .its('0') // yields the first element of the returned list
+      // the above two commands its('body').its('0')
+      // can be written as its('body.0')
+      // if you do not care about TypeScript checks
+      .then((user) => {
+        expect(user).property('id').to.be.a('number')
+        // make a new post on behalf of the user
+        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+          userId: user.id,
+          title: 'Cypress Test Runner',
+          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+        })
+      })
+      // note that the value here is the returned value of the 2nd request
+      // which is the new post object
+      .then((response) => {
+        expect(response).property('status').to.equal(201) // new entity created
+        expect(response).property('body').to.contain({
+          title: 'Cypress Test Runner',
+        })
+
+        // we don't know the exact post id - only that it will be > 100
+        // since JSONPlaceholder has built-in 100 posts
+        expect(response.body).property('id').to.be.a('number')
+          .and.to.be.gt(100)
+
+        // we don't know the user id here - since it was in above closure
+        // so in this test just confirm that the property is there
+        expect(response.body).property('userId').to.be.a('number')
+      })
+  })
+
+  it('cy.request() - save response in the shared test context', () => {
+    // https://on.cypress.io/variables-and-aliases
+    cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
+      .its('body').its('0') // yields the first element of the returned list
+      .as('user') // saves the object in the test context
+      .then(function () {
+        // NOTE 👀
+        //  By the time this callback runs the "as('user')" command
+        //  has saved the user object in the test context.
+        //  To access the test context we need to use
+        //  the "function () { ... }" callback form,
+        //  otherwise "this" points at a wrong or undefined object!
+        cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
+          userId: this.user.id,
+          title: 'Cypress Test Runner',
+          body: 'Fast, easy and reliable testing for anything that runs in a browser.',
+        })
+        .its('body').as('post') // save the new post from the response
+      })
+      .then(function () {
+        // When this callback runs, both "cy.request" API commands have finished
+        // and the test context has "user" and "post" objects set.
+        // Let's verify them.
+        expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id)
+      })
+  })
+
+  it('cy.intercept() - route responses to matching requests', () => {
+    // https://on.cypress.io/intercept
+
+    let message = 'whoa, this comment does not exist'
+
+    // Listen to GET to comments/1
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // https://on.cypress.io/wait
+    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+
+    // Listen to POST to comments
+    cy.intercept('POST', '**/comments').as('postComment')
+
+    // we have code that posts a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-post').click()
+    cy.wait('@postComment').should(({ request, response }) => {
+      expect(request.body).to.include('email')
+      expect(request.headers).to.have.property('content-type')
+      expect(response && response.body).to.have.property('name', 'Using POST in cy.intercept()')
+    })
+
+    // Stub a response to PUT comments/ ****
+    cy.intercept({
+      method: 'PUT',
+      url: '**/comments/*',
+    }, {
+      statusCode: 404,
+      body: { error: message },
+      headers: { 'access-control-allow-origin': '*' },
+      delayMs: 500,
+    }).as('putComment')
+
+    // we have code that puts a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-put').click()
+
+    cy.wait('@putComment')
+
+    // our 404 statusCode logic in scripts.js executed
+    cy.get('.network-put-comment').should('contain', message)
+  })
+})

client/cypress/integration/2-advanced-examples/querying.spec.js

@@ -0,0 +1,114 @@
+/// <reference types="cypress" />
+
+context('Querying', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/querying')
+  })
+
+  // The most commonly used query is 'cy.get()', you can
+  // think of this like the '$' in jQuery
+
+  it('cy.get() - query DOM elements', () => {
+    // https://on.cypress.io/get
+
+    cy.get('#query-btn').should('contain', 'Button')
+
+    cy.get('.query-btn').should('contain', 'Button')
+
+    cy.get('#querying .well>button:first').should('contain', 'Button')
+    //              ↲
+    // Use CSS selectors just like jQuery
+
+    cy.get('[data-test-id="test-example"]').should('have.class', 'example')
+
+    // 'cy.get()' yields jQuery object, you can get its attribute
+    // by invoking `.attr()` method
+    cy.get('[data-test-id="test-example"]')
+      .invoke('attr', 'data-test-id')
+      .should('equal', 'test-example')
+
+    // or you can get element's CSS property
+    cy.get('[data-test-id="test-example"]')
+      .invoke('css', 'position')
+      .should('equal', 'static')
+
+    // or use assertions directly during 'cy.get()'
+    // https://on.cypress.io/assertions
+    cy.get('[data-test-id="test-example"]')
+      .should('have.attr', 'data-test-id', 'test-example')
+      .and('have.css', 'position', 'static')
+  })
+
+  it('cy.contains() - query DOM elements with matching content', () => {
+    // https://on.cypress.io/contains
+    cy.get('.query-list')
+      .contains('bananas')
+      .should('have.class', 'third')
+
+    // we can pass a regexp to `.contains()`
+    cy.get('.query-list')
+      .contains(/^b\w+/)
+      .should('have.class', 'third')
+
+    cy.get('.query-list')
+      .contains('apples')
+      .should('have.class', 'first')
+
+    // passing a selector to contains will
+    // yield the selector containing the text
+    cy.get('#querying')
+      .contains('ul', 'oranges')
+      .should('have.class', 'query-list')
+
+    cy.get('.query-button')
+      .contains('Save Form')
+      .should('have.class', 'btn')
+  })
+
+  it('.within() - query DOM elements within a specific element', () => {
+    // https://on.cypress.io/within
+    cy.get('.query-form').within(() => {
+      cy.get('input:first').should('have.attr', 'placeholder', 'Email')
+      cy.get('input:last').should('have.attr', 'placeholder', 'Password')
+    })
+  })
+
+  it('cy.root() - query the root DOM element', () => {
+    // https://on.cypress.io/root
+
+    // By default, root is the document
+    cy.root().should('match', 'html')
+
+    cy.get('.query-ul').within(() => {
+      // In this within, the root is now the ul DOM element
+      cy.root().should('have.class', 'query-ul')
+    })
+  })
+
+  it('best practices - selecting elements', () => {
+    // https://on.cypress.io/best-practices#Selecting-Elements
+    cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
+      // Worst - too generic, no context
+      cy.get('button').click()
+
+      // Bad. Coupled to styling. Highly subject to change.
+      cy.get('.btn.btn-large').click()
+
+      // Average. Coupled to the `name` attribute which has HTML semantics.
+      cy.get('[name=submission]').click()
+
+      // Better. But still coupled to styling or JS event listeners.
+      cy.get('#main').click()
+
+      // Slightly better. Uses an ID but also ensures the element
+      // has an ARIA role attribute
+      cy.get('#main[role=button]').click()
+
+      // Much better. But still coupled to text content that may change.
+      cy.contains('Submit').click()
+
+      // Best. Insulated from all changes.
+      cy.get('[data-cy=submit]').click()
+    })
+  })
+})

client/cypress/integration/2-advanced-examples/spies_stubs_clocks.spec.js

@@ -0,0 +1,205 @@
+/// <reference types="cypress" />
+// remove no check once Cypress.sinon is typed
+// https://github.com/cypress-io/cypress/issues/6720
+
+context('Spies, Stubs, and Clock', () => {
+  it('cy.spy() - wrap a method in a spy', () => {
+    // https://on.cypress.io/spy
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      foo () {},
+    }
+
+    const spy = cy.spy(obj, 'foo').as('anyArgs')
+
+    obj.foo()
+
+    expect(spy).to.be.called
+  })
+
+  it('cy.spy() retries until assertions pass', () => {
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      /**
+       * Prints the argument passed
+       * @param x {any}
+      */
+      foo (x) {
+        console.log('obj.foo called with', x)
+      },
+    }
+
+    cy.spy(obj, 'foo').as('foo')
+
+    setTimeout(() => {
+      obj.foo('first')
+    }, 500)
+
+    setTimeout(() => {
+      obj.foo('second')
+    }, 2500)
+
+    cy.get('@foo').should('have.been.calledTwice')
+  })
+
+  it('cy.stub() - create a stub and/or replace a function with stub', () => {
+    // https://on.cypress.io/stub
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+
+    const obj = {
+      /**
+       * prints both arguments to the console
+       * @param a {string}
+       * @param b {string}
+      */
+      foo (a, b) {
+        console.log('a', a, 'b', b)
+      },
+    }
+
+    const stub = cy.stub(obj, 'foo').as('foo')
+
+    obj.foo('foo', 'bar')
+
+    expect(stub).to.be.called
+  })
+
+  it('cy.clock() - control time in the browser', () => {
+    // https://on.cypress.io/clock
+
+    // create the date in UTC so its always the same
+    // no matter what local timezone the browser is running in
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+
+    cy.clock(now)
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.get('#clock-div').click()
+      .should('have.text', '1489449600')
+  })
+
+  it('cy.tick() - move time in the browser', () => {
+    // https://on.cypress.io/tick
+
+    // create the date in UTC so its always the same
+    // no matter what local timezone the browser is running in
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+
+    cy.clock(now)
+    cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.get('#tick-div').click()
+      .should('have.text', '1489449600')
+
+    cy.tick(10000) // 10 seconds passed
+    cy.get('#tick-div').click()
+      .should('have.text', '1489449610')
+  })
+
+  it('cy.stub() matches depending on arguments', () => {
+    // see all possible matchers at
+    // https://sinonjs.org/releases/latest/matchers/
+    const greeter = {
+      /**
+       * Greets a person
+       * @param {string} name
+      */
+      greet (name) {
+        return `Hello, ${name}!`
+      },
+    }
+
+    cy.stub(greeter, 'greet')
+      .callThrough() // if you want non-matched calls to call the real method
+      .withArgs(Cypress.sinon.match.string).returns('Hi')
+      .withArgs(Cypress.sinon.match.number).throws(new Error('Invalid name'))
+
+    expect(greeter.greet('World')).to.equal('Hi')
+    // @ts-ignore
+    expect(() => greeter.greet(42)).to.throw('Invalid name')
+    expect(greeter.greet).to.have.been.calledTwice
+
+    // non-matched calls goes the actual method
+    // @ts-ignore
+    expect(greeter.greet()).to.equal('Hello, undefined!')
+  })
+
+  it('matches call arguments using Sinon matchers', () => {
+    // see all possible matchers at
+    // https://sinonjs.org/releases/latest/matchers/
+    const calculator = {
+      /**
+       * returns the sum of two arguments
+       * @param a {number}
+       * @param b {number}
+      */
+      add (a, b) {
+        return a + b
+      },
+    }
+
+    const spy = cy.spy(calculator, 'add').as('add')
+
+    expect(calculator.add(2, 3)).to.equal(5)
+
+    // if we want to assert the exact values used during the call
+    expect(spy).to.be.calledWith(2, 3)
+
+    // let's confirm "add" method was called with two numbers
+    expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number)
+
+    // alternatively, provide the value to match
+    expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3))
+
+    // match any value
+    expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3)
+
+    // match any value from a list
+    expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3)
+
+    /**
+     * Returns true if the given number is event
+     * @param {number} x
+     */
+    const isEven = (x) => x % 2 === 0
+
+    // expect the value to pass a custom predicate function
+    // the second argument to "sinon.match(predicate, message)" is
+    // shown if the predicate does not pass and assertion fails
+    expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, 'isEven'), 3)
+
+    /**
+     * Returns a function that checks if a given number is larger than the limit
+     * @param {number} limit
+     * @returns {(x: number) => boolean}
+     */
+    const isGreaterThan = (limit) => (x) => x > limit
+
+    /**
+     * Returns a function that checks if a given number is less than the limit
+     * @param {number} limit
+     * @returns {(x: number) => boolean}
+     */
+    const isLessThan = (limit) => (x) => x < limit
+
+    // you can combine several matchers using "and", "or"
+    expect(spy).to.be.calledWith(
+      Cypress.sinon.match.number,
+      Cypress.sinon.match(isGreaterThan(2), '> 2').and(Cypress.sinon.match(isLessThan(4), '< 4')),
+    )
+
+    expect(spy).to.be.calledWith(
+      Cypress.sinon.match.number,
+      Cypress.sinon.match(isGreaterThan(200), '> 200').or(Cypress.sinon.match(3)),
+    )
+
+    // matchers can be used from BDD assertions
+    cy.get('@add').should('have.been.calledWith',
+      Cypress.sinon.match.number, Cypress.sinon.match(3))
+
+    // you can alias matchers for shorter test code
+    const { match: M } = Cypress.sinon
+
+    cy.get('@add').should('have.been.calledWith', M.number, M(3))
+  })
+})

client/cypress/integration/2-advanced-examples/traversal.spec.js

@@ -0,0 +1,121 @@
+/// <reference types="cypress" />
+
+context('Traversal', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/traversal')
+  })
+
+  it('.children() - get child DOM elements', () => {
+    // https://on.cypress.io/children
+    cy.get('.traversal-breadcrumb')
+      .children('.active')
+      .should('contain', 'Data')
+  })
+
+  it('.closest() - get closest ancestor DOM element', () => {
+    // https://on.cypress.io/closest
+    cy.get('.traversal-badge')
+      .closest('ul')
+      .should('have.class', 'list-group')
+  })
+
+  it('.eq() - get a DOM element at a specific index', () => {
+    // https://on.cypress.io/eq
+    cy.get('.traversal-list>li')
+      .eq(1).should('contain', 'siamese')
+  })
+
+  it('.filter() - get DOM elements that match the selector', () => {
+    // https://on.cypress.io/filter
+    cy.get('.traversal-nav>li')
+      .filter('.active').should('contain', 'About')
+  })
+
+  it('.find() - get descendant DOM elements of the selector', () => {
+    // https://on.cypress.io/find
+    cy.get('.traversal-pagination')
+      .find('li').find('a')
+      .should('have.length', 7)
+  })
+
+  it('.first() - get first DOM element', () => {
+    // https://on.cypress.io/first
+    cy.get('.traversal-table td')
+      .first().should('contain', '1')
+  })
+
+  it('.last() - get last DOM element', () => {
+    // https://on.cypress.io/last
+    cy.get('.traversal-buttons .btn')
+      .last().should('contain', 'Submit')
+  })
+
+  it('.next() - get next sibling DOM element', () => {
+    // https://on.cypress.io/next
+    cy.get('.traversal-ul')
+      .contains('apples').next().should('contain', 'oranges')
+  })
+
+  it('.nextAll() - get all next sibling DOM elements', () => {
+    // https://on.cypress.io/nextall
+    cy.get('.traversal-next-all')
+      .contains('oranges')
+      .nextAll().should('have.length', 3)
+  })
+
+  it('.nextUntil() - get next sibling DOM elements until next el', () => {
+    // https://on.cypress.io/nextuntil
+    cy.get('#veggies')
+      .nextUntil('#nuts').should('have.length', 3)
+  })
+
+  it('.not() - remove DOM elements from set of DOM elements', () => {
+    // https://on.cypress.io/not
+    cy.get('.traversal-disabled .btn')
+      .not('[disabled]').should('not.contain', 'Disabled')
+  })
+
+  it('.parent() - get parent DOM element from DOM elements', () => {
+    // https://on.cypress.io/parent
+    cy.get('.traversal-mark')
+      .parent().should('contain', 'Morbi leo risus')
+  })
+
+  it('.parents() - get parent DOM elements from DOM elements', () => {
+    // https://on.cypress.io/parents
+    cy.get('.traversal-cite')
+      .parents().should('match', 'blockquote')
+  })
+
+  it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
+    // https://on.cypress.io/parentsuntil
+    cy.get('.clothes-nav')
+      .find('.active')
+      .parentsUntil('.clothes-nav')
+      .should('have.length', 2)
+  })
+
+  it('.prev() - get previous sibling DOM element', () => {
+    // https://on.cypress.io/prev
+    cy.get('.birds').find('.active')
+      .prev().should('contain', 'Lorikeets')
+  })
+
+  it('.prevAll() - get all previous sibling DOM elements', () => {
+    // https://on.cypress.io/prevall
+    cy.get('.fruits-list').find('.third')
+      .prevAll().should('have.length', 2)
+  })
+
+  it('.prevUntil() - get all previous sibling DOM elements until el', () => {
+    // https://on.cypress.io/prevuntil
+    cy.get('.foods-list').find('#nuts')
+      .prevUntil('#veggies').should('have.length', 3)
+  })
+
+  it('.siblings() - get all sibling DOM elements', () => {
+    // https://on.cypress.io/siblings
+    cy.get('.traversal-pills .active')
+      .siblings().should('have.length', 2)
+  })
+})

client/cypress/integration/2-advanced-examples/utilities.spec.js

@@ -0,0 +1,110 @@
+/// <reference types="cypress" />
+
+context('Utilities', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/utilities')
+  })
+
+  it('Cypress._ - call a lodash method', () => {
+    // https://on.cypress.io/_
+    cy.request('https://jsonplaceholder.cypress.io/users')
+      .then((response) => {
+        let ids = Cypress._.chain(response.body).map('id').take(3).value()
+
+        expect(ids).to.deep.eq([1, 2, 3])
+      })
+  })
+
+  it('Cypress.$ - call a jQuery method', () => {
+    // https://on.cypress.io/$
+    let $li = Cypress.$('.utility-jquery li:first')
+
+    cy.wrap($li)
+      .should('not.have.class', 'active')
+      .click()
+      .should('have.class', 'active')
+  })
+
+  it('Cypress.Blob - blob utilities and base64 string conversion', () => {
+    // https://on.cypress.io/blob
+    cy.get('.utility-blob').then(($div) => {
+      // https://github.com/nolanlawson/blob-util#imgSrcToDataURL
+      // get the dataUrl string for the javascript-logo
+      return Cypress.Blob.imgSrcToDataURL('https://example.cypress.io/assets/img/javascript-logo.png', undefined, 'anonymous')
+      .then((dataUrl) => {
+        // create an <img> element and set its src to the dataUrl
+        let img = Cypress.$('<img />', { src: dataUrl })
+
+        // need to explicitly return cy here since we are initially returning
+        // the Cypress.Blob.imgSrcToDataURL promise to our test
+        // append the image
+        $div.append(img)
+
+        cy.get('.utility-blob img').click()
+          .should('have.attr', 'src', dataUrl)
+      })
+    })
+  })
+
+  it('Cypress.minimatch - test out glob patterns against strings', () => {
+    // https://on.cypress.io/minimatch
+    let matching = Cypress.minimatch('/users/1/comments', '/users/*/comments', {
+      matchBase: true,
+    })
+
+    expect(matching, 'matching wildcard').to.be.true
+
+    matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
+      matchBase: true,
+    })
+
+    expect(matching, 'comments').to.be.false
+
+    // ** matches against all downstream path segments
+    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
+      matchBase: true,
+    })
+
+    expect(matching, 'comments').to.be.true
+
+    // whereas * matches only the next path segment
+
+    matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
+      matchBase: false,
+    })
+
+    expect(matching, 'comments').to.be.false
+  })
+
+  it('Cypress.Promise - instantiate a bluebird promise', () => {
+    // https://on.cypress.io/promise
+    let waited = false
+
+    /**
+     * @return Bluebird<string>
+     */
+    function waitOneSecond () {
+      // return a promise that resolves after 1 second
+      // @ts-ignore TS2351 (new Cypress.Promise)
+      return new Cypress.Promise((resolve, reject) => {
+        setTimeout(() => {
+          // set waited to true
+          waited = true
+
+          // resolve with 'foo' string
+          resolve('foo')
+        }, 1000)
+      })
+    }
+
+    cy.then(() => {
+      // return a promise to cy.then() that
+      // is awaited until it resolves
+      // @ts-ignore TS7006
+      return waitOneSecond().then((str) => {
+        expect(str).to.eq('foo')
+        expect(waited).to.be.true
+      })
+    })
+  })
+})

client/cypress/integration/2-advanced-examples/viewport.spec.js

@@ -0,0 +1,59 @@
+/// <reference types="cypress" />
+
+context('Viewport', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/viewport')
+  })
+
+  it('cy.viewport() - set the viewport size and dimension', () => {
+    // https://on.cypress.io/viewport
+
+    cy.get('#navbar').should('be.visible')
+    cy.viewport(320, 480)
+
+    // the navbar should have collapse since our screen is smaller
+    cy.get('#navbar').should('not.be.visible')
+    cy.get('.navbar-toggle').should('be.visible').click()
+    cy.get('.nav').find('a').should('be.visible')
+
+    // lets see what our app looks like on a super large screen
+    cy.viewport(2999, 2999)
+
+    // cy.viewport() accepts a set of preset sizes
+    // to easily set the screen to a device's width and height
+
+    // We added a cy.wait() between each viewport change so you can see
+    // the change otherwise it is a little too fast to see :)
+
+    cy.viewport('macbook-15')
+    cy.wait(200)
+    cy.viewport('macbook-13')
+    cy.wait(200)
+    cy.viewport('macbook-11')
+    cy.wait(200)
+    cy.viewport('ipad-2')
+    cy.wait(200)
+    cy.viewport('ipad-mini')
+    cy.wait(200)
+    cy.viewport('iphone-6+')
+    cy.wait(200)
+    cy.viewport('iphone-6')
+    cy.wait(200)
+    cy.viewport('iphone-5')
+    cy.wait(200)
+    cy.viewport('iphone-4')
+    cy.wait(200)
+    cy.viewport('iphone-3')
+    cy.wait(200)
+
+    // cy.viewport() accepts an orientation for all presets
+    // the default orientation is 'portrait'
+    cy.viewport('ipad-2', 'portrait')
+    cy.wait(200)
+    cy.viewport('iphone-4', 'landscape')
+    cy.wait(200)
+
+    // The viewport will be reset back to the default dimensions
+    // in between tests (the  default can be set in cypress.json)
+  })
+})

client/cypress/integration/2-advanced-examples/waiting.spec.js

@@ -0,0 +1,31 @@
+/// <reference types="cypress" />
+
+context('Waiting', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/waiting')
+  })
+  // BE CAREFUL of adding unnecessary wait times.
+  // https://on.cypress.io/best-practices#Unnecessary-Waiting
+
+  // https://on.cypress.io/wait
+  it('cy.wait() - wait for a specific amount of time', () => {
+    cy.get('.wait-input1').type('Wait 1000ms after typing')
+    cy.wait(1000)
+    cy.get('.wait-input2').type('Wait 1000ms after typing')
+    cy.wait(1000)
+    cy.get('.wait-input3').type('Wait 1000ms after typing')
+    cy.wait(1000)
+  })
+
+  it('cy.wait() - wait for a specific route', () => {
+    // Listen to GET to comments/1
+    cy.intercept('GET', '**/comments/*').as('getComment')
+
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get('.network-btn').click()
+
+    // wait for GET comments/1
+    cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+  })
+})

client/cypress/integration/2-advanced-examples/window.spec.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+context('Window', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/window')
+  })
+
+  it('cy.window() - get the global window object', () => {
+    // https://on.cypress.io/window
+    cy.window().should('have.property', 'top')
+  })
+
+  it('cy.document() - get the document object', () => {
+    // https://on.cypress.io/document
+    cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
+  })
+
+  it('cy.title() - get the title', () => {
+    // https://on.cypress.io/title
+    cy.title().should('include', 'Kitchen Sink')
+  })
+})

client/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

client/cypress/support/commands.js

@@ -24,104 +24,4 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
-Cypress.Commands.add("goToSignInPage", () => {
-  cy.visit("/");
-  cy.contains("Sign In").click();
-});
-
-Cypress.Commands.add("login", (username, password) => {
-  cy.goToSignInPage();
-
-  cy.get('[data-cy="username"]').type(username);
-  cy.get('[data-cy="password"]').type(password);
-  cy.get('[data-cy="sign-in-button"]', { timeout: 2000 }).click();
-});
-
-Cypress.Commands.add("passwordReset", (email) => {
-  cy.goToSignInPage();
-  cy.get('[data-cy="reset-password"]').click();
-  cy.get('[data-cy="reset-password-email-input"]').type(email);
-  cy.get('[data-cy="reset-password-button"]').click();
-});
-
-Cypress.on("uncaught:exception", (err, runnable) => {
-  // returning false here prevents Cypress from
-  // failing the test
-  return false;
-});
-
-Cypress.Commands.add("antdSelect", (selector, filter) => {
-  cy.get(`.ant-select-${selector} > .ant-select-selector`).click();
-  cy.get(`.ant-select-${selector} .ant-select-selection-search input`)
-    .invoke("attr", "id")
-    .then((selElm) => {
-      const dropDownSelector = `#${selElm}_list`;
-
-      if (filter) {
-        cy.get(dropDownSelector)
-          .next()
-          .find(".ant-select-item-option-content")
-          .not(`:contains("${filter}")`)
-          .first()
-          .click({ force: true });
-      } else {
-        cy.get(dropDownSelector)
-          .next()
-          .find(".ant-select-item-option-content")
-          .first()
-          .click({ force: true });
-      }
-    });
-});
-
-Cypress.Commands.add("antdSelectValue", (selector, filter) => {
-  cy.get(`.ant-select-${selector} > .ant-select-selector`).click();
-  cy.get(`.ant-select-${selector} .ant-select-selection-search input`)
-    .invoke("attr", "id")
-    .then((selElm) => {
-      const dropDownSelector = `#${selElm}_list`;
-
-      cy.get(dropDownSelector)
-        .next()
-        .find(".ant-select-item-option-content")
-        .contains(filter)
-        .first()
-        .click({ force: true });
-    });
-});
-
-Cypress.Commands.add(
-  "insertAvailableJob",
-  ({ bodyshopid, job, job_est_data, token }) => {
-    const query = `mutation INSERT_AVAILABLE_JOB($job: available_jobs_insert_input!) {
-      insert_available_jobs_one(object: $job) {
-        id
-      }
-    }`;
-
-    cy.request({
-      url: "http://localhost:4000/test/query",
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: token,
-      },
-      body: {
-        query,
-        job: {
-          est_data: job_est_data,
-          uploaded_by: Cypress.env("uploaded_by_email"),
-          cieca_id: job.ciecaid,
-          bodyshopid,
-          clm_amt: job.clm_total,
-          clm_no: job.clm_no,
-          ins_co_nm: job.ins_co_nm,
-          ownr_name: `${job.owner.data.ownr_fn} ${job.owner.data.ownr_ln}`,
-          vehicle_info: `${job.v_model_yr} ${job.v_make_desc} ${job.v_model_desc}`,
-        },
-      },
-    })
-      .its("body.insert_available_jobs_one")
-      .should("have.property", "id");
-  }
-);
+import "@testing-library/cypress/add-commands";

client/cypress/support/index.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/e2e.js is processed and
+// This example support/index.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./commands";
+import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

client/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "../node_modules",
+    "types": ["cypress"]
+  },
+  "include": ["**/*.*"]
+}

client/package.json

@@ -7,7 +7,7 @@
     "@apollo/client": "^3.7.9",
     "@asseinfo/react-kanban": "^2.2.0",
     "@craco/craco": "^7.0.0",
-    "@fingerprintjs/fingerprintjs": "^3.3.3",
+    "@fingerprintjs/fingerprintjs": "^3.4.2",
     "@jsreport/browser-client": "^3.1.0",
     "@sentry/react": "^7.40.0",
     "@sentry/tracing": "^7.40.0",
@@ -70,7 +70,6 @@
     "socket.io-client": "^4.6.1",
     "styled-components": "^5.3.6",
     "subscriptions-transport-ws": "^0.11.0",
-    "uniqid": "^5.4.0",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.5.3",
     "workbox-broadcast-update": "^6.5.3",
@@ -90,8 +89,8 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "craco start",
     "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
-    "build:test": "env-cmd -f .env.test yarn run build",
-    "build-deploy:test": "yarn run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
+    "build:test": "env-cmd -f .env.test npm run build",
+    "build-deploy:test": "npm run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
     "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
     "test": "cypress open",
     "eject": "react-scripts eject",
@@ -122,7 +121,7 @@
   "devDependencies": {
     "@sentry/webpack-plugin": "^1.20.0",
     "@testing-library/cypress": "^8.0.3",
-    "cypress": "^12.13.0",
+    "cypress": "^10.3.1",
     "eslint-plugin-cypress": "^2.12.1",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",

client/src/App/App.styles.scss

@@ -145,7 +145,11 @@
 
 //Update row highlighting on production board.
 .ant-table-tbody > tr.ant-table-row:hover > td {
-  background: #eaeaea !important;
+  background: #e7f3ff !important;
+}
+
+.ant-table-tbody > tr.ant-table-row-selected > td {
+  background: #e6f7ff !important;
 }
 
 .job-line-manual {

client/src/components/_test/paymentMethod.jsx

@@ -1,49 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { TemplateList } from "../../utils/TemplateConstants";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
-});
-
-function Test({ bodyshop, setEmailOptions }) {
-  return (
-    <div>
-      <button
-        onClick={() => {
-          setEmailOptions({
-            messageOptions: {
-              to: ["patrickwf@gmail.com"],
-              replyTo: bodyshop.email,
-            },
-            template: {
-              name: TemplateList().parts_order.key,
-              variables: {
-                id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
-              },
-            },
-          });
-        }}
-      >
-        send email
-      </button>
-      <button
-        onClick={() => {
-          logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
-        }}
-      >
-        Log an ImEX Event.
-      </button>
-    </div>
-  );
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Test);

client/src/components/_test/payment_response.json

@@ -0,0 +1,63 @@
+{
+  "status": 24201299,
+  "custid": 19607899,
+  "paymentid": 24201299,
+  "response": "A",
+  "authcode": "498680",
+  "declinereason": "Approved",
+  "fee": 0,
+  "invoice": "",
+  "account": "john",
+  "amount": 1000,
+  "amountincludesfee": false,
+  "total": 1000,
+  "paymenttype": "C",
+  "methodhint": "VI ***1111",
+  "cardbrand": "Visa",
+  "cardnumdisplay": "***1111",
+  "receiptelements": {
+    "authcode": "498680",
+    "cust_srv_ph_num": "1-555-555-5555",
+    "rcpt_pg_ftr_txt": "Thank You\nPlease Come Again",
+    "rcpt_currency": "USD",
+    "responsecode": "A",
+    "rcpt_pay_mthd": "Visa",
+    "transid": "C00 915799",
+    "merch_disp_nm": "CP Devel Test",
+    "rcpt_input_mthd": "Keyed",
+    "rcpt_pg_hdr_txt": "Welcome!",
+    "rcpt_tran_time": "Thursday February 23 2023, 11:25:36 pm +08",
+    "rcpt_trans_type": "Normal Transaction (Sale)",
+    "message": "Approved",
+    "rcpt_dba_addr": "1234 Storefront Ave\nSome City, UT 84111",
+    "avsdata": "N",
+    "receiptrequirements": "S",
+    "rcpt_cardnum": "************1111",
+    "cv2result": "M",
+    "rfnd_policy_txt": "<b>No Refunds</b>\nStore Credit Only",
+    "labels": {
+      "tranref": "REF#",
+      "tid": "TID",
+      "validationcode": "ValCode",
+      "emvapplicationid": "AID",
+      "emvatc": "ATC",
+      "rcpt_pay_mthd": "Pay Method",
+      "transid": "TransID",
+      "rcpt_input_mthd": "IMode",
+      "emvtsi": "TSI",
+      "emvac": "AC",
+      "rcpt_trans_type": "TranType",
+      "emvapplicationname": "PApp",
+      "visarewards": "RewardsProg"
+    }
+  },
+  "receipttoken": "H4sIAAAAAAAAACXMTQuCMBgA4P/ynh3tw_3dBI/ipQ8NOtRN53QiblpBRfTfCzo/8LwhxGAdZCCwFYoJJFQjI2kvHdGu74lVkgmrWyWNhASW5jW7cB87yHjKKePGJODnxrrnMl7dDTKmEJlSOqV/_N30XPpyj2Eddq57_KKZ8FLzmh_G1VQnVfhjiXGK1XYTc/h8AVOkf4qUAAAA",
+  "call": "card_payment",
+  "nonce": "488b5568-b5c1-4f38-8b2f-3b050f3abb11P",
+  "hmac": "JyPAJ9Yx0SlYBTtqns1OxAFRt+xF3l2UiLPO5zTDRBE=",
+  "paymentreferenceid": "C19607899P24201299",
+  "cardnum": "...1111",
+  "email": "",
+  "nameOnCard": "John Allen",
+  "cardType": "visa"
+}

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

@@ -1,9 +0,0 @@
-import React from "react";
-import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-export default function Test() {
-  return (
-    <div>
-      <QboAuthorizeComponent />
-    </div>
-  );
-}

client/src/components/_test/test.page.jsx

@@ -0,0 +1,31 @@
+import { Button } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setModalContext } from "../../redux/modals/modals.actions";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setRefundPaymentContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "refund_payment" })),
+});
+
+function Test({ setRefundPaymentContext, refundPaymentModal }) {
+  console.log("refundPaymentModal", refundPaymentModal);
+  return (
+    <div>
+      <Button
+        onClick={() =>
+          setRefundPaymentContext({
+            context: {},
+          })
+        }
+      >
+        Open Modal
+      </Button>
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Test);

client/src/components/bill-cm-returns-table/bill-cm-returns-table.component.jsx

@@ -117,7 +117,7 @@ export default function BillCmdReturnsTableComponent({
                               name={[field.name, "cm_received"]}
                               valuePropName="checked"
                             >
-                              <Checkbox data-cy="mark-as-received-checkbox" />
+                              <Checkbox />
                             </Form.Item>
                           </td>
                         </tr>

client/src/components/bill-detail-edit/bill-detail-edit-component.jsx

@@ -10,7 +10,7 @@ import { createStructuredSelector } from "reselect";
 import {
   DELETE_BILL_LINE,
   INSERT_NEW_BILL_LINES,
-  UPDATE_BILL_LINE,
+  UPDATE_BILL_LINE
 } from "../../graphql/bill-lines.queries";
 import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -194,19 +194,12 @@ export function BillDetailEditcontainer({
                     {t("general.actions.save")}
                   </Button>
                 </Popconfirm>
-                <BillReeportButtonComponent
-                  data-cy="bill-mark-reexport-button"
-                  bill={data && data.bills_by_pk}
-                />
-                <BillMarkExportedButton
-                  data-cy="bill-mark-export-button"
-                  bill={data && data.bills_by_pk}
-                />
+                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
+                <BillMarkExportedButton bill={data && data.bills_by_pk} />
               </Space>
             }
           />
           <Form
-            data-cy="bill-edit-form"
             form={form}
             onFinish={handleFinish}
             initialValues={transformData(data)}

client/src/components/bill-detail-edit/bill-detail-edit-return.component.jsx

@@ -77,14 +77,11 @@ export function BillDetailEditReturn({
   return (
     <>
       <Modal
-        open={visible}
+        visible={visible}
         onCancel={() => setVisible(false)}
         destroyOnClose
         title={t("bills.actions.return")}
         onOk={() => form.submit()}
-        okButtonProps={{
-          "data-cy": "billline-return-items-ok-button",
-        }}
       >
         <Form
           initialValues={data && data.bills_by_pk}
@@ -99,7 +96,6 @@ export function BillDetailEditReturn({
                     <tr>
                       <td>
                         <Checkbox
-                          data-cy="billline-checkbox"
                           onChange={(e) => {
                             form.setFieldsValue({
                               billlines: form
@@ -154,7 +150,6 @@ export function BillDetailEditReturn({
                             //   label={t("joblines.fields.actual_price")}
                             key={`${index}actual_price`}
                             name={[field.name, "actual_price"]}
-                            data-cy="billline-actual-price"
                           >
                             <ReadOnlyFormItemComponent type="currency" />
                           </Form.Item>
@@ -178,7 +173,6 @@ export function BillDetailEditReturn({
         </Form>
       </Modal>
       <Button
-        data-cy="return-items-button"
         disabled={data.bills_by_pk.is_credit_memo || disabled}
         onClick={() => {
           setVisible(true);

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -1,18 +1,18 @@
 import { useApolloClient, useMutation } from "@apollo/client";
-import { Button, Checkbox, Form, Modal, notification, Space } from "antd";
+import { Button, Checkbox, Form, Modal, Space, notification } from "antd";
 import _ from "lodash";
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
+import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import {
   QUERY_JOB_LBR_ADJUSTMENTS,
   UPDATE_JOB,
 } from "../../graphql/jobs.queries";
 import { MUTATION_MARK_RETURN_RECEIVED } from "../../graphql/parts-orders.queries";
-import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
@@ -20,15 +20,15 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import confirmDialog from "../../utils/asyncConfirm";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import BillFormContainer from "../bill-form/bill-form.container";
-import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
-import { handleUpload } from "../documents-upload/documents-upload.utility";
-import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
-import useLocalStorage from "../../utils/useLocalStorage";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import confirmDialog from "../../utils/asyncConfirm";
+import useLocalStorage from "../../utils/useLocalStorage";
+import BillFormContainer from "../bill-form/bill-form.container";
+import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
+import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
+import { handleUpload } from "../documents-upload/documents-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -37,8 +37,8 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("billEnter")),
-  insertAuditTrail: ({ jobid, operation }) =>
-    dispatch(insertAuditTrail({ jobid, operation })),
+  insertAuditTrail: ({ jobid, billid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, billid, operation })),
 });
 
 const Templates = TemplateList("job_special");
@@ -126,13 +126,24 @@ function BillEnterModalContainer({
                     deductedfromlbr: deductedfromlbr,
                     lbr_adjustment,
                     joblineid: i.joblineid === "noline" ? null : i.joblineid,
+                    applicable_taxes: {
+                      federal:
+                        (i.applicable_taxes && i.applicable_taxes.federal) ||
+                        false,
+                      state:
+                        (i.applicable_taxes && i.applicable_taxes.state) ||
+                        false,
+                      local:
+                        (i.applicable_taxes && i.applicable_taxes.local) ||
+                        false,
+                    },
                   };
                 }),
             },
           },
         ],
       },
-      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"],
+      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID", "GET_JOB_BY_PK"],
     });
 
     const adjKeys = Object.keys(adjustmentsToInsert);
@@ -305,7 +316,9 @@ function BillEnterModalContainer({
     insertAuditTrail({
       jobid: values.jobid,
       billid: billId,
-      operation: AuditTrailMapping.billposted(remainingValues.invoice_number),
+      operation: AuditTrailMapping.billposted(
+        r1.data.insert_bills.returning[0].invoice_number
+      ),
     });
 
     if (enterAgain) {
@@ -362,16 +375,11 @@ function BillEnterModalContainer({
             {t("bills.labels.generatepartslabel")}
           </Checkbox>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button
-            data-cy="bill-form-save-button"
-            loading={loading}
-            onClick={() => form.submit()}
-          >
+          <Button loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}
           </Button>
           {billEnterModal.context && billEnterModal.context.id ? null : (
             <Button
-              data-cy="bill-form-savenew-button"
               type="primary"
               loading={loading}
               onClick={() => {

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

@@ -1,6 +1,6 @@
 import Icon, { UploadOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import { MdOpenInNew } from "react-icons/md";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import {
   Alert,
   Divider,
@@ -12,14 +12,17 @@ import {
   Switch,
   Upload,
 } from "antd";
+import moment from "moment";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { MdOpenInNew } from "react-icons/md";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
+import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
@@ -28,8 +31,6 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
 import { CalculateBillTotal } from "./bill-form.totals.utility";
-import { useTreatments } from "@splitsoftware/splitio-react";
-import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -49,6 +50,7 @@ export function BillFormComponent({
   job,
   loadOutstandingReturns,
   loadInventory,
+  preferredMake,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -58,6 +60,11 @@ export function BillFormComponent({
     {},
     bodyshop.imexshopid
   );
+  const { ClosingPeriod } = useTreatments(
+    ["ClosingPeriod"],
+    {},
+    bodyshop.imexshopid
+  );
 
   const handleVendorSelect = (props, opt) => {
     setDiscount(opt.discount);
@@ -177,9 +184,9 @@ export function BillFormComponent({
           ]}
         >
           <VendorSearchSelect
-            className="ant-select-bill-vendor"
             disabled={disabled}
             options={vendorAutoCompleteOptions}
+            preferredMake={preferredMake}
             onSelect={handleVendorSelect}
           />
         </Form.Item>
@@ -250,10 +257,7 @@ export function BillFormComponent({
             }),
           ]}
         >
-          <Input
-            data-cy="bill-form-invoice"
-            disabled={disabled || disableInvNumber}
-          />
+          <Input disabled={disabled || disableInvNumber} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.date")}
@@ -263,9 +267,40 @@ export function BillFormComponent({
               required: true,
               //message: t("general.validation.required"),
             },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (
+                  ClosingPeriod.treatment === "on" &&
+                  bodyshop.accountingconfig.ClosingPeriod
+                ) {
+                  if (
+                    moment(value)
+                      .startOf("day")
+                      .isSameOrAfter(
+                        moment(
+                          bodyshop.accountingconfig.ClosingPeriod[0]
+                        ).startOf("day")
+                      ) &&
+                    moment(value)
+                      .startOf("day")
+                      .isSameOrBefore(
+                        moment(
+                          bodyshop.accountingconfig.ClosingPeriod[1]
+                        ).endOf("day")
+                      )
+                  ) {
+                    return Promise.resolve();
+                  } else {
+                    return Promise.reject(t("bills.validation.closingperiod"));
+                  }
+                } else {
+                  return Promise.resolve();
+                }
+              },
+            }),
           ]}
         >
-          <FormDatePicker id="bill-form-date" disabled={disabled} />
+          <FormDatePicker disabled={disabled} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.is_credit_memo")}
@@ -304,10 +339,9 @@ export function BillFormComponent({
             }),
           ]}
         >
-          <Switch data-cy="is-credit-memo-switch" />
+          <Switch />
         </Form.Item>
         <Form.Item
-          data-cy="bill-form-bill-total"
           label={t("bills.fields.total")}
           name="total"
           rules={[
@@ -321,12 +355,7 @@ export function BillFormComponent({
         </Form.Item>
         {!billEdit && (
           <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-            <Select
-              data-cy="bill-form-parts-bin"
-              style={{ width: "10rem" }}
-              disabled={disabled}
-              allowClear
-            >
+            <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
               {bodyshop.md_parts_locations.map((loc, idx) => (
                 <Select.Option key={idx} value={loc}>
                   {loc}
@@ -385,29 +414,17 @@ export function BillFormComponent({
                     />
                     <Statistic
                       title={t("bills.labels.federal_tax")}
-                      valueRender={() => (
-                        <span data-cy="bill-form-tax">
-                          {totals.federalTax.toFormat()}
-                        </span>
-                      )}
+                      value={totals.federalTax.toFormat()}
                       precision={2}
                     />
                     <Statistic
                       title={t("bills.labels.state_tax")}
-                      valueRender={() => (
-                        <span data-cy="bill-form-tax">
-                          {totals.stateTax.toFormat()}
-                        </span>
-                      )}
+                      value={totals.stateTax.toFormat()}
                       precision={2}
                     />
                     <Statistic
                       title={t("bills.labels.local_tax")}
-                      valueRender={() => (
-                        <span data-cy="bill-form-tax">
-                          {totals.localTax.toFormat()}
-                        </span>
-                      )}
+                      value={totals.localTax.toFormat()}
                       precision={2}
                     />
                     <Statistic
@@ -428,12 +445,7 @@ export function BillFormComponent({
                             ? "green"
                             : "red",
                       }}
-                      // value={totals.discrepancy.toFormat()}
-                      valueRender={() => (
-                        <span id="bill-form-discrepancy">
-                          {totals.discrepancy.toFormat()}
-                        </span>
-                      )}
+                      value={totals.discrepancy.toFormat()}
                       precision={2}
                     />
                   </Space>
@@ -483,20 +495,19 @@ export function BillFormComponent({
         }}
       >
         <Upload.Dragger
-          id="bill-image-upload"
           multiple={true}
           name="logo"
           beforeUpload={() => false}
           listType="picture"
         >
-          <div>
+          <>
             <p className="ant-upload-drag-icon">
               <UploadOutlined />
             </p>
             <p className="ant-upload-text">
               Click or drag files to this area to upload.
             </p>
-          </div>
+          </>
         </Upload.Dragger>
       </Form.Item>
     </div>

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

@@ -1,16 +1,16 @@
 import { useLazyQuery, useQuery } from "@apollo/client";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";
 import { GET_JOB_LINES_TO_ENTER_BILL } from "../../graphql/jobs-lines.queries";
+import { QUERY_UNRECEIVED_LINES } from "../../graphql/parts-orders.queries";
 import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import BillFormComponent from "./bill-form.component";
 import BillCmdReturnsTableComponent from "../bill-cm-returns-table/bill-cm-returns-table.component";
-import { QUERY_UNRECEIVED_LINES } from "../../graphql/parts-orders.queries";
 import BillInventoryTable from "../bill-inventory-table/bill-inventory-table.component";
-import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";
-import { useTreatments } from "@splitsoftware/splitio-react";
+import BillFormComponent from "./bill-form.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -59,6 +59,7 @@ export function BillFormContainer({
         disableInvNumber={disableInvNumber}
         loadOutstandingReturns={loadOutstandingReturns}
         loadInventory={loadInventory}
+        preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}
       />
       {!billEdit && (
         <BillCmdReturnsTableComponent

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

@@ -1,15 +1,14 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
-  Button,
-  Form,
+  Button, Form,
   Input,
   InputNumber,
   Select,
   Space,
   Switch,
   Table,
-  Tooltip,
+  Tooltip
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -80,7 +79,6 @@ export function BillEnterModalLinesComponent({
         ),
         formInput: (record, index) => (
           <BillLineSearchSelect
-            className="ant-select-bill-line"
             disabled={disabled}
             options={lineData}
             style={{ width: "100%", minWidth: "10rem" }}
@@ -134,9 +132,7 @@ export function BillEnterModalLinesComponent({
             ],
           };
         },
-        formInput: (record, index) => (
-          <Input data-cy="bill-line-line-desc" disabled={disabled} />
-        ),
+        formInput: (record, index) => <Input disabled={disabled} />,
       },
       {
         title: t("billlines.fields.quantity"),
@@ -198,7 +194,6 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => (
           <CurrencyInput
-            data-cy="bill-line-actual-price"
             min={0}
             disabled={disabled}
             onBlur={(e) => {
@@ -246,7 +241,6 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => (
           <CurrencyInput
-            data-cy="bill-line-actual-cost"
             min={0}
             disabled={disabled}
             controls={false}
@@ -319,12 +313,7 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <Select
-            showSearch
-            style={{ minWidth: "3rem" }}
-            disabled={disabled}
-            className="ant-select-bill-cost-center"
-          >
+          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
             {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
               ? CiecaSelect(true, false)
               : responsibilityCenters.costs.map((item) => (
@@ -583,7 +572,6 @@ export function BillEnterModalLinesComponent({
         return (
           <>
             <Table
-              data-cy="bill-line-table"
               components={{
                 body: {
                   cell: EditableCell,
@@ -599,7 +587,6 @@ export function BillEnterModalLinesComponent({
             />
             <Form.Item>
               <Button
-                data-cy="bill-line-add-button"
                 disabled={disabled}
                 onClick={() => {
                   add();

client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx

@@ -32,7 +32,6 @@ export function BillMarkExportedButton({
   bodyshop,
   authLevel,
   bill,
-  ...props
 }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
@@ -93,12 +92,7 @@ export function BillMarkExportedButton({
 
   if (hasAccess)
     return (
-      <Button
-        loading={loading}
-        disabled={bill.exported}
-        onClick={handleUpdate}
-        {...props}
-      >
+      <Button loading={loading} disabled={bill.exported} onClick={handleUpdate}>
         {t("bills.labels.markexported")}
       </Button>
     );

client/src/components/bill-reexport-button/bill-reexport-button.component.jsx

@@ -24,12 +24,7 @@ export default connect(
   mapDispatchToProps
 )(BillMarkForReexportButton);
 
-export function BillMarkForReexportButton({
-  bodyshop,
-  authLevel,
-  bill,
-  ...props
-}) {
+export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
 
@@ -78,7 +73,6 @@ export function BillMarkForReexportButton({
         loading={loading}
         disabled={!bill.exported}
         onClick={handleUpdate}
-        {...props}
       >
         {t("bills.labels.markforreexport")}
       </Button>

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

@@ -54,10 +54,7 @@ export function BillsListTableComponent({
   const recordActions = (record, showView = false) => (
     <Space wrap>
       {showView && (
-        <Button
-          onClick={() => handleOnRowClick(record)}
-          data-cy="edit-bill-button"
-        >
+        <Button onClick={() => handleOnRowClick(record)}>
           <EditFilled />
         </Button>
       )}
@@ -129,12 +126,7 @@ export function BillsListTableComponent({
       sortOrder:
         state.sortedInfo.columnKey === "is_credit_memo" &&
         state.sortedInfo.order,
-      render: (text, record) => (
-        <Checkbox
-          data-cy="credit-memo-checkbox"
-          checked={record.is_credit_memo}
-        />
-      ),
+      render: (text, record) => <Checkbox checked={record.is_credit_memo} />,
     },
     {
       title: t("bills.fields.exported"),
@@ -143,9 +135,7 @@ export function BillsListTableComponent({
       sorter: (a, b) => a.exported - b.exported,
       sortOrder:
         state.sortedInfo.columnKey === "exported" && state.sortedInfo.order,
-      render: (text, record) => (
-        <Checkbox data-cy="bill-exported-checkbox" checked={record.exported} />
-      ),
+      render: (text, record) => <Checkbox checked={record.exported} />,
     },
     {
       title: t("general.labels.actions"),
@@ -188,7 +178,6 @@ export function BillsListTableComponent({
           {job && job.converted ? (
             <>
               <Button
-                data-cy="bills-post-button"
                 onClick={() => {
                   setBillEnterContext({
                     actions: { refetch: billsQuery.refetch },
@@ -228,7 +217,6 @@ export function BillsListTableComponent({
       }
     >
       <Table
-        data-cy="bills-table"
         loading={billsQuery.loading}
         scroll={{
           x: true, // y: "50rem"

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

@@ -0,0 +1,374 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { useLazyQuery, useMutation } from "@apollo/client";
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  Input,
+  Row,
+  Space,
+  Spin,
+  Statistic,
+  notification,
+} from "antd";
+import axios from "axios";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  INSERT_PAYMENT_RESPONSE,
+  QUERY_RO_AND_OWNER_BY_JOB_PKS,
+} from "../../graphql/payment_response.queries";
+import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectCardPayment } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
+import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
+
+const mapStateToProps = createStructuredSelector({
+  cardPaymentModal: selectCardPayment,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
+});
+
+const CardPaymentModalComponent = ({
+  bodyshop,
+  cardPaymentModal,
+  toggleModalVisible,
+  insertAuditTrail,
+}) => {
+  const { context } = cardPaymentModal;
+
+  const [form] = Form.useForm();
+
+  const [loading, setLoading] = useState(false);
+  const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
+  const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
+  const { t } = useTranslation();
+
+  const [, { data, refetch, queryLoading }] = useLazyQuery(
+    QUERY_RO_AND_OWNER_BY_JOB_PKS,
+    {
+      variables: { jobids: [context.jobid] },
+      skip: true,
+    }
+  );
+
+  console.log("🚀 ~ file: card-payment-modal.component..jsx:61 ~ data:", data);
+  //Initialize the intellipay window.
+  const SetIntellipayCallbackFunctions = () => {
+    console.log("*** Set IntelliPay callback functions.");
+    window.intellipay.runOnClose(() => {
+      //window.intellipay.initialize();
+    });
+
+    window.intellipay.runOnApproval(async function (response) {
+      console.warn("*** Running On Approval Script ***");
+      form.setFieldValue("paymentResponse", response);
+      form.submit();
+    });
+
+    window.intellipay.runOnNonApproval(async function (response) {
+      // Mutate unsuccessful payment
+
+      const { payments } = form.getFieldsValue();
+
+      await insertPaymentResponse({
+        variables: {
+          paymentResponse: payments.map((payment) => ({
+            amount: payment.amount,
+            bodyshopid: bodyshop.id,
+            jobid: payment.jobid,
+            declinereason: response.declinereason,
+            ext_paymentid: response.paymentid.toString(),
+            successful: false,
+            response,
+          })),
+        },
+      });
+
+      payments.forEach((payment) =>
+        insertAuditTrail({
+          jobid: payment.jobid,
+          operation: AuditTrailMapping.failedpayment(),
+        })
+      );
+    });
+  };
+
+  const handleFinish = async (values) => {
+    try {
+      await insertPayment({
+        variables: {
+          paymentInput: values.payments.map((payment) => ({
+            amount: payment.amount,
+            transactionid: (values.paymentResponse.paymentid || "").toString(),
+            payer: t("payments.labels.customer"),
+            type: values.paymentResponse.cardbrand,
+            jobid: payment.jobid,
+            date: moment(Date.now()),
+            payment_responses: {
+              data: [
+                {
+                  amount: payment.amount,
+                  bodyshopid: bodyshop.id,
+
+                  jobid: payment.jobid,
+                  declinereason: values.paymentResponse.declinereason,
+                  ext_paymentid: values.paymentResponse.paymentid.toString(),
+                  successful: true,
+                  response: values.paymentResponse,
+                },
+              ],
+            },
+          })),
+        },
+        refetchQueries: ["GET_JOB_BY_PK"],
+      });
+      toggleModalVisible();
+    } catch (error) {
+      console.error(error);
+      notification.open({
+        type: "error",
+        message: t("payments.errors.inserting", { error: error.message }),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleIntelliPayCharge = async () => {
+    setLoading(true);
+
+    //Validate
+    try {
+      await form.validateFields();
+    } catch (error) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const response = await axios.post("/intellipay/lightbox_credentials", {
+        bodyshop,
+        refresh: !!window.intellipay,
+      });
+
+      if (window.intellipay) {
+        // eslint-disable-next-line no-eval
+        eval(response.data);
+        SetIntellipayCallbackFunctions();
+        window.intellipay.autoOpen();
+      } else {
+        var rg = document.createRange();
+        let node = rg.createContextualFragment(response.data);
+        document.documentElement.appendChild(node);
+        SetIntellipayCallbackFunctions();
+        window.intellipay.isAutoOpen = true;
+        window.intellipay.initialize();
+      }
+    } catch (error) {
+      notification.open({
+        type: "error",
+        message: t("job_payments.notifications.error.openingip"),
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card title="Card Payment">
+      <Spin spinning={loading}>
+        <Form
+          onFinish={handleFinish}
+          form={form}
+          layout="vertical"
+          initialValues={{
+            payments: context.jobid ? [{ jobid: context.jobid }] : [],
+          }}
+        >
+          <Form.List name={["payments"]}>
+            {(fields, { add, remove, move }) => {
+              return (
+                <div>
+                  {fields.map((field, index) => (
+                    <Form.Item key={field.key}>
+                      <Row gutter={[16, 16]}>
+                        <Col span={16}>
+                          <Form.Item
+                            key={`${index}jobid`}
+                            label={t("jobs.fields.ro_number")}
+                            name={[field.name, "jobid"]}
+                            rules={[
+                              {
+                                required: true,
+                                //message: t("general.validation.required"),
+                              },
+                            ]}
+                          >
+                            <JobSearchSelectComponent
+                              notExported={false}
+                              clm_no
+                            />
+                          </Form.Item>
+                        </Col>
+                        <Col span={6}>
+                          <Form.Item
+                            key={`${index}amount`}
+                            label={t("payments.fields.amount")}
+                            name={[field.name, "amount"]}
+                            rules={[
+                              {
+                                required: true,
+                                //message: t("general.validation.required"),
+                              },
+                            ]}
+                          >
+                            <CurrencyFormItemComponent />
+                          </Form.Item>
+                        </Col>
+                        <Col span={2}>
+                          <DeleteFilled
+                            style={{ margin: "1rem" }}
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                        </Col>
+                      </Row>
+                    </Form.Item>
+                  ))}
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() => {
+                        add();
+                      }}
+                      style={{ width: "100%" }}
+                    >
+                      {t("general.actions.add")}
+                    </Button>
+                  </Form.Item>
+                </div>
+              );
+            }}
+          </Form.List>
+
+          <Form.Item
+            shouldUpdate={(prevValues, curValues) =>
+              prevValues.payments?.map((p) => p?.jobid).join() !==
+              curValues.payments?.map((p) => p?.jobid).join()
+            }
+          >
+            {() => {
+              console.log("Updating the owner info section.");
+              //If all of the job ids have been fileld in, then query and update the IP field.
+              const { payments } = form.getFieldsValue();
+              if (
+                payments?.length > 0 &&
+                payments?.filter((p) => p?.jobid).length === payments?.length
+              ) {
+                console.log("**Calling refetch.");
+                refetch({ jobids: payments.map((p) => p.jobid) });
+              }
+              console.log(
+                "Acc info",
+                data,
+                payments && data && data.jobs.length > 0
+                  ? data.jobs.map((j) => j.ro_number).join(", ")
+                  : null
+              );
+              return (
+                <>
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="account"
+                    //type="hidden"
+                    value={
+                      payments && data && data.jobs.length > 0
+                        ? data.jobs.map((j) => j.ro_number).join(", ")
+                        : null
+                    }
+                    hidden
+                  />
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="email"
+                    // type="hidden"
+                    value={
+                      payments && data && data.jobs.length > 0
+                        ? data.jobs.filter((j) => j.ownr_ea)[0]?.ownr_ea
+                        : null
+                    }
+                    hidden
+                  />
+                </>
+              );
+            }}
+          </Form.Item>
+          <Form.Item
+            shouldUpdate={(prevValues, curValues) =>
+              prevValues.payments?.map((p) => p?.amount).join() !==
+              curValues.payments?.map((p) => p?.amount).join()
+            }
+          >
+            {() => {
+              const { payments } = form.getFieldsValue();
+              const totalAmountToCharge = payments?.reduce((acc, val) => {
+                return acc + (val?.amount || 0);
+              }, 0);
+
+              return (
+                <Space style={{ float: "right" }}>
+                  <Statistic
+                    title="Amount To Charge"
+                    value={totalAmountToCharge}
+                    precision={2}
+                  />
+                  <Input
+                    className="ipayfield"
+                    data-ipayname="amount"
+                    //type="hidden"
+                    value={totalAmountToCharge?.toFixed(2)}
+                    hidden
+                  />
+                  <Button
+                    type="primary"
+                    //  data-ipayname="submit"
+                    className="ipayfield"
+                    loading={queryLoading || loading}
+                    disabled={!(totalAmountToCharge > 0)}
+                    onClick={handleIntelliPayCharge}
+                  >
+                    {t("job_payments.buttons.proceedtopayment")}
+                  </Button>
+                </Space>
+              );
+            }}
+          </Form.Item>
+
+          {/* Lightbox payment response when it is completed */}
+          <Form.Item name="paymentResponse" hidden>
+            <Input type="hidden" />
+          </Form.Item>
+        </Form>
+      </Spin>
+    </Card>
+  );
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CardPaymentModalComponent);

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

@@ -0,0 +1,57 @@
+import { Button, Modal } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectCardPayment } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CardPaymentModalComponent from "./card-payment-modal.component.";
+
+const mapStateToProps = createStructuredSelector({
+  cardPaymentModal: selectCardPayment,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
+});
+
+function CardPaymentModalContainer({
+  cardPaymentModal,
+  toggleModalVisible,
+  bodyshop,
+}) {
+  const { visible } = cardPaymentModal;
+  const { t } = useTranslation();
+
+  const handleCancel = () => {
+    toggleModalVisible();
+  };
+
+  const handleOK = () => {
+    toggleModalVisible();
+  };
+
+  return (
+    <Modal
+      open={visible}
+      onOk={handleOK}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="back" onClick={handleCancel}>
+          {t("job_payments.buttons.goback")}
+        </Button>,
+      ]}
+      width="80%"
+      destroyOnClose
+    >
+      <CardPaymentModalComponent />
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CardPaymentModalContainer);

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

@@ -1,13 +1,18 @@
 import { Badge, List, Tag } from "antd";
-import React, { useEffect } from "react";
+import React from "react";
 import { connect } from "react-redux";
+import {
+  AutoSizer,
+  CellMeasurer,
+  CellMeasurerCache,
+  List as VirtualizedList,
+} from "react-virtualized";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import { List as VirtualizedList, AutoSizer } from "react-virtualized";
 
 import "./chat-conversation-list.styles.scss";
 
@@ -24,57 +29,66 @@ function ChatConversationListComponent({
   conversationList,
   selectedConversation,
   setSelectedConversation,
-  subscribeToMoreConversations,
   loadMoreConversations,
 }) {
-  useEffect(
-    () => subscribeToMoreConversations(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 60,
+  });
 
-  const rowRenderer = ({ index, key, style }) => {
+  const rowRenderer = ({ index, key, style, parent }) => {
     const item = conversationList[index];
 
     return (
-      <List.Item
+      <CellMeasurer
         key={key}
-        onClick={() => setSelectedConversation(item.id)}
-        className={`chat-list-item ${
-          item.id === selectedConversation
-            ? "chat-list-selected-conversation"
-            : null
-        }`}
-        style={style}
+        cache={cache}
+        parent={parent}
+        columnIndex={0}
+        rowIndex={index}
       >
-        <div sryle={{ display: "inline-block" }}>
-          {item.label && <div className="chat-name">{item.label}</div>}
-          {item.job_conversations.length > 0 ? (
-            <div className="chat-name">
-              {item.job_conversations.map((j, idx) => (
-                <div key={idx}>
-                  <OwnerNameDisplay ownerObject={j.job} />
-                </div>
-              ))}
-            </div>
-          ) : (
-            <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-          )}
-        </div>
-        <div sryle={{ display: "inline-block" }}>
-          <div>
-            {item.job_conversations.length > 0
-              ? item.job_conversations.map((j, idx) => (
-                  <Tag key={idx} className="ro-number-tag">
-                    {j.job.ro_number}
-                  </Tag>
-                ))
-              : null}
+        <List.Item
+          onClick={() => setSelectedConversation(item.id)}
+          className={`chat-list-item ${
+            item.id === selectedConversation
+              ? "chat-list-selected-conversation"
+              : null
+          }`}
+          style={style}
+        >
+          <div
+            style={{
+              display: "inline-block",
+            }}
+          >
+            {item.label && <div className="chat-name">{item.label}</div>}
+            {item.job_conversations.length > 0 ? (
+              <div className="chat-name">
+                {item.job_conversations.map((j, idx) => (
+                  <div key={idx}>
+                    <OwnerNameDisplay ownerObject={j.job} />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+            )}
           </div>
-          <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-        </div>
-        <Badge count={item.messages_aggregate.aggregate.count || 0} />
-      </List.Item>
+          <div style={{ display: "inline-block" }}>
+            <div>
+              {item.job_conversations.length > 0
+                ? item.job_conversations.map((j, idx) => (
+                    <Tag key={idx} className="ro-number-tag">
+                      {j.job.ro_number}
+                    </Tag>
+                  ))
+                : null}
+            </div>
+            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+          </div>
+          <Badge count={item.messages_aggregate.aggregate.count || 0} />
+        </List.Item>
+      </CellMeasurer>
     );
   };
 
@@ -86,7 +100,7 @@ function ChatConversationListComponent({
             height={height}
             width={width}
             rowCount={conversationList.length}
-            rowHeight={60}
+            rowHeight={cache.rowHeight}
             rowRenderer={rowRenderer}
             onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
               if (scrollTop + clientHeight === scrollHeight) {

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

@@ -8,15 +8,23 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  searchingForConversation: searchingForConversation,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
 });
 
-export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
+export function ChatOpenButton({
+  bodyshop,
+  searchingForConversation,
+  phone,
+  jobid,
+  openChatByPhone,
+}) {
   const { t } = useTranslation();
   if (!phone) return <></>;
 
@@ -29,7 +37,7 @@ export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
       onClick={(e) => {
         e.stopPropagation();
         const p = parsePhoneNumber(phone, "CA");
-
+        if (searchingForConversation) return; //This is to prevent finding the same thing twice.
         if (p && p.isValid()) {
           openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
         } else {

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

@@ -4,7 +4,7 @@ import {
   ShrinkOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
-import { useLazyQuery, useSubscription } from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client";
 import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,8 +12,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
   CONVERSATION_LIST_QUERY,
-  CONVERSATION_LIST_SUBSCRIPTION,
-  UNREAD_CONVERSATION_COUNT_SUBSCRIPTION,
+  UNREAD_CONVERSATION_COUNT,
 } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import {
@@ -42,19 +41,20 @@ export function ChatPopupComponent({
   const { t } = useTranslation();
   const [pollInterval, setpollInterval] = useState(0);
 
-  const { data: unreadData } = useSubscription(
-    UNREAD_CONVERSATION_COUNT_SUBSCRIPTION
-  );
-
-  const [
-    getConversations,
-    { loading, data, called, refetch, fetchMore, subscribeToMore },
-  ] = useLazyQuery(CONVERSATION_LIST_QUERY, {
+  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    skip: !chatVisible,
+    ...(pollInterval > 0 ? { pollInterval } : {}),
   });
 
+  const [getConversations, { loading, data, refetch, fetchMore }] =
+    useLazyQuery(CONVERSATION_LIST_QUERY, {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+      skip: !chatVisible,
+      ...(pollInterval > 0 ? { pollInterval } : {}),
+    });
+
   const fcmToken = sessionStorage.getItem("fcmtoken");
 
   useEffect(() => {
@@ -66,13 +66,13 @@ export function ChatPopupComponent({
   }, [fcmToken]);
 
   useEffect(() => {
-    if (called && chatVisible)
+    if (chatVisible)
       getConversations({
         variables: {
           offset: 0,
         },
       });
-  }, [chatVisible, called, getConversations]);
+  }, [chatVisible, getConversations]);
 
   const loadMoreConversations = useCallback(() => {
     if (data)
@@ -119,43 +119,6 @@ export function ChatPopupComponent({
                   <ChatConversationListComponent
                     conversationList={data ? data.conversations : []}
                     loadMoreConversations={loadMoreConversations}
-                    subscribeToMoreConversations={() =>
-                      subscribeToMore({
-                        document: CONVERSATION_LIST_SUBSCRIPTION,
-                        variables: { offset: 0 },
-                        updateQuery: (prev, { subscriptionData }) => {
-                          if (
-                            !subscriptionData.data ||
-                            subscriptionData.data.conversations.length === 0
-                          )
-                            return prev;
-
-                          let conversations = [...prev.conversations];
-                          const newConversations =
-                            subscriptionData.data.conversations;
-
-                          for (const conversation of newConversations) {
-                            const index = conversations.findIndex(
-                              (prevConversation) =>
-                                prevConversation.id === conversation.id
-                            );
-
-                            if (index !== -1) {
-                              conversations.splice(index, 1);
-                              conversations.unshift(conversation);
-
-                              continue;
-                            }
-
-                            conversations.unshift(conversation);
-                          }
-
-                          return Object.assign({}, prev, {
-                            conversations: conversations,
-                          });
-                        },
-                      })
-                    }
                   />
                 )}
               </Col>

client/src/components/config-form-components/checkbox/checkbox.component.jsx

@@ -16,7 +16,7 @@ export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
         },
       ]}
     >
-      <Checkbox data-cy="checklist-item-checkbox" disabled={readOnly} />
+      <Checkbox disabled={readOnly} />
     </Form.Item>
   );
 }

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

@@ -3,7 +3,7 @@ import FormTypes from "./config-form-types";
 
 export default function ConfirmFormComponents({ componentList, readOnly }) {
   return (
-    <div data-cy="config-form-components">
+    <div>
       {componentList.map((f, idx) => {
         const Comp = FormTypes[f.type];
 

client/src/components/config-form-components/slider/slider.component.jsx

@@ -4,18 +4,6 @@ import React from "react";
 export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
   const { name, label, required, min, max } = formItem;
 
-  const marks = {
-    [min]: {
-      label: <span style={{ height: 0 }}>&nbsp;</span>,
-    },
-    [max / 2]: {
-      label: <span style={{ height: 0 }}>&nbsp;</span>,
-    },
-    [max]: {
-      label: <span style={{ height: 0 }}>&nbsp;</span>,
-    },
-  };
-
   return (
     <Form.Item
       name={name}
@@ -27,13 +15,7 @@ export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
         },
       ]}
     >
-      <Slider
-        disabled={readOnly}
-        min={min || 0}
-        max={max || 10}
-        marks={marks}
-        style={{ marginBottom: 0, marginTop: 0 }}
-      />
+      <Slider disabled={readOnly} min={min || 0} max={max || 10} />
     </Form.Item>
   );
 }

client/src/components/contract-cars/contract-cars.component.jsx

@@ -59,6 +59,14 @@ export default function ContractsCarsComponent({
       sortOrder:
         state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
     },
+    {
+      title: t("courtesycars.fields.color"),
+      dataIndex: "color",
+      key: "color",
+      sorter: (a, b) => alphaSort(a.color, b.color),
+      sortOrder:
+        state.sortedInfo.columnKey === "color" && state.sortedInfo.order,
+    },
     {
       title: t("courtesycars.fields.plate"),
       dataIndex: "plate",
@@ -93,6 +101,9 @@ export default function ContractsCarsComponent({
             (cc.model || "")
               .toLowerCase()
               .includes(state.search.toLowerCase()) ||
+            (cc.color || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
             (cc.plate || "").toLowerCase().includes(state.search.toLowerCase())
         );
 

client/src/components/contract-jobs/contract-jobs.container.jsx

@@ -2,10 +2,10 @@ import { useQuery } from "@apollo/client";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import ContractJobsComponent from "./contract-jobs.component";
-import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -15,6 +15,7 @@ export function ContractJobsContainer({ selectedJobState, bodyshop }) {
   const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open"],
+      isConverted: true,
     },
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",

client/src/components/contracts-list/contracts-list.component.jsx

@@ -4,14 +4,14 @@ import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
+import { setModalContext } from "../../redux/modals/modals.actions";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import ContractsFindModalContainer from "../contracts-find-modal/contracts-find-modal.container";
-import { setModalContext } from "../../redux/modals/modals.actions";
 
+import moment from "moment";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import moment from "moment";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({

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

@@ -34,6 +34,18 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
 
       {/* <FormFieldsChanged form={form} /> */}
       <LayoutFormRow header={t("courtesycars.labels.vehicle")}>
+        <Form.Item
+          label={t("courtesycars.fields.year")}
+          name="year"
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.make")}
           name="make"
@@ -58,18 +70,6 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         >
           <Input />
         </Form.Item>
-        <Form.Item
-          label={t("courtesycars.fields.year")}
-          name="year"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.plate")}
           name="plate"
@@ -118,7 +118,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             },
           ]}
         >
-          <InputNumber precision={0} />
+          <InputNumber min={0} precision={0} />
         </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.fleetnumber")}
@@ -213,49 +213,24 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         >
           <CourtesyCarStatus />
         </Form.Item>
-        <Form.Item
-          label={t("courtesycars.fields.nextservicekm")}
-          name="nextservicekm"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <InputNumber />
-        </Form.Item>
         <div>
           <Form.Item
-            label={t("courtesycars.fields.nextservicedate")}
-            name="nextservicedate"
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
+            label={t("courtesycars.fields.nextservicekm")}
+            name="nextservicekm"
           >
-            <FormDatePicker />
+            <InputNumber min={0} precision={0} />
           </Form.Item>
           <Form.Item
             shouldUpdate={(p, c) =>
-              p.mileage !== c.mileage ||
-              p.nextservicedate !== c.nextservicedate ||
-              p.nextservicekm !== c.nextservicekm
+              p.mileage !== c.mileage || p.nextservicekm !== c.nextservicekm
             }
           >
             {() => {
-              const nextservicedate = form.getFieldValue("nextservicedate");
               const nextservicekm = form.getFieldValue("nextservicekm");
-
               const mileageOver =
                 nextservicekm <= form.getFieldValue("mileage");
 
-              const dueForService =
-                nextservicedate && moment(nextservicedate).isBefore(moment());
-
-              if (mileageOver || dueForService)
+              if (mileageOver)
                 return (
                   <Space direction="vertical" style={{ color: "tomato" }}>
                     <span>
@@ -263,6 +238,36 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
                       {t("contracts.labels.cardueforservice")}
                     </span>
                     <span>{`${nextservicekm} km`}</span>
+                  </Space>
+                );
+
+              return <></>;
+            }}
+          </Form.Item>
+        </div>
+        <div>
+          <Form.Item
+            label={t("courtesycars.fields.nextservicedate")}
+            name="nextservicedate"
+          >
+            <FormDatePicker />
+          </Form.Item>
+          <Form.Item
+            shouldUpdate={(p, c) => p.nextservicedate !== c.nextservicedate}
+          >
+            {() => {
+              const nextservicedate = form.getFieldValue("nextservicedate");
+              const dueForService =
+                nextservicedate &&
+                moment(nextservicedate).endOf("day").isSameOrBefore(moment());
+
+              if (dueForService)
+                return (
+                  <Space direction="vertical" style={{ color: "tomato" }}>
+                    <span>
+                      <WarningFilled style={{ marginRight: ".3rem" }} />
+                      {t("contracts.labels.cardueforservice")}
+                    </span>
                     <span>
                       <DateFormatter>{nextservicedate}</DateFormatter>
                     </span>
@@ -283,12 +288,6 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
           <Form.Item
             label={t("courtesycars.fields.registrationexpires")}
             name="registrationexpires"
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
           >
             <FormDatePicker />
           </Form.Item>
@@ -300,7 +299,8 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             {() => {
               const expires = form.getFieldValue("registrationexpires");
 
-              const dateover = expires && moment(expires).isBefore(moment());
+              const dateover =
+                expires && moment(expires).endOf("day").isBefore(moment());
 
               if (dateover)
                 return (
@@ -330,14 +330,13 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             <FormDatePicker />
           </Form.Item>
           <Form.Item
-            shouldUpdate={(p, c) =>
-              p.insuranceexpires !== c.insuranceexpires
-            }
+            shouldUpdate={(p, c) => p.insuranceexpires !== c.insuranceexpires}
           >
             {() => {
               const expires = form.getFieldValue("insuranceexpires");
 
-              const dateover = expires && moment(expires).isBefore(moment());
+              const dateover =
+                expires && moment(expires).endOf("day").isBefore(moment());
 
               if (dateover)
                 return (

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -9,15 +9,15 @@ import {
   Table,
   Tooltip,
 } from "antd";
+import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-import { alphaSort } from "../../utils/sorters";
-import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
-import moment from "moment";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { alphaSort } from "../../utils/sorters";
+import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
@@ -115,6 +115,14 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       sortOrder:
         state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
     },
+    {
+      title: t("courtesycars.fields.color"),
+      dataIndex: "color",
+      key: "color",
+      sorter: (a, b) => alphaSort(a.color, b.color),
+      sortOrder:
+        state.sortedInfo.columnKey === "color" && state.sortedInfo.order,
+    },
     {
       title: t("courtesycars.fields.plate"),
       dataIndex: "plate",
@@ -166,6 +174,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
           (c.year || "").toLowerCase().includes(searchText.toLowerCase()) ||
           (c.make || "").toLowerCase().includes(searchText.toLowerCase()) ||
           (c.model || "").toLowerCase().includes(searchText.toLowerCase()) ||
+          (c.plate || "").toLowerCase().includes(searchText.toLowerCase()) ||
           (t(c.status) || "").toLowerCase().includes(searchText.toLowerCase())
       )
     : courtesycars;

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

@@ -0,0 +1,244 @@
+import {
+  BranchesOutlined,
+  ExclamationCircleFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
+import { Card, Space, Table, Tooltip } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
+import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardScheduledInToday({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  if (!data) return null;
+  if (!data.scheduled_in_today)
+    return <DashboardRefreshRequired {...cardProps} />;
+
+  const appt = []; // Flatten Data
+  data.scheduled_in_today.forEach((item) => {
+    if (item.job) {
+      var i = {
+        canceled: item.canceled,
+        id: item.id,
+        alt_transport: item.job.alt_transport,
+        clm_no: item.job.clm_no,
+        jobid: item.job.jobid,
+        ins_co_nm: item.job.ins_co_nm,
+        iouparent: item.job.iouparent,
+        ownerid: item.job.ownerid,
+        ownr_co_nm: item.job.ownr_co_nm,
+        ownr_ea: item.job.ownr_ea,
+        ownr_fn: item.job.ownr_fn,
+        ownr_ln: item.job.ownr_ln,
+        ownr_ph1: item.job.ownr_ph1,
+        ownr_ph2: item.job.ownr_ph2,
+        production_vars: item.job.production_vars,
+        ro_number: item.job.ro_number,
+        suspended: item.job.suspended,
+        v_make_desc: item.job.v_make_desc,
+        v_model_desc: item.job.v_model_desc,
+        v_model_yr: item.job.v_model_yr,
+        v_vin: item.job.v_vin,
+        vehicleid: item.job.vehicleid,
+        note: item.note,
+        start: moment(item.start).format("hh:mm a"),
+        title: item.title,
+      };
+      appt.push(i);
+    }
+  });
+  appt.sort(function (a, b) {
+    return new moment(a.start) - new moment(b.start);
+  });
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Space>
+            {record.ro_number || t("general.labels.na")}
+            {record.production_vars && record.production_vars.alert ? (
+              <ExclamationCircleFilled className="production-alert" />
+            ) : null}
+            {record.suspended && (
+              <PauseCircleOutlined style={{ color: "orangered" }} />
+            )}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ) : (
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ownr_ph1"),
+      dataIndex: "ownr_ph1",
+      key: "ownr_ph1",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ph2"),
+      dataIndex: "ownr_ph2",
+      key: "ownr_ph2",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ea} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+              record.v_model_desc || ""
+            }`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ins_co_nm"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("appointments.fields.time"),
+      dataIndex: "start",
+      key: "start",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+  ];
+
+  const handleTableChange = (sorter) => {
+    setState({ ...state, sortedInfo: sorter });
+  };
+
+  return (
+    <Card
+      title={t("dashboard.titles.scheduledintoday", {
+        date: moment().startOf("day").format("MM/DD/YYYY"),
+      })}
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <Table
+          onChange={handleTableChange}
+          pagination={{ position: "top", defaultPageSize: 50 }}
+          columns={columns}
+          scroll={{ x: true, y: "calc(100% - 2em)" }}
+          rowKey="id"
+          style={{ height: "85%" }}
+          dataSource={appt}
+        />
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardScheduledInTodayGql = `
+  scheduled_in_today: appointments(where: {start: {_gte: "${moment()
+    .startOf("day")
+    .toISOString()}", _lte: "${moment()
+  .endOf("day")
+  .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
+    canceled
+    id
+    job {
+      alt_transport
+      clm_no
+      jobid: id
+      ins_co_nm
+      iouparent
+      ownerid
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      production_vars
+      ro_number
+      suspended
+      v_make_desc
+      v_model_desc
+      v_model_yr
+      v_vin
+      vehicleid
+    }
+    note
+    start
+    title
+  }
+`;

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

@@ -0,0 +1,210 @@
+import {
+  BranchesOutlined,
+  ExclamationCircleFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
+import { Card, Space, Table, Tooltip } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
+import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
+import DashboardRefreshRequired from "../refresh-required.component";
+
+export default function DashboardScheduledOutToday({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  if (!data) return null;
+  if (!data.scheduled_out_today)
+    return <DashboardRefreshRequired {...cardProps} />;
+
+  data.scheduled_out_today.forEach((item) => {
+    item.scheduled_completion= moment(item.scheduled_completion).format("hh:mm a")
+  });
+  data.scheduled_out_today.sort(function (a, b) {
+    return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
+  });
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Space>
+            {record.ro_number || t("general.labels.na")}
+            {record.production_vars && record.production_vars.alert ? (
+              <ExclamationCircleFilled className="production-alert" />
+            ) : null}
+            {record.suspended && (
+              <PauseCircleOutlined style={{ color: "orangered" }} />
+            )}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ) : (
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ownr_ph1"),
+      dataIndex: "ownr_ph1",
+      key: "ownr_ph1",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ph2"),
+      dataIndex: "ownr_ph2",
+      key: "ownr_ph2",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <ChatOpenButton phone={record.ownr_ea} jobid={record.jobid} />
+      ),
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+              record.v_model_desc || ""
+            }`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ins_co_nm"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("jobs.fields.scheduled_completion"),
+      dataIndex: "scheduled_completion",
+      key: "scheduled_completion",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      responsive: ["md"],
+    },
+  ];
+
+  const handleTableChange = (sorter) => {
+    setState({ ...state, sortedInfo: sorter });
+  };
+
+  return (
+    <Card
+      title={t("dashboard.titles.scheduledouttoday", {
+        date: moment().startOf("day").format("MM/DD/YYYY"),
+      })}
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <Table
+          onChange={handleTableChange}
+          pagination={{ position: "top", defaultPageSize: 50 }}
+          columns={columns}
+          scroll={{ x: true, y: "calc(100% - 2em)" }}
+          rowKey="id"
+          style={{ height: "85%" }}
+          dataSource={data.scheduled_out_today}
+        />
+      </div>
+    </Card>
+  );
+}
+
+export const DashboardScheduledOutTodayGql = `
+  scheduled_out_today: jobs(where: {
+    date_invoiced: {_is_null: true}, 
+    ro_number: {_is_null: false}, 
+    voided: {_eq: false}, 
+    scheduled_completion: {_gte: "${moment().startOf("day").toISOString()}", 
+    _lte: "${moment().endOf("day").toISOString()}"}}) {
+      alt_transport
+      clm_no
+      jobid: id
+      ins_co_nm
+      iouparent
+      ownerid
+      ownr_co_nm
+      ownr_ea
+      ownr_fn
+      ownr_ln
+      ownr_ph1
+      ownr_ph2
+      production_vars
+      ro_number
+      scheduled_completion
+      suspended
+      v_make_desc
+      v_model_desc
+      v_model_yr
+      v_vin
+      vehicleid
+
+  }
+`;

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,6 +1,6 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, Menu, notification, PageHeader, Space } from "antd";
+import { Button, Dropdown, Menu, PageHeader, Space, notification } from "antd";
 import i18next from "i18next";
 import _ from "lodash";
 import moment from "moment";
@@ -37,6 +37,12 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 //Combination of the following:
 // /node_modules/react-grid-layout/css/styles.css
 // /node_modules/react-resizable/css/styles.css
+import DashboardScheduledInToday, {
+  DashboardScheduledInTodayGql,
+} from "../dashboard-components/scheduled-in-today/scheduled-in-today.component";
+import DashboardScheduledOutToday, {
+  DashboardScheduledOutTodayGql,
+} from "../dashboard-components/scheduled-out-today/scheduled-out-today.component";
 import "./dashboard-grid.styles.scss";
 import { GenerateDashboardData } from "./dashboard-grid.utils";
 
@@ -268,6 +274,28 @@ const componentList = {
     w: 2,
     h: 2,
   },
+  ScheduleInToday: {
+    label: i18next.t("dashboard.titles.scheduledintoday", {
+      date: moment().startOf("day").format("MM/DD/YYYY"),
+    }),
+    component: DashboardScheduledInToday,
+    gqlFragment: DashboardScheduledInTodayGql,
+    minW: 10,
+    minH: 2,
+    w: 10,
+    h: 2,
+  },
+  ScheduleOutToday: {
+    label: i18next.t("dashboard.titles.scheduledouttoday", {
+      date: moment().startOf("day").format("MM/DD/YYYY"),
+    }),
+    component: DashboardScheduledOutToday,
+    gqlFragment: DashboardScheduledOutTodayGql,
+    minW: 10,
+    minH: 2,
+    w: 10,
+    h: 2,
+  },
 };
 
 const createDashboardQuery = (state) => {
@@ -283,8 +311,12 @@ const createDashboardQuery = (state) => {
       monthly_sales: jobs(where: {_and: [
         { voided: {_eq: false}},
         {date_invoiced: {_gte: "${moment()
-        .startOf("month").startOf('day').toISOString()}"}}, {date_invoiced: {_lte: "${moment()
-    .endOf("month").endOf('day').toISOString()}"}}]}) {
+          .startOf("month")
+          .startOf("day")
+          .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+    .endOf("month")
+    .endOf("day")
+    .toISOString()}"}}]}) {
     id
     ro_number
     date_invoiced

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

@@ -18,7 +18,7 @@ export default function DataLabel({
     <div {...props} style={{ display: "flex" }}>
       <div
         style={{
-          flex: 2,
+         // flex: 2,
           marginRight: ".2rem",
         }}
       >

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

@@ -66,7 +66,7 @@ export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
       key: "status",
     },
     {
-      title: t("jobs.fields.ro_number"),
+      title: t("bills.fields.invoice_number"),
       dataIndex: ["Posting", "Reference"],
       key: "reference",
     },

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -11,6 +11,7 @@ import {
   Select,
   Space,
   Statistic,
+  Switch,
   Typography,
 } from "antd";
 import Dinero from "dinero.js";
@@ -183,6 +184,20 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
             <Space>
               <DmsCdkMakes form={form} socket={socket} job={job} />
               <DmsCdkMakesRefetch />
+              <Form.Item
+                name="dms_unsold"
+                label={t("jobs.fields.dms.dms_unsold")}
+                initialValue={false}
+              >
+                <Switch />
+              </Form.Item>
+              <Form.Item
+                name="dms_model_override"
+                label={t("jobs.fields.dms.dms_model_override")}
+                initialValue={false}
+              >
+                <Switch />
+              </Form.Item>
             </Space>
           </div>
         )}

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

@@ -35,7 +35,6 @@ export function DocumentsLocalUploadComponent({
 
   return (
     <Upload.Dragger
-      id="bill-document-upload"
       multiple={true}
       fileList={fileList}
       onChange={(f) => {

client/src/components/email-overlay/email-overlay.container.jsx

@@ -109,7 +109,7 @@ export function EmailOverlayContainer({
               ]
             : []),
         ],
-        media: selectedMedia.filter((m) => m.isSelected).map((m) => m.src),
+        media: selectedMedia.filter((m) => m.isSelected).map((m) => m.fullsize),
         //attachments,
       });
       notification["success"]({ message: t("emails.successes.sent") });

client/src/components/form-items-formatted/read-only-form-item.component.jsx

@@ -5,11 +5,13 @@ const ReadOnlyFormItem = ({ value, type = "text", onChange }, ref) => {
   if (!value) return null;
   switch (type) {
     case "text":
-      return <>{value}</>;
+      return <div>{value}</div>;
     case "currency":
-      return <>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</>;
+      return (
+        <div>{Dinero({ amount: Math.round(value * 100) }).toFormat()}</div>
+      );
     default:
-      return <>{value}</>;
+      return <div>{value}</div>;
   }
 };
 export default forwardRef(ReadOnlyFormItem);

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

@@ -54,6 +54,7 @@ export default function GlobalSearchOs() {
                         job.v_make_desc || ""
                       } ${job.v_model_desc || ""}`}</span>
                       <span>{`${job.clm_no || ""}`}</span>
+                      <span>{`${job.plate_no || ""}`}</span>
                     </Space>
                   </Link>
                 ),

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

@@ -1,10 +1,9 @@
-import { useTreatments } from "@splitsoftware/splitio-react";
 import Icon, {
   BankFilled,
   BarChartOutlined,
   CarFilled,
-  ClockCircleFilled,
   CheckCircleOutlined,
+  ClockCircleFilled,
   DashboardFilled,
   DollarCircleFilled,
   ExportOutlined,
@@ -26,6 +25,7 @@ import Icon, {
   UnorderedListOutlined,
   UserOutlined,
 } from "@ant-design/icons";
+import { useTreatments } from "@splitsoftware/splitio-react";
 import { Layout, Menu } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -70,6 +70,8 @@ const mapDispatchToProps = (dispatch) => ({
   setReportCenterContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "reportCenter" })),
   signOutStart: () => dispatch(signOutStart()),
+  setCardPaymentContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
 });
 
 function Header({
@@ -83,6 +85,7 @@ function Header({
   setPaymentContext,
   setReportCenterContext,
   recentItems,
+  setCardPaymentContext,
 }) {
   const { Simple_Inventory } = useTreatments(
     ["Simple_Inventory"],
@@ -94,6 +97,11 @@ function Header({
     {},
     bodyshop && bodyshop.imexshopid
   );
+  const { ImEXPay } = useTreatments(
+    ["ImEXPay"],
+    {},
+    bodyshop && bodyshop.imexshopid
+  );
 
   const { t } = useTranslation();
 
@@ -106,7 +114,6 @@ function Header({
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
-        data-cy="header-menu"
       >
         <Menu.Item key="home" icon={<HomeFilled />}>
           <Link to="/manage">{t("menus.header.home")}</Link>
@@ -241,6 +248,20 @@ function Header({
           >
             {t("menus.header.enterpayment")}
           </Menu.Item>
+          {ImEXPay.treatment === "on" && (
+            <Menu.Item
+              key="entercardpayments"
+              onClick={() => {
+                setCardPaymentContext({
+                  actions: {},
+                  context: {},
+                });
+              }}
+              icon={<Icon component={FaCreditCard} />}
+            >
+              {t("menus.header.entercardpayment")}
+            </Menu.Item>
+          )}
           <Menu.Divider key="div5" />
           <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
             <Link to="/manage/timetickets">
@@ -253,7 +274,11 @@ function Header({
             onClick={() => {
               setTimeTicketContext({
                 actions: {},
-                context: {},
+                context: {
+                  created_by: currentUser.displayName
+                    ? currentUser.email.concat(" | ", currentUser.displayName)
+                    : currentUser.email,
+                },
               });
             }}
           >
@@ -312,7 +337,9 @@ function Header({
           icon={<SettingOutlined />}
         >
           <Menu.Item key="shop" icon={<Icon component={GiSettingsKnobs} />}>
-            <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
+            <Link to="/manage/shop?tab=info">
+              {t("menus.header.shop_config")}
+            </Link>
           </Menu.Item>
           <Menu.Item key="dashboard" icon={<DashboardFilled />}>
             <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
@@ -348,14 +375,8 @@ function Header({
             currentUser.email ||
             t("general.labels.unknown")
           }
-          data-cy="user-sub-menu"
         >
-          <Menu.Item
-            key="signout"
-            danger
-            data-cy="sign-out-button"
-            onClick={() => signOutStart()}
-          >
+          <Menu.Item key="signout" danger onClick={() => signOutStart()}>
             {t("user.actions.signout")}
           </Menu.Item>
           <Menu.Item

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { SEARCH_VENDOR_AUTOCOMPLETE_WITH_ADDR } from "../../graphql/vendors.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
@@ -13,13 +14,14 @@ import VendorSearchSelect from "../vendor-search-select/vendor-search-select.com
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  technician: selectTechnician,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(Jobd3RdPartyModal);
 
-export function Jobd3RdPartyModal({ bodyshop, jobId, job }) {
+export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const { t } = useTranslation();
   const [form] = Form.useForm();
@@ -212,7 +214,9 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job }) {
             ]}
           >
             <Radio.Group>
-              <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
+              {!technician ? (
+                <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
+              ) : null}
               <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
             </Radio.Group>
           </Form.Item>

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

@@ -4,6 +4,7 @@ import {
   Divider,
   Dropdown,
   Form,
+  Input,
   Menu,
   notification,
   Popover,
@@ -29,11 +30,13 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import { useMutation } from "@apollo/client";
+import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -58,16 +61,44 @@ export function ScheduleEventComponent({
   const [visible, setVisible] = useState(false);
   const history = useHistory();
   const searchParams = queryString.parse(useLocation().search);
-
+  const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
+  const [title, setTitle] = useState(event.title);
   const blockContent = (
-    <div>
+    <Space direction="vertical" wrap>
+      <Input
+        value={title}
+        onChange={(e) => setTitle(e.currentTarget.value)}
+        onBlur={async () => {
+          await updateAppointment({
+            variables: {
+              appid: event.id,
+              app: {
+                title: title,
+              },
+            },
+            optimisticResponse: {
+              update_appointments: {
+                __typename: "appointments_mutation_response",
+                returning: [
+                  {
+                    ...event,
+                    title: title,
+                    __typename: "appointments",
+                  },
+                ],
+              },
+            },
+          });
+        }}
+      />
+
       <Button
         onClick={() => handleCancel({ id: event.id })}
         disabled={event.arrived}
       >
-        {t("appointments.actions.cancel")}
+        {t("appointments.actions.unblock")}
       </Button>
-    </div>
+    </Space>
   );
 
   const popoverContent = (
@@ -208,46 +239,56 @@ export function ScheduleEventComponent({
             <Button>{t("appointments.actions.sendreminder")}</Button>
           </Dropdown>
         ) : null}
-        <Popover
-          trigger="click"
-          disabled={event.arrived}
-          content={
-            <Form
-              layout="vertical"
-              onFinish={({ lost_sale_reason }) => {
-                handleCancel({ id: event.id, lost_sale_reason });
-              }}
-            >
-              <Form.Item
-                name="lost_sale_reason"
-                label={t("jobs.fields.lost_sale_reason")}
-                rules={[
-                  {
-                    required: true,
-                    //message: t("general.validation.required"),
-                  },
-                ]}
-              >
-                <Select
-                  options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
-                    label: lsr,
-                    value: lsr,
-                  }))}
-                />
-              </Form.Item>
-              <Button htmlType="submit">
-                {t("appointments.actions.cancel")}
-              </Button>
-            </Form>
-          }
-        >
+        {event.arrived ? (
           <Button
             // onClick={() => handleCancel(event.id)}
             disabled={event.arrived}
           >
             {t("appointments.actions.cancel")}
           </Button>
-        </Popover>
+        ) : (
+          <Popover
+            trigger="click"
+            disabled={event.arrived}
+            content={
+              <Form
+                layout="vertical"
+                onFinish={({ lost_sale_reason }) => {
+                  handleCancel({ id: event.id, lost_sale_reason });
+                }}
+              >
+                <Form.Item
+                  name="lost_sale_reason"
+                  label={t("jobs.fields.lost_sale_reason")}
+                  rules={[
+                    {
+                      required: true,
+                      //message: t("general.validation.required"),
+                    },
+                  ]}
+                >
+                  <Select
+                    options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
+                      label: lsr,
+                      value: lsr,
+                    }))}
+                  />
+                </Form.Item>
+                <Button htmlType="submit">
+                  {t("appointments.actions.cancel")}
+                </Button>
+              </Form>
+            }
+          >
+            <Button
+              // onClick={() => handleCancel(event.id)}
+              disabled={event.arrived}
+            >
+              {t("appointments.actions.cancel")}
+            </Button>
+          </Popover>
+        )}
+
         {event.isintake ? (
           <Button
             disabled={event.arrived}

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

@@ -2,12 +2,16 @@ import { useMutation } from "@apollo/client";
 import { notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENT_BY_ID } from "../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import ScheduleEventComponent from "./schedule-event.component";
 
 export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
+  const dispatch = useDispatch();
   const { t } = useTranslation();
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [updateJob] = useMutation(UPDATE_JOB);
@@ -34,16 +38,24 @@ export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
       const jobUpdate = await updateJob({
         variables: {
           jobId: event.job.id,
-
           job: {
             date_scheduled: null,
             scheduled_in: null,
             scheduled_completion: null,
             lost_sale_reason,
+            date_lost_sale: new Date(),
             status: bodyshop.md_ro_statuses.default_imported,
           },
         },
       });
+      if (!jobUpdate.errors) {
+        dispatch(
+          insertAuditTrail({
+            jobid: event.job.id,
+            operation: AuditTrailMapping.appointmentcancel(lost_sale_reason),
+          })
+        );
+      }
       if (!!jobUpdate.errors) {
         notification["error"]({
           message: t("jobs.errors.updating", {

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

@@ -84,8 +84,6 @@ export default function JobBillsTotalComponent({
     })
   );
 
-  console.log(totals.parts.parts.total);
-
   const totalPartsSublet = Dinero(totals.parts.parts.total)
     .add(Dinero(totals.parts.sublets.total))
     .add(Dinero(totals.additional.shipping))
@@ -129,10 +127,7 @@ export default function JobBillsTotalComponent({
             >
               <Statistic
                 title={t("bills.labels.retailtotal")}
-                // value={billTotals.toFormat()}
-                valueRender={() => (
-                  <span id="retailtotal">{billTotals.toFormat()}</span>
-                )}
+                value={billTotals.toFormat()}
               />
             </Tooltip>
             <Typography.Title>=</Typography.Title>
@@ -150,12 +145,7 @@ export default function JobBillsTotalComponent({
                 valueStyle={{
                   color: discrepancy.getAmount() === 0 ? "green" : "red",
                 }}
-                // value={discrepancy.toFormat()}
-                valueRender={() => (
-                  <span id="discrepancy" className="discrepancy">
-                    {discrepancy.toFormat()}
-                  </span>
-                )}
+                value={discrepancy.toFormat()}
               />
             </Tooltip>
             <Typography.Title>+</Typography.Title>
@@ -188,12 +178,7 @@ export default function JobBillsTotalComponent({
                 valueStyle={{
                   color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red",
                 }}
-                // value={discrepWithLbrAdj.toFormat()}
-                valueRender={() => (
-                  <span id="discrepWithLbrAdj" className="discrepancy">
-                    {discrepWithLbrAdj.toFormat()}
-                  </span>
-                )}
+                value={discrepWithLbrAdj.toFormat()}
               />
             </Tooltip>
             <Typography.Title>+</Typography.Title>
@@ -208,10 +193,7 @@ export default function JobBillsTotalComponent({
             >
               <Statistic
                 title={t("bills.labels.totalreturns")}
-                // value={totalReturns.toFormat()}
-                valueRender={() => (
-                  <span id="totalReturns">{totalReturns.toFormat()}</span>
-                )}
+                value={totalReturns.toFormat()}
               />
             </Tooltip>
             <Typography.Title>=</Typography.Title>
@@ -229,12 +211,7 @@ export default function JobBillsTotalComponent({
                 valueStyle={{
                   color: discrepWithCms.getAmount() === 0 ? "green" : "red",
                 }}
-                // value={discrepWithCms.toFormat()}
-                valueRender={() => (
-                  <span id="discrepWithCms" className="discrepancy">
-                    {discrepWithCms.toFormat()}
-                  </span>
-                )}
+                value={discrepWithCms.toFormat()}
               />
             </Tooltip>
           </Space>
@@ -254,10 +231,7 @@ export default function JobBillsTotalComponent({
             >
               <Statistic
                 title={t("bills.labels.totalreturns")}
-                // value={totalReturns.toFormat()}
-                valueRender={() => (
-                  <span id="totalReturns">{totalReturns.toFormat()}</span>
-                )}
+                value={totalReturns.toFormat()}
               />
             </Tooltip>
             <Tooltip
@@ -279,18 +253,11 @@ export default function JobBillsTotalComponent({
                       ? "green"
                       : "red",
                 }}
-                // value={
-                //   calculatedCreditsNotReceived.getAmount() >= 0
-                //     ? calculatedCreditsNotReceived.toFormat()
-                //     : Dinero().toFormat()
-                // }
-                valueRender={() => (
-                  <span id="calculatedcreditsnotreceived">
-                    {calculatedCreditsNotReceived.getAmount() >= 0
-                      ? calculatedCreditsNotReceived.toFormat()
-                      : Dinero().toFormat()}
-                  </span>
-                )}
+                value={
+                  calculatedCreditsNotReceived.getAmount() >= 0
+                    ? calculatedCreditsNotReceived.toFormat()
+                    : Dinero().toFormat()
+                }
               />
             </Tooltip>
             <Tooltip
@@ -310,18 +277,11 @@ export default function JobBillsTotalComponent({
                       ? "green"
                       : "red",
                 }}
-                // value={
-                //   totalReturnsMarkedNotReceived.getAmount() >= 0
-                //     ? totalReturnsMarkedNotReceived.toFormat()
-                //     : Dinero().toFormat()
-                // }
-                valueRender={() => (
-                  <span id="creditsnotreceived">
-                    {totalReturnsMarkedNotReceived.getAmount() >= 0
-                      ? totalReturnsMarkedNotReceived.toFormat()
-                      : Dinero().toFormat()}
-                  </span>
-                )}
+                value={
+                  totalReturnsMarkedNotReceived.getAmount() >= 0
+                    ? totalReturnsMarkedNotReceived.toFormat()
+                    : Dinero().toFormat()
+                }
               />
             </Tooltip>
           </Space>

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -1,5 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { Button, Card, Form, Input, notification, Switch } from "antd";
+import moment from "moment-business-days";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,16 +13,15 @@ import {
   MARK_LATEST_APPOINTMENT_ARRIVED,
 } from "../../../../graphql/appointments.queries";
 import { UPDATE_JOB } from "../../../../graphql/jobs.queries";
+import { UPDATE_OWNER } from "../../../../graphql/owners.queries";
+import { insertAuditTrail } from "../../../../redux/application/application.actions";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../../../redux/user/user.selectors";
+import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
 import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
 import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
-import moment from "moment-business-days";
-import { insertAuditTrail } from "../../../../redux/application/application.actions";
-import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
-import { UPDATE_OWNER } from "../../../../graphql/owners.queries";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -199,7 +199,6 @@ export function JobChecklistForm({
       extra={
         !readOnly && (
           <Button
-            data-cy="checklist-submit-button"
             loading={loading}
             type="primary"
             onClick={() => form.submit()}
@@ -210,7 +209,6 @@ export function JobChecklistForm({
       }
     >
       <Form
-        data-cy="checklist-form"
         form={form}
         onFinish={handleFinish}
         initialValues={{
@@ -232,6 +230,7 @@ export function JobChecklistForm({
                 )),
             scheduled_delivery:
               job.scheduled_delivery && moment(job.scheduled_delivery),
+            production_vars: job.production_vars,
           }),
           ...(type === "deliver" && {
             removeFromProduction: true,
@@ -258,7 +257,7 @@ export function JobChecklistForm({
               label={t("checklist.labels.addtoproduction")}
               disabled={readOnly}
             >
-              <Switch data-cy="add-to-production-switch" disabled={readOnly} />
+              <Switch disabled={readOnly} />
             </Form.Item>
             <Form.Item
               name="allow_text_message"
@@ -294,11 +293,7 @@ export function JobChecklistForm({
               disabled={readOnly}
               trigger="onChange"
             >
-              <Input.TextArea
-                data-cy="checklist-production-note"
-                rows={3}
-                disabled={readOnly}
-              />
+              <Input.TextArea rows={3} disabled={readOnly} />
             </Form.Item>
           </div>
         )}
@@ -330,11 +325,7 @@ export function JobChecklistForm({
               label={t("checklist.labels.removefromproduction")}
               disabled={readOnly}
             >
-              <Switch
-                data-cy="remove-from-production"
-                disabled={readOnly}
-                defaultChecked={true}
-              />
+              <Switch disabled={readOnly} defaultChecked={true} />
             </Form.Item>
           </div>
         )}

client/src/components/job-costing-parts-table/job-costing-parts-table.component.jsx

@@ -23,7 +23,6 @@ export default function JobCostingPartsTable({ data, summaryData }) {
       sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
       sortOrder:
         state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
-      render: (record) => <span data-cy="responsibilitycenter">{record}</span>,
     },
     {
       title: t("jobs.labels.sales"),
@@ -43,7 +42,6 @@ export default function JobCostingPartsTable({ data, summaryData }) {
         parseFloat(a.costs.substring(1)) - parseFloat(b.costs.substring(1)),
       sortOrder:
         state.sortedInfo.columnKey === "costs" && state.sortedInfo.order,
-      render: (record) => <span data-cy="cost">{record}</span>,
     },
 
     {

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

@@ -22,12 +22,12 @@ export default function JobLinesExpander({ jobline, jobid }) {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <Row data-cy="parts-expanded-row">
+    <Row>
       <Col md={24} lg={12}>
         <Typography.Title level={4}>
           {t("parts_orders.labels.parts_orders")}
         </Typography.Title>
-        <Timeline data-cy="parts-bills-order">
+        <Timeline>
           {data.parts_order_lines.length > 0 ? (
             data.parts_order_lines.map((line) => (
               <Timeline.Item key={line.id}>
@@ -43,7 +43,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
               </Timeline.Item>
             ))
           ) : (
-            <Timeline.Item data-cy="parts-empty-order">
+            <Timeline.Item>
               {t("parts_orders.labels.notyetordered")}
             </Timeline.Item>
           )}
@@ -51,7 +51,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
       </Col>
       <Col md={24} lg={12}>
         <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
-        <Timeline data-cy="parts-bills-order">
+        <Timeline>
           {data.billlines.length > 0 ? (
             data.billlines.map((line) => (
               <Timeline.Item key={line.id}>
@@ -71,7 +71,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
                   </Col>
                   <Col span={4}>
                     <span>
-                      {`${t("billlines.fields.actual_cost")}: `}
+                    {`${t("billlines.fields.actual_cost")}: `}
                       <CurrencyFormatter>{line.actual_cost}</CurrencyFormatter>
                     </span>
                   </Col>
@@ -83,7 +83,7 @@ export default function JobLinesExpander({ jobline, jobid }) {
               </Timeline.Item>
             ))
           ) : (
-            <Timeline.Item data-cy="parts-empty-order">
+            <Timeline.Item>
               {t("parts_orders.labels.notyetordered")}
             </Timeline.Item>
           )}