feature/IO-3385-Remove-CASL-From-Rome - Remove CASL Report from Rome Customers.

Hotfix/2025 10 10 - Change BullMQ Key Delimiters based on system logs.

Approved-by: Patrick Fic

.circleci/config.yml

@@ -9,13 +9,13 @@ orbs:
 jobs:
   imex-api-deploy:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     steps:
       - checkout
       - eb/setup
       - run:
           command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 22 running on 64bit Amazon Linux 2023"
             eb status --verbose
             eb deploy
             eb status
@@ -28,7 +28,7 @@ jobs:
 
   imex-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -52,7 +52,7 @@ jobs:
           pipeline_number: << pipeline.number >>
   imex-app-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
     steps:
@@ -77,7 +77,7 @@ jobs:
 
   imex-app-beta-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
 
@@ -88,7 +88,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:production:imex
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:production:imex
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -114,7 +114,7 @@ jobs:
       - eb/setup
       - run:
           command: |
-            eb init romeonline-productionapi -r us-east-2 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb init romeonline-productionapi -r us-east-2 -p "Node.js 22 running on 64bit Amazon Linux 2023"
             eb status --verbose
             eb deploy
             eb status
@@ -126,7 +126,7 @@ jobs:
           pipeline_number: << pipeline.number >>
   rome-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -150,8 +150,8 @@ jobs:
           pipeline_number: << pipeline.number >>
   rome-app-build:
     docker:
-      - image: cimg/node:18.18.2
-
+      - image: cimg/node:22.13.1
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -161,7 +161,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:production:rome
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:production:rome
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -181,7 +181,7 @@ jobs:
 
   test-rome-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -208,8 +208,8 @@ jobs:
 
   test-rome-app-build:
     docker:
-      - image: cimg/node:18.18.2
-
+      - image: cimg/node:22.13.1
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -219,7 +219,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test:rome
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:rome
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -239,7 +239,7 @@ jobs:
 
   test-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -266,7 +266,7 @@ jobs:
 
   imex-test-app-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
 
@@ -277,7 +277,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test:imex
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:imex
 
       - aws-s3/sync:
           from: build
@@ -286,7 +286,7 @@ jobs:
 
   imex-test-app-beta-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
 
@@ -298,7 +298,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test:imex
+      - run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:imex
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID

.dockerignore

@@ -11,7 +11,6 @@ node_modules
 # Files to exclude
 .ebignore
 .editorconfig
-.eslintrc.json
 .gitignore
 .prettierrc.js
 Dockerfile
@@ -19,6 +18,6 @@ README.MD
 bodyshop_translations.babel
 docker-compose.yml
 ecosystem.config.js
-
+eslint.config.mjs
 # Optional: Exclude logs and temporary files
 *.log

.eslintrc.json

@@ -1,19 +0,0 @@
-{
-  "env": {
-    "es6": true,
-    "node": true
-  },
-  "extends": "eslint:recommended",
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
-  "rules": {
-    "no-console": "off"
-  },
-  "settings": {}
-}

.gitignore

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

.platform/nginx/conf.d/proxy.conf

@@ -1,2 +1,2 @@
 client_max_body_size 50M;
-client_body_buffer_size 5M;
+client_body_buffer_size 5M;

Dockerfile

@@ -3,7 +3,7 @@ FROM amazonlinux:2023
 
 # Install Git and Node.js (Amazon Linux 2023 uses the DNF package manager)
 RUN dnf install -y git \
-    && curl -sL https://rpm.nodesource.com/setup_20.x | bash - \
+    && curl -sL https://rpm.nodesource.com/setup_22.x | bash - \
     && dnf install -y nodejs \
     && dnf clean all
 
@@ -56,4 +56,5 @@ COPY . .
 EXPOSE 4000 9229
 
 # Start the application
-CMD ["nodemon", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]
+RUN echo "Starting the application..."
+CMD ["nodemon", "--ignore", "./server/job/test/fixtures", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]

_reference/localEmailViewer/index.js

@@ -1,116 +1,96 @@
 // index.js
 
-import express from 'express';
-import fetch from 'node-fetch';
-import {simpleParser} from 'mailparser';
+import express from "express";
+import fetch from "node-fetch";
+import { simpleParser } from "mailparser";
 
 const app = express();
 const PORT = 3334;
 
-app.get('/', async (req, res) => {
-    try {
-        const response = await fetch('http://localhost:4566/_aws/ses');
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
-        }
-        const data = await response.json();
-        const messagesHtml = await parseMessages(data.messages);
-        res.send(renderHtml(messagesHtml));
-    } catch (error) {
-        console.error('Error fetching messages:', error);
-        res.status(500).send('Error fetching messages');
+app.get("/", async (req, res) => {
+  try {
+    const response = await fetch("http://localhost:4566/_aws/ses");
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
     }
+    const data = await response.json();
+    const messagesHtml = await parseMessages(data.messages);
+    res.send(renderHtml(messagesHtml));
+  } catch (error) {
+    console.error("Error fetching messages:", error);
+    res.status(500).send("Error fetching messages");
+  }
 });
 
 async function parseMessages(messages) {
-    const parsedMessages = await Promise.all(
-        messages.map(async (message, index) => {
-            try {
-                const parsed = await simpleParser(message.RawData);
-                return `
-                    <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: lightgray">
-                     <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: white">
-                        <div class="mb-2">
-                            <span class="font-bold text-lg">Message ${index + 1}</span>
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">From:</span> ${message.Source}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Region:</span> ${message.Region}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Timestamp:</span> ${message.Timestamp}
-                        </div>
-                     </div>
-                        <div class="prose">
-                            ${parsed.html || parsed.textAsHtml || 'No HTML content available'}
-                        </div>
-                    </div>
-                `;
-            } catch (error) {
-                console.error('Error parsing email:', error);
-                return `
-                    <div class="bg-white shadow-md rounded-lg p-4 mb-6">
-                        <div class="mb-2">
-                            <span class="font-bold text-lg">Message ${index + 1}</span>
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">From:</span> ${message.Source}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Region:</span> ${message.Region}
-                        </div>
-                        <div class="mb-2">
-                            <span class="font-semibold">Timestamp:</span> ${message.Timestamp}
-                        </div>
-                        <div class="text-red-500">
-                            Error parsing email content
-                        </div>
-                    </div>
-                `;
-            }
-        })
-    );
-    return parsedMessages.join('');
+  const parsedMessages = await Promise.all(
+    messages.map(async (message, index) => {
+      try {
+        const parsed = await simpleParser(message.RawData);
+        return `
+          <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: lightgray">
+            <div class="shadow-md rounded-lg p-4 mb-6" style="background-color: white">
+              <div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
+              <div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
+              <div class="mb-2"><span class="font-semibold">To:</span> ${parsed.to.text || "No To Address"}</div>
+              <div class="mb-2"><span class="font-semibold">Subject:</span> ${parsed.subject || "No Subject"}</div>
+              <div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
+              <div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
+            </div>
+            <div class="prose">${parsed.html || parsed.textAsHtml || "No HTML content available"}</div>
+          </div>
+        `;
+      } catch (error) {
+        console.error("Error parsing email:", error);
+        return `
+          <div class="bg-white shadow-md rounded-lg p-4 mb-6">
+            <div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
+            <div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
+            <div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
+            <div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
+            <div class="text-red-500">Error parsing email content</div>
+          </div>
+        `;
+      }
+    })
+  );
+  return parsedMessages.join("");
 }
 
 function renderHtml(messagesHtml) {
-    return `
-        <!DOCTYPE html>
-        <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Email Messages Viewer</title>
-            <script src="https://cdn.tailwindcss.com"></script>
-            <style>
-                body {
-                    background-color: #f3f4f6;
-                    font-family: Arial, sans-serif;
-                }
-                .container {
-                    max-width: 800px;
-                    margin: 50px auto;
-                    padding: 20px;
-                }
-                .prose {
-                    line-height: 1.6;
-                }
-            </style>
-        </head>
-        <body>
-            <div class="container bg-white shadow-lg rounded-lg p-6">
-                <h1 class="text-2xl font-bold text-center mb-6">Email Messages Viewer</h1>
-                <div id="messages-container">
-                    ${messagesHtml}
-                </div>
-            </div>
-        </body>
-        </html>
-    `;
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Email Messages Viewer</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <style>
+          body {
+            background-color: #f3f4f6;
+            font-family: Arial, sans-serif;
+          }
+          .container {
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+          }
+          .prose {
+            line-height: 1.6;
+          }
+        </style>
+      </head>
+      <body>
+        <div class="container bg-white shadow-lg rounded-lg p-6">
+          <h1 class="text-2xl font-bold text-center mb-6">Email Messages Viewer</h1>
+          <div id="messages-container">${messagesHtml}</div>
+        </div>
+      </body>
+    </html>
+  `;
 }
 
 app.listen(PORT, () => {
-    console.log(`Server is running on http://localhost:${PORT}`);
-});
+  console.log(`Server is running on http://localhost:${PORT}`);
+});

_reference/localEmailViewer/package.json

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

_reference/partsManagement/PATCH_parts-management-job-status.md

@@ -0,0 +1,61 @@
+# PATCH /integrations/parts-management/job/:id/status
+
+Update (patch) the status of a job created under parts management. This endpoint is only available
+for jobs whose parent bodyshop has an `external_shop_id` (i.e., is provisioned for parts
+management).
+
+## Endpoint
+
+```
+PATCH /integrations/parts-management/job/:id/status
+```
+
+- `:id` is the UUID of the job to update.
+
+## Request Headers
+
+- `Authorization`: (if required by your integration middleware)
+- `Content-Type: application/json`
+
+## Request Body
+
+Send a JSON object with the following field:
+
+- `status` (string, required): The new status for the job.
+
+Example:
+
+```
+PATCH /integrations/parts-management/job/123e4567-e89b-12d3-a456-426614174000/status
+Content-Type: application/json
+
+{
+  "status": "IN_PROGRESS"
+}
+```
+
+## Success Response
+
+- **200 OK**
+- Returns the updated job object with the new status.
+
+```
+{
+  "id": "123e4567-e89b-12d3-a456-426614174000",
+  "status": "IN_PROGRESS",
+  ...
+}
+```
+
+## Error Responses
+
+- **400 Bad Request**: Missing status field, or parent bodyshop does not have an `external_shop_id`.
+- **404 Not Found**: No job found with the given ID.
+- **500 Internal Server Error**: Unexpected error.
+
+## Notes
+
+- Only jobs whose parent bodyshop has an `external_shop_id` can be patched via this route.
+- Fields other than `status` will be ignored if included in the request body.
+- The route is protected by the same middleware as other parts management endpoints.
+

_reference/partsManagement/PATCH_parts-management-provision.md

@@ -0,0 +1,86 @@
+# PATCH /integrations/parts-management/provision/:id
+
+Update (patch) select fields for a parts management bodyshop. Only available for shops that have an
+`external_shop_id` (i.e., are provisioned for parts management).
+
+## Endpoint
+
+```
+PATCH /integrations/parts-management/provision/:id
+```
+
+- `:id` is the UUID of the bodyshop to update.
+
+## Request Headers
+
+- `Authorization`: (if required by your integration middleware)
+- `Content-Type: application/json`
+
+## Request Body
+
+Send a JSON object with one or more of the following fields to update:
+
+- `shopname` (string)
+- `address1` (string)
+- `address2` (string, optional)
+- `city` (string)
+- `state` (string)
+- `zip_post` (string)
+- `country` (string)
+- `email` (string, shop's email, not user email)
+- `timezone` (string)
+- `phone` (string)
+- `logo_img_path` (object, e.g. `{ src, width, height, headerMargin }`)
+
+Any fields not included in the request body will remain unchanged.
+
+## Example Request
+
+```
+PATCH /integrations/parts-management/provision/123e4567-e89b-12d3-a456-426614174000
+Content-Type: application/json
+
+{
+  "shopname": "New Shop Name",
+  "address1": "123 Main St",
+  "city": "Springfield",
+  "state": "IL",
+  "zip_post": "62704",
+  "country": "USA",
+  "email": "shop@example.com",
+  "timezone": "America/Chicago",
+  "phone": "555-123-4567",
+  "logo_img_path": {
+    "src": "https://example.com/logo.png",
+    "width": "200",
+    "height": "100",
+    "headerMargin": 10
+  }
+}
+```
+
+## Success Response
+
+- **200 OK**
+- Returns the updated shop object with the patched fields.
+
+```
+{
+  "id": "123e4567-e89b-12d3-a456-426614174000",
+  "shopname": "New Shop Name",
+  ...
+}
+```
+
+## Error Responses
+
+- **400 Bad Request**: No valid fields provided, or shop does not have an `external_shop_id`.
+- **404 Not Found**: No shop found with the given ID.
+- **500 Internal Server Error**: Unexpected error.
+
+## Notes
+
+- Only shops with an `external_shop_id` can be patched via this route.
+- Fields not listed above will be ignored if included in the request body.
+- The route is protected by the same middleware as other parts management endpoints.
+

_reference/partsManagement/swagger.yaml

@@ -0,0 +1,166 @@
+openapi: 3.0.3
+info:
+  title: Parts Management Provisioning API
+  description: API endpoint to provision a new shop and user in the Parts Management system.
+  version: 1.0.0
+
+paths:
+  /parts-management/provision:
+    post:
+      summary: Provision a new parts management shop and user
+      operationId: partsManagementProvisioning
+      tags:
+        - Parts Management
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              required:
+                - external_shop_id
+                - shopname
+                - address1
+                - city
+                - state
+                - zip_post
+                - country
+                - email
+                - phone
+                - userEmail
+              properties:
+                external_shop_id:
+                  type: string
+                  description: External shop ID (must be unique)
+                shopname:
+                  type: string
+                address1:
+                  type: string
+                address2:
+                  type: string
+                  nullable: true
+                city:
+                  type: string
+                state:
+                  type: string
+                zip_post:
+                  type: string
+                country:
+                  type: string
+                email:
+                  type: string
+                phone:
+                  type: string
+                userEmail:
+                  type: string
+                  format: email
+                userPassword:
+                  type: string
+                  description: Optional password for the new user. If provided, the password is set directly, and no password reset link is sent. Must be at least 6 characters.
+                  nullable: true
+                logoUrl:
+                  type: string
+                  format: uri
+                  nullable: true
+                timezone:
+                  type: string
+                  nullable: true
+                vendors:
+                  type: array
+                  items:
+                    type: object
+                    properties:
+                      name:
+                        type: string
+                      street1:
+                        type: string
+                        nullable: true
+                      street2:
+                        type: string
+                        nullable: true
+                      city:
+                        type: string
+                        nullable: true
+                      state:
+                        type: string
+                        nullable: true
+                      zip:
+                        type: string
+                        nullable: true
+                      country:
+                        type: string
+                        nullable: true
+                      email:
+                        type: string
+                        format: email
+                        nullable: true
+                      discount:
+                        type: number
+                        nullable: true
+                      due_date:
+                        type: string
+                        format: date
+                        nullable: true
+                      cost_center:
+                        type: string
+                        nullable: true
+                      favorite:
+                        type: array
+                        items:
+                          type: string
+                        nullable: true
+                      phone:
+                        type: string
+                        nullable: true
+                      active:
+                        type: boolean
+                        nullable: true
+                      dmsid:
+                        type: string
+                        nullable: true
+      responses:
+        '200':
+          description: Shop and user successfully created
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  shop:
+                    type: object
+                    properties:
+                      id:
+                        type: string
+                        format: uuid
+                      shopname:
+                        type: string
+                  user:
+                    type: object
+                    properties:
+                      id:
+                        type: string
+                      email:
+                        type: string
+                      resetLink:
+                        type: string
+                        format: uri
+                        nullable: true
+                        description: Password reset link for the user. Only included if userPassword is not provided in the request.
+        '400':
+          description: Bad request (missing or invalid fields)
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string
+        '500':
+          description: Internal server error
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string

_reference/ragmate/local-rag-compose.yml

@@ -0,0 +1,10 @@
+services:
+  ragmate:
+    image: ghcr.io/ragmate/ragmate:latest
+    ports:
+      - "11434:11434"
+    env_file:
+      - .ragmate.env
+    volumes:
+      - .:/project
+      - ./docker_data/ragmate:/apps/cache

client/.env.development.imex

@@ -9,6 +9,12 @@ VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 VITE_APP_AXIOS_BASE_API_URL=/api/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"
+VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

client/.env.development.rome

@@ -10,7 +10,13 @@ VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 VITE_APP_AXIOS_BASE_API_URL=/api/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_COUNTRY=USA
 VITE_APP_INSTANCE=ROME
+TEST_USERNAME="test@imex.dev"
+TEST_PASSWORD="test123"
+VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

client/.env.production.imex

@@ -13,3 +13,7 @@ VITE_APP_AXIOS_BASE_API_URL=https://api.imex.online/
 VITE_APP_REPORTS_SERVER_URL=https://reports.imex.online
 VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
 VITE_APP_INSTANCE=IMEX
+VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

client/.env.production.rome

@@ -13,3 +13,7 @@ VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
 VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
 VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
 VITE_APP_INSTANCE=ROME
+VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

client/.env.test.imex

@@ -9,7 +9,11 @@ VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
 VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
 VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
 VITE_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
-VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
 VITE_APP_IS_TEST=true
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=IMEX
+VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

client/.env.test.rome

@@ -13,3 +13,7 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 VITE_APP_IS_TEST=true
 VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 VITE_APP_INSTANCE=ROME
+VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
+VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
+VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

client/.eslintrc

@@ -1,8 +0,0 @@
-{
-  "extends": [
-    "react-app"
-  ],
-  "rules": {
-    "no-useless-rename": "off"
-  }
-}

client/.gitignore

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

client/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: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require("./cypress/plugins/index.js")(on, config);
-    },
-    baseUrl: "https://localhost:3000"
-  }
-});

client/cypress/e2e/01-General Render/01-home.cy.js

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

client/cypress/e2e/1-getting-started/todo.cy.js

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

client/cypress/e2e/2-advanced-examples/actions.cy.js

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

client/cypress/e2e/2-advanced-examples/aliasing.cy.js

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

client/cypress/e2e/2-advanced-examples/assertions.cy.js

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

client/cypress/e2e/2-advanced-examples/connectors.cy.js

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

client/cypress/e2e/2-advanced-examples/cookies.cy.js

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

client/cypress/e2e/2-advanced-examples/cypress_api.cy.js

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

client/cypress/e2e/2-advanced-examples/files.cy.js

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

client/cypress/e2e/2-advanced-examples/local_storage.cy.js

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

client/cypress/e2e/2-advanced-examples/location.cy.js

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

client/cypress/e2e/2-advanced-examples/misc.cy.js

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

client/cypress/e2e/2-advanced-examples/navigation.cy.js

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

client/cypress/e2e/2-advanced-examples/network_requests.cy.js

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

client/cypress/e2e/2-advanced-examples/querying.cy.js

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

client/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js

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

client/cypress/e2e/2-advanced-examples/traversal.cy.js

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

client/cypress/e2e/2-advanced-examples/utilities.cy.js

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

client/cypress/e2e/2-advanced-examples/viewport.cy.js

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

client/cypress/e2e/2-advanced-examples/waiting.cy.js

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

client/cypress/e2e/2-advanced-examples/window.cy.js

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

client/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

client/cypress/fixtures/profile.json

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

client/cypress/fixtures/users.json

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

client/cypress/plugins/index.js

@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.jsx 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

@@ -1,27 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
-import "@testing-library/cypress/add-commands";

client/cypress/support/e2e.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.jsx is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import "./commands";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

client/cypress/tsconfig.json

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

client/eslint.config.js

@@ -2,9 +2,9 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import pluginReact from "eslint-plugin-react";
 
-/** @type {import('eslint').Linter.Config[]} */
-
+/** @type {import("eslint").Linter.Config[]} */
 export default [
+  { ignores: ["node_modules/**", "dist/**", "build/**", "dev-dist/**"] },
   {
     files: ["**/*.{js,mjs,cjs,jsx}"]
   },
@@ -12,9 +12,13 @@ export default [
   pluginJs.configs.recommended,
   {
     ...pluginReact.configs.flat.recommended,
+    settings: {
+      react: { version: "detect" }
+    },
     rules: {
       ...pluginReact.configs.flat.recommended.rules,
-      "react/prop-types": 0
+      "react/prop-types": 0,
+      "react/no-children-prop": 0 // Disable react/no-children-prop rule
     }
   },
   pluginReact.configs.flat["jsx-runtime"]

client/index.html

@@ -74,50 +74,8 @@
       })();
     </script>
     <% } %>
-    <script>
-      !(function () {
-        "use strict";
-        var e = [
-          "debug",
-          "destroy",
-          "do",
-          "help",
-          "identify",
-          "is",
-          "off",
-          "on",
-          "ready",
-          "render",
-          "reset",
-          "safe",
-          "set"
-        ];
-        if (window.noticeable) console.warn("Noticeable SDK code snippet loaded more than once");
-        else {
-          var n = (window.noticeable = window.noticeable || []);
+    <script>!function(w,d,i,s){function l(){if(!d.getElementById(i)){var f=d.getElementsByTagName(s)[0],e=d.createElement(s);e.type="text/javascript",e.async=!0,e.src="https://canny.io/sdk.js",f.parentNode.insertBefore(e,f)}}if("function"!=typeof w.Canny){var c=function(){c.q.push(arguments)};c.q=[],w.Canny=c,"complete"===d.readyState?l():w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}}(window,document,"canny-jssdk","script");</script>
 
-          function t(e) {
-            return function () {
-              var t = Array.prototype.slice.call(arguments);
-              return t.unshift(e), n.push(t), n;
-            };
-          }
-
-          !(function () {
-            for (var o = 0; o < e.length; o++) {
-              var r = e[o];
-              n[r] = t(r);
-            }
-          })(),
-            (function () {
-              var e = document.createElement("script");
-              (e.async = !0), (e.src = "https://sdk.noticeable.io/l.js");
-              var n = document.head;
-              n.insertBefore(e, n.firstChild);
-            })();
-        }
-      })();
-    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

client/package.json

@@ -2,83 +2,90 @@
   "name": "bodyshop",
   "version": "0.2.1",
   "engines": {
-    "node": ">=18.18.2"
+    "node": ">=22.0.0"
   },
   "type": "module",
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
-    "@apollo/client": "^3.11.8",
-    "@emotion/is-prop-valid": "^1.3.1",
-    "@fingerprintjs/fingerprintjs": "^4.5.0",
+    "@amplitude/analytics-browser": "^2.25.2",
+    "@ant-design/pro-layout": "^7.22.6",
+    "@apollo/client": "^3.13.9",
+    "@emotion/is-prop-valid": "^1.4.0",
+    "@fingerprintjs/fingerprintjs": "^4.6.1",
+    "@firebase/analytics": "^0.10.17",
+    "@firebase/app": "^0.14.3",
+    "@firebase/auth": "^1.10.8",
+    "@firebase/firestore": "^4.9.2",
+    "@firebase/messaging": "^0.12.22",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.7",
-    "@sentry/cli": "^2.36.2",
-    "@sentry/react": "^7.114.0",
-    "@splitsoftware/splitio-react": "^1.13.0",
-    "@tanem/react-nprogress": "^5.0.51",
-    "@vitejs/plugin-react": "^4.3.1",
-    "antd": "^5.20.1",
+    "@reduxjs/toolkit": "^2.9.0",
+    "@sentry/cli": "^2.56.0",
+    "@sentry/react": "^9.43.0",
+    "@sentry/vite-plugin": "^4.3.0",
+    "@splitsoftware/splitio-react": "^2.5.0",
+    "@tanem/react-nprogress": "^5.0.53",
+    "antd": "^5.27.4",
     "apollo-link-logger": "^2.0.1",
-    "apollo-link-sentry": "^3.3.0",
+    "apollo-link-sentry": "^4.4.0",
     "autosize": "^6.0.1",
-    "axios": "^1.7.7",
+    "axios": "^1.12.2",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
-    "dayjs": "^1.11.13",
-    "dayjs-business-days2": "^1.2.2",
+    "dayjs": "^1.11.18",
+    "dayjs-business-days2": "^1.3.0",
     "dinero.js": "^1.9.1",
-    "dotenv": "^16.4.5",
+    "dotenv": "^17.2.3",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.13.2",
-    "graphql": "^16.9.0",
-    "i18next": "^23.15.1",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "graphql": "^16.11.0",
+    "i18next": "^25.5.3",
+    "i18next-browser-languagedetector": "^8.2.0",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.9",
-    "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.2",
+    "libphonenumber-js": "^1.12.23",
+    "lightningcss": "^1.30.2",
+    "logrocket": "^9.0.2",
+    "markerjs2": "^2.32.7",
     "memoize-one": "^6.0.0",
-    "normalize-url": "^8.0.1",
+    "normalize-url": "^8.1.0",
     "object-hash": "^3.0.0",
+    "phone": "^3.1.67",
+    "posthog-js": "^1.271.0",
     "prop-types": "^15.8.1",
-    "query-string": "^9.1.0",
+    "query-string": "^9.3.1",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.14.1",
+    "react-big-calendar": "^1.19.4",
     "react-color": "^2.19.3",
-    "react-cookie": "^7.2.0",
+    "react-cookie": "^8.0.1",
     "react-dom": "^18.3.1",
     "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.1",
     "react-grid-layout": "1.3.4",
-    "react-i18next": "^14.1.3",
-    "react-icons": "^5.3.0",
+    "react-i18next": "^15.7.3",
+    "react-icons": "^5.5.0",
     "react-image-lightbox": "^5.1.4",
-    "react-markdown": "^9.0.1",
-    "react-number-format": "^5.4.2",
+    "react-markdown": "^10.1.0",
+    "react-number-format": "^5.4.3",
     "react-popopo": "^2.1.9",
     "react-product-fruits": "^2.2.61",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^6.30.0",
     "react-sticky": "^6.0.3",
-    "react-virtuoso": "^4.10.4",
-    "recharts": "^2.12.7",
+    "react-virtuoso": "^4.14.1",
+    "recharts": "^2.15.2",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.79.3",
-    "socket.io-client": "^4.8.0",
-    "styled-components": "^6.1.13",
+    "sass": "^1.93.2",
+    "socket.io-client": "^4.8.1",
+    "styled-components": "^6.1.19",
     "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
-    "userpilot": "^1.3.6",
     "vite-plugin-ejs": "^1.7.0",
     "web-vitals": "^3.5.2"
   },
@@ -95,11 +102,17 @@
     "build:test:rome": "env-cmd -f .env.test.rome npm run build",
     "build:production:imex": "env-cmd -f .env.production.imex npm run build",
     "build:production:rome": "env-cmd -f .env.production.rome npm run build",
-    "test": "cypress open",
-    "eject": "react-scripts eject",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
     "eulaize": "node src/utils/eulaize.js",
-    "sentry:sourcemaps:imex": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e:imex": "playwright test --config playwright.config.js",
+    "test:e2e:rome": "playwright test --config playwright.rome.config.js",
+    "test:e2e:imex:headed": "playwright test --config playwright.config.js --headed",
+    "test:e2e:rome:headed": "playwright test --config playwright.rome.config.js --headed",
+    "test:e2e:report": "playwright show-report",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "browserslist": {
     "production": [
@@ -120,36 +133,39 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/icons": "^6.1.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.24.7",
-    "@dotenvx/dotenvx": "^1.14.1",
-    "@emotion/babel-plugin": "^11.12.0",
-    "@emotion/react": "^11.13.3",
-    "@eslint/js": "^9.15.0",
-    "@sentry/webpack-plugin": "^2.22.4",
-    "@testing-library/cypress": "^10.0.2",
-    "browserslist": "^4.23.3",
+    "@babel/preset-react": "^7.27.1",
+    "@dotenvx/dotenvx": "^1.51.0",
+    "@emotion/babel-plugin": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@eslint/js": "^9.37.0",
+    "@playwright/test": "^1.56.0",
+    "@sentry/webpack-plugin": "^4.3.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "browserslist": "^4.26.3",
     "browserslist-to-esbuild": "^2.1.1",
-    "chalk": "^5.3.0",
-    "cross-env": "^7.0.3",
-    "cypress": "^13.14.2",
-    "eslint": "^8.57.1",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-react": "^7.37.2",
-    "globals": "^15.12.0",
-    "memfs": "^4.12.0",
+    "chalk": "^5.6.2",
+    "eslint": "^9.37.0",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^15.15.0",
+    "jsdom": "^26.0.0",
+    "memfs": "^4.48.1",
     "os-browserify": "^0.3.0",
-    "react-error-overlay": "6.0.11",
+    "playwright": "^1.56.0",
+    "react-error-overlay": "^6.1.0",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.7",
-    "vite-plugin-babel": "^1.2.0",
+    "vite": "^7.1.9",
+    "vite-plugin-babel": "^1.3.2",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-node-polyfills": "^0.24.0",
+    "vite-plugin-pwa": "^1.0.3",
     "vite-plugin-style-import": "^2.0.0",
-    "workbox-window": "^7.1.0"
+    "vitest": "^3.2.4",
+    "workbox-window": "^7.3.0"
   }
 }

client/playwright.config.js

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

client/playwright.rome.config.js

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

client/public/firebase-messaging-sw.js

@@ -1,5 +1,7 @@
 // Scripts for firebase and firebase messaging
+// eslint-disable-next-line no-undef
 importScripts("https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js");
+// eslint-disable-next-line no-undef
 importScripts("https://www.gstatic.com/firebasejs/10.14.1/firebase-messaging-compat.js");
 
 // Initialize the Firebase app in the service worker by passing the generated config
@@ -42,13 +44,16 @@ switch (this.location.hostname) {
     };
 }
 
+// eslint-disable-next-line no-undef
 firebase.initializeApp(firebaseConfig);
 
 // Retrieve firebase messaging
+// eslint-disable-next-line no-undef
 const messaging = firebase.messaging();
 
 messaging.onBackgroundMessage(function (payload) {
   // Customize notification here
   console.log("[firebase-messaging-sw.js] Received background message ", payload);
+  // eslint-disable-next-line no-undef
   self.registration.showNotification(notificationTitle, notificationOptions);
 });

client/src/App/App.container.jsx

@@ -1,54 +1,104 @@
 import { ApolloProvider } from "@apollo/client";
-import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react";
+import * as Sentry from "@sentry/react";
+import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import React from "react";
+import { useEffect, useMemo } from "react";
+import { CookiesProvider } from "react-cookie";
 import { useTranslation } from "react-i18next";
+import { connect, useSelector } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
+import { setDarkMode } from "../redux/application/application.actions";
+import { selectDarkMode } from "../redux/application/application.selectors";
+import { selectCurrentUser } from "../redux/user/user.selectors.js";
 import client from "../utils/GraphQLClient";
 import App from "./App";
-import * as Sentry from "@sentry/react";
-
-import themeProvider from "./themeProvider";
-import { Userpilot } from "userpilot";
-
-// Initialize Userpilot
-if (import.meta.env.DEV) {
-  Userpilot.initialize("NX-69145f08");
-}
+import getTheme from "./themeProvider";
 
+// Base Split configuration
 const config = {
   core: {
     authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
-    key: "anon"
+    key: "anon" // Default key, overridden dynamically by SplitClientProvider
   }
 };
-export const factory = SplitSdk(config);
 
-function AppContainer() {
+// Custom provider to manage the Split client key based on imexshopid from Redux
+function SplitClientProvider({ children }) {
+  const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
+  const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
+  useEffect(() => {
+    if (splitClient && imexshopid) {
+      console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
+    }
+  }, [splitClient, imexshopid]);
+  return children;
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode))
+});
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser
+});
+
+function AppContainer({ currentUser, setDarkMode }) {
   const { t } = useTranslation();
+  const isDarkMode = useSelector(selectDarkMode);
+  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
+
+  // Update data-theme attribute when dark mode changes
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+    return () => document.documentElement.removeAttribute("data-theme");
+  }, [isDarkMode]);
+
+  // Sync Redux darkMode with localStorage on user change
+  useEffect(() => {
+    if (currentUser?.uid) {
+      const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`);
+      if (savedMode !== null) {
+        setDarkMode(JSON.parse(savedMode));
+      } else {
+        setDarkMode(false); // default to light mode
+      }
+    } else {
+      setDarkMode(false);
+    }
+  }, [currentUser?.uid]);
+
+  // Persist darkMode to localStorage when it or user changes
+  useEffect(() => {
+    if (currentUser?.uid) {
+      localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));
+    }
+  }, [isDarkMode, currentUser?.uid]);
 
   return (
-    <ApolloProvider client={client}>
-      <ConfigProvider
-        //componentSize="small"
-        input={{ autoComplete: "new-password" }}
-        locale={enLocale}
-        theme={themeProvider}
-        form={{
-          validateMessages: {
-            // eslint-disable-next-line no-template-curly-in-string
-            required: t("general.validation.required", { label: "${label}" })
-          }
-        }}
-      >
-        <GlobalLoadingBar />
-        <SplitFactoryProvider factory={factory}>
-          <App />
-        </SplitFactoryProvider>
-      </ConfigProvider>
-    </ApolloProvider>
+    <CookiesProvider>
+      <ApolloProvider client={client}>
+        <ConfigProvider
+          input={{ autoComplete: "new-password" }}
+          locale={enLocale}
+          theme={theme}
+          form={{
+            validateMessages: {
+              required: t("general.validation.required", { label: "${label}" })
+            }
+          }}
+        >
+          <GlobalLoadingBar />
+          <SplitFactoryProvider config={config}>
+            <SplitClientProvider>
+              <App />
+            </SplitClientProvider>
+          </SplitFactoryProvider>
+        </ConfigProvider>
+      </ApolloProvider>
+    </CookiesProvider>
   );
 }
 
-export default Sentry.withProfiler(AppContainer);
+export default Sentry.withProfiler(connect(mapStateToProps, mapDispatchToProps)(AppContainer));

client/src/App/App.jsx

@@ -1,19 +1,20 @@
 import { useSplitClient } from "@splitsoftware/splitio-react";
 import { Button, Result } from "antd";
 import LogRocket from "logrocket";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
-import ErrorBoundary from "../components/error-boundary/error-boundary.component"; // Component Imports
+import ErrorBoundary from "../components/error-boundary/error-boundary.component";
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
 import LandingPage from "../pages/landing/landing.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
-import { setOnline } from "../redux/application/application.actions";
-import { selectOnline } from "../redux/application/application.selectors";
+import SimplifiedPartsPageContainer from "../pages/simplified-parts/simplified-parts.page.container.jsx";
+import { setIsPartsEntry, setOnline } from "../redux/application/application.actions";
+import { selectIsPartsEntry, selectOnline } from "../redux/application/application.selectors";
 import { checkUserSession } from "../redux/user/user.actions";
 import { selectBodyshop, selectCurrentEula, selectCurrentUser } from "../redux/user/user.selectors";
 import PrivateRoute from "../components/PrivateRoute";
@@ -21,42 +22,56 @@ import "./App.styles.scss";
 import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
-import { SocketProvider } from "../contexts/SocketIO/socketContext.jsx";
 import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";
+import SocketProvider from "../contexts/SocketIO/socketProvider.jsx";
+import SoundWrapper from "./SoundWrapper.jsx";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
 const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
 const CsiPage = lazy(() => import("../pages/csi/csi.container.page"));
-const MobilePaymentContainer = lazy(() => import("../pages/mobile-payment/mobile-payment.container"));
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   online: selectOnline,
   bodyshop: selectBodyshop,
-  currentEula: selectCurrentEula
+  currentEula: selectCurrentEula,
+  isPartsEntry: selectIsPartsEntry
 });
 
 const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
-  setOnline: (isOnline) => dispatch(setOnline(isOnline))
+  setOnline: (isOnline) => dispatch(setOnline(isOnline)),
+  setIsPartsEntry: (isParts) => dispatch(setIsPartsEntry(isParts))
 });
 
-export function App({ bodyshop, checkUserSession, currentUser, online, setOnline, currentEula }) {
+export function App({
+  bodyshop,
+  checkUserSession,
+  currentUser,
+  online,
+  setOnline,
+  setIsPartsEntry,
+  currentEula,
+  isPartsEntry
+}) {
   const client = useSplitClient().client;
   const [listenersAdded, setListenersAdded] = useState(false);
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!navigator.onLine) {
       setOnline(false);
     }
-
     checkUserSession();
   }, [checkUserSession, setOnline]);
 
-  //const b = Grid.useBreakpoint();
-  // console.log("Breakpoints:", b);
+  useEffect(() => {
+    const pathname = window.location.pathname;
+    const isParts = pathname === "/parts" || pathname.startsWith("/parts/");
+    setIsPartsEntry(isParts);
+  }, [setIsPartsEntry]);
 
   // Associate event listeners, memoize to prevent multiple listeners being added
   useEffect(() => {
@@ -141,89 +156,93 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
     >
       <ProductFruitsWrapper
         currentUser={currentUser}
-        workspaceCode={InstanceRenderMgr({
-          imex: null,
-          rome: "9BkbEseqNqxw8jUH"
-        })}
+        bodyshop={bodyshop}
+        workspaceCode={bodyshop?.tours_enabled ? "9BkbEseqNqxw8jUH" : ""}
+        isPartsEntry={isPartsEntry}
       />
+
       <NotificationProvider>
-        <Routes>
-          <Route
-            path="*"
-            element={
-              <ErrorBoundary>
-                <LandingPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/signin"
-            element={
-              <ErrorBoundary>
-                <SignInPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/resetpassword"
-            element={
-              <ErrorBoundary>
-                <ResetPassword />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/csi/:surveyId"
-            element={
-              <ErrorBoundary>
-                <CsiPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/disclaimer"
-            element={
-              <ErrorBoundary>
-                <DisclaimerPage />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/mp/:paymentIs"
-            element={
-              <ErrorBoundary>
-                <MobilePaymentContainer />
-              </ErrorBoundary>
-            }
-          />
-          <Route
-            path="/manage/*"
-            element={
-              <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop}>
+        <SoundWrapper bodyshop={bodyshop}>
+          <Routes>
+            <Route
+              path="*"
+              element={
+                <ErrorBoundary>
+                  <LandingPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/signin"
+              element={
+                <ErrorBoundary>
+                  <SignInPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/resetpassword"
+              element={
+                <ErrorBoundary>
+                  <ResetPassword />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/csi/:surveyId"
+              element={
+                <ErrorBoundary>
+                  <CsiPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/disclaimer"
+              element={
+                <ErrorBoundary>
+                  <DisclaimerPage />
+                </ErrorBoundary>
+              }
+            />
+            <Route
+              path="/manage/*"
+              element={
+                <ErrorBoundary>
+                  <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
+                    <PrivateRoute isAuthorized={currentUser.authorized} />
+                  </SocketProvider>
+                </ErrorBoundary>
+              }
+            >
+              <Route path="*" element={<ManagePage />} />
+            </Route>
+            <Route
+              path="/tech/*"
+              element={
+                <ErrorBoundary>
+                  <SocketProvider bodyshop={bodyshop} navigate={navigate} currentUser={currentUser}>
+                    <PrivateRoute isAuthorized={currentUser.authorized} />
+                  </SocketProvider>
+                </ErrorBoundary>
+              }
+            >
+              <Route path="*" element={<TechPageContainer />} />
+            </Route>
+            <Route
+              path="/parts/*"
+              element={
+                <ErrorBoundary>
                   <PrivateRoute isAuthorized={currentUser.authorized} />
-                </SocketProvider>
-              </ErrorBoundary>
-            }
-          >
-            <Route path="*" element={<ManagePage />} />
-          </Route>
-          <Route
-            path="/tech/*"
-            element={
-              <ErrorBoundary>
-                <SocketProvider bodyshop={bodyshop}>
-                  <PrivateRoute isAuthorized={currentUser.authorized} />
-                </SocketProvider>
-              </ErrorBoundary>
-            }
-          >
-            <Route path="*" element={<TechPageContainer />} />
-          </Route>
-          <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
-            <Route path="*" element={<DocumentEditorContainer />} />
-          </Route>
-        </Routes>
+                </ErrorBoundary>
+              }
+            >
+              <Route path="*" element={<SimplifiedPartsPageContainer />} />
+            </Route>
+            <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+              <Route path="*" element={<DocumentEditorContainer />} />
+            </Route>
+          </Routes>
+        </SoundWrapper>
       </NotificationProvider>
     </Suspense>
   );

client/src/App/App.styles.scss

@@ -1,8 +1,226 @@
-//Global Styles.
+:root {
+  --table-stripe-bg: #f4f4f4; /* Light mode table stripe */
+  --menu-divider-color: #74695c; /* Light mode menu divider */
+  --menu-submenu-text: rgba(255, 255, 255, 0.65); /* Light mode submenu text */
+  --kanban-column-bg: #ddd; /* Light mode kanban column */
+  --alert-color: blue; /* Light mode alert */
+  --completion-soon-color: rgba(255, 140, 0, 0.8); /* Light mode completion soon */
+  --completion-past-color: rgba(255, 0, 0, 0.8); /* Light mode completion past */
+  --job-line-manual-color: tomato; /* Light mode job line manual */
+  --muted-button-color: lightgray; /* Light mode muted button */
+  --muted-button-hover-color: darkgrey; /* Light mode muted button hover */
+  --table-border-color: #ddd; /* Light mode table border */
+  --table-hover-bg: #f5f5f5; /* Light mode table hover */
+  --popover-bg: #fff; /* Light mode popover background */
+  --error-text: red; /* Light mode error message */
+  --no-jobs-text: #888; /* Light mode no jobs message */
+  --message-yours-bg: #eee; /* Light mode yours message background */
+  --message-mine-bg-start: #00d0ea; /* Light mode mine message gradient start */
+  --message-mine-bg-end: #0085d1; /* Light mode mine message gradient end */
+  --message-mine-text: white; /* Light mode mine message text */
+  --message-mine-tail-bg: white; /* Light mode mine/yours message tail */
+  --system-message-bg: #f5f5f5; /* Light mode system message background */
+  --system-message-text: #555; /* Light mode system message text */
+  --system-label-text: #888; /* Light mode system label/date text */
+  --message-icon-color: whitesmoke; /* Light mode message icon */
+  --eula-card-bg: lightgray; /* Light mode eula card background */
+  --notification-bg: #fff; /* Light mode notification background */
+  --notification-text: rgba(0, 0, 0, 0.85); /* Light mode notification text */
+  --notification-border: #d9d9d9; /* Light mode notification border */
+  --notification-header-bg: #fafafa; /* Light mode notification header background */
+  --notification-header-border: #f0f0f0; /* Light mode notification header border */
+  --notification-header-text: rgba(0, 0, 0, 0.85); /* Light mode notification header text */
+  --notification-toggle-icon: #1677ff; /* Light mode notification toggle icon */
+  --notification-switch-bg: #1677ff; /* Light mode notification switch background */
+  --notification-btn-link: #1677ff; /* Light mode notification link button */
+  --notification-btn-link-hover: #69b1ff; /* Light mode notification link button hover */
+  --notification-btn-link-disabled: rgba(0, 0, 0, 0.25); /* Light mode notification link button disabled */
+  --notification-btn-link-active: #0958d9; /* Light mode notification link button active */
+  --notification-read-bg: #fff; /* Light mode notification read background */
+  --notification-read-text: rgba(0, 0, 0, 0.65); /* Light mode notification read text */
+  --notification-unread-bg: #f5f5f5; /* Light mode notification unread background */
+  --notification-unread-text: rgba(0, 0, 0, 0.85); /* Light mode notification unread text */
+  --notification-item-hover-bg: #fafafa; /* Light mode notification item hover background */
+  --notification-ro-number: #1677ff; /* Light mode notification RO number */
+  --notification-relative-time: rgba(0, 0, 0, 0.45); /* Light mode notification relative time */
+  --alert-bg: #fff1f0; /* Light mode alert background */
+  --alert-text: rgba(0, 0, 0, 0.85); /* Light mode alert text */
+  --alert-border: #ffa39e; /* Light mode alert border */
+  --alert-message: #ff4d4f; /* Light mode alert message */
+  --share-badge-bg: #cccccc; /* Light mode share badge background */
+  --column-header-bg: #d0d0d0; /* Light mode column header background */
+  --footer-bg: #d0d0d0; /* Light mode footer background */
+  --tech-icon-color: orangered; /* Light mode tech icon color */
+  --clone-border-color: #1890ff; /* Light mode clone border color */
+  --event-arrived-bg: rgba(4, 141, 4, 0.4); /* Light mode arrived event background */
+  --event-block-bg: tomato; /* Light mode block event background */
+  --event-selected-bg: slategrey; /* Light mode selected event background */
+  --task-bg: #fff; /* Light mode task center background */
+  --task-text: rgba(0, 0, 0, 0.85); /* Light mode task text */
+  --task-border: #d9d9d9; /* Light mode task border */
+  --task-header-bg: #fafafa; /* Light mode task header background */
+  --task-header-border: #f0f0f0; /* Light mode task header border */
+  --task-section-bg: #f5f5f5; /* Light mode task section background */
+  --task-section-border: #e8e8e8; /* Light mode task section border */
+  --task-row-hover-bg: #f5f5f5; /* Light mode task row hover background */
+  --task-row-border: #f0f0f0; /* Light mode task row border */
+  --task-ro-number: #1677ff; /* Light mode task RO number */
+  --task-due-text: rgba(0, 0, 0, 0.45); /* Light mode task due text */
+  --task-button-bg: #1677ff; /* Light mode task button background */
+  --task-button-hover-bg: #4096ff; /* Light mode task button hover background */
+  --task-button-disabled-bg: #d9d9d9; /* Light mode task button disabled background */
+  --task-button-text: white; /* Light mode task button text */
+  --task-message-text: rgba(0, 0, 0, 0.45); /* Light mode task message text */
+  --mask-bg: rgba(0, 0, 0, 0.05); /* Light mode mask background */
+  --board-text-color: #393939; /* Light mode board text color */
+  --section-bg: #e3e3e3; /* Light mode section background */
+  --detail-text-color: #4d4d4d; /* Light mode detail text color */
+  --card-selected-bg: rgba(128, 128, 128, 0.2); /* Light mode selected card background */
+  --card-stripe-even-bg: #f0f2f5; /* Light mode even card background */
+  --card-stripe-odd-bg: #ffffff; /* Light mode odd card background */
+  --bar-border-color: #f0f2f5; /* Light mode bar border and background */
+  --tag-wrapper-bg: #f0f2f5; /* Light mode tag wrapper background */
+  --tag-wrapper-text: #000; /* Light mode tag wrapper text */
+  --preview-bg: lightgray; /* Light mode preview background */
+  --preview-border-color: #2196F3; /* Light mode preview border color */
+  --event-bg-fallback: #c4c4c4; /* Light mode event background fallback */
+  --card-bg-fallback: #ffffff; /* Light mode card background fallback */
+  --card-text-fallback: black; /* Light mode card text fallback */
+  --table-row-even-bg: rgb(236, 236, 236); /* Light mode table row even background */
+  --status-row-bg-fallback: #ffffff; /* Light mode status row fallback background */
+  --reset-link-color: #0000ff; /* Light mode reset link color */
+  --error-header-text: tomato; /* Light mode error header text */
+  --tooltip-bg: white; /* Light mode tooltip background */
+  --tooltip-border: gray; /* Light mode tooltip border */
+  --tooltip-text-fallback: black; /* Light mode tooltip text fallback */
+  --teams-button-bg: #6264A7; /* Light mode Teams button background */
+  --teams-button-border: #6264A7; /* Light mode Teams button border */
+  --teams-button-text: #FFFFFF; /* Light mode Teams button text and icon */
+  --content-bg: #fff; /* Light mode content background */
+  --legend-bg-fallback: #ffffff; /* Light mode legend background fallback */
+  --tech-content-bg: #fff; /* Light mode tech content background */
+  --today-bg: #ffffff; /* Light mode today background */
+  --today-text: #000000; /* Light mode today text */
+  --off-range-bg: #f8f8f8; /* Light mode off-range background */
+}
+
+[data-theme="dark"] {
+  --table-stripe-bg: #2a2a2a; /* Dark mode table stripe */
+  --menu-divider-color: #5c5c5c; /* Dark mode menu divider */
+  --menu-submenu-text: rgba(255, 255, 255, 0.85); /* Dark mode submenu text */
+  --kanban-column-bg: #333333; /* Dark mode kanban column */
+  --alert-color: #4da8ff; /* Dark mode alert */
+  --completion-soon-color: #ff8c1a; /* Dark mode completion soon */
+  --completion-past-color: #ff4d4f; /* Dark mode completion past */
+  --job-line-manual-color: #ff6347; /* Dark mode job line manual */
+  --muted-button-color: #666666; /* Dark mode muted button */
+  --muted-button-hover-color: #999999; /* Dark mode muted button hover */
+  --table-border-color: #5c5c5c; /* Dark mode table border */
+  --table-hover-bg: #2a2a2a; /* Dark mode table hover */
+  --popover-bg: #2a2a2a; /* Dark mode popover background */
+  --error-text: #ff4d4f; /* Dark mode error message */
+  --no-jobs-text: #999999; /* Dark mode no jobs message */
+  --message-yours-bg: #2a2a2a; /* Dark mode yours message background */
+  --message-mine-bg-start: #4da8ff; /* Dark mode mine message gradient start */
+  --message-mine-bg-end: #326ade; /* Dark mode mine message gradient end */
+  --message-mine-text: #ffffff; /* Dark mode mine message text */
+  --message-mine-tail-bg: #1f1f1f; /* Dark mode mine/yours message tail */
+  --system-message-bg: #333333; /* Dark mode system message background */
+  --system-message-text: #cccccc; /* Dark mode system message text */
+  --system-label-text: #999999; /* Dark mode system label/date text */
+  --message-icon-color: #cccccc; /* Dark mode message icon */
+  --eula-card-bg: #2a2a2a; /* Dark mode eula card background */
+  --notification-bg: #2a2a2a; /* Dark mode notification background */
+  --notification-text: rgba(255, 255, 255, 0.85); /* Dark mode notification text */
+  --notification-border: #5c5c5c; /* Dark mode notification border */
+  --notification-header-bg: #333333; /* Dark mode notification header background */
+  --notification-header-border: #444444; /* Dark mode notification header border */
+  --notification-header-text: rgba(255, 255, 255, 0.85); /* Dark mode notification header text */
+  --notification-toggle-icon: #4da8ff; /* Dark mode notification toggle icon */
+  --notification-switch-bg: #4da8ff; /* Dark mode notification switch background */
+  --notification-btn-link: #4da8ff; /* Dark mode notification link button */
+  --notification-btn-link-hover: #80c1ff; /* Dark mode notification link button hover */
+  --notification-btn-link-disabled: rgba(255, 255, 255, 0.25); /* Dark mode notification link button disabled */
+  --notification-btn-link-active: #2681ff; /* Dark mode notification link button active */
+  --notification-read-bg: #2a2a2a; /* Dark mode notification read background */
+  --notification-read-text: rgba(255, 255, 255, 0.65); /* Dark mode notification read text */
+  --notification-unread-bg: #333333; /* Dark mode notification unread background */
+  --notification-unread-text: rgba(255, 255, 255, 0.85); /* Dark mode notification unread text */
+  --notification-item-hover-bg: #3a3a3a; /* Dark mode notification item hover background */
+  --notification-ro-number: #4da8ff; /* Dark mode notification RO number */
+  --notification-relative-time: rgba(255, 255, 255, 0.45); /* Dark mode notification relative time */
+  --alert-bg: #3a1a1a; /* Dark mode alert background */
+  --alert-text: rgba(255, 255, 255, 0.85); /* Dark mode alert text */
+  --alert-border: #ff6666; /* Dark mode alert border */
+  --alert-message: #ff6666; /* Dark mode alert message */
+  --share-badge-bg: #666666; /* Dark mode share badge background */
+  --column-header-bg: #333333; /* Dark mode column header background */
+  --footer-bg: #333333; /* Dark mode footer background */
+  --tech-icon-color: #ff4500; /* Dark mode tech icon color */
+  --clone-border-color: #4da8ff; /* Dark mode clone border color */
+  --event-arrived-bg: rgba(4, 141, 4, 0.6); /* Dark mode arrived event background */
+  --event-block-bg: tomato; /* Dark mode block event background */
+  --event-selected-bg: #4a5e6e; /* Dark mode selected event background */
+  --task-bg: #2a2a2a; /* Dark mode task center background */
+  --task-text: rgba(255, 255, 255, 0.85); /* Dark mode task text */
+  --task-border: #5c5c5c; /* Dark mode task border */
+  --task-header-bg: #333333; /* Dark mode task header background */
+  --task-header-border: #444444; /* Dark mode task header border */
+  --task-section-bg: #333333; /* Dark mode task section background */
+  --task-section-border: #444444; /* Dark mode task section border */
+  --task-row-hover-bg: #3a3a3a; /* Dark mode task row hover background */
+  --task-row-border: #444444; /* Dark mode task row border */
+  --task-ro-number: #4da8ff; /* Dark mode task RO number */
+  --task-due-text: rgba(255, 255, 255, 0.45); /* Dark mode task due text */
+  --task-button-bg: #4da8ff; /* Dark mode task button background */
+  --task-button-hover-bg: #80c1ff; /* Dark mode task button hover background */
+  --task-button-disabled-bg: #666666; /* Dark mode task button disabled background */
+  --task-button-text: #ffffff; /* Dark mode task button text */
+  --task-message-text: rgba(255, 255, 255, 0.45); /* Dark mode task message text */
+  --mask-bg: rgba(255, 255, 255, 0.05); /* Dark mode mask background */
+  --board-text-color: #cccccc; /* Dark mode board text color */
+  --section-bg: #333333; /* Dark mode section background */
+  --detail-text-color: #bbbbbb; /* Dark mode detail text color */
+  --card-selected-bg: rgba(255, 255, 255, 0.1); /* Dark mode selected card background */
+  --card-stripe-even-bg: #2a2a2a; /* Dark mode even card background */
+  --card-stripe-odd-bg: #1f1f1f; /* Dark mode odd card background */
+  --bar-border-color: #2a2a2a; /* Dark mode bar border and background */
+  --tag-wrapper-bg: #2a2a2a; /* Dark mode tag wrapper background */
+  --tag-wrapper-text: #cccccc; /* Dark mode tag wrapper text */
+  --preview-bg: #2a2a2a; /* Dark mode preview background */
+  --preview-border-color: #4da8ff; /* Dark mode preview border color */
+  --event-bg-fallback: #262626; /* Dark mode event background fallback */
+  --card-bg-fallback: #2a2a2a; /* Dark mode card background fallback */
+  --card-text-fallback: #cccccc; /* Dark mode card text fallback */
+  --table-row-even-bg: #2a2a2a; /* Dark mode table row even background */
+  --status-row-bg-fallback: #1f1f1f; /* Dark mode status row fallback background */
+  --reset-link-color: #4da8ff; /* Dark mode reset link color */
+  --error-header-text: #ff6347; /* Dark mode error header text */
+  --tooltip-bg: #2a2a2a; /* Dark mode tooltip background */
+  --tooltip-border: #5c5c5c; /* Dark mode tooltip border */
+  --tooltip-text-fallback: #cccccc; /* Dark mode tooltip text fallback */
+  --teams-button-bg: #7b7dc4; /* Dark mode Teams button background */
+  --teams-button-border: #7b7dc4; /* Dark mode Teams button border */
+  --teams-button-text: #ffffff; /* Dark mode Teams button text and icon */
+  --content-bg: #2a2a2a; /* Dark mode content background */
+  --legend-bg-fallback: #2a2a2a; /* Dark mode legend background fallback */
+  --tech-content-bg: #2a2a2a; /* Dark mode tech content background */
+  --today-bg: #4a5e6e; /* Dark mode today background */
+  --today-text: #ffffff; /* Dark mode today text */
+  --off-range-bg: #333333; /* Dark mode off-range background */
+  --svg-background: #FFF; /* Dark mode SVG background */
+}
+
+// Global Styles
 @import "react-big-calendar/lib/sass/styles";
 
 .ant-menu-item-divider {
-  border-bottom: 1px solid #74695c !important;
+  border-bottom: 1px solid var(--menu-divider-color) !important;
+}
+
+// Note: Monitor this in dark mode to ensure text visibility
+.ant-menu-submenu-title {
+  color: var(--menu-submenu-text) !important;
 }
 
 .imex-table-header {
@@ -39,7 +257,7 @@
 }
 
 .ellipses {
-  display: inline-block; /* for em, a, span, etc (inline by default) */
+  display: inline-block;
   text-overflow: ellipsis;
   width: calc(95%);
   overflow: hidden;
@@ -53,22 +271,23 @@
   }
 }
 
+// Scrollbar styles (uncomment if needed, updated for dark mode)
 // ::-webkit-scrollbar-track {
 //   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 //   border-radius: 0.2rem;
-//   background-color: #f5f5f5;
+//   background-color: var(--table-stripe-bg);
 // }
 
 // ::-webkit-scrollbar {
 //   width: 0.25rem;
 //   max-height: 0.25rem;
-//   background-color: #f5f5f5;
+//   background-color: var(--table-stripe-bg);
 // }
 
 // ::-webkit-scrollbar-thumb {
 //   border-radius: 0.2rem;
 //   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-//   background-color: #188fff;
+//   background-color: var(--alert-color);
 // }
 
 .ant-input-number-input,
@@ -81,28 +300,27 @@
 
 .production-alert {
   animation: alertBlinker 1s linear infinite;
-  color: blue;
+  color: var(--alert-color);
 }
 
 @keyframes alertBlinker {
   50% {
-    color: red;
+    color: var(--completion-past-color);
     opacity: 100;
-    //opacity: 0;
   }
 }
 
 .blue {
-  color: blue;
+  color: var(--alert-color);
 }
 
 .production-completion-soon {
-  color: rgba(255, 140, 0, 0.8);
+  color: var(--completion-soon-color);
   font-weight: bold;
 }
 
 .production-completion-past {
-  color: rgba(255, 0, 0, 0.8);
+  color: var(--completion-past-color);
   font-weight: bold;
 }
 
@@ -132,7 +350,7 @@
 }
 
 .react-kanban-column {
-  background-color: #ddd !important;
+  background-color: var(--kanban-column-bg) !important;
 }
 
 .production-list-table {
@@ -144,18 +362,18 @@
 .ReactGridGallery_tile-icon-bar {
   div {
     svg {
-      fill: #1890ff;
+      fill: var(--alert-color);
     }
   }
 }
 
 .job-line-manual {
-  color: tomato;
+  color: var(--job-line-manual-color);
   font-style: italic;
 }
 
 .ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
-  background-color: #f4f4f4;
+  background-color: var(--table-stripe-bg);
 }
 
 .rowWithColor > td {
@@ -163,13 +381,51 @@
 }
 
 .muted-button {
-  color: lightgray;
+  color: var(--muted-button-color);
   border: none;
   background: none;
   cursor: pointer;
-  font-size: 16px; /* Adjust as needed */
+  font-size: 16px;
 }
 
 .muted-button:hover {
-  color: darkgrey;
+  color: var(--muted-button-hover-color);
 }
+
+.notification-alert-unordered-list {
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+
+  .notification-alert-unordered-list-item {
+    margin-right: 0;
+  }
+}
+
+.content-container {
+  padding: 1rem;
+}
+
+// Override react-big-calendar styles for dark mode only
+[data-theme="dark"] {
+  .car-svg {
+    background-color: var(--svg-background);
+  }
+
+  .rbc-today {
+    background-color: var(--today-bg);
+    color: var(--today-text);
+  }
+
+  .rbc-off-range {
+    background-color: var(--off-range-bg);
+  }
+
+  .rbc-day-bg.rbc-today {
+    background-color: var(--today-bg);
+  }
+}
+
+//.rbc-time-header-gutter {
+//  padding: 0;
+//} 

client/src/App/ProductFruitsWrapper.jsx

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

client/src/App/SoundWrapper.jsx

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNotification } from "../contexts/Notifications/notificationContext.jsx";
+import { initNewMessageSound, unlockAudio } from "./../utils/soundManager";
+import { initSingleTabAudioLeader } from "../utils/singleTabAudioLeader";
+
+export default function SoundWrapper({ children, bodyshop }) {
+  const { t } = useTranslation();
+  const notification = useNotification();
+
+  useEffect(() => {
+    if (!bodyshop?.id) return;
+
+    // 1) Init single-tab leader election (only one tab should play sounds), scoped by bodyshopId
+    const cleanupLeader = initSingleTabAudioLeader(bodyshop.id);
+
+    // 2) Initialize base audio
+    initNewMessageSound("https://images.imex.online/app/messageTone.wav", 0.7);
+
+    // 3) Show a one-time prompt when autoplay blocks first play
+    const onNeedsUnlock = () => {
+      notification.info({
+        description: t("audio.manager.description"),
+        duration: 3
+      });
+    };
+    window.addEventListener("sound-needs-unlock", onNeedsUnlock);
+
+    // 4) Proactively unlock on first gesture (once per session)
+    const gesture = () => unlockAudio(bodyshop.id);
+    window.addEventListener("click", gesture, { once: true, passive: true });
+    window.addEventListener("touchstart", gesture, { once: true, passive: true });
+    window.addEventListener("keydown", gesture, { once: true });
+
+    return () => {
+      cleanupLeader();
+      window.removeEventListener("sound-needs-unlock", onNeedsUnlock);
+      // gesture listeners were added with {once:true}
+    };
+  }, [notification, t, bodyshop?.id]); // include bodyshop.id so this runs when org changes
+
+  return <>{children}</>;
+}

client/src/App/themeProvider.js

@@ -4,36 +4,42 @@ import InstanceRenderMgr from "../utils/instanceRenderMgr";
 
 const { defaultAlgorithm, darkAlgorithm } = theme;
 
-let isDarkMode = false;
-
 /**
  * Default theme
  * @type {{components: {Menu: {itemDividerBorderColor: string}}}}
  */
-const defaultTheme = {
+const defaultTheme = (isDarkMode) => ({
   components: {
     Table: {
-      rowHoverBg: "#e7f3ff",
-      rowSelectedBg: "#e6f7ff",
+      rowHoverBg: isDarkMode ? "#2a2a2a" : "#e7f3ff",
+      rowSelectedBg: isDarkMode ? "#333333" : "#e6f7ff",
       headerSortHoverBg: "transparent"
     },
     Menu: {
-      darkItemHoverBg: "#1890ff",
-      itemHoverBg: "#1890ff",
-      horizontalItemHoverBg: "#1890ff"
+      darkItemHoverBg: isDarkMode ? "#004a77" : "#1890ff",
+      itemHoverBg: isDarkMode ? "#004a77" : "#1890ff",
+      horizontalItemHoverBg: isDarkMode ? "#004a77" : "#1890ff"
     }
   },
   token: {
-    colorPrimary: InstanceRenderMgr({
-      imex: "#1890ff",
-      rome: "#326ade"
-    }),
-    colorInfo: InstanceRenderMgr({
-      imex: "#1890ff",
-      rome: "#326ade"
-    })
+    colorPrimary: InstanceRenderMgr(
+      {
+        imex: isDarkMode ? "#4da8ff" : "#1890ff",
+        rome: isDarkMode ? "#5b8ce6" : "#326ade"
+      },
+      isDarkMode
+    ),
+    colorInfo: InstanceRenderMgr(
+      {
+        imex: isDarkMode ? "#4da8ff" : "#1890ff",
+        rome: isDarkMode ? "#5b8ce6" : "#326ade"
+      },
+      isDarkMode
+    ),
+    colorError: isDarkMode ? "#ff4d4f" : "#f5222d",
+    colorBgBase: isDarkMode ? "#1f1f1f" : "#ffffff" // Align with Ant Design dark mode
   }
-};
+});
 
 /**
  * Development theme
@@ -60,8 +66,9 @@ const prodTheme = {};
 
 const currentTheme = import.meta.env.DEV ? devTheme : prodTheme;
 
-const finaltheme = {
+const getTheme = (isDarkMode) => ({
   algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
   ...defaultsDeep(currentTheme, defaultTheme)
-};
-export default finaltheme;
+});
+
+export default getTheme;

client/src/components/PrivateRoute.jsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
-function PrivateRoute({ component: Component, isAuthorized, ...rest }) {
+function PrivateRoute({ isAuthorized }) {
   const location = useLocation();
   const navigate = useNavigate();
 

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

@@ -1,5 +1,4 @@
 import { Button } from "antd";
-import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setModalContext } from "../../redux/modals/modals.actions";

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

@@ -1,6 +1,6 @@
 import { Card, Checkbox, Input, Space, Table } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -16,12 +16,13 @@ import PayableExportAll from "../payable-export-all-button/payable-export-all-bu
 import PayableExportButton from "../payable-export-button/payable-export-button.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import useLocalStorage from "./../../utils/useLocalStorage";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
   const { t } = useTranslation();
   const [selectedBills, setSelectedBills] = useState([]);
   const [transInProgress, setTransInProgress] = useState(false);
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-payables-table-state", {
     sortedInfo: {},
     search: ""
   });
@@ -181,7 +182,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, bills, ref
         onChange={handleTableChange}
         rowSelection={{
           onSelectAll: (selected, selectedRows) => setSelectedBills(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
             setSelectedBills(selectedRows.map((i) => i.id));
           },
           getCheckboxProps: (record) => ({

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

@@ -1,5 +1,5 @@
 import { Card, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -10,6 +10,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
 import { exportPageLimit } from "../../utils/config";
 import { alphaSort, dateSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
@@ -21,7 +22,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -31,7 +32,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
   const { t } = useTranslation();
   const [selectedPayments, setSelectedPayments] = useState([]);
   const [transInProgress, setTransInProgress] = useState(false);
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-payments-table-state", {
     sortedInfo: {},
     search: ""
   });
@@ -194,7 +195,7 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
         onChange={handleTableChange}
         rowSelection={{
           onSelectAll: (selected, selectedRows) => setSelectedPayments(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
             setSelectedPayments(selectedRows.map((i) => i.id));
           },
           getCheckboxProps: (record) => ({

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

@@ -1,5 +1,5 @@
 import { Button, Card, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
@@ -10,6 +10,7 @@ import { exportPageLimit } from "../../utils/config";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
+import useLocalStorage from "../../utils/useLocalStorage";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
@@ -20,7 +21,7 @@ import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(AccountingReceivablesTableComponent);
@@ -30,7 +31,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
   const [selectedJobs, setSelectedJobs] = useState([]);
   const [transInProgress, setTransInProgress] = useState(false);
 
-  const [state, setState] = useState({
+  const [state, setState] = useLocalStorage("accounting-receivables-table-state", {
     sortedInfo: {},
     search: ""
   });
@@ -141,7 +142,16 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
             refetch={refetch}
           />
           <Link to={`/manage/jobs/${record.id}/close`}>
-            <Button>{t("jobs.labels.viewallocations")}</Button>
+            <Button
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                verticalAlign: "middle"
+              }}
+            >
+              {t("jobs.labels.viewallocations")}
+            </Button>
           </Link>
         </Space>
       )
@@ -207,7 +217,7 @@ export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, r
         onChange={handleTableChange}
         rowSelection={{
           onSelectAll: (selected, selectedRows) => setSelectedJobs(selectedRows.map((i) => i.id)),
-          onSelect: (record, selected, selectedRows, nativeEvent) => {
+          onSelect: (record, selected, selectedRows) => {
             setSelectedJobs(selectedRows.map((i) => i.id));
           },
           getCheckboxProps: (record) => ({

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

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

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

@@ -1,5 +1,4 @@
 import { Alert } from "antd";
-import React from "react";
 
 export default function AlertComponent(props) {
   return <Alert {...props} />;

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

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

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

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

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

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

client/src/components/allocations-assignment/allocations-assignment.component.jsx

@@ -1,5 +1,4 @@
 import { Button, InputNumber, Popover, Select } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

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

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

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import AllocationsAssignmentComponent from "./allocations-assignment.component";
 import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
@@ -18,7 +18,7 @@ export default function AllocationsAssignmentContainer({ jobLineId, hours, refet
 
   const handleAssignment = () => {
     insertAllocation({ variables: { alloc: { ...assignment } } })
-      .then((r) => {
+      .then(() => {
         notification["success"]({
           message: t("allocations.successes.save")
         });

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx

@@ -1,5 +1,4 @@
 import { Button, Popover, Select } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
 import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
@@ -24,7 +24,7 @@ export default function AllocationsBulkAssignmentContainer({ jobLines, refetch }
       return acc;
     }, []);
 
-    insertAllocation({ variables: { alloc: allocs } }).then((r) => {
+    insertAllocation({ variables: { alloc: allocs } }).then(() => {
       notification["success"]({
         message: t("employees.successes.save")
       });

client/src/components/allocations-employee-label/allocations-employee-label.component.jsx

@@ -1,5 +1,4 @@
 import Icon from "@ant-design/icons";
-import React from "react";
 import { MdRemoveCircleOutline } from "react-icons/md";
 
 export default function AllocationsLabelComponent({ allocation, handleClick }) {

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useMutation } from "@apollo/client";
 import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
@@ -13,13 +12,13 @@ export default function AllocationsLabelContainer({ allocation, refetch }) {
   const handleClick = (e) => {
     e.preventDefault();
     deleteAllocation({ variables: { id: allocation.id } })
-      .then((r) => {
+      .then(() => {
         notification["success"]({
           message: t("allocations.successes.deleted")
         });
         if (refetch) refetch();
       })
-      .catch((error) => {
+      .catch(() => {
         notification["error"]({ message: t("allocations.errors.deleting") });
       });
   };

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Table } from "antd";
 import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import AuditTrailListComponent from "./audit-trail-list.component";
 import { useQuery } from "@apollo/client";
 import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";

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

@@ -1,5 +1,5 @@
 import { Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { List } from "antd";
 import Icon from "@ant-design/icons";
 import { FaArrowRight } from "react-icons/fa";

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

@@ -1,5 +1,4 @@
 import { Popover, Tag } from "antd";
-import React from "react";
 import Barcode from "react-barcode";
 import { useTranslation } from "react-i18next";
 

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

@@ -1,5 +1,5 @@
 import { Checkbox, Form, Skeleton, Typography } from "antd";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
 import "./bill-cm-returns-table.styles.scss";
@@ -33,7 +33,7 @@ export default function BillCmdReturnsTableComponent({ form, returnLoading, retu
 
         return (
           <Form.List name="outstanding_returns">
-            {(fields, { add, remove, move }) => {
+            {(fields) => {
               return (
                 <>
                   <Typography.Title level={4}>{t("bills.labels.creditsnotreceived")}</Typography.Title>

client/src/components/bill-cm-returns-table/bill-cm-returns-table.styles.scss

@@ -6,7 +6,7 @@
   td {
     padding: 8px;
     text-align: left;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--table-border-color);
 
     .ant-form-item {
       margin-bottom: 0px !important;
@@ -14,6 +14,6 @@
   }
 
   tr:hover {
-    background-color: #f5f5f5;
+    background-color: var(--table-hover-bg);
   }
 }

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

@@ -1,7 +1,7 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
 import { Button, Popconfirm } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_BILL } from "../../graphql/bills.queries";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
@@ -43,7 +43,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
       }
     });
 
-    if (!!!result.errors) {
+    if (!result.errors) {
       notification["success"]({ message: t("bills.successes.deleted") });
       insertAuditTrail({
         jobid: jobid,

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

@@ -2,7 +2,7 @@ import { PageHeader } from "@ant-design/pro-layout";
 import { useMutation, useQuery } from "@apollo/client";
 import { Button, Divider, Form, Popconfirm, Space } from "antd";
 import queryString from "query-string";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
@@ -10,7 +10,6 @@ import { createStructuredSelector } from "reselect";
 import { DELETE_BILL_LINE, INSERT_NEW_BILL_LINES, UPDATE_BILL_LINE } from "../../graphql/bill-lines.queries";
 import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
-import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import dayjs from "../../utils/day";
@@ -28,13 +27,12 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
-  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(BillDetailEditcontainer);
 
-export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail, bodyshop }) {
+export function BillDetailEditcontainer({ insertAuditTrail, bodyshop }) {
   const search = queryString.parse(useLocation().search);
 
   const { t } = useTranslation();
@@ -48,7 +46,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
 
   const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
     variables: { billid: search.billid },
-    skip: !!!search.billid,
+    skip: !search.billid,
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
@@ -71,7 +69,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
     setUpdateLoading(true);
     //let adjustmentsToInsert = {};
 
-    const { billlines, upload, ...bill } = values;
+    const { billlines, ...bill } = values;
     const updates = [];
     updates.push(
       update_bill({
@@ -98,6 +96,7 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
     });
 
     billlines.forEach((billline) => {
+      // eslint-disable-next-line no-unused-vars
       const { deductedfromlbr, inventories, jobline, original_actual_price, create_ppc, ...il } = billline;
       delete il.__typename;
 
@@ -152,8 +151,8 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
   if (error) return <AlertComponent message={error.message} type="error" />;
   if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
-  const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
-  const isinhouse = data && data.bills_by_pk && data.bills_by_pk.isinhouse;
+  const exported = data?.bills_by_pk && data.bills_by_pk.exported;
+  const isinhouse = data?.bills_by_pk && data.bills_by_pk.isinhouse;
 
   return (
     <>
@@ -183,8 +182,8 @@ export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail
                     {t("general.actions.save")}
                   </Button>
                 </Popconfirm>
-                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
-                <BillMarkExportedButton bill={data && data.bills_by_pk} />
+                <BillReeportButtonComponent bill={data?.bills_by_pk} />
+                <BillMarkExportedButton bill={data?.bills_by_pk} />
               </Space>
             }
           />
@@ -220,11 +219,11 @@ const transformData = (data) => {
         billlines: data.bills_by_pk.billlines.map((i) => {
           return {
             ...i,
-            joblineid: !!i.joblineid ? i.joblineid : "noline",
+            joblineid: i.joblineid ? i.joblineid : "noline",
             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
+              federal: i.applicable_taxes?.federal || false,
+              state: i.applicable_taxes?.state || false,
+              local: i.applicable_taxes?.local || false
             }
           };
         }),

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

@@ -1,26 +1,28 @@
 import { Button, Checkbox, Form, Modal } from "antd";
 import queryString from "query-string";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { insertAuditTrail } from "../../redux/application/application.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
 
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
-});
+const mapStateToProps = createStructuredSelector({});
+
 const mapDispatchToProps = (dispatch) => ({
-  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  setPartsOrderContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "partsOrder"
+      })
+    )
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(BillDetailEditReturn);
 
-export function BillDetailEditReturn({ setPartsOrderContext, insertAuditTrail, bodyshop, data, disabled }) {
+export function BillDetailEditReturn({ setPartsOrderContext, data, disabled }) {
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { t } = useTranslation();
@@ -69,13 +71,13 @@ export function BillDetailEditReturn({ setPartsOrderContext, insertAuditTrail, b
       <Modal
         open={open}
         onCancel={() => setOpen(false)}
-        destroyOnClose
+        destroyOnHidden
         title={t("bills.actions.return")}
         onOk={() => form.submit()}
       >
-        <Form initialValues={data && data.bills_by_pk} onFinish={handleFinish} form={form}>
+        <Form initialValues={data?.bills_by_pk} onFinish={handleFinish} form={form}>
           <Form.List name={["billlines"]}>
-            {(fields, { add, remove, move }) => {
+            {(fields) => {
               return (
                 <table style={{ tableLayout: "auto", width: "100%" }}>
                   <thead>

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

@@ -1,6 +1,5 @@
 import { Drawer, Grid } from "antd";
 import queryString from "query-string";
-import React from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import BillDetailEditComponent from "./bill-detail-edit-component";
 
@@ -29,7 +28,7 @@ export default function BillDetailEditcontainer() {
         delete search.billid;
         history({ search: queryString.stringify(search) });
       }}
-      destroyOnClose
+      destroyOnHidden
       open={search.billid}
     >
       <BillDetailEditComponent />

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

@@ -2,10 +2,11 @@ import { useApolloClient, useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
 import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
@@ -24,7 +25,7 @@ import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
-import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { handleUpload as handleUploadToImageProxy } from "../documents-upload-imgproxy/documents-upload-imgproxy.utility";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -53,10 +54,10 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const notification = useNotification();
 
   const {
-    treatments: { Enhanced_Payroll }
+    treatments: { Enhanced_Payroll, Imgproxy }
   } = useSplitTreatments({
     attributes: {},
-    names: ["Enhanced_Payroll"],
+    names: ["Enhanced_Payroll", "Imgproxy"],
     splitKey: bodyshop.imexshopid
   });
 
@@ -84,6 +85,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
     }
 
     setLoading(true);
+
+    // eslint-disable-next-line no-unused-vars
     const { upload, location, outstanding_returns, inventory, federal_tax_exempt, ...remainingValues } = values;
 
     let adjustmentsToInsert = {};
@@ -101,9 +104,13 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
                   const {
                     deductedfromlbr,
                     lbr_adjustment,
+                    // eslint-disable-next-line no-unused-vars
                     location: lineLocation,
+                    // eslint-disable-next-line no-unused-vars
                     part_type,
+                    // eslint-disable-next-line no-unused-vars
                     create_ppc,
+                    // eslint-disable-next-line no-unused-vars
                     original_actual_price,
                     ...restI
                   } = i;
@@ -196,7 +203,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           job: { lbr_adjustments: newAdjustments }
         }
       });
-      if (!!jobUpdate.errors) {
+      if (jobUpdate.errors) {
         notification["error"]({
           message: t("jobs.errors.saving", {
             message: JSON.stringify(jobUpdate.errors)
@@ -213,7 +220,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
         variables: { partsLineIds: markPolReceived.map((p) => p.id) },
         refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"]
       });
-      if (!!r2.errors) {
+      if (r2.errors) {
         setLoading(false);
         setEnterAgain(false);
         notification["error"]({
@@ -224,7 +231,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
       }
     }
 
-    if (!!r1.errors) {
+    if (r1.errors) {
       setLoading(false);
       setEnterAgain(false);
       notification["error"]({
@@ -244,7 +251,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           consumedbybillid: billId
         }
       });
-      if (!!r2.errors) {
+      if (r2.errors) {
         setLoading(false);
         setEnterAgain(false);
         notification["error"]({
@@ -298,20 +305,39 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           });
         });
       } else {
-        upload.forEach((u) => {
-          handleUpload(
-            { file: u.originFileObj },
-            {
-              bodyshop: bodyshop,
-              uploaded_by: currentUser.email,
-              jobId: values.jobid,
-              billId: billId,
-              tagsArray: null,
-              callback: null
-            },
-            notification
-          );
-        });
+        //Check if using Imgproxy or cloudinary
+
+        if (Imgproxy.treatment === "on") {
+          upload.forEach((u) => {
+            handleUploadToImageProxy(
+              { file: u.originFileObj },
+              {
+                bodyshop: bodyshop,
+                uploaded_by: currentUser.email,
+                jobId: values.jobid,
+                billId: billId,
+                tagsArray: null,
+                callback: null
+              },
+              notification
+            );
+          });
+        } else {
+          upload.forEach((u) => {
+            handleUpload(
+              { file: u.originFileObj },
+              {
+                bodyshop: bodyshop,
+                uploaded_by: currentUser.email,
+                jobId: values.jobid,
+                billId: billId,
+                tagsArray: null,
+                callback: null
+              },
+              notification
+            );
+          });
+        }
       }
     }
     ///////////////////////////
@@ -396,7 +422,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
             {t("bills.labels.generatepartslabel")}
           </Checkbox>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button loading={loading} onClick={() => form.submit()}>
+          <Button loading={loading} onClick={() => form.submit()} id="save-bill-enter-modal">
             {t("general.actions.save")}
           </Button>
           {billEnterModal.context && billEnterModal.context.id ? null : (
@@ -406,13 +432,14 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
               onClick={() => {
                 setEnterAgain(true);
               }}
+              id="save-and-new-bill-enter-modal"
             >
               {t("general.actions.saveandnew")}
             </Button>
           )}
         </Space>
       }
-      destroyOnClose
+      destroyOnHidden
     >
       <Form
         onFinish={handleFinish}

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

@@ -1,11 +1,11 @@
 import { Form, Input, Table } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
 import BillFormItemsExtendedFormItem from "./bill-form-lines.extended.formitem.component";
 
-export default function BillFormLinesExtended({ lineData, discount, form, responsibilityCenters, disabled }) {
+export default function BillFormLinesExtended({ lineData, discount, form, responsibilityCenters }) {
   const [search, setSearch] = useState("");
   const { t } = useTranslation();
   const columns = [

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { MinusCircleFilled, PlusCircleFilled, WarningOutlined } from "@ant-design/icons";
 import { Button, Form, Input, InputNumber, Select, Space, Switch } from "antd";
 import { useTranslation } from "react-i18next";
@@ -12,7 +11,7 @@ import CiecaSelect from "../../utils/Ciecaselect";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(BillFormItemsExtendedFormItem);
@@ -22,7 +21,6 @@ export function BillFormItemsExtendedFormItem({
   bodyshop,
   form,
   record,
-  index,
   disabled,
   responsibilityCenters,
   discount
@@ -78,7 +76,7 @@ export function BillFormItemsExtendedFormItem({
                 ...billlineskeys,
                 [record.id]: {
                   ...billlineskeys[billlineskeys],
-                  actual_cost: !!billlineskeys[billlineskeys].actual_cost
+                  actual_cost: billlineskeys[billlineskeys].actual_cost
                     ? billlineskeys[billlineskeys].actual_cost
                     : Math.round((parseFloat(e.target.value) * (1 - discount) + Number.EPSILON) * 100) / 100
                 }
@@ -93,7 +91,7 @@ export function BillFormItemsExtendedFormItem({
       <Form.Item shouldUpdate>
         {() => {
           const line = value;
-          if (!!!line) return null;
+          if (!line) return null;
           const lineDiscount = (1 - Math.round((line.actual_cost / line.actual_price) * 100) / 100).toPrecision(2);
 
           if (lineDiscount - discount === 0) return <div />;

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

@@ -2,7 +2,7 @@ import Icon, { UploadOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MdOpenInNew } from "react-icons/md";
 import { connect } from "react-redux";
@@ -26,7 +26,7 @@ import DateTimePicker from "../form-date-time-picker/form-date-time-picker.compo
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({});
+const mapDispatchToProps = () => ({});
 
 export function BillFormComponent({
   bodyshop,
@@ -254,7 +254,7 @@ export function BillFormComponent({
               required: true
               //message: t("general.validation.required"),
             },
-            ({ getFieldValue }) => ({
+            () => ({
               validator(rule, value) {
                 if (ClosingPeriod.treatment === "on" && bodyshop.accountingconfig.ClosingPeriod) {
                   if (
@@ -374,8 +374,10 @@ export function BillFormComponent({
             let totals;
             if (!!values.total && !!values.billlines && values.billlines.length > 0)
               totals = CalculateBillTotal(values);
-            if (!!totals)
+            if (totals)
               return (
+                // TODO: Align is not correct
+                // eslint-disable-next-line react/no-unknown-property
                 <div align="right">
                   <Space size="large" wrap>
                     <Statistic title={t("bills.labels.subtotal")} value={totals.subtotal.toFormat()} precision={2} />
@@ -458,7 +460,7 @@ export function BillFormComponent({
           if (Array.isArray(e)) {
             return e;
           }
-          return e && e.fileList;
+          return e?.fileList;
         }}
       >
         <Upload.Dragger multiple={true} name="logo" beforeUpload={() => false} listType="picture">

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

@@ -1,6 +1,5 @@
 import { useLazyQuery, useQuery } from "@apollo/client";
 import { useSplitTreatments } 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";

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

@@ -1,7 +1,6 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -16,7 +15,7 @@ const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
@@ -27,8 +26,7 @@ export function BillEnterModalLinesComponent({
   discount,
   form,
   responsibilityCenters,
-  billEdit,
-  billid
+  billEdit
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
@@ -126,7 +124,7 @@ export function BillEnterModalLinesComponent({
             ]
           };
         },
-        formInput: (record, index) => <Input.TextArea disabled={disabled} autoSize />
+        formInput: () => <Input.TextArea disabled={disabled} autoSize />
       },
       {
         title: t("billlines.fields.quantity"),
@@ -158,7 +156,7 @@ export function BillEnterModalLinesComponent({
             ]
           };
         },
-        formInput: (record, index) => <InputNumber precision={0} min={1} disabled={disabled} />
+        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} />
       },
       {
         title: t("billlines.fields.actual_price"),
@@ -188,7 +186,7 @@ export function BillEnterModalLinesComponent({
                   if (idx === index) {
                     return {
                       ...item,
-                      actual_cost: !!item.actual_cost
+                      actual_cost: item.actual_cost
                         ? item.actual_cost
                         : Math.round((parseFloat(e.target.value) * (1 - discount) + Number.EPSILON) * 100) / 100
                     };
@@ -258,7 +256,7 @@ export function BillEnterModalLinesComponent({
               <Form.Item shouldUpdate noStyle>
                 {() => {
                   const line = getFieldsValue(["billlines"]).billlines[index];
-                  if (!!!line) return null;
+                  if (!line) return null;
                   let lineDiscount = 1 - line.actual_cost / line.actual_price;
                   if (isNaN(lineDiscount)) lineDiscount = 0;
                   return (
@@ -322,7 +320,7 @@ export function BillEnterModalLinesComponent({
             ]
           };
         },
-        formInput: (record, index) => (
+        formInput: () => (
           <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
             {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
               ? CiecaSelect(true, false)
@@ -344,7 +342,7 @@ export function BillEnterModalLinesComponent({
                   name: [field.name, "location"]
                 };
               },
-              formInput: (record, index) => (
+              formInput: () => (
                 <Select disabled={disabled}>
                   {bodyshop.md_parts_locations.map((loc, idx) => (
                     <Select.Option key={idx} value={loc}>
@@ -366,7 +364,7 @@ export function BillEnterModalLinesComponent({
             name: [field.name, "deductedfromlbr"]
           };
         },
-        formInput: (record, index) => <Switch disabled={disabled} />,
+        formInput: () => <Switch disabled={disabled} />,
         additional: (record, index) => (
           <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
             {() => {
@@ -478,7 +476,7 @@ export function BillEnterModalLinesComponent({
                 name: [field.name, "applicable_taxes", "federal"]
               };
             },
-            formInput: (record, index) => <Switch disabled={disabled} />
+            formInput: () => <Switch disabled={disabled} />
           }
         ]
       }),
@@ -495,7 +493,7 @@ export function BillEnterModalLinesComponent({
             name: [field.name, "applicable_taxes", "state"]
           };
         },
-        formInput: (record, index) => <Switch disabled={disabled} />
+        formInput: () => <Switch disabled={disabled} />
       },
 
       ...InstanceRenderManager({
@@ -513,7 +511,7 @@ export function BillEnterModalLinesComponent({
                 name: [field.name, "applicable_taxes", "local"]
               };
             },
-            formInput: (record, index) => <Switch disabled={disabled} />
+            formInput: () => <Switch disabled={disabled} />
           }
         ]
       }),
@@ -575,7 +573,7 @@ export function BillEnterModalLinesComponent({
         }
       ]}
     >
-      {(fields, { add, remove, move }) => {
+      {(fields, { add, remove }) => {
         return (
           <>
             <Table
@@ -612,19 +610,7 @@ export function BillEnterModalLinesComponent({
 
 export default connect(mapStateToProps, mapDispatchToProps)(BillEnterModalLinesComponent);
 
-const EditableCell = ({
-  dataIndex,
-  title,
-  inputType,
-  record,
-  index,
-  children,
-  formInput,
-  formItemProps,
-  additional,
-  wrapper,
-  ...restProps
-}) => {
+const EditableCell = ({ dataIndex, record, children, formInput, formItemProps, additional, wrapper, ...restProps }) => {
   const propsFinal = formItemProps && formItemProps(record);
   if (propsFinal && "key" in propsFinal) {
     delete propsFinal.key;

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

@@ -9,10 +9,10 @@ export const CalculateBillTotal = (invoice) => {
   let stateTax = Dinero({ amount: 0 });
   let localTax = Dinero({ amount: 0 });
 
-  if (!!!billlines) return null;
+  if (!billlines) return null;
 
   billlines.forEach((i) => {
-    if (!!i) {
+    if (i) {
       const itemTotal = Dinero({
         amount: Math.round((i.actual_cost || 0) * 100)
       }).multiply(i.quantity || 1);

client/src/components/bill-inventory-table/bill-inventory-table.component.jsx

@@ -1,5 +1,5 @@
 import { Checkbox, Form, Skeleton, Typography } from "antd";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
 import "./bill-inventory-table.styles.scss";
@@ -13,7 +13,7 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   billEnterModal: selectBillEnterModal
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = () => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(BillInventoryTable);
@@ -22,7 +22,7 @@ export function BillInventoryTable({ billEnterModal, bodyshop, form, billEdit, i
   const { t } = useTranslation();
 
   useEffect(() => {
-    if (inventoryData && inventoryData.inventory) {
+    if (inventoryData?.inventory) {
       form.setFieldsValue({
         inventory: billEnterModal.context.consumeinventoryid
           ? inventoryData.inventory.map((i) => {
@@ -47,7 +47,7 @@ export function BillInventoryTable({ billEnterModal, bodyshop, form, billEdit, i
 
         return (
           <Form.List name="inventory">
-            {(fields, { add, remove, move }) => {
+            {(fields) => {
               return (
                 <>
                   <Typography.Title level={4}>{t("inventory.labels.inventory")}</Typography.Title>