IO-2327 timetickets test cases

.circleci/config.yml

@@ -8,13 +8,13 @@ orbs:
 jobs:
   api-deploy:
     docker:
-      - image: cimg/node:18.18.2
+      - image: "cimg/base:stable"
     steps:
       - checkout
       - eb/setup
       - run:
           command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 16 running on 64bit Amazon Linux 2"
             eb status --verbose
             eb deploy
             eb status
@@ -42,22 +42,31 @@ jobs:
   app-build:
     docker:
       - image: cimg/node:16.15.0
-    resource_class: large
+
     working_directory: ~/repo/client
 
     steps:
       - checkout:
           path: ~/repo
+
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Install Dependencies
-          command: npm i
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
 
-      - run: npm run build
+      - run: yarn run build
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-production/"
-          arguments: "--exclude '*.map'"
       - jira/notify
 
   test-hasura-migrate:
@@ -83,22 +92,31 @@ jobs:
   test-app-build:
     docker:
       - image: cimg/node:16.15.0
-    resource_class: large
+
     working_directory: ~/repo/client
 
     steps:
       - checkout:
           path: ~/repo
+
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Install Dependencies
-          command: npm i
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
 
-      - run: npm run build:test
+      - run: yarn run build:test
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-test/"
-          arguments: "--exclude '*.map'"
       - jira/notify
 
   admin-app-build:
@@ -159,4 +177,4 @@ workflows:
       #- admin-app-build:
       #filters:
       #branches:
-      #only: master
+      #only: master

.gitignore

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

.npmrc

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

.prettierrc.js

@@ -1,16 +0,0 @@
-exports.default = {
-  printWidth: 120,
-  useTabs: false,
-  tabWidth: 2,
-  trailingComma: "es5",
-  semi: true,
-  singleQuote: false,
-  bracketSpacing: true,
-  arrowParens: "always",
-  jsxSingleQuote: false,
-  bracketSameLine: false,
-  endOfLine: "lf",
-  importOrder: ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
-  importOrderSeparation: true,
-  importOrderSortSpecifiers: true,
-};

_reference/reportFiltersAndSorters.md

@@ -1,189 +0,0 @@
-# Filters and Sorters
-
-This documentation details the schema required for `.filters` files on the report server. It is used to dynamically
-modify the graphQL query and provide the user more power over their reports.
-
-For filters and sorters, valid types include (`type` key in the schema):
-- string (default)
-- number
-- bool or boolean
-- date
-
-## Special Notes
-- When passing the data to the template server, the property filters and sorters is added to the data object and will reflect the filters and sorters the user has selected
-
-## High level Schema Overview
-
-```javascript
-const schema = {
-    "filters": [
-        {
-            "name": "jobs.joblines.mod_lb_hrs", // Name and path of the field in the graphQL query
-            "translation": "jobs.joblines.mod_lb_hrs_1", // Translation key for the label used in the GUI
-            "label": "mod_lb_hrs_1",    // Label used in the case the GUI does not contain a translation
-            "type": "number" // Type of field, can be number or string currently
-        },
-        // ... more filters
-    ],
-    "sorters": [
-        {
-            "name": "jobs.joblines.mod_lb_hrs",  // Name and path of the field in the graphQL query
-            "translation": "jobs.joblines.mod_lb_hrs_1",  // Translation key for the label used in the GUI
-            "label": "mod_lb_hrs_1", // Label used in the case the GUI does not contain a translation
-            "type": "number"  // Type of field, can be number or string currently
-        },
-        // ... more sorters
-    ],
-    "dates": {
-        // This is not yet implemented and will be added in a future release
-    }
-}
-```
-
-## Filters
-
-Filters effect the where clause of the graphQL query. They are used to filter the data returned from the server.
-A note on special notation used in the `name` field.
-
-## Reflection
-
-Filters can make use of reflection to pre-fill select boxes, the following is an example of that in the filters file.
-
-```json
-    {
-      "name": "jobs.status",
-      "translation": "jobs.fields.status",
-      "label": "Status",
-      "type": "string",
-      "reflector": {
-        "type": "internal",
-        "name": "special.job_statuses"
-      }
-    }
-```
-
-in this example, a reflector with the type 'internal' (all types at the moment require this, and it is used for future functionality), with a name of `special.job_statuses`
-
-The following cases are available
-
-- `special.job_statuses` - This will reflect the statuses of the jobs table `bodyshop.md_ro_statuses.statuses'`
-- `special.cost_centers` - This will reflect the cost centers `bodyshop.md_responsibility_centers.costs`
-- `special.categories` - This will reflect the categories `bodyshop.md_categories`
-- `special.insurance_companies` - This will reflect the insurance companies `bodyshop.md_ins_cos`'
-- `special.employee_teams` - This will reflect the employee teams `bodyshop.employee_teams`
-- `special.employees` - This will reflect the employees `bodyshop.employees`
-- `special.first_names` - This will reflect the first names `bodyshop.employees`
-- `special.last_names` - This will reflect the last names `bodyshop.employees`
-- `special.referral_sources` - This will reflect the referral sources `bodyshop.md_referral_sources`
-- `special.class`- This will reflect the class `bodyshop.md_classes`
-- `special.lost_sale_reasons` - This will reflect the lost sale reasons `bodyshop.md_lost_sale_reasons`
-- `special.alt_transports` - This will reflect the alternative transports `bodyshop.appt_alt_transport`
-- `special.payment_types` - This will reflect the payment types `bodyshop.md_payment_types`
-- `special.payment_payers` - This is a special case with a key value set of [Customer, Insurance]
-
-### Path without brackets, multi level
-
-`"name": "jobs.joblines.mod_lb_hrs",`
-This will produce a where clause at the `joblines` level of the graphQL query,
-
-```graphql
-query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!) {
-    jobs(
-        where: {date_invoiced: {_is_null: true}, date_open: {_gte: $starttz, _lte: $endtz}, ro_number: {_is_null: false}, voided: {_eq: false}}
-    ) {
-        joblines(
-            order_by: {line_no: asc}
-            where: {removed: {_eq: false}, mod_lb_hrs: {_lt: 3}}
-        ) {
-            line_no
-            mod_lbr_ty
-            mod_lb_hrs
-            convertedtolbr
-            convertedtolbr_data
-        }
-        ownr_co_nm
-        ownr_fn
-        ownr_ln
-        plate_no
-        ro_number
-        status
-        v_make_desc
-        v_model_desc
-        v_model_yr
-        v_vin
-        v_color
-    }
-}
-```
-
-### Path with brackets,top level
-
-`"name": "[jobs].joblines.mod_lb_hrs",`
-This will produce a where clause at the `jobs` level of the graphQL query.
-
-```graphql
-query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!) {
-    jobs(
-        where: {date_invoiced: {_is_null: true}, date_open: {_gte: $starttz, _lte: $endtz}, ro_number: {_is_null: false}, voided: {_eq: false}, joblines: {mod_lb_hrs: {_gt: 4}}}
-    ) {
-        joblines(
-            order_by: {line_no: asc}
-            where: {removed: {_eq: false}}
-        ) {
-            line_no
-            mod_lbr_ty
-            mod_lb_hrs
-            convertedtolbr
-            convertedtolbr_data
-        }
-        ownr_co_nm
-        ownr_fn
-        ownr_ln
-        plate_no
-        ro_number
-        status
-        v_make_desc
-        v_model_desc
-        v_model_yr
-        v_vin
-        v_color
-    }
-}
-```
-
-## Known Caveats
-
-- Will only support two level of nesting in the graphQL query `jobs.joblines.mod_lb_hrs` vs `[jobs].joblines.mod_lb_hrs`
-  is fine, but `jobs.[joblines.].some_table.mod_lb_hrs` is not.
-- The type object must be 'string' or 'number'  or 'bool' or 'boolean' or 'date' and is case-sensitive.
-- The `translation` key is used to look up the label in the GUI, if it is not found, the `label` key is used.
-- Do not add the ability to filter things that are already filtered as part of the original query, this would be
-  redundant and could cause issues.
-- Do not add the ability to filter on things like FK constraints, must like the above example.
-- *INHERITANCE CAVEAT* If you have a filters file on a parent report that has a child that you do not want the filters inherited from, you must place a blank filters file (valid json so {}) on the child report level. This will than fetch the child filters, which are empty and move along, versus inheriting the parent filters.
-
-## Sorters
-
-- Sorters follow the same schema as filters, however, they do not do square bracket wrapping to indicate level hoisting,
-  a filter added on `job.md_status` would be added at the top level, and a filter added on `jobs.joblines.mod_lb_hrs`
-  would be added at the `joblines` level.
-- Most of the reports currently do sorting on a template level, this will need to change to actually see the results
-  using the sorters.
-
-### Default Sorters
-
-- A sorter can be given a default object containing a `order` and `direction` key value. This will be used to sort the report if the user does not select any of the sorters themselves.
-- The `order` key is the order in which the sorters are applied, and the `direction` key is the direction of the sort, either `asc` or `desc`.
-
-```json
-{
-    "name": "jobs.joblines.mod_lb_hrs",
-    "translation": "jobs.joblines.mod_lb_hrs_1",
-    "label": "mod_lb_hrs_1",
-    "type": "number",
-    "default": {
-        "order": 1,
-        "direction": "asc"
-    }
-}
-```

client/.env.production

@@ -1,4 +1,4 @@
-GENERATE_SOURCEMAP=true
+GENERATE_SOURCEMAP=false
 REACT_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
 REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
 REACT_APP_GA_CODE=231103507

client/.gitignore

@@ -1,3 +0,0 @@
-
-# Sentry Config File
-.sentryclirc

client/craco.config.js

@@ -1,25 +1,25 @@
 // craco.config.js
 const TerserPlugin = require("terser-webpack-plugin");
 const CracoLessPlugin = require("craco-less");
-//const SentryWebpackPlugin = require("@sentry/webpack-plugin");
+const SentryWebpackPlugin = require("@sentry/webpack-plugin");
 
 module.exports = {
   plugins: [
-    // {
-    //   plugin: SentryWebpackPlugin,
-    //   options: {
-    //     // sentry-cli configuration
-    //     authToken:
-    //       "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
-    //     org: "snapt-software",
-    //     project: "imexonline",
-    //     release: process.env.REACT_APP_GIT_SHA,
+    {
+      plugin: SentryWebpackPlugin,
+      options: {
+        // sentry-cli configuration
+        authToken:
+          "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
+        org: "snapt-software",
+        project: "imexonline",
+        release: process.env.REACT_APP_GIT_SHA,
 
-    //     // webpack-specific configuration
-    //     include: ".",
-    //     ignore: ["node_modules", "webpack.config.js"],
-    //   },
-    // },
+        // webpack-specific configuration
+        include: ".",
+        ignore: ["node_modules", "webpack.config.js"],
+      },
+    },
     {
       plugin: CracoLessPlugin,
       options: {

client/cypress.config.js

@@ -0,0 +1,17 @@
+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

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

client/cypress.json

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

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

@@ -0,0 +1,232 @@
+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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,500 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,431 @@
+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

@@ -0,0 +1,487 @@
+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

@@ -0,0 +1,318 @@
+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

@@ -0,0 +1,316 @@
+{
+  "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

@@ -0,0 +1,316 @@
+{
+  "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

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

client/cypress/fixtures/users.json

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

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

@@ -1,23 +0,0 @@
-/// <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

@@ -1,143 +0,0 @@
-/// <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

@@ -1,299 +0,0 @@
-/// <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

@@ -1,39 +0,0 @@
-/// <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

@@ -1,177 +0,0 @@
-/// <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

@@ -1,97 +0,0 @@
-/// <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

@@ -1,77 +0,0 @@
-/// <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

@@ -1,202 +0,0 @@
-/// <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

@@ -1,88 +0,0 @@
-/// <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

@@ -1,52 +0,0 @@
-/// <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

@@ -1,32 +0,0 @@
-/// <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

@@ -1,104 +0,0 @@
-/// <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

@@ -1,56 +0,0 @@
-/// <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

@@ -1,163 +0,0 @@
-/// <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

@@ -1,114 +0,0 @@
-/// <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

@@ -1,205 +0,0 @@
-/// <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

@@ -1,121 +0,0 @@
-/// <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

@@ -1,110 +0,0 @@
-/// <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

@@ -1,59 +0,0 @@
-/// <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

@@ -1,31 +0,0 @@
-/// <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

@@ -1,22 +0,0 @@
-/// <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

@@ -1,22 +0,0 @@
-/// <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,4 +24,104 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
-import "@testing-library/cypress/add-commands";
+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");
+  }
+);

client/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.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

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

client/package.json

@@ -7,16 +7,14 @@
     "@apollo/client": "^3.7.9",
     "@asseinfo/react-kanban": "^2.2.0",
     "@craco/craco": "^7.0.0",
-    "@fingerprintjs/fingerprintjs": "^3.4.2",
+    "@fingerprintjs/fingerprintjs": "^3.3.3",
     "@jsreport/browser-client": "^3.1.0",
-    "@sentry/cli": "^2.27.0",
-    "@sentry/react": "^7.99.0",
+    "@sentry/react": "^7.40.0",
     "@sentry/tracing": "^7.40.0",
     "@splitsoftware/splitio-react": "^1.8.1",
     "@tanem/react-nprogress": "^5.0.8",
     "antd": "^4.24.8",
     "apollo-link-logger": "^2.0.1",
-    "apollo-link-sentry": "^3.3.0",
     "axios": "^1.3.4",
     "craco-less": "^2.0.0",
     "dinero.js": "^1.9.1",
@@ -72,6 +70,7 @@
     "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,14 +89,13 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "craco start",
-    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build && npm run sentry:sourcemaps",
-    "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!'",
+    "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!'",
     "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
     "test": "cypress open",
     "eject": "react-scripts eject",
-    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
-    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
+    "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular ."
   },
   "eslintConfig": {
     "extends": [
@@ -124,7 +122,7 @@
   "devDependencies": {
     "@sentry/webpack-plugin": "^1.20.0",
     "@testing-library/cypress": "^8.0.3",
-    "cypress": "^10.3.1",
+    "cypress": "^12.13.0",
     "eslint-plugin-cypress": "^2.12.1",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",

client/src/App/App.container.jsx

@@ -8,7 +8,6 @@ import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
-import * as Sentry from "@sentry/react";
 
 moment.locale("en-US");
 
@@ -19,7 +18,7 @@ export const factory = SplitSdk({
   },
 });
 
-function AppContainer() {
+export default function AppContainer() {
   const { t } = useTranslation();
 
   return (
@@ -43,5 +42,3 @@ function AppContainer() {
     </ApolloProvider>
   );
 }
-
-export default Sentry.withProfiler(AppContainer);

client/src/App/App.jsx

@@ -22,7 +22,6 @@ import {
 } from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
-import handleBeta from "../utils/handleBeta";
 
 const ResetPassword = lazy(() =>
   import("../pages/reset-password/reset-password.component")
@@ -58,6 +57,7 @@ export function App({
     if (!navigator.onLine) {
       setOnline(false);
     }
+
     checkUserSession();
   }, [checkUserSession, setOnline]);
 
@@ -73,7 +73,6 @@ export function App({
   window.addEventListener("online", function (e) {
     setOnline(true);
   });
-
   useEffect(() => {
     if (currentUser.authorized && bodyshop) {
       client.setAttribute("imexshopid", bodyshop.imexshopid);
@@ -108,8 +107,6 @@ export function App({
       />
     );
 
-  handleBeta();
-
   return (
     <Switch>
       <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>

client/src/App/App.styles.scss

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

client/src/components/_test/paymentMethod.jsx

@@ -0,0 +1,49 @@
+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

@@ -1,63 +0,0 @@
-{
-  "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

@@ -0,0 +1,9 @@
+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

@@ -1,31 +0,0 @@
-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/accounting-payables-table/accounting-payables-table.component.jsx

@@ -1,21 +1,20 @@
-import { Card, Checkbox, Input, Space, Table } from "antd";
-import queryString from "query-string";
+import { Input, Table, Checkbox, Card, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateFormatter } from "../../utils/DateFormatter";
-import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
-import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
-import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
 import PayableExportButton from "../payable-export-button/payable-export-button.component";
-import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
+import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
+import { DateFormatter } from "../../utils/DateFormatter";
+import queryString from "query-string";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
+import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -138,6 +137,7 @@ export function AccountingPayablesTableComponent({
       title: t("exportlogs.labels.attempts"),
       dataIndex: "attempts",
       key: "attempts",
+
       render: (text, record) => (
         <ExportLogsCountDisplay logs={record.exportlogs} />
       ),
@@ -146,6 +146,8 @@ export function AccountingPayablesTableComponent({
       title: t("general.labels.actions"),
       dataIndex: "actions",
       key: "actions",
+      sorter: (a, b) => a.clm_total - b.clm_total,
+
       render: (text, record) => (
         <PayableExportButton
           billId={record.id}
@@ -208,7 +210,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: pageLimit }}
+        pagination={{ position: "top", pageSize: 50 }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -8,12 +8,9 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
-import { pageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
-import OwnerNameDisplay, {
-  OwnerNameDisplayFunction,
-} from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
@@ -77,11 +74,7 @@ export function AccountingPayablesTableComponent({
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
-      sorter: (a, b) =>
-        alphaSort(
-          OwnerNameDisplayFunction(a.job),
-          OwnerNameDisplayFunction(b.job)
-        ),
+      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
       sortOrder:
         state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => {
@@ -100,9 +93,6 @@ export function AccountingPayablesTableComponent({
       title: t("payments.fields.amount"),
       dataIndex: "amount",
       key: "amount",
-      sorter: (a, b) => a.amount - b.amount,
-      sortOrder:
-        state.sortedInfo.columnKey === "amount" && state.sortedInfo.order,
       render: (text, record) => (
         <CurrencyFormatter>{record.amount}</CurrencyFormatter>
       ),
@@ -121,21 +111,18 @@ export function AccountingPayablesTableComponent({
       title: t("payments.fields.created_at"),
       dataIndex: "created_at",
       key: "created_at",
-      sorter: (a, b) => dateSort(a.created_at, b.created_at),
-      sortOrder:
-        state.sortedInfo.columnKey === "created_at" && state.sortedInfo.order,
       render: (text, record) => (
         <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
       ),
     },
-    // {
-    //   title: t("payments.fields.exportedat"),
-    //   dataIndex: "exportedat",
-    //   key: "exportedat",
-    //   render: (text, record) => (
-    //     <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
-    //   ),
-    // },
+    {
+      title: t("payments.fields.exportedat"),
+      dataIndex: "exportedat",
+      key: "exportedat",
+      render: (text, record) => (
+        <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
+      ),
+    },
     {
       title: t("exportlogs.labels.attempts"),
       dataIndex: "attempts",
@@ -149,6 +136,8 @@ export function AccountingPayablesTableComponent({
       title: t("general.labels.actions"),
       dataIndex: "actions",
       key: "actions",
+      sorter: (a, b) => a.clm_total - b.clm_total,
+
       render: (text, record) => (
         <PaymentExportButton
           paymentId={record.id}
@@ -220,7 +209,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: pageLimit }}
+        pagination={{ position: "top", pageSize: 50 }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -4,19 +4,17 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
+import { alphaSort, dateSort } from "../../utils/sorters";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { DateFormatter } from "../../utils/DateFormatter";
-import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
-import OwnerNameDisplay, {
-  OwnerNameDisplayFunction,
-} from "../owner-name-display/owner-name-display.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import { DateFormatter } from "../../utils/DateFormatter";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -65,7 +63,7 @@ export function AccountingReceivablesTableComponent({
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
-      sorter: (a, b) => statusSort(a, b, bodyshop.md_ro_statuses.statuses),
+      sorter: (a, b) => a.status - b.status,
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
     },
@@ -85,8 +83,7 @@ export function AccountingReceivablesTableComponent({
       title: t("jobs.fields.owner"),
       dataIndex: "owner",
       key: "owner",
-      sorter: (a, b) =>
-        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
         state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
       render: (text, record) => {
@@ -106,15 +103,6 @@ export function AccountingReceivablesTableComponent({
       dataIndex: "vehicle",
       key: "vehicle",
       ellipsis: true,
-      sorter: (a, b) =>
-        alphaSort(
-          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
-            a.v_model_desc || ""
-          }`,
-          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
-        ),
-      sortOrder:
-        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
       render: (text, record) => {
         return record.vehicleid ? (
           <Link to={"/manage/vehicles/" + record.vehicleid}>

client/src/components/audit-trail-list/audit-trail-list.component.jsx

@@ -4,7 +4,6 @@ import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { useTranslation } from "react-i18next";
 import AuditTrailValuesComponent from "../audit-trail-values/audit-trail-values.component";
-import {pageLimit} from "../../utils/config";
 
 export default function AuditTrailListComponent({ loading, data }) {
   const [state, setState] = useState({
@@ -75,7 +74,7 @@ export default function AuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: pageLimit }}
+      pagination={{ position: "top", defaultPageSize: 25 }}
       columns={columns}
       rowKey="id"
       dataSource={data}

client/src/components/audit-trail-list/email-audit-trail-list.component.jsx

@@ -3,7 +3,6 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
-import {pageLimit} from "../../utils/config";
 
 export default function EmailAuditTrailListComponent({ loading, data }) {
   const [state, setState] = useState({
@@ -54,7 +53,7 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: pageLimit }}
+      pagination={{ position: "top", defaultPageSize: 25 }}
       columns={columns}
       rowKey="id"
       dataSource={data}

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 />
+                              <Checkbox data-cy="mark-as-received-checkbox" />
                             </Form.Item>
                           </td>
                         </tr>

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

@@ -3,22 +3,10 @@ import { useMutation } from "@apollo/client";
 import { Button, notification, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
 import { DELETE_BILL } from "../../graphql/bills.queries";
-import { insertAuditTrail } from "../../redux/application/application.actions";
-import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 
-const mapStateToProps = createStructuredSelector({});
-const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) =>
-    dispatch(insertAuditTrail({ jobid, operation, type })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(BillDeleteButton);
-
-export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
+export default function BillDeleteButton({ bill, callback }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [deleteBill] = useMutation(DELETE_BILL);
@@ -48,11 +36,6 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
 
     if (!!!result.errors) {
       notification["success"]({ message: t("bills.successes.deleted") });
-      insertAuditTrail({
-        jobid: jobid,
-        operation: AuditTrailMapping.billdeleted(bill.invoice_number),
-        type: "billdeleted",
-      });
 
       if (callback && typeof callback === "function") callback(bill.id);
     } else {

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

@@ -20,7 +20,6 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
-import BillPrintButton from "../bill-print-button/bill-print-button.component";
 import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
 import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
@@ -33,8 +32,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  insertAuditTrail: ({ jobid, operation, type }) =>
-    dispatch(insertAuditTrail({ jobid, operation, type })),
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
 });
 
 export default connect(
@@ -150,7 +149,6 @@ export function BillDetailEditcontainer({
       jobid: bill.jobid,
       billid: search.billid,
       operation: AuditTrailMapping.billupdated(bill.invoice_number),
-      type: "billupdated",
     });
 
     await refetch();
@@ -178,7 +176,7 @@ export function BillDetailEditcontainer({
             extra={
               <Space>
                 <BillDetailEditReturn data={data} />
-                <BillPrintButton billid={search.billid} />
+
                 <Popconfirm
                   visible={visible}
                   onConfirm={() => form.submit()}
@@ -196,12 +194,19 @@ export function BillDetailEditcontainer({
                     {t("general.actions.save")}
                   </Button>
                 </Popconfirm>
-                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
-                <BillMarkExportedButton bill={data && data.bills_by_pk} />
+                <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}
+                />
               </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

@@ -16,8 +16,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  insertAuditTrail: ({ jobid, operation, type }) =>
-    dispatch(insertAuditTrail({ jobid, operation, type })),
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
 });
 
 export default connect(
@@ -77,11 +77,14 @@ export function BillDetailEditReturn({
   return (
     <>
       <Modal
-        visible={visible}
+        open={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}
@@ -96,6 +99,7 @@ export function BillDetailEditReturn({
                     <tr>
                       <td>
                         <Checkbox
+                          data-cy="billline-checkbox"
                           onChange={(e) => {
                             form.setFieldsValue({
                               billlines: form
@@ -150,6 +154,7 @@ 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>
@@ -173,6 +178,7 @@ 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, Space, notification } from "antd";
+import { Button, Checkbox, Form, Modal, notification, Space } from "antd";
 import _ from "lodash";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState, useMemo } 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 AuditTrailMapping from "../../utils/AuditTrailMappings";
-import { GenerateDocument } from "../../utils/RenderTemplate";
-import { TemplateList } from "../../utils/TemplateConstants";
 import confirmDialog from "../../utils/asyncConfirm";
-import useLocalStorage from "../../utils/useLocalStorage";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 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";
+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";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -37,8 +37,8 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("billEnter")),
-  insertAuditTrail: ({ jobid, billid, operation, type }) =>
-    dispatch(insertAuditTrail({ jobid, billid, operation, type })),
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
 });
 
 const Templates = TemplateList("job_special");
@@ -94,7 +94,6 @@ function BillEnterModalContainer({
       location,
       outstanding_returns,
       inventory,
-      federal_tax_exempt,
       ...remainingValues
     } = values;
 
@@ -127,24 +126,13 @@ 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", "GET_JOB_BY_PK"],
+      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"],
     });
 
     const adjKeys = Object.keys(adjustmentsToInsert);
@@ -171,7 +159,6 @@ function BillEnterModalContainer({
             mod_lbr_ty: key,
             hours: adjustmentsToInsert[key].toFixed(1),
           }),
-          type: "jobmodifylbradj",
         });
       });
 
@@ -318,10 +305,7 @@ function BillEnterModalContainer({
     insertAuditTrail({
       jobid: values.jobid,
       billid: billId,
-      operation: AuditTrailMapping.billposted(
-        r1.data.insert_bills.returning[0].invoice_number
-      ),
-      type: "billposted",
+      operation: AuditTrailMapping.billposted(remainingValues.invoice_number),
     });
 
     if (enterAgain) {
@@ -378,11 +362,16 @@ function BillEnterModalContainer({
             {t("bills.labels.generatepartslabel")}
           </Checkbox>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()}>
+          <Button
+            data-cy="bill-form-save-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 { useTreatments } from "@splitsoftware/splitio-react";
+import { MdOpenInNew } from "react-icons/md";
 import {
   Alert,
   Divider,
@@ -12,17 +12,14 @@ 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";
@@ -31,6 +28,8 @@ 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,
@@ -50,7 +49,6 @@ export function BillFormComponent({
   job,
   loadOutstandingReturns,
   loadInventory,
-  preferredMake,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -60,11 +58,6 @@ export function BillFormComponent({
     {},
     bodyshop.imexshopid
   );
-  const { ClosingPeriod } = useTreatments(
-    ["ClosingPeriod"],
-    {},
-    bodyshop.imexshopid
-  );
 
   const handleVendorSelect = (props, opt) => {
     setDiscount(opt.discount);
@@ -79,20 +72,6 @@ export function BillFormComponent({
       });
   };
 
-  const handleFederalTaxExemptSwitchToggle = (checked) => {
-    // Early gate
-    if (!checked) return;
-    const values = form.getFieldsValue("billlines");
-    // Gate bill lines
-    if (!values?.billlines?.length) return;
-
-    const billlines = values.billlines.map((b) => {
-      b.applicable_taxes.federal = false;
-      return b;
-    });
-    form.setFieldsValue({ billlines });
-  };
-
   useEffect(() => {
     if (job) form.validateFields(["is_credit_memo"]);
   }, [job, form]);
@@ -198,9 +177,9 @@ export function BillFormComponent({
           ]}
         >
           <VendorSearchSelect
+            className="ant-select-bill-vendor"
             disabled={disabled}
             options={vendorAutoCompleteOptions}
-            preferredMake={preferredMake}
             onSelect={handleVendorSelect}
           />
         </Form.Item>
@@ -271,7 +250,10 @@ export function BillFormComponent({
             }),
           ]}
         >
-          <Input disabled={disabled || disableInvNumber} />
+          <Input
+            data-cy="bill-form-invoice"
+            disabled={disabled || disableInvNumber}
+          />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.date")}
@@ -281,40 +263,9 @@ 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 disabled={disabled} />
+          <FormDatePicker id="bill-form-date" disabled={disabled} />
         </Form.Item>
         <Form.Item
           label={t("bills.fields.is_credit_memo")}
@@ -353,9 +304,10 @@ export function BillFormComponent({
             }),
           ]}
         >
-          <Switch />
+          <Switch data-cy="is-credit-memo-switch" />
         </Form.Item>
         <Form.Item
+          data-cy="bill-form-bill-total"
           label={t("bills.fields.total")}
           name="total"
           rules={[
@@ -369,7 +321,12 @@ export function BillFormComponent({
         </Form.Item>
         {!billEdit && (
           <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-            <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
+            <Select
+              data-cy="bill-form-parts-bin"
+              style={{ width: "10rem" }}
+              disabled={disabled}
+              allowClear
+            >
               {bodyshop.md_parts_locations.map((loc, idx) => (
                 <Select.Option key={idx} value={loc}>
                   {loc}
@@ -401,16 +358,7 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} />
         </Form.Item>
-        {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
-          <Form.Item
-            span={2}
-            label={t("bills.labels.federal_tax_exempt")}
-            name="federal_tax_exempt"
-          >
-            <Switch onChange={handleFederalTaxExemptSwitchToggle} />
-          </Form.Item>
-        ) : null}
-        <Form.Item shouldUpdate span={13}>
+        <Form.Item shouldUpdate span={15}>
           {() => {
             const values = form.getFieldsValue([
               "billlines",
@@ -428,7 +376,7 @@ export function BillFormComponent({
               totals = CalculateBillTotal(values);
             if (!!totals)
               return (
-                <div align="right">
+                <div>
                   <Space wrap>
                     <Statistic
                       title={t("bills.labels.subtotal")}
@@ -437,17 +385,29 @@ export function BillFormComponent({
                     />
                     <Statistic
                       title={t("bills.labels.federal_tax")}
-                      value={totals.federalTax.toFormat()}
+                      valueRender={() => (
+                        <span data-cy="bill-form-tax">
+                          {totals.federalTax.toFormat()}
+                        </span>
+                      )}
                       precision={2}
                     />
                     <Statistic
                       title={t("bills.labels.state_tax")}
-                      value={totals.stateTax.toFormat()}
+                      valueRender={() => (
+                        <span data-cy="bill-form-tax">
+                          {totals.stateTax.toFormat()}
+                        </span>
+                      )}
                       precision={2}
                     />
                     <Statistic
                       title={t("bills.labels.local_tax")}
-                      value={totals.localTax.toFormat()}
+                      valueRender={() => (
+                        <span data-cy="bill-form-tax">
+                          {totals.localTax.toFormat()}
+                        </span>
+                      )}
                       precision={2}
                     />
                     <Statistic
@@ -468,7 +428,12 @@ export function BillFormComponent({
                             ? "green"
                             : "red",
                       }}
-                      value={totals.discrepancy.toFormat()}
+                      // value={totals.discrepancy.toFormat()}
+                      valueRender={() => (
+                        <span id="bill-form-discrepancy">
+                          {totals.discrepancy.toFormat()}
+                        </span>
+                      )}
                       precision={2}
                     />
                   </Space>
@@ -518,19 +483,20 @@ 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 BillCmdReturnsTableComponent from "../bill-cm-returns-table/bill-cm-returns-table.component";
-import BillInventoryTable from "../bill-inventory-table/bill-inventory-table.component";
 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";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -59,7 +59,6 @@ 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

@@ -80,6 +80,7 @@ export function BillEnterModalLinesComponent({
         ),
         formInput: (record, index) => (
           <BillLineSearchSelect
+            className="ant-select-bill-line"
             disabled={disabled}
             options={lineData}
             style={{ width: "100%", minWidth: "10rem" }}
@@ -133,7 +134,9 @@ export function BillEnterModalLinesComponent({
             ],
           };
         },
-        formInput: (record, index) => <Input disabled={disabled} />,
+        formInput: (record, index) => (
+          <Input data-cy="bill-line-line-desc" disabled={disabled} />
+        ),
       },
       {
         title: t("billlines.fields.quantity"),
@@ -195,6 +198,7 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => (
           <CurrencyInput
+            data-cy="bill-line-actual-price"
             min={0}
             disabled={disabled}
             onBlur={(e) => {
@@ -242,6 +246,7 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => (
           <CurrencyInput
+            data-cy="bill-line-actual-cost"
             min={0}
             disabled={disabled}
             controls={false}
@@ -314,7 +319,12 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
+          <Select
+            showSearch
+            style={{ minWidth: "3rem" }}
+            disabled={disabled}
+            className="ant-select-bill-cost-center"
+          >
             {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
               ? CiecaSelect(true, false)
               : responsibilityCenters.costs.map((item) => (
@@ -467,8 +477,7 @@ export function BillEnterModalLinesComponent({
           return {
             key: `${field.index}fedtax`,
             valuePropName: "checked",
-            initialValue:
-              form.getFieldValue("federal_tax_exempt") === true ? false : true,
+            initialValue: true,
             name: [field.name, "applicable_taxes", "federal"],
           };
         },
@@ -574,6 +583,7 @@ export function BillEnterModalLinesComponent({
         return (
           <>
             <Table
+              data-cy="bill-line-table"
               components={{
                 body: {
                   cell: EditableCell,
@@ -589,6 +599,7 @@ 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,6 +32,7 @@ export function BillMarkExportedButton({
   bodyshop,
   authLevel,
   bill,
+  ...props
 }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
@@ -92,7 +93,12 @@ export function BillMarkExportedButton({
 
   if (hasAccess)
     return (
-      <Button loading={loading} disabled={bill.exported} onClick={handleUpdate}>
+      <Button
+        loading={loading}
+        disabled={bill.exported}
+        onClick={handleUpdate}
+        {...props}
+      >
         {t("bills.labels.markexported")}
       </Button>
     );

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

@@ -1,38 +0,0 @@
-import { Button, Space } from "antd";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { GenerateDocument } from "../../utils/RenderTemplate";
-import { TemplateList } from "../../utils/TemplateConstants";
-
-export default function BillPrintButton({ billid }) {
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-  const Templates = TemplateList("job_special");
-
-  const submitHandler = async () => {
-    setLoading(true);
-    try {
-      await GenerateDocument(
-        {
-          name: Templates.parts_invoice_label_single.key,
-          variables: {
-            id: billid,
-          },
-        },
-        {},
-        "p"
-      );
-    } catch (e) {
-      console.warn("Warning: Error generating a document.");
-    }
-    setLoading(false);
-  };
-
-  return (
-    <Space wrap>
-      <Button loading={loading} onClick={submitHandler}>
-        {t("bills.labels.printlabels")}
-      </Button>
-    </Space>
-  );
-}

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

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

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

@@ -9,8 +9,8 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
-import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
@@ -54,11 +54,14 @@ export function BillsListTableComponent({
   const recordActions = (record, showView = false) => (
     <Space wrap>
       {showView && (
-        <Button onClick={() => handleOnRowClick(record)}>
+        <Button
+          onClick={() => handleOnRowClick(record)}
+          data-cy="edit-bill-button"
+        >
           <EditFilled />
         </Button>
       )}
-      <BillDeleteButton bill={record} jobid={job.id} />
+      <BillDeleteButton bill={record} />
       <BillDetailEditReturnComponent
         data={{ bills_by_pk: { ...record, jobid: job.id } }}
         disabled={
@@ -126,7 +129,12 @@ export function BillsListTableComponent({
       sortOrder:
         state.sortedInfo.columnKey === "is_credit_memo" &&
         state.sortedInfo.order,
-      render: (text, record) => <Checkbox checked={record.is_credit_memo} />,
+      render: (text, record) => (
+        <Checkbox
+          data-cy="credit-memo-checkbox"
+          checked={record.is_credit_memo}
+        />
+      ),
     },
     {
       title: t("bills.fields.exported"),
@@ -135,7 +143,9 @@ export function BillsListTableComponent({
       sorter: (a, b) => a.exported - b.exported,
       sortOrder:
         state.sortedInfo.columnKey === "exported" && state.sortedInfo.order,
-      render: (text, record) => <Checkbox checked={record.exported} />,
+      render: (text, record) => (
+        <Checkbox data-cy="bill-exported-checkbox" checked={record.exported} />
+      ),
     },
     {
       title: t("general.labels.actions"),
@@ -178,6 +188,7 @@ export function BillsListTableComponent({
           {job && job.converted ? (
             <>
               <Button
+                data-cy="bills-post-button"
                 onClick={() => {
                   setBillEnterContext({
                     actions: { refetch: billsQuery.refetch },
@@ -217,6 +228,7 @@ 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

@@ -1,375 +0,0 @@
-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, type }) =>
-    dispatch(insertAuditTrail({ jobid, operation, type })),
-  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(),
-          type: "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

@@ -1,57 +0,0 @@
-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,18 +1,13 @@
 import { Badge, List, Tag } from "antd";
-import React from "react";
+import React, { useEffect } 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";
 
@@ -29,66 +24,57 @@ function ChatConversationListComponent({
   conversationList,
   selectedConversation,
   setSelectedConversation,
+  subscribeToMoreConversations,
   loadMoreConversations,
 }) {
-  const cache = new CellMeasurerCache({
-    fixedWidth: true,
-    defaultHeight: 60,
-  });
+  useEffect(
+    () => subscribeToMoreConversations(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
-  const rowRenderer = ({ index, key, style, parent }) => {
+  const rowRenderer = ({ index, key, style }) => {
     const item = conversationList[index];
 
     return (
-      <CellMeasurer
+      <List.Item
         key={key}
-        cache={cache}
-        parent={parent}
-        columnIndex={0}
-        rowIndex={index}
+        onClick={() => setSelectedConversation(item.id)}
+        className={`chat-list-item ${
+          item.id === selectedConversation
+            ? "chat-list-selected-conversation"
+            : null
+        }`}
+        style={style}
       >
-        <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>
-          <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 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>
-            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+          ) : (
+            <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}
           </div>
-          <Badge count={item.messages_aggregate.aggregate.count || 0} />
-        </List.Item>
-      </CellMeasurer>
+          <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+        </div>
+        <Badge count={item.messages_aggregate.aggregate.count || 0} />
+      </List.Item>
     );
   };
 
@@ -100,7 +86,7 @@ function ChatConversationListComponent({
             height={height}
             width={width}
             rowCount={conversationList.length}
-            rowHeight={cache.rowHeight}
+            rowHeight={60}
             rowRenderer={rowRenderer}
             onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
               if (scrollTop + clientHeight === scrollHeight) {

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

@@ -4,7 +4,6 @@ import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import ChatArchiveButton from "../chat-archive-button/chat-archive-button.component";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatLabelComponent from "../chat-label/chat-label.component";
-import ChatPrintButton from "../chat-print-button/chat-print-button.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 
 export default function ChatConversationTitle({ conversation }) {
@@ -14,7 +13,6 @@ export default function ChatConversationTitle({ conversation }) {
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
       <ChatLabelComponent conversation={conversation} />
-      <ChatPrintButton conversation={conversation} />
       <ChatConversationTitleTags
         jobConversations={
           (conversation && conversation.job_conversations) || []

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

@@ -8,23 +8,15 @@ 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,
-  searchingForConversation,
-  phone,
-  jobid,
-  openChatByPhone,
-}) {
+export function ChatOpenButton({ bodyshop, phone, jobid, openChatByPhone }) {
   const { t } = useTranslation();
   if (!phone) return <></>;
 
@@ -37,7 +29,7 @@ export function ChatOpenButton({
       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, useQuery } from "@apollo/client";
+import { useLazyQuery, useSubscription } 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,7 +12,8 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
   CONVERSATION_LIST_QUERY,
-  UNREAD_CONVERSATION_COUNT,
+  CONVERSATION_LIST_SUBSCRIPTION,
+  UNREAD_CONVERSATION_COUNT_SUBSCRIPTION,
 } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
 import {
@@ -41,20 +42,19 @@ export function ChatPopupComponent({
   const { t } = useTranslation();
   const [pollInterval, setpollInterval] = useState(0);
 
-  const { data: unreadData } = useQuery(UNREAD_CONVERSATION_COUNT, {
+  const { data: unreadData } = useSubscription(
+    UNREAD_CONVERSATION_COUNT_SUBSCRIPTION
+  );
+
+  const [
+    getConversations,
+    { loading, data, called, refetch, fetchMore, subscribeToMore },
+  ] = useLazyQuery(CONVERSATION_LIST_QUERY, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
-    ...(pollInterval > 0 ? { pollInterval } : {}),
+    skip: !chatVisible,
   });
 
-  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 (chatVisible)
+    if (called && chatVisible)
       getConversations({
         variables: {
           offset: 0,
         },
       });
-  }, [chatVisible, getConversations]);
+  }, [chatVisible, called, getConversations]);
 
   const loadMoreConversations = useCallback(() => {
     if (data)
@@ -119,6 +119,43 @@ 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>
@@ -132,7 +169,7 @@ export function ChatPopupComponent({
             onClick={() => toggleChatVisible()}
             style={{ cursor: "pointer" }}
           >
-            <MessageOutlined className="chat-popup-info-icon" />
+            <MessageOutlined />
             <strong>{t("messaging.labels.messaging")}</strong>
           </div>
         )}

client/src/components/chat-popup/chat-popup.styles.scss

@@ -13,9 +13,6 @@
     height: 100%;
   }
 }
-.chat-popup-info-icon {
-  margin-right: 5px;
-}
 
 @media only screen and (min-width: 992px) {
   .chat-popup {

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

@@ -1,59 +0,0 @@
-import { MailOutlined, PrinterOutlined } from "@ant-design/icons";
-import { Space, Spin } from "antd";
-import React, { useState } from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { GenerateDocument } from "../../utils/RenderTemplate";
-import { TemplateList } from "../../utils/TemplateConstants";
-
-const mapStateToProps = createStructuredSelector({});
-
-const mapDispatchToProps = (dispatch) => ({
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
-});
-
-export function ChatPrintButton({ conversation }) {
-  const [loading, setLoading] = useState(false);
-
-  return (
-    <Space wrap>
-      <PrinterOutlined
-        onClick={() => {
-          setLoading(true);
-          GenerateDocument(
-            {
-              name: TemplateList("messaging").conversation_list.key,
-              variables: { id: conversation.id },
-            },
-            {
-              subject: TemplateList("messaging").conversation_list.subject,
-            },
-            "p",
-            conversation.id
-          );
-          setLoading(false);
-        }}
-      />
-      <MailOutlined
-        onClick={() => {
-          setLoading(true);
-          GenerateDocument(
-            {
-              name: TemplateList("messaging").conversation_list.key,
-              variables: { id: conversation.id },
-            },
-            {
-              subject: TemplateList("messaging").conversation_list.subject,
-            },
-            "e",
-            conversation.id
-          );
-          setLoading(false);
-        }}
-      />
-      {loading && <Spin />}
-    </Space>
-  );
-}
-export default connect(mapStateToProps, mapDispatchToProps)(ChatPrintButton);

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

@@ -16,7 +16,7 @@ export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
         },
       ]}
     >
-      <Checkbox disabled={readOnly} />
+      <Checkbox data-cy="checklist-item-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>
+    <div data-cy="config-form-components">
       {componentList.map((f, idx) => {
         const Comp = FormTypes[f.type];
 

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

@@ -4,6 +4,18 @@ 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}
@@ -15,7 +27,13 @@ export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
         },
       ]}
     >
-      <Slider disabled={readOnly} min={min || 0} max={max || 10} />
+      <Slider
+        disabled={readOnly}
+        min={min || 0}
+        max={max || 10}
+        marks={marks}
+        style={{ marginBottom: 0, marginTop: 0 }}
+      />
     </Form.Item>
   );
 }

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

@@ -35,15 +35,6 @@ export default function ContractsCarsComponent({
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
       render: (text, record) => <div>{t(record.status)}</div>,
     },
-    {
-      title: t("courtesycars.fields.readiness"),
-      dataIndex: "readiness",
-      key: "readiness",
-      sorter: (a, b) => alphaSort(a.readiness, b.readiness),
-      sortOrder:
-        state.sortedInfo.columnKey === "readiness" && state.sortedInfo.order,
-      render: (text, record) => t(record.readiness),
-    },
     {
       title: t("courtesycars.fields.year"),
       dataIndex: "year",
@@ -68,14 +59,6 @@ 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",
@@ -110,9 +93,6 @@ 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-form/contract-form.component.jsx

@@ -68,30 +68,6 @@ export default function ContractFormComponent({
             <FormDateTimePicker />
           </Form.Item>
         )}
-        {create && (
-          <Form.Item
-            shouldUpdate={(p, c) => p.scheduledreturn !== c.scheduledreturn}
-          >
-            {() => {
-              const insuranceOver =
-                selectedCar &&
-                selectedCar.insuranceexpires &&
-                moment(selectedCar.insuranceexpires)
-                  .endOf("day")
-                  .isBefore(moment(form.getFieldValue("scheduledreturn")));
-              if (insuranceOver)
-                return (
-                  <Space direction="vertical" style={{ color: "tomato" }}>
-                    <span>
-                      <WarningFilled style={{ marginRight: ".3rem" }} />
-                      {t("contracts.labels.insuranceexpired")}
-                    </span>
-                  </Space>
-                );
-              return <></>;
-            }}
-          </Form.Item>
-        )}
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item
@@ -114,17 +90,16 @@ export default function ContractFormComponent({
           >
             {() => {
               const mileageOver =
-                selectedCar && selectedCar.nextservicekm
-                  ? selectedCar.nextservicekm <= form.getFieldValue("kmstart")
-                  : false;
+                selectedCar &&
+                selectedCar.nextservicekm <= form.getFieldValue("kmstart");
+
               const dueForService =
                 selectedCar &&
                 selectedCar.nextservicedate &&
-                moment(selectedCar.nextservicedate)
-                  .endOf("day")
-                  .isSameOrBefore(
-                    moment(form.getFieldValue("scheduledreturn"))
-                  );
+                moment(selectedCar.nextservicedate).isBefore(
+                  moment(form.getFieldValue("scheduledreturn"))
+                );
+
               if (mileageOver || dueForService)
                 return (
                   <Space direction="vertical" style={{ color: "tomato" }}>
@@ -142,6 +117,7 @@ export default function ContractFormComponent({
                     </span>
                   </Space>
                 );
+
               return <></>;
             }}
           </Form.Item>

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

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import {pageLimit} from "../../utils/config";
 
 export default function ContractsJobsComponent({
   loading,
@@ -176,7 +175,7 @@ export default function ContractsJobsComponent({
         loading={loading}
         pagination={{
           position: "top",
-          defaultPageSize: pageLimit,
+          defaultPageSize: 10,
           defaultCurrent: defaultCurrent,
         }}
         columns={columns}

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,7 +15,6 @@ 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,16 +4,15 @@ 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";
-import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -210,7 +209,7 @@ export function ContractsList({
         }}
         pagination={{
           position: "top",
-          pageSize: pageLimit,
+          pageSize: 25,
           current: parseInt(page || 1),
           total: total,
         }}

client/src/components/courtesy-car-contract-list/courtesy-car-contract-list.component.jsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
-import {pageLimit} from "../../utils/config";
 
 export default function CourtesyCarContractListComponent({
   contracts,
@@ -90,7 +89,7 @@ export default function CourtesyCarContractListComponent({
         scroll={{ x: true }}
         pagination={{
           position: "top",
-          pageSize: pageLimit,
+          pageSize: 25,
           current: parseInt(page || 1),
           total: totalContracts,
         }}