IO-2824 Dev Server Instance Switch

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

.circleci/config.yml

@@ -6,7 +6,7 @@ orbs:
   aws-cli: circleci/aws-cli@4.0
   eb: circleci/aws-elastic-beanstalk@2.0.1
 jobs:
-  api-deploy:
+  imex-api-deploy:
     docker:
       - image: cimg/node:18.18.2
     steps:
@@ -19,9 +19,9 @@ jobs:
             eb deploy
             eb status
 
-  hasura-migrate:
+  imex-hasura-migrate:
     docker:
-      - image: cimg/node:16.15.0
+      - image: cimg/node:18.18.2
     parameters:
       secret:
         type: string
@@ -38,10 +38,34 @@ jobs:
             hasura metadata apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
 
-  app-build:
+  imex-app-build:
     docker:
-      - image: cimg/node:16.15.0
+      - image: cimg/node:18.18.2
+    resource_class: large
+    working_directory: ~/repo/client
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
 
+      - run: npm run build:imex
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
+
+      - aws-s3/sync:
+          from: build
+          to: "s3://imex-online-production/"
+          arguments: "--exclude '*.map'"
+
+  imex-app-beta-build:
+    docker:
+      - image: cimg/node:18.18.2
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -51,11 +75,16 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build
+      - run: npm run build:production:imex
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
 
       - aws-s3/sync:
-          from: build
-          to: "s3://imex-online-production/"
+          from: dist
+          to: "s3://imex-online-beta/"
           arguments: "--exclude '*.map'"
 
   rome-api-deploy:
@@ -73,11 +102,11 @@ jobs:
 
   rome-hasura-migrate:
     docker:
-      - image: cimg/node:16.15.0
+      - image: cimg/node:18.18.2
     parameters:
       secret:
         type: string
-        default: $HASURA_PROD_SECRET
+        default: $HASURA_ROME_PROD_SECRET
     working_directory: ~/repo/hasura
     steps:
       - checkout:
@@ -92,37 +121,57 @@ jobs:
 
   rome-app-build:
     docker:
-      - image: cimg/node:16.15.0
+      - image: cimg/node:18.18.2
 
     working_directory: ~/repo/client
 
     steps:
       - checkout:
           path: ~/repo
-
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Install Dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
+          command: npm i
 
-      - run: yarn run build
+      - run: npm run build:production:rome
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
 
       - aws-s3/sync:
-          from: build
+          from: dist
           to: "s3://rome-online-production/"
-      - jira/notify
+          arguments: "--exclude '*.map'"
+
+  promanager-app-build:
+    docker:
+      - image: cimg/node:18.18.2
+
+    working_directory: ~/repo/client
+
+    steps:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - run: npm run build:production:promanager
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
+
+      - aws-s3/sync:
+          from: dist
+          to: "s3://promanager-production/"
+          arguments: "--exclude '*.map'"
 
   test-rome-hasura-migrate:
     docker:
-      - image: cimg/node:16.15.0
+      - image: cimg/node:18.18.2
     parameters:
       secret:
         type: string
@@ -135,45 +184,14 @@ jobs:
           name: Execute migration
           command: |
             npm install hasura-cli -g
-            echo ${HASURA_TEST_SECRET}
             hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
 
   test-rome-app-build:
-    docker:
-      - image: cimg/node:16.15.0
-
-    working_directory: ~/repo/client
-
-    steps:
-      - checkout:
-          path: ~/repo
-
-      - restore_cache:
-          name: Restore Yarn Package Cache
-          keys:
-            - yarn-packages-{{ checksum "yarn.lock" }}
-      - run:
-          name: Install Dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn Package Cache
-          key: yarn-packages-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
-
-      - run: yarn run build:test
-
-      - aws-s3/sync:
-          from: build
-          to: "s3://rome-online-test/"
-      - jira/notify
-
-  app-beta-build:
     docker:
       - image: cimg/node:18.18.2
-    resource_class: large
+
     working_directory: ~/repo/client
 
     steps:
@@ -183,7 +201,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build
+      - run: npm run build:test:rome
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -191,15 +209,14 @@ jobs:
           region: AWS_REGION
 
       - aws-s3/sync:
-          from: build
-          to: "s3://imex-online-beta/"
+          from: dist
+          to: "s3://rome-online-test/"
           arguments: "--exclude '*.map'"
-      - jira/notify
 
-  rome-app-beta-build:
+  test-promanager-app-build:
     docker:
       - image: cimg/node:18.18.2
-    resource_class: large
+
     working_directory: ~/repo/client
 
     steps:
@@ -209,16 +226,21 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build
+      - run: npm run build:test:promanager
+
+      - aws-cli/setup:
+          aws_access_key_id: AWS_ACCESS_KEY_ID
+          aws_secret_access_key: AWS_SECRET_ACCESS_KEY
+          region: AWS_REGION
 
       - aws-s3/sync:
-          from: build
-          to: "s3://rome-online-production-beta/"
-      - jira/notify
+          from: dist
+          to: "s3://promanager-testing/"
+          arguments: "--exclude '*.map'"
 
   test-hasura-migrate:
     docker:
-      - image: cimg/node:16.15.0
+      - image: cimg/node:18.18.2
     parameters:
       secret:
         type: string
@@ -231,15 +253,14 @@ jobs:
           name: Execute migration
           command: |
             npm install hasura-cli -g
-            echo ${HASURA_TEST_SECRET}
             hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
             hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
             hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
 
-  test-app-build:
+  imex-test-app-build:
     docker:
-      - image: cimg/node:16.15.0
-
+      - image: cimg/node:18.18.2
+    resource_class: large
     working_directory: ~/repo/client
 
     steps:
@@ -249,14 +270,14 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test
+      - run: npm run build:test:imex
 
       - aws-s3/sync:
           from: build
           to: "s3://imex-online-test/"
           arguments: "--exclude '*.map'"
 
-  test-app-beta-build:
+  imex-test-app-beta-build:
     docker:
       - image: cimg/node:18.18.2
     resource_class: large
@@ -270,9 +291,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:test
-
-      - run: npm run sentry:sourcemaps
+      - run: npm run build:test:imex
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -280,30 +299,10 @@ jobs:
           region: AWS_REGION
 
       - aws-s3/sync:
-          from: build
+          from: dist
           to: "s3://imex-online-test-beta/"
           arguments: "--exclude '*.map'"
 
-  rome-test-app-beta-build:
-    docker:
-      - image: cimg/node:18.18.2
-    resource_class: large
-    working_directory: ~/repo/client
-
-    steps:
-      - checkout:
-          path: ~/repo
-
-      - run:
-          name: Install Dependencies
-          command: npm i
-
-      - run: npm run build:test
-
-      - aws-s3/sync:
-          from: build
-          to: "s3://rome-online-test-beta/"
-
 
   admin-app-build:
     docker:
@@ -338,23 +337,19 @@ jobs:
 workflows:
   deploy_and_build:
     jobs:
-      - api-deploy:
+      - imex-api-deploy:
+          filters:
+            branches:
+              only: master-AIO
+      - imex-app-build:
           filters:
             branches:
               only: master
-      - app-build:
+      - imex-app-beta-build:
           filters:
             branches:
-              only: master
-      - app-beta-build:
-          filters:
-            branches:
-              only: master-beta
-      - rome-app-beta-build:
-          filters:
-            branches:
-              only: rome/master-beta
-      - hasura-migrate:
+              only: master-AIO
+      - imex-hasura-migrate:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
@@ -362,43 +357,47 @@ workflows:
       - rome-api-deploy:
           filters:
             branches:
-              only: rome/master
+              only: master-AIO
       - rome-app-build:
           filters:
             branches:
-              only: rome/master
+              only: master-AIO
       - rome-hasura-migrate:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
-              only: rome/master
-      - test-app-build:
+              only: master-AIO
+      - imex-test-app-build:
           filters:
             branches:
               only: test
-      - rome-test-app-beta-build:
+      - imex-test-app-beta-build:
           filters:
             branches:
-              only: rome/test-beta
-      - test-app-beta-build:
-          filters:
-            branches:
-              only: test-beta
+              only: test-AIO
       - test-hasura-migrate:
           secret: ${HASURA_TEST_SECRET}
           filters:
             branches:
-              only: test
+              only: test-AIO
       - test-rome-app-build:
           filters:
             branches:
-              only: rome/test
+              only: test-AIO
+      - test-promanager-app-build:
+          filters:
+            branches:
+              only: test-AIO
+      - promanager-app-build:
+          filters:
+            branches:
+              only: master-AIO
       - test-rome-hasura-migrate:
           secret: ${HASURA_ROME_TEST_SECRET}
           filters:
             branches:
-              only: rome/test
+              only: test-AIO
       #- admin-app-build:
       #filters:
       #branches:
-      #only: master
+      #only: master

.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = false
+quote_type = single
+max_line_length = 100
+bracketSpacing = false
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.yml]
+indent_size = 2
+
+[*.json]
+indent_size = 2

.gitignore

@@ -21,6 +21,7 @@ admin/coverage
 /build
 client/build
 admin/build
+client/dist
 # misc
 .DS_Store
 .env
@@ -119,4 +120,4 @@ logs/oAuthClient-log.log
 
 /*.env.*
 .idea/*
-.idea
+.idea

.prettierrc.js

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

_reference/BodyshopFeatures.json

@@ -0,0 +1,14 @@
+{
+  "mobile": "date",
+  "allAccess": "bool",
+  "timetickets": "date",
+  "payments": "date",
+  "partsorders": "date",
+  "bills": "Date",
+  "export": "date",
+  "csi": "Date",
+  "courtesycars": "date",
+  "media": "date",
+  "visualboard": "date",
+  "scoreboard": "date"
+}

_reference/TeamsSlackInvestigationFinalVersion.md

@@ -0,0 +1,316 @@
+## Microsoft Teams
+
+Integrating Microsoft Teams into your Node.js backend and React frontend application can enhance communication and workflow efficiency,
+especially in a body shop management context for the automotive industry. Microsoft Teams provides several ways to integrate its functionalities into your application, 
+including bots, tabs, messaging extensions, webhooks, and connectors. Here's an overview of the options and how to implement them:
+
+### 0.5 - Share to Teams (TM)
+
+- https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams-from-web-apps
+- https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams-from-personal-app-or-tab
+- https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/people-picker-capability
+- (Example of some Teams code Integrations) https://github.com/microsoft/teams-powerapps-app-templates/
+
+### 1. Microsoft Graph API
+The Microsoft Graph API is the gateway to data and intelligence in Microsoft 365, including Teams. It allows you to work with Teams data like channels, messages, and more. You can use it to post status changes back to Teams or read data from Teams to affect your site.
+
+Backend (Node.js): Use the @microsoft/microsoft-graph-client package to make API calls to Teams. You will need to handle authentication with Azure AD, which can be done using the @azure/identity package to get tokens for Graph API requests.
+
+*Implementation Steps*:
+
+Register your application in Azure AD to get the client_id and client_secret.
+
+(Is client_id and client_secret going to be something required for every customer or is it going to be a singleton)
+Implement OAuth 2.0 authorization flow to obtain access tokens.
+(This will need to be tracked by association to a bodyshop)
+
+bodyshop->Channels | People ->Messages
+
+Use the access token to make requests to the Microsoft Graph API to interact with Teams.
+
+### 2. Webhooks and Connectors
+Webhooks allow your application to send notifications to a Teams channel, which is useful for posting status changes. Connectors are a set of predefined webhooks that offer a more integrated experience.
+
+Setup:
+In Microsoft Teams, configure an incoming webhook for the channel you want to post messages to.
+Use the webhook URL to send JSON payloads from your Node.js backend, which can then be displayed in Teams.
+
+
+### 3. Bots
+Bots in Teams can interact with users to take commands or post information. You can use the Bot Framework along with the Teams activity handler to create bots that can communicate with your React frontend and Node.js backend.
+
+Backend (Node.js): Use the botbuilder package to create and manage your bot's interactions with Teams.
+
+*Implementation Steps*:
+
+Create a bot registration in Azure Bot Services.
+Implement the bot logic in your Node.js application using the Bot Framework SDK.
+Use the Microsoft Bot Framework's TeamsActivityHandler to respond to Teams-specific activities.
+
+### 4. Tabs
+Tabs in Teams allow you to integrate web-based content as part of Teams, which can be your React application or specific parts of it. This is particularly useful for creating a seamless experience within Teams.
+
+*Implementation Steps*:
+- Create a Teams app manifest that defines your tab and its configuration.
+- Host your React application or the specific parts you want to embed as a tab.
+- Use the Teams SDK in your React application to interact with Teams context and APIs.
+
+*Getting Started*:
+Microsoft Teams Toolkit for Visual Studio Code: This toolkit simplifies the process of setting up your Teams application, including authentication, configuration, and deployment.
+Documentation and Samples: Microsoft provides extensive documentation and sample code for developing Teams applications, which can be invaluable for getting started and solving specific challenges.
+Implementing these features requires a good understanding of both the Microsoft Teams platform and your application's architecture. 
+Start small, perhaps by implementing notifications via webhooks, and gradually add more complex integrations like bots or tabs based on your needs and user feedback.
+
+### Examples:
+
+##### Posting Messages to a Teams Channel Using Incoming Webhooks
+
+1 - Set up an Incoming Webhook in Microsoft Teams:
+- Go to the Teams channel where you want to post messages.
+- Click on the three dots (...) next to the channel name and select Connectors.
+- Search for Incoming Webhook, click Add, and then Configure.
+- Name your webhook, upload an image if desired, and click Create.
+- Copy the webhook URL provided.
+
+  (Patrick Note: The clients might have issues with setting up webhooks, it requires a lot of user configuration and our users are not technical).
+
+2 - Node.js Code to Post a Message:
+
+Ensure you have axios or any HTTP client library installed in your Node.js project. If not, you can install axios via npm: npm install axios.
+Use the following code snippet to post a message to the Teams channel:
+
+```javascript 
+const axios = require('axios');
+
+// Replace 'YOUR_WEBHOOK_URL' with your actual webhook URL
+const webhookUrl = 'YOUR_WEBHOOK_URL';
+
+const message = {
+  "@type": "MessageCard",
+  "@context": "http://schema.org/extensions",
+  "summary": "Issue 176715375",
+  "themeColor": "0078D7",
+  "title": "Issue opened: \"Push notifications not working\"",
+  "sections": [{
+    "activityTitle": "A new issue was created",
+    "activitySubtitle": "Today, 2:36 PM",
+    "activityImage": "https://example.com/issues/image.png",
+    "facts": [{
+        "name": "Repository:",
+        "value": "Repo name"
+      },
+      {
+        "name": "Issue #:",
+        "value": "176715375"
+      }
+    ],
+    "markdown": true
+  }]
+};
+
+axios.post(webhookUrl, message)
+  .then(response => console.log('Successfully sent message to Teams channel'))
+  .catch(error => console.error('Error sending message to Teams channel', error));
+```
+
+#### Creating a Simple Bot for Teams
+1 Prerequisites:
+- Register your bot with the Microsoft Bot Framework and get your bot's App ID and App Password.
+- Use the Bot Framework SDK for JavaScript.
+  2 Install Dependencies:
+- You need to install the botbuilder package. Run npm install botbuilder.
+
+The following example demonstrates a simple bot that echoes back received messages.
+
+```javascript
+const { BotFrameworkAdapter, MemoryStorage, ConversationState, TurnContext } = require('botbuilder');
+
+// Create adapter.
+// See https://aka.ms/about-bot-adapter to learn more about adapters.
+const adapter = new BotFrameworkAdapter({
+    appId: process.env.MicrosoftAppId,
+    appPassword: process.env.MicrosoftAppPassword
+});
+
+// Create conversation state with in-memory storage provider.
+const conversationState = new ConversationState(new MemoryStorage());
+adapter.use(conversationState);
+
+// Listen for incoming requests.
+server.post('/api/messages', (req, res) => {
+    adapter.processActivity(req, res, async (context) => {
+        // Echo back what the user said
+        if (context.activity.type === 'message') {
+            await context.sendActivity(`You said '${context.activity.text}'`);
+        }
+    });
+});
+```
+
+Running Your Bot:
+- Make sure to expose your bot endpoint (/api/messages in this case) to the internet using a service like ngrok.
+- Update your bot's messaging endpoint in the Microsoft Bot Framework portal to point to the ngrok URL.
+
+### Slash Commands (Bot)
+1 -  Create a Microsoft Teams App: You need to develop a Teams app that can interact with users through commands. This involves using the Microsoft Teams Developer Platform and possibly the Bot Framework.
+2 - Use Bots for Custom Commands: The primary way to introduce custom slash commands in Teams is through bots. Bots can respond to specific commands (or messages) that are input by users. When you create a bot for Teams, you can define custom commands that the bot will recognize and respond to.
+3 - Developing the Bot: You can develop a bot using the Microsoft Bot Framework. This allows your bot to receive and send messages to a Teams channel or chat. Within your bot's code, you can define what actions to take when it receives specific commands.
+4 - Register Your Bot with Microsoft Bot Framework: Register your bot with the Microsoft Bot Framework and configure it to work with Microsoft Teams. This step involves getting a Microsoft App ID and password that are necessary for your bot to communicate with the Teams platform.
+5 - Add Your Bot to Microsoft Teams: Once your bot is developed and registered, you can package your Teams app (which includes the bot) and upload it to Microsoft Teams. This will make your bot available to users within Teams, where they can interact with it using the custom commands you've defined.
+6 - Handling Slash Commands: In the context of your bot's code, you will need to interpret messages that start with a slash (/) as commands. You can then parse the command text and perform the appropriate actions or respond accordingly.
+7 - Publish Your App: For broader distribution, you can publish your Teams app to the Teams app store or distribute it within your organization through the Teams admin center.
+/ <command> <arb> ....
+(Unrelated to teams but then used in teams for functionality)
+- A Job has a todo list
+- a todo item may have an employee
+- a todo item may have a due date
+- a todo item may have a priority
+
+--- Call notes ----
+- Tasks (TODO List)
+- EMail reminders
+
+## Slack
+
+Integrating Slack into your Node.js backend and React frontend application can significantly streamline communication and operations for your automotive industry body shop management software. Slack offers various integration points including bots, apps, webhooks, and its rich API to facilitate interactions between your application and Slack workspace. Here's how you can leverage these integration points:
+
+### 1. **Slack Web API**
+
+The Slack Web API allows you to interact with Slack, enabling functionalities like sending messages, managing channels, and more directly from your application.
+
+- **Backend (Node.js)**: Utilize the `@slack/web-api` package to make API calls from your Node.js backend. This will be the backbone for actions such as posting status updates to Slack channels or handling commands from Slack that can affect your site.
+
+- **Implementation Steps**:
+    1. Create a Slack app in your Slack workspace and obtain the API tokens.
+    2. Use the `@slack/web-api` package to authenticate and interact with Slack API endpoints.
+    3. Implement features such as sending messages or processing events from Slack.
+
+### 2. **Incoming Webhooks**
+
+For simpler integrations focused on sending notifications to Slack channels, incoming webhooks are straightforward and effective. They allow you to send messages to a specific channel without a full-blown app.
+
+- **Setup**:
+    1. Create an incoming webhook from the Slack app configuration page.
+    2. Use the webhook URL to send messages from your Node.js backend by making simple HTTP POST requests with your message payload.
+
+### 3. **Bots**
+
+Slack bots can facilitate interactive experiences within your Slack workspace, responding to commands, posting notifications, or even pulling data from your site on demand.
+
+- **Backend (Node.js)**: Leverage the `@slack/bolt` framework, which simplifies creating Slack bots with event handling, messaging, and built-in OAuth support.
+
+- **Implementation Steps**:
+    1. Create a Slack app and enable bot features.
+    2. Use the `@slack/bolt` package to develop your bot, handling events like messages or commands.
+    3. Deploy your bot and set it to listen to incoming events from Slack.
+
+### 4. **Slack Block Kit**
+
+For more engaging and interactive messages, Slack's Block Kit provides a UI framework that allows you to create richly formatted messages, modals, and more.
+
+- **Frontend (React)** and **Backend (Node.js)**: Utilize Slack's Block Kit to design complex messages with buttons, sections, and interactive components. You can send these payloads through the Web API or from bots to enhance your app's interaction with users.
+
+### Getting Started
+
+- **Slack API Documentation and Tools**: Slack's API documentation is comprehensive and includes tutorials, tooling (like Block Kit Builder), and SDK documentation to help you get started.
+
+- **Testing and Development**: Slack provides a sandbox environment for you to test your app's integrations and interactions without affecting your live workspace.
+
+To integrate Slack into your application effectively, start by planning out the interactions you need (e.g., notifications, commands, information retrieval) and map these to the appropriate Slack features. Then, incrementally build and test each integration, utilizing Slack's development tools and your existing Node.js and React knowledge to create a seamless experience for your users.
+
+#### Examples
+
+1. Incoming Webhooks
+   Incoming Webhooks are a simple way to post messages from your Node.js application into Slack channels. They're perfect for notifying team members about status changes or updates.
+
+Setup:
+
+1 - Create a new Slack app in your workspace and enable incoming webhooks.
+2 - Add a new webhook to your app and choose the channel it will post to.
+3 - Use the webhook URL to send messages from your backend.
+
+Node.js Example:
+
+```javascript
+
+const axios = require('axios');
+const webhookUrl = 'YOUR_SLACK_WEBHOOK_URL';
+
+async function postMessageToSlack(message) {
+  await axios.post(webhookUrl, {
+    text: message, // Your message here
+  });
+}
+
+postMessageToSlack('New status update on the automotive project!').catch(console.error);
+```
+2. Bots
+   Slack bots can interact with users via messages, respond to commands, and even post updates. They're great for building interactive features.
+
+Setup:
+
+1 - Create a Slack app and add the Bot Token Scopes (like chat:write).
+2 - Install the app to your workspace to get your bot token.
+3 - Use the @slack/bolt framework for easy bot development in Node.js.
+
+Node.js Example:
+
+```javascript
+const { App } = require('@slack/bolt');
+
+const app = new App({
+  token: process.env.SLACK_BOT_TOKEN, // Set your bot's access token here
+  signingSecret: process.env.SLACK_SIGNING_SECRET // Set your app's signing secret here
+});
+
+app.message('hello', async ({ message, say }) => {
+  await say(`Hey there <@${message.user}>!`);
+});
+
+(async () => {
+  await app.start(process.env.PORT || 3000);
+  console.log('Slack bot is running!');
+})();
+```
+
+3. Slash Commands
+   Slash Commands allow users to interact with your application directly from Slack by typing commands that start with /.
+
+Setup:
+
+1 - Create a Slack app and configure a new Slash Command (e.g., /statusupdate).
+2 - Point the command request URL to your Node.js backend endpoint.
+3 - Implement the endpoint to handle the command and respond accordingly.
+
+Node.js Example:
+
+```javascript
+const express = require('express');
+const bodyParser = require('body-parser');
+
+const app = express();
+app.use(bodyParser.urlencoded({ extended: false }));
+
+app.post('/slack/commands/statusupdate', (req, res) => {
+  const { text, user_name } = req.body; // Command input and user info
+  // Logic to handle the command goes here. For example, update a status or fetch information.
+  res.send(`Status update received: ${text} - from ${user_name}`);
+});
+
+app.listen(process.env.PORT || 3000, () => console.log('Server is running'));
+```
+
+4. Interactive Components
+   Interactive components like buttons or menus can make your Slack messages more engaging and interactive.
+
+Setup:
+1 - Enable Interactivity in your Slack app settings.
+2 - Implement an endpoint in your Node.js backend to handle interactions.
+3 - Send messages with interactive components from your backend.
+
+Implementing these features into your Node.js and React application will enable a more dynamic and integrated experience for users of your body shop management software. Start with the simpler integrations like webhooks and progressively incorporate bots and interactive components as needed.
+
+ACTION ITEMS:
+- Slot in tasks, this will be a dependency for things we want to do in the future.
+- This would involve GUI components
+- This would involve a backend component

_reference/Test_CDK_Acct Config.json

@@ -567,4 +567,4 @@
       "description": "Exempt"
     }
   ]
-}
+}

_reference/reportFiltersAndSorters.md

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

_reference/test-ecoystem.config.js

@@ -1,20 +1,20 @@
 module.exports = {
-    apps: [
-        {
-            name: "IO Test API",
-            cwd: "./io",
-            script: "./server.js",
-            env: {
-                NODE_ENV: "test",
-            },
-        },
+  apps: [
+    {
+      name: "IO Test API",
+      cwd: "./io",
+      script: "./server.js",
+      env: {
+        NODE_ENV: "test"
+      }
+    },
 
-        {
-            name: "Bitbucket Webhook",
-            script: "./webhook/index.js",
-            env: {
-                NODE_ENV: "production",
-            },
-        },
-    ],
+    {
+      name: "Bitbucket Webhook",
+      script: "./webhook/index.js",
+      env: {
+        NODE_ENV: "production"
+      }
+    }
+  ]
 };

client/.env.development

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

client/.env.development.imex

@@ -0,0 +1,14 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GA_CODE=231099835
+VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
+VITE_APP_CLOUDINARY_API_KEY=957865933348715
+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=http://localhost:4000
+VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_INSTANCE=IMEX

client/.env.development.promanager

@@ -0,0 +1,15 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GA_CODE=231099835
+# VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
+VITE_APP_CLOUDINARY_API_KEY=957865933348715
+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=http://localhost:4000
+VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_INSTANCE=PROMANAGER

client/.env.development.rome

@@ -0,0 +1,16 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
+VITE_APP_GA_CODE=231099835
+# VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
+VITE_APP_CLOUDINARY_API_KEY=957865933348715
+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=http://localhost:4000
+VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_COUNTRY=USA
+VITE_APP_INSTANCE=ROME

client/.env.production

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

client/.env.production.imex

@@ -0,0 +1,15 @@
+GENERATE_SOURCEMAP=true
+VITE_APP_GRAPHQL_ENDPOINT=https://db.imex.online/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.imex.online/v1/graphql
+VITE_APP_GA_CODE=231103507
+VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU","authDomain":"imex-prod.firebaseapp.com","databaseURL":"https://imex-prod.firebaseio.com","projectId":"imex-prod","storageBucket":"imex-prod.appspot.com","messagingSenderId":"253497221485","appId":"1:253497221485:web:3c81c483b94db84b227a64","measurementId":"G-NTWBKG2L0M"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
+VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+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

client/.env.production.promanager

@@ -0,0 +1,15 @@
+GENERATE_SOURCEMAP=true
+VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
+VITE_APP_GA_CODE=231103507
+VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
+VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
+VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
+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=PROMANAGER

client/.env.production.rome

@@ -0,0 +1,15 @@
+GENERATE_SOURCEMAP=true
+VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
+VITE_APP_GA_CODE=231103507
+VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+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=https://api.romeonline.io/
+VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
+VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
+VITE_APP_INSTANCE=ROME

client/.env.test

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

client/.env.test.imex

@@ -0,0 +1,15 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.test.bodyshop.app/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.bodyshop.app/v1/graphql
+VITE_APP_GA_CODE=231099835
+VITE_APP_FIREBASE_CONFIG={   "apiKey":"AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",   "authDomain":"imex-test.firebaseapp.com",   "projectId":"imex-test",   "storageBucket":"imex-test.appspot.com",   "messagingSenderId":"991923618608",   "appId":"1:991923618608:web:633437569cdad78299bef5",   "measurementId":"G-TW0XLZEH18"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+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_IS_TEST=true
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_INSTANCE=IMEX

client/.env.test.promanager

@@ -0,0 +1,15 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
+VITE_APP_GA_CODE=231099835
+VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+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.romeonline.io/
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
+VITE_APP_IS_TEST=true
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_INSTANCE=PROMANAGER

client/.env.test.rome

@@ -0,0 +1,15 @@
+VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
+VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
+VITE_APP_GA_CODE=231103507
+VITE_APP_FIREBASE_CONFIG={  "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",  "authDomain": "rome-prod-1.firebaseapp.com",  "projectId": "rome-prod-1",  "storageBucket": "rome-prod-1.appspot.com",  "messagingSenderId": "147786367145",  "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8",  "measurementId": "G-G8Z9DRHTZS"}
+VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
+VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
+VITE_APP_CLOUDINARY_API_KEY=473322739956866
+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=https://api.test.romeonline.io/
+VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
+VITE_APP_IS_TEST=true
+VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
+VITE_APP_INSTANCE=ROME

client/.eslintrc

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

client/craco.config.js

@@ -1,10 +1,10 @@
 // craco.config.js
 const TerserPlugin = require("terser-webpack-plugin");
 const CracoLessPlugin = require("craco-less");
-const {convertLegacyToken} = require('@ant-design/compatible/lib');
-const {theme} = require('antd/lib');
+const { convertLegacyToken } = require("@ant-design/compatible/lib");
+const { theme } = require("antd/lib");
 
-const {defaultAlgorithm, defaultSeed} = theme;
+const { defaultAlgorithm, defaultSeed } = theme;
 
 const mapToken = defaultAlgorithm(defaultSeed);
 const v4Token = convertLegacyToken(mapToken);
@@ -12,57 +12,42 @@ const v4Token = convertLegacyToken(mapToken);
 // TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
 
 module.exports = {
-    plugins: [
-        // {
-        //     plugin: SentryWebpackPlugin,
-        //     options: {
-        //         // sentry-cli configuration
-        //         authToken:
-        //             "6b45b028a02342db97a9a2f92c0959058665443d379d4a3a876430009e744260",
-        //         org: "snapt-software",
-        //         project: "rome-online",
-        //         release: process.env.REACT_APP_GIT_SHA,
-        //
-        //         // webpack-specific configuration
-        //         include: ".",
-        //         ignore: ["node_modules", "webpack.config.js"],
-        //     },
-        // },
-        {
-            plugin: CracoLessPlugin,
-            options: {
-                lessLoaderOptions: {
-                    lessOptions: {
-                        modifyVars: {...v4Token},
-                        javascriptEnabled: true,
-                    },
-                },
-            },
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: { ...v4Token },
+            javascriptEnabled: true
+          }
+        }
+      }
+    }
+  ],
+  webpack: {
+    configure: (webpackConfig) => {
+      return {
+        ...webpackConfig,
+        // Required for Dev Server
+        devServer: {
+          ...webpackConfig.devServer,
+          allowedHosts: "all"
         },
-    ],
-    webpack: {
-        configure: (webpackConfig) => {
-            return {
-                ...webpackConfig,
-                // Required for Dev Server
-                devServer: {
-                    ...webpackConfig.devServer,
-                    allowedHosts: 'all',
-                },
-                optimization: {
-                    ...webpackConfig.optimization,
-                    // Workaround for CircleCI bug caused by the number of CPUs shown
-                    // https://github.com/facebook/create-react-app/issues/8320
-                    minimizer: webpackConfig.optimization.minimizer.map((item) => {
-                        if (item instanceof TerserPlugin) {
-                            item.options.parallel = 2;
-                        }
+        optimization: {
+          ...webpackConfig.optimization,
+          // Workaround for CircleCI bug caused by the number of CPUs shown
+          // https://github.com/facebook/create-react-app/issues/8320
+          minimizer: webpackConfig.optimization.minimizer.map((item) => {
+            if (item instanceof TerserPlugin) {
+              item.options.parallel = 2;
+            }
 
-                        return item;
-                    }),
-                },
-            };
-        },
-    },
-    devtool: "source-map",
+            return item;
+          })
+        }
+      };
+    }
+  },
+  devtool: "source-map"
 };

client/cypress.config.js

@@ -1,17 +1,17 @@
-const {defineConfig} = require('cypress')
+const { defineConfig } = require("cypress");
 
 module.exports = defineConfig({
-    experimentalStudio: true,
-    env: {
-        FIREBASE_USERNAME: 'cypress@imex.test',
-        FIREBASE_PASSWORD: 'cypress',
+  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);
     },
-    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: 'http://localhost:3000',
-    },
-})
+    baseUrl: "http://localhost:3000"
+  }
+});

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

@@ -1,24 +1,19 @@
 /// <reference types="Cypress" />
-const {FIREBASE_USERNAME, FIREBASE_PASSWORcD} = Cypress.env();
+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 ==== */
-    });
+  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

@@ -11,133 +11,114 @@
 // please read our getting started guide:
 // https://on.cypress.io/introduction-to-cypress
 
-describe('example to-do app', () => {
+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(() => {
-        // 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')
-    })
+      // 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('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)
+    it("can filter for uncompleted tasks", () => {
+      // We'll click on the "active" button in order to
+      // display only incomplete items
+      cy.contains("Active").click();
 
-        // 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')
-    })
+      // 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");
 
-    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'
+      // 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");
+    });
 
-        // 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}`)
+    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();
 
-        // 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)
-    })
+      cy.get(".todo-list li").should("have.length", 1).first().should("have.text", "Pay electric bill");
 
-    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()
+      cy.contains("Walk the dog").should("not.exist");
+    });
 
-        // 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')
-    })
+    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();
 
-    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()
-        })
+      // 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");
 
-        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')
-        })
-    })
-})
+      // 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,299 +1,284 @@
 /// <reference types="cypress" />
 
-context('Actions', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/actions')
-    })
+context("Actions", () => {
+  beforeEach(() => {
+    cy.visit("https://example.cypress.io/commands/actions");
+  });
 
-    // https://on.cypress.io/interacting-with-elements
+  // 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')
+  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 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}')
+      // .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')
+      // 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')
-    })
+    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(".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(".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(".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')
+  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!')
-    })
+    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()
+  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 |
-        //  -----------------------------------
+    // 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()
+    // 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')
+    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 :)
+    // .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)
+    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})
+    // 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})
-    })
+    // 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
+  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')
-    })
+    // 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
+  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')
-    })
+    // 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
+  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')
+    // 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')
+    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 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')
+    // .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')
+    // 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')
-    })
+    cy.get('.action-radios [type="radio"]').check("radio3", { force: true }).should("be.checked");
+  });
 
-    it('.uncheck() - uncheck a checkbox element', () => {
-        // https://on.cypress.io/uncheck
+  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')
+    // 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 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')
+    // .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')
-    })
+    // 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
+  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--')
+    // 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')
+    // 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'])
+    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')
+    // 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'])
+    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')
-    })
+    // 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
+  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')
+    // 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')
+    // 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')
+    cy.get("#scroll-vertical button").should("not.be.visible");
 
-        // Cypress handles the scroll direction needed
-        cy.get('#scroll-vertical button').scrollIntoView()
-            .should('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')
+    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')
-    })
+    // 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
+  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
+    // 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')
-    })
+    // 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
+  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 |
-        //  -----------------------------------
+    // 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')
+    // if you chain .scrollTo() off of cy, we will
+    // scroll the entire window
+    cy.scrollTo("bottom");
 
-        cy.get('#scrollable-horizontal').scrollTo('right')
+    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 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%')
+    // 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 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})
-    })
-})
+    // 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,39 +1,35 @@
 /// <reference types="cypress" />
 
-context('Aliasing', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/aliasing')
-    })
+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
+  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 @
+    // 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')
+    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()
+    // 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')
-    })
+    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')
+  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()
+    // 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)
-    })
-})
+    // https://on.cypress.io/wait
+    cy.wait("@getComment").its("response.statusCode").should("eq", 200);
+  });
+});

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

@@ -1,177 +1,173 @@
 /// <reference types="cypress" />
 
-context('Assertions', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/assertions')
-    })
+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)
+  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')
+      // 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
+      // 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('.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')
-        })
-    })
+    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");
+          }
 
-    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'}
+          const className = $div[0].className;
 
-            expect(o).to.equal(o)
-            expect(o).to.deep.equal({foo: 'bar'})
-            // matching text using regular expression
-            expect('FooBar').to.match(/bar$/i)
-        })
+          if (!className.match(/heading-/)) {
+            throw new Error(`Could not find class "heading-" in ${className}`);
+          }
+        });
+    });
 
-        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())
+    it("matches unknown text between two elements", () => {
+      /**
+       * Text from the first element.
+       * @type {string}
+       */
+      let text;
 
-                    // jquery map returns jquery object
-                    // and .get() convert this to simple array
-                    const paragraphs = texts.get()
+      /**
+       * 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();
 
-                    // array should have length of 3
-                    expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+      cy.get(".two-elements")
+        .find(".first")
+        .then(($first) => {
+          // save text from the first element
+          text = normalizeText($first.text());
+        });
 
-                    // 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',
-                    ])
-                })
-        })
+      cy.get(".two-elements")
+        .find(".second")
+        .should(($div) => {
+          // we can massage text before comparing
+          const secondText = normalizeText($div.text());
 
-        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)
+          expect(secondText, "second text").to.equal(text);
+        });
+    });
 
-                    const className = $div[0].className
+    it("assert - assert shape of an object", () => {
+      const person = {
+        name: "Joe",
+        age: 20
+      };
 
-                    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')
-                })
-        })
+      assert.isObject(person, "value is object");
+    });
 
-        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')
-                    }
+    it("retries the should callback until assertions pass", () => {
+      cy.get("#random-number").should(($div) => {
+        const n = parseFloat($div.text());
 
-                    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)
-                })
-        })
-    })
-})
+        expect(n).to.be.gte(1).and.be.lte(10);
+      });
+    });
+  });
+});

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

@@ -1,97 +1,96 @@
 /// <reference types="cypress" />
 
-context('Connectors', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/connectors')
-    })
+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(".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(".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()
+  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')
-    })
+    // 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']
+  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')
+    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);
+        });
+    });
 
-    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 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 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 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);
         })
-
-        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)
-                })
-        })
-    })
-})
+        .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,77 +1,79 @@
 /// <reference types="cypress" />
 
-context('Cookies', () => {
-    beforeEach(() => {
-        Cypress.Cookies.debug(true)
+context("Cookies", () => {
+  beforeEach(() => {
+    Cypress.Cookies.debug(true);
 
-        cy.visit('https://example.cypress.io/commands/cookies')
+    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()
-    })
+    // 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()
+  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')
-    })
+    // 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')
+  it("cy.getCookies() - get browser cookies", () => {
+    // https://on.cypress.io/getcookies
+    cy.getCookies().should("be.empty");
 
-        cy.get('#getCookies .set-a-cookie').click()
+    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')
-        })
-    })
+    // 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')
+  it("cy.setCookie() - set a browser cookie", () => {
+    // https://on.cypress.io/setcookie
+    cy.getCookies().should("be.empty");
 
-        cy.setCookie('foo', 'bar')
+    cy.setCookie("foo", "bar");
 
-        // cy.getCookie() yields a cookie object
-        cy.getCookie('foo').should('have.property', 'value', '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')
+  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.get("#clearCookie .set-a-cookie").click();
 
-        cy.getCookie('token').should('have.property', 'value', '123ABC')
+    cy.getCookie("token").should("have.property", "value", "123ABC");
 
-        // cy.clearCookies() yields null
-        cy.clearCookie('token').should('be.null')
+    // cy.clearCookies() yields null
+    cy.clearCookie("token").should("be.null");
 
-        cy.getCookie('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')
+  it("cy.clearCookies() - clear browser cookies", () => {
+    // https://on.cypress.io/clearcookies
+    cy.getCookies().should("be.empty");
 
-        cy.get('#clearCookies .set-a-cookie').click()
+    cy.get("#clearCookies .set-a-cookie").click();
 
-        cy.getCookies().should('have.length', 1)
+    cy.getCookies().should("have.length", 1);
 
-        // cy.clearCookies() yields null
-        cy.clearCookies()
+    // cy.clearCookies() yields null
+    cy.clearCookies();
 
-        cy.getCookies().should('be.empty')
-    })
-})
+    cy.getCookies().should("be.empty");
+  });
+});

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

@@ -1,202 +1,208 @@
 /// <reference types="cypress" />
 
-context('Cypress.Commands', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
-    })
+context("Cypress.Commands", () => {
+  beforeEach(() => {
+    cy.visit("https://example.cypress.io/cypress-api");
+  });
 
-    // https://on.cypress.io/custom-commands
+  // 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
+  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'
+        // 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)
+        // 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
-        })
+        // 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
-        })
-    })
-})
+    // @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')
-    })
+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)
+  // 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')
-    })
+    // 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')
+  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')
-    })
+    // 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',
-        })
-    })
-})
+  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')
-    })
+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
-    })
-})
+  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')
-    })
+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()
+  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(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)
+    expect(Cypress.config("pageLoadTimeout")).to.eq(60000);
 
-        // this will change the config for the rest of your tests!
-        Cypress.config('pageLoadTimeout', 20000)
+    // this will change the config for the rest of your tests!
+    Cypress.config("pageLoadTimeout", 20000);
 
-        expect(Cypress.config('pageLoadTimeout')).to.eq(20000)
+    expect(Cypress.config("pageLoadTimeout")).to.eq(20000);
 
-        Cypress.config('pageLoadTimeout', 60000)
-    })
-})
+    Cypress.config("pageLoadTimeout", 60000);
+  });
+});
 
-context('Cypress.dom', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
-    })
+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)
+  // 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
-    })
-})
+    // 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')
-    })
+context("Cypress.env()", () => {
+  beforeEach(() => {
+    cy.visit("https://example.cypress.io/cypress-api");
+  });
 
-    // We can set environment variables for highly dynamic values
+  // 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/',
-        })
+  // 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')
+    // 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/')
+    // 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/')
-    })
-})
+    // 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')
-    })
+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
-    })
-})
+  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')
-    })
+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
-    })
-})
+  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')
-    })
+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
-    })
-})
+  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')
-    })
+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'])
-    })
-})
+  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

@@ -3,86 +3,84 @@
 /// JSON fixture file can be loaded directly using
 // the built-in JavaScript bundler
 // @ts-ignore
-const requiredExample = require('../../fixtures/example')
+const requiredExample = require("../../fixtures/example");
 
-context('Files', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/files')
-    })
+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')
-    })
+  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
+  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.
+    // 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')
+    // 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()
+    // 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')
-    })
+    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)
+  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)
-    })
+    // 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
+  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')
-        })
-    })
+    // 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
+  it("cy.writeFile() - write to a file", () => {
+    // https://on.cypress.io/writefile
 
-        // You can write to a file
+    // 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)
-            })
+    // 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
-        })
+    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',
-        })
+    // 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')
-        })
-    })
-})
+    cy.fixture("profile").should((profile) => {
+      expect(profile.name).to.eq("Jane");
+    });
+  });
+});

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

@@ -1,52 +1,58 @@
 /// <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
+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')
-        })
+  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
-        })
+    // 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')
-        })
+    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')
-        })
+    // 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')
-        })
+    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')
-        })
-    })
-})
+    // 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 +1,32 @@
 /// <reference types="cypress" />
 
-context('Location', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/location')
-    })
+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.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.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')
-    })
-})
+  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,106 +1,98 @@
 /// <reference types="cypress" />
 
-context('Misc', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/misc')
-    })
+context("Misc", () => {
+  beforeEach(() => {
+    cy.visit("https://example.cypress.io/commands/misc");
+  });
 
-    it('.end() - end the command chain', () => {
-        // https://on.cypress.io/end
+  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()
+    // 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()
-        })
-    })
+      // 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
+  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}`)
+    // 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')
+    // 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')
+    if (isCircleOnWindows) {
+      cy.log("Skipping test on CircleCI");
 
-            return
-        }
+      return;
+    }
 
-        // cy.exec problem on Shippable CI
-        // https://github.com/cypress-io/cypress/issues/6718
-        const isShippable = Cypress.platform === 'linux' && Cypress.env('shippable')
+    // 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')
+    if (isShippable) {
+      cy.log("Skipping test on ShippableCI");
 
-            return
-        }
+      return;
+    }
 
-        cy.exec('echo Jane Lane')
-            .its('stdout').should('contain', 'Jane Lane')
+    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')
+    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)
-        }
-    })
+      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')
+  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')
-    })
+    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')
-        })
+  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("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')
-    })
-})
+  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 +1,56 @@
 /// <reference types="cypress" />
 
-context('Navigation', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io')
-        cy.get('.navbar-nav').contains('Commands').click()
-        cy.get('.dropdown-menu').contains('Navigation').click()
-    })
+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
+  it("cy.go() - go back or forward in the browser's history", () => {
+    // https://on.cypress.io/go
 
-        cy.location('pathname').should('include', 'navigation')
+    cy.location("pathname").should("include", "navigation");
 
-        cy.go('back')
-        cy.location('pathname').should('not.include', 'navigation')
+    cy.go("back");
+    cy.location("pathname").should("not.include", "navigation");
 
-        cy.go('forward')
-        cy.location('pathname').should('include', 'navigation')
+    cy.go("forward");
+    cy.location("pathname").should("include", "navigation");
 
-        // clicking back
-        cy.go(-1)
-        cy.location('pathname').should('not.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')
-    })
+    // clicking forward
+    cy.go(1);
+    cy.location("pathname").should("include", "navigation");
+  });
 
-    it('cy.reload() - reload the page', () => {
-        // https://on.cypress.io/reload
-        cy.reload()
+  it("cy.reload() - reload the page", () => {
+    // https://on.cypress.io/reload
+    cy.reload();
 
-        // reload the page without using the cache
-        cy.reload(true)
-    })
+    // reload the page without using the cache
+    cy.reload(true);
+  });
 
-    it('cy.visit() - visit a remote url', () => {
-        // https://on.cypress.io/visit
+  it("cy.visit() - visit a remote url", () => {
+    // https://on.cypress.io/visit
 
-        // Visit any sub-domain of your current domain
+    // 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
-            },
-        })
-    })
-})
+    // 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,163 +1,165 @@
 /// <reference types="cypress" />
 
-context('Network Requests', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/network-requests')
+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
+      });
+  });
 
-    // Manage HTTP requests in your app
+  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"
+        });
 
-    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')
-            })
-    })
+        // 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);
 
-    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')
-            })
-    })
+        // 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() 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,
-            },
+  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')
-            .should('be.an', 'array')
-            .and('have.length', 1)
-            .its('0') // yields first element of the array
-            .should('contain', {
-                postId: 1,
-                id: 3,
-            })
-    })
+          .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.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',
-                })
+  it("cy.intercept() - route responses to matching requests", () => {
+    // https://on.cypress.io/intercept
 
-                // 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)
+    let message = "whoa, this comment does not exist";
 
-                // 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')
-            })
-    })
+    // Listen to GET to comments/1
+    cy.intercept("GET", "**/comments/*").as("getComment");
 
-    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)
-            })
-    })
+    // we have code that gets a comment when
+    // the button is clicked in scripts.js
+    cy.get(".network-btn").click();
 
-    it('cy.intercept() - route responses to matching requests', () => {
-        // https://on.cypress.io/intercept
+    // https://on.cypress.io/wait
+    cy.wait("@getComment").its("response.statusCode").should("be.oneOf", [200, 304]);
 
-        let message = 'whoa, this comment does not exist'
+    // Listen to POST to comments
+    cy.intercept("POST", "**/comments").as("postComment");
 
-        // Listen to GET to comments/1
-        cy.intercept('GET', '**/comments/*').as('getComment')
+    // 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()");
+    });
 
-        // we have code that gets a comment when
-        // the button is clicked in scripts.js
-        cy.get('.network-btn').click()
+    // 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");
 
-        // https://on.cypress.io/wait
-        cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+    // we have code that puts a comment when
+    // the button is clicked in scripts.js
+    cy.get(".network-put").click();
 
-        // Listen to POST to comments
-        cy.intercept('POST', '**/comments').as('postComment')
+    cy.wait("@putComment");
 
-        // 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)
-    })
-})
+    // 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,114 +1,100 @@
 /// <reference types="cypress" />
 
-context('Querying', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/querying')
-    })
+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
+  // 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
+  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('.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("#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('[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')
+    // '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 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')
-    })
+    // 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')
+  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')
+    // 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')
+    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')
+    // 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')
-    })
+    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(".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
+  it("cy.root() - query the root DOM element", () => {
+    // https://on.cypress.io/root
 
-        // By default, root is the document
-        cy.root().should('match', 'html')
+    // 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')
-        })
-    })
+    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()
+  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()
+      // 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()
+      // 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()
+      // 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()
+      // 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()
+      // 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()
-        })
-    })
-})
+      // Best. Insulated from all changes.
+      cy.get("[data-cy=submit]").click();
+    });
+  });
+});

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

@@ -2,205 +2,202 @@
 // 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')
+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 obj = {
+      foo() {}
+    };
 
-        const spy = cy.spy(obj, 'foo').as('anyArgs')
+    const spy = cy.spy(obj, "foo").as("anyArgs");
 
-        obj.foo()
+    obj.foo();
 
-        expect(spy).to.be.called
-    })
+    expect(spy).to.be.called;
+  });
 
-    it('cy.spy() retries until assertions pass', () => {
-        cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+  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)
-            },
-        }
+    const obj = {
+      /**
+       * Prints the argument passed
+       * @param x {any}
+       */
+      foo(x) {
+        console.log("obj.foo called with", x);
+      }
+    };
 
-        cy.spy(obj, 'foo').as('foo')
+    cy.spy(obj, "foo").as("foo");
 
-        setTimeout(() => {
-            obj.foo('first')
-        }, 500)
+    setTimeout(() => {
+      obj.foo("first");
+    }, 500);
 
-        setTimeout(() => {
-            obj.foo('second')
-        }, 2500)
+    setTimeout(() => {
+      obj.foo("second");
+    }, 2500);
 
-        cy.get('@foo').should('have.been.calledTwice')
-    })
+    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')
+  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 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')
+    const stub = cy.stub(obj, "foo").as("foo");
 
-        obj.foo('foo', 'bar')
+    obj.foo("foo", "bar");
 
-        expect(stub).to.be.called
-    })
+    expect(stub).to.be.called;
+  });
 
-    it('cy.clock() - control time in the browser', () => {
-        // https://on.cypress.io/clock
+  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()
+    // 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')
-    })
+    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
+  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()
+    // 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.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')
-    })
+    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}!`
-            },
-        }
+  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'))
+    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
+    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!')
-    })
+    // 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
-            },
-        }
+  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')
+    const spy = cy.spy(calculator, "add").as("add");
 
-        expect(calculator.add(2, 3)).to.equal(5)
+    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)
+    // 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)
+    // 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))
+    // 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
+    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)
+    // 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
+    /**
+     * 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)
+    // 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 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
+    /**
+     * 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')),
-        )
+    // 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)),
-        )
+    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))
+    // 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
+    // you can alias matchers for shorter test code
+    const { match: M } = Cypress.sinon;
 
-        cy.get('@add').should('have.been.calledWith', M.number, M(3))
-    })
-})
+    cy.get("@add").should("have.been.calledWith", M.number, M(3));
+  });
+});

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

@@ -1,121 +1,97 @@
 /// <reference types="cypress" />
 
-context('Traversal', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/traversal')
-    })
+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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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(".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)
-    })
-})
+  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,110 +1,108 @@
 /// <reference types="cypress" />
 
-context('Utilities', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/utilities')
-    })
+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()
+  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])
-            })
-    })
+      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')
+  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')
-    })
+    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})
+  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)
+        // 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)
-                })
-        })
-    })
+        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,
-        })
+  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
+    expect(matching, "matching wildcard").to.be.true;
 
-        matching = Cypress.minimatch('/users/1/comments/2', '/users/*/comments', {
-            matchBase: true,
-        })
+    matching = Cypress.minimatch("/users/1/comments/2", "/users/*/comments", {
+      matchBase: true
+    });
 
-        expect(matching, 'comments').to.be.false
+    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,
-        })
+    // ** 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
+    expect(matching, "comments").to.be.true;
 
-        // whereas * matches only the next path segment
+    // whereas * matches only the next path segment
 
-        matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/*', {
-            matchBase: false,
-        })
+    matching = Cypress.minimatch("/foo/bar/baz/123/quux?a=b&c=2", "/foo/*", {
+      matchBase: false
+    });
 
-        expect(matching, 'comments').to.be.false
-    })
+    expect(matching, "comments").to.be.false;
+  });
 
-    it('Cypress.Promise - instantiate a bluebird promise', () => {
-        // https://on.cypress.io/promise
-        let waited = 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
+    /**
+     * @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)
-            })
-        }
+          // 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
-            })
-        })
-    })
-})
+    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 +1,59 @@
 /// <reference types="cypress" />
 
-context('Viewport', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/viewport')
-    })
+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
+  it("cy.viewport() - set the viewport size and dimension", () => {
+    // https://on.cypress.io/viewport
 
-        cy.get('#navbar').should('be.visible')
-        cy.viewport(320, 480)
+    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')
+    // 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)
+    // 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
+    // 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 :)
+    // 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("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)
+    // 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)
-    })
-})
+    // 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 +1,31 @@
 /// <reference types="cypress" />
 
-context('Waiting', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/waiting')
-    })
-    // BE CAREFUL of adding unnecessary wait times.
-    // https://on.cypress.io/best-practices#Unnecessary-Waiting
+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)
-    })
+  // 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')
+  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()
+    // 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])
-    })
-})
+    // 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 +1,22 @@
 /// <reference types="cypress" />
 
-context('Window', () => {
-    beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/window')
-    })
+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.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.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')
-    })
-})
+  it("cy.title() - get the title", () => {
+    // https://on.cypress.io/title
+    cy.title().should("include", "Kitchen Sink");
+  });
+});

client/cypress/fixtures/profile.json

@@ -2,4 +2,4 @@
   "id": 8739,
   "name": "Jane",
   "email": "jane@example.com"
-}
+}

client/cypress/plugins/index.js

@@ -17,6 +17,6 @@
  */
 // 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
-}
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

client/cypress/support/e2e.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

client/cypress/tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "allowJs": true,
     "baseUrl": "../node_modules",
-    "types": [
-      "cypress"
-    ]
+    "types": ["cypress"]
   },
-  "include": [
-    "**/*.*"
-  ]
+  "include": ["**/*.*"]
 }

client/dev-dist/registerSW.js

@@ -0,0 +1,2 @@
+if ("serviceWorker" in navigator)
+  navigator.serviceWorker.register("/dev-sw.js?dev-sw", { scope: "/", type: "classic" });

client/dev-dist/sw.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return (
+      registry[uri] ||
+      new Promise((resolve) => {
+        if ("document" in self) {
+          const script = document.createElement("script");
+          script.src = uri;
+          script.onload = resolve;
+          document.head.appendChild(script);
+        } else {
+          nextDefineUri = uri;
+          importScripts(uri);
+          resolve();
+        }
+      }).then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = (depUri) => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map((depName) => specialDeps[depName] || require(depName))).then((deps) => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(["./workbox-b5f7729d"], function (workbox) {
+  "use strict";
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute(
+    [
+      {
+        url: "registerSW.js",
+        revision: "3ca0b8505b4bec776b69afdba2768812"
+      },
+      {
+        url: "index.html",
+        revision: "0.sa702m4aq68"
+      }
+    ],
+    {}
+  );
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(
+    new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+      allowlist: [/^\/$/]
+    })
+  );
+});

client/index.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+    <link rel="icon" href="/favicon.png" />
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <link rel="icon" href="/ro-favicon.png" />
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
+    <link rel="icon" href="/pm/pm-favicon.ico" />
+    <% } %>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1690ff" />
+    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
+    <!-- TODO:AIo Update the individual logos for each.-->
+    <link rel="apple-touch-icon" href="public/logo192.png" />
+    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
+    <meta name="description" content="ImEX Online" />
+    <title>ImEX Online</title>
+    <script type="text/javascript">
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
+      (function () {
+        d = document;
+        s = d.createElement('script');
+        s.src = 'https://client.crisp.chat/l.js';
+        s.async = 1;
+        d.getElementsByTagName('head')[0].appendChild(s);
+      })();
+    </script>
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
+    <meta name="description" content="Rome Online" />
+    <title>Rome Online</title>
+
+    <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
+
+    <call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001 party="LiveChat528346"></call-us-selector>
+
+    <!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
+    
+    <!--<call-us
+    
+    phonesystem-url=https://rometech.east.3cx.us:5001
+    
+    style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
+    
+    id="wp-live-chat-by-3CX"
+    
+    minimized="true"
+    
+    animation-style="noanimation"
+    
+    party="LiveChat528346"
+    
+    minimized-style="bubbleright"
+    
+    allow-call="true"
+    
+    allow-video="false"
+    
+    allow-soundnotifications="true"
+    
+    enable-mute="true"
+    
+    enable-onmobile="true"
+    
+    offline-enabled="true"
+    
+    enable="true"
+    
+    ignore-queueownership="false"
+    
+    authentication="both"
+    
+    show-operator-actual-name="true"
+    
+    aknowledge-received="true"
+    
+    gdpr-enabled="false"
+    
+    message-userinfo-format="name"
+    
+    message-dateformat="both"
+    
+    lang="browser"
+    
+    button-icon-type="default"
+    
+    greeting-visibility="none"
+    
+    greeting-offline-visibility="none"
+    
+    chat-delay="2000"
+    
+    enable-direct-call="true"
+    
+    enable-ga="false"
+    
+    ></call-us>-->
+    
+    <script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js id="tcx-callus-js" charset="utf-8"></script>
+
+
+
+    <% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
+    <title>ProManager</title>
+    <meta name="description" content="ProManager" />
+
+    <% } %>
+    <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 || []);
+          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>
+    <div id="root"></div>
+
+    <script type="module" src="src/index.jsx"></script>
+  </body>
+</html>

client/package.json

@@ -1,6 +1,10 @@
 {
   "name": "bodyshop",
   "version": "0.2.1",
+  "engines": {
+    "node": "18.18.2"
+  },
+  "type": "module",
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
@@ -8,96 +12,94 @@
     "@ant-design/pro-layout": "^7.17.16",
     "@apollo/client": "^3.8.10",
     "@asseinfo/react-kanban": "^2.2.0",
-    "@craco/craco": "^7.1.0",
     "@fingerprintjs/fingerprintjs": "^4.2.2",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.1.0",
-    "@sentry/cli": "^2.28.0",
-    "@sentry/react": "^7.100.0",
-    "@sentry/tracing": "^7.100.0",
+    "@reduxjs/toolkit": "^2.2.1",
+    "@sentry/cli": "^2.28.6",
+    "@sentry/react": "^7.104.0",
     "@splitsoftware/splitio-react": "^1.11.0",
     "@tanem/react-nprogress": "^5.0.51",
-    "antd": "^5.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "antd": "^5.15.3",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "axios": "^1.6.7",
-    "craco-less": "^3.0.1",
     "dayjs": "^1.11.10",
     "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
-    "dotenv": "^16.4.1",
-    "enquire-js": "^0.2.1",
+    "dotenv": "^16.4.5",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.8.0",
+    "firebase": "^10.8.1",
     "graphql": "^16.6.0",
-    "i18next": "^23.8.2",
+    "i18next": "^23.10.0",
     "i18next-browser-languagedetector": "^7.0.2",
-    "jsoneditor": "^10.0.0",
-    "jsreport-browser-client-dist": "^1.3.0",
-    "libphonenumber-js": "^1.10.55",
-    "logrocket": "^7.0.0",
+    "libphonenumber-js": "^1.10.57",
+    "logrocket": "^8.0.1",
     "markerjs2": "^2.32.0",
     "normalize-url": "^8.0.0",
-    "phone": "^3.1.42",
-    "preval.macro": "^5.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^8.2.0",
-    "rc-queue-anim": "^2.0.0",
-    "rc-scroll-anim": "^2.7.6",
+    "query-string": "^9.0.0",
     "react": "^18.2.0",
-    "react-big-calendar": "^1.8.7",
+    "react-big-calendar": "^1.11.0",
     "react-color": "^2.19.3",
-    "react-cookie": "^7.0.2",
+    "react-cookie": "^7.1.0",
     "react-dom": "^18.2.0",
     "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.0",
     "react-grid-layout": "1.3.4",
-    "react-i18next": "^14.0.4",
+    "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",
     "react-image-lightbox": "^5.1.4",
-    "react-intersection-observer": "^9.7.0",
+    "react-joyride": "^2.7.4",
     "react-markdown": "^9.0.1",
-    "react-number-format": "^5.1.4",
+    "react-number-format": "^5.3.3",
+    "react-product-fruits": "^2.2.6",
     "react-redux": "^9.1.0",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.22.2",
     "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",
-    "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.5",
-    "recharts": "^2.11.0",
+    "recharts": "^2.12.2",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.0",
-    "sass": "^1.70.0",
+    "sass": "^1.71.1",
     "socket.io-client": "^4.7.4",
     "styled-components": "^6.1.8",
     "subscriptions-transport-ws": "^0.11.0",
     "terser-webpack-plugin": "^5.3.10",
+    "userpilot": "^1.3.1",
+    "vite-plugin-ejs": "^1.7.0",
     "web-vitals": "^3.5.2",
     "workbox-core": "^7.0.0",
     "workbox-expiration": "^7.0.0",
     "workbox-navigation-preload": "^7.0.0",
     "workbox-precaching": "^7.0.0",
     "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0",
-    "yauzl": "^2.10.0"
+    "workbox-strategies": "^7.0.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "craco start",
-    "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
-    "build:test": "env-cmd -f .env.test npm run build",
-    "build-deploy:test": "npm run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
-    "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
+    "start": "vite",
+    "build": "vite build",
+    "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
+    "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
+    "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
+    "build:test:imex": "env-cmd -f .env.test.imex npm run build",
+    "build:test:rome": "env-cmd -f .env.test.rome npm run build",
+    "build:test:promanager": "env-cmd -f .env.test.promanager 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",
+    "build:production:promanager": "env-cmd -f .env.production.promanager 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": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
+    "sentry:sourcemaps:imex": "sentry-cli sourcemaps inject --org imex --project imexonline ./build && sentry-cli sourcemaps upload --org imex --project imexonline ./build"
   },
   "eslintConfig": {
     "extends": [
@@ -121,14 +123,37 @@
   "resolutions": {
     "react-error-overlay": "6.0.9"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.6.1"
+  },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@sentry/webpack-plugin": "^2.14.0",
+    "@babel/preset-react": "^7.23.3",
+    "@dotenvx/dotenvx": "^0.15.4",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@sentry/webpack-plugin": "^2.14.2",
+    "@swc/core": "^1.3.107",
+    "@swc/plugin-styled-components": "^1.5.108",
     "@testing-library/cypress": "^10.0.1",
-    "cypress": "^13.6.4",
+    "browserslist": "^4.22.3",
+    "browserslist-to-esbuild": "^2.1.1",
+    "cross-env": "^7.0.3",
+    "cypress": "^13.6.6",
+    "eslint": "^8.57.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
+    "memfs": "^4.6.0",
+    "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
-    "source-map-explorer": "^2.5.3"
+    "source-map-explorer": "^2.5.3",
+    "vite": "^5.0.11",
+    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-legacy": "^2.1.0",
+    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite-plugin-pwa": "^0.19.0",
+    "vite-plugin-style-import": "^2.0.0"
   }
 }

client/public/editor.js

@@ -1,95 +0,0 @@
-// unlayer.registerPropertyEditor({
-//   name: "field_name",
-//   layout: "bottom",
-//   Widget: unlayer.createWidget({
-//     render(value) {
-//       return `
-//         <input class="field" value=${value} />
-//       `;
-//     },
-//     mount(node, value, updateValue) {
-//       var input = node.getElementsByClassName("field")[0];
-//       input.onchange = function (event) {
-//         updateValue(event.target.value);
-//       };
-//     },
-//   }),
-// });
-
-// unlayer.registerTool({
-//   type: "whatever",
-//   category: "contents",
-//   label: "Begin Repeat",
-//   icon: "fa-smile",
-//   values: {},
-//   options: {
-//     default: {
-//       title: null,
-//     },
-//     text: {
-//       title: "Field",
-//       position: 1,
-//       options: {
-//         field: {
-//           label: "Field",
-//           defaultValue: "",
-//           widget: "field_name",
-//         },
-//       },
-//     },
-//   },
-//   renderer: {
-//     Viewer: unlayer.createViewer({
-//       render(values) {
-//         console.log(values);
-//         return `
-//           <div style="display: none;">{{#each ${values.field}}}</div>
-//         `;
-//       },
-//     }),
-//     exporters: {
-//       web: function () {},
-//       email: function () {},
-//     },
-//   },
-// });
-
-// unlayer.registerTool({
-//   type: "whatever",
-//   category: "contents",
-//   label: "End Repeat",
-//   icon: "fa-smile",
-//   values: {},
-//   options: {
-//     default: {
-//       title: null,
-//     },
-//     text: {
-//       title: "Field",
-//       position: 1,
-//       options: {
-//         field: {
-//           label: "Field",
-//           defaultValue: "",
-//           widget: "field_name",
-//         },
-//       },
-//     },
-//   },
-//   renderer: {
-//     Viewer: unlayer.createViewer({
-//       render(values) {
-//         return `
-//           <div style="display: none;">{{ /each }}</div>
-//         `;
-//       },
-//     }),
-//     exporters: {
-//       web: function () {},
-//       email: function () {},
-//     },
-//   },
-// });
-
-unlayer.registerColumns([2, 2, 2, 2, 2, 2]);
-unlayer.registerColumns([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);

client/public/firebase-messaging-sw.js

@@ -5,52 +5,41 @@ importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js");
 // Initialize the Firebase app in the service worker by passing the generated config
 let firebaseConfig;
 switch (this.location.hostname) {
-    case "localhost":
-        firebaseConfig = {
-            apiKey: "AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc",
-            authDomain: "imex-dev.firebaseapp.com",
-            databaseURL: "https://imex-dev.firebaseio.com",
-            projectId: "imex-dev",
-            storageBucket: "imex-dev.appspot.com",
-            messagingSenderId: "759548147434",
-            appId: "1:759548147434:web:e8239868a48ceb36700993",
-            measurementId: "G-K5XRBVVB4S",
-        };
-        break;
-    case "test.imex.online":
-        firebaseConfig = {
-            apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
-            authDomain: "imex-test.firebaseapp.com",
-            projectId: "imex-test",
-            storageBucket: "imex-test.appspot.com",
-            messagingSenderId: "991923618608",
-            appId: "1:991923618608:web:633437569cdad78299bef5",
-            // measurementId: "${config.measurementId}",
-        };
-        break;
-    case "romeonline.io":
-        firebaseConfig = {
-            apiKey: "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE",
-            authDomain: "rome-prod-1.firebaseapp.com",
-            projectId: "rome-prod-1",
-            storageBucket: "rome-prod-1.appspot.com",
-            messagingSenderId: "147786367145",
-            appId: "1:147786367145:web:9d4cba68071c3f29a8a9b8",
-            measurementId: "G-G8Z9DRHTZS",
-        };
-        break;
-    case "imex.online":
-    default:
-        firebaseConfig = {
-            apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
-            authDomain: "imex-prod.firebaseapp.com",
-            databaseURL: "https://imex-prod.firebaseio.com",
-            projectId: "imex-prod",
-            storageBucket: "imex-prod.appspot.com",
-            messagingSenderId: "253497221485",
-            appId: "1:253497221485:web:3c81c483b94db84b227a64",
-            measurementId: "G-NTWBKG2L0M",
-        };
+  case "localhost":
+    firebaseConfig = {
+      apiKey: "AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc",
+      authDomain: "imex-dev.firebaseapp.com",
+      databaseURL: "https://imex-dev.firebaseio.com",
+      projectId: "imex-dev",
+      storageBucket: "imex-dev.appspot.com",
+      messagingSenderId: "759548147434",
+      appId: "1:759548147434:web:e8239868a48ceb36700993",
+      measurementId: "G-K5XRBVVB4S",
+    };
+    break;
+  case "test.imex.online":
+    firebaseConfig = {
+      apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
+      authDomain: "imex-test.firebaseapp.com",
+      projectId: "imex-test",
+      storageBucket: "imex-test.appspot.com",
+      messagingSenderId: "991923618608",
+      appId: "1:991923618608:web:633437569cdad78299bef5",
+      // measurementId: "${config.measurementId}",
+    };
+    break;
+  case "imex.online":
+  default:
+    firebaseConfig = {
+      apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
+      authDomain: "imex-prod.firebaseapp.com",
+      databaseURL: "https://imex-prod.firebaseio.com",
+      projectId: "imex-prod",
+      storageBucket: "imex-prod.appspot.com",
+      messagingSenderId: "253497221485",
+      appId: "1:253497221485:web:3c81c483b94db84b227a64",
+      measurementId: "G-NTWBKG2L0M",
+    };
 }
 
 firebase.initializeApp(firebaseConfig);
@@ -59,9 +48,9 @@ firebase.initializeApp(firebaseConfig);
 const messaging = firebase.messaging();
 
 messaging.onBackgroundMessage(function (payload) {
-    // Customize notification here
-    const channel = new BroadcastChannel("imex-sw-messages");
-    channel.postMessage(payload);
+  // Customize notification here
+  const channel = new BroadcastChannel("imex-sw-messages");
+  channel.postMessage(payload);
 
-    //self.registration.showNotification(notificationTitle, notificationOptions);
+  //self.registration.showNotification(notificationTitle, notificationOptions);
 });

client/public/index.html

@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8"/>
-    <link href="%PUBLIC_URL%/ro-favicon.png" rel="icon"/>
-    <meta content="width=device-width, initial-scale=1" name="viewport"/>
-    <meta content="#002366" name="theme-color"/>
-    <meta content="Rome Online" name="description"/>
-    <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
-
-    <!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
-
-    <call-us-selector party="LiveChat528346" phonesystem-url=https://rometech.east.3cx.us:5001></call-us-selector>
-
-    <!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
-
-    <!--<call-us
-
-    phonesystem-url=https://rometech.east.3cx.us:5001
-
-    style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
-
-    id="wp-live-chat-by-3CX"
-
-    minimized="true"
-
-    animation-style="noanimation"
-
-    party="LiveChat528346"
-
-    minimized-style="bubbleright"
-
-    allow-call="true"
-
-    allow-video="false"
-
-    allow-soundnotifications="true"
-
-    enable-mute="true"
-
-    enable-onmobile="true"
-
-    offline-enabled="true"
-
-    enable="true"
-
-    ignore-queueownership="false"
-
-    authentication="both"
-
-    show-operator-actual-name="true"
-
-    aknowledge-received="true"
-
-    gdpr-enabled="false"
-
-    message-userinfo-format="name"
-
-    message-dateformat="both"
-
-    lang="browser"
-
-    button-icon-type="default"
-
-    greeting-visibility="none"
-
-    greeting-offline-visibility="none"
-
-    chat-delay="2000"
-
-    enable-direct-call="true"
-
-    enable-ga="false"
-
-    ></call-us>-->
-
-    <script charset="utf-8" defer id="tcx-callus-js"
-            src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js></script>
-
-    <link href="logo192.png" rel="apple-touch-icon"/>
-    <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 || []);
-
-                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>
-
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Rome Online</title>
-</head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
-</body>
-</html>

client/public/manifest.json

@@ -1,27 +0,0 @@
-{
-  "short_name": "Rome Online",
-  "name": "Rome Online",
-  "description": "The ultimate bodyshop management system.",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo1024.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#fff",
-  "background_color": "#fff",
-  "gcm_sender_id": "103953800507"
-}

client/src/App/App.container.jsx

@@ -1,53 +1,58 @@
-import {ApolloProvider} from "@apollo/client";
-import {SplitFactoryProvider, SplitSdk,} from '@splitsoftware/splitio-react';
-import {ConfigProvider} from "antd";
+import { ApolloProvider } from "@apollo/client";
+import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react";
+import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import dayjs from "../utils/day";
-import 'dayjs/locale/en';
+import "dayjs/locale/en";
 import React from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
 
 import themeProvider from "./themeProvider";
+import { Userpilot } from "userpilot";
+
+// Initialize Userpilot
+if (import.meta.env.DEV) {
+  Userpilot.initialize("NX-69145f08");
+}
 
 dayjs.locale("en");
 
 const config = {
-    core: {
-        authorizationKey: process.env.REACT_APP_SPLIT_API,
-        key: "anon",
-    },
+  core: {
+    authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
+    key: "anon"
+  }
 };
 export const factory = SplitSdk(config);
 
-
 function AppContainer() {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    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>
-    );
+  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>
+  );
 }
 
 export default Sentry.withProfiler(AppContainer);

client/src/App/App.jsx

@@ -1,11 +1,11 @@
-import {useSplitClient} from "@splitsoftware/splitio-react";
-import {Button, Result} from "antd";
+import { useSplitClient } from "@splitsoftware/splitio-react";
+import { Button, Result } from "antd";
 import LogRocket from "logrocket";
-import React, {lazy, Suspense, useEffect, useState} from "react";
-import {useTranslation} from "react-i18next";
-import {connect} from "react-redux";
-import {Route, Routes} from "react-router-dom";
-import {createStructuredSelector} from "reselect";
+import React, { lazy, Suspense, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { Route, Routes } 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";
 
@@ -14,143 +14,228 @@ import LoadingSpinner from "../components/loading-spinner/loading-spinner.compon
 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 {checkUserSession} from "../redux/user/user.actions";
-import {selectBodyshop, selectCurrentEula, selectCurrentUser,} from "../redux/user/user.selectors";
+import { setOnline } from "../redux/application/application.actions";
+import { 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";
 import "./App.styles.scss";
 import handleBeta from "../utils/betaHandler";
 import Eula from "../components/eula/eula.component";
+import InstanceRenderMgr from "../utils/instanceRenderMgr";
+import { ProductFruits } from "react-product-fruits";
 
-const ResetPassword = lazy(() =>
-    import("../pages/reset-password/reset-password.component")
-);
+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 MobilePaymentContainer = lazy(() => import("../pages/mobile-payment/mobile-payment.container"));
 const mapStateToProps = createStructuredSelector({
-    currentUser: selectCurrentUser,
-    online: selectOnline,
-    bodyshop: selectBodyshop,
-    currentEula: selectCurrentEula
+  currentUser: selectCurrentUser,
+  online: selectOnline,
+  bodyshop: selectBodyshop,
+  currentEula: selectCurrentEula
 });
 const mapDispatchToProps = (dispatch) => ({
-    checkUserSession: () => dispatch(checkUserSession()),
-    setOnline: (isOnline) => dispatch(setOnline(isOnline)),
+  checkUserSession: () => dispatch(checkUserSession()),
+  setOnline: (isOnline) => dispatch(setOnline(isOnline))
 });
 
-export function App({bodyshop, checkUserSession, currentUser, online, setOnline, currentEula}) {
-    const client = useSplitClient().client;
-    const [listenersAdded, setListenersAdded] = useState(false)
-    const {t} = useTranslation();
+export function App({ bodyshop, checkUserSession, currentUser, online, setOnline, currentEula }) {
+  const client = useSplitClient().client;
+  const [listenersAdded, setListenersAdded] = useState(false);
+  const { t } = useTranslation();
 
-
-    useEffect(() => {
-        if (!navigator.onLine) {
-            setOnline(false);
-        }
-
-        checkUserSession();
-    }, [checkUserSession, setOnline]);
-
-    //const b = Grid.useBreakpoint();
-    // console.log("Breakpoints:", b);
-
-    // Associate event listeners, memoize to prevent multiple listeners being added
-    useEffect(() => {
-        const offlineListener = (e) => {
-            setOnline(false);
-        }
-
-        const onlineListener = (e) => {
-            setOnline(true);
-        }
-
-        if (!listenersAdded) {
-            console.log('Added events for offline and online');
-            window.addEventListener("offline", offlineListener);
-            window.addEventListener("online", onlineListener);
-            setListenersAdded(true);
-        }
-
-        return () => {
-            window.removeEventListener("offline", offlineListener);
-            window.removeEventListener("online", onlineListener);
-        }
-    }, [setOnline, listenersAdded]);
-
-    useEffect(() => {
-        if (currentUser.authorized && bodyshop) {
-            client.setAttribute("imexshopid", bodyshop.imexshopid);
-
-            if (
-                client.getTreatment("LogRocket_Tracking") === "on" ||
-                window.location.hostname === 'beta.romeonline.io'
-            ) {
-                console.log("LR Start");
-                LogRocket.init("rome-online/rome-online");
-            }
-        }
-    }, [bodyshop, client, currentUser.authorized]);
-
-    if (currentUser.authorized === null) {
-        return <LoadingSpinner message={t("general.labels.loggingin")}/>;
+  useEffect(() => {
+    if (!navigator.onLine) {
+      setOnline(false);
     }
 
-    handleBeta();
+    checkUserSession();
+  }, [checkUserSession, setOnline]);
 
-    if (!online)
-        return (
-            <Result
-                status="warning"
-                title={t("general.labels.nointernet")}
-                subTitle={t("general.labels.nointernet_sub")}
-                extra={
-                    <Button
-                        type="primary"
-                        onClick={() => {
-                            window.location.reload();
-                        }}
-                    >
-                        {t("general.actions.refresh")}
-                    </Button>
-                }
-            />
+  //const b = Grid.useBreakpoint();
+  // console.log("Breakpoints:", b);
+
+  // Associate event listeners, memoize to prevent multiple listeners being added
+  useEffect(() => {
+    const offlineListener = (e) => {
+      setOnline(false);
+    };
+
+    const onlineListener = (e) => {
+      setOnline(true);
+    };
+
+    if (!listenersAdded) {
+      console.log("Added events for offline and online");
+      window.addEventListener("offline", offlineListener);
+      window.addEventListener("online", onlineListener);
+      setListenersAdded(true);
+    }
+
+    return () => {
+      window.removeEventListener("offline", offlineListener);
+      window.removeEventListener("online", onlineListener);
+    };
+  }, [setOnline, listenersAdded]);
+
+  useEffect(() => {
+    if (currentUser.authorized && bodyshop) {
+      client.setAttribute("imexshopid", bodyshop.imexshopid);
+
+      if (
+        client.getTreatment("LogRocket_Tracking") === "on" ||
+        window.location.hostname ===
+          InstanceRenderMgr({
+            imex: "beta.imex.online",
+            rome: "beta.romeonline.io"
+          })
+      ) {
+        console.log("LR Start");
+        LogRocket.init(
+          InstanceRenderMgr({
+            imex: "gvfvfw/bodyshopapp",
+            rome: "rome-online/rome-online",
+            promanager: "" //TODO:AIO Add in log rocket for promanager instances.
+          })
         );
-
-    if (currentEula && !currentUser.eulaIsAccepted) {
-        return <Eula/>
+      }
     }
+  }, [bodyshop, client, currentUser.authorized]);
 
-    // Any route that is not assigned and matched will default to the Landing Page component
+  if (currentUser.authorized === null) {
+    return <LoadingSpinner message={t("general.labels.loggingin")} />;
+  }
+
+  handleBeta();
+
+  if (!online)
     return (
-        <Suspense fallback={<LoadingSpinner message="Rome Online"/>}>
-            <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><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
-                    <Route path="*" element={<ManagePage/>}/>
-                </Route>
-                <Route path="/tech/*"
-                       element={<ErrorBoundary><PrivateRoute isAuthorized={currentUser.authorized}/></ErrorBoundary>}>
-                    <Route path="*" element={<TechPageContainer/>}/>
-                </Route>
-                <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized}/>}>
-                    <Route path="*" element={<DocumentEditorContainer/>}/>
-                </Route>
-            </Routes>
-        </Suspense>
+      <Result
+        status="warning"
+        title={t("general.labels.nointernet")}
+        subTitle={t("general.labels.nointernet_sub")}
+        extra={
+          <Button
+            type="primary"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
+            {t("general.actions.refresh")}
+          </Button>
+        }
+      />
     );
+
+  if (currentEula && !currentUser.eulaIsAccepted) {
+    return <Eula />;
+  }
+
+  // Any route that is not assigned and matched will default to the Landing Page component
+  return (
+    <Suspense
+      fallback={
+        <LoadingSpinner
+          message={InstanceRenderMgr({
+            imex: t("titles.imexonline"),
+            rome: t("titles.romeonline"),
+            promanager: t("titles.promanager")
+          })}
+        />
+      }
+    >
+      <ProductFruits
+        workspaceCode={InstanceRenderMgr({
+          imex: null,
+          rome: "9BkbEseqNqxw8jUH",
+          promanager: "aoJoEifvezYI0Z0P"
+        })}
+        debug
+        language="en"
+        user={{
+          email: currentUser.email,
+          username: currentUser.email
+        }}
+      />
+
+      <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>
+              <PrivateRoute isAuthorized={currentUser.authorized} />
+            </ErrorBoundary>
+          }
+        >
+          <Route path="*" element={<ManagePage />} />
+        </Route>
+        <Route
+          path="/tech/*"
+          element={
+            <ErrorBoundary>
+              <PrivateRoute isAuthorized={currentUser.authorized} />
+            </ErrorBoundary>
+          }
+        >
+          <Route path="*" element={<TechPageContainer />} />
+        </Route>
+        <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+          <Route path="*" element={<DocumentEditorContainer />} />
+        </Route>
+      </Routes>
+    </Suspense>
+  );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

client/src/App/App.styles.scss

@@ -154,7 +154,6 @@
   font-style: italic;
 }
 
-
 .ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
   background-color: #f4f4f4;
 }

client/src/App/themeProvider.js

@@ -1,7 +1,8 @@
-import {defaultsDeep} from "lodash";
-import {theme} from "antd";
+import { defaultsDeep } from "lodash";
+import { theme } from "antd";
+import InstanceRenderMgr from "../utils/instanceRenderMgr";
 
-const {defaultAlgorithm, darkAlgorithm} = theme;
+const { defaultAlgorithm, darkAlgorithm } = theme;
 
 let isDarkMode = false;
 
@@ -10,22 +11,30 @@ let isDarkMode = false;
  * @type {{components: {Menu: {itemDividerBorderColor: string}}}}
  */
 const defaultTheme = {
-    components: {
-        Table: {
-            rowHoverBg: '#e7f3ff',
-            rowSelectedBg: '#e6f7ff',
-            headerSortHoverBg: 'transparent',
-        },
-        Menu: {
-            darkItemHoverBg: '#1677ff',
-            itemHoverBg: '#1677ff',
-            horizontalItemHoverBg: '#1677ff',
-        }
+  components: {
+    Table: {
+      rowHoverBg: "#e7f3ff",
+      rowSelectedBg: "#e6f7ff",
+      headerSortHoverBg: "transparent"
     },
-    token: {
-        colorPrimary: "#326ade",
-        colorInfo: "#326ade"
+    Menu: {
+      darkItemHoverBg: "#1890ff",
+      itemHoverBg: "#1890ff",
+      horizontalItemHoverBg: "#1890ff"
     }
+  },
+  token: {
+    colorPrimary: InstanceRenderMgr({
+      imex: "#1890ff",
+      rome: "#326ade",
+      promanager: "#1d69a6"
+    }),
+    colorInfo: InstanceRenderMgr({
+      imex: "#1890ff",
+      rome: "#326ade",
+      promanager: "#1d69a6"
+    })
+  }
 };
 
 /**
@@ -33,16 +42,16 @@ const defaultTheme = {
  * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
  */
 const devTheme = {
-    components: {
-        Menu: {
-            darkItemHoverBg: '#a51d1d',
-            itemHoverBg: '#a51d1d',
-            horizontalItemHoverBg: '#a51d1d',
-        }
-    },
-    token: {
-        colorPrimary: '#a51d1d'
+  components: {
+    Menu: {
+      darkItemHoverBg: "#a51d1d",
+      itemHoverBg: "#a51d1d",
+      horizontalItemHoverBg: "#a51d1d"
     }
+  },
+  token: {
+    colorPrimary: "#a51d1d"
+  }
 };
 
 /**
@@ -51,11 +60,10 @@ const devTheme = {
  */
 const prodTheme = {};
 
-const currentTheme = process.env.NODE_ENV === "development" ? devTheme
-    : prodTheme;
+const currentTheme = import.meta.env.DEV ? devTheme : prodTheme;
 
 const finaltheme = {
-    algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
-    ...defaultsDeep(currentTheme, defaultTheme)
-}
-export default finaltheme;
+  algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+  ...defaultsDeep(currentTheme, defaultTheme)
+};
+export default finaltheme;

client/src/assets/promanager/android/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <background android:drawable="@mipmap/ic_launcher_background"/>
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
+</adaptive-icon>