Add PPC.

# Conflicts:
#	_reference/reportFiltersAndSorters.md

.circleci/config.yml

@@ -8,13 +8,13 @@ orbs:
 jobs:
   api-deploy:
     docker:
-      - image: "cimg/base:stable"
+      - image: cimg/node:18.18.2
     steps:
       - checkout
       - eb/setup
       - run:
           command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 16 running on 64bit Amazon Linux 2"
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
             eb status --verbose
             eb deploy
             eb status
@@ -42,32 +42,156 @@ 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: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+          command: npm i
 
-      - run: yarn run build
+      - run: npm run build
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-production/"
+          arguments: "--exclude '*.map'"
       - jira/notify
+      
+  rome-api-deploy:
+    docker:
+      - image: "cimg/base:stable"
+    steps:
+      - checkout
+      - eb/setup
+      - run:
+          command: |
+            eb init romeonline-productionapi -r us-east-2 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb status --verbose
+            eb deploy
+            eb status
+      - jira/notify
+
+  rome-hasura-migrate:
+    docker:
+      - image: cimg/node:16.15.0
+    parameters:
+      secret:
+        type: string
+        default: $HASURA_PROD_SECRET
+    working_directory: ~/repo/hasura
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Execute migration
+          command: |
+            npm install hasura-cli -g
+            hasura migrate apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata reload --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
+
+  rome-app-build:
+    docker:
+      - image: cimg/node:16.15.0
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-production/"
+      - jira/notify
+
+  test-rome-hasura-migrate:
+    docker:
+      - image: cimg/node:16.15.0
+    parameters:
+      secret:
+        type: string
+        default: $HASURA_ROME_TEST_SECRET
+    working_directory: ~/repo/hasura
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Execute migration
+          command: |
+            npm install hasura-cli -g
+            echo ${HASURA_TEST_SECRET}
+            hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+            hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
+
+  test-rome-app-build:
+    docker:
+      - image: cimg/node:16.15.0
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-test/"
+      - jira/notify 
+
+  app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-beta/"
+      - jira/notify  
+
+  rome-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-production-beta/"
+      - jira/notify      
 
   test-hasura-migrate:
     docker:
@@ -92,33 +216,67 @@ jobs:
   test-app-build:
     docker:
       - image: cimg/node:16.15.0
+    resource_class: large
+    working_directory: ~/repo/client
 
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-test/"
+          arguments: "--exclude '*.map'"
+      - jira/notify
+
+  test-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    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: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+          command: npm i
 
-      - run: yarn run build:test
+      - run: npm run build:test
 
       - aws-s3/sync:
           from: build
-          to: "s3://imex-online-test/"
+          to: "s3://imex-online-test-beta/"
       - jira/notify
 
+  rome-test-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:test
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://rome-online-test-beta/"
+      - jira/notify
+
+
   admin-app-build:
     docker:
       - image: cimg/node:16.15.0
@@ -160,21 +318,59 @@ workflows:
           filters:
             branches:
               only: master
+      - app-beta-build:
+          filters:
+            branches:
+              only: master-beta
+      - rome-app-beta-build:
+          filters:
+            branches:
+              only: rome/master-beta
       - hasura-migrate:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
               only: master
+      - rome-api-deploy:
+          filters:
+            branches:
+              only: rome/master
+      - rome-app-build:
+          filters:
+            branches:
+              only: rome/master
+      - rome-hasura-migrate:
+          secret: ${HASURA_PROD_SECRET}
+          filters:
+            branches:
+              only: rome/master
       - test-app-build:
           filters:
             branches:
               only: test
+      - rome-test-app-beta-build:
+          filters:
+            branches:
+              only: rome/test-beta
+      - test-app-beta-build:
+          filters:
+            branches:
+              only: test-beta
       - test-hasura-migrate:
           secret: ${HASURA_TEST_SECRET}
           filters:
             branches:
               only: test
+      - test-rome-app-build:
+          filters:
+            branches:
+              only: rome/test
+      - test-rome-hasura-migrate:
+          secret: ${HASURA_ROME_TEST_SECRET}
+          filters:
+            branches:
+              only: rome/test
       #- admin-app-build:
       #filters:
       #branches:
-      #only: master
+      #only: master

.gitignore

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

.npmrc

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

.prettierrc.js

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

@@ -0,0 +1,184 @@
+# 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`
+-
+### 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.
+
+## 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.development

@@ -1,13 +1,14 @@
 REACT_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
 REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
 REACT_APP_GA_CODE=231099835
-REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+REACT_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
 REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
 REACT_APP_CLOUDINARY_API_KEY=957865933348715
 REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
 REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
-REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+REACT_APP_COUNTRY=USA

client/.env.production

@@ -1,14 +1,13 @@
-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_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
 REACT_APP_GA_CODE=231103507
-REACT_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU","authDomain":"imex-prod.firebaseapp.com","databaseURL":"https://imex-prod.firebaseio.com","projectId":"imex-prod","storageBucket":"imex-prod.appspot.com","messagingSenderId":"253497221485","appId":"1:253497221485:web:3c81c483b94db84b227a64","measurementId":"G-NTWBKG2L0M"}
+REACT_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
 REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
 REACT_APP_CLOUDINARY_API_KEY=473322739956866
 REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
-REACT_APP_REPORTS_SERVER_URL=https://reports.imex.online
+REACT_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
+REACT_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
 REACT_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk

client/.env.test

@@ -1,14 +1,14 @@
-REACT_APP_GRAPHQL_ENDPOINT=https://db.test.bodyshop.app/v1/graphql
-REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.bodyshop.app/v1/graphql
-REACT_APP_GA_CODE=231099835
-REACT_APP_FIREBASE_CONFIG={   "apiKey":"AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",   "authDomain":"imex-test.firebaseapp.com",   "projectId":"imex-test",   "storageBucket":"imex-test.appspot.com",   "messagingSenderId":"991923618608",   "appId":"1:991923618608:web:633437569cdad78299bef5",   "measurementId":"G-TW0XLZEH18"}
+REACT_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
+REACT_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
+REACT_APP_GA_CODE=231103507
+REACT_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
 REACT_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
 REACT_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
 REACT_APP_CLOUDINARY_API_KEY=473322739956866
 REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
-REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
+REACT_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
-REACT_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
-REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+REACT_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
+REACT_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 REACT_APP_IS_TEST=true
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc

client/.gitignore

@@ -0,0 +1,3 @@
+
+# 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: {
@@ -27,7 +27,7 @@ module.exports = {
           lessOptions: {
             modifyVars: {
               ...(process.env.NODE_ENV === "development"
-                ? { "@primary-color": "#a51d1d" }
+                ? { "@primary-color": "#B22234" }
                 : {
                     //"@primary-color": "#1DA57A"
                   }),

client/cypress.config.js

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

client/cypress.env.json

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

client/cypress.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

client/cypress/fixtures/profile.json

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

client/cypress/fixtures/users.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

client/cypress/plugins/index.js

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

client/cypress/support/commands.js

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

client/cypress/support/index.js

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

client/cypress/tsconfig.json

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

client/package.json

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

client/public/firebase-messaging-sw.js

@@ -28,6 +28,17 @@ switch (this.location.hostname) {
       // measurementId: "${config.measurementId}",
     };
     break;
+  case "romeonline.io":
+    firebaseConfig = {
+      apiKey: "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",
+      authDomain: "rome-prod-1.firebaseapp.com",
+      projectId: "rome-prod-1",
+      storageBucket: "rome-prod-1.appspot.com",
+      messagingSenderId: "147786367145",
+      appId: "1:147786367145:web:9d4cba68071c3f29a8a9b8",
+      measurementId: "G-G8Z9DRHTZS",
+    };
+    break;
   case "imex.online":
   default:
     firebaseConfig = {

client/public/index.html

@@ -2,23 +2,81 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" href="%PUBLIC_URL%/ro-favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#002366" />
-    <meta name="description" content="ImEX Online" />
+    <meta name="description" content="Rome Online" />
     <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+
+    <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
+
+<call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001 party="LiveChat528346"></call-us-selector>
+
+<!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
+
+<!--<call-us
+
+phonesystem-url=https://rometech.east.3cx.us:5001
+
+style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
+
+id="wp-live-chat-by-3CX"
+
+minimized="true"
+
+animation-style="noanimation"
+
+party="LiveChat528346"
+
+minimized-style="bubbleright"
+
+allow-call="true"
+
+allow-video="false"
+
+allow-soundnotifications="true"
+
+enable-mute="true"
+
+enable-onmobile="true"
+
+offline-enabled="true"
+
+enable="true"
+
+ignore-queueownership="false"
+
+authentication="both"
+
+show-operator-actual-name="true"
+
+aknowledge-received="true"
+
+gdpr-enabled="false"
+
+message-userinfo-format="name"
+
+message-dateformat="both"
+
+lang="browser"
+
+button-icon-type="default"
+
+greeting-visibility="none"
+
+greeting-offline-visibility="none"
+
+chat-delay="2000"
+
+enable-direct-call="true"
+
+enable-ga="false"
+
+></call-us>-->
+
+<script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js id="tcx-callus-js" charset="utf-8"></script>
+
     <link rel="apple-touch-icon" href="logo192.png" />
-    <script type="text/javascript">
-      window.$crisp = [];
-      window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
-      (function () {
-        d = document;
-        s = d.createElement("script");
-        s.src = "https://client.crisp.chat/l.js";
-        s.async = 1;
-        d.getElementsByTagName("head")[0].appendChild(s);
-      })();
-    </script>
     <script>
       !(function () {
         "use strict";
@@ -77,7 +135,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>ImEX Online</title>
+    <title>Rome Online</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

client/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "ImEX Online",
-  "name": "ImEX Online",
+  "short_name": "Rome Online",
+  "name": "Rome Online",
   "description": "The ultimate bodyshop management system.",
   "icons": [
     {

client/src/App/App.container.jsx

@@ -8,6 +8,7 @@ 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");
 
@@ -18,7 +19,7 @@ export const factory = SplitSdk({
   },
 });
 
-export default function AppContainer() {
+function AppContainer() {
   const { t } = useTranslation();
 
   return (
@@ -27,6 +28,12 @@ export default function AppContainer() {
         //componentSize="small"
         input={{ autoComplete: "new-password" }}
         locale={enLocale}
+        theme={{
+          token: {
+            colorPrimary: "#326ade",
+            colorInfo: "#326ade"
+          },
+        }}
         form={{
           validateMessages: {
             // eslint-disable-next-line no-template-curly-in-string
@@ -42,3 +49,5 @@ export default function AppContainer() {
     </ApolloProvider>
   );
 }
+
+export default Sentry.withProfiler(AppContainer);

client/src/App/App.jsx

@@ -22,6 +22,7 @@ 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")
@@ -57,7 +58,6 @@ export function App({
     if (!navigator.onLine) {
       setOnline(false);
     }
-
     checkUserSession();
   }, [checkUserSession, setOnline]);
 
@@ -73,13 +73,14 @@ export function App({
   window.addEventListener("online", function (e) {
     setOnline(true);
   });
+
   useEffect(() => {
     if (currentUser.authorized && bodyshop) {
       client.setAttribute("imexshopid", bodyshop.imexshopid);
 
+      LogRocket.init("rome-online/rome-online");
       if (client.getTreatment("LogRocket_Tracking") === "on") {
-        console.log("LR Start");
-        LogRocket.init("gvfvfw/bodyshopapp");
+        LogRocket.init("rome-online/rome-online");
       }
     }
   }, [bodyshop, client, currentUser.authorized]);
@@ -107,9 +108,11 @@ export function App({
       />
     );
 
+  handleBeta();
+
   return (
     <Switch>
-      <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>
+      <Suspense fallback={<LoadingSpinner />}>
         <ErrorBoundary>
           <Route exact path="/" component={LandingPage} />
         </ErrorBoundary>

client/src/App/App.styles.scss

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

client/src/components/_test/paymentMethod.jsx

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

client/src/components/_test/payment_response.json

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

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

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

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

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

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

@@ -15,6 +15,7 @@ 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";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -210,7 +211,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -15,6 +15,7 @@ import PaymentExportButton from "../payment-export-button/payment-export-button.
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -209,7 +210,7 @@ export function AccountingPayablesTableComponent({
       <Table
         loading={loading}
         dataSource={dataSource}
-        pagination={{ position: "top", pageSize: 50 }}
+        pagination={{ position: "top", pageSize: pageLimit }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}

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

@@ -4,6 +4,7 @@ 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({
@@ -74,7 +75,7 @@ export default function AuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
       columns={columns}
       rowKey="id"
       dataSource={data}

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

@@ -3,6 +3,7 @@ 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({
@@ -53,7 +54,7 @@ export default function EmailAuditTrailListComponent({ loading, data }) {
     <Table
       {...formItemLayout}
       loading={loading}
-      pagination={{ position: "top", defaultPageSize: 25 }}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
       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 data-cy="mark-as-received-checkbox" />
+                              <Checkbox />
                             </Form.Item>
                           </td>
                         </tr>

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

@@ -3,10 +3,22 @@ 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";
 
-export default function BillDeleteButton({ bill, callback }) {
+const mapStateToProps = createStructuredSelector({});
+const mapDispatchToProps = (dispatch) => ({
+  insertAuditTrail: ({ jobid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, operation })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(BillDeleteButton);
+
+export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [deleteBill] = useMutation(DELETE_BILL);
@@ -36,6 +48,10 @@ export default function BillDeleteButton({ bill, callback }) {
 
     if (!!!result.errors) {
       notification["success"]({ message: t("bills.successes.deleted") });
+      insertAuditTrail({
+        jobid: jobid,
+        operation: AuditTrailMapping.billdeleted(bill.invoice_number),
+      });
 
       if (callback && typeof callback === "function") callback(bill.id);
     } else {

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

@@ -20,6 +20,7 @@ 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";
@@ -176,7 +177,7 @@ export function BillDetailEditcontainer({
             extra={
               <Space>
                 <BillDetailEditReturn data={data} />
-
+                <BillPrintButton billid={search.billid} />
                 <Popconfirm
                   visible={visible}
                   onConfirm={() => form.submit()}
@@ -194,19 +195,12 @@ export function BillDetailEditcontainer({
                     {t("general.actions.save")}
                   </Button>
                 </Popconfirm>
-                <BillReeportButtonComponent
-                  data-cy="bill-mark-reexport-button"
-                  bill={data && data.bills_by_pk}
-                />
-                <BillMarkExportedButton
-                  data-cy="bill-mark-export-button"
-                  bill={data && data.bills_by_pk}
-                />
+                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
+                <BillMarkExportedButton bill={data && data.bills_by_pk} />
               </Space>
             }
           />
           <Form
-            data-cy="bill-edit-form"
             form={form}
             onFinish={handleFinish}
             initialValues={transformData(data)}

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

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

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

@@ -1,18 +1,19 @@
 import { useApolloClient, useMutation } from "@apollo/client";
-import { Button, Checkbox, Form, Modal, notification, Space } from "antd";
+import { useTreatments } from "@splitsoftware/splitio-react";
+import { Button, Checkbox, Form, Modal, Space, notification } from "antd";
 import _ from "lodash";
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
+import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import {
   QUERY_JOB_LBR_ADJUSTMENTS,
   UPDATE_JOB,
 } from "../../graphql/jobs.queries";
 import { MUTATION_MARK_RETURN_RECEIVED } from "../../graphql/parts-orders.queries";
-import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
@@ -20,15 +21,15 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import confirmDialog from "../../utils/asyncConfirm";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import BillFormContainer from "../bill-form/bill-form.container";
-import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
-import { handleUpload } from "../documents-upload/documents-upload.utility";
-import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
-import useLocalStorage from "../../utils/useLocalStorage";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import confirmDialog from "../../utils/asyncConfirm";
+import useLocalStorage from "../../utils/useLocalStorage";
+import BillFormContainer from "../bill-form/bill-form.container";
+import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
+import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
+import { handleUpload } from "../documents-upload/documents-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -37,8 +38,8 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("billEnter")),
-  insertAuditTrail: ({ jobid, operation }) =>
-    dispatch(insertAuditTrail({ jobid, operation })),
+  insertAuditTrail: ({ jobid, billid, operation }) =>
+    dispatch(insertAuditTrail({ jobid, billid, operation })),
 });
 
 const Templates = TemplateList("job_special");
@@ -63,9 +64,19 @@ function BillEnterModalContainer({
     "enter_bill_generate_label",
     false
   );
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
   const formValues = useMemo(() => {
     return {
       ...billEnterModal.context.bill,
+      //Added as a part of IO-2436 for capturing parts price changes.
+      billlines: billEnterModal.context?.bill?.billlines?.map((line) => ({
+        ...line,
+        original_actual_price: line.actual_price,
+      })),
       jobid:
         (billEnterModal.context.job && billEnterModal.context.job.id) || null,
       federal_tax_rate:
@@ -94,10 +105,12 @@ function BillEnterModalContainer({
       location,
       outstanding_returns,
       inventory,
+      federal_tax_exempt,
       ...remainingValues
     } = values;
 
     let adjustmentsToInsert = {};
+    let payrollAdjustmentsToInsert = [];
 
     const r1 = await insertBill({
       variables: {
@@ -113,28 +126,72 @@ function BillEnterModalContainer({
                     lbr_adjustment,
                     location: lineLocation,
                     part_type,
+                    create_ppc,
+                    original_actual_price,
                     ...restI
                   } = i;
 
-                  if (deductedfromlbr) {
-                    adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] =
-                      (adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] || 0) -
-                      restI.actual_price / lbr_adjustment.rate;
+                  if (Enhanced_Payroll.treatment === "on") {
+                    if (
+                      deductedfromlbr &&
+                      true //payroll is on
+                    ) {
+                      payrollAdjustmentsToInsert.push({
+                        id: i.joblineid,
+                        convertedtolbr: true,
+                        convertedtolbr_data: {
+                          mod_lb_hrs: lbr_adjustment.mod_lb_hrs * -1,
+                          mod_lbr_ty: lbr_adjustment.mod_lbr_ty,
+                        },
+                      });
+                    }
+                  } else {
+                    if (deductedfromlbr) {
+                      adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] =
+                        (adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] || 0) -
+                        restI.actual_price / lbr_adjustment.rate;
+                    }
                   }
+
                   return {
                     ...restI,
                     deductedfromlbr: deductedfromlbr,
                     lbr_adjustment,
                     joblineid: i.joblineid === "noline" ? null : i.joblineid,
+                    applicable_taxes: {
+                      federal:
+                        (i.applicable_taxes && i.applicable_taxes.federal) ||
+                        false,
+                      state:
+                        (i.applicable_taxes && i.applicable_taxes.state) ||
+                        false,
+                      local:
+                        (i.applicable_taxes && i.applicable_taxes.local) ||
+                        false,
+                    },
                   };
                 }),
             },
           },
         ],
       },
-      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"],
+      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID", "GET_JOB_BY_PK"],
     });
 
+    await Promise.all(
+      payrollAdjustmentsToInsert.map((li) => {
+        return updateJobLines({
+          variables: {
+            lineId: li.id,
+            line: {
+              convertedtolbr: li.convertedtolbr,
+              convertedtolbr_data: li.convertedtolbr_data,
+            },
+          },
+        });
+      })
+    );
+
     const adjKeys = Object.keys(adjustmentsToInsert);
     if (adjKeys.length > 0) {
       //Query the adjustments, merge, and update them.
@@ -243,6 +300,14 @@ function BillEnterModalContainer({
                   location: li.location || location,
                   status:
                     bodyshop.md_order_statuses.default_received || "Received*",
+                  //Added parts price changes.
+                  ...(li.create_ppc &&
+                  li.original_actual_price !== li.actual_price
+                    ? {
+                        act_price_before_ppc: li.original_actual_price,
+                        act_price: li.actual_price,
+                      }
+                    : {}),
                 },
               },
             });
@@ -305,16 +370,18 @@ function BillEnterModalContainer({
     insertAuditTrail({
       jobid: values.jobid,
       billid: billId,
-      operation: AuditTrailMapping.billposted(remainingValues.invoice_number),
+      operation: AuditTrailMapping.billposted(
+        r1.data.insert_bills.returning[0].invoice_number
+      ),
     });
 
     if (enterAgain) {
-      form.resetFields();
-      form.resetFields();
+      // form.resetFields();
       form.setFieldsValue({
         ...formValues,
         billlines: [],
       });
+      form.resetFields();
     } else {
       toggleModalVisible();
     }
@@ -362,16 +429,11 @@ function BillEnterModalContainer({
             {t("bills.labels.generatepartslabel")}
           </Checkbox>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button
-            data-cy="bill-form-save-button"
-            loading={loading}
-            onClick={() => form.submit()}
-          >
+          <Button loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}
           </Button>
           {billEnterModal.context && billEnterModal.context.id ? null : (
             <Button
-              data-cy="bill-form-savenew-button"
               type="primary"
               loading={loading}
               onClick={() => {

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

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

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

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

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

@@ -2,6 +2,7 @@ import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
   Button,
+  Checkbox,
   Form,
   Input,
   InputNumber,
@@ -46,6 +47,13 @@ export function BillEnterModalLinesComponent({
     {},
     bodyshop && bodyshop.imexshopid
   );
+
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
+
   const columns = (remove) => {
     return [
       {
@@ -80,7 +88,6 @@ export function BillEnterModalLinesComponent({
         ),
         formInput: (record, index) => (
           <BillLineSearchSelect
-            className="ant-select-bill-line"
             disabled={disabled}
             options={lineData}
             style={{ width: "100%", minWidth: "10rem" }}
@@ -95,6 +102,7 @@ export function BillEnterModalLinesComponent({
                         line_desc: opt.line_desc,
                         quantity: opt.part_qty || 1,
                         actual_price: opt.cost,
+                        original_actual_price: opt.cost,
                         cost_center: opt.part_type
                           ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
                             ? opt.part_type !== "PAE"
@@ -134,9 +142,7 @@ export function BillEnterModalLinesComponent({
             ],
           };
         },
-        formInput: (record, index) => (
-          <Input data-cy="bill-line-line-desc" disabled={disabled} />
-        ),
+        formInput: (record, index) => <Input disabled={disabled} />,
       },
       {
         title: t("billlines.fields.quantity"),
@@ -198,7 +204,6 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => (
           <CurrencyInput
-            data-cy="bill-line-actual-price"
             min={0}
             disabled={disabled}
             onBlur={(e) => {
@@ -224,6 +229,43 @@ export function BillEnterModalLinesComponent({
             }}
           />
         ),
+        additional: (record, index) => (
+          <Form.Item
+            dependencies={["billlines", record.name, "actual_price"]}
+            noStyle
+          >
+            {() => {
+              const billLine = getFieldValue(["billlines", record.name]);
+              const jobLine = lineData.find(
+                (line) => line.id === billLine?.joblineid
+              );
+
+              if (
+                !billEdit &&
+                billLine &&
+                jobLine &&
+                billLine?.actual_price !== jobLine?.act_price
+              ) {
+                return (
+                  <Space size="small">
+                    <Form.Item
+                      noStyle
+                      label={t("joblines.fields.create_ppc")}
+                      key={`${index}ppc`}
+                      valuePropName="checked"
+                      name={[record.name, "create_ppc"]}
+                    >
+                      <Checkbox />
+                    </Form.Item>
+                    {t("joblines.fields.create_ppc")}
+                  </Space>
+                );
+              } else {
+                return null;
+              }
+            }}
+          </Form.Item>
+        ),
       },
       {
         title: t("billlines.fields.actual_cost"),
@@ -246,7 +288,6 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => (
           <CurrencyInput
-            data-cy="bill-line-actual-cost"
             min={0}
             disabled={disabled}
             controls={false}
@@ -319,12 +360,7 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <Select
-            showSearch
-            style={{ minWidth: "3rem" }}
-            disabled={disabled}
-            className="ant-select-bill-cost-center"
-          >
+          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
             {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
               ? CiecaSelect(true, false)
               : responsibilityCenters.costs.map((item) => (
@@ -371,7 +407,7 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => <Switch disabled={disabled} />,
         additional: (record, index) => (
-          <Form.Item shouldUpdate style={{ display: "inline-block" }}>
+          <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
             {() => {
               const price = getFieldValue([
                 "billlines",
@@ -386,12 +422,31 @@ export function BillEnterModalLinesComponent({
                 "rate",
               ]);
 
+              const billline = getFieldValue(["billlines", record.name]);
+
+              const jobline = lineData.find(
+                (line) => line.id === billline?.joblineid
+              );
+
+              const employeeTeamName = bodyshop.employee_teams.find(
+                (team) => team.id === jobline?.assigned_team
+              );
+
               if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
                 return (
                   <div>
+                    <Space>
+                      {t("joblines.fields.assigned_team", {
+                        name: employeeTeamName?.name,
+                      })}
+                      {`${jobline.mod_lb_hrs} units/${t(
+                        `joblines.fields.lbr_types.${jobline.mod_lbr_ty}`
+                      )}`}
+                    </Space>
                     <Form.Item
                       label={t("joblines.fields.mod_lbr_ty")}
                       key={`${index}modlbrty`}
+                      initialValue={jobline ? jobline.mod_lbr_ty : null}
                       rules={[
                         {
                           required: true,
@@ -445,22 +500,44 @@ export function BillEnterModalLinesComponent({
                         </Select.Option>
                       </Select>
                     </Form.Item>
-                    <Form.Item
-                      label={t("jobs.labels.adjustmentrate")}
-                      name={[record.name, "lbr_adjustment", "rate"]}
-                      initialValue={bodyshop.default_adjustment_rate}
-                      rules={[
-                        {
-                          required: true,
-                          //message: t("general.validation.required"),
-                        },
-                      ]}
-                    >
-                      <InputNumber precision={2} min={0.01} />
-                    </Form.Item>
-                    {price &&
-                      adjustmentRate &&
-                      `${(price / adjustmentRate).toFixed(1)} hrs`}
+                    {Enhanced_Payroll.treatment === "on" ? (
+                      <Form.Item
+                        label={t("billlines.labels.mod_lbr_adjustment")}
+                        name={[record.name, "lbr_adjustment", "mod_lb_hrs"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <InputNumber
+                          precision={5}
+                          min={0.01}
+                          max={jobline ? jobline.mod_lb_hrs : 0}
+                        />
+                      </Form.Item>
+                    ) : (
+                      <Form.Item
+                        label={t("jobs.labels.adjustmentrate")}
+                        name={[record.name, "lbr_adjustment", "rate"]}
+                        initialValue={bodyshop.default_adjustment_rate}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <InputNumber precision={2} min={0.01} />
+                      </Form.Item>
+                    )}
+
+                    <Space>
+                      {price &&
+                        adjustmentRate &&
+                        `${(price / adjustmentRate).toFixed(1)} hrs`}
+                    </Space>
                   </div>
                 );
               return <></>;
@@ -468,21 +545,21 @@ export function BillEnterModalLinesComponent({
           </Form.Item>
         ),
       },
-      {
-        title: t("billlines.fields.federal_tax_applicable"),
-        dataIndex: "applicable_taxes.federal",
-        editable: true,
+      // {
+      //   title: t("billlines.fields.federal_tax_applicable"),
+      //   dataIndex: "applicable_taxes.federal",
+      //   editable: true,
 
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}fedtax`,
-            valuePropName: "checked",
-            initialValue: true,
-            name: [field.name, "applicable_taxes", "federal"],
-          };
-        },
-        formInput: (record, index) => <Switch disabled={disabled} />,
-      },
+      //   formItemProps: (field) => {
+      //     return {
+      //       key: `${field.index}fedtax`,
+      //       valuePropName: "checked",
+      //       //  initialValue: true,
+      //       name: [field.name, "applicable_taxes", "federal"],
+      //     };
+      //   },
+      //   formInput: (record, index) => <Switch disabled={disabled} />,
+      // },
       {
         title: t("billlines.fields.state_tax_applicable"),
         dataIndex: "applicable_taxes.state",
@@ -497,20 +574,20 @@ export function BillEnterModalLinesComponent({
         },
         formInput: (record, index) => <Switch disabled={disabled} />,
       },
-      {
-        title: t("billlines.fields.local_tax_applicable"),
-        dataIndex: "applicable_taxes.local",
-        editable: true,
+      // {
+      //   title: t("billlines.fields.local_tax_applicable"),
+      //   dataIndex: "applicable_taxes.local",
+      //   editable: true,
 
-        formItemProps: (field) => {
-          return {
-            key: `${field.index}localtax`,
-            valuePropName: "checked",
-            name: [field.name, "applicable_taxes", "local"],
-          };
-        },
-        formInput: (record, index) => <Switch disabled={disabled} />,
-      },
+      //   formItemProps: (field) => {
+      //     return {
+      //       key: `${field.index}localtax`,
+      //       valuePropName: "checked",
+      //       name: [field.name, "applicable_taxes", "local"],
+      //     };
+      //   },
+      //   formInput: (record, index) => <Switch disabled={disabled} />,
+      // },
       {
         title: t("general.labels.actions"),
 
@@ -583,7 +660,6 @@ export function BillEnterModalLinesComponent({
         return (
           <>
             <Table
-              data-cy="bill-line-table"
               components={{
                 body: {
                   cell: EditableCell,
@@ -599,7 +675,6 @@ export function BillEnterModalLinesComponent({
             />
             <Form.Item>
               <Button
-                data-cy="bill-line-add-button"
                 disabled={disabled}
                 onClick={() => {
                   add();
@@ -637,7 +712,7 @@ const EditableCell = ({
   if (additional)
     return (
       <td {...restProps}>
-        <Space size="small">
+        <div size="small">
           <Form.Item
             name={dataIndex}
             labelCol={{ span: 0 }}
@@ -646,7 +721,7 @@ const EditableCell = ({
             {(formInput && formInput(record, record.name)) || children}
           </Form.Item>
           {additional && additional(record, record.name)}
-        </Space>
+        </div>
       </td>
     );
   if (wrapper)

client/src/components/bill-form/bill-form.totals.utility.js

@@ -19,14 +19,14 @@ export const CalculateBillTotal = (invoice) => {
       }).multiply(i.quantity || 1);
 
       subtotal = subtotal.add(itemTotal);
-      if (i.applicable_taxes.federal) {
+      if (i.applicable_taxes?.federal) {
         federalTax = federalTax.add(
           itemTotal.percentage(federal_tax_rate || 0)
         );
       }
-      if (i.applicable_taxes.state)
+      if (i.applicable_taxes?.state)
         stateTax = stateTax.add(itemTotal.percentage(state_tax_rate || 0));
-      if (i.applicable_taxes.local)
+      if (i.applicable_taxes?.local)
         localTax = localTax.add(itemTotal.percentage(local_tax_rate || 0));
     }
   });

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

@@ -63,6 +63,12 @@ const BillLineSearchSelect = (
                   item.oem_partno ? ` - ${item.oem_partno}` : ""
                 }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
               </span>
+              {item.act_price === 0 && item.mod_lb_hrs > 0 && (
+                <span style={{ float: "right", paddingleft: "1rem" }}>
+                  {`${item.mod_lb_hrs} units`}
+                </span>
+              )}
+
               <span style={{ float: "right", paddingleft: "1rem" }}>
                 {item.act_price
                   ? `$${item.act_price && item.act_price.toFixed(2)}`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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