IO-2824 Dev Server Instance Switch

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

.circleci/config.yml

@@ -41,9 +41,8 @@ jobs:
   imex-app-build:
     docker:
       - image: cimg/node:18.18.2
-
+    resource_class: large
     working_directory: ~/repo/client
-
     steps:
       - checkout:
           path: ~/repo
@@ -63,6 +62,31 @@ jobs:
           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:
+      - checkout:
+          path: ~/repo
+      - run:
+          name: Install Dependencies
+          command: npm i
+
+      - 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: dist
+          to: "s3://imex-online-beta/"
+          arguments: "--exclude '*.map'"
+
   rome-api-deploy:
     docker:
       - image: "cimg/base:stable"
@@ -108,7 +132,7 @@ jobs:
           name: Install Dependencies
           command: npm i
 
-      - run: npm run build:rome
+      - run: npm run build:production:rome
 
       - aws-cli/setup:
           aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -116,13 +140,38 @@ jobs:
           region: AWS_REGION
 
       - aws-s3/sync:
-          from: build
+          from: dist
           to: "s3://rome-online-production/"
           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
@@ -154,15 +203,44 @@ jobs:
 
       - run: npm run build:test: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-test/"
           arguments: "--exclude '*.map'"
 
+  test-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: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: 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
@@ -181,7 +259,7 @@ jobs:
 
   imex-test-app-build:
     docker:
-      - image: cimg/node:16.15.0
+      - image: cimg/node:18.18.2
     resource_class: large
     working_directory: ~/repo/client
 
@@ -199,6 +277,32 @@ jobs:
           to: "s3://imex-online-test/"
           arguments: "--exclude '*.map'"
 
+  imex-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: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: dist
+          to: "s3://imex-online-test-beta/"
+          arguments: "--exclude '*.map'"
+
 
   admin-app-build:
     docker:
@@ -236,12 +340,16 @@ workflows:
       - imex-api-deploy:
           filters:
             branches:
-              only: master
+              only: master-AIO
       - imex-app-build:
           filters:
             branches:
               only: master
-      - hasura-migrate:
+      - imex-app-beta-build:
+          filters:
+            branches:
+              only: master-AIO
+      - imex-hasura-migrate:
           secret: ${HASURA_PROD_SECRET}
           filters:
             branches:
@@ -249,35 +357,46 @@ 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
+              only: master-AIO
       - imex-test-app-build:
           filters:
             branches:
               only: test
-
+      - imex-test-app-beta-build:
+          filters:
+            branches:
+              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:

.prettierrc.js

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

_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

@@ -3,7 +3,13 @@
 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.
 
-# Special Notes
+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
@@ -40,9 +46,10 @@ Filters effect the where clause of the graphQL query. They are used to filter th
 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",
@@ -52,7 +59,7 @@ Filters can make use of reflection to pre-fill select boxes, the following is an
         "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`
@@ -67,7 +74,13 @@ The following cases are available
 - `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",`
@@ -142,12 +155,12 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!
 
 - 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 `dates` object is not yet implemented and will be added in a future release.
+- The type object must be 'string' or 'number'  or 'bool' or 'boolean' or 'date' and is case-sensitive.
-- The type object must be 'string' or 'number' 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
 
@@ -158,6 +171,7 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!
   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`.
 
@@ -172,4 +186,4 @@ query gendoc_hours_sold_detail_open($starttz: timestamptz!, $endtz: timestamptz!
         "direction": "asc"
     }
 }
-```
+```

_reference/test-ecoystem.config.js

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

client/.env.development.promanager

@@ -1,7 +1,8 @@
 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": "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

client/.env.development.rome

@@ -1,7 +1,8 @@
 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": "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

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 { convertLegacyToken } = require("@ant-design/compatible/lib");
-const {theme} = require('antd/lib');
+const { theme } = require("antd/lib");
 
-const {defaultAlgorithm, defaultSeed} = theme;
+const { defaultAlgorithm, defaultSeed } = theme;
 
 const mapToken = defaultAlgorithm(defaultSeed);
 const v4Token = convertLegacyToken(mapToken);
@@ -12,43 +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: [
+  plugins: [
-
+    {
-        {
+      plugin: CracoLessPlugin,
-            plugin: CracoLessPlugin,
+      options: {
-            options: {
+        lessLoaderOptions: {
-                lessLoaderOptions: {
+          lessOptions: {
-                    lessOptions: {
+            modifyVars: { ...v4Token },
-                        modifyVars: {...v4Token},
+            javascriptEnabled: true
-                        javascriptEnabled: true,
+          }
-                    },
+        }
-                },
+      }
-            },
+    }
+  ],
+  webpack: {
+    configure: (webpackConfig) => {
+      return {
+        ...webpackConfig,
+        // Required for Dev Server
+        devServer: {
+          ...webpackConfig.devServer,
+          allowedHosts: "all"
         },
-    ],
+        optimization: {
-    webpack: {
+          ...webpackConfig.optimization,
-        configure: (webpackConfig) => {
+          // Workaround for CircleCI bug caused by the number of CPUs shown
-            return {
+          // https://github.com/facebook/create-react-app/issues/8320
-                ...webpackConfig,
+          minimizer: webpackConfig.optimization.minimizer.map((item) => {
-                // Required for Dev Server
+            if (item instanceof TerserPlugin) {
-                devServer: {
+              item.options.parallel = 2;
-                    ...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;
-                        }
 
-                        return item;
+            return item;
-                    }),
+          })
-                },
+        }
-            };
+      };
-        },
+    }
-    },
+  },
-    devtool: "source-map",
+  devtool: "source-map"
 };

client/cypress.config.js

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

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(() => {
+  beforeEach(() => {
-        cy.visit("/");
+    cy.visit("/");
-    });
+  });
-    it("Renders Correctly", () => {
+  it("Renders Correctly", () => {});
-    });
+  it("Has the Slogan", () => {
-    it("Has the Slogan", () => {
+    cy.findByText("A whole x22new kind of shop management system.").should("exist");
-        cy.findByText("A whole x22new kind of shop management system.").should(
+    /* ==== Generated with Cypress Studio ==== */
-            "exist"
+    cy.get(".ant-menu-item-active > .ant-menu-title-content > .header0-item-block").click();
-        );
+    cy.get("#email").clear();
-        /* ==== Generated with Cypress Studio ==== */
+    cy.get("#email").type("patrick@imex.dev");
-        cy.get(
+    cy.get("#password").clear();
-            ".ant-menu-item-active > .ant-menu-title-content > .header0-item-block"
+    cy.get("#password").type("patrick123{enter}");
-        ).click();
+    cy.get(".ant-form > .ant-btn").click();
-        cy.get("#email").clear();
+    /* ==== End Cypress Studio ==== */
-        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
+      // We'll take the command we used above to check off an element
-        // so we must tell it to visit our website with the `cy.visit()` command.
+      // Since we want to perform multiple tests that start with checking
-        // Since we want to visit the same URL at the start of all our tests,
+      // one element, we put it in the beforeEach hook
-        // we include it in our beforeEach function so that it runs before each test
+      // so that it runs at the start of every test.
-        cy.visit('https://example.cypress.io/todo')
+      cy.contains("Pay electric bill").parent().find("input[type=checkbox]").check();
-    })
+    });
 
-    it('displays two todo items by default', () => {
+    it("can filter for uncompleted tasks", () => {
-        // We use the `cy.get()` command to get all elements that match the selector.
+      // We'll click on the "active" button in order to
-        // Then, we use `should` to assert that there are two matched items,
+      // display only incomplete items
-        // which are the two default items.
+      cy.contains("Active").click();
-        cy.get('.todo-list li').should('have.length', 2)
 
-        // We can go even further and check that the default todos each contain
+      // After filtering, we can assert that there is only the one
-        // the correct text. We use the `first` and `last` functions
+      // incomplete item in the list.
-        // to get just the first and last matched elements individually,
+      cy.get(".todo-list li").should("have.length", 1).first().should("have.text", "Walk the dog");
-        // 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', () => {
+      // For good measure, let's also assert that the task we checked off
-        // We'll store our item text in a variable so we can reuse it
+      // does not exist on the page.
-        const newItem = 'Feed the cat'
+      cy.contains("Pay electric bill").should("not.exist");
+    });
 
-        // Let's get the input element and use the `type` command to
+    it("can filter for completed tasks", () => {
-        // input our new list item. After typing the content of our item,
+      // We can perform similar steps as the test above to ensure
-        // we need to type the enter key as well in order to submit the input.
+      // that only completed tasks are shown
-        // This input has a data-test attribute so we'll use that to select the
+      cy.contains("Completed").click();
-        // 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.
+      cy.get(".todo-list li").should("have.length", 1).first().should("have.text", "Pay electric bill");
-        // 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', () => {
+      cy.contains("Walk the dog").should("not.exist");
-        // 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
+    it("can delete all completed tasks", () => {
-        // that the list element is now marked as completed.
+      // First, let's click the "Clear completed" button
-        // Again we'll use `contains` to find the <label> element and then use the `parents` command
+      // `contains` is actually serving two purposes here.
-        // to traverse multiple levels up the dom until we find the corresponding <li> element.
+      // First, it's ensuring that the button exists within the dom.
-        // Once we get that element, we can assert that it has the completed class.
+      // This button only appears when at least one task is checked
-        cy.contains('Pay electric bill')
+      // so this command is implicitly verifying that it does exist.
-            .parents('li')
+      // Second, it selects the button so we can click it.
-            .should('have.class', 'completed')
+      cy.contains("Clear completed").click();
-    })
 
-    context('with a checked task', () => {
+      // Then we can make sure that there is only one element
-        beforeEach(() => {
+      // in the list and our element does not exist
-            // We'll take the command we used above to check off an element
+      cy.get(".todo-list li").should("have.length", 1).should("not.have.text", "Pay electric bill");
-            // Since we want to perform multiple tests that start with checking
-            // one element, we put it in the beforeEach hook
-            // so that it runs at the start of every test.
-            cy.contains('Pay electric bill')
-                .parent()
-                .find('input[type=checkbox]')
-                .check()
-        })
 
-        it('can filter for uncompleted tasks', () => {
+      // Finally, make sure that the clear button no longer exists.
-            // We'll click on the "active" button in order to
+      cy.contains("Clear completed").should("not.exist");
-            // display only incomplete items
+    });
-            cy.contains('Active').click()
+  });
-
+});
-            // After filtering, we can assert that there is only the one
-            // incomplete item in the list.
-            cy.get('.todo-list li')
-                .should('have.length', 1)
-                .first()
-                .should('have.text', 'Walk the dog')
-
-            // For good measure, let's also assert that the task we checked off
-            // does not exist on the page.
-            cy.contains('Pay electric bill').should('not.exist')
-        })
-
-        it('can filter for completed tasks', () => {
-            // We can perform similar steps as the test above to ensure
-            // that only completed tasks are shown
-            cy.contains('Completed').click()
-
-            cy.get('.todo-list li')
-                .should('have.length', 1)
-                .first()
-                .should('have.text', 'Pay electric bill')
-
-            cy.contains('Walk the dog').should('not.exist')
-        })
-
-        it('can delete all completed tasks', () => {
-            // First, let's click the "Clear completed" button
-            // `contains` is actually serving two purposes here.
-            // First, it's ensuring that the button exists within the dom.
-            // This button only appears when at least one task is checked
-            // so this command is implicitly verifying that it does exist.
-            // Second, it selects the button so we can click it.
-            cy.contains('Clear completed').click()
-
-            // Then we can make sure that there is only one element
-            // in the list and our element does not exist
-            cy.get('.todo-list li')
-                .should('have.length', 1)
-                .should('not.have.text', 'Pay electric bill')
-
-            // Finally, make sure that the clear button no longer exists.
-            cy.contains('Clear completed').should('not.exist')
-        })
-    })
-})

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

@@ -1,299 +1,284 @@
 /// <reference types="cypress" />
 
-context('Actions', () => {
+context("Actions", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/actions')
+    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', () => {
+  it(".type() - type into a DOM element", () => {
-        // https://on.cypress.io/type
+    // https://on.cypress.io/type
-        cy.get('.action-email')
+    cy.get(".action-email")
-            .type('fake@email.com').should('have.value', 'fake@email.com')
+      .type("fake@email.com")
+      .should("have.value", "fake@email.com")
 
-            // .type() with special character sequences
+      // .type() with special character sequences
-            .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
+      .type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
-            .type('{del}{selectall}{backspace}')
+      .type("{del}{selectall}{backspace}")
 
-            // .type() with key modifiers
+      // .type() with key modifiers
-            .type('{alt}{option}') //these are equivalent
+      .type("{alt}{option}") //these are equivalent
-            .type('{ctrl}{control}') //these are equivalent
+      .type("{ctrl}{control}") //these are equivalent
-            .type('{meta}{command}{cmd}') //these are equivalent
+      .type("{meta}{command}{cmd}") //these are equivalent
-            .type('{shift}')
+      .type("{shift}")
 
-            // Delay each keypress by 0.1 sec
+      // Delay each keypress by 0.1 sec
-            .type('slow.typing@email.com', {delay: 100})
+      .type("slow.typing@email.com", { delay: 100 })
-            .should('have.value', 'slow.typing@email.com')
+      .should("have.value", "slow.typing@email.com");
 
-        cy.get('.action-disabled')
+    cy.get(".action-disabled")
-            // Ignore error checking prior to type
+      // Ignore error checking prior to type
-            // like whether the input is visible or disabled
+      // like whether the input is visible or disabled
-            .type('disabled error checking', {force: true})
+      .type("disabled error checking", { force: true })
-            .should('have.value', 'disabled error checking')
+      .should("have.value", "disabled error checking");
-    })
+  });
 
-    it('.focus() - focus on a DOM element', () => {
+  it(".focus() - focus on a DOM element", () => {
-        // https://on.cypress.io/focus
+    // https://on.cypress.io/focus
-        cy.get('.action-focus').focus()
+    cy.get(".action-focus").focus().should("have.class", "focus").prev().should("have.attr", "style", "color: orange;");
-            .should('have.class', 'focus')
+  });
-            .prev().should('have.attr', 'style', 'color: orange;')
-    })
 
-    it('.blur() - blur off a DOM element', () => {
+  it(".blur() - blur off a DOM element", () => {
-        // https://on.cypress.io/blur
+    // https://on.cypress.io/blur
-        cy.get('.action-blur').type('About to blur').blur()
+    cy.get(".action-blur")
-            .should('have.class', 'error')
+      .type("About to blur")
-            .prev().should('have.attr', 'style', 'color: red;')
+      .blur()
-    })
+      .should("have.class", "error")
+      .prev()
+      .should("have.attr", "style", "color: red;");
+  });
 
-    it('.clear() - clears an input or textarea element', () => {
+  it(".clear() - clears an input or textarea element", () => {
-        // https://on.cypress.io/clear
+    // https://on.cypress.io/clear
-        cy.get('.action-clear').type('Clear this text')
+    cy.get(".action-clear")
-            .should('have.value', 'Clear this text')
+      .type("Clear this text")
-            .clear()
+      .should("have.value", "Clear this text")
-            .should('have.value', '')
+      .clear()
-    })
+      .should("have.value", "");
+  });
 
-    it('.submit() - submit a form', () => {
+  it(".submit() - submit a form", () => {
-        // https://on.cypress.io/submit
+    // https://on.cypress.io/submit
-        cy.get('.action-form')
+    cy.get(".action-form").find('[type="text"]').type("HALFOFF");
-            .find('[type="text"]').type('HALFOFF')
 
-        cy.get('.action-form').submit()
+    cy.get(".action-form").submit().next().should("contain", "Your form has been submitted!");
-            .next().should('contain', 'Your form has been submitted!')
+  });
-    })
 
-    it('.click() - click on a DOM element', () => {
+  it(".click() - click on a DOM element", () => {
-        // https://on.cypress.io/click
+    // https://on.cypress.io/click
-        cy.get('.action-btn').click()
+    cy.get(".action-btn").click();
 
-        // You can click on 9 specific positions of an element:
+    // You can click on 9 specific positions of an element:
-        //  -----------------------------------
+    //  -----------------------------------
-        // | topLeft        top       topRight |
+    // | topLeft        top       topRight |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // | left          center        right |
+    // | left          center        right |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // | bottomLeft   bottom   bottomRight |
+    // | bottomLeft   bottom   bottomRight |
-        //  -----------------------------------
+    //  -----------------------------------
 
-        // clicking in the center of the element is the default
+    // clicking in the center of the element is the default
-        cy.get('#action-canvas').click()
+    cy.get("#action-canvas").click();
 
-        cy.get('#action-canvas').click('topLeft')
+    cy.get("#action-canvas").click("topLeft");
-        cy.get('#action-canvas').click('top')
+    cy.get("#action-canvas").click("top");
-        cy.get('#action-canvas').click('topRight')
+    cy.get("#action-canvas").click("topRight");
-        cy.get('#action-canvas').click('left')
+    cy.get("#action-canvas").click("left");
-        cy.get('#action-canvas').click('right')
+    cy.get("#action-canvas").click("right");
-        cy.get('#action-canvas').click('bottomLeft')
+    cy.get("#action-canvas").click("bottomLeft");
-        cy.get('#action-canvas').click('bottom')
+    cy.get("#action-canvas").click("bottom");
-        cy.get('#action-canvas').click('bottomRight')
+    cy.get("#action-canvas").click("bottomRight");
 
-        // .click() accepts an x and y coordinate
+    // .click() accepts an x and y coordinate
-        // that controls where the click occurs :)
+    // that controls where the click occurs :)
 
-        cy.get('#action-canvas')
+    cy.get("#action-canvas")
-            .click(80, 75) // click 80px on x coord and 75px on y coord
+      .click(80, 75) // click 80px on x coord and 75px on y coord
-            .click(170, 75)
+      .click(170, 75)
-            .click(80, 165)
+      .click(80, 165)
-            .click(100, 185)
+      .click(100, 185)
-            .click(125, 190)
+      .click(125, 190)
-            .click(150, 185)
+      .click(150, 185)
-            .click(170, 165)
+      .click(170, 165);
 
-        // click multiple elements by passing multiple: true
+    // click multiple elements by passing multiple: true
-        cy.get('.action-labels>.label').click({multiple: true})
+    cy.get(".action-labels>.label").click({ multiple: true });
 
-        // Ignore error checking prior to clicking
+    // Ignore error checking prior to clicking
-        cy.get('.action-opacity>.btn').click({force: true})
+    cy.get(".action-opacity>.btn").click({ force: true });
-    })
+  });
 
-    it('.dblclick() - double click on a DOM element', () => {
+  it(".dblclick() - double click on a DOM element", () => {
-        // https://on.cypress.io/dblclick
+    // https://on.cypress.io/dblclick
 
-        // Our app has a listener on 'dblclick' event in our 'scripts.js'
+    // Our app has a listener on 'dblclick' event in our 'scripts.js'
-        // that hides the div and shows an input on double click
+    // that hides the div and shows an input on double click
-        cy.get('.action-div').dblclick().should('not.be.visible')
+    cy.get(".action-div").dblclick().should("not.be.visible");
-        cy.get('.action-input-hidden').should('be.visible')
+    cy.get(".action-input-hidden").should("be.visible");
-    })
+  });
 
-    it('.rightclick() - right click on a DOM element', () => {
+  it(".rightclick() - right click on a DOM element", () => {
-        // https://on.cypress.io/rightclick
+    // https://on.cypress.io/rightclick
 
-        // Our app has a listener on 'contextmenu' event in our 'scripts.js'
+    // Our app has a listener on 'contextmenu' event in our 'scripts.js'
-        // that hides the div and shows an input on right click
+    // 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-div").rightclick().should("not.be.visible");
-        cy.get('.rightclick-action-input-hidden').should('be.visible')
+    cy.get(".rightclick-action-input-hidden").should("be.visible");
-    })
+  });
 
-    it('.check() - check a checkbox or radio element', () => {
+  it(".check() - check a checkbox or radio element", () => {
-        // https://on.cypress.io/check
+    // https://on.cypress.io/check
 
-        // By default, .check() will check all
+    // By default, .check() will check all
-        // matching checkbox or radio elements in succession, one after another
+    // matching checkbox or radio elements in succession, one after another
-        cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
+    cy.get('.action-checkboxes [type="checkbox"]').not("[disabled]").check().should("be.checked");
-            .check().should('be.checked')
 
-        cy.get('.action-radios [type="radio"]').not('[disabled]')
+    cy.get('.action-radios [type="radio"]').not("[disabled]").check().should("be.checked");
-            .check().should('be.checked')
 
-        // .check() accepts a value argument
+    // .check() accepts a value argument
-        cy.get('.action-radios [type="radio"]')
+    cy.get('.action-radios [type="radio"]').check("radio1").should("be.checked");
-            .check('radio1').should('be.checked')
 
-        // .check() accepts an array of values
+    // .check() accepts an array of values
-        cy.get('.action-multiple-checkboxes [type="checkbox"]')
+    cy.get('.action-multiple-checkboxes [type="checkbox"]').check(["checkbox1", "checkbox2"]).should("be.checked");
-            .check(['checkbox1', 'checkbox2']).should('be.checked')
 
-        // Ignore error checking prior to checking
+    // Ignore error checking prior to checking
-        cy.get('.action-checkboxes [disabled]')
+    cy.get(".action-checkboxes [disabled]").check({ force: true }).should("be.checked");
-            .check({force: true}).should('be.checked')
 
-        cy.get('.action-radios [type="radio"]')
+    cy.get('.action-radios [type="radio"]').check("radio3", { force: true }).should("be.checked");
-            .check('radio3', {force: true}).should('be.checked')
+  });
-    })
 
-    it('.uncheck() - uncheck a checkbox element', () => {
+  it(".uncheck() - uncheck a checkbox element", () => {
-        // https://on.cypress.io/uncheck
+    // https://on.cypress.io/uncheck
 
-        // By default, .uncheck() will uncheck all matching
+    // By default, .uncheck() will uncheck all matching
-        // checkbox elements in succession, one after another
+    // checkbox elements in succession, one after another
-        cy.get('.action-check [type="checkbox"]')
+    cy.get('.action-check [type="checkbox"]').not("[disabled]").uncheck().should("not.be.checked");
-            .not('[disabled]')
-            .uncheck().should('not.be.checked')
 
-        // .uncheck() accepts a value argument
+    // .uncheck() accepts a value argument
-        cy.get('.action-check [type="checkbox"]')
+    cy.get('.action-check [type="checkbox"]').check("checkbox1").uncheck("checkbox1").should("not.be.checked");
-            .check('checkbox1')
-            .uncheck('checkbox1').should('not.be.checked')
 
-        // .uncheck() accepts an array of values
+    // .uncheck() accepts an array of values
-        cy.get('.action-check [type="checkbox"]')
+    cy.get('.action-check [type="checkbox"]')
-            .check(['checkbox1', 'checkbox3'])
+      .check(["checkbox1", "checkbox3"])
-            .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
+      .uncheck(["checkbox1", "checkbox3"])
+      .should("not.be.checked");
 
-        // Ignore error checking prior to unchecking
+    // Ignore error checking prior to unchecking
-        cy.get('.action-check [disabled]')
+    cy.get(".action-check [disabled]").uncheck({ force: true }).should("not.be.checked");
-            .uncheck({force: true}).should('not.be.checked')
+  });
-    })
 
-    it('.select() - select an option in a <select> element', () => {
+  it(".select() - select an option in a <select> element", () => {
-        // https://on.cypress.io/select
+    // https://on.cypress.io/select
 
-        // at first, no option should be selected
+    // at first, no option should be selected
-        cy.get('.action-select')
+    cy.get(".action-select").should("have.value", "--Select a fruit--");
-            .should('have.value', '--Select a fruit--')
 
-        // Select option(s) with matching text content
+    // Select option(s) with matching text content
-        cy.get('.action-select').select('apples')
+    cy.get(".action-select").select("apples");
-        // confirm the apples were selected
+    // confirm the apples were selected
-        // note that each value starts with "fr-" in our HTML
+    // note that each value starts with "fr-" in our HTML
-        cy.get('.action-select').should('have.value', 'fr-apples')
+    cy.get(".action-select").should("have.value", "fr-apples");
 
-        cy.get('.action-select-multiple')
+    cy.get(".action-select-multiple")
-            .select(['apples', 'oranges', 'bananas'])
+      .select(["apples", "oranges", "bananas"])
-            // when getting multiple values, invoke "val" method first
+      // when getting multiple values, invoke "val" method first
-            .invoke('val')
+      .invoke("val")
-            .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
 
-        // Select option(s) with matching value
+    // Select option(s) with matching value
-        cy.get('.action-select').select('fr-bananas')
+    cy.get(".action-select")
-            // can attach an assertion right away to the element
+      .select("fr-bananas")
-            .should('have.value', 'fr-bananas')
+      // can attach an assertion right away to the element
+      .should("have.value", "fr-bananas");
 
-        cy.get('.action-select-multiple')
+    cy.get(".action-select-multiple")
-            .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
+      .select(["fr-apples", "fr-oranges", "fr-bananas"])
-            .invoke('val')
+      .invoke("val")
-            .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
+      .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
 
-        // assert the selected values include oranges
+    // assert the selected values include oranges
-        cy.get('.action-select-multiple')
+    cy.get(".action-select-multiple").invoke("val").should("include", "fr-oranges");
-            .invoke('val').should('include', 'fr-oranges')
+  });
-    })
 
-    it('.scrollIntoView() - scroll an element into view', () => {
+  it(".scrollIntoView() - scroll an element into view", () => {
-        // https://on.cypress.io/scrollintoview
+    // https://on.cypress.io/scrollintoview
 
-        // normally all of these buttons are hidden,
+    // normally all of these buttons are hidden,
-        // because they're not within
+    // because they're not within
-        // the viewable area of their parent
+    // the viewable area of their parent
-        // (we need to scroll to see them)
+    // (we need to scroll to see them)
-        cy.get('#scroll-horizontal button')
+    cy.get("#scroll-horizontal button").should("not.be.visible");
-            .should('not.be.visible')
 
-        // scroll the button into view, as if the user had scrolled
+    // scroll the button into view, as if the user had scrolled
-        cy.get('#scroll-horizontal button').scrollIntoView()
+    cy.get("#scroll-horizontal button").scrollIntoView().should("be.visible");
-            .should('be.visible')
 
-        cy.get('#scroll-vertical button')
+    cy.get("#scroll-vertical button").should("not.be.visible");
-            .should('not.be.visible')
 
-        // Cypress handles the scroll direction needed
+    // Cypress handles the scroll direction needed
-        cy.get('#scroll-vertical button').scrollIntoView()
+    cy.get("#scroll-vertical button").scrollIntoView().should("be.visible");
-            .should('be.visible')
 
-        cy.get('#scroll-both button')
+    cy.get("#scroll-both button").should("not.be.visible");
-            .should('not.be.visible')
 
-        // Cypress knows to scroll to the right and down
+    // Cypress knows to scroll to the right and down
-        cy.get('#scroll-both button').scrollIntoView()
+    cy.get("#scroll-both button").scrollIntoView().should("be.visible");
-            .should('be.visible')
+  });
-    })
 
-    it('.trigger() - trigger an event on a DOM element', () => {
+  it(".trigger() - trigger an event on a DOM element", () => {
-        // https://on.cypress.io/trigger
+    // https://on.cypress.io/trigger
 
-        // To interact with a range input (slider)
+    // To interact with a range input (slider)
-        // we need to set its value & trigger the
+    // we need to set its value & trigger the
-        // event to signal it changed
+    // event to signal it changed
 
-        // Here, we invoke jQuery's val() method to set
+    // Here, we invoke jQuery's val() method to set
-        // the value and trigger the 'change' event
+    // the value and trigger the 'change' event
-        cy.get('.trigger-input-range')
+    cy.get(".trigger-input-range")
-            .invoke('val', 25)
+      .invoke("val", 25)
-            .trigger('change')
+      .trigger("change")
-            .get('input[type=range]').siblings('p')
+      .get("input[type=range]")
-            .should('have.text', '25')
+      .siblings("p")
-    })
+      .should("have.text", "25");
+  });
 
-    it('cy.scrollTo() - scroll the window or element to a position', () => {
+  it("cy.scrollTo() - scroll the window or element to a position", () => {
-        // https://on.cypress.io/scrollto
+    // https://on.cypress.io/scrollto
 
-        // You can scroll to 9 specific positions of an element:
+    // You can scroll to 9 specific positions of an element:
-        //  -----------------------------------
+    //  -----------------------------------
-        // | topLeft        top       topRight |
+    // | topLeft        top       topRight |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // | left          center        right |
+    // | left          center        right |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // |                                   |
+    // |                                   |
-        // | bottomLeft   bottom   bottomRight |
+    // | bottomLeft   bottom   bottomRight |
-        //  -----------------------------------
+    //  -----------------------------------
 
-        // if you chain .scrollTo() off of cy, we will
+    // if you chain .scrollTo() off of cy, we will
-        // scroll the entire window
+    // scroll the entire window
-        cy.scrollTo('bottom')
+    cy.scrollTo("bottom");
 
-        cy.get('#scrollable-horizontal').scrollTo('right')
+    cy.get("#scrollable-horizontal").scrollTo("right");
 
-        // or you can scroll to a specific coordinate:
+    // or you can scroll to a specific coordinate:
-        // (x axis, y axis) in pixels
+    // (x axis, y axis) in pixels
-        cy.get('#scrollable-vertical').scrollTo(250, 250)
+    cy.get("#scrollable-vertical").scrollTo(250, 250);
 
-        // or you can scroll to a specific percentage
+    // or you can scroll to a specific percentage
-        // of the (width, height) of the element
+    // of the (width, height) of the element
-        cy.get('#scrollable-both').scrollTo('75%', '25%')
+    cy.get("#scrollable-both").scrollTo("75%", "25%");
 
-        // control the easing of the scroll (default is 'swing')
+    // control the easing of the scroll (default is 'swing')
-        cy.get('#scrollable-vertical').scrollTo('center', {easing: 'linear'})
+    cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" });
 
-        // control the duration of the scroll (in ms)
+    // control the duration of the scroll (in ms)
-        cy.get('#scrollable-both').scrollTo('center', {duration: 2000})
+    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', () => {
+context("Aliasing", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/aliasing')
+    cy.visit("https://example.cypress.io/commands/aliasing");
-    })
+  });
 
-    it('.as() - alias a DOM element for later use', () => {
+  it(".as() - alias a DOM element for later use", () => {
-        // https://on.cypress.io/as
+    // https://on.cypress.io/as
 
-        // Alias a DOM element for use later
+    // Alias a DOM element for use later
-        // We don't have to traverse to the element
+    // We don't have to traverse to the element
-        // later in our code, we reference it with @
+    // later in our code, we reference it with @
 
-        cy.get('.as-table').find('tbody>tr')
+    cy.get(".as-table").find("tbody>tr").first().find("td").first().find("button").as("firstBtn");
-            .first().find('td').first()
-            .find('button').as('firstBtn')
 
-        // when we reference the alias, we place an
+    // when we reference the alias, we place an
-        // @ in front of its name
+    // @ in front of its name
-        cy.get('@firstBtn').click()
+    cy.get("@firstBtn").click();
 
-        cy.get('@firstBtn')
+    cy.get("@firstBtn").should("have.class", "btn-success").and("contain", "Changed");
-            .should('have.class', 'btn-success')
+  });
-            .and('contain', 'Changed')
-    })
 
-    it('.as() - alias a route for later use', () => {
+  it(".as() - alias a route for later use", () => {
-        // Alias the route to wait for its response
+    // Alias the route to wait for its response
-        cy.intercept('GET', '**/comments/*').as('getComment')
+    cy.intercept("GET", "**/comments/*").as("getComment");
 
-        // we have code that gets a comment when
+    // we have code that gets a comment when
-        // the button is clicked in scripts.js
+    // the button is clicked in scripts.js
-        cy.get('.network-btn').click()
+    cy.get(".network-btn").click();
 
-        // https://on.cypress.io/wait
+    // https://on.cypress.io/wait
-        cy.wait('@getComment').its('response.statusCode').should('eq', 200)
+    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', () => {
+context("Assertions", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/assertions')
+    cy.visit("https://example.cypress.io/commands/assertions");
-    })
+  });
 
-    describe('Implicit Assertions', () => {
+  describe("Implicit Assertions", () => {
-        it('.should() - make an assertion about the current subject', () => {
+    it(".should() - make an assertion about the current subject", () => {
-            // https://on.cypress.io/should
+      // https://on.cypress.io/should
-            cy.get('.assertion-table')
+      cy.get(".assertion-table")
-                .find('tbody tr:last')
+        .find("tbody tr:last")
-                .should('have.class', 'success')
+        .should("have.class", "success")
-                .find('td')
+        .find("td")
-                .first()
+        .first()
-                // checking the text of the <td> element in various ways
+        // checking the text of the <td> element in various ways
-                .should('have.text', 'Column content')
+        .should("have.text", "Column content")
-                .should('contain', 'Column content')
+        .should("contain", "Column content")
-                .should('have.html', 'Column content')
+        .should("have.html", "Column content")
-                // chai-jquery uses "is()" to check if element matches selector
+        // chai-jquery uses "is()" to check if element matches selector
-                .should('match', 'td')
+        .should("match", "td")
-                // to match text content against a regular expression
+        // to match text content against a regular expression
-                // first need to invoke jQuery method text()
+        // first need to invoke jQuery method text()
-                // and then match using regular expression
+        // and then match using regular expression
-                .invoke('text')
+        .invoke("text")
-                .should('match', /column content/i)
+        .should("match", /column content/i);
 
-            // a better way to check element's text content against a regular expression
+      // a better way to check element's text content against a regular expression
-            // is to use "cy.contains"
+      // is to use "cy.contains"
-            // https://on.cypress.io/contains
+      // https://on.cypress.io/contains
-            cy.get('.assertion-table')
+      cy.get(".assertion-table")
-                .find('tbody tr:last')
+        .find("tbody tr:last")
-                // finds first <td> element with text content matching regular expression
+        // finds first <td> element with text content matching regular expression
-                .contains('td', /column content/i)
+        .contains("td", /column content/i)
-                .should('be.visible')
+        .should("be.visible");
 
-            // for more information about asserting element's text
+      // 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
+      // 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', () => {
+    it("can throw any error", () => {
-            // https://on.cypress.io/and
+      cy.get(".docs-header")
-            cy.get('.assertions-link')
+        .find("div")
-                .should('have.class', 'active')
+        .should(($div) => {
-                .and('have.attr', 'href')
+          if ($div.length !== 1) {
-                .and('include', 'cypress.io')
+            // you can throw your own errors
-        })
+            throw new Error("Did not find 1 element");
-    })
+          }
 
-    describe('Explicit Assertions', () => {
+          const className = $div[0].className;
-        // 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)
+          if (!className.match(/heading-/)) {
-            expect(o).to.deep.equal({foo: 'bar'})
+            throw new Error(`Could not find class "heading-" in ${className}`);
-            // matching text using regular expression
+          }
-            expect('FooBar').to.match(/bar$/i)
+        });
-        })
+    });
 
-        it('pass your own callback function to should()', () => {
+    it("matches unknown text between two elements", () => {
-            // Pass a function to should that can have any number
+      /**
-            // of explicit assertions within it.
+       * Text from the first element.
-            // The ".should(cb)" function will be retried
+       * @type {string}
-            // automatically until it passes all your explicit assertions or times out.
+       */
-            cy.get('.assertions-p')
+      let text;
-                .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
+       * Normalizes passed text,
-                    const paragraphs = texts.get()
+       * 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
+      cy.get(".two-elements")
-                    expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
+        .find(".first")
+        .then(($first) => {
+          // save text from the first element
+          text = normalizeText($first.text());
+        });
 
-                    // use second argument to expect(...) to provide clear
+      cy.get(".two-elements")
-                    // message with each assertion
+        .find(".second")
-                    expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
+        .should(($div) => {
-                        'Some text from first p',
+          // we can massage text before comparing
-                        'More text from second p',
+          const secondText = normalizeText($div.text());
-                        'And even more text from third p',
-                    ])
-                })
-        })
 
-        it('finds element by class name regex', () => {
+          expect(secondText, "second text").to.equal(text);
-            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
+    it("assert - assert shape of an object", () => {
+      const person = {
+        name: "Joe",
+        age: 20
+      };
 
-                    expect(className).to.match(/heading-/)
+      assert.isObject(person, "value is object");
-                })
+    });
-                // .then(cb) callback is not retried,
-                // it either passes or fails
-                .then(($div) => {
-                    expect($div, 'text content').to.have.text('Introduction')
-                })
-        })
 
-        it('can throw any error', () => {
+    it("retries the should callback until assertions pass", () => {
-            cy.get('.docs-header')
+      cy.get("#random-number").should(($div) => {
-                .find('div')
+        const n = parseFloat($div.text());
-                .should(($div) => {
-                    if ($div.length !== 1) {
-                        // you can throw your own errors
-                        throw new Error('Did not find 1 element')
-                    }
 
-                    const className = $div[0].className
+        expect(n).to.be.gte(1).and.be.lte(10);
-
+      });
-                    if (!className.match(/heading-/)) {
+    });
-                        throw new Error(`Could not find class "heading-" in ${className}`)
+  });
-                    }
+});
-                })
-        })
-
-        it('matches unknown text between two elements', () => {
-            /**
-             * Text from the first element.
-             * @type {string}
-             */
-            let text
-
-            /**
-             * Normalizes passed text,
-             * useful before comparing text with spaces and different capitalization.
-             * @param {string} s Text to normalize
-             */
-            const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
-
-            cy.get('.two-elements')
-                .find('.first')
-                .then(($first) => {
-                    // save text from the first element
-                    text = normalizeText($first.text())
-                })
-
-            cy.get('.two-elements')
-                .find('.second')
-                .should(($div) => {
-                    // we can massage text before comparing
-                    const secondText = normalizeText($div.text())
-
-                    expect(secondText, 'second text').to.equal(text)
-                })
-        })
-
-        it('assert - assert shape of an object', () => {
-            const person = {
-                name: 'Joe',
-                age: 20,
-            }
-
-            assert.isObject(person, 'value is object')
-        })
-
-        it('retries the should callback until assertions pass', () => {
-            cy.get('#random-number')
-                .should(($div) => {
-                    const n = parseFloat($div.text())
-
-                    expect(n).to.be.gte(1).and.be.lte(10)
-                })
-        })
-    })
-})

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

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

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

@@ -1,77 +1,79 @@
 /// <reference types="cypress" />
 
-context('Cookies', () => {
+context("Cookies", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        Cypress.Cookies.debug(true)
+    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
+    // clear cookies again after visiting to remove
-        // any 3rd party cookies picked up such as cloudflare
+    // any 3rd party cookies picked up such as cloudflare
-        cy.clearCookies()
+    cy.clearCookies();
-    })
+  });
 
-    it('cy.getCookie() - get a browser cookie', () => {
+  it("cy.getCookie() - get a browser cookie", () => {
-        // https://on.cypress.io/getcookie
+    // https://on.cypress.io/getcookie
-        cy.get('#getCookie .set-a-cookie').click()
+    cy.get("#getCookie .set-a-cookie").click();
 
-        // cy.getCookie() yields a cookie object
+    // cy.getCookie() yields a cookie object
-        cy.getCookie('token').should('have.property', 'value', '123ABC')
+    cy.getCookie("token").should("have.property", "value", "123ABC");
-    })
+  });
 
-    it('cy.getCookies() - get browser cookies', () => {
+  it("cy.getCookies() - get browser cookies", () => {
-        // https://on.cypress.io/getcookies
+    // https://on.cypress.io/getcookies
-        cy.getCookies().should('be.empty')
+    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() yields an array of cookies
-        cy.getCookies().should('have.length', 1).should((cookies) => {
+    cy.getCookies()
-            // each cookie has these properties
+      .should("have.length", 1)
-            expect(cookies[0]).to.have.property('name', 'token')
+      .should((cookies) => {
-            expect(cookies[0]).to.have.property('value', '123ABC')
+        // each cookie has these properties
-            expect(cookies[0]).to.have.property('httpOnly', false)
+        expect(cookies[0]).to.have.property("name", "token");
-            expect(cookies[0]).to.have.property('secure', false)
+        expect(cookies[0]).to.have.property("value", "123ABC");
-            expect(cookies[0]).to.have.property('domain')
+        expect(cookies[0]).to.have.property("httpOnly", false);
-            expect(cookies[0]).to.have.property('path')
+        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', () => {
+  it("cy.setCookie() - set a browser cookie", () => {
-        // https://on.cypress.io/setcookie
+    // https://on.cypress.io/setcookie
-        cy.getCookies().should('be.empty')
+    cy.getCookies().should("be.empty");
 
-        cy.setCookie('foo', 'bar')
+    cy.setCookie("foo", "bar");
 
-        // cy.getCookie() yields a cookie object
+    // cy.getCookie() yields a cookie object
-        cy.getCookie('foo').should('have.property', 'value', 'bar')
+    cy.getCookie("foo").should("have.property", "value", "bar");
-    })
+  });
 
-    it('cy.clearCookie() - clear a browser cookie', () => {
+  it("cy.clearCookie() - clear a browser cookie", () => {
-        // https://on.cypress.io/clearcookie
+    // https://on.cypress.io/clearcookie
-        cy.getCookie('token').should('be.null')
+    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.clearCookies() yields null
-        cy.clearCookie('token').should('be.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', () => {
+  it("cy.clearCookies() - clear browser cookies", () => {
-        // https://on.cypress.io/clearcookies
+    // https://on.cypress.io/clearcookies
-        cy.getCookies().should('be.empty')
+    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() yields null
-        cy.clearCookies()
+    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', () => {
+context("Cypress.Commands", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    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', () => {
+  it(".add() - create a custom command", () => {
-        Cypress.Commands.add('console', {
+    Cypress.Commands.add(
-            prevSubject: true,
+      "console",
-        }, (subject, method) => {
+      {
-            // the previous subject is automatically received
+        prevSubject: true
-            // and the commands arguments are shifted
+      },
+      (subject, method) => {
+        // the previous subject is automatically received
+        // and the commands arguments are shifted
 
-            // allow us to change the console method used
+        // allow us to change the console method used
-            method = method || 'log'
+        method = method || "log";
 
-            // log the subject to the console
+        // log the subject to the console
-            // @ts-ignore TS7017
+        // @ts-ignore TS7017
-            console[method]('The subject is', subject)
+        console[method]("The subject is", subject);
 
-            // whatever we return becomes the new subject
+        // whatever we return becomes the new subject
-            // we don't want to change the subject so
+        // we don't want to change the subject so
-            // we return whatever was passed in
+        // we return whatever was passed in
-            return subject
+        return subject;
-        })
+      }
+    );
 
-        // @ts-ignore TS2339
+    // @ts-ignore TS2339
-        cy.get('button').console('info').then(($button) => {
+    cy.get("button")
-            // subject is still $button
+      .console("info")
-        })
+      .then(($button) => {
-    })
+        // subject is still $button
-})
+      });
+  });
+});
 
-context('Cypress.Cookies', () => {
+context("Cypress.Cookies", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    // https://on.cypress.io/cookies
+  // https://on.cypress.io/cookies
-    it('.debug() - enable or disable debugging', () => {
+  it(".debug() - enable or disable debugging", () => {
-        Cypress.Cookies.debug(true)
+    Cypress.Cookies.debug(true);
 
-        // Cypress will now log in the console when
+    // Cypress will now log in the console when
-        // cookies are set or cleared
+    // cookies are set or cleared
-        cy.setCookie('fakeCookie', '123ABC')
+    cy.setCookie("fakeCookie", "123ABC");
-        cy.clearCookie('fakeCookie')
+    cy.clearCookie("fakeCookie");
-        cy.setCookie('fakeCookie', '123ABC')
+    cy.setCookie("fakeCookie", "123ABC");
-        cy.clearCookie('fakeCookie')
+    cy.clearCookie("fakeCookie");
-        cy.setCookie('fakeCookie', '123ABC')
+    cy.setCookie("fakeCookie", "123ABC");
-    })
+  });
 
-    it('.preserveOnce() - preserve cookies by key', () => {
+  it(".preserveOnce() - preserve cookies by key", () => {
-        // normally cookies are reset after each test
+    // normally cookies are reset after each test
-        cy.getCookie('fakeCookie').should('not.be.ok')
+    cy.getCookie("fakeCookie").should("not.be.ok");
 
-        // preserving a cookie will not clear it when
+    // preserving a cookie will not clear it when
-        // the next test starts
+    // the next test starts
-        cy.setCookie('lastCookie', '789XYZ')
+    cy.setCookie("lastCookie", "789XYZ");
-        Cypress.Cookies.preserveOnce('lastCookie')
+    Cypress.Cookies.preserveOnce("lastCookie");
-    })
+  });
 
-    it('.defaults() - set defaults for all cookies', () => {
+  it(".defaults() - set defaults for all cookies", () => {
-        // now any cookie with the name 'session_id' will
+    // now any cookie with the name 'session_id' will
-        // not be cleared before each new test runs
+    // not be cleared before each new test runs
-        Cypress.Cookies.defaults({
+    Cypress.Cookies.defaults({
-            preserve: 'session_id',
+      preserve: "session_id"
-        })
+    });
-    })
+  });
-})
+});
 
-context('Cypress.arch', () => {
+context("Cypress.arch", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    it('Get CPU architecture name of underlying OS', () => {
+  it("Get CPU architecture name of underlying OS", () => {
-        // https://on.cypress.io/arch
+    // https://on.cypress.io/arch
-        expect(Cypress.arch).to.exist
+    expect(Cypress.arch).to.exist;
-    })
+  });
-})
+});
 
-context('Cypress.config()', () => {
+context("Cypress.config()", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    it('Get and set configuration options', () => {
+  it("Get and set configuration options", () => {
-        // https://on.cypress.io/config
+    // https://on.cypress.io/config
-        let myConfig = Cypress.config()
+    let myConfig = Cypress.config();
 
-        expect(myConfig).to.have.property('animationDistanceThreshold', 5)
+    expect(myConfig).to.have.property("animationDistanceThreshold", 5);
-        expect(myConfig).to.have.property('baseUrl', null)
+    expect(myConfig).to.have.property("baseUrl", null);
-        expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
+    expect(myConfig).to.have.property("defaultCommandTimeout", 4000);
-        expect(myConfig).to.have.property('requestTimeout', 5000)
+    expect(myConfig).to.have.property("requestTimeout", 5000);
-        expect(myConfig).to.have.property('responseTimeout', 30000)
+    expect(myConfig).to.have.property("responseTimeout", 30000);
-        expect(myConfig).to.have.property('viewportHeight', 660)
+    expect(myConfig).to.have.property("viewportHeight", 660);
-        expect(myConfig).to.have.property('viewportWidth', 1000)
+    expect(myConfig).to.have.property("viewportWidth", 1000);
-        expect(myConfig).to.have.property('pageLoadTimeout', 60000)
+    expect(myConfig).to.have.property("pageLoadTimeout", 60000);
-        expect(myConfig).to.have.property('waitForAnimations', true)
+    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!
+    // this will change the config for the rest of your tests!
-        Cypress.config('pageLoadTimeout', 20000)
+    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', () => {
+context("Cypress.dom", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    // https://on.cypress.io/dom
+  // https://on.cypress.io/dom
-    it('.isHidden() - determine if a DOM element is hidden', () => {
+  it(".isHidden() - determine if a DOM element is hidden", () => {
-        let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
+    let hiddenP = Cypress.$(".dom-p p.hidden").get(0);
-        let visibleP = Cypress.$('.dom-p p.visible').get(0)
+    let visibleP = Cypress.$(".dom-p p.visible").get(0);
 
-        // our first paragraph has css class 'hidden'
+    // our first paragraph has css class 'hidden'
-        expect(Cypress.dom.isHidden(hiddenP)).to.be.true
+    expect(Cypress.dom.isHidden(hiddenP)).to.be.true;
-        expect(Cypress.dom.isHidden(visibleP)).to.be.false
+    expect(Cypress.dom.isHidden(visibleP)).to.be.false;
-    })
+  });
-})
+});
 
-context('Cypress.env()', () => {
+context("Cypress.env()", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    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
+  // https://on.cypress.io/environment-variables
-    it('Get environment variables', () => {
+  it("Get environment variables", () => {
-        // https://on.cypress.io/env
+    // https://on.cypress.io/env
-        // set multiple environment variables
+    // set multiple environment variables
-        Cypress.env({
+    Cypress.env({
-            host: 'veronica.dev.local',
+      host: "veronica.dev.local",
-            api_server: 'http://localhost:8888/v1/',
+      api_server: "http://localhost:8888/v1/"
-        })
+    });
 
-        // get environment variable
+    // get environment variable
-        expect(Cypress.env('host')).to.eq('veronica.dev.local')
+    expect(Cypress.env("host")).to.eq("veronica.dev.local");
 
-        // set environment variable
+    // set environment variable
-        Cypress.env('api_server', 'http://localhost:8888/v2/')
+    Cypress.env("api_server", "http://localhost:8888/v2/");
-        expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')
+    expect(Cypress.env("api_server")).to.eq("http://localhost:8888/v2/");
 
-        // get all environment variable
+    // get all environment variable
-        expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
+    expect(Cypress.env()).to.have.property("host", "veronica.dev.local");
-        expect(Cypress.env()).to.have.property('api_server', 'http://localhost:8888/v2/')
+    expect(Cypress.env()).to.have.property("api_server", "http://localhost:8888/v2/");
-    })
+  });
-})
+});
 
-context('Cypress.log', () => {
+context("Cypress.log", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    it('Control what is printed to the Command Log', () => {
+  it("Control what is printed to the Command Log", () => {
-        // https://on.cypress.io/cypress-log
+    // https://on.cypress.io/cypress-log
-    })
+  });
-})
+});
 
-context('Cypress.platform', () => {
+context("Cypress.platform", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    it('Get underlying OS name', () => {
+  it("Get underlying OS name", () => {
-        // https://on.cypress.io/platform
+    // https://on.cypress.io/platform
-        expect(Cypress.platform).to.be.exist
+    expect(Cypress.platform).to.be.exist;
-    })
+  });
-})
+});
 
-context('Cypress.version', () => {
+context("Cypress.version", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    it('Get current version of Cypress being run', () => {
+  it("Get current version of Cypress being run", () => {
-        // https://on.cypress.io/version
+    // https://on.cypress.io/version
-        expect(Cypress.version).to.be.exist
+    expect(Cypress.version).to.be.exist;
-    })
+  });
-})
+});
 
-context('Cypress.spec', () => {
+context("Cypress.spec", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/cypress-api')
+    cy.visit("https://example.cypress.io/cypress-api");
-    })
+  });
 
-    it('Get current spec information', () => {
+  it("Get current spec information", () => {
-        // https://on.cypress.io/spec
+    // https://on.cypress.io/spec
-        // wrap the object so we can inspect it easily by clicking in the command log
+    // 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'])
+    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', () => {
+context("Files", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/files')
+    cy.visit("https://example.cypress.io/commands/files");
-    })
+  });
 
-    beforeEach(() => {
+  beforeEach(() => {
-        // load example.json fixture file and store
+    // load example.json fixture file and store
-        // in the test context object
+    // in the test context object
-        cy.fixture('example.json').as('example')
+    cy.fixture("example.json").as("example");
-    })
+  });
 
-    it('cy.fixture() - load a fixture', () => {
+  it("cy.fixture() - load a fixture", () => {
-        // https://on.cypress.io/fixture
+    // https://on.cypress.io/fixture
 
-        // Instead of writing a response inline you can
+    // Instead of writing a response inline you can
-        // use a fixture file's content.
+    // use a fixture file's content.
 
-        // when application makes an Ajax request matching "GET **/comments/*"
+    // when application makes an Ajax request matching "GET **/comments/*"
-        // Cypress will intercept it and reply with the object in `example.json` fixture
+    // Cypress will intercept it and reply with the object in `example.json` fixture
-        cy.intercept('GET', '**/comments/*', {fixture: 'example.json'}).as('getComment')
+    cy.intercept("GET", "**/comments/*", { fixture: "example.json" }).as("getComment");
 
-        // we have code that gets a comment when
+    // we have code that gets a comment when
-        // the button is clicked in scripts.js
+    // the button is clicked in scripts.js
-        cy.get('.fixture-btn').click()
+    cy.get(".fixture-btn").click();
 
-        cy.wait('@getComment').its('response.body')
+    cy.wait("@getComment")
-            .should('have.property', 'name')
+      .its("response.body")
-            .and('include', 'Using fixtures to represent data')
+      .should("have.property", "name")
-    })
+      .and("include", "Using fixtures to represent data");
+  });
 
-    it('cy.fixture() or require - load a fixture', function () {
+  it("cy.fixture() or require - load a fixture", function () {
-        // we are inside the "function () { ... }"
+    // we are inside the "function () { ... }"
-        // callback and can use test context object "this"
+    // callback and can use test context object "this"
-        // "this.example" was loaded in "beforeEach" function callback
+    // "this.example" was loaded in "beforeEach" function callback
-        expect(this.example, 'fixture in the test context')
+    expect(this.example, "fixture in the test context").to.deep.equal(requiredExample);
-            .to.deep.equal(requiredExample)
 
-        // or use "cy.wrap" and "should('deep.equal', ...)" assertion
+    // or use "cy.wrap" and "should('deep.equal', ...)" assertion
-        cy.wrap(this.example)
+    cy.wrap(this.example).should("deep.equal", requiredExample);
-            .should('deep.equal', requiredExample)
+  });
-    })
 
-    it('cy.readFile() - read file contents', () => {
+  it("cy.readFile() - read file contents", () => {
-        // https://on.cypress.io/readfile
+    // https://on.cypress.io/readfile
 
-        // You can read a file and yield its contents
+    // You can read a file and yield its contents
-        // The filePath is relative to your project's root.
+    // The filePath is relative to your project's root.
-        cy.readFile('cypress.json').then((json) => {
+    cy.readFile("cypress.json").then((json) => {
-            expect(json).to.be.an('object')
+      expect(json).to.be.an("object");
-        })
+    });
-    })
+  });
 
-    it('cy.writeFile() - write to a file', () => {
+  it("cy.writeFile() - write to a file", () => {
-        // https://on.cypress.io/writefile
+    // 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
+    // Use a response from a request to automatically
-        // generate a fixture file for use later
+    // generate a fixture file for use later
-        cy.request('https://jsonplaceholder.cypress.io/users')
+    cy.request("https://jsonplaceholder.cypress.io/users").then((response) => {
-            .then((response) => {
+      cy.writeFile("cypress/fixtures/users.json", response.body);
-                cy.writeFile('cypress/fixtures/users.json', response.body)
+    });
-            })
 
-        cy.fixture('users').should((users) => {
+    cy.fixture("users").should((users) => {
-            expect(users[0].name).to.exist
+      expect(users[0].name).to.exist;
-        })
+    });
 
-        // JavaScript arrays and objects are stringified
+    // JavaScript arrays and objects are stringified
-        // and formatted into text.
+    // and formatted into text.
-        cy.writeFile('cypress/fixtures/profile.json', {
+    cy.writeFile("cypress/fixtures/profile.json", {
-            id: 8739,
+      id: 8739,
-            name: 'Jane',
+      name: "Jane",
-            email: 'jane@example.com',
+      email: "jane@example.com"
-        })
+    });
 
-        cy.fixture('profile').should((profile) => {
+    cy.fixture("profile").should((profile) => {
-            expect(profile.name).to.eq('Jane')
+      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', () => {
+context("Local Storage", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/local-storage')
+    cy.visit("https://example.cypress.io/commands/local-storage");
-    })
+  });
-    // Although local storage is automatically cleared
+  // Although local storage is automatically cleared
-    // in between tests to maintain a clean state
+  // in between tests to maintain a clean state
-    // sometimes we need to clear the local storage manually
+  // sometimes we need to clear the local storage manually
 
-    it('cy.clearLocalStorage() - clear all data in local storage', () => {
+  it("cy.clearLocalStorage() - clear all data in local storage", () => {
-        // https://on.cypress.io/clearlocalstorage
+    // https://on.cypress.io/clearlocalstorage
-        cy.get('.ls-btn').click().should(() => {
+    cy.get(".ls-btn")
-            expect(localStorage.getItem('prop1')).to.eq('red')
+      .click()
-            expect(localStorage.getItem('prop2')).to.eq('blue')
+      .should(() => {
-            expect(localStorage.getItem('prop3')).to.eq('magenta')
+        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
+    // clearLocalStorage() yields the localStorage object
-        cy.clearLocalStorage().should((ls) => {
+    cy.clearLocalStorage().should((ls) => {
-            expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem("prop1")).to.be.null;
-            expect(ls.getItem('prop2')).to.be.null
+      expect(ls.getItem("prop2")).to.be.null;
-            expect(ls.getItem('prop3')).to.be.null
+      expect(ls.getItem("prop3")).to.be.null;
-        })
+    });
 
-        cy.get('.ls-btn').click().should(() => {
+    cy.get(".ls-btn")
-            expect(localStorage.getItem('prop1')).to.eq('red')
+      .click()
-            expect(localStorage.getItem('prop2')).to.eq('blue')
+      .should(() => {
-            expect(localStorage.getItem('prop3')).to.eq('magenta')
+        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
+    // Clear key matching string in Local Storage
-        cy.clearLocalStorage('prop1').should((ls) => {
+    cy.clearLocalStorage("prop1").should((ls) => {
-            expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem("prop1")).to.be.null;
-            expect(ls.getItem('prop2')).to.eq('blue')
+      expect(ls.getItem("prop2")).to.eq("blue");
-            expect(ls.getItem('prop3')).to.eq('magenta')
+      expect(ls.getItem("prop3")).to.eq("magenta");
-        })
+    });
 
-        cy.get('.ls-btn').click().should(() => {
+    cy.get(".ls-btn")
-            expect(localStorage.getItem('prop1')).to.eq('red')
+      .click()
-            expect(localStorage.getItem('prop2')).to.eq('blue')
+      .should(() => {
-            expect(localStorage.getItem('prop3')).to.eq('magenta')
+        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
+    // Clear keys matching regex in Local Storage
-        cy.clearLocalStorage(/prop1|2/).should((ls) => {
+    cy.clearLocalStorage(/prop1|2/).should((ls) => {
-            expect(ls.getItem('prop1')).to.be.null
+      expect(ls.getItem("prop1")).to.be.null;
-            expect(ls.getItem('prop2')).to.be.null
+      expect(ls.getItem("prop2")).to.be.null;
-            expect(ls.getItem('prop3')).to.eq('magenta')
+      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', () => {
+context("Location", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/location')
+    cy.visit("https://example.cypress.io/commands/location");
-    })
+  });
 
-    it('cy.hash() - get the current URL hash', () => {
+  it("cy.hash() - get the current URL hash", () => {
-        // https://on.cypress.io/hash
+    // https://on.cypress.io/hash
-        cy.hash().should('be.empty')
+    cy.hash().should("be.empty");
-    })
+  });
 
-    it('cy.location() - get window.location', () => {
+  it("cy.location() - get window.location", () => {
-        // https://on.cypress.io/location
+    // https://on.cypress.io/location
-        cy.location().should((location) => {
+    cy.location().should((location) => {
-            expect(location.hash).to.be.empty
+      expect(location.hash).to.be.empty;
-            expect(location.href).to.eq('https://example.cypress.io/commands/location')
+      expect(location.href).to.eq("https://example.cypress.io/commands/location");
-            expect(location.host).to.eq('example.cypress.io')
+      expect(location.host).to.eq("example.cypress.io");
-            expect(location.hostname).to.eq('example.cypress.io')
+      expect(location.hostname).to.eq("example.cypress.io");
-            expect(location.origin).to.eq('https://example.cypress.io')
+      expect(location.origin).to.eq("https://example.cypress.io");
-            expect(location.pathname).to.eq('/commands/location')
+      expect(location.pathname).to.eq("/commands/location");
-            expect(location.port).to.eq('')
+      expect(location.port).to.eq("");
-            expect(location.protocol).to.eq('https:')
+      expect(location.protocol).to.eq("https:");
-            expect(location.search).to.be.empty
+      expect(location.search).to.be.empty;
-        })
+    });
-    })
+  });
 
-    it('cy.url() - get the current URL', () => {
+  it("cy.url() - get the current URL", () => {
-        // https://on.cypress.io/url
+    // https://on.cypress.io/url
-        cy.url().should('eq', 'https://example.cypress.io/commands/location')
+    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', () => {
+context("Misc", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/misc')
+    cy.visit("https://example.cypress.io/commands/misc");
-    })
+  });
 
-    it('.end() - end the command chain', () => {
+  it(".end() - end the command chain", () => {
-        // https://on.cypress.io/end
+    // https://on.cypress.io/end
 
-        // cy.end is useful when you want to end a chain of commands
+    // cy.end is useful when you want to end a chain of commands
-        // and force Cypress to re-query from the root element
+    // and force Cypress to re-query from the root element
-        cy.get('.misc-table').within(() => {
+    cy.get(".misc-table").within(() => {
-            // ends the current chain and yields null
+      // ends the current chain and yields null
-            cy.contains('Cheryl').click().end()
+      cy.contains("Cheryl").click().end();
 
-            // queries the entire table again
+      // queries the entire table again
-            cy.contains('Charles').click()
+      cy.contains("Charles").click();
-        })
+    });
-    })
+  });
 
-    it('cy.exec() - execute a system command', () => {
+  it("cy.exec() - execute a system command", () => {
-        // execute a system command.
+    // execute a system command.
-        // so you can take actions necessary for
+    // so you can take actions necessary for
-        // your test outside the scope of Cypress.
+    // your test outside the scope of Cypress.
-        // https://on.cypress.io/exec
+    // https://on.cypress.io/exec
 
-        // we can use Cypress.platform string to
+    // we can use Cypress.platform string to
-        // select appropriate command
+    // select appropriate command
-        // https://on.cypress/io/platform
+    // https://on.cypress/io/platform
-        cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`)
+    cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`);
 
-        // on CircleCI Windows build machines we have a failure to run bash shell
+    // on CircleCI Windows build machines we have a failure to run bash shell
-        // https://github.com/cypress-io/cypress/issues/5169
+    // https://github.com/cypress-io/cypress/issues/5169
-        // so skip some of the tests by passing flag "--env circle=true"
+    // so skip some of the tests by passing flag "--env circle=true"
-        const isCircleOnWindows = Cypress.platform === 'win32' && Cypress.env('circle')
+    const isCircleOnWindows = Cypress.platform === "win32" && Cypress.env("circle");
 
-        if (isCircleOnWindows) {
+    if (isCircleOnWindows) {
-            cy.log('Skipping test on CircleCI')
+      cy.log("Skipping test on CircleCI");
 
-            return
+      return;
-        }
+    }
 
-        // cy.exec problem on Shippable CI
+    // cy.exec problem on Shippable CI
-        // https://github.com/cypress-io/cypress/issues/6718
+    // https://github.com/cypress-io/cypress/issues/6718
-        const isShippable = Cypress.platform === 'linux' && Cypress.env('shippable')
+    const isShippable = Cypress.platform === "linux" && Cypress.env("shippable");
 
-        if (isShippable) {
+    if (isShippable) {
-            cy.log('Skipping test on ShippableCI')
+      cy.log("Skipping test on ShippableCI");
 
-            return
+      return;
-        }
+    }
 
-        cy.exec('echo Jane Lane')
+    cy.exec("echo Jane Lane").its("stdout").should("contain", "Jane Lane");
-            .its('stdout').should('contain', 'Jane Lane')
 
-        if (Cypress.platform === 'win32') {
+    if (Cypress.platform === "win32") {
-            cy.exec('print cypress.json')
+      cy.exec("print cypress.json").its("stderr").should("be.empty");
-                .its('stderr').should('be.empty')
+    } else {
-        } else {
+      cy.exec("cat cypress.json").its("stderr").should("be.empty");
-            cy.exec('cat cypress.json')
-                .its('stderr').should('be.empty')
 
-            cy.exec('pwd')
+      cy.exec("pwd").its("code").should("eq", 0);
-                .its('code').should('eq', 0)
+    }
-        }
+  });
-    })
 
-    it('cy.focused() - get the DOM element that has focus', () => {
+  it("cy.focused() - get the DOM element that has focus", () => {
-        // https://on.cypress.io/focused
+    // https://on.cypress.io/focused
-        cy.get('.misc-form').find('#name').click()
+    cy.get(".misc-form").find("#name").click();
-        cy.focused().should('have.id', 'name')
+    cy.focused().should("have.id", "name");
 
-        cy.get('.misc-form').find('#description').click()
+    cy.get(".misc-form").find("#description").click();
-        cy.focused().should('have.id', 'description')
+    cy.focused().should("have.id", "description");
-    })
+  });
 
-    context('Cypress.Screenshot', function () {
+  context("Cypress.Screenshot", function () {
-        it('cy.screenshot() - take a screenshot', () => {
+    it("cy.screenshot() - take a screenshot", () => {
-            // https://on.cypress.io/screenshot
+      // https://on.cypress.io/screenshot
-            cy.screenshot('my-image')
+      cy.screenshot("my-image");
-        })
+    });
 
-        it('Cypress.Screenshot.defaults() - change default config of screenshots', function () {
+    it("Cypress.Screenshot.defaults() - change default config of screenshots", function () {
-            Cypress.Screenshot.defaults({
+      Cypress.Screenshot.defaults({
-                blackout: ['.foo'],
+        blackout: [".foo"],
-                capture: 'viewport',
+        capture: "viewport",
-                clip: {x: 0, y: 0, width: 200, height: 200},
+        clip: { x: 0, y: 0, width: 200, height: 200 },
-                scale: false,
+        scale: false,
-                disableTimersAndAnimations: true,
+        disableTimersAndAnimations: true,
-                screenshotOnRunFailure: true,
+        screenshotOnRunFailure: true,
-                onBeforeScreenshot() {
+        onBeforeScreenshot() {},
-                },
+        onAfterScreenshot() {}
-                onAfterScreenshot() {
+      });
-                },
+    });
-            })
+  });
-        })
-    })
 
-    it('cy.wrap() - wrap an object', () => {
+  it("cy.wrap() - wrap an object", () => {
-        // https://on.cypress.io/wrap
+    // https://on.cypress.io/wrap
-        cy.wrap({foo: 'bar'})
+    cy.wrap({ foo: "bar" }).should("have.property", "foo").and("include", "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', () => {
+context("Navigation", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io')
+    cy.visit("https://example.cypress.io");
-        cy.get('.navbar-nav').contains('Commands').click()
+    cy.get(".navbar-nav").contains("Commands").click();
-        cy.get('.dropdown-menu').contains('Navigation').click()
+    cy.get(".dropdown-menu").contains("Navigation").click();
-    })
+  });
 
-    it('cy.go() - go back or forward in the browser\'s history', () => {
+  it("cy.go() - go back or forward in the browser's history", () => {
-        // https://on.cypress.io/go
+    // https://on.cypress.io/go
 
-        cy.location('pathname').should('include', 'navigation')
+    cy.location("pathname").should("include", "navigation");
 
-        cy.go('back')
+    cy.go("back");
-        cy.location('pathname').should('not.include', 'navigation')
+    cy.location("pathname").should("not.include", "navigation");
 
-        cy.go('forward')
+    cy.go("forward");
-        cy.location('pathname').should('include', 'navigation')
+    cy.location("pathname").should("include", "navigation");
 
-        // clicking back
+    // clicking back
-        cy.go(-1)
+    cy.go(-1);
-        cy.location('pathname').should('not.include', 'navigation')
+    cy.location("pathname").should("not.include", "navigation");
 
-        // clicking forward
+    // clicking forward
-        cy.go(1)
+    cy.go(1);
-        cy.location('pathname').should('include', 'navigation')
+    cy.location("pathname").should("include", "navigation");
-    })
+  });
 
-    it('cy.reload() - reload the page', () => {
+  it("cy.reload() - reload the page", () => {
-        // https://on.cypress.io/reload
+    // https://on.cypress.io/reload
-        cy.reload()
+    cy.reload();
 
-        // reload the page without using the cache
+    // reload the page without using the cache
-        cy.reload(true)
+    cy.reload(true);
-    })
+  });
 
-    it('cy.visit() - visit a remote url', () => {
+  it("cy.visit() - visit a remote url", () => {
-        // https://on.cypress.io/visit
+    // 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
+    // Pass options to the visit
-        cy.visit('https://example.cypress.io/commands/navigation', {
+    cy.visit("https://example.cypress.io/commands/navigation", {
-            timeout: 50000, // increase total time for the visit to resolve
+      timeout: 50000, // increase total time for the visit to resolve
-            onBeforeLoad(contentWindow) {
+      onBeforeLoad(contentWindow) {
-                // contentWindow is the remote page's window object
+        // contentWindow is the remote page's window object
-                expect(typeof contentWindow === 'object').to.be.true
+        expect(typeof contentWindow === "object").to.be.true;
-            },
+      },
-            onLoad(contentWindow) {
+      onLoad(contentWindow) {
-                // contentWindow is the remote page's window object
+        // contentWindow is the remote page's window object
-                expect(typeof contentWindow === 'object').to.be.true
+        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', () => {
+context("Network Requests", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/network-requests')
+    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', () => {
+        // we don't know the exact post id - only that it will be > 100
-        // https://on.cypress.io/request
+        // since JSONPlaceholder has built-in 100 posts
-        cy.request('https://jsonplaceholder.cypress.io/comments')
+        expect(response.body).property("id").to.be.a("number").and.to.be.gt(100);
-            .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', () => {
+        // we don't know the user id here - since it was in above closure
-        cy.request('https://jsonplaceholder.cypress.io/comments')
+        // so in this test just confirm that the property is there
-            .then((response) => {
+        expect(response.body).property("userId").to.be.a("number");
-                // 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', () => {
+  it("cy.request() - save response in the shared test context", () => {
-        // will execute request
+    // https://on.cypress.io/variables-and-aliases
-        // https://jsonplaceholder.cypress.io/comments?postId=1&id=3
+    cy.request("https://jsonplaceholder.cypress.io/users?_limit=1")
-        cy.request({
+      .its("body")
-            url: 'https://jsonplaceholder.cypress.io/comments',
+      .its("0") // yields the first element of the returned list
-            qs: {
+      .as("user") // saves the object in the test context
-                postId: 1,
+      .then(function () {
-                id: 3,
+        // 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')
+          .its("body")
-            .should('be.an', 'array')
+          .as("post"); // save the new post from the response
-            .and('have.length', 1)
+      })
-            .its('0') // yields first element of the array
+      .then(function () {
-            .should('contain', {
+        // When this callback runs, both "cy.request" API commands have finished
-                postId: 1,
+        // and the test context has "user" and "post" objects set.
-                id: 3,
+        // 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', () => {
+  it("cy.intercept() - route responses to matching requests", () => {
-        // first, let's find out the userId of the first user we have
+    // https://on.cypress.io/intercept
-        cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
-            .its('body') // yields the response object
-            .its('0') // yields the first element of the returned list
-            // the above two commands its('body').its('0')
-            // can be written as its('body.0')
-            // if you do not care about TypeScript checks
-            .then((user) => {
-                expect(user).property('id').to.be.a('number')
-                // make a new post on behalf of the user
-                cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
-                    userId: user.id,
-                    title: 'Cypress Test Runner',
-                    body: 'Fast, easy and reliable testing for anything that runs in a browser.',
-                })
-            })
-            // note that the value here is the returned value of the 2nd request
-            // which is the new post object
-            .then((response) => {
-                expect(response).property('status').to.equal(201) // new entity created
-                expect(response).property('body').to.contain({
-                    title: 'Cypress Test Runner',
-                })
 
-                // we don't know the exact post id - only that it will be > 100
+    let message = "whoa, this comment does not exist";
-                // since JSONPlaceholder has built-in 100 posts
-                expect(response.body).property('id').to.be.a('number')
-                    .and.to.be.gt(100)
 
-                // we don't know the user id here - since it was in above closure
+    // Listen to GET to comments/1
-                // so in this test just confirm that the property is there
+    cy.intercept("GET", "**/comments/*").as("getComment");
-                expect(response.body).property('userId').to.be.a('number')
-            })
-    })
 
-    it('cy.request() - save response in the shared test context', () => {
+    // we have code that gets a comment when
-        // https://on.cypress.io/variables-and-aliases
+    // the button is clicked in scripts.js
-        cy.request('https://jsonplaceholder.cypress.io/users?_limit=1')
+    cy.get(".network-btn").click();
-            .its('body').its('0') // yields the first element of the returned list
-            .as('user') // saves the object in the test context
-            .then(function () {
-                // NOTE 👀
-                //  By the time this callback runs the "as('user')" command
-                //  has saved the user object in the test context.
-                //  To access the test context we need to use
-                //  the "function () { ... }" callback form,
-                //  otherwise "this" points at a wrong or undefined object!
-                cy.request('POST', 'https://jsonplaceholder.cypress.io/posts', {
-                    userId: this.user.id,
-                    title: 'Cypress Test Runner',
-                    body: 'Fast, easy and reliable testing for anything that runs in a browser.',
-                })
-                    .its('body').as('post') // save the new post from the response
-            })
-            .then(function () {
-                // When this callback runs, both "cy.request" API commands have finished
-                // and the test context has "user" and "post" objects set.
-                // Let's verify them.
-                expect(this.post, 'post has the right user id').property('userId').to.equal(this.user.id)
-            })
-    })
 
-    it('cy.intercept() - route responses to matching requests', () => {
+    // https://on.cypress.io/wait
-        // https://on.cypress.io/intercept
+    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
+    // we have code that posts a comment when
-        cy.intercept('GET', '**/comments/*').as('getComment')
+    // 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
+    // Stub a response to PUT comments/ ****
-        // the button is clicked in scripts.js
+    cy.intercept(
-        cy.get('.network-btn').click()
+      {
+        method: "PUT",
+        url: "**/comments/*"
+      },
+      {
+        statusCode: 404,
+        body: { error: message },
+        headers: { "access-control-allow-origin": "*" },
+        delayMs: 500
+      }
+    ).as("putComment");
 
-        // https://on.cypress.io/wait
+    // we have code that puts a comment when
-        cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+    // the button is clicked in scripts.js
+    cy.get(".network-put").click();
 
-        // Listen to POST to comments
+    cy.wait("@putComment");
-        cy.intercept('POST', '**/comments').as('postComment')
 
-        // we have code that posts a comment when
+    // our 404 statusCode logic in scripts.js executed
-        // the button is clicked in scripts.js
+    cy.get(".network-put-comment").should("contain", message);
-        cy.get('.network-post').click()
+  });
-        cy.wait('@postComment').should(({request, response}) => {
+});
-            expect(request.body).to.include('email')
-            expect(request.headers).to.have.property('content-type')
-            expect(response && response.body).to.have.property('name', 'Using POST in cy.intercept()')
-        })
-
-        // Stub a response to PUT comments/ ****
-        cy.intercept({
-            method: 'PUT',
-            url: '**/comments/*',
-        }, {
-            statusCode: 404,
-            body: {error: message},
-            headers: {'access-control-allow-origin': '*'},
-            delayMs: 500,
-        }).as('putComment')
-
-        // we have code that puts a comment when
-        // the button is clicked in scripts.js
-        cy.get('.network-put').click()
-
-        cy.wait('@putComment')
-
-        // our 404 statusCode logic in scripts.js executed
-        cy.get('.network-put-comment').should('contain', message)
-    })
-})

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

@@ -1,114 +1,100 @@
 /// <reference types="cypress" />
 
-context('Querying', () => {
+context("Querying", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/querying')
+    cy.visit("https://example.cypress.io/commands/querying");
-    })
+  });
 
-    // The most commonly used query is 'cy.get()', you can
+  // The most commonly used query is 'cy.get()', you can
-    // think of this like the '$' in jQuery
+  // think of this like the '$' in jQuery
 
-    it('cy.get() - query DOM elements', () => {
+  it("cy.get() - query DOM elements", () => {
-        // https://on.cypress.io/get
+    // 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')
+    cy.get("#querying .well>button:first").should("contain", "Button");
-        //              ↲
+    //              ↲
-        // Use CSS selectors just like jQuery
+    // 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
+    // 'cy.get()' yields jQuery object, you can get its attribute
-        // by invoking `.attr()` method
+    // by invoking `.attr()` method
-        cy.get('[data-test-id="test-example"]')
+    cy.get('[data-test-id="test-example"]').invoke("attr", "data-test-id").should("equal", "test-example");
-            .invoke('attr', 'data-test-id')
-            .should('equal', 'test-example')
 
-        // or you can get element's CSS property
+    // or you can get element's CSS property
-        cy.get('[data-test-id="test-example"]')
+    cy.get('[data-test-id="test-example"]').invoke("css", "position").should("equal", "static");
-            .invoke('css', 'position')
-            .should('equal', 'static')
 
-        // or use assertions directly during 'cy.get()'
+    // or use assertions directly during 'cy.get()'
-        // https://on.cypress.io/assertions
+    // https://on.cypress.io/assertions
-        cy.get('[data-test-id="test-example"]')
+    cy.get('[data-test-id="test-example"]')
-            .should('have.attr', 'data-test-id', 'test-example')
+      .should("have.attr", "data-test-id", "test-example")
-            .and('have.css', 'position', 'static')
+      .and("have.css", "position", "static");
-    })
+  });
 
-    it('cy.contains() - query DOM elements with matching content', () => {
+  it("cy.contains() - query DOM elements with matching content", () => {
-        // https://on.cypress.io/contains
+    // https://on.cypress.io/contains
-        cy.get('.query-list')
+    cy.get(".query-list").contains("bananas").should("have.class", "third");
-            .contains('bananas')
-            .should('have.class', 'third')
 
-        // we can pass a regexp to `.contains()`
+    // we can pass a regexp to `.contains()`
-        cy.get('.query-list')
+    cy.get(".query-list").contains(/^b\w+/).should("have.class", "third");
-            .contains(/^b\w+/)
-            .should('have.class', 'third')
 
-        cy.get('.query-list')
+    cy.get(".query-list").contains("apples").should("have.class", "first");
-            .contains('apples')
-            .should('have.class', 'first')
 
-        // passing a selector to contains will
+    // passing a selector to contains will
-        // yield the selector containing the text
+    // yield the selector containing the text
-        cy.get('#querying')
+    cy.get("#querying").contains("ul", "oranges").should("have.class", "query-list");
-            .contains('ul', 'oranges')
-            .should('have.class', 'query-list')
 
-        cy.get('.query-button')
+    cy.get(".query-button").contains("Save Form").should("have.class", "btn");
-            .contains('Save Form')
+  });
-            .should('have.class', 'btn')
-    })
 
-    it('.within() - query DOM elements within a specific element', () => {
+  it(".within() - query DOM elements within a specific element", () => {
-        // https://on.cypress.io/within
+    // https://on.cypress.io/within
-        cy.get('.query-form').within(() => {
+    cy.get(".query-form").within(() => {
-            cy.get('input:first').should('have.attr', 'placeholder', 'Email')
+      cy.get("input:first").should("have.attr", "placeholder", "Email");
-            cy.get('input:last').should('have.attr', 'placeholder', 'Password')
+      cy.get("input:last").should("have.attr", "placeholder", "Password");
-        })
+    });
-    })
+  });
 
-    it('cy.root() - query the root DOM element', () => {
+  it("cy.root() - query the root DOM element", () => {
-        // https://on.cypress.io/root
+    // https://on.cypress.io/root
 
-        // By default, root is the document
+    // By default, root is the document
-        cy.root().should('match', 'html')
+    cy.root().should("match", "html");
 
-        cy.get('.query-ul').within(() => {
+    cy.get(".query-ul").within(() => {
-            // In this within, the root is now the ul DOM element
+      // In this within, the root is now the ul DOM element
-            cy.root().should('have.class', 'query-ul')
+      cy.root().should("have.class", "query-ul");
-        })
+    });
-    })
+  });
 
-    it('best practices - selecting elements', () => {
+  it("best practices - selecting elements", () => {
-        // https://on.cypress.io/best-practices#Selecting-Elements
+    // https://on.cypress.io/best-practices#Selecting-Elements
-        cy.get('[data-cy=best-practices-selecting-elements]').within(() => {
+    cy.get("[data-cy=best-practices-selecting-elements]").within(() => {
-            // Worst - too generic, no context
+      // Worst - too generic, no context
-            cy.get('button').click()
+      cy.get("button").click();
 
-            // Bad. Coupled to styling. Highly subject to change.
+      // Bad. Coupled to styling. Highly subject to change.
-            cy.get('.btn.btn-large').click()
+      cy.get(".btn.btn-large").click();
 
-            // Average. Coupled to the `name` attribute which has HTML semantics.
+      // Average. Coupled to the `name` attribute which has HTML semantics.
-            cy.get('[name=submission]').click()
+      cy.get("[name=submission]").click();
 
-            // Better. But still coupled to styling or JS event listeners.
+      // Better. But still coupled to styling or JS event listeners.
-            cy.get('#main').click()
+      cy.get("#main").click();
 
-            // Slightly better. Uses an ID but also ensures the element
+      // Slightly better. Uses an ID but also ensures the element
-            // has an ARIA role attribute
+      // has an ARIA role attribute
-            cy.get('#main[role=button]').click()
+      cy.get("#main[role=button]").click();
 
-            // Much better. But still coupled to text content that may change.
+      // Much better. But still coupled to text content that may change.
-            cy.contains('Submit').click()
+      cy.contains("Submit").click();
 
-            // Best. Insulated from all changes.
+      // Best. Insulated from all changes.
-            cy.get('[data-cy=submit]').click()
+      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', () => {
+context("Spies, Stubs, and Clock", () => {
-    it('cy.spy() - wrap a method in a spy', () => {
+  it("cy.spy() - wrap a method in a spy", () => {
-        // https://on.cypress.io/spy
+    // https://on.cypress.io/spy
-        cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
 
-        const obj = {
+    const obj = {
-            foo() {
+      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', () => {
+  it("cy.spy() retries until assertions pass", () => {
-        cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
 
-        const obj = {
+    const obj = {
-            /**
+      /**
-             * Prints the argument passed
+       * Prints the argument passed
-             * @param x {any}
+       * @param x {any}
-             */
+       */
-            foo(x) {
+      foo(x) {
-                console.log('obj.foo called with', x)
+        console.log("obj.foo called with", x);
-            },
+      }
-        }
+    };
 
-        cy.spy(obj, 'foo').as('foo')
+    cy.spy(obj, "foo").as("foo");
 
-        setTimeout(() => {
+    setTimeout(() => {
-            obj.foo('first')
+      obj.foo("first");
-        }, 500)
+    }, 500);
 
-        setTimeout(() => {
+    setTimeout(() => {
-            obj.foo('second')
+      obj.foo("second");
-        }, 2500)
+    }, 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', () => {
+  it("cy.stub() - create a stub and/or replace a function with stub", () => {
-        // https://on.cypress.io/stub
+    // https://on.cypress.io/stub
-        cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
 
-        const obj = {
+    const obj = {
-            /**
+      /**
-             * prints both arguments to the console
+       * prints both arguments to the console
-             * @param a {string}
+       * @param a {string}
-             * @param b {string}
+       * @param b {string}
-             */
+       */
-            foo(a, b) {
+      foo(a, b) {
-                console.log('a', a, 'b', 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', () => {
+  it("cy.clock() - control time in the browser", () => {
-        // https://on.cypress.io/clock
+    // https://on.cypress.io/clock
 
-        // create the date in UTC so its always the same
+    // create the date in UTC so its always the same
-        // no matter what local timezone the browser is running in
+    // no matter what local timezone the browser is running in
-        const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
 
-        cy.clock(now)
+    cy.clock(now);
-        cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
-        cy.get('#clock-div').click()
+    cy.get("#clock-div").click().should("have.text", "1489449600");
-            .should('have.text', '1489449600')
+  });
-    })
 
-    it('cy.tick() - move time in the browser', () => {
+  it("cy.tick() - move time in the browser", () => {
-        // https://on.cypress.io/tick
+    // https://on.cypress.io/tick
 
-        // create the date in UTC so its always the same
+    // create the date in UTC so its always the same
-        // no matter what local timezone the browser is running in
+    // no matter what local timezone the browser is running in
-        const now = new Date(Date.UTC(2017, 2, 14)).getTime()
+    const now = new Date(Date.UTC(2017, 2, 14)).getTime();
 
-        cy.clock(now)
+    cy.clock(now);
-        cy.visit('https://example.cypress.io/commands/spies-stubs-clocks')
+    cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
-        cy.get('#tick-div').click()
+    cy.get("#tick-div").click().should("have.text", "1489449600");
-            .should('have.text', '1489449600')
 
-        cy.tick(10000) // 10 seconds passed
+    cy.tick(10000); // 10 seconds passed
-        cy.get('#tick-div').click()
+    cy.get("#tick-div").click().should("have.text", "1489449610");
-            .should('have.text', '1489449610')
+  });
-    })
 
-    it('cy.stub() matches depending on arguments', () => {
+  it("cy.stub() matches depending on arguments", () => {
-        // see all possible matchers at
+    // see all possible matchers at
-        // https://sinonjs.org/releases/latest/matchers/
+    // https://sinonjs.org/releases/latest/matchers/
-        const greeter = {
+    const greeter = {
-            /**
+      /**
-             * Greets a person
+       * Greets a person
-             * @param {string} name
+       * @param {string} name
-             */
+       */
-            greet(name) {
+      greet(name) {
-                return `Hello, ${name}!`
+        return `Hello, ${name}!`;
-            },
+      }
-        }
+    };
 
-        cy.stub(greeter, 'greet')
+    cy.stub(greeter, "greet")
-            .callThrough() // if you want non-matched calls to call the real method
+      .callThrough() // if you want non-matched calls to call the real method
-            .withArgs(Cypress.sinon.match.string).returns('Hi')
+      .withArgs(Cypress.sinon.match.string)
-            .withArgs(Cypress.sinon.match.number).throws(new Error('Invalid name'))
+      .returns("Hi")
+      .withArgs(Cypress.sinon.match.number)
+      .throws(new Error("Invalid name"));
 
-        expect(greeter.greet('World')).to.equal('Hi')
+    expect(greeter.greet("World")).to.equal("Hi");
-        // @ts-ignore
+    // @ts-ignore
-        expect(() => greeter.greet(42)).to.throw('Invalid name')
+    expect(() => greeter.greet(42)).to.throw("Invalid name");
-        expect(greeter.greet).to.have.been.calledTwice
+    expect(greeter.greet).to.have.been.calledTwice;
 
-        // non-matched calls goes the actual method
+    // non-matched calls goes the actual method
-        // @ts-ignore
+    // @ts-ignore
-        expect(greeter.greet()).to.equal('Hello, undefined!')
+    expect(greeter.greet()).to.equal("Hello, undefined!");
-    })
+  });
 
-    it('matches call arguments using Sinon matchers', () => {
+  it("matches call arguments using Sinon matchers", () => {
-        // see all possible matchers at
+    // see all possible matchers at
-        // https://sinonjs.org/releases/latest/matchers/
+    // https://sinonjs.org/releases/latest/matchers/
-        const calculator = {
+    const calculator = {
-            /**
+      /**
-             * returns the sum of two arguments
+       * returns the sum of two arguments
-             * @param a {number}
+       * @param a {number}
-             * @param b {number}
+       * @param b {number}
-             */
+       */
-            add(a, b) {
+      add(a, b) {
-                return 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
+    // if we want to assert the exact values used during the call
-        expect(spy).to.be.calledWith(2, 3)
+    expect(spy).to.be.calledWith(2, 3);
 
-        // let's confirm "add" method was called with two numbers
+    // let's confirm "add" method was called with two numbers
-        expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number)
+    expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number);
 
-        // alternatively, provide the value to match
+    // alternatively, provide the value to match
-        expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3))
+    expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3));
 
-        // match any value
+    // match any value
-        expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3)
+    expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3);
 
-        // match any value from a list
+    // match any value from a list
-        expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3)
+    expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3);
 
-        /**
+    /**
-         * Returns true if the given number is event
+     * Returns true if the given number is event
-         * @param {number} x
+     * @param {number} x
-         */
+     */
-        const isEven = (x) => x % 2 === 0
+    const isEven = (x) => x % 2 === 0;
 
-        // expect the value to pass a custom predicate function
+    // expect the value to pass a custom predicate function
-        // the second argument to "sinon.match(predicate, message)" is
+    // the second argument to "sinon.match(predicate, message)" is
-        // shown if the predicate does not pass and assertion fails
+    // shown if the predicate does not pass and assertion fails
-        expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, 'isEven'), 3)
+    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
+     * Returns a function that checks if a given number is larger than the limit
-         * @param {number} limit
+     * @param {number} limit
-         * @returns {(x: number) => boolean}
+     * @returns {(x: number) => boolean}
-         */
+     */
-        const isGreaterThan = (limit) => (x) => x > limit
+    const isGreaterThan = (limit) => (x) => x > limit;
 
-        /**
+    /**
-         * Returns a function that checks if a given number is less than the limit
+     * Returns a function that checks if a given number is less than the limit
-         * @param {number} limit
+     * @param {number} limit
-         * @returns {(x: number) => boolean}
+     * @returns {(x: number) => boolean}
-         */
+     */
-        const isLessThan = (limit) => (x) => x < limit
+    const isLessThan = (limit) => (x) => x < limit;
 
-        // you can combine several matchers using "and", "or"
+    // you can combine several matchers using "and", "or"
-        expect(spy).to.be.calledWith(
+    expect(spy).to.be.calledWith(
-            Cypress.sinon.match.number,
+      Cypress.sinon.match.number,
-            Cypress.sinon.match(isGreaterThan(2), '> 2').and(Cypress.sinon.match(isLessThan(4), '< 4')),
+      Cypress.sinon.match(isGreaterThan(2), "> 2").and(Cypress.sinon.match(isLessThan(4), "< 4"))
-        )
+    );
 
-        expect(spy).to.be.calledWith(
+    expect(spy).to.be.calledWith(
-            Cypress.sinon.match.number,
+      Cypress.sinon.match.number,
-            Cypress.sinon.match(isGreaterThan(200), '> 200').or(Cypress.sinon.match(3)),
+      Cypress.sinon.match(isGreaterThan(200), "> 200").or(Cypress.sinon.match(3))
-        )
+    );
 
-        // matchers can be used from BDD assertions
+    // matchers can be used from BDD assertions
-        cy.get('@add').should('have.been.calledWith',
+    cy.get("@add").should("have.been.calledWith", Cypress.sinon.match.number, Cypress.sinon.match(3));
-            Cypress.sinon.match.number, Cypress.sinon.match(3))
 
-        // you can alias matchers for shorter test code
+    // you can alias matchers for shorter test code
-        const {match: M} = Cypress.sinon
+    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', () => {
+context("Traversal", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/traversal')
+    cy.visit("https://example.cypress.io/commands/traversal");
-    })
+  });
 
-    it('.children() - get child DOM elements', () => {
+  it(".children() - get child DOM elements", () => {
-        // https://on.cypress.io/children
+    // https://on.cypress.io/children
-        cy.get('.traversal-breadcrumb')
+    cy.get(".traversal-breadcrumb").children(".active").should("contain", "Data");
-            .children('.active')
+  });
-            .should('contain', 'Data')
-    })
 
-    it('.closest() - get closest ancestor DOM element', () => {
+  it(".closest() - get closest ancestor DOM element", () => {
-        // https://on.cypress.io/closest
+    // https://on.cypress.io/closest
-        cy.get('.traversal-badge')
+    cy.get(".traversal-badge").closest("ul").should("have.class", "list-group");
-            .closest('ul')
+  });
-            .should('have.class', 'list-group')
-    })
 
-    it('.eq() - get a DOM element at a specific index', () => {
+  it(".eq() - get a DOM element at a specific index", () => {
-        // https://on.cypress.io/eq
+    // https://on.cypress.io/eq
-        cy.get('.traversal-list>li')
+    cy.get(".traversal-list>li").eq(1).should("contain", "siamese");
-            .eq(1).should('contain', 'siamese')
+  });
-    })
 
-    it('.filter() - get DOM elements that match the selector', () => {
+  it(".filter() - get DOM elements that match the selector", () => {
-        // https://on.cypress.io/filter
+    // https://on.cypress.io/filter
-        cy.get('.traversal-nav>li')
+    cy.get(".traversal-nav>li").filter(".active").should("contain", "About");
-            .filter('.active').should('contain', 'About')
+  });
-    })
 
-    it('.find() - get descendant DOM elements of the selector', () => {
+  it(".find() - get descendant DOM elements of the selector", () => {
-        // https://on.cypress.io/find
+    // https://on.cypress.io/find
-        cy.get('.traversal-pagination')
+    cy.get(".traversal-pagination").find("li").find("a").should("have.length", 7);
-            .find('li').find('a')
+  });
-            .should('have.length', 7)
-    })
 
-    it('.first() - get first DOM element', () => {
+  it(".first() - get first DOM element", () => {
-        // https://on.cypress.io/first
+    // https://on.cypress.io/first
-        cy.get('.traversal-table td')
+    cy.get(".traversal-table td").first().should("contain", "1");
-            .first().should('contain', '1')
+  });
-    })
 
-    it('.last() - get last DOM element', () => {
+  it(".last() - get last DOM element", () => {
-        // https://on.cypress.io/last
+    // https://on.cypress.io/last
-        cy.get('.traversal-buttons .btn')
+    cy.get(".traversal-buttons .btn").last().should("contain", "Submit");
-            .last().should('contain', 'Submit')
+  });
-    })
 
-    it('.next() - get next sibling DOM element', () => {
+  it(".next() - get next sibling DOM element", () => {
-        // https://on.cypress.io/next
+    // https://on.cypress.io/next
-        cy.get('.traversal-ul')
+    cy.get(".traversal-ul").contains("apples").next().should("contain", "oranges");
-            .contains('apples').next().should('contain', 'oranges')
+  });
-    })
 
-    it('.nextAll() - get all next sibling DOM elements', () => {
+  it(".nextAll() - get all next sibling DOM elements", () => {
-        // https://on.cypress.io/nextall
+    // https://on.cypress.io/nextall
-        cy.get('.traversal-next-all')
+    cy.get(".traversal-next-all").contains("oranges").nextAll().should("have.length", 3);
-            .contains('oranges')
+  });
-            .nextAll().should('have.length', 3)
-    })
 
-    it('.nextUntil() - get next sibling DOM elements until next el', () => {
+  it(".nextUntil() - get next sibling DOM elements until next el", () => {
-        // https://on.cypress.io/nextuntil
+    // https://on.cypress.io/nextuntil
-        cy.get('#veggies')
+    cy.get("#veggies").nextUntil("#nuts").should("have.length", 3);
-            .nextUntil('#nuts').should('have.length', 3)
+  });
-    })
 
-    it('.not() - remove DOM elements from set of DOM elements', () => {
+  it(".not() - remove DOM elements from set of DOM elements", () => {
-        // https://on.cypress.io/not
+    // https://on.cypress.io/not
-        cy.get('.traversal-disabled .btn')
+    cy.get(".traversal-disabled .btn").not("[disabled]").should("not.contain", "Disabled");
-            .not('[disabled]').should('not.contain', 'Disabled')
+  });
-    })
 
-    it('.parent() - get parent DOM element from DOM elements', () => {
+  it(".parent() - get parent DOM element from DOM elements", () => {
-        // https://on.cypress.io/parent
+    // https://on.cypress.io/parent
-        cy.get('.traversal-mark')
+    cy.get(".traversal-mark").parent().should("contain", "Morbi leo risus");
-            .parent().should('contain', 'Morbi leo risus')
+  });
-    })
 
-    it('.parents() - get parent DOM elements from DOM elements', () => {
+  it(".parents() - get parent DOM elements from DOM elements", () => {
-        // https://on.cypress.io/parents
+    // https://on.cypress.io/parents
-        cy.get('.traversal-cite')
+    cy.get(".traversal-cite").parents().should("match", "blockquote");
-            .parents().should('match', 'blockquote')
+  });
-    })
 
-    it('.parentsUntil() - get parent DOM elements from DOM elements until el', () => {
+  it(".parentsUntil() - get parent DOM elements from DOM elements until el", () => {
-        // https://on.cypress.io/parentsuntil
+    // https://on.cypress.io/parentsuntil
-        cy.get('.clothes-nav')
+    cy.get(".clothes-nav").find(".active").parentsUntil(".clothes-nav").should("have.length", 2);
-            .find('.active')
+  });
-            .parentsUntil('.clothes-nav')
-            .should('have.length', 2)
-    })
 
-    it('.prev() - get previous sibling DOM element', () => {
+  it(".prev() - get previous sibling DOM element", () => {
-        // https://on.cypress.io/prev
+    // https://on.cypress.io/prev
-        cy.get('.birds').find('.active')
+    cy.get(".birds").find(".active").prev().should("contain", "Lorikeets");
-            .prev().should('contain', 'Lorikeets')
+  });
-    })
 
-    it('.prevAll() - get all previous sibling DOM elements', () => {
+  it(".prevAll() - get all previous sibling DOM elements", () => {
-        // https://on.cypress.io/prevall
+    // https://on.cypress.io/prevall
-        cy.get('.fruits-list').find('.third')
+    cy.get(".fruits-list").find(".third").prevAll().should("have.length", 2);
-            .prevAll().should('have.length', 2)
+  });
-    })
 
-    it('.prevUntil() - get all previous sibling DOM elements until el', () => {
+  it(".prevUntil() - get all previous sibling DOM elements until el", () => {
-        // https://on.cypress.io/prevuntil
+    // https://on.cypress.io/prevuntil
-        cy.get('.foods-list').find('#nuts')
+    cy.get(".foods-list").find("#nuts").prevUntil("#veggies").should("have.length", 3);
-            .prevUntil('#veggies').should('have.length', 3)
+  });
-    })
 
-    it('.siblings() - get all sibling DOM elements', () => {
+  it(".siblings() - get all sibling DOM elements", () => {
-        // https://on.cypress.io/siblings
+    // https://on.cypress.io/siblings
-        cy.get('.traversal-pills .active')
+    cy.get(".traversal-pills .active").siblings().should("have.length", 2);
-            .siblings().should('have.length', 2)
+  });
-    })
+});
-})

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

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

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

@@ -1,59 +1,59 @@
 /// <reference types="cypress" />
 
-context('Viewport', () => {
+context("Viewport", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/viewport')
+    cy.visit("https://example.cypress.io/commands/viewport");
-    })
+  });
 
-    it('cy.viewport() - set the viewport size and dimension', () => {
+  it("cy.viewport() - set the viewport size and dimension", () => {
-        // https://on.cypress.io/viewport
+    // https://on.cypress.io/viewport
 
-        cy.get('#navbar').should('be.visible')
+    cy.get("#navbar").should("be.visible");
-        cy.viewport(320, 480)
+    cy.viewport(320, 480);
 
-        // the navbar should have collapse since our screen is smaller
+    // the navbar should have collapse since our screen is smaller
-        cy.get('#navbar').should('not.be.visible')
+    cy.get("#navbar").should("not.be.visible");
-        cy.get('.navbar-toggle').should('be.visible').click()
+    cy.get(".navbar-toggle").should("be.visible").click();
-        cy.get('.nav').find('a').should('be.visible')
+    cy.get(".nav").find("a").should("be.visible");
 
-        // lets see what our app looks like on a super large screen
+    // lets see what our app looks like on a super large screen
-        cy.viewport(2999, 2999)
+    cy.viewport(2999, 2999);
 
-        // cy.viewport() accepts a set of preset sizes
+    // cy.viewport() accepts a set of preset sizes
-        // to easily set the screen to a device's width and height
+    // 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
+    // We added a cy.wait() between each viewport change so you can see
-        // the change otherwise it is a little too fast to see :)
+    // the change otherwise it is a little too fast to see :)
 
-        cy.viewport('macbook-15')
+    cy.viewport("macbook-15");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('macbook-13')
+    cy.viewport("macbook-13");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('macbook-11')
+    cy.viewport("macbook-11");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('ipad-2')
+    cy.viewport("ipad-2");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('ipad-mini')
+    cy.viewport("ipad-mini");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('iphone-6+')
+    cy.viewport("iphone-6+");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('iphone-6')
+    cy.viewport("iphone-6");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('iphone-5')
+    cy.viewport("iphone-5");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('iphone-4')
+    cy.viewport("iphone-4");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('iphone-3')
+    cy.viewport("iphone-3");
-        cy.wait(200)
+    cy.wait(200);
 
-        // cy.viewport() accepts an orientation for all presets
+    // cy.viewport() accepts an orientation for all presets
-        // the default orientation is 'portrait'
+    // the default orientation is 'portrait'
-        cy.viewport('ipad-2', 'portrait')
+    cy.viewport("ipad-2", "portrait");
-        cy.wait(200)
+    cy.wait(200);
-        cy.viewport('iphone-4', 'landscape')
+    cy.viewport("iphone-4", "landscape");
-        cy.wait(200)
+    cy.wait(200);
 
-        // The viewport will be reset back to the default dimensions
+    // The viewport will be reset back to the default dimensions
-        // in between tests (the  default can be set in cypress.json)
+    // 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', () => {
+context("Waiting", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/waiting')
+    cy.visit("https://example.cypress.io/commands/waiting");
-    })
+  });
-    // BE CAREFUL of adding unnecessary wait times.
+  // BE CAREFUL of adding unnecessary wait times.
-    // https://on.cypress.io/best-practices#Unnecessary-Waiting
+  // https://on.cypress.io/best-practices#Unnecessary-Waiting
 
-    // https://on.cypress.io/wait
+  // https://on.cypress.io/wait
-    it('cy.wait() - wait for a specific amount of time', () => {
+  it("cy.wait() - wait for a specific amount of time", () => {
-        cy.get('.wait-input1').type('Wait 1000ms after typing')
+    cy.get(".wait-input1").type("Wait 1000ms after typing");
-        cy.wait(1000)
+    cy.wait(1000);
-        cy.get('.wait-input2').type('Wait 1000ms after typing')
+    cy.get(".wait-input2").type("Wait 1000ms after typing");
-        cy.wait(1000)
+    cy.wait(1000);
-        cy.get('.wait-input3').type('Wait 1000ms after typing')
+    cy.get(".wait-input3").type("Wait 1000ms after typing");
-        cy.wait(1000)
+    cy.wait(1000);
-    })
+  });
 
-    it('cy.wait() - wait for a specific route', () => {
+  it("cy.wait() - wait for a specific route", () => {
-        // Listen to GET to comments/1
+    // Listen to GET to comments/1
-        cy.intercept('GET', '**/comments/*').as('getComment')
+    cy.intercept("GET", "**/comments/*").as("getComment");
 
-        // we have code that gets a comment when
+    // we have code that gets a comment when
-        // the button is clicked in scripts.js
+    // the button is clicked in scripts.js
-        cy.get('.network-btn').click()
+    cy.get(".network-btn").click();
 
-        // wait for GET comments/1
+    // wait for GET comments/1
-        cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])
+    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', () => {
+context("Window", () => {
-    beforeEach(() => {
+  beforeEach(() => {
-        cy.visit('https://example.cypress.io/commands/window')
+    cy.visit("https://example.cypress.io/commands/window");
-    })
+  });
 
-    it('cy.window() - get the global window object', () => {
+  it("cy.window() - get the global window object", () => {
-        // https://on.cypress.io/window
+    // https://on.cypress.io/window
-        cy.window().should('have.property', 'top')
+    cy.window().should("have.property", "top");
-    })
+  });
 
-    it('cy.document() - get the document object', () => {
+  it("cy.document() - get the document object", () => {
-        // https://on.cypress.io/document
+    // https://on.cypress.io/document
-        cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
+    cy.document().should("have.property", "charset").and("eq", "UTF-8");
-    })
+  });
 
-    it('cy.title() - get the title', () => {
+  it("cy.title() - get the title", () => {
-        // https://on.cypress.io/title
+    // https://on.cypress.io/title
-        cy.title().should('include', 'Kitchen Sink')
+    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
+  // `on` is used to hook into various events Cypress emits
-    // `config` is the resolved Cypress config
+  // `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": [
+    "types": ["cypress"]
-      "cypress"
-    ]
   },
-  "include": [
+  "include": ["**/*.*"]
-    "**/*.*"
-  ]
 }

client/dev-dist/registerSW.js

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

client/dev-dist/sw.js

@@ -21,22 +21,20 @@ if (!self.define) {
 
   const singleRequire = (uri, parentUri) => {
     uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
+    return (
-      
+      registry[uri] ||
-        new Promise(resolve => {
+      new Promise((resolve) => {
-          if ("document" in self) {
+        if ("document" in self) {
-            const script = document.createElement("script");
+          const script = document.createElement("script");
-            script.src = uri;
+          script.src = uri;
-            script.onload = resolve;
+          script.onload = resolve;
-            document.head.appendChild(script);
+          document.head.appendChild(script);
-          } else {
+        } else {
-            nextDefineUri = uri;
+          nextDefineUri = uri;
-            importScripts(uri);
+          importScripts(uri);
-            resolve();
+          resolve();
-          }
+        }
-        })
+      }).then(() => {
-      
-      .then(() => {
         let promise = registry[uri];
         if (!promise) {
           throw new Error(`Module ${uri} didn’t register its module`);
@@ -53,21 +51,20 @@ if (!self.define) {
       return;
     }
     let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
+    const require = (depUri) => singleRequire(depUri, uri);
     const specialDeps = {
       module: { uri },
       exports,
       require
     };
-    registry[uri] = Promise.all(depsNames.map(
+    registry[uri] = Promise.all(depsNames.map((depName) => specialDeps[depName] || require(depName))).then((deps) => {
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
       factory(...deps);
       return exports;
     });
   };
 }
-define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
+define(["./workbox-b5f7729d"], function (workbox) {
+  "use strict";
 
   self.skipWaiting();
   workbox.clientsClaim();
@@ -77,16 +74,23 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
    * requests for URLs in the manifest.
    * See https://goo.gl/S9QRab
    */
-  workbox.precacheAndRoute([{
+  workbox.precacheAndRoute(
-    "url": "registerSW.js",
+    [
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
+      {
-  }, {
+        url: "registerSW.js",
-    "url": "index.html",
+        revision: "3ca0b8505b4bec776b69afdba2768812"
-    "revision": "0.sa702m4aq68"
+      },
-  }], {});
+      {
+        url: "index.html",
+        revision: "0.sa702m4aq68"
+      }
+    ],
+    {}
+  );
   workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+  workbox.registerRoute(
-    allowlist: [/^\/$/]
+    new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-  }));
+      allowlist: [/^\/$/]
-
+    })
-}));
+  );
+});

client/package.json

@@ -12,50 +12,36 @@
     "@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.2.1",
     "@sentry/cli": "^2.28.6",
-    "@sentry/react": "^7.102.1",
+    "@sentry/react": "^7.104.0",
-    "@sentry/tracing": "^7.102.1",
     "@splitsoftware/splitio-react": "^1.11.0",
     "@tanem/react-nprogress": "^5.0.51",
-    "@vitejs/plugin-legacy": "^5.3.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "antd": "^5.15.3",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "antd": "^5.14.2",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "axios": "^1.6.7",
-    "consola": "^3.2.3",
     "dayjs": "^1.11.10",
     "dayjs-business-days2": "^1.2.2",
     "dinero.js": "^1.9.1",
     "dotenv": "^16.4.5",
-    "enquire-js": "^0.2.1",
     "env-cmd": "^10.1.0",
-    "esbuild": "^0.20.0",
     "exifr": "^7.1.3",
-    "firebase": "^10.8.0",
+    "firebase": "^10.8.1",
     "graphql": "^16.6.0",
     "i18next": "^23.10.0",
     "i18next-browser-languagedetector": "^7.0.2",
-    "jsoneditor": "^10.0.1",
-    "jsreport-browser-client-dist": "^1.3.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",
+    "query-string": "^9.0.0",
-    "rc-queue-anim": "^2.0.0",
-    "rc-scroll-anim": "^2.7.6",
     "react": "^18.2.0",
-    "react-big-calendar": "^1.10.3",
+    "react-big-calendar": "^1.11.0",
     "react-color": "^2.19.3",
     "react-cookie": "^7.1.0",
     "react-dom": "^18.2.0",
@@ -65,17 +51,17 @@
     "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",
     "react-image-lightbox": "^5.1.4",
-    "react-intersection-observer": "^9.8.1",
+    "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.1",
+    "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.12.1",
+    "recharts": "^2.12.2",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
@@ -86,17 +72,15 @@
     "styled-components": "^6.1.8",
     "subscriptions-transport-ws": "^0.11.0",
     "terser-webpack-plugin": "^5.3.10",
-    "vite-plugin-compression": "^0.5.1",
+    "userpilot": "^1.3.1",
     "vite-plugin-ejs": "^1.7.0",
-    "vite-plugin-svgr": "^4.2.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",
+    "workbox-strategies": "^7.0.0"
-    "yauzl": "^3.1.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -139,10 +123,13 @@
   "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",
     "@babel/preset-react": "^7.23.3",
-    "@dotenvx/dotenvx": "^0.15.0",
+    "@dotenvx/dotenvx": "^0.15.4",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@sentry/webpack-plugin": "^2.14.2",
@@ -151,9 +138,10 @@
     "@testing-library/cypress": "^10.0.1",
     "browserslist": "^4.22.3",
     "browserslist-to-esbuild": "^2.1.1",
-    "craco-less": "^3.0.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",
@@ -162,6 +150,7 @@
     "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",

client/public/firebase-messaging-sw.js

@@ -0,0 +1,56 @@
+// Scripts for firebase and firebase messaging
+importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
+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 "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);
+
+// Retrieve firebase messaging
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage(function (payload) {
+  // Customize notification here
+  const channel = new BroadcastChannel("imex-sw-messages");
+  channel.postMessage(payload);
+
+  //self.registration.showNotification(notificationTitle, notificationOptions);
+});

client/src/App/App.container.jsx

@@ -1,53 +1,58 @@
-import {ApolloProvider} from "@apollo/client";
+import { ApolloProvider } from "@apollo/client";
-import {SplitFactoryProvider, SplitSdk,} from '@splitsoftware/splitio-react';
+import { SplitFactoryProvider, SplitSdk } from "@splitsoftware/splitio-react";
-import {ConfigProvider} from "antd";
+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: {
+  core: {
-        authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
+    authorizationKey: import.meta.env.VITE_APP_SPLIT_API,
-        key: "anon",
+    key: "anon"
-    },
+  }
 };
 export const factory = SplitSdk(config);
 
-
 function AppContainer() {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    return (
+  return (
-        <ApolloProvider client={client}>
+    <ApolloProvider client={client}>
-            <ConfigProvider
+      <ConfigProvider
-                //componentSize="small"
+        //componentSize="small"
-                input={{autoComplete: "new-password"}}
+        input={{ autoComplete: "new-password" }}
-                locale={enLocale}
+        locale={enLocale}
-                theme={themeProvider}
+        theme={themeProvider}
-                form={{
+        form={{
-                    validateMessages: {
+          validateMessages: {
-                        // eslint-disable-next-line no-template-curly-in-string
+            // eslint-disable-next-line no-template-curly-in-string
-                        required: t("general.validation.required", {label: "${label}"}),
+            required: t("general.validation.required", { label: "${label}" })
-                    },
+          }
-                }}
+        }}
-            >
+      >
-                <GlobalLoadingBar/>
+        <GlobalLoadingBar />
-                <SplitFactoryProvider factory={factory}>
+        <SplitFactoryProvider factory={factory}>
-                    <App/>
+          <App />
-                </SplitFactoryProvider>
+        </SplitFactoryProvider>
-            </ConfigProvider>
+      </ConfigProvider>
-        </ApolloProvider>
+    </ApolloProvider>
-    );
+  );
 }
 
 export default Sentry.withProfiler(AppContainer);

client/src/App/App.jsx

@@ -17,233 +17,225 @@ 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 {
+import { selectBodyshop, selectCurrentEula, selectCurrentUser } from "../redux/user/user.selectors";
-    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";
-const ResetPassword = lazy(() =>
+import { ProductFruits } from "react-product-fruits";
-    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(() =>
+const MobilePaymentContainer = lazy(() => import("../pages/mobile-payment/mobile-payment.container"));
-    import("../pages/mobile-payment/mobile-payment.container")
-);
 const mapStateToProps = createStructuredSelector({
-    currentUser: selectCurrentUser,
+  currentUser: selectCurrentUser,
-    online: selectOnline,
+  online: selectOnline,
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop,
-    currentEula: selectCurrentEula,
+  currentEula: selectCurrentEula
 });
 const mapDispatchToProps = (dispatch) => ({
-    checkUserSession: () => dispatch(checkUserSession()),
+  checkUserSession: () => dispatch(checkUserSession()),
-    setOnline: (isOnline) => dispatch(setOnline(isOnline)),
+  setOnline: (isOnline) => dispatch(setOnline(isOnline))
 });
 
-export function App({
+export function App({ bodyshop, checkUserSession, currentUser, online, setOnline, currentEula }) {
-    bodyshop,
+  const client = useSplitClient().client;
-    checkUserSession,
+  const [listenersAdded, setListenersAdded] = useState(false);
-    currentUser,
+  const { t } = useTranslation();
-    online,
-    setOnline,
-    currentEula,
-}) {
-    const client = useSplitClient().client;
-    const [listenersAdded, setListenersAdded] = useState(false);
-    const { t } = useTranslation();
 
-    useEffect(() => {
+  useEffect(() => {
-        if (!navigator.onLine) {
+    if (!navigator.onLine) {
-            setOnline(false);
+      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 ===
-                    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.
-                    })
-                );
-            }
-        }
-    }, [bodyshop, client, currentUser.authorized]);
-
-    if (currentUser.authorized === null) {
-        return <LoadingSpinner message={t("general.labels.loggingin")} />;
     }
 
-    handleBeta();
+    checkUserSession();
+  }, [checkUserSession, setOnline]);
 
-    if (!online)
+  //const b = Grid.useBreakpoint();
-        return (
+  // console.log("Breakpoints:", b);
-            <Result
+
-                status="warning"
+  // Associate event listeners, memoize to prevent multiple listeners being added
-                title={t("general.labels.nointernet")}
+  useEffect(() => {
-                subTitle={t("general.labels.nointernet_sub")}
+    const offlineListener = (e) => {
-                extra={
+      setOnline(false);
-                    <Button
+    };
-                        type="primary"
+
-                        onClick={() => {
+    const onlineListener = (e) => {
-                            window.location.reload();
+      setOnline(true);
-                        }}
+    };
-                    >
+
-                        {t("general.actions.refresh")}
+    if (!listenersAdded) {
-                    </Button>
+      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
+      <Result
-            fallback={
+        status="warning"
-                <LoadingSpinner
+        title={t("general.labels.nointernet")}
-                    message={InstanceRenderMgr({
+        subTitle={t("general.labels.nointernet_sub")}
-                      imex: t("titles.imexonline"),
+        extra={
-                      rome: t("titles.romeonline"),
+          <Button
-                      promanager: t("titles.promanager")
+            type="primary"
-                    })}
+            onClick={() => {
-                />
+              window.location.reload();
-            }
+            }}
-        >
+          >
-            <Routes>
+            {t("general.actions.refresh")}
-                <Route
+          </Button>
-                    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>
     );
+
+  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,8 +1,8 @@
-import {defaultsDeep} from "lodash";
+import { defaultsDeep } from "lodash";
-import {theme} from "antd";
+import { theme } from "antd";
-import InstanceRenderMgr from '../utils/instanceRenderMgr'
+import InstanceRenderMgr from "../utils/instanceRenderMgr";
 
-const {defaultAlgorithm, darkAlgorithm} = theme;
+const { defaultAlgorithm, darkAlgorithm } = theme;
 
 let isDarkMode = false;
 
@@ -13,28 +13,28 @@ let isDarkMode = false;
 const defaultTheme = {
   components: {
     Table: {
-      rowHoverBg: '#e7f3ff',
+      rowHoverBg: "#e7f3ff",
-      rowSelectedBg: '#e6f7ff',
+      rowSelectedBg: "#e6f7ff",
-      headerSortHoverBg: 'transparent',
+      headerSortHoverBg: "transparent"
     },
     Menu: {
-      darkItemHoverBg: '#1890ff',
+      darkItemHoverBg: "#1890ff",
-      itemHoverBg: '#1890ff',
+      itemHoverBg: "#1890ff",
-      horizontalItemHoverBg: '#1890ff',
+      horizontalItemHoverBg: "#1890ff"
-    },
+    }
   },
   token: {
-    colorPrimary: InstanceRenderMgr({ 
+    colorPrimary: InstanceRenderMgr({
-      imex: '#1890ff',
+      imex: "#1890ff",
-      rome: '#326ade',
+      rome: "#326ade",
-      promanager:"#1d69a6"
+      promanager: "#1d69a6"
     }),
     colorInfo: InstanceRenderMgr({
-      imex: '#1890ff',
+      imex: "#1890ff",
-      rome: '#326ade',
+      rome: "#326ade",
-      promanager:"#1d69a6"
+      promanager: "#1d69a6"
-    }),
+    })
-  },
+  }
 };
 
 /**
@@ -42,16 +42,16 @@ const defaultTheme = {
  * @type {{components: {Menu: {itemHoverBg: string, darkItemHoverBg: string, horizontalItemHoverBg: string}}, token: {colorPrimary: string}}}
  */
 const devTheme = {
-    components: {
+  components: {
-        Menu: {
+    Menu: {
-            darkItemHoverBg: '#a51d1d',
+      darkItemHoverBg: "#a51d1d",
-            itemHoverBg: '#a51d1d',
+      itemHoverBg: "#a51d1d",
-            horizontalItemHoverBg: '#a51d1d',
+      horizontalItemHoverBg: "#a51d1d"
-        }
-    },
-    token: {
-        colorPrimary: '#a51d1d'
     }
+  },
+  token: {
+    colorPrimary: "#a51d1d"
+  }
 };
 
 /**
@@ -60,11 +60,10 @@ const devTheme = {
  */
 const prodTheme = {};
 
-const currentTheme = import.meta.env.DEV ? devTheme
+const currentTheme = import.meta.env.DEV ? devTheme : prodTheme;
-    : prodTheme;
 
 const finaltheme = {
-    algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
+  algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
-    ...defaultsDeep(currentTheme, defaultTheme)
+  ...defaultsDeep(currentTheme, defaultTheme)
-}
+};
 export default finaltheme;

client/src/assets/promanager/ios/Contents.json

@@ -131,4 +131,4 @@
     "author": "iconkitchen",
     "version": 1
   }
-}
+}

client/src/components/PrivateRoute.jsx

@@ -1,17 +1,17 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
-import {Outlet, useLocation, useNavigate} from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
-function PrivateRoute({component: Component, isAuthorized, ...rest}) {
+function PrivateRoute({ component: Component, isAuthorized, ...rest }) {
-    const location = useLocation();
+  const location = useLocation();
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    useEffect(() => {
+  useEffect(() => {
-        if (!isAuthorized) {
+    if (!isAuthorized) {
-            navigate(`/signin?redirect=${location.pathname}`);
+      navigate(`/signin?redirect=${location.pathname}`);
-        }
+    }
-    }, [isAuthorized, navigate, location]);
+  }, [isAuthorized, navigate, location]);
 
-    return <Outlet/>;
+  return <Outlet />;
 }
 
 export default PrivateRoute;

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

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

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

@@ -1,233 +1,196 @@
-import {Card, Checkbox, Input, Space, Table} from "antd";
+import { Card, Checkbox, Input, Space, Table } from "antd";
-import React, {useState} from "react";
-import {useTranslation} from "react-i18next";
-import {Link} from "react-router-dom";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import {alphaSort, dateSort} from "../../utils/sorters";
-import PayableExportButton from "../payable-export-button/payable-export-button.component";
-import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
-import {DateFormatter} from "../../utils/DateFormatter";
 import queryString from "query-string";
-import {logImEXEvent} from "../../firebase/firebase.utils";
+import React, { useState } from "react";
-import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { Link } from "react-router-dom";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateFormatter } from "../../utils/DateFormatter";
+import { pageLimit } from "../../utils/config";
+import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
+import PayableExportAll from "../payable-export-all-button/payable-export-all-button.component";
+import PayableExportButton from "../payable-export-button/payable-export-button.component";
 import BillMarkSelectedExported from "../payable-mark-selected-exported/payable-mark-selected-exported.component";
-import {pageLimit} from "../../utils/config";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(AccountingPayablesTableComponent);
-    mapStateToProps,
-    mapDispatchToProps
-)(AccountingPayablesTableComponent);
 
-export function AccountingPayablesTableComponent({
+export function AccountingPayablesTableComponent({ bodyshop, loading, bills, refetch }) {
-                                                     bodyshop,
+  const { t } = useTranslation();
-                                                     loading,
+  const [selectedBills, setSelectedBills] = useState([]);
-                                                     bills,
+  const [transInProgress, setTransInProgress] = useState(false);
-                                                     refetch,
+  const [state, setState] = useState({
-                                                 }) {
+    sortedInfo: {},
-    const {t} = useTranslation();
+    search: ""
-    const [selectedBills, setSelectedBills] = useState([]);
+  });
-    const [transInProgress, setTransInProgress] = useState(false);
-    const [state, setState] = useState({
-        sortedInfo: {},
-        search: "",
-    });
 
-    const handleTableChange = (pagination, filters, sorter) => {
+  const handleTableChange = (pagination, filters, sorter) => {
-        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    };
+  };
 
-    const columns = [
+  const columns = [
-        {
+    {
-            title: t("bills.fields.vendorname"),
+      title: t("bills.fields.vendorname"),
-            dataIndex: "vendorname",
+      dataIndex: "vendorname",
-            key: "vendorname",
+      key: "vendorname",
-            sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
+      sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
-            sortOrder:
+      sortOrder: state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
-                state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
+      render: (text, record) => (
-            render: (text, record) => (
+        <Link
-                <Link
+          to={{
-                    to={{
+            pathname: `/manage/shop/vendors`,
-                        pathname: `/manage/shop/vendors`,
+            search: queryString.stringify({ selectedvendor: record.vendor.id })
-                        search: queryString.stringify({selectedvendor: record.vendor.id}),
+          }}
-                    }}
-                >
-                    {record.vendor.name}
-                </Link>
-            ),
-        },
-        {
-            title: t("bills.fields.invoice_number"),
-            dataIndex: "invoice_number",
-            key: "invoice_number",
-            sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
-            sortOrder:
-                state.sortedInfo.columnKey === "invoice_number" &&
-                state.sortedInfo.order,
-            render: (text, record) => (
-                <Link
-                    to={{
-                        pathname: `/manage/bills`,
-                        search: queryString.stringify({
-                            billid: record.id,
-                            vendorid: record.vendor.id,
-                        }),
-                    }}
-                >
-                    {record.invoice_number}
-                </Link>
-            ),
-        },
-        {
-            title: t("jobs.fields.ro_number"),
-            dataIndex: "ro_number",
-            key: "ro_number",
-            sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
-            sortOrder:
-                state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-            render: (text, record) => (
-                <Link to={`/manage/jobs/${record.job.id}`}>{record.job.ro_number}</Link>
-            ),
-        },
-        {
-            title: t("bills.fields.date"),
-            dataIndex: "date",
-            key: "date",
-
-            sorter: (a, b) => dateSort(a.date, b.date),
-            sortOrder:
-                state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
-            render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
-        },
-        {
-            title: t("bills.fields.total"),
-            dataIndex: "total",
-            key: "total",
-
-            sorter: (a, b) => a.total - b.total,
-            sortOrder:
-                state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
-            render: (text, record) => (
-                <CurrencyFormatter>{record.total}</CurrencyFormatter>
-            ),
-        },
-        {
-            title: t("bills.fields.is_credit_memo"),
-            dataIndex: "is_credit_memo",
-            key: "is_credit_memo",
-            sorter: (a, b) => a.is_credit_memo - b.is_credit_memo,
-            sortOrder:
-                state.sortedInfo.columnKey === "is_credit_memo" &&
-                state.sortedInfo.order,
-            render: (text, record) => (
-                <Checkbox disabled checked={record.is_credit_memo}/>
-            ),
-        },
-        {
-            title: t("exportlogs.labels.attempts"),
-            dataIndex: "attempts",
-            key: "attempts",
-
-            render: (text, record) => (
-                <ExportLogsCountDisplay logs={record.exportlogs}/>
-            ),
-        },
-        {
-            title: t("general.labels.actions"),
-            dataIndex: "actions",
-            key: "actions",
-            sorter: (a, b) => a.clm_total - b.clm_total,
-
-            render: (text, record) => (
-                <PayableExportButton
-                    billId={record.id}
-                    disabled={transInProgress || !!record.exported}
-                    loadingCallback={setTransInProgress}
-                    setSelectedBills={setSelectedBills}
-                    refetch={refetch}
-                />
-            ),
-        },
-    ];
-
-    const handleSearch = (e) => {
-        setState({...state, search: e.target.value});
-        logImEXEvent("accounting_payables_table_search");
-    };
-
-    const dataSource = state.search
-        ? bills.filter(
-            (v) =>
-                (v.vendor.name || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase()) ||
-                (v.invoice_number || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase())
-        )
-        : bills;
-
-    return (
-        <Card
-            extra={
-                <Space wrap>
-                    <BillMarkSelectedExported
-                        billids={selectedBills}
-                        disabled={transInProgress || selectedBills.length === 0}
-                        loadingCallback={setTransInProgress}
-                        completedCallback={setSelectedBills}
-                        refetch={refetch}
-                    />
-                    <PayableExportAll
-                        billids={selectedBills}
-                        disabled={transInProgress || selectedBills.length === 0}
-                        loadingCallback={setTransInProgress}
-                        completedCallback={setSelectedBills}
-                        refetch={refetch}
-                    />
-                    {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
-                        <QboAuthorizeComponent/>
-                    )}
-                    <Input
-                        value={state.search}
-                        onChange={handleSearch}
-                        placeholder={t("general.labels.search")}
-                        allowClear
-                    />
-                </Space>
-            }
         >
-            <Table
+          {record.vendor.name}
-                loading={loading}
+        </Link>
-                dataSource={dataSource}
+      )
-                pagination={{position: "top", pageSize: pageLimit}}
+    },
-                columns={columns}
+    {
-                rowKey="id"
+      title: t("bills.fields.invoice_number"),
-                onChange={handleTableChange}
+      dataIndex: "invoice_number",
-                rowSelection={{
+      key: "invoice_number",
-                    onSelectAll: (selected, selectedRows) =>
+      sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
-                        setSelectedBills(selectedRows.map((i) => i.id)),
+      sortOrder: state.sortedInfo.columnKey === "invoice_number" && state.sortedInfo.order,
-                    onSelect: (record, selected, selectedRows, nativeEvent) => {
+      render: (text, record) => (
-                        setSelectedBills(selectedRows.map((i) => i.id));
+        <Link
-                    },
+          to={{
-                    getCheckboxProps: (record) => ({
+            pathname: `/manage/bills`,
-                        disabled: record.exported,
+            search: queryString.stringify({
-                    }),
+              billid: record.id,
-                    selectedRowKeys: selectedBills,
+              vendorid: record.vendor.id
-                    type: "checkbox",
+            })
-                }}
+          }}
-            />
+        >
-        </Card>
+          {record.invoice_number}
-    );
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => <Link to={`/manage/jobs/${record.job.id}`}>{record.job.ro_number}</Link>
+    },
+    {
+      title: t("bills.fields.date"),
+      dataIndex: "date",
+      key: "date",
+
+      sorter: (a, b) => dateSort(a.date, b.date),
+      sortOrder: state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
+      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>
+    },
+    {
+      title: t("bills.fields.total"),
+      dataIndex: "total",
+      key: "total",
+
+      sorter: (a, b) => a.total - b.total,
+      sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+      render: (text, record) => <CurrencyFormatter>{record.total}</CurrencyFormatter>
+    },
+    {
+      title: t("bills.fields.is_credit_memo"),
+      dataIndex: "is_credit_memo",
+      key: "is_credit_memo",
+      sorter: (a, b) => a.is_credit_memo - b.is_credit_memo,
+      sortOrder: state.sortedInfo.columnKey === "is_credit_memo" && state.sortedInfo.order,
+      render: (text, record) => <Checkbox disabled checked={record.is_credit_memo} />
+    },
+    {
+      title: t("exportlogs.labels.attempts"),
+      dataIndex: "attempts",
+      key: "attempts",
+
+      render: (text, record) => <ExportLogsCountDisplay logs={record.exportlogs} />
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+
+      render: (text, record) => (
+        <PayableExportButton
+          billId={record.id}
+          disabled={transInProgress || !!record.exported}
+          loadingCallback={setTransInProgress}
+          setSelectedBills={setSelectedBills}
+          refetch={refetch}
+        />
+      )
+    }
+  ];
+
+  const handleSearch = (e) => {
+    setState({ ...state, search: e.target.value });
+    logImEXEvent("accounting_payables_table_search");
+  };
+
+  const dataSource = state.search
+    ? bills.filter(
+        (v) =>
+          (v.vendor.name || "").toLowerCase().includes(state.search.toLowerCase()) ||
+          (v.invoice_number || "").toLowerCase().includes(state.search.toLowerCase())
+      )
+    : bills;
+
+  return (
+    <Card
+      extra={
+        <Space wrap>
+          <BillMarkSelectedExported
+            billids={selectedBills}
+            disabled={transInProgress || selectedBills.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedBills}
+            refetch={refetch}
+          />
+          <PayableExportAll
+            billids={selectedBills}
+            disabled={transInProgress || selectedBills.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedBills}
+            refetch={refetch}
+          />
+          {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
+          <Input value={state.search} onChange={handleSearch} placeholder={t("general.labels.search")} allowClear />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        dataSource={dataSource}
+        pagination={{ position: "top", pageSize: pageLimit }}
+        columns={columns}
+        rowKey="id"
+        onChange={handleTableChange}
+        rowSelection={{
+          onSelectAll: (selected, selectedRows) => setSelectedBills(selectedRows.map((i) => i.id)),
+          onSelect: (record, selected, selectedRows, nativeEvent) => {
+            setSelectedBills(selectedRows.map((i) => i.id));
+          },
+          getCheckboxProps: (record) => ({
+            disabled: record.exported
+          }),
+          selectedRowKeys: selectedBills,
+          type: "checkbox"
+        }}
+      />
+    </Card>
+  );
 }

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

@@ -1,232 +1,198 @@
-import {Card, Input, Space, Table} from "antd";
+import { Card, Input, Space, Table } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {logImEXEvent} from "../../firebase/firebase.utils";
+import { logImEXEvent } from "../../firebase/firebase.utils";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import {DateFormatter, DateTimeFormatter} from "../../utils/DateFormatter";
+import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
-import {alphaSort, dateSort} from "../../utils/sorters";
+import { pageLimit } from "../../utils/config";
+import { alphaSort, dateSort } from "../../utils/sorters";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import PaymentExportButton from "../payment-export-button/payment-export-button.component";
 import PaymentMarkSelectedExported from "../payment-mark-selected-exported/payment-mark-selected-exported.component";
 import PaymentsExportAllButton from "../payments-export-all-button/payments-export-all-button.component";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
-import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(AccountingPayablesTableComponent);
-    mapStateToProps,
-    mapDispatchToProps
-)(AccountingPayablesTableComponent);
 
-export function AccountingPayablesTableComponent({
+export function AccountingPayablesTableComponent({ bodyshop, loading, payments, refetch }) {
-                                                     bodyshop,
+  const { t } = useTranslation();
-                                                     loading,
+  const [selectedPayments, setSelectedPayments] = useState([]);
-                                                     payments,
+  const [transInProgress, setTransInProgress] = useState(false);
-                                                     refetch,
+  const [state, setState] = useState({
-                                                 }) {
+    sortedInfo: {},
-    const {t} = useTranslation();
+    search: ""
-    const [selectedPayments, setSelectedPayments] = useState([]);
+  });
-    const [transInProgress, setTransInProgress] = useState(false);
-    const [state, setState] = useState({
-        sortedInfo: {},
-        search: "",
-    });
 
-    const handleTableChange = (pagination, filters, sorter) => {
+  const handleTableChange = (pagination, filters, sorter) => {
-        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    };
+  };
 
-    const columns = [
+  const columns = [
-        {
+    {
-            title: t("jobs.fields.ro_number"),
+      title: t("jobs.fields.ro_number"),
-            dataIndex: "ro_number",
+      dataIndex: "ro_number",
-            key: "ro_number",
+      key: "ro_number",
-            sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
-            sortOrder:
+      sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-                state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => <Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
-            render: (text, record) => (
+    },
-                <Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
+    {
-            ),
+      title: t("payments.fields.date"),
-        },
+      dataIndex: "date",
-        {
+      key: "date",
-            title: t("payments.fields.date"),
+      sorter: (a, b) => dateSort(a.date, b.date),
-            dataIndex: "date",
+      sortOrder: state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
-            key: "date",
+      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>
-            sorter: (a, b) => dateSort(a.date, b.date),
+    },
-            sortOrder:
-                state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
-            render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
-        },
 
-        {
+    {
-            title: t("jobs.fields.owner"),
+      title: t("jobs.fields.owner"),
-            dataIndex: "owner",
+      dataIndex: "owner",
-            key: "owner",
+      key: "owner",
-            ellipsis: true,
+      ellipsis: true,
-            sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a.job), OwnerNameDisplayFunction(b.job)),
-            sortOrder:
+      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-                state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
-            render: (text, record) => {
+        return record.job.owner ? (
-                return record.job.owner ? (
+          <Link to={"/manage/owners/" + record.job.owner.id}>
-                    <Link to={"/manage/owners/" + record.job.owner.id}>
+            <OwnerNameDisplay ownerObject={record.job} />
-                        <OwnerNameDisplay ownerObject={record.job}/>
+          </Link>
-                    </Link>
+        ) : (
-                ) : (
+          <span>
-                    <span>
+            <OwnerNameDisplay ownerObject={record.job} />
-            <OwnerNameDisplay ownerObject={record.job}/>
           </span>
-                );
+        );
-            },
+      }
-        },
+    },
-        {
+    {
-            title: t("payments.fields.amount"),
+      title: t("payments.fields.amount"),
-            dataIndex: "amount",
+      dataIndex: "amount",
-            key: "amount",
+      key: "amount",
-            render: (text, record) => (
+      sorter: (a, b) => a.amount - b.amount,
-                <CurrencyFormatter>{record.amount}</CurrencyFormatter>
+      sortOrder: state.sortedInfo.columnKey === "amount" && state.sortedInfo.order,
-            ),
+      render: (text, record) => <CurrencyFormatter>{record.amount}</CurrencyFormatter>
-        },
+    },
-        {
+    {
-            title: t("payments.fields.memo"),
+      title: t("payments.fields.memo"),
-            dataIndex: "memo",
+      dataIndex: "memo",
-            key: "memo",
+      key: "memo"
-        },
+    },
-        {
+    {
-            title: t("payments.fields.transactionid"),
+      title: t("payments.fields.transactionid"),
-            dataIndex: "transactionid",
+      dataIndex: "transactionid",
-            key: "transactionid",
+      key: "transactionid"
-        },
+    },
-        {
+    {
-            title: t("payments.fields.created_at"),
+      title: t("payments.fields.created_at"),
-            dataIndex: "created_at",
+      dataIndex: "created_at",
-            key: "created_at",
+      key: "created_at",
-            render: (text, record) => (
+      sorter: (a, b) => dateSort(a.created_at, b.created_at),
-                <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
+      sortOrder: state.sortedInfo.columnKey === "created_at" && state.sortedInfo.order,
-            ),
+      render: (text, record) => <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
-        },
+    },
-        {
+    //{
-            title: t("payments.fields.exportedat"),
+    //  title: t("payments.fields.exportedat"),
-            dataIndex: "exportedat",
+    //  dataIndex: "exportedat",
-            key: "exportedat",
+    //  key: "exportedat",
-            render: (text, record) => (
+    //  render: (text, record) => (
-                <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
+    //    <DateTimeFormatter>{record.exportedat}</DateTimeFormatter>
-            ),
+    //  ),
-        },
+    //},
-        {
+    {
-            title: t("exportlogs.labels.attempts"),
+      title: t("exportlogs.labels.attempts"),
-            dataIndex: "attempts",
+      dataIndex: "attempts",
-            key: "attempts",
+      key: "attempts",
 
-            render: (text, record) => (
+      render: (text, record) => <ExportLogsCountDisplay logs={record.exportlogs} />
-                <ExportLogsCountDisplay logs={record.exportlogs}/>
+    },
-            ),
+    {
-        },
+      title: t("general.labels.actions"),
-        {
+      dataIndex: "actions",
-            title: t("general.labels.actions"),
+      key: "actions",
-            dataIndex: "actions",
-            key: "actions",
-            sorter: (a, b) => a.clm_total - b.clm_total,
 
-            render: (text, record) => (
+      render: (text, record) => (
-                <PaymentExportButton
+        <PaymentExportButton
-                    paymentId={record.id}
+          paymentId={record.id}
-                    disabled={transInProgress || !!record.exportedat}
+          disabled={transInProgress || !!record.exportedat}
-                    loadingCallback={setTransInProgress}
+          loadingCallback={setTransInProgress}
-                    setSelectedPayments={setSelectedPayments}
+          setSelectedPayments={setSelectedPayments}
-                    refetch={refetch}
+          refetch={refetch}
-                />
+        />
-            ),
+      )
-        },
+    }
-    ];
+  ];
 
-    const handleSearch = (e) => {
+  const handleSearch = (e) => {
-        setState({...state, search: e.target.value});
+    setState({ ...state, search: e.target.value });
-        logImEXEvent("account_payments_table_search");
+    logImEXEvent("account_payments_table_search");
-    };
+  };
 
-    const dataSource = state.search
+  const dataSource = state.search
-        ? payments.filter(
+    ? payments.filter(
-            (v) =>
+        (v) =>
-                (v.paymentnum || "")
+          (v.paymentnum || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                    .toLowerCase()
+          ((v.job && v.job.ro_number) || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                    .includes(state.search.toLowerCase()) ||
+          ((v.job && v.job.ownr_fn) || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                ((v.job && v.job.ro_number) || "")
+          ((v.job && v.job.ownr_ln) || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                    .toLowerCase()
+          ((v.job && v.job.ownr_co_nm) || "").toLowerCase().includes(state.search.toLowerCase())
-                    .includes(state.search.toLowerCase()) ||
+      )
-                ((v.job && v.job.ownr_fn) || "")
+    : payments;
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase()) ||
-                ((v.job && v.job.ownr_ln) || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase()) ||
-                ((v.job && v.job.ownr_co_nm) || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase())
-        )
-        : payments;
 
-    return (
+  return (
-        <Card
+    <Card
-            extra={
+      extra={
-                <Space wrap>
+        <Space wrap>
-                    <PaymentMarkSelectedExported
+          <PaymentMarkSelectedExported
-                        paymentIds={selectedPayments}
+            paymentIds={selectedPayments}
-                        disabled={transInProgress || selectedPayments.length === 0}
+            disabled={transInProgress || selectedPayments.length === 0}
-                        loadingCallback={setTransInProgress}
+            loadingCallback={setTransInProgress}
-                        completedCallback={setSelectedPayments}
+            completedCallback={setSelectedPayments}
-                        refetch={refetch}
+            refetch={refetch}
-                    />
+          />
-                    <PaymentsExportAllButton
+          <PaymentsExportAllButton
-                        paymentIds={selectedPayments}
+            paymentIds={selectedPayments}
-                        disabled={transInProgress || selectedPayments.length === 0}
+            disabled={transInProgress || selectedPayments.length === 0}
-                        loadingCallback={setTransInProgress}
+            loadingCallback={setTransInProgress}
-                        completedCallback={setSelectedPayments}
+            completedCallback={setSelectedPayments}
-                        refetch={refetch}
+            refetch={refetch}
-                    />
+          />
-                    {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
+          {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
-                        <QboAuthorizeComponent/>
+          <Input value={state.search} onChange={handleSearch} placeholder={t("general.labels.search")} allowClear />
-                    )}
+        </Space>
-                    <Input
+      }
-                        value={state.search}
+    >
-                        onChange={handleSearch}
+      <Table
-                        placeholder={t("general.labels.search")}
+        loading={loading}
-                        allowClear
+        dataSource={dataSource}
-                    />
+        pagination={{ position: "top", pageSize: pageLimit }}
-                </Space>
+        columns={columns}
-            }
+        rowKey="id"
-        >
+        onChange={handleTableChange}
-            <Table
+        rowSelection={{
-                loading={loading}
+          onSelectAll: (selected, selectedRows) => setSelectedPayments(selectedRows.map((i) => i.id)),
-                dataSource={dataSource}
+          onSelect: (record, selected, selectedRows, nativeEvent) => {
-                pagination={{position: "top", pageSize: pageLimit}}
+            setSelectedPayments(selectedRows.map((i) => i.id));
-                columns={columns}
+          },
-                rowKey="id"
+          getCheckboxProps: (record) => ({
-                onChange={handleTableChange}
+            disabled: record.exported
-                rowSelection={{
+          }),
-                    onSelectAll: (selected, selectedRows) =>
+          selectedRowKeys: selectedPayments,
-                        setSelectedPayments(selectedRows.map((i) => i.id)),
+          type: "checkbox"
-                    onSelect: (record, selected, selectedRows, nativeEvent) => {
+        }}
-                        setSelectedPayments(selectedRows.map((i) => i.id));
+      />
-                    },
+    </Card>
-                    getCheckboxProps: (record) => ({
+  );
-                        disabled: record.exported,
-                    }),
-                    selectedRowKeys: selectedPayments,
-                    type: "checkbox",
-                }}
-            />
-        </Card>
-    );
 }

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

@@ -1,247 +1,212 @@
-import {Button, Card, Input, Space, Table} from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
-import {logImEXEvent} from "../../firebase/firebase.utils";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import {alphaSort, dateSort} from "../../utils/sorters";
+import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
 
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import { DateFormatter } from "../../utils/DateFormatter";
-import {DateFormatter} from "../../utils/DateFormatter";
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ExportLogsCountDisplay from "../export-logs-count-display/export-logs-count-display.component";
+import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(AccountingReceivablesTableComponent);
-    mapStateToProps,
-    mapDispatchToProps
-)(AccountingReceivablesTableComponent);
 
-export function AccountingReceivablesTableComponent({
+export function AccountingReceivablesTableComponent({ bodyshop, loading, jobs, refetch }) {
-                                                        bodyshop,
+  const { t } = useTranslation();
-                                                        loading,
+  const [selectedJobs, setSelectedJobs] = useState([]);
-                                                        jobs,
+  const [transInProgress, setTransInProgress] = useState(false);
-                                                        refetch,
-                                                    }) {
-    const {t} = useTranslation();
-    const [selectedJobs, setSelectedJobs] = useState([]);
-    const [transInProgress, setTransInProgress] = useState(false);
 
-    const [state, setState] = useState({
+  const [state, setState] = useState({
-        sortedInfo: {},
+    sortedInfo: {},
-        search: "",
+    search: ""
-    });
+  });
 
-    const handleTableChange = (pagination, filters, sorter) => {
+  const handleTableChange = (pagination, filters, sorter) => {
-        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    };
+  };
 
-    const columns = [
+  const columns = [
-        {
+    {
-            title: t("jobs.fields.ro_number"),
+      title: t("jobs.fields.ro_number"),
-            dataIndex: "ro_number",
+      dataIndex: "ro_number",
-            key: "ro_number",
+      key: "ro_number",
-            sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
-            sortOrder:
+      sortOrder: state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-                state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => <Link to={"/manage/jobs/" + record.id}>{record.ro_number}</Link>
-            render: (text, record) => (
+    },
-                <Link to={"/manage/jobs/" + record.id}>{record.ro_number}</Link>
-            ),
-        },
 
-        {
+    {
-            title: t("jobs.fields.status"),
+      title: t("jobs.fields.status"),
-            dataIndex: "status",
+      dataIndex: "status",
-            key: "status",
+      key: "status",
-            sorter: (a, b) => a.status - b.status,
+      sorter: (a, b) => statusSort(a, b, bodyshop.md_ro_statuses.statuses),
-            sortOrder:
+      sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order
-                state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+    },
-        },
+    {
-        {
+      title: t("jobs.fields.date_invoiced"),
-            title: t("jobs.fields.date_invoiced"),
+      dataIndex: "date_invoiced",
-            dataIndex: "date_invoiced",
+      key: "date_invoiced",
-            key: "date_invoiced",
+      sorter: (a, b) => dateSort(a.date_invoiced, b.date_invoiced),
-            sorter: (a, b) => dateSort(a.date_invoiced, b.date_invoiced),
+      sortOrder: state.sortedInfo.columnKey === "date_invoiced" && state.sortedInfo.order,
-            sortOrder:
+      render: (text, record) => <DateFormatter>{record.date_invoiced}</DateFormatter>
-                state.sortedInfo.columnKey === "date_invoiced" &&
+    },
-                state.sortedInfo.order,
+    {
-            render: (text, record) => (
+      title: t("jobs.fields.owner"),
-                <DateFormatter>{record.date_invoiced}</DateFormatter>
+      dataIndex: "owner",
-            ),
+      key: "owner",
-        },
+      sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
-        {
+      sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-            title: t("jobs.fields.owner"),
+      render: (text, record) => {
-            dataIndex: "owner",
+        return record.owner ? (
-            key: "owner",
+          <Link to={"/manage/owners/" + record.owner.id}>
-            sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            <OwnerNameDisplay ownerObject={record} />
-            sortOrder:
+          </Link>
-                state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+        ) : (
-            render: (text, record) => {
+          <span>
-                return record.owner ? (
+            <OwnerNameDisplay ownerObject={record} />
-                    <Link to={"/manage/owners/" + record.owner.id}>
-                        <OwnerNameDisplay ownerObject={record}/>
-                    </Link>
-                ) : (
-                    <span>
-            <OwnerNameDisplay ownerObject={record}/>
           </span>
-                );
+        );
-            },
+      }
-        },
+    },
-        {
+    {
-            title: t("jobs.fields.vehicle"),
+      title: t("jobs.fields.vehicle"),
-            dataIndex: "vehicle",
+      dataIndex: "vehicle",
-            key: "vehicle",
+      key: "vehicle",
-            ellipsis: true,
+      ellipsis: true,
-            render: (text, record) => {
+      sorter: (a, b) =>
-                return record.vehicleid ? (
+        alphaSort(
-                    <Link to={"/manage/vehicles/" + record.vehicleid}>
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${a.v_model_desc || ""}`,
-                        {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
-                            record.v_model_desc || ""
+        ),
-                        }`}
+      sortOrder: state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
-                    </Link>
+      render: (text, record) => {
-                ) : (
+        return record.vehicleid ? (
-                    <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+          <Link to={"/manage/vehicles/" + record.vehicleid}>
-                        record.v_model_desc || ""
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}
-                    }`}</span>
+          </Link>
-                );
+        ) : (
-            },
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
-        },
+        );
-        {
+      }
-            title: t("jobs.fields.clm_no"),
+    },
-            dataIndex: "clm_no",
+    {
-            key: "clm_no",
+      title: t("jobs.fields.clm_no"),
-            ellipsis: true,
+      dataIndex: "clm_no",
-            sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+      key: "clm_no",
-            sortOrder:
+      ellipsis: true,
-                state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-        },
+      sortOrder: state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
-        {
+    },
-            title: t("jobs.fields.clm_total"),
+    {
-            dataIndex: "clm_total",
+      title: t("jobs.fields.clm_total"),
-            key: "clm_total",
+      dataIndex: "clm_total",
-            sorter: (a, b) => a.clm_total - b.clm_total,
+      key: "clm_total",
-            sortOrder:
+      sorter: (a, b) => a.clm_total - b.clm_total,
-                state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+      sortOrder: state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
-            render: (text, record) => {
+      render: (text, record) => {
-                return <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>;
+        return <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>;
-            },
+      }
-        },
+    },
-        {
+    {
-            title: t("exportlogs.labels.attempts"),
+      title: t("exportlogs.labels.attempts"),
-            dataIndex: "attempts",
+      dataIndex: "attempts",
-            key: "attempts",
+      key: "attempts",
-            render: (text, record) => (
+      render: (text, record) => <ExportLogsCountDisplay logs={record.exportlogs} />
-                <ExportLogsCountDisplay logs={record.exportlogs}/>
+    },
-            ),
+    {
-        },
+      title: t("general.labels.actions"),
-        {
+      dataIndex: "actions",
-            title: t("general.labels.actions"),
+      key: "actions",
-            dataIndex: "actions",
-            key: "actions",
 
-            render: (text, record) => (
+      render: (text, record) => (
-                <Space wrap>
+        <Space wrap>
-                    <JobExportButton
+          <JobExportButton
-                        jobId={record.id}
+            jobId={record.id}
-                        disabled={!!record.date_exported}
+            disabled={!!record.date_exported}
-                        setSelectedJobs={setSelectedJobs}
+            setSelectedJobs={setSelectedJobs}
-                        refetch={refetch}
+            refetch={refetch}
-                    />
+          />
-                    <Link to={`/manage/jobs/${record.id}/close`}>
+          <Link to={`/manage/jobs/${record.id}/close`}>
-                        <Button>{t("jobs.labels.viewallocations")}</Button>
+            <Button>{t("jobs.labels.viewallocations")}</Button>
-                    </Link>
+          </Link>
-                </Space>
+        </Space>
-            ),
+      )
-        },
+    }
-    ];
+  ];
 
-    const handleSearch = (e) => {
+  const handleSearch = (e) => {
-        setState({...state, search: e.target.value});
+    setState({ ...state, search: e.target.value });
-        logImEXEvent("accounting_receivables_search");
+    logImEXEvent("accounting_receivables_search");
-    };
+  };
 
-    const dataSource = state.search
+  const dataSource = state.search
-        ? jobs.filter(
+    ? jobs.filter(
-            (v) =>
+        (v) =>
-                (v.ro_number || "")
+          (v.ro_number || "").toString().toLowerCase().includes(state.search.toLowerCase()) ||
-                    .toString()
+          (v.ownr_fn || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                    .toLowerCase()
+          (v.ownr_ln || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                    .includes(state.search.toLowerCase()) ||
+          (v.ownr_co_nm || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                (v.ownr_fn || "")
+          (v.v_model_desc || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                    .toLowerCase()
+          (v.v_make_desc || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                    .includes(state.search.toLowerCase()) ||
+          (v.clm_no || "").toLowerCase().includes(state.search.toLowerCase())
-                (v.ownr_ln || "")
+      )
-                    .toLowerCase()
+    : jobs;
-                    .includes(state.search.toLowerCase()) ||
-                (v.ownr_co_nm || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase()) ||
-                (v.v_model_desc || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase()) ||
-                (v.v_make_desc || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase()) ||
-                (v.clm_no || "").toLowerCase().includes(state.search.toLowerCase())
-        )
-        : jobs;
 
-    return (
+  return (
-        <Card
+    <Card
-            extra={
+      extra={
-                <Space wrap>
+        <Space wrap>
-                    {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
+          {!bodyshop.cdk_dealerid && !bodyshop.pbs_serialnumber && (
-                        <JobsExportAllButton
+            <JobsExportAllButton
-                            jobIds={selectedJobs}
+              jobIds={selectedJobs}
-                            disabled={transInProgress || selectedJobs.length === 0}
+              disabled={transInProgress || selectedJobs.length === 0}
-                            loadingCallback={setTransInProgress}
+              loadingCallback={setTransInProgress}
-                            completedCallback={setSelectedJobs}
+              completedCallback={setSelectedJobs}
-                            refetch={refetch}
+              refetch={refetch}
-                        />
-                    )}
-                    {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
-                        <QboAuthorizeComponent/>
-                    )}
-                    <Input.Search
-                        value={state.search}
-                        onChange={handleSearch}
-                        placeholder={t("general.labels.search")}
-                        allowClear
-                    />
-                </Space>
-            }
-        >
-            <Table
-                loading={loading}
-                dataSource={dataSource}
-                pagination={{position: "top"}}
-                columns={columns}
-                rowKey="id"
-                onChange={handleTableChange}
-                rowSelection={{
-                    onSelectAll: (selected, selectedRows) =>
-                        setSelectedJobs(selectedRows.map((i) => i.id)),
-                    onSelect: (record, selected, selectedRows, nativeEvent) => {
-                        setSelectedJobs(selectedRows.map((i) => i.id));
-                    },
-                    getCheckboxProps: (record) => ({
-                        disabled: record.exported,
-                    }),
-                    selectedRowKeys: selectedJobs,
-                    type: "checkbox",
-                }}
             />
-        </Card>
+          )}
-    );
+          {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && <QboAuthorizeComponent />}
+          <Input.Search
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        dataSource={dataSource}
+        pagination={{ position: "top" }}
+        columns={columns}
+        rowKey="id"
+        onChange={handleTableChange}
+        rowSelection={{
+          onSelectAll: (selected, selectedRows) => setSelectedJobs(selectedRows.map((i) => i.id)),
+          onSelect: (record, selected, selectedRows, nativeEvent) => {
+            setSelectedJobs(selectedRows.map((i) => i.id));
+          },
+          getCheckboxProps: (record) => ({
+            disabled: record.exported
+          }),
+          selectedRowKeys: selectedJobs,
+          type: "checkbox"
+        }}
+      />
+    </Card>
+  );
 }

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

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

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

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

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

@@ -1,72 +1,67 @@
-import {Button, InputNumber, Popover, Select} from "antd";
+import { Button, InputNumber, Popover, Select } from "antd";
 import React from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop
+  bodyshop: selectBodyshop
 });
 
 export function AllocationsAssignmentComponent({
-                                                   bodyshop,
+  bodyshop,
-                                                   handleAssignment,
+  handleAssignment,
-                                                   assignment,
+  assignment,
-                                                   setAssignment,
+  setAssignment,
-                                                   visibilityState,
+  visibilityState,
-                                                   maxHours
+  maxHours
-                                               }) {
+}) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    const onChange = e => {
+  const onChange = (e) => {
-        setAssignment({...assignment, employeeid: e});
+    setAssignment({ ...assignment, employeeid: e });
-    };
+  };
 
-    const [visibility, setVisibility] = visibilityState;
+  const [visibility, setVisibility] = visibilityState;
 
-    const popContent = (
+  const popContent = (
-        <div>
+    <div>
-            <Select id="employeeSelector"
+      <Select
-                    showSearch
+        id="employeeSelector"
-                    style={{width: 200}}
+        showSearch
-                    placeholder='Select a person'
+        style={{ width: 200 }}
-                    optionFilterProp='children'
+        placeholder="Select a person"
-                    onChange={onChange}
+        optionFilterProp="children"
-                    filterOption={(input, option) =>
+        onChange={onChange}
-                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
-                    }>
+      >
-                {bodyshop.employees.map(emp => (
+        {bodyshop.employees.map((emp) => (
-                    <Select.Option value={emp.id} key={emp.id}>
+          <Select.Option value={emp.id} key={emp.id}>
-                        {`${emp.first_name} ${emp.last_name}`}
+            {`${emp.first_name} ${emp.last_name}`}
-                    </Select.Option>
+          </Select.Option>
-                ))}
+        ))}
-            </Select>
+      </Select>
-            <InputNumber
+      <InputNumber
-                defaultValue={assignment.hours}
+        defaultValue={assignment.hours}
-                placeholder={t("joblines.fields.mod_lb_hrs")}
+        placeholder={t("joblines.fields.mod_lb_hrs")}
-                max={parseFloat(maxHours)}
+        max={parseFloat(maxHours)}
-                min={0}
+        min={0}
-                onChange={e => setAssignment({...assignment, hours: e})}
+        onChange={(e) => setAssignment({ ...assignment, hours: e })}
-            />
+      />
 
-            <Button
+      <Button type="primary" disabled={!assignment.employeeid} onClick={handleAssignment}>
-                type='primary'
+        Assign
-                disabled={!assignment.employeeid}
+      </Button>
-                onClick={handleAssignment}>
+      <Button onClick={() => setVisibility(false)}>Close</Button>
-                Assign
+    </div>
-            </Button>
+  );
-            <Button onClick={() => setVisibility(false)}>Close</Button>
-        </div>
-    );
 
-    return (
+  return (
-        <Popover content={popContent} open={visibility}>
+    <Popover content={popContent} open={visibility}>
-            <Button onClick={() => setVisibility(true)}>
+      <Button onClick={() => setVisibility(true)}>{t("allocations.actions.assign")}</Button>
-                {t("allocations.actions.assign")}
+    </Popover>
-            </Button>
+  );
-        </Popover>
-    );
 }
 
 export default connect(mapStateToProps, null)(AllocationsAssignmentComponent);

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

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

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

@@ -1,47 +1,43 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import AllocationsAssignmentComponent from "./allocations-assignment.component";
-import {useMutation} from "@apollo/client";
+import { useMutation } from "@apollo/client";
-import {INSERT_ALLOCATION} from "../../graphql/allocations.queries";
+import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {notification} from "antd";
+import { notification } from "antd";
 
-export default function AllocationsAssignmentContainer({
+export default function AllocationsAssignmentContainer({ jobLineId, hours, refetch }) {
-                                                           jobLineId,
+  const visibilityState = useState(false);
-                                                           hours,
+  const { t } = useTranslation();
-                                                           refetch,
+  const [assignment, setAssignment] = useState({
-                                                       }) {
+    joblineid: jobLineId,
-    const visibilityState = useState(false);
+    hours: parseFloat(hours),
-    const {t} = useTranslation();
+    employeeid: null
-    const [assignment, setAssignment] = useState({
+  });
-        joblineid: jobLineId,
+  const [insertAllocation] = useMutation(INSERT_ALLOCATION);
-        hours: parseFloat(hours),
-        employeeid: null,
-    });
-    const [insertAllocation] = useMutation(INSERT_ALLOCATION);
 
-    const handleAssignment = () => {
+  const handleAssignment = () => {
-        insertAllocation({variables: {alloc: {...assignment}}})
+    insertAllocation({ variables: { alloc: { ...assignment } } })
-            .then((r) => {
+      .then((r) => {
-                notification["success"]({
+        notification["success"]({
-                    message: t("allocations.successes.save"),
+          message: t("allocations.successes.save")
-                });
+        });
-                visibilityState[1](false);
+        visibilityState[1](false);
-                if (refetch) refetch();
+        if (refetch) refetch();
-            })
+      })
-            .catch((error) => {
+      .catch((error) => {
-                notification["error"]({
+        notification["error"]({
-                    message: t("employees.errors.saving", {message: error.message}),
+          message: t("employees.errors.saving", { message: error.message })
-                });
+        });
-            });
+      });
-    };
+  };
 
-    return (
+  return (
-        <AllocationsAssignmentComponent
+    <AllocationsAssignmentComponent
-            handleAssignment={handleAssignment}
+      handleAssignment={handleAssignment}
-            maxHours={hours}
+      maxHours={hours}
-            assignment={assignment}
+      assignment={assignment}
-            setAssignment={setAssignment}
+      setAssignment={setAssignment}
-            visibilityState={visibilityState}
+      visibilityState={visibilityState}
-        />
+    />
-    );
+  );
 }

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

@@ -1,68 +1,62 @@
-import {Button, Popover, Select} from "antd";
+import { Button, Popover, Select } from "antd";
 import React from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 
 export default connect(
-    mapStateToProps,
+  mapStateToProps,
-    null
+  null
 )(function AllocationsBulkAssignmentComponent({
-                                                  disabled,
+  disabled,
-                                                  bodyshop,
+  bodyshop,
-                                                  handleAssignment,
+  handleAssignment,
-                                                  assignment,
+  assignment,
-                                                  setAssignment,
+  setAssignment,
-                                                  visibilityState,
+  visibilityState
-                                              }) {
+}) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    const onChange = (e) => {
+  const onChange = (e) => {
-        setAssignment({...assignment, employeeid: e});
+    setAssignment({ ...assignment, employeeid: e });
-    };
+  };
 
-    const [visibility, setVisibility] = visibilityState;
+  const [visibility, setVisibility] = visibilityState;
 
-    const popContent = (
+  const popContent = (
-        <div>
+    <div>
-            <Select
+      <Select
-                showSearch
+        showSearch
-                style={{width: 200}}
+        style={{ width: 200 }}
-                placeholder="Select a person"
+        placeholder="Select a person"
-                optionFilterProp="children"
+        optionFilterProp="children"
-                onChange={onChange}
+        onChange={onChange}
-                filterOption={(input, option) =>
+        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
-                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      >
-                }
+        {bodyshop.employees.map((emp) => (
-            >
+          <Select.Option value={emp.id} key={emp.id}>
-                {bodyshop.employees.map((emp) => (
+            {`${emp.first_name} ${emp.last_name}`}
-                    <Select.Option value={emp.id} key={emp.id}>
+          </Select.Option>
-                        {`${emp.first_name} ${emp.last_name}`}
+        ))}
-                    </Select.Option>
+      </Select>
-                ))}
-            </Select>
 
-            <Button
+      <Button type="primary" disabled={!assignment.employeeid} onClick={handleAssignment}>
-                type="primary"
+        Assign
-                disabled={!assignment.employeeid}
+      </Button>
-                onClick={handleAssignment}
+      <Button onClick={() => setVisibility(false)}>Close</Button>
-            >
+    </div>
-                Assign
+  );
-            </Button>
-            <Button onClick={() => setVisibility(false)}>Close</Button>
-        </div>
-    );
 
-    return (
+  return (
-        <Popover content={popContent} open={visibility}>
+    <Popover content={popContent} open={visibility}>
-            <Button disabled={disabled} onClick={() => setVisibility(true)}>
+      <Button disabled={disabled} onClick={() => setVisibility(true)}>
-                {t("allocations.actions.assign")}
+        {t("allocations.actions.assign")}
-            </Button>
+      </Button>
-        </Popover>
+    </Popover>
-    );
+  );
 });

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

@@ -1,47 +1,44 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
-import {useMutation} from "@apollo/client";
+import { useMutation } from "@apollo/client";
-import {INSERT_ALLOCATION} from "../../graphql/allocations.queries";
+import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {notification} from "antd";
+import { notification } from "antd";
 
-export default function AllocationsBulkAssignmentContainer({
+export default function AllocationsBulkAssignmentContainer({ jobLines, refetch }) {
-                                                               jobLines,
+  const visibilityState = useState(false);
-                                                               refetch,
+  const { t } = useTranslation();
-                                                           }) {
+  const [assignment, setAssignment] = useState({
-    const visibilityState = useState(false);
+    employeeid: null
-    const {t} = useTranslation();
+  });
-    const [assignment, setAssignment] = useState({
+  const [insertAllocation] = useMutation(INSERT_ALLOCATION);
-        employeeid: null,
+
+  const handleAssignment = () => {
+    const allocs = jobLines.reduce((acc, value) => {
+      acc.push({
+        joblineid: value.id,
+        hours: parseFloat(value.mod_lb_hrs) || 0,
+        employeeid: assignment.employeeid
+      });
+      return acc;
+    }, []);
+
+    insertAllocation({ variables: { alloc: allocs } }).then((r) => {
+      notification["success"]({
+        message: t("employees.successes.save")
+      });
+      visibilityState[1](false);
+      if (refetch) refetch();
     });
-    const [insertAllocation] = useMutation(INSERT_ALLOCATION);
+  };
 
-    const handleAssignment = () => {
+  return (
-        const allocs = jobLines.reduce((acc, value) => {
+    <AllocationsBulkAssignment
-            acc.push({
+      disabled={jobLines.length > 0 ? false : true}
-                joblineid: value.id,
+      handleAssignment={handleAssignment}
-                hours: parseFloat(value.mod_lb_hrs) || 0,
+      assignment={assignment}
-                employeeid: assignment.employeeid,
+      setAssignment={setAssignment}
-            });
+      visibilityState={visibilityState}
-            return acc;
+    />
-        }, []);
+  );
-
-        insertAllocation({variables: {alloc: allocs}}).then((r) => {
-            notification["success"]({
-                message: t("employees.successes.save"),
-            });
-            visibilityState[1](false);
-            if (refetch) refetch();
-        });
-    };
-
-    return (
-        <AllocationsBulkAssignment
-            disabled={jobLines.length > 0 ? false : true}
-            handleAssignment={handleAssignment}
-            assignment={assignment}
-            setAssignment={setAssignment}
-            visibilityState={visibilityState}
-        />
-    );
 }

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

@@ -1,20 +1,14 @@
 import Icon from "@ant-design/icons";
 import React from "react";
-import {MdRemoveCircleOutline} from "react-icons/md";
+import { MdRemoveCircleOutline } from "react-icons/md";
 
-export default function AllocationsLabelComponent({allocation, handleClick}) {
+export default function AllocationsLabelComponent({ allocation, handleClick }) {
-    return (
+  return (
-        <div style={{display: "flex", alignItems: "center"}}>
+    <div style={{ display: "flex", alignItems: "center" }}>
       <span>
-        {`${allocation.employee.first_name || ""} ${
+        {`${allocation.employee.first_name || ""} ${allocation.employee.last_name || ""} (${allocation.hours || ""})`}
-            allocation.employee.last_name || ""
-        } (${allocation.hours || ""})`}
       </span>
-            <Icon
+      <Icon style={{ color: "red", padding: "0px 4px" }} component={MdRemoveCircleOutline} onClick={handleClick} />
-                style={{color: "red", padding: "0px 4px"}}
+    </div>
-                component={MdRemoveCircleOutline}
+  );
-                onClick={handleClick}
-            />
-        </div>
-    );
 }

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

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

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

@@ -1,85 +1,75 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {Table} from "antd";
+import { Table } from "antd";
-import {alphaSort} from "../../utils/sorters";
+import { alphaSort } from "../../utils/sorters";
-import {DateTimeFormatter} from "../../utils/DateFormatter";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import AuditTrailValuesComponent from "../audit-trail-values/audit-trail-values.component";
-import {pageLimit} from "../../utils/config";
+import { pageLimit } from "../../utils/config";
 
-export default function AuditTrailListComponent({loading, data}) {
+export default function AuditTrailListComponent({ loading, data }) {
-    const [state, setState] = useState({
+  const [state, setState] = useState({
-        sortedInfo: {},
+    sortedInfo: {},
-        filteredInfo: {},
+    filteredInfo: {}
-    });
+  });
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    const columns = [
+  const columns = [
-        {
+    {
-            title: t("audit.fields.created"),
+      title: t("audit.fields.created"),
-            dataIndex: " created",
+      dataIndex: " created",
-            key: " created",
+      key: " created",
-            width: "10%",
+      width: "10%",
-            render: (text, record) => (
+      render: (text, record) => <DateTimeFormatter>{record.created}</DateTimeFormatter>,
-                <DateTimeFormatter>{record.created}</DateTimeFormatter>
+      sorter: (a, b) => a.created - b.created,
-            ),
+      sortOrder: state.sortedInfo.columnKey === "created" && state.sortedInfo.order
-            sorter: (a, b) => a.created - b.created,
+    },
-            sortOrder:
+    {
-                state.sortedInfo.columnKey === "created" && state.sortedInfo.order,
+      title: t("audit.fields.operation"),
-        },
+      dataIndex: "operation",
-        {
+      key: "operation",
-            title: t("audit.fields.operation"),
+      width: "10%",
-            dataIndex: "operation",
+      sorter: (a, b) => alphaSort(a.operation, b.operation),
-            key: "operation",
+      sortOrder: state.sortedInfo.columnKey === "operation" && state.sortedInfo.order
-            width: "10%",
+    },
-            sorter: (a, b) => alphaSort(a.operation, b.operation),
+    {
-            sortOrder:
+      title: t("audit.fields.values"),
-                state.sortedInfo.columnKey === "operation" && state.sortedInfo.order,
+      dataIndex: " old_val",
-        },
+      key: " old_val",
-        {
+      width: "10%",
-            title: t("audit.fields.values"),
+      render: (text, record) => <AuditTrailValuesComponent oldV={record.old_val} newV={record.new_val} />
-            dataIndex: " old_val",
+    },
-            key: " old_val",
+    {
-            width: "10%",
+      title: t("audit.fields.useremail"),
-            render: (text, record) => (
+      dataIndex: "useremail",
-                <AuditTrailValuesComponent
+      key: "useremail",
-                    oldV={record.old_val}
+      width: "10%",
-                    newV={record.new_val}
+      sorter: (a, b) => alphaSort(a.useremail, b.useremail),
-                />
+      sortOrder: state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order
-            ),
+    }
-        },
+  ];
-        {
-            title: t("audit.fields.useremail"),
-            dataIndex: "useremail",
-            key: "useremail",
-            width: "10%",
-            sorter: (a, b) => alphaSort(a.useremail, b.useremail),
-            sortOrder:
-                state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order,
-        },
-    ];
 
-    const formItemLayout = {
+  const formItemLayout = {
-        labelCol: {
+    labelCol: {
-            xs: {span: 12},
+      xs: { span: 12 },
-            sm: {span: 5},
+      sm: { span: 5 }
-        },
+    },
-        wrapperCol: {
+    wrapperCol: {
-            xs: {span: 24},
+      xs: { span: 24 },
-            sm: {span: 12},
+      sm: { span: 12 }
-        },
+    }
-    };
+  };
-    const handleTableChange = (pagination, filters, sorter) => {
+  const handleTableChange = (pagination, filters, sorter) => {
-        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    };
+  };
 
-    return (
+  return (
-        <Table
+    <Table
-            {...formItemLayout}
+      {...formItemLayout}
-            loading={loading}
+      loading={loading}
-            pagination={{position: "top", defaultPageSize: pageLimit}}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
-            columns={columns}
+      columns={columns}
-            rowKey="id"
+      rowKey="id"
-            dataSource={data}
+      dataSource={data}
-            onChange={handleTableChange}
+      onChange={handleTableChange}
-        />
+    />
-    );
+  );
 }

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

@@ -1,40 +1,34 @@
 import React from "react";
 import AuditTrailListComponent from "./audit-trail-list.component";
-import {useQuery} from "@apollo/client";
+import { useQuery } from "@apollo/client";
-import {QUERY_AUDIT_TRAIL} from "../../graphql/audit_trail.queries";
+import { QUERY_AUDIT_TRAIL } from "../../graphql/audit_trail.queries";
 import AlertComponent from "../alert/alert.component";
-import {logImEXEvent} from "../../firebase/firebase.utils";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import EmailAuditTrailListComponent from "./email-audit-trail-list.component";
-import {Card, Row} from "antd";
+import { Card, Row } from "antd";
 
-export default function AuditTrailListContainer({recordId}) {
+export default function AuditTrailListContainer({ recordId }) {
-    const {loading, error, data} = useQuery(QUERY_AUDIT_TRAIL, {
+  const { loading, error, data } = useQuery(QUERY_AUDIT_TRAIL, {
-        variables: {id: recordId},
+    variables: { id: recordId },
-        fetchPolicy: "network-only",
+    fetchPolicy: "network-only",
-        nextFetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
-    });
+  });
 
-    logImEXEvent("audittrail_view", {recordId});
+  logImEXEvent("audittrail_view", { recordId });
-    return (
+  return (
-        <div>
+    <div>
-            {error ? (
+      {error ? (
-                <AlertComponent type="error" message={error.message}/>
+        <AlertComponent type="error" message={error.message} />
-            ) : (
+      ) : (
-                <Row gutter={[16, 16]}>
+        <Row gutter={[16, 16]}>
-                    <Card>
+          <Card>
-                        <AuditTrailListComponent
+            <AuditTrailListComponent loading={loading} data={data ? data.audit_trail : []} />
-                            loading={loading}
+          </Card>
-                            data={data ? data.audit_trail : []}
+          <Card>
-                        />
+            <EmailAuditTrailListComponent loading={loading} data={data ? data.audit_trail : []} />
-                    </Card>
+          </Card>
-                    <Card>
+        </Row>
-                        <EmailAuditTrailListComponent
+      )}
-                            loading={loading}
+    </div>
-                            data={data ? data.audit_trail : []}
+  );
-                        />
-                    </Card>
-                </Row>
-            )}
-        </div>
-    );
 }

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

@@ -1,64 +1,60 @@
-import {Table} from "antd";
+import { Table } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {DateTimeFormatter} from "../../utils/DateFormatter";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
-import {alphaSort} from "../../utils/sorters";
+import { alphaSort } from "../../utils/sorters";
-import {pageLimit} from "../../utils/config";
+import { pageLimit } from "../../utils/config";
 
-export default function EmailAuditTrailListComponent({loading, data}) {
+export default function EmailAuditTrailListComponent({ loading, data }) {
-    const [state, setState] = useState({
+  const [state, setState] = useState({
-        sortedInfo: {},
+    sortedInfo: {},
-        filteredInfo: {},
+    filteredInfo: {}
-    });
+  });
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    const columns = [
+  const columns = [
-        {
+    {
-            title: t("audit.fields.created"),
+      title: t("audit.fields.created"),
-            dataIndex: " created",
+      dataIndex: " created",
-            key: " created",
+      key: " created",
-            width: "10%",
+      width: "10%",
-            render: (text, record) => (
+      render: (text, record) => <DateTimeFormatter>{record.created}</DateTimeFormatter>,
-                <DateTimeFormatter>{record.created}</DateTimeFormatter>
+      sorter: (a, b) => a.created - b.created,
-            ),
+      sortOrder: state.sortedInfo.columnKey === "created" && state.sortedInfo.order
-            sorter: (a, b) => a.created - b.created,
+    },
-            sortOrder:
-                state.sortedInfo.columnKey === "created" && state.sortedInfo.order,
-        },
 
-        {
+    {
-            title: t("audit.fields.useremail"),
+      title: t("audit.fields.useremail"),
-            dataIndex: "useremail",
+      dataIndex: "useremail",
-            key: "useremail",
+      key: "useremail",
-            width: "10%",
+      width: "10%",
-            sorter: (a, b) => alphaSort(a.useremail, b.useremail),
+      sorter: (a, b) => alphaSort(a.useremail, b.useremail),
-            sortOrder:
+      sortOrder: state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order
-                state.sortedInfo.columnKey === "useremail" && state.sortedInfo.order,
+    }
-        },
+  ];
-    ];
 
-    const formItemLayout = {
+  const formItemLayout = {
-        labelCol: {
+    labelCol: {
-            xs: {span: 12},
+      xs: { span: 12 },
-            sm: {span: 5},
+      sm: { span: 5 }
-        },
+    },
-        wrapperCol: {
+    wrapperCol: {
-            xs: {span: 24},
+      xs: { span: 24 },
-            sm: {span: 12},
+      sm: { span: 12 }
-        },
+    }
-    };
+  };
-    const handleTableChange = (pagination, filters, sorter) => {
+  const handleTableChange = (pagination, filters, sorter) => {
-        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    };
+  };
 
-    return (
+  return (
-        <Table
+    <Table
-            {...formItemLayout}
+      {...formItemLayout}
-            loading={loading}
+      loading={loading}
-            pagination={{position: "top", defaultPageSize: pageLimit}}
+      pagination={{ position: "top", defaultPageSize: pageLimit }}
-            columns={columns}
+      columns={columns}
-            rowKey="id"
+      rowKey="id"
-            dataSource={data}
+      dataSource={data}
-            onChange={handleTableChange}
+      onChange={handleTableChange}
-        />
+    />
-    );
+  );
 }

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

@@ -1,30 +1,30 @@
 import React from "react";
-import {List} from "antd";
+import { List } from "antd";
 import Icon from "@ant-design/icons";
-import {FaArrowRight} from "react-icons/fa";
+import { FaArrowRight } from "react-icons/fa";
 
-export default function AuditTrailValuesComponent({oldV, newV}) {
+export default function AuditTrailValuesComponent({ oldV, newV }) {
-    if (!oldV && !newV) return <div></div>;
+  if (!oldV && !newV) return <div></div>;
-
-    if (!oldV && newV)
-        return (
-            <List style={{width: "800px"}} bordered size='small'>
-                {Object.keys(newV).map((key, idx) => (
-                    <List.Item key={idx} value={key}>
-                        {key}: {JSON.stringify(newV[key])}
-                    </List.Item>
-                ))}
-            </List>
-        );
 
+  if (!oldV && newV)
     return (
-        <List style={{width: "800px"}} bordered size='small'>
+      <List style={{ width: "800px" }} bordered size="small">
-            {Object.keys(oldV).map((key, idx) => (
+        {Object.keys(newV).map((key, idx) => (
-                <List.Item key={idx}>
+          <List.Item key={idx} value={key}>
-                    {key}: {oldV[key]} <Icon component={FaArrowRight}/>
+            {key}: {JSON.stringify(newV[key])}
-                    {JSON.stringify(newV[key])}
+          </List.Item>
-                </List.Item>
+        ))}
-            ))}
+      </List>
-        </List>
     );
+
+  return (
+    <List style={{ width: "800px" }} bordered size="small">
+      {Object.keys(oldV).map((key, idx) => (
+        <List.Item key={idx}>
+          {key}: {oldV[key]} <Icon component={FaArrowRight} />
+          {JSON.stringify(newV[key])}
+        </List.Item>
+      ))}
+    </List>
+  );
 }

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

@@ -1,23 +1,15 @@
-import {Popover, Tag} from "antd";
+import { Popover, Tag } from "antd";
 import React from "react";
 import Barcode from "react-barcode";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 
-export default function BarcodePopupComponent({value, children}) {
+export default function BarcodePopupComponent({ value, children }) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    return (
+  return (
-        <div>
+    <div>
-            <Popover
+      <Popover content={<Barcode value={value || ""} background="transparent" displayValue={false} />}>
-                content={
+        {children ? children : <Tag>{t("general.labels.barcode")}</Tag>}
-                    <Barcode
+      </Popover>
-                        value={value || ""}
+    </div>
-                        background="transparent"
+  );
-                        displayValue={false}
-                    />
-                }
-            >
-                {children ? children : <Tag>{t("general.labels.barcode")}</Tag>}
-            </Popover>
-        </div>
-    );
 }

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

@@ -1,136 +1,128 @@
-import {Checkbox, Form, Skeleton, Typography} from "antd";
+import { Checkbox, Form, Skeleton, Typography } from "antd";
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
 import "./bill-cm-returns-table.styles.scss";
 
-export default function BillCmdReturnsTableComponent({
+export default function BillCmdReturnsTableComponent({ form, returnLoading, returnData }) {
-                                                         form,
+  const { t } = useTranslation();
-                                                         returnLoading,
-                                                         returnData,
-                                                     }) {
-    const {t} = useTranslation();
 
-    useEffect(() => {
+  useEffect(() => {
-        if (returnData) {
+    if (returnData) {
-            form.setFieldsValue({
+      form.setFieldsValue({
-                outstanding_returns: returnData.parts_order_lines,
+        outstanding_returns: returnData.parts_order_lines
-            });
+      });
+    }
+  }, [returnData, form]);
+
+  return (
+    <Form.Item
+      shouldUpdate={(prev, cur) =>
+        prev.jobid !== cur.jobid || prev.is_credit_memo !== cur.is_credit_memo || prev.vendorid !== cur.vendorid
+      }
+      noStyle
+    >
+      {() => {
+        const isReturn = form.getFieldValue("is_credit_memo");
+
+        if (!isReturn) {
+          return null;
         }
-    }, [returnData, form]);
 
-    return (
+        if (returnLoading) return <Skeleton />;
-        <Form.Item
-            shouldUpdate={(prev, cur) =>
-                prev.jobid !== cur.jobid ||
-                prev.is_credit_memo !== cur.is_credit_memo ||
-                prev.vendorid !== cur.vendorid
-            }
-            noStyle
-        >
-            {() => {
-                const isReturn = form.getFieldValue("is_credit_memo");
 
-                if (!isReturn) {
+        return (
-                    return null;
+          <Form.List name="outstanding_returns">
-                }
+            {(fields, { add, remove, move }) => {
+              return (
+                <>
+                  <Typography.Title level={4}>{t("bills.labels.creditsnotreceived")}</Typography.Title>
+                  <table className="bill-cm-returns-table">
+                    <thead>
+                      <tr>
+                        <th>{t("parts_orders.fields.line_desc")}</th>
+                        <th>{t("parts_orders.fields.part_type")}</th>
+                        <th>{t("parts_orders.fields.quantity")}</th>
+                        <th>{t("parts_orders.fields.act_price")}</th>
+                        <th>{t("parts_orders.fields.cost")}</th>
+                        <th>{t("parts_orders.labels.mark_as_received")}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {fields.map((field, index) => (
+                        <tr key={field.key}>
+                          <td>
+                            <Form.Item
+                              //   label={t("joblines.fields.line_desc")}
+                              key={`${index}line_desc`}
+                              name={[field.name, "line_desc"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
 
-                if (returnLoading) return <Skeleton/>;
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}part_type`}
+                              name={[field.name, "part_type"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}quantity`}
+                              name={[field.name, "quantity"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}act_price`}
+                              name={[field.name, "act_price"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}cost`}
+                              name={[field.name, "cost"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
 
-                return (
+                          <td>
-                    <Form.List name="outstanding_returns">
+                            <Form.Item
-                        {(fields, {add, remove, move}) => {
+                              span={2}
-                            return (
+                              //label={t("joblines.fields.mod_lb_hrs")}
-                                <>
+                              key={`${index}cm_received`}
-                                    <Typography.Title level={4}>
+                              name={[field.name, "cm_received"]}
-                                        {t("bills.labels.creditsnotreceived")}
+                              valuePropName="checked"
-                                    </Typography.Title>
+                            >
-                                    <table className="bill-cm-returns-table">
+                              <Checkbox />
-                                        <thead>
+                            </Form.Item>
-                                        <tr>
+                          </td>
-                                            <th>{t("parts_orders.fields.line_desc")}</th>
+                        </tr>
-                                            <th>{t("parts_orders.fields.part_type")}</th>
+                      ))}
-                                            <th>{t("parts_orders.fields.quantity")}</th>
+                    </tbody>
-                                            <th>{t("parts_orders.fields.act_price")}</th>
+                  </table>
-                                            <th>{t("parts_orders.fields.cost")}</th>
+                </>
-                                            <th>{t("parts_orders.labels.mark_as_received")}</th>
+              );
-                                        </tr>
-                                        </thead>
-                                        <tbody>
-                                        {fields.map((field, index) => (
-                                            <tr key={field.key}>
-                                                <td>
-                                                    <Form.Item
-                                                        //   label={t("joblines.fields.line_desc")}
-                                                        key={`${index}line_desc`}
-                                                        name={[field.name, "line_desc"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent/>
-                                                    </Form.Item>
-                                                </td>
-
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}part_type`}
-                                                        name={[field.name, "part_type"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent/>
-                                                    </Form.Item>
-                                                </td>
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}quantity`}
-                                                        name={[field.name, "quantity"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent/>
-                                                    </Form.Item>
-                                                </td>
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}act_price`}
-                                                        name={[field.name, "act_price"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent type="currency"/>
-                                                    </Form.Item>
-                                                </td>
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}cost`}
-                                                        name={[field.name, "cost"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent type="currency"/>
-                                                    </Form.Item>
-                                                </td>
-
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}cm_received`}
-                                                        name={[field.name, "cm_received"]}
-                                                        valuePropName="checked"
-                                                    >
-                                                        <Checkbox/>
-                                                    </Form.Item>
-                                                </td>
-                                            </tr>
-                                        ))}
-                                        </tbody>
-                                    </table>
-                                </>
-                            );
-                        }}
-                    </Form.List>
-                );
             }}
-        </Form.Item>
+          </Form.List>
-    );
+        );
+      }}
+    </Form.Item>
+  );
 }

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

@@ -16,4 +16,4 @@
   tr:hover {
     background-color: #f5f5f5;
   }
-}
+}

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

@@ -1,80 +1,88 @@
-import {DeleteFilled} from "@ant-design/icons";
+import { DeleteFilled } from "@ant-design/icons";
-import {useMutation} from "@apollo/client";
+import { useMutation } from "@apollo/client";
-import {Button, notification, Popconfirm} from "antd";
+import { Button, notification, Popconfirm } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {DELETE_BILL} from "../../graphql/bills.queries";
+import { DELETE_BILL } from "../../graphql/bills.queries";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 
-export default function BillDeleteButton({bill, callback}) {
+const mapStateToProps = createStructuredSelector({});
-    const [loading, setLoading] = useState(false);
+const mapDispatchToProps = (dispatch) => ({
-    const {t} = useTranslation();
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
-    const [deleteBill] = useMutation(DELETE_BILL);
+});
 
-    const handleDelete = async () => {
+export default connect(mapStateToProps, mapDispatchToProps)(BillDeleteButton);
-        setLoading(true);
+
-        const result = await deleteBill({
+export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
-            variables: {billId: bill.id},
+  const [loading, setLoading] = useState(false);
-            update(cache, {errors}) {
+  const { t } = useTranslation();
-                if (errors) return;
+  const [deleteBill] = useMutation(DELETE_BILL);
-                cache.modify({
+
-                    fields: {
+  const handleDelete = async () => {
-                        bills(existingBills, {readField}) {
+    setLoading(true);
-                            return existingBills.filter(
+    const result = await deleteBill({
-                                (billref) => bill.id !== readField("id", billref)
+      variables: { billId: bill.id },
-                            );
+      update(cache, { errors }) {
-                        },
+        if (errors) return;
-                        search_bills(existingBills, {readField}) {
+        cache.modify({
-                            return existingBills.filter(
+          fields: {
-                                (billref) => bill.id !== readField("id", billref)
+            bills(existingBills, { readField }) {
-                            );
+              return existingBills.filter((billref) => bill.id !== readField("id", billref));
-                        },
-                    },
-                });
             },
-        });
+            search_bills(existingBills, { readField }) {
-
+              return existingBills.filter((billref) => bill.id !== readField("id", billref));
-        if (!!!result.errors) {
-            notification["success"]({message: t("bills.successes.deleted")});
-
-            if (callback && typeof callback === "function") callback(bill.id);
-        } else {
-            //Check if it's an fkey violation.
-            const error = JSON.stringify(result.errors);
-
-            if (error.toLowerCase().includes("inventory_billid_fkey")) {
-                notification["error"]({
-                    message: t("bills.errors.deleting", {
-                        error: t("bills.errors.existinginventoryline"),
-                    }),
-                });
-            } else {
-                notification["error"]({
-                    message: t("bills.errors.deleting", {
-                        error: JSON.stringify(result.errors),
-                    }),
-                });
             }
-        }
+          }
+        });
+      }
+    });
 
-        setLoading(false);
+    if (!!!result.errors) {
-    };
+      notification["success"]({ message: t("bills.successes.deleted") });
+      insertAuditTrail({
+        jobid: jobid,
+        operation: AuditTrailMapping.billdeleted(bill.invoice_number),
+        type: "billdeleted"
+      });
 
-    return (
+      if (callback && typeof callback === "function") callback(bill.id);
-        <RbacWrapper action="bills:delete" noauth={<></>}>
+    } else {
-            <Popconfirm
+      //Check if it's an fkey violation.
-                disabled={bill.exported}
+      const error = JSON.stringify(result.errors);
-                onConfirm={handleDelete}
+
-                title={t("bills.labels.deleteconfirm")}
+      if (error.toLowerCase().includes("inventory_billid_fkey")) {
-            >
+        notification["error"]({
-                <Button
+          message: t("bills.errors.deleting", {
-                    disabled={bill.exported}
+            error: t("bills.errors.existinginventoryline")
-                    // onClick={handleDelete}
+          })
-                    loading={loading}
+        });
-                >
+      } else {
-                    <DeleteFilled/>
+        notification["error"]({
-                </Button>
+          message: t("bills.errors.deleting", {
-            </Popconfirm>
+            error: JSON.stringify(result.errors)
-        </RbacWrapper>
+          })
-    );
+        });
+      }
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <RbacWrapper action="bills:delete" noauth={<></>}>
+      <Popconfirm disabled={bill.exported} onConfirm={handleDelete} title={t("bills.labels.deleteconfirm")}>
+        <Button
+          disabled={bill.exported}
+          // onClick={handleDelete}
+          loading={loading}
+        >
+          <DeleteFilled />
+        </Button>
+      </Popconfirm>
+    </RbacWrapper>
+  );
 }

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

@@ -1,17 +1,17 @@
-import {useMutation, useQuery} from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
-import {Button, Form, Popconfirm, Space} from "antd";
+import { Button, Divider, Form, Popconfirm, Space } from "antd";
 import dayjs from "../../utils/day";
 import queryString from "query-string";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {useLocation} from "react-router-dom";
+import { useLocation } from "react-router-dom";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {DELETE_BILL_LINE, INSERT_NEW_BILL_LINES, UPDATE_BILL_LINE} from "../../graphql/bill-lines.queries";
+import { DELETE_BILL_LINE, INSERT_NEW_BILL_LINES, UPDATE_BILL_LINE } from "../../graphql/bill-lines.queries";
-import {QUERY_BILL_BY_PK, UPDATE_BILL} from "../../graphql/bills.queries";
+import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
-import {insertAuditTrail} from "../../redux/application/application.actions";
+import { insertAuditTrail } from "../../redux/application/application.actions";
-import {setModalContext} from "../../redux/modals/modals.actions";
+import { setModalContext } from "../../redux/modals/modals.actions";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
@@ -22,226 +22,212 @@ import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-galler
 import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import BillDetailEditReturn from "./bill-detail-edit-return.component";
-import {PageHeader} from "@ant-design/pro-layout";
+import { PageHeader } from "@ant-design/pro-layout";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
-    setPartsOrderContext: (context) =>
+  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-        dispatch(setModalContext({context: context, modal: "partsOrder"})),
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
-    insertAuditTrail: ({jobid, operation}) =>
-        dispatch(insertAuditTrail({jobid, operation})),
 });
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BillDetailEditcontainer);
-    mapStateToProps,
-    mapDispatchToProps
-)(BillDetailEditcontainer);
 
-export function BillDetailEditcontainer({setPartsOrderContext, insertAuditTrail, bodyshop,}) {
+export function BillDetailEditcontainer({ setPartsOrderContext, insertAuditTrail, bodyshop }) {
-    const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useLocation().search);
 
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    const [form] = Form.useForm();
+  const [form] = Form.useForm();
-    const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false);
-    const [updateLoading, setUpdateLoading] = useState(false);
+  const [updateLoading, setUpdateLoading] = useState(false);
-    const [update_bill] = useMutation(UPDATE_BILL);
+  const [update_bill] = useMutation(UPDATE_BILL);
-    const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
+  const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
-    const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
+  const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
-    const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
+  const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
 
-    const {loading, error, data, refetch} = useQuery(QUERY_BILL_BY_PK, {
+  const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
-        variables: {billid: search.billid},
+    variables: { billid: search.billid },
-        skip: !!!search.billid,
+    skip: !!!search.billid,
-        fetchPolicy: "network-only",
+    fetchPolicy: "network-only",
-        nextFetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
+  });
+
+  // ... rest of the code remains the same
+
+  const handleSave = () => {
+    //It's got a previously deducted bill line!
+    if (
+      data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
+      form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length > 0
+    )
+      setOpen(true);
+    else {
+      form.submit();
+    }
+  };
+
+  const handleFinish = async (values) => {
+    setUpdateLoading(true);
+    //let adjustmentsToInsert = {};
+
+    const { billlines, upload, ...bill } = values;
+    const updates = [];
+    updates.push(
+      update_bill({
+        variables: { billId: search.billid, bill: bill }
+      })
+    );
+
+    billlines.forEach((l) => {
+      delete l.selected;
     });
 
-    // ... rest of the code remains the same
+    //Find bill lines that were deleted.
+    const deletedJobLines = [];
 
-    const handleSave = () => {
+    data.bills_by_pk.billlines.forEach((a) => {
-        //It's got a previously deducted bill line!
+      const matchingRecord = billlines.find((b) => b.id === a.id);
-        if (
+      if (!matchingRecord) {
-            data.bills_by_pk.billlines.filter((b) => b.deductedfromlbr).length > 0 ||
+        deletedJobLines.push(a);
-            form.getFieldValue("billlines").filter((b) => b.deductedfromlbr).length >
+      }
-            0
+    });
-        )
-            setOpen(true);
-        else {
-            form.submit();
-        }
-    };
 
-    const handleFinish = async (values) => {
+    deletedJobLines.forEach((d) => {
-        setUpdateLoading(true);
+      updates.push(deleteBillLine({ variables: { id: d.id } }));
-        //let adjustmentsToInsert = {};
+    });
 
-        const {billlines, upload, ...bill} = values;
+    billlines.forEach((billline) => {
-        const updates = [];
+      const { deductedfromlbr, inventories, jobline, ...il } = billline;
+      delete il.__typename;
+
+      if (il.id) {
         updates.push(
-            update_bill({
+          updateBillLine({
-                variables: {billId: search.billid, bill: bill},
+            variables: {
-            })
+              billLineId: il.id,
+              billLine: {
+                ...il,
+                deductedfromlbr: deductedfromlbr,
+                joblineid: il.joblineid === "noline" ? null : il.joblineid
+              }
+            }
+          })
         );
-
+      } else {
-        billlines.forEach((l) => {
+        //It's a new line, have to insert it.
-            delete l.selected;
+        updates.push(
-        });
+          insertBillLine({
-
+            variables: {
-        //Find bill lines that were deleted.
+              billLines: [
-        const deletedJobLines = [];
+                {
-
+                  ...il,
-        data.bills_by_pk.billlines.forEach((a) => {
+                  deductedfromlbr: deductedfromlbr,
-            const matchingRecord = billlines.find((b) => b.id === a.id);
+                  billid: search.billid,
-            if (!matchingRecord) {
+                  joblineid: il.joblineid === "noline" ? null : il.joblineid
-                deletedJobLines.push(a);
+                }
+              ]
             }
-        });
+          })
+        );
+      }
+    });
 
-        deletedJobLines.forEach((d) => {
+    await Promise.all(updates);
-            updates.push(deleteBillLine({variables: {id: d.id}}));
-        });
 
-        billlines.forEach((billline) => {
+    insertAuditTrail({
-            const {deductedfromlbr, inventories, jobline, ...il} = billline;
+      jobid: bill.jobid,
-            delete il.__typename;
+      billid: search.billid,
+      operation: AuditTrailMapping.billupdated(bill.invoice_number),
+      type: "billupdated"
+    });
 
-            if (il.id) {
+    await refetch();
-                updates.push(
+    form.setFieldsValue(transformData(data));
-                    updateBillLine({
+    form.resetFields();
-                        variables: {
+    setOpen(false);
-                            billLineId: il.id,
+    setUpdateLoading(false);
-                            billLine: {
+  };
-                                ...il,
-                                deductedfromlbr: deductedfromlbr,
-                                joblineid: il.joblineid === "noline" ? null : il.joblineid,
-                            },
-                        },
-                    })
-                );
-            } else {
-                //It's a new line, have to insert it.
-                updates.push(
-                    insertBillLine({
-                        variables: {
-                            billLines: [
-                                {
-                                    ...il,
-                                    deductedfromlbr: deductedfromlbr,
-                                    billid: search.billid,
-                                    joblineid: il.joblineid === "noline" ? null : il.joblineid,
-                                },
-                            ],
-                        },
-                    })
-                );
-            }
-        });
 
-        await Promise.all(updates);
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
 
-        insertAuditTrail({
+  const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
-            jobid: bill.jobid,
-            billid: search.billid,
-            operation: AuditTrailMapping.billupdated(bill.invoice_number),
-        });
 
-        await refetch();
+  return (
-        form.setFieldsValue(transformData(data));
+    <>
-        form.resetFields();
+      {loading && <LoadingSkeleton />}
-        setOpen(false);
+      {data && (
-        setUpdateLoading(false);
-    };
-
-    if (error) return <AlertComponent message={error.message} type="error"/>;
-    if (!search.billid) return <></>; //<div>{t("bills.labels.noneselected")}</div>;
-
-    const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
-
-    return (
         <>
-            {loading && <LoadingSkeleton/>}
+          <PageHeader
-            {data && (
+            title={data && `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`}
-                <>
+            extra={
-                    <PageHeader
+              <Space>
-                        title={
+                <BillDetailEditReturn data={data} />
-                            data &&
+                <BillPrintButton billid={search.billid} />
-                            `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+                <Popconfirm
-                        }
+                  open={open}
-                        extra={
+                  onConfirm={() => form.submit()}
-                            <Space>
+                  onCancel={() => setOpen(false)}
-                                <BillDetailEditReturn data={data}/>
+                  okButtonProps={{ loading: updateLoading }}
-                                <BillPrintButton billid={search.billid}/>
+                  title={t("bills.labels.editadjwarning")}
-                                <Popconfirm
+                >
-                                    open={open}
+                  <Button
-                                    onConfirm={() => form.submit()}
+                    htmlType="submit"
-                                    onCancel={() => setOpen(false)}
+                    disabled={exported}
-                                    okButtonProps={{loading: updateLoading}}
+                    onClick={handleSave}
-                                    title={t("bills.labels.editadjwarning")}
+                    loading={updateLoading}
-                                >
+                    type="primary"
-                                    <Button
+                  >
-                                        htmlType="submit"
+                    {t("general.actions.save")}
-                                        disabled={exported}
+                  </Button>
-                                        onClick={handleSave}
+                </Popconfirm>
-                                        loading={updateLoading}
+                <BillReeportButtonComponent bill={data && data.bills_by_pk} />
-                                        type="primary"
+                <BillMarkExportedButton bill={data && data.bills_by_pk} />
-                                    >
+              </Space>
-                                        {t("general.actions.save")}
+            }
-                                    </Button>
+          />
-                                </Popconfirm>
+          <Form form={form} onFinish={handleFinish} initialValues={transformData(data)} layout="vertical">
-                                <BillReeportButtonComponent bill={data && data.bills_by_pk}/>
+            <BillFormContainer form={form} billEdit disabled={exported} />
-                                <BillMarkExportedButton bill={data && data.bills_by_pk}/>
+            <Divider orientation="left">{t("general.labels.media")}</Divider>
-                            </Space>
+            {bodyshop.uselocalmediaserver ? (
-                        }
+              <JobsDocumentsLocalGallery
-                    />
+                job={{ id: data ? data.bills_by_pk.jobid : null }}
-                    <Form
+                invoice_number={data ? data.bills_by_pk.invoice_number : null}
-                        form={form}
+                vendorid={data ? data.bills_by_pk.vendorid : null}
-                        onFinish={handleFinish}
+              />
-                        initialValues={transformData(data)}
+            ) : (
-                        layout="vertical"
+              <JobDocumentsGallery
-                    >
+                jobId={data ? data.bills_by_pk.jobid : null}
-                        <BillFormContainer form={form} billEdit disabled={exported}/>
+                billId={search.billid}
-
+                documentsList={data ? data.bills_by_pk.documents : []}
-                        {bodyshop.uselocalmediaserver ? (
+                billsCallback={refetch}
-                            <JobsDocumentsLocalGallery
+              />
-                                job={{id: data ? data.bills_by_pk.jobid : null}}
-                                invoice_number={data ? data.bills_by_pk.invoice_number : null}
-                                vendorid={data ? data.bills_by_pk.vendorid : null}
-                            />
-                        ) : (
-                            <JobDocumentsGallery
-                                jobId={data ? data.bills_by_pk.jobid : null}
-                                billId={search.billid}
-                                documentsList={data ? data.bills_by_pk.documents : []}
-                                billsCallback={refetch}
-                            />
-                        )}
-                    </Form>
-                </>
             )}
+          </Form>
         </>
-    );
+      )}
+    </>
+  );
 }
 
 const transformData = (data) => {
-    return data
+  return data
-        ? {
+    ? {
-            ...data.bills_by_pk,
+        ...data.bills_by_pk,
 
-            billlines: data.bills_by_pk.billlines.map((i) => {
+        billlines: data.bills_by_pk.billlines.map((i) => {
-                return {
+          return {
-                    ...i,
+            ...i,
-                    joblineid: !!i.joblineid ? i.joblineid : "noline",
+            joblineid: !!i.joblineid ? i.joblineid : "noline",
-                    applicable_taxes: {
+            applicable_taxes: {
-                        federal:
+              federal: (i.applicable_taxes && i.applicable_taxes.federal) || false,
-                            (i.applicable_taxes && i.applicable_taxes.federal) || false,
+              state: (i.applicable_taxes && i.applicable_taxes.state) || false,
-                        state: (i.applicable_taxes && i.applicable_taxes.state) || false,
+              local: (i.applicable_taxes && i.applicable_taxes.local) || false
-                        local: (i.applicable_taxes && i.applicable_taxes.local) || false,
+            }
-                    },
+          };
-                };
+        }),
-            }),
+        date: data.bills_by_pk ? dayjs(data.bills_by_pk.date) : null
-            date: data.bills_by_pk ? dayjs(data.bills_by_pk.date) : null,
+      }
-        }
+    : {};
-        : {};
 };

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

@@ -1,185 +1,169 @@
-import {Button, Checkbox, Form, Modal} from "antd";
+import { Button, Checkbox, Form, Modal } from "antd";
 import queryString from "query-string";
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {useLocation, useNavigate} from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {insertAuditTrail} from "../../redux/application/application.actions";
+import { insertAuditTrail } from "../../redux/application/application.actions";
-import {setModalContext} from "../../redux/modals/modals.actions";
+import { setModalContext } from "../../redux/modals/modals.actions";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
-    setPartsOrderContext: (context) =>
+  setPartsOrderContext: (context) => dispatch(setModalContext({ context: context, modal: "partsOrder" })),
-        dispatch(setModalContext({context: context, modal: "partsOrder"})),
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
-    insertAuditTrail: ({jobid, operation}) =>
-        dispatch(insertAuditTrail({jobid, operation})),
 });
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BillDetailEditReturn);
-    mapStateToProps,
-    mapDispatchToProps
-)(BillDetailEditReturn);
 
-export function BillDetailEditReturn({
+export function BillDetailEditReturn({ setPartsOrderContext, insertAuditTrail, bodyshop, data, disabled }) {
-                                         setPartsOrderContext,
+  const search = queryString.parse(useLocation().search);
-                                         insertAuditTrail,
+  const history = useNavigate();
-                                         bodyshop,
+  const { t } = useTranslation();
-                                         data,
+  const [form] = Form.useForm();
-                                         disabled,
+  const [open, setOpen] = useState(false);
-                                     }) {
-    const search = queryString.parse(useLocation().search);
-    const history = useNavigate();
-    const {t} = useTranslation();
-    const [form] = Form.useForm();
-    const [open, setOpen] = useState(false);
 
-    const handleFinish = ({billlines}) => {
+  const handleFinish = ({ billlines }) => {
-        const selectedLines = billlines.filter((l) => l.selected).map((l) => l.id);
+    const selectedLines = billlines.filter((l) => l.selected).map((l) => l.id);
 
-        setPartsOrderContext({
+    setPartsOrderContext({
-            actions: {},
+      actions: {},
-            context: {
+      context: {
-                jobId: data.bills_by_pk.jobid,
+        jobId: data.bills_by_pk.jobid,
-                vendorId: data.bills_by_pk.vendorid,
+        job: data.bills_by_pk.job,
-                returnFromBill: data.bills_by_pk.id,
+        vendorId: data.bills_by_pk.vendorid,
-                invoiceNumber: data.bills_by_pk.invoice_number,
+        returnFromBill: data.bills_by_pk.id,
-                linesToOrder: data.bills_by_pk.billlines
+        invoiceNumber: data.bills_by_pk.invoice_number,
-                    .filter((l) => selectedLines.includes(l.id))
+        linesToOrder: data.bills_by_pk.billlines
-                    .map((i) => {
+          .filter((l) => selectedLines.includes(l.id))
-                        return {
+          .map((i) => {
-                            line_desc: i.line_desc,
+            return {
-                            //  db_price: i.actual_price,
+              line_desc: i.line_desc,
-                            act_price: i.actual_price,
+              //  db_price: i.actual_price,
-                            cost: i.actual_cost,
+              act_price: i.actual_price,
-                            quantity: i.quantity,
+              cost: i.actual_cost,
-                            joblineid: i.joblineid,
+              quantity: i.quantity,
-                            oem_partno: i.jobline && i.jobline.oem_partno,
+              joblineid: i.joblineid,
-                            part_type: i.jobline && i.jobline.part_type,
+              oem_partno: i.jobline && i.jobline.oem_partno,
-                        };
+              part_type: i.jobline && i.jobline.part_type
-                    }),
+            };
-                isReturn: true,
+          }),
-            },
+        isReturn: true
-        });
+      }
-        delete search.billid;
+    });
+    delete search.billid;
 
-        history({search: queryString.stringify(search)});
+    history({ search: queryString.stringify(search) });
-        setOpen(false);
+    setOpen(false);
-    };
+  };
-    useEffect(() => {
+  useEffect(() => {
-        if (open === false) form.resetFields();
+    if (open === false) form.resetFields();
-    }, [open, form]);
+  }, [open, form]);
 
-    return (
+  return (
-        <>
+    <>
-            <Modal
+      <Modal
-                open={open}
+        open={open}
-                onCancel={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
-                destroyOnClose
+        destroyOnClose
-                title={t("bills.actions.return")}
+        title={t("bills.actions.return")}
-                onOk={() => form.submit()}
+        onOk={() => form.submit()}
-            >
+      >
-                <Form
+        <Form initialValues={data && data.bills_by_pk} onFinish={handleFinish} form={form}>
-                    initialValues={data && data.bills_by_pk}
+          <Form.List name={["billlines"]}>
-                    onFinish={handleFinish}
+            {(fields, { add, remove, move }) => {
-                    form={form}
+              return (
-                >
+                <table style={{ tableLayout: "auto", width: "100%" }}>
-                    <Form.List name={["billlines"]}>
+                  <thead>
-                        {(fields, {add, remove, move}) => {
+                    <tr>
-                            return (
+                      <td>
-                                <table style={{tableLayout: "auto", width: "100%"}}>
+                        <Checkbox
-                                    <thead>
+                          onChange={(e) => {
-                                    <tr>
+                            form.setFieldsValue({
-                                        <td>
+                              billlines: form.getFieldsValue().billlines.map((b) => ({
-                                            <Checkbox
+                                ...b,
-                                                onChange={(e) => {
+                                selected: e.target.checked
-                                                    form.setFieldsValue({
+                              }))
-                                                        billlines: form
+                            });
-                                                            .getFieldsValue()
+                          }}
-                                                            .billlines.map((b) => ({
+                        />
-                                                                ...b,
+                      </td>
-                                                                selected: e.target.checked,
+                      <td>{t("billlines.fields.line_desc")}</td>
-                                                            })),
+                      <td>{t("billlines.fields.quantity")}</td>
-                                                    });
+                      <td>{t("billlines.fields.actual_price")}</td>
-                                                }}
+                      <td>{t("billlines.fields.actual_cost")}</td>
-                                            />
+                    </tr>
-                                        </td>
+                  </thead>
-                                        <td>{t("billlines.fields.line_desc")}</td>
+                  <tbody>
-                                        <td>{t("billlines.fields.quantity")}</td>
+                    {fields.map((field, index) => (
-                                        <td>{t("billlines.fields.actual_price")}</td>
+                      <tr key={field.key}>
-                                        <td>{t("billlines.fields.actual_cost")}</td>
+                        <td>
-                                    </tr>
+                          <Form.Item
-                                    </thead>
+                            //   label={t("joblines.fields.selected")}
-                                    <tbody>
+                            key={`${index}selected`}
-                                    {fields.map((field, index) => (
+                            name={[field.name, "selected"]}
-                                        <tr key={field.key}>
+                            valuePropName="checked"
-                                            <td>
+                          >
-                                                <Form.Item
+                            <Checkbox />
-                                                    //   label={t("joblines.fields.selected")}
+                          </Form.Item>
-                                                    key={`${index}selected`}
+                        </td>
-                                                    name={[field.name, "selected"]}
+                        <td>
-                                                    valuePropName="checked"
+                          <Form.Item
-                                                >
+                            //   label={t("joblines.fields.line_desc")}
-                                                    <Checkbox/>
+                            key={`${index}line_desc`}
-                                                </Form.Item>
+                            name={[field.name, "line_desc"]}
-                                            </td>
+                          >
-                                            <td>
+                            <ReadOnlyFormItemComponent />
-                                                <Form.Item
+                          </Form.Item>
-                                                    //   label={t("joblines.fields.line_desc")}
+                        </td>
-                                                    key={`${index}line_desc`}
+                        <td>
-                                                    name={[field.name, "line_desc"]}
+                          <Form.Item
-                                                >
+                            //   label={t("joblines.fields.quantity")}
-                                                    <ReadOnlyFormItemComponent/>
+                            key={`${index}quantity`}
-                                                </Form.Item>
+                            name={[field.name, "quantity"]}
-                                            </td>
+                          >
-                                            <td>
+                            <ReadOnlyFormItemComponent />
-                                                <Form.Item
+                          </Form.Item>
-                                                    //   label={t("joblines.fields.quantity")}
+                        </td>
-                                                    key={`${index}quantity`}
+                        <td>
-                                                    name={[field.name, "quantity"]}
+                          <Form.Item
-                                                >
+                            //   label={t("joblines.fields.actual_price")}
-                                                    <ReadOnlyFormItemComponent/>
+                            key={`${index}actual_price`}
-                                                </Form.Item>
+                            name={[field.name, "actual_price"]}
-                                            </td>
+                          >
-                                            <td>
+                            <ReadOnlyFormItemComponent type="currency" />
-                                                <Form.Item
+                          </Form.Item>
-                                                    //   label={t("joblines.fields.actual_price")}
+                        </td>
-                                                    key={`${index}actual_price`}
+                        <td>
-                                                    name={[field.name, "actual_price"]}
+                          <Form.Item
-                                                >
+                            //   label={t("joblines.fields.actual_cost")}
-                                                    <ReadOnlyFormItemComponent type="currency"/>
+                            key={`${index}actual_cost`}
-                                                </Form.Item>
+                            name={[field.name, "actual_cost"]}
-                                            </td>
+                          >
-                                            <td>
+                            <ReadOnlyFormItemComponent type="currency" />
-                                                <Form.Item
+                          </Form.Item>
-                                                    //   label={t("joblines.fields.actual_cost")}
+                        </td>
-                                                    key={`${index}actual_cost`}
+                      </tr>
-                                                    name={[field.name, "actual_cost"]}
+                    ))}
-                                                >
+                  </tbody>
-                                                    <ReadOnlyFormItemComponent type="currency"/>
+                </table>
-                                                </Form.Item>
+              );
-                                            </td>
+            }}
-                                        </tr>
+          </Form.List>
-                                    ))}
+        </Form>
-                                    </tbody>
+      </Modal>
-                                </table>
+      <Button
-                            );
+        disabled={data.bills_by_pk.is_credit_memo || data.bills_by_pk.isinhouse || disabled}
-                        }}
+        onClick={() => {
-                    </Form.List>
+          setOpen(true);
-                </Form>
+        }}
-            </Modal>
+      >
-            <Button
+        {t("bills.actions.return")}
-                disabled={data.bills_by_pk.is_credit_memo || disabled}
+      </Button>
-                onClick={() => {
+    </>
-                    setOpen(true);
+  );
-                }}
-            >
-                {t("bills.actions.return")}
-            </Button>
-        </>
-    );
 }

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

@@ -1,40 +1,38 @@
-import {Drawer, Grid} from "antd";
+import { Drawer, Grid } from "antd";
 import queryString from "query-string";
 import React from "react";
-import {useLocation, useNavigate} from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import BillDetailEditComponent from "./bill-detail-edit-component";
 
 export default function BillDetailEditcontainer() {
-    const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useLocation().search);
-    const history = useNavigate();
+  const history = useNavigate();
 
-    const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-        .filter((screen) => !!screen[1])
+    .filter((screen) => !!screen[1])
-        .slice(-1)[0];
+    .slice(-1)[0];
 
-    const bpoints = {
+  const bpoints = {
-        xs: "100%",
+    xs: "100%",
-        sm: "100%",
+    sm: "100%",
-        md: "100%",
+    md: "100%",
-        lg: "100%",
+    lg: "100%",
-        xl: "90%",
+    xl: "90%",
-        xxl: "90%",
+    xxl: "90%"
-    };
+  };
-    const drawerPercentage = selectedBreakpoint
+  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
-        ? bpoints[selectedBreakpoint[0]]
-        : "100%";
 
-    return (
+  return (
-        <Drawer
+    <Drawer
-            width={drawerPercentage}
+      width={drawerPercentage}
-            onClose={() => {
+      onClose={() => {
-                delete search.billid;
+        delete search.billid;
-                history({search: queryString.stringify(search)});
+        history({ search: queryString.stringify(search) });
-            }}
+      }}
-            destroyOnClose
+      destroyOnClose
-            open={search.billid}
+      open={search.billid}
-        >
+    >
-            <BillDetailEditComponent/>
+      <BillDetailEditComponent />
-        </Drawer>
+    </Drawer>
-    );
+  );
 }

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

@@ -1,467 +1,426 @@
-import {useApolloClient, useMutation} from "@apollo/client";
+import { useApolloClient, useMutation } from "@apollo/client";
-import {useSplitTreatments} from "@splitsoftware/splitio-react";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import {Button, Checkbox, Form, Modal, notification, Space} from "antd";
+import { Button, Checkbox, Form, Modal, notification, Space } from "antd";
 import _ from "lodash";
-import React, {useEffect, useMemo, useState} from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {INSERT_NEW_BILL} from "../../graphql/bills.queries";
+import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
-import {UPDATE_INVENTORY_LINES} from "../../graphql/inventory.queries";
+import { UPDATE_INVENTORY_LINES } from "../../graphql/inventory.queries";
-import {UPDATE_JOB_LINE} from "../../graphql/jobs-lines.queries";
+import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
-import {QUERY_JOB_LBR_ADJUSTMENTS, UPDATE_JOB,} from "../../graphql/jobs.queries";
+import { QUERY_JOB_LBR_ADJUSTMENTS, UPDATE_JOB } from "../../graphql/jobs.queries";
-import {MUTATION_MARK_RETURN_RECEIVED} from "../../graphql/parts-orders.queries";
+import { MUTATION_MARK_RETURN_RECEIVED } from "../../graphql/parts-orders.queries";
-import {insertAuditTrail} from "../../redux/application/application.actions";
+import { insertAuditTrail } from "../../redux/application/application.actions";
-import {toggleModalVisible} from "../../redux/modals/modals.actions";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import {selectBillEnterModal} from "../../redux/modals/modals.selectors";
+import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
-import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
-import {GenerateDocument} from "../../utils/RenderTemplate";
+import { GenerateDocument } from "../../utils/RenderTemplate";
-import {TemplateList} from "../../utils/TemplateConstants";
+import { TemplateList } from "../../utils/TemplateConstants";
 import confirmDialog from "../../utils/asyncConfirm";
 import useLocalStorage from "../../utils/useLocalStorage";
 import BillFormContainer from "../bill-form/bill-form.container";
-import {CalculateBillTotal} from "../bill-form/bill-form.totals.utility";
+import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
-import {handleUpload as handleLocalUpload} from "../documents-local-upload/documents-local-upload.utility";
+import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
-import {handleUpload} from "../documents-upload/documents-upload.utility";
+import { handleUpload } from "../documents-upload/documents-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
-    billEnterModal: selectBillEnterModal,
+  billEnterModal: selectBillEnterModal,
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop,
-    currentUser: selectCurrentUser,
+  currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
-    toggleModalVisible: () => dispatch(toggleModalVisible("billEnter")),
+  toggleModalVisible: () => dispatch(toggleModalVisible("billEnter")),
-    insertAuditTrail: ({jobid, billid, operation}) =>
+  insertAuditTrail: ({ jobid, billid, operation, type }) =>
-        dispatch(insertAuditTrail({jobid, billid, operation})),
+    dispatch(insertAuditTrail({ jobid, billid, operation, type }))
 });
 
 const Templates = TemplateList("job_special");
 
-function BillEnterModalContainer({
+function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop, currentUser, insertAuditTrail }) {
-                                     billEnterModal,
+  const [form] = Form.useForm();
-                                     toggleModalVisible,
+  const { t } = useTranslation();
-                                     bodyshop,
+  const [enterAgain, setEnterAgain] = useState(false);
-                                     currentUser,
+  const [insertBill] = useMutation(INSERT_NEW_BILL);
-                                     insertAuditTrail,
+  const [updateJobLines] = useMutation(UPDATE_JOB_LINE);
-                                 }) {
+  const [updatePartsOrderLines] = useMutation(MUTATION_MARK_RETURN_RECEIVED);
-    const [form] = Form.useForm();
+  const [updateInventoryLines] = useMutation(UPDATE_INVENTORY_LINES);
-    const {t} = useTranslation();
+  const [loading, setLoading] = useState(false);
-    const [enterAgain, setEnterAgain] = useState(false);
+  const client = useApolloClient();
-    const [insertBill] = useMutation(INSERT_NEW_BILL);
+  const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
-    const [updateJobLines] = useMutation(UPDATE_JOB_LINE);
-    const [updatePartsOrderLines] = useMutation(MUTATION_MARK_RETURN_RECEIVED);
-    const [updateInventoryLines] = useMutation(UPDATE_INVENTORY_LINES);
-    const [loading, setLoading] = useState(false);
-    const client = useApolloClient();
-    const [generateLabel, setGenerateLabel] = useLocalStorage(
-        "enter_bill_generate_label",
-        false
-    );
 
-    const {treatments: {Enhanced_Payroll}} = useSplitTreatments({
+  const {
-        attributes: {},
+    treatments: { Enhanced_Payroll }
-        names: ["Enhanced_Payroll"],
+  } = useSplitTreatments({
-        splitKey: bodyshop.imexshopid,
+    attributes: {},
+    names: ["Enhanced_Payroll"],
+    splitKey: bodyshop.imexshopid
+  });
+
+  const formValues = useMemo(() => {
+    return {
+      ...billEnterModal.context.bill,
+      //Added as a part of IO-2436 for capturing parts price changes.
+      billlines: billEnterModal.context?.bill?.billlines?.map((line) => ({
+        ...line,
+        original_actual_price: line.actual_price
+      })),
+      jobid: (billEnterModal.context.job && billEnterModal.context.job.id) || null,
+      federal_tax_rate: (bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.federal_tax_rate) || 0,
+      state_tax_rate: (bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.state_tax_rate) || 0,
+      local_tax_rate: (bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.local_tax_rate) || 0
+    };
+  }, [billEnterModal, bodyshop]);
+
+  const handleFinish = async (values) => {
+    let totals = CalculateBillTotal(values);
+    if (totals.discrepancy.getAmount() !== 0) {
+      if (!(await confirmDialog(t("bills.labels.savewithdiscrepancy")))) {
+        return;
+      }
+    }
+
+    setLoading(true);
+    const { upload, location, outstanding_returns, inventory, federal_tax_exempt, ...remainingValues } = values;
+
+    let adjustmentsToInsert = {};
+    let payrollAdjustmentsToInsert = [];
+
+    const r1 = await insertBill({
+      variables: {
+        bill: [
+          {
+            ...remainingValues,
+            billlines: {
+              data:
+                remainingValues.billlines &&
+                remainingValues.billlines.map((i) => {
+                  const {
+                    deductedfromlbr,
+                    lbr_adjustment,
+                    location: lineLocation,
+                    part_type,
+                    create_ppc,
+                    original_actual_price,
+                    ...restI
+                  } = i;
+
+                  if (Enhanced_Payroll.treatment === "on") {
+                    if (
+                      deductedfromlbr &&
+                      true //payroll is on
+                    ) {
+                      payrollAdjustmentsToInsert.push({
+                        id: i.joblineid,
+                        convertedtolbr: true,
+                        convertedtolbr_data: {
+                          mod_lb_hrs: lbr_adjustment.mod_lb_hrs * -1,
+                          mod_lbr_ty: lbr_adjustment.mod_lbr_ty
+                        }
+                      });
+                    }
+                  } else {
+                    if (deductedfromlbr) {
+                      adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] =
+                        (adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] || 0) -
+                        restI.actual_price / lbr_adjustment.rate;
+                    }
+                  }
+
+                  return {
+                    ...restI,
+                    deductedfromlbr: deductedfromlbr,
+                    lbr_adjustment,
+                    joblineid: i.joblineid === "noline" ? null : i.joblineid,
+                    applicable_taxes: {
+                      federal: (i.applicable_taxes && i.applicable_taxes.federal) || false,
+                      state: (i.applicable_taxes && i.applicable_taxes.state) || false,
+                      local: (i.applicable_taxes && i.applicable_taxes.local) || false
+                    }
+                  };
+                })
+            }
+          }
+        ]
+      },
+      refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID", "GET_JOB_BY_PK"],
+      awaitRefetchQueries: true
     });
 
-    const formValues = useMemo(() => {
+    await Promise.all(
-        return {
+      payrollAdjustmentsToInsert.map((li) => {
-            ...billEnterModal.context.bill,
+        return updateJobLines({
-            //Added as a part of IO-2436 for capturing parts price changes.
+          variables: {
-            billlines: billEnterModal.context?.bill?.billlines?.map((line) => ({
+            lineId: li.id,
-                ...line,
+            line: {
-                original_actual_price: line.actual_price,
+              convertedtolbr: li.convertedtolbr,
-            })),
+              convertedtolbr_data: li.convertedtolbr_data
-            jobid:
-                (billEnterModal.context.job && billEnterModal.context.job.id) || null,
-            federal_tax_rate:
-                (bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.federal_tax_rate) ||
-                0,
-            state_tax_rate:
-                (bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.state_tax_rate) ||
-                0,
-            local_tax_rate:
-                (bodyshop.bill_tax_rates && bodyshop.bill_tax_rates.local_tax_rate) ||
-                0,
-        };
-    }, [billEnterModal, bodyshop]);
-
-    const handleFinish = async (values) => {
-        let totals = CalculateBillTotal(values);
-        if (totals.discrepancy.getAmount() !== 0) {
-            if (!(await confirmDialog(t("bills.labels.savewithdiscrepancy")))) {
-                return;
             }
-        }
+          }
-
-        setLoading(true);
-        const {
-            upload,
-            location,
-            outstanding_returns,
-            inventory,
-            federal_tax_exempt,
-            ...remainingValues
-        } = values;
-
-        let adjustmentsToInsert = {};
-        let payrollAdjustmentsToInsert = [];
-
-        const r1 = await insertBill({
-            variables: {
-                bill: [
-                    {
-                        ...remainingValues,
-                        billlines: {
-                            data:
-                                remainingValues.billlines &&
-                                remainingValues.billlines.map((i) => {
-                                    const {
-                                        deductedfromlbr,
-                                        lbr_adjustment,
-                                        location: lineLocation,
-                                        part_type,
-                                        create_ppc,
-                                        original_actual_price,
-                                        ...restI
-                                    } = i;
-
-                                    if (Enhanced_Payroll.treatment === "on") {
-                                        if (
-                                            deductedfromlbr &&
-                                            true //payroll is on
-                                        ) {
-                                            payrollAdjustmentsToInsert.push({
-                                                id: i.joblineid,
-                                                convertedtolbr: true,
-                                                convertedtolbr_data: {
-                                                    mod_lb_hrs: lbr_adjustment.mod_lb_hrs * -1,
-                                                    mod_lbr_ty: lbr_adjustment.mod_lbr_ty,
-                                                },
-                                            });
-                                        }
-                                    } else {
-                                        if (deductedfromlbr) {
-                                            adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] =
-                                                (adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] || 0) -
-                                                restI.actual_price / lbr_adjustment.rate;
-                                        }
-                                    }
-
-                                    return {
-                                        ...restI,
-                                        deductedfromlbr: deductedfromlbr,
-                                        lbr_adjustment,
-                                        joblineid: i.joblineid === "noline" ? null : i.joblineid,
-                                        applicable_taxes: {
-                                            federal:
-                                                (i.applicable_taxes && i.applicable_taxes.federal) ||
-                                                false,
-                                            state:
-                                                (i.applicable_taxes && i.applicable_taxes.state) ||
-                                                false,
-                                            local:
-                                                (i.applicable_taxes && i.applicable_taxes.local) ||
-                                                false,
-                                        },
-                                    };
-                                }),
-                        },
-                    },
-                ],
-            },
-            refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID", "GET_JOB_BY_PK"],
         });
+      })
+    );
 
-        await Promise.all(
+    const adjKeys = Object.keys(adjustmentsToInsert);
-            payrollAdjustmentsToInsert.map((li) => {
+    if (adjKeys.length > 0) {
-                return updateJobLines({
+      //Query the adjustments, merge, and update them.
-                    variables: {
+      const existingAdjustments = await client.query({
-                        lineId: li.id,
+        query: QUERY_JOB_LBR_ADJUSTMENTS,
-                        line: {
+        variables: {
-                            convertedtolbr: li.convertedtolbr,
+          id: values.jobid
-                            convertedtolbr_data: li.convertedtolbr_data,
-                        },
-                    },
-                });
-            })
-        );
-
-        const adjKeys = Object.keys(adjustmentsToInsert);
-        if (adjKeys.length > 0) {
-            //Query the adjustments, merge, and update them.
-            const existingAdjustments = await client.query({
-                query: QUERY_JOB_LBR_ADJUSTMENTS,
-                variables: {
-                    id: values.jobid,
-                },
-            });
-
-            const newAdjustments = _.cloneDeep(
-                existingAdjustments.data.jobs_by_pk.lbr_adjustments
-            );
-
-            adjKeys.forEach((key) => {
-                newAdjustments[key] =
-                    (newAdjustments[key] || 0) + adjustmentsToInsert[key];
-
-                insertAuditTrail({
-                    jobid: values.jobid,
-                    operation: AuditTrailMapping.jobmodifylbradj({
-                        mod_lbr_ty: key,
-                        hours: adjustmentsToInsert[key].toFixed(1),
-                    }),
-                });
-            });
-
-            const jobUpdate = client.mutate({
-                mutation: UPDATE_JOB,
-                variables: {
-                    jobId: values.jobid,
-                    job: {lbr_adjustments: newAdjustments},
-                },
-            });
-            if (!!jobUpdate.errors) {
-                notification["error"]({
-                    message: t("jobs.errors.saving", {
-                        message: JSON.stringify(jobUpdate.errors),
-                    }),
-                });
-                return;
-            }
         }
+      });
 
-        const markPolReceived =
+      const newAdjustments = _.cloneDeep(existingAdjustments.data.jobs_by_pk.lbr_adjustments);
-            outstanding_returns &&
-            outstanding_returns.filter((o) => o.cm_received === true);
 
-        if (markPolReceived && markPolReceived.length > 0) {
+      adjKeys.forEach((key) => {
-            const r2 = await updatePartsOrderLines({
+        newAdjustments[key] = (newAdjustments[key] || 0) + adjustmentsToInsert[key];
-                variables: {partsLineIds: markPolReceived.map((p) => p.id)},
-            });
-            if (!!r2.errors) {
-                setLoading(false);
-                setEnterAgain(false);
-                notification["error"]({
-                    message: t("parts_orders.errors.updating", {
-                        message: JSON.stringify(r2.errors),
-                    }),
-                });
-            }
-        }
-
-        if (!!r1.errors) {
-            setLoading(false);
-            setEnterAgain(false);
-            notification["error"]({
-                message: t("bills.errors.creating", {
-                    message: JSON.stringify(r1.errors),
-                }),
-            });
-        }
-
-        const billId = r1.data.insert_bills.returning[0].id;
-        const markInventoryConsumed =
-            inventory && inventory.filter((i) => i.consumefrominventory);
-
-        if (markInventoryConsumed && markInventoryConsumed.length > 0) {
-            const r2 = await updateInventoryLines({
-                variables: {
-                    InventoryIds: markInventoryConsumed.map((p) => p.id),
-                    consumedbybillid: billId,
-                },
-            });
-            if (!!r2.errors) {
-                setLoading(false);
-                setEnterAgain(false);
-                notification["error"]({
-                    message: t("inventory.errors.updating", {
-                        message: JSON.stringify(r2.errors),
-                    }),
-                });
-            }
-        }
-        //If it's not a credit memo, update the statuses.
-
-        if (!values.is_credit_memo) {
-            await Promise.all(
-                remainingValues.billlines
-                    .filter((il) => il.joblineid !== "noline")
-                    .map((li) => {
-                        return updateJobLines({
-                            variables: {
-                                lineId: li.joblineid,
-                                line: {
-                                    location: li.location || location,
-                                    status:
-                                        bodyshop.md_order_statuses.default_received || "Received*",
-                                    //Added parts price changes.
-                                    ...(li.create_ppc &&
-                                    li.original_actual_price !== li.actual_price
-                                        ? {
-                                            act_price_before_ppc: li.original_actual_price,
-                                            act_price: li.actual_price,
-                                        }
-                                        : {}),
-                                },
-                            },
-                        });
-                    })
-            );
-        }
-
-        /////////////////////////
-        if (upload && upload.length > 0) {
-            //insert Each of the documents?
-
-            if (bodyshop.uselocalmediaserver) {
-                upload.forEach((u) => {
-                    handleLocalUpload({
-                        ev: {file: u.originFileObj},
-                        context: {
-                            jobid: values.jobid,
-                            invoice_number: remainingValues.invoice_number,
-                            vendorid: remainingValues.vendorid,
-                        },
-                    });
-                });
-            } else {
-                upload.forEach((u) => {
-                    handleUpload(
-                        {file: u.originFileObj},
-                        {
-                            bodyshop: bodyshop,
-                            uploaded_by: currentUser.email,
-                            jobId: values.jobid,
-                            billId: billId,
-                            tagsArray: null,
-                            callback: null,
-                        }
-                    );
-                });
-            }
-        }
-        ///////////////////////////
-        setLoading(false);
-        notification["success"]({
-            message: t("bills.successes.created"),
-        });
-
-        if (generateLabel) {
-            GenerateDocument(
-                {
-                    name: Templates.parts_invoice_label_single.key,
-                    variables: {
-                        id: billId,
-                    },
-                },
-                {},
-                "p"
-            );
-        }
-
-        if (billEnterModal.actions.refetch) billEnterModal.actions.refetch();
 
         insertAuditTrail({
-            jobid: values.jobid,
+          jobid: values.jobid,
-            billid: billId,
+          operation: AuditTrailMapping.jobmodifylbradj({
-            operation: AuditTrailMapping.billposted(
+            mod_lbr_ty: key,
-                r1.data.insert_bills.returning[0].invoice_number
+            hours: adjustmentsToInsert[key].toFixed(1)
-            ),
+          }),
+          type: "jobmodifylbradj"
         });
+      });
 
-        if (enterAgain) {
+      const jobUpdate = client.mutate({
-            // form.resetFields();
+        mutation: UPDATE_JOB,
-            form.setFieldsValue({
+        variables: {
-                ...formValues,
+          jobId: values.jobid,
-                billlines: [],
+          job: { lbr_adjustments: newAdjustments }
-            });
-            form.resetFields();
-        } else {
-            toggleModalVisible();
         }
+      });
+      if (!!jobUpdate.errors) {
+        notification["error"]({
+          message: t("jobs.errors.saving", {
+            message: JSON.stringify(jobUpdate.errors)
+          })
+        });
+        return;
+      }
+    }
+
+    const markPolReceived = outstanding_returns && outstanding_returns.filter((o) => o.cm_received === true);
+
+    if (markPolReceived && markPolReceived.length > 0) {
+      const r2 = await updatePartsOrderLines({
+        variables: { partsLineIds: markPolReceived.map((p) => p.id) },
+        refetchQueries: ["QUERY_PARTS_BILLS_BY_JOBID"]
+      });
+      if (!!r2.errors) {
+        setLoading(false);
         setEnterAgain(false);
-    };
+        notification["error"]({
+          message: t("parts_orders.errors.updating", {
+            message: JSON.stringify(r2.errors)
+          })
+        });
+      }
+    }
 
-    const handleCancel = () => {
+    if (!!r1.errors) {
-        const r = window.confirm(t("general.labels.cancel"));
+      setLoading(false);
-        if (r === true) {
+      setEnterAgain(false);
-            toggleModalVisible();
+      notification["error"]({
+        message: t("bills.errors.creating", {
+          message: JSON.stringify(r1.errors)
+        })
+      });
+    }
+
+    const billId = r1.data.insert_bills.returning[0].id;
+    const markInventoryConsumed = inventory && inventory.filter((i) => i.consumefrominventory);
+
+    if (markInventoryConsumed && markInventoryConsumed.length > 0) {
+      const r2 = await updateInventoryLines({
+        variables: {
+          InventoryIds: markInventoryConsumed.map((p) => p.id),
+          consumedbybillid: billId
         }
-    };
+      });
+      if (!!r2.errors) {
+        setLoading(false);
+        setEnterAgain(false);
+        notification["error"]({
+          message: t("inventory.errors.updating", {
+            message: JSON.stringify(r2.errors)
+          })
+        });
+      }
+    }
+    //If it's not a credit memo, update the statuses.
 
-    useEffect(() => {
+    if (!values.is_credit_memo) {
-        if (enterAgain) form.submit();
+      await Promise.all(
-    }, [enterAgain, form]);
+        remainingValues.billlines
+          .filter((il) => il.joblineid !== "noline")
+          .map((li) => {
+            return updateJobLines({
+              variables: {
+                lineId: li.joblineid,
+                line: {
+                  location: li.location || location,
+                  status: bodyshop.md_order_statuses.default_received || "Received*",
+                  //Added parts price changes.
+                  ...(li.create_ppc && li.original_actual_price !== li.actual_price
+                    ? {
+                        act_price_before_ppc: li.original_actual_price,
+                        act_price: li.actual_price
+                      }
+                    : {})
+                }
+              }
+            });
+          })
+      );
+    }
 
-    useEffect(() => {
+    /////////////////////////
-        if (billEnterModal.open) {
+    if (upload && upload.length > 0) {
-            form.setFieldsValue(formValues);
+      //insert Each of the documents?
-        } else {
-            form.resetFields();
-        }
-    }, [billEnterModal.open, form, formValues]);
 
-    return (
+      if (bodyshop.uselocalmediaserver) {
-        <Modal
+        upload.forEach((u) => {
-            title={t("bills.labels.new")}
+          handleLocalUpload({
-            width={"98%"}
+            ev: { file: u.originFileObj },
-            open={billEnterModal.open}
+            context: {
-            okText={t("general.actions.save")}
+              jobid: values.jobid,
-            keyboard="false"
+              invoice_number: remainingValues.invoice_number,
-            onOk={() => form.submit()}
+              vendorid: remainingValues.vendorid
-            onCancel={handleCancel}
-            afterClose={() => {
-                form.resetFields();
-                setLoading(false);
-            }}
-            footer={
-                <Space>
-                    <Checkbox
-                        checked={generateLabel}
-                        onChange={(e) => setGenerateLabel(e.target.checked)}
-                    >
-                        {t("bills.labels.generatepartslabel")}
-                    </Checkbox>
-                    <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-                    <Button loading={loading} onClick={() => form.submit()}>
-                        {t("general.actions.save")}
-                    </Button>
-                    {billEnterModal.context && billEnterModal.context.id ? null : (
-                        <Button
-                            type="primary"
-                            loading={loading}
-                            onClick={() => {
-                                setEnterAgain(true);
-                            }}
-                        >
-                            {t("general.actions.saveandnew")}
-                        </Button>
-                    )}
-                </Space>
             }
-            destroyOnClose
+          });
-        >
+        });
-            <Form
+      } else {
-                onFinish={handleFinish}
+        upload.forEach((u) => {
-                autoComplete={"off"}
+          handleUpload(
-                layout="vertical"
+            { file: u.originFileObj },
-                form={form}
+            {
-                onFinishFailed={() => {
+              bodyshop: bodyshop,
-                    setEnterAgain(false);
+              uploaded_by: currentUser.email,
-                }}
+              jobId: values.jobid,
+              billId: billId,
+              tagsArray: null,
+              callback: null
+            }
+          );
+        });
+      }
+    }
+    ///////////////////////////
+    setLoading(false);
+    notification["success"]({
+      message: t("bills.successes.created")
+    });
+
+    if (generateLabel) {
+      GenerateDocument(
+        {
+          name: Templates.parts_invoice_label_single.key,
+          variables: {
+            id: billId
+          }
+        },
+        {},
+        "p"
+      );
+    }
+
+    if (billEnterModal.actions.refetch) billEnterModal.actions.refetch();
+
+    insertAuditTrail({
+      jobid: values.jobid,
+      billid: billId,
+      operation: AuditTrailMapping.billposted(r1.data.insert_bills.returning[0].invoice_number),
+      type: "billposted"
+    });
+
+    if (enterAgain) {
+      form.resetFields();
+      form.setFieldsValue({
+        ...formValues,
+        vendorid: values.vendorid,
+        billlines: []
+      });
+      // form.resetFields();
+    } else {
+      toggleModalVisible();
+    }
+    setEnterAgain(false);
+  };
+
+  const handleCancel = () => {
+    const r = window.confirm(t("general.labels.cancel"));
+    if (r === true) {
+      toggleModalVisible();
+    }
+  };
+
+  useEffect(() => {
+    if (enterAgain) form.submit();
+  }, [enterAgain, form]);
+
+  useEffect(() => {
+    if (billEnterModal.open) {
+      form.setFieldsValue(formValues);
+    } else {
+      form.resetFields();
+    }
+  }, [billEnterModal.open, form, formValues]);
+
+  return (
+    <Modal
+      title={t("bills.labels.new")}
+      width={"98%"}
+      open={billEnterModal.open}
+      okText={t("general.actions.save")}
+      keyboard="false"
+      onOk={() => form.submit()}
+      onCancel={handleCancel}
+      afterClose={() => {
+        form.resetFields();
+        setLoading(false);
+      }}
+      footer={
+        <Space>
+          <Checkbox checked={generateLabel} onChange={(e) => setGenerateLabel(e.target.checked)}>
+            {t("bills.labels.generatepartslabel")}
+          </Checkbox>
+          <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
+          <Button loading={loading} onClick={() => form.submit()}>
+            {t("general.actions.save")}
+          </Button>
+          {billEnterModal.context && billEnterModal.context.id ? null : (
+            <Button
+              type="primary"
+              loading={loading}
+              onClick={() => {
+                setEnterAgain(true);
+              }}
             >
-                <BillFormContainer
+              {t("general.actions.saveandnew")}
-                    form={form}
+            </Button>
-                    disableInvNumber={billEnterModal.context.disableInvNumber}
+          )}
-                />
+        </Space>
-            </Form>
+      }
-        </Modal>
+      destroyOnClose
-    );
+    >
+      <Form
+        onFinish={handleFinish}
+        autoComplete={"off"}
+        layout="vertical"
+        form={form}
+        onFinishFailed={() => {
+          setEnterAgain(false);
+        }}
+      >
+        <BillFormContainer form={form} disableInvNumber={billEnterModal.context.disableInvNumber} />
+      </Form>
+    </Modal>
+  );
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BillEnterModalContainer);
-    mapStateToProps,
-    mapDispatchToProps
-)(BillEnterModalContainer);

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

@@ -1,136 +1,114 @@
-import {Form, Input, Table} from "antd";
+import { Form, Input, Table } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import {alphaSort} from "../../utils/sorters";
+import { alphaSort } from "../../utils/sorters";
 import BillFormItemsExtendedFormItem from "./bill-form-lines.extended.formitem.component";
 
-export default function BillFormLinesExtended({
+export default function BillFormLinesExtended({ lineData, discount, form, responsibilityCenters, disabled }) {
-                                                  lineData,
+  const [search, setSearch] = useState("");
-                                                  discount,
+  const { t } = useTranslation();
-                                                  form,
+  const columns = [
-                                                  responsibilityCenters,
+    {
-                                                  disabled,
+      title: t("joblines.fields.line_desc"),
-                                              }) {
+      dataIndex: "line_desc",
-    const [search, setSearch] = useState("");
+      key: "line_desc",
-    const {t} = useTranslation();
+      width: "10%",
-    const columns = [
+      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc)
+    },
+    {
+      title: t("joblines.fields.oem_partno"),
+      dataIndex: "oem_partno",
+      key: "oem_partno",
+      width: "10%",
+      sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno)
+    },
+    {
+      title: t("joblines.fields.part_type"),
+      dataIndex: "part_type",
+      key: "part_type",
+      width: "10%",
+      filters: [
         {
-            title: t("joblines.fields.line_desc"),
+          text: t("jobs.labels.partsfilter"),
-            dataIndex: "line_desc",
+          value: ["PAN", "PAP", "PAL", "PAA", "PAS", "PASL"]
-            key: "line_desc",
-            width: "10%",
-            sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
         },
         {
-            title: t("joblines.fields.oem_partno"),
+          text: t("joblines.fields.part_types.PAN"),
-            dataIndex: "oem_partno",
+          value: ["PAN", "PAP"]
-            key: "oem_partno",
-            width: "10%",
-            sorter: (a, b) => alphaSort(a.oem_partno, b.oem_partno),
         },
         {
-            title: t("joblines.fields.part_type"),
+          text: t("joblines.fields.part_types.PAL"),
-            dataIndex: "part_type",
+          value: ["PAL"]
-            key: "part_type",
-            width: "10%",
-            filters: [
-                {
-                    text: t("jobs.labels.partsfilter"),
-                    value: ["PAN", "PAP", "PAL", "PAA", "PAS", "PASL"],
-                },
-                {
-                    text: t("joblines.fields.part_types.PAN"),
-                    value: ["PAN", "PAP"],
-                },
-                {
-                    text: t("joblines.fields.part_types.PAL"),
-                    value: ["PAL"],
-                },
-                {
-                    text: t("joblines.fields.part_types.PAA"),
-                    value: ["PAA"],
-                },
-                {
-                    text: t("joblines.fields.part_types.PAS"),
-                    value: ["PAS", "PASL"],
-                },
-            ],
-            onFilter: (value, record) => value.includes(record.part_type),
-            render: (text, record) =>
-                record.part_type
-                    ? t(`joblines.fields.part_types.${record.part_type}`)
-                    : null,
         },
+        {
+          text: t("joblines.fields.part_types.PAA"),
+          value: ["PAA"]
+        },
+        {
+          text: t("joblines.fields.part_types.PAS"),
+          value: ["PAS", "PASL"]
+        }
+      ],
+      onFilter: (value, record) => value.includes(record.part_type),
+      render: (text, record) => (record.part_type ? t(`joblines.fields.part_types.${record.part_type}`) : null)
+    },
 
-        {
+    {
-            title: t("joblines.fields.act_price"),
+      title: t("joblines.fields.act_price"),
-            dataIndex: "act_price",
+      dataIndex: "act_price",
-            key: "act_price",
+      key: "act_price",
-            width: "10%",
+      width: "10%",
-            sorter: (a, b) => a.act_price - b.act_price,
+      sorter: (a, b) => a.act_price - b.act_price,
-            shouldCellUpdate: false,
+      shouldCellUpdate: false,
-            render: (text, record) => (
+      render: (text, record) => (
-                <>
+        <>
-                    <CurrencyFormatter>
+          <CurrencyFormatter>
-                        {record.db_ref === "900510" || record.db_ref === "900511"
+            {record.db_ref === "900510" || record.db_ref === "900511" ? record.prt_dsmk_m : record.act_price}
-                            ? record.prt_dsmk_m
+          </CurrencyFormatter>
-                            : record.act_price}
+          {record.part_qty ? `(x ${record.part_qty})` : null}
-                    </CurrencyFormatter>
+          {record.prt_dsmk_p && record.prt_dsmk_p !== 0 ? (
-                    {record.part_qty ? `(x ${record.part_qty})` : null}
+            <span style={{ marginLeft: ".2rem" }}>{`(${record.prt_dsmk_p}%)`}</span>
-                    {record.prt_dsmk_p && record.prt_dsmk_p !== 0 ? (
+          ) : (
-                        <span
+            <></>
-                            style={{marginLeft: ".2rem"}}
+          )}
-                        >{`(${record.prt_dsmk_p}%)`}</span>
+        </>
-                    ) : (
+      )
-                        <></>
+    },
-                    )}
+    {
-                </>
+      title: t("billlines.fields.posting"),
-            ),
+      dataIndex: "posting",
-        },
+      key: "posting",
-        {
-            title: t("billlines.fields.posting"),
-            dataIndex: "posting",
-            key: "posting",
 
-            render: (text, record, index) => (
+      render: (text, record, index) => (
-                <Form.Item noStyle name={["billlineskeys", record.id]}>
+        <Form.Item noStyle name={["billlineskeys", record.id]}>
-                    <BillFormItemsExtendedFormItem
+          <BillFormItemsExtendedFormItem
-                        form={form}
+            form={form}
-                        record={record}
+            record={record}
-                        index={index}
+            index={index}
-                        responsibilityCenters={responsibilityCenters}
+            responsibilityCenters={responsibilityCenters}
-                        discount={discount}
+            discount={discount}
-                    />
+          />
-                </Form.Item>
-            ),
-        },
-    ];
-
-    const data =
-        search === ""
-            ? lineData
-            : lineData.filter(
-                (l) =>
-                    (l.line_desc &&
-                        l.line_desc.toLowerCase().includes(search.toLowerCase())) ||
-                    (l.oem_partno &&
-                        l.oem_partno.toLowerCase().includes(search.toLowerCase())) ||
-                    (l.act_price &&
-                        l.act_price.toString().startsWith(search.toString()))
-            );
-
-    return (
-        <Form.Item noStyle name="billlineskeys">
-            <button onClick={() => console.log(form.getFieldsValue())}>form</button>
-            <Input onChange={(e) => setSearch(e.target.value)} allowClear/>
-            <Table
-                pagination={false}
-                size="small"
-                columns={columns}
-                rowKey="id"
-                dataSource={data}
-            />
         </Form.Item>
-    );
+      )
+    }
+  ];
+
+  const data =
+    search === ""
+      ? lineData
+      : lineData.filter(
+          (l) =>
+            (l.line_desc && l.line_desc.toLowerCase().includes(search.toLowerCase())) ||
+            (l.oem_partno && l.oem_partno.toLowerCase().includes(search.toLowerCase())) ||
+            (l.act_price && l.act_price.toString().startsWith(search.toString()))
+        );
+
+  return (
+    <Form.Item noStyle name="billlineskeys">
+      <button onClick={() => console.log(form.getFieldsValue())}>form</button>
+      <Input onChange={(e) => setSearch(e.target.value)} allowClear />
+      <Table pagination={false} size="small" columns={columns} rowKey="id" dataSource={data} />
+    </Form.Item>
+  );
 }

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

@@ -1,284 +1,216 @@
 import React from "react";
-import {MinusCircleFilled, PlusCircleFilled, WarningOutlined,} from "@ant-design/icons";
+import { MinusCircleFilled, PlusCircleFilled, WarningOutlined } from "@ant-design/icons";
-import {Button, Form, Input, InputNumber, Select, Space, Switch} from "antd";
+import { Button, Form, Input, InputNumber, Select, Space, Switch } from "antd";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import CiecaSelect from "../../utils/Ciecaselect";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BillFormItemsExtendedFormItem);
-    mapStateToProps,
-    mapDispatchToProps
-)(BillFormItemsExtendedFormItem);
 
 export function BillFormItemsExtendedFormItem({
-                                                  value,
+  value,
-                                                  bodyshop,
+  bodyshop,
-                                                  form,
+  form,
-                                                  record,
+  record,
-                                                  index,
+  index,
-                                                  disabled,
+  disabled,
-                                                  responsibilityCenters,
+  responsibilityCenters,
-                                                  discount,
+  discount
-                                              }) {
+}) {
-    // const { billlineskeys } = form.getFieldsValue("billlineskeys");
+  // const { billlineskeys } = form.getFieldsValue("billlineskeys");
-
-    const {t} = useTranslation();
-    if (!value)
-        return (
-            <Button
-                onClick={() => {
-                    const values = form.getFieldsValue("billlineskeys");
-
-                    form.setFieldsValue({
-                        ...values,
-                        billlineskeys: {
-                            ...(values.billlineskeys || {}),
-                            [record.id]: {
-                                joblineid: record.id,
-                                line_desc: record.line_desc,
-                                quantity: record.part_qty || 1,
-                                actual_price: record.act_price,
-                                cost_center: record.part_type
-                                    ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                                        ? record.part_type
-                                        : responsibilityCenters.defaults &&
-                                        (responsibilityCenters.defaults.costs[record.part_type] ||
-                                            null)
-                                    : null,
-                            },
-                        },
-                    });
-                }}
-            >
-                <PlusCircleFilled/>
-            </Button>
-        );
 
+  const { t } = useTranslation();
+  if (!value)
     return (
-        <Space wrap>
+      <Button
-            <Form.Item
+        onClick={() => {
-                label={t("billlines.fields.line_desc")}
+          const values = form.getFieldsValue("billlineskeys");
-                name={["billlineskeys", record.id, "line_desc"]}
-            >
-                <Input disabled={disabled}/>
-            </Form.Item>
-            <Form.Item
-                label={t("billlines.fields.quantity")}
-                name={["billlineskeys", record.id, "quantity"]}
-            >
-                <InputNumber precision={0} min={0} disabled={disabled}/>
-            </Form.Item>
-            <Form.Item
-                label={t("billlines.fields.actual_price")}
-                name={["billlineskeys", record.id, "actual_price"]}
-            >
-                <CurrencyInput
-                    min={0}
-                    disabled={disabled}
-                    onBlur={(e) => {
-                        const {billlineskeys} = form.getFieldsValue("billlineskeys");
-                        form.setFieldsValue({
-                            billlineskeys: {
-                                ...billlineskeys,
-                                [record.id]: {
-                                    ...billlineskeys[billlineskeys],
-                                    actual_cost: !!billlineskeys[billlineskeys].actual_cost
-                                        ? billlineskeys[billlineskeys].actual_cost
-                                        : Math.round(
-                                        (parseFloat(e.target.value) * (1 - discount) +
-                                            Number.EPSILON) *
-                                        100
-                                    ) / 100,
-                                },
-                            },
-                        });
-                    }}
-                />
-            </Form.Item>
-            <Form.Item
-                label={t("billlines.fields.actual_cost")}
-                name={["billlineskeys", record.id, "actual_cost"]}
-            >
-                <CurrencyInput min={0} disabled={disabled}/>
-            </Form.Item>
-            <Form.Item shouldUpdate>
-                {() => {
-                    const line = value;
-                    if (!!!line) return null;
-                    const lineDiscount = (
-                        1 -
-                        Math.round((line.actual_cost / line.actual_price) * 100) / 100
-                    ).toPrecision(2);
 
-                    if (lineDiscount - discount === 0) return <div/>;
+          form.setFieldsValue({
-                    return <WarningOutlined style={{color: "red"}}/>;
+            ...values,
-                }}
+            billlineskeys: {
-            </Form.Item>
+              ...(values.billlineskeys || {}),
-            <Form.Item
+              [record.id]: {
-                label={t("billlines.fields.cost_center")}
+                joblineid: record.id,
-                name={["billlineskeys", record.id, "cost_center"]}
+                line_desc: record.line_desc,
-            >
+                quantity: record.part_qty || 1,
-                <Select showSearch style={{minWidth: "3rem"}} disabled={disabled}>
+                actual_price: record.act_price,
-                    {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
+                cost_center: record.part_type
-                        ? CiecaSelect(true, false)
+                  ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                        : responsibilityCenters.costs.map((item) => (
+                    ? record.part_type
-                            <Select.Option key={item.name}>{item.name}</Select.Option>
+                    : responsibilityCenters.defaults && (responsibilityCenters.defaults.costs[record.part_type] || null)
-                        ))}
+                  : null
-                </Select>
+              }
-            </Form.Item>
+            }
-            <Form.Item
+          });
-                label={t("billlines.fields.location")}
+        }}
-                name={["billlineskeys", record.id, "location"]}
+      >
-            >
+        <PlusCircleFilled />
-                <Select disabled={disabled}>
+      </Button>
-                    {bodyshop.md_parts_locations.map((loc, idx) => (
-                        <Select.Option key={idx} value={loc}>
-                            {loc}
-                        </Select.Option>
-                    ))}
-                </Select>
-            </Form.Item>
-            <Form.Item
-                label={t("billlines.fields.deductedfromlbr")}
-                name={["billlineskeys", record.id, "deductedfromlbr"]}
-                valuePropName="checked"
-            >
-                <Switch disabled={disabled}/>
-            </Form.Item>
-            <Form.Item shouldUpdate style={{display: "inline-block"}}>
-                {() => {
-                    if (
-                        form.getFieldsValue("billlineskeys").billlineskeys[record.id]
-                            .deductedfromlbr
-                    )
-                        return (
-                            <div>
-                                <Form.Item
-                                    label={t("joblines.fields.mod_lbr_ty")}
-                                    rules={[
-                                        {
-                                            required: true,
-                                            //message: t("general.validation.required"),
-                                        },
-                                    ]}
-                                    name={[
-                                        "billlineskeys",
-                                        record.id,
-                                        "lbr_adjustment",
-                                        "mod_lbr_ty",
-                                    ]}
-                                >
-                                    <Select allowClear>
-                                        <Select.Option value="LAA">
-                                            {t("joblines.fields.lbr_types.LAA")}
-                                        </Select.Option>
-                                        <Select.Option value="LAB">
-                                            {t("joblines.fields.lbr_types.LAB")}
-                                        </Select.Option>
-                                        <Select.Option value="LAD">
-                                            {t("joblines.fields.lbr_types.LAD")}
-                                        </Select.Option>
-                                        <Select.Option value="LAE">
-                                            {t("joblines.fields.lbr_types.LAE")}
-                                        </Select.Option>
-                                        <Select.Option value="LAF">
-                                            {t("joblines.fields.lbr_types.LAF")}
-                                        </Select.Option>
-                                        <Select.Option value="LAG">
-                                            {t("joblines.fields.lbr_types.LAG")}
-                                        </Select.Option>
-                                        <Select.Option value="LAM">
-                                            {t("joblines.fields.lbr_types.LAM")}
-                                        </Select.Option>
-                                        <Select.Option value="LAR">
-                                            {t("joblines.fields.lbr_types.LAR")}
-                                        </Select.Option>
-                                        <Select.Option value="LAS">
-                                            {t("joblines.fields.lbr_types.LAS")}
-                                        </Select.Option>
-                                        <Select.Option value="LAU">
-                                            {t("joblines.fields.lbr_types.LAU")}
-                                        </Select.Option>
-                                        <Select.Option value="LA1">
-                                            {t("joblines.fields.lbr_types.LA1")}
-                                        </Select.Option>
-                                        <Select.Option value="LA2">
-                                            {t("joblines.fields.lbr_types.LA2")}
-                                        </Select.Option>
-                                        <Select.Option value="LA3">
-                                            {t("joblines.fields.lbr_types.LA3")}
-                                        </Select.Option>
-                                        <Select.Option value="LA4">
-                                            {t("joblines.fields.lbr_types.LA4")}
-                                        </Select.Option>
-                                    </Select>
-                                </Form.Item>
-                                <Form.Item
-                                    label={t("jobs.labels.adjustmentrate")}
-                                    name={["billlineskeys", record.id, "lbr_adjustment", "rate"]}
-                                    initialValue={bodyshop.default_adjustment_rate}
-                                    rules={[
-                                        {
-                                            required: true,
-                                            //message: t("general.validation.required"),
-                                        },
-                                    ]}
-                                >
-                                    <InputNumber precision={2} min={0.01}/>
-                                </Form.Item>
-                            </div>
-                        );
-                    return <></>;
-                }}
-            </Form.Item>
-
-            <Form.Item
-                label={t("billlines.fields.federal_tax_applicable")}
-                name={["billlineskeys", record.id, "applicable_taxes", "federal"]}
-                valuePropName="checked"
-            >
-                <Switch disabled={disabled}/>
-            </Form.Item>
-            <Form.Item
-                label={t("billlines.fields.state_tax_applicable")}
-                name={["billlineskeys", record.id, "applicable_taxes", "state"]}
-                valuePropName="checked"
-            >
-                <Switch disabled={disabled}/>
-            </Form.Item>
-            <Form.Item
-                label={t("billlines.fields.local_tax_applicable")}
-                name={["billlineskeys", record.id, "applicable_taxes", "local"]}
-                valuePropName="checked"
-            >
-                <Switch disabled={disabled}/>
-            </Form.Item>
-
-            <Button
-                onClick={() => {
-                    const values = form.getFieldsValue("billlineskeys");
-
-                    form.setFieldsValue({
-                        ...values,
-                        billlineskeys: {
-                            ...(values.billlineskeys || {}),
-                            [record.id]: null,
-                        },
-                    });
-                }}
-            >
-                <MinusCircleFilled/>
-            </Button>
-        </Space>
     );
+
+  return (
+    <Space wrap>
+      <Form.Item label={t("billlines.fields.line_desc")} name={["billlineskeys", record.id, "line_desc"]}>
+        <Input disabled={disabled} />
+      </Form.Item>
+      <Form.Item label={t("billlines.fields.quantity")} name={["billlineskeys", record.id, "quantity"]}>
+        <InputNumber precision={0} min={0} disabled={disabled} />
+      </Form.Item>
+      <Form.Item label={t("billlines.fields.actual_price")} name={["billlineskeys", record.id, "actual_price"]}>
+        <CurrencyInput
+          min={0}
+          disabled={disabled}
+          onBlur={(e) => {
+            const { billlineskeys } = form.getFieldsValue("billlineskeys");
+            form.setFieldsValue({
+              billlineskeys: {
+                ...billlineskeys,
+                [record.id]: {
+                  ...billlineskeys[billlineskeys],
+                  actual_cost: !!billlineskeys[billlineskeys].actual_cost
+                    ? billlineskeys[billlineskeys].actual_cost
+                    : Math.round((parseFloat(e.target.value) * (1 - discount) + Number.EPSILON) * 100) / 100
+                }
+              }
+            });
+          }}
+        />
+      </Form.Item>
+      <Form.Item label={t("billlines.fields.actual_cost")} name={["billlineskeys", record.id, "actual_cost"]}>
+        <CurrencyInput min={0} disabled={disabled} />
+      </Form.Item>
+      <Form.Item shouldUpdate>
+        {() => {
+          const line = value;
+          if (!!!line) return null;
+          const lineDiscount = (1 - Math.round((line.actual_cost / line.actual_price) * 100) / 100).toPrecision(2);
+
+          if (lineDiscount - discount === 0) return <div />;
+          return <WarningOutlined style={{ color: "red" }} />;
+        }}
+      </Form.Item>
+      <Form.Item label={t("billlines.fields.cost_center")} name={["billlineskeys", record.id, "cost_center"]}>
+        <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
+          {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
+            ? CiecaSelect(true, false)
+            : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
+        </Select>
+      </Form.Item>
+      <Form.Item label={t("billlines.fields.location")} name={["billlineskeys", record.id, "location"]}>
+        <Select disabled={disabled}>
+          {bodyshop.md_parts_locations.map((loc, idx) => (
+            <Select.Option key={idx} value={loc}>
+              {loc}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label={t("billlines.fields.deductedfromlbr")}
+        name={["billlineskeys", record.id, "deductedfromlbr"]}
+        valuePropName="checked"
+      >
+        <Switch disabled={disabled} />
+      </Form.Item>
+      <Form.Item shouldUpdate style={{ display: "inline-block" }}>
+        {() => {
+          if (form.getFieldsValue("billlineskeys").billlineskeys[record.id].deductedfromlbr)
+            return (
+              <div>
+                <Form.Item
+                  label={t("joblines.fields.mod_lbr_ty")}
+                  rules={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                  name={["billlineskeys", record.id, "lbr_adjustment", "mod_lbr_ty"]}
+                >
+                  <Select allowClear>
+                    <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
+                    <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
+                    <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
+                    <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
+                    <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
+                    <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
+                    <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
+                    <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
+                    <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
+                    <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
+                    <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
+                    <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
+                    <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
+                    <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
+                  </Select>
+                </Form.Item>
+                <Form.Item
+                  label={t("jobs.labels.adjustmentrate")}
+                  name={["billlineskeys", record.id, "lbr_adjustment", "rate"]}
+                  initialValue={bodyshop.default_adjustment_rate}
+                  rules={[
+                    {
+                      required: true
+                      //message: t("general.validation.required"),
+                    }
+                  ]}
+                >
+                  <InputNumber precision={2} min={0.01} />
+                </Form.Item>
+              </div>
+            );
+          return <></>;
+        }}
+      </Form.Item>
+
+      <Form.Item
+        label={t("billlines.fields.federal_tax_applicable")}
+        name={["billlineskeys", record.id, "applicable_taxes", "federal"]}
+        valuePropName="checked"
+      >
+        <Switch disabled={disabled} />
+      </Form.Item>
+      <Form.Item
+        label={t("billlines.fields.state_tax_applicable")}
+        name={["billlineskeys", record.id, "applicable_taxes", "state"]}
+        valuePropName="checked"
+      >
+        <Switch disabled={disabled} />
+      </Form.Item>
+      <Form.Item
+        label={t("billlines.fields.local_tax_applicable")}
+        name={["billlineskeys", record.id, "applicable_taxes", "local"]}
+        valuePropName="checked"
+      >
+        <Switch disabled={disabled} />
+      </Form.Item>
+
+      <Button
+        onClick={() => {
+          const values = form.getFieldsValue("billlineskeys");
+
+          form.setFieldsValue({
+            ...values,
+            billlineskeys: {
+              ...(values.billlineskeys || {}),
+              [record.id]: null
+            }
+          });
+        }}
+      >
+        <MinusCircleFilled />
+      </Button>
+    </Space>
+  );
 }

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

@@ -1,16 +1,17 @@
-import Icon, {UploadOutlined} from "@ant-design/icons";
+import Icon, { UploadOutlined } from "@ant-design/icons";
-import {useApolloClient} from "@apollo/client";
+import { useApolloClient } from "@apollo/client";
-import {useSplitTreatments} from "@splitsoftware/splitio-react";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import {Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload,} from "antd";
+import { Alert, Divider, Form, Input, Select, Space, Statistic, Switch, Upload } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { MdOpenInNew } from "react-icons/md";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import dayjs from "../../utils/day";
-import React, {useEffect, useState} from "react";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import {useTranslation} from "react-i18next";
-import {MdOpenInNew} from "react-icons/md";
-import {connect} from "react-redux";
-import {Link} from "react-router-dom";
-import {createStructuredSelector} from "reselect";
-import {CHECK_BILL_INVOICE_NUMBER} from "../../graphql/bills.queries";
-import {selectBodyshop} from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
@@ -20,522 +21,456 @@ import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
-import {CalculateBillTotal} from "./bill-form.totals.utility";
+import { CalculateBillTotal } from "./bill-form.totals.utility";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = (dispatch) => ({});
 
 export function BillFormComponent({
-                                      bodyshop,
+  bodyshop,
-                                      disabled,
+  disabled,
-                                      form,
+  form,
-                                      vendorAutoCompleteOptions,
+  vendorAutoCompleteOptions,
-                                      lineData,
+  lineData,
-                                      responsibilityCenters,
+  responsibilityCenters,
-                                      loadLines,
+  loadLines,
-                                      billEdit,
+  billEdit,
-                                      disableInvNumber,
+  disableInvNumber,
-                                      job,
+  job,
-                                      loadOutstandingReturns,
+  loadOutstandingReturns,
-                                      loadInventory,
+  loadInventory,
-                                      preferredMake
+  preferredMake
-                                  }) {
+}) {
+  const { t } = useTranslation();
+  const client = useApolloClient();
+  const [discount, setDiscount] = useState(0);
 
-    const {t} = useTranslation();
+  const {
-    const client = useApolloClient();
+    treatments: { Extended_Bill_Posting, ClosingPeriod }
-    const [discount, setDiscount] = useState(0);
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Extended_Bill_Posting", "ClosingPeriod"],
+    splitKey: bodyshop.imexshopid
+  });
 
-    const {treatments: {Extended_Bill_Posting, ClosingPeriod}} = useSplitTreatments({
+  const handleVendorSelect = (props, opt) => {
-        attributes: {},
+    setDiscount(opt.discount);
-        names: ["Extended_Bill_Posting", "ClosingPeriod"],
-        splitKey: bodyshop.imexshopid,
-    });
 
-
+    opt &&
-    const handleVendorSelect = (props, opt) => {
+      !billEdit &&
-        setDiscount(opt.discount);
+      loadOutstandingReturns({
-
+        variables: {
-        opt &&
+          jobId: form.getFieldValue("jobid"),
-        !billEdit &&
+          vendorId: opt.value
-        loadOutstandingReturns({
+        }
-            variables: {
-                jobId: form.getFieldValue("jobid"),
-                vendorId: opt.value,
-            },
-        });
-    };
-
-    const handleFederalTaxExemptSwitchToggle = (checked) => {
-      // Early gate
-      if (!checked) return;
-      const values = form.getFieldsValue("billlines");
-      // Gate bill lines
-      if (!values?.billlines?.length) return;
-
-          const billlines = values.billlines.map((b) => {
-        b.applicable_taxes.federal = false;
-        return b;
       });
-      form.setFieldsValue({ billlines });
+  };
-    };
 
-    useEffect(() => {
+  const handleFederalTaxExemptSwitchToggle = (checked) => {
-        if (job) form.validateFields(["is_credit_memo"]);
+    // Early gate
-    }, [job, form]);
+    if (!checked) return;
+    const values = form.getFieldsValue("billlines");
+    // Gate bill lines
+    if (!values?.billlines?.length) return;
 
-    useEffect(() => {
+    const billlines = values.billlines.map((b) => {
-        const vendorId = form.getFieldValue("vendorid");
+      b.applicable_taxes.federal = false;
-        if (vendorId && vendorAutoCompleteOptions) {
+      return b;
-            const matchingVendors = vendorAutoCompleteOptions.filter(
+    });
-                (v) => v.id === vendorId
+    form.setFieldsValue({ billlines });
-            );
+  };
-            if (matchingVendors.length === 1) {
-                setDiscount(matchingVendors[0].discount);
-            }
-        }
-        const jobId = form.getFieldValue("jobid");
-        if (jobId) {
-            loadLines({variables: {id: jobId}});
-            if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
-                loadOutstandingReturns({
-                    variables: {
-                        jobId: jobId,
-                        vendorId: vendorId,
-                    },
-                });
-            }
-        }
 
-        if (vendorId === bodyshop.inhousevendorid && !billEdit) {
+  useEffect(() => {
-            loadInventory();
+    if (job) form.validateFields(["is_credit_memo"]);
-        }
+  }, [job, form]);
-    }, [
-        form,
-        billEdit,
-        loadOutstandingReturns,
-        loadInventory,
-        setDiscount,
-        vendorAutoCompleteOptions,
-        loadLines,
-        bodyshop.inhousevendorid,
-    ]);
 
-    return (
+  useEffect(() => {
-        <div>
+    const vendorId = form.getFieldValue("vendorid");
-            <FormFieldsChanged form={form}/>
+    if (vendorId && vendorAutoCompleteOptions) {
-            <Form.Item
+      const matchingVendors = vendorAutoCompleteOptions.filter((v) => v.id === vendorId);
-                style={{display: "none"}}
+      if (matchingVendors.length === 1) {
-                name="isinhouse"
+        setDiscount(matchingVendors[0].discount);
-                valuePropName="checked"
+      }
-            >
+    }
-                <Switch/>
+    const jobId = form.getFieldValue("jobid");
-            </Form.Item>
+    if (jobId) {
-            <LayoutFormRow grow>
+      loadLines({ variables: { id: jobId } });
-                <Form.Item
+      if (form.getFieldValue("is_credit_memo") && vendorId && !billEdit) {
-                    name="jobid"
+        loadOutstandingReturns({
-                    label={t("bills.fields.ro_number")}
+          variables: {
-                    rules={[
+            jobId: jobId,
-                        {
+            vendorId: vendorId
-                            required: true,
+          }
-                            //message: t("general.validation.required"),
+        });
-                        },
+      }
-                    ]}
+    }
-                >
-                    <JobSearchSelect
-                        disabled={billEdit || disabled}
-                        convertedOnly
-                        notExported={false}
-                        onBlur={() => {
-                            if (form.getFieldValue("jobid") !== null) {
-                                loadLines({variables: {id: form.getFieldValue("jobid")}});
-                                if (form.getFieldValue("vendorid") !== null) {
-                                    loadOutstandingReturns({
-                                        variables: {
-                                            jobId: form.getFieldValue("jobid"),
-                                            vendorId: form.getFieldValue("vendorid"),
-                                        },
-                                    });
-                                }
-                            }
-                        }}
-                    />
-                </Form.Item>
-                <Form.Item
-                    label={t("bills.fields.vendor")}
-                    name="vendorid"
-                    // style={{ display: billEdit ? "none" : null }}
-                    rules={[
-                        {
-                            required: true,
-                            //message: t("general.validation.required"),
-                        },
-                        ({getFieldValue}) => ({
-                            validator(rule, value) {
-                                if (
-                                    value &&
-                                    !getFieldValue(["isinhouse"]) &&
-                                    value === bodyshop.inhousevendorid
-                                ) {
-                                    return Promise.reject(t("bills.validation.manualinhouse"));
-                                }
-                                return Promise.resolve();
-                            },
-                        }),
-                    ]}
-                >
-                    <VendorSearchSelect
-                        disabled={disabled}
-                        options={vendorAutoCompleteOptions}
-                        preferredMake={preferredMake}
-                        onSelect={handleVendorSelect}
-                    />
-                </Form.Item>
-            </LayoutFormRow>
-            {job &&
-                job.ious &&
-                job.ious.length > 0 &&
-                job.ious.map((iou) => (
-                    <Alert
-                        key={iou.id}
-                        type="warning"
-                        message={
-                            <Space>
-                                {t("bills.labels.iouexists")}
-                                <Link
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    to={`/manage/jobs/${iou.id}?tab=repairdata`}
-                                >
-                                    <Space>
-                                        {iou.ro_number}
-                                        <Icon component={MdOpenInNew}/>
-                                    </Space>
-                                </Link>
-                            </Space>
-                        }
-                    />
-                ))}
-            <LayoutFormRow>
-                <Form.Item
-                    label={t("bills.fields.invoice_number")}
-                    name="invoice_number"
-                    validateTrigger="onBlur"
-                    hasFeedback
-                    rules={[
-                        {
-                            required: true,
-                            //message: t("general.validation.required"),
-                        },
-                        ({getFieldValue}) => ({
-                            async validator(rule, value) {
-                                const vendorid = getFieldValue("vendorid");
-                                if (vendorid && value) {
-                                    const response = await client.query({
-                                        query: CHECK_BILL_INVOICE_NUMBER,
-                                        variables: {
-                                            invoice_number: value,
-                                            vendorid: vendorid,
-                                        },
-                                    });
 
-                                    if (response.data.bills_aggregate.aggregate.count === 0) {
+    if (vendorId === bodyshop.inhousevendorid && !billEdit) {
-                                        return Promise.resolve();
+      loadInventory();
-                                    } else if (
+    }
-                                        response.data.bills_aggregate.nodes.length === 1 &&
+  }, [
-                                        response.data.bills_aggregate.nodes[0].id ===
+    form,
-                                        form.getFieldValue("id")
+    billEdit,
-                                    ) {
+    loadOutstandingReturns,
-                                        return Promise.resolve();
+    loadInventory,
-                                    }
+    setDiscount,
-                                    return Promise.reject(
+    vendorAutoCompleteOptions,
-                                        t("bills.validation.unique_invoice_number")
+    loadLines,
-                                    );
+    bodyshop.inhousevendorid
-                                } else {
+  ]);
-                                    return Promise.resolve();
-                                }
-                            },
-                        }),
-                    ]}
-                >
-                    <Input disabled={disabled || disableInvNumber}/>
-                </Form.Item>
-                <Form.Item
-                    label={t("bills.fields.date")}
-                    name="date"
-                    rules={[
-                        {
-                            required: true,
-                            //message: t("general.validation.required"),
-                        },
-                        ({getFieldValue}) => ({
-                            validator(rule, value) {
-                                if (
-                                    ClosingPeriod.treatment === "on" &&
-                                    bodyshop.accountingconfig.ClosingPeriod
-                                ) {
-                                    if (
-                                        dayjs(value)
-                                            .startOf("day")
-                                            .isSameOrAfter(
-                                                dayjs(
-                                                    bodyshop.accountingconfig.ClosingPeriod[0]
-                                                ).startOf("day")
-                                            ) &&
-                                        dayjs(value)
-                                            .startOf("day")
-                                            .isSameOrBefore(
-                                                dayjs(
-                                                    bodyshop.accountingconfig.ClosingPeriod[1]
-                                                ).endOf("day")
-                                            )
-                                    ) {
-                                        return Promise.resolve();
-                                    } else {
-                                        return Promise.reject(t("bills.validation.closingperiod"));
-                                    }
-                                } else {
-                                    return Promise.resolve();
-                                }
-                            },
-                        }),
-                    ]}
-                >
-                    <FormDatePicker disabled={disabled}/>
-                </Form.Item>
-                <Form.Item
-                    label={t("bills.fields.is_credit_memo")}
-                    name="is_credit_memo"
-                    valuePropName="checked"
-                    rules={[
-                        ({getFieldValue}) => ({
-                            validator(rule, value) {
-                                if (
-                                    value === true &&
-                                    getFieldValue("jobid") &&
-                                    getFieldValue("vendorid")
-                                ) {
-                                    //Removed as this would cause an additional reload when validating the form on submit and clear the values.
-                                    // loadOutstandingReturns({
-                                    //   variables: {
-                                    //     jobId: form.getFieldValue("jobid"),
-                                    //     vendorId: form.getFieldValue("vendorid"),
-                                    //   },
-                                    // });
-                                }
 
-                                if (
+  return (
-                                    !bodyshop.bill_allow_post_to_closed &&
+    <div>
-                                    job &&
+      <FormFieldsChanged form={form} />
-                                    (job.status === bodyshop.md_ro_statuses.default_invoiced ||
+      <Form.Item style={{ display: "none" }} name="isinhouse" valuePropName="checked">
-                                        job.status === bodyshop.md_ro_statuses.default_exported ||
+        <Switch />
-                                        job.status === bodyshop.md_ro_statuses.default_void) &&
-                                    (value === false || !value)
-                                ) {
-                                    return Promise.reject(t("bills.labels.onlycmforinvoiced"));
-                                }
-
-                                return Promise.resolve();
-                            },
-                        }),
-                    ]}
-                >
-                    <Switch/>
-                </Form.Item>
-                <Form.Item
-                    label={t("bills.fields.total")}
-                    name="total"
-                    rules={[
-                        {
-                            required: true,
-                            //message: t("general.validation.required"),
-                        },
-                    ]}
-                >
-                    <CurrencyInput min={0} disabled={disabled}/>
-                </Form.Item>
-                {!billEdit && (
-                    <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-                        <Select style={{width: "10rem"}} disabled={disabled} allowClear>
-                            {bodyshop.md_parts_locations.map((loc, idx) => (
-                                <Select.Option key={idx} value={loc}>
-                                    {loc}
-                                </Select.Option>
-                            ))}
-                        </Select>
-                    </Form.Item>
-                )}
-            </LayoutFormRow>
-            <LayoutFormRow>
-                {
-                    InstanceRenderManager({imex:
-                              <Form.Item
-                        span={3}
-                        label={t("bills.fields.federal_tax_rate")}
-                        name="federal_tax_rate"
-                      >
-                        <CurrencyInput min={0} disabled={disabled} />
-                      </Form.Item> })
-
-                }
-                <Form.Item
-                    span={3}
-                    label={t("bills.fields.state_tax_rate")}
-                    name="state_tax_rate"
-                >
-                    <CurrencyInput min={0} disabled={disabled}/>
-                </Form.Item>
-{
-    InstanceRenderManager({imex: <>
-        <Form.Item
-        span={3}
-        label={t("bills.fields.local_tax_rate")}
-        name="local_tax_rate"
-      >
-        <CurrencyInput min={0} />
       </Form.Item>
-        {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+      <LayoutFormRow grow>
-            <Form.Item
+        <Form.Item
-                      span={2}
+          name="jobid"
-                      label={t("bills.labels.federal_tax_exempt")}
+          label={t("bills.fields.ro_number")}
-                      name="federal_tax_exempt"
+          rules={[
-            >
+            {
-                      <Switch onChange={handleFederalTaxExemptSwitchToggle} />
+              required: true
-            </Form.Item>
+              //message: t("general.validation.required"),
-        ) : null}
+            }
-        </>})
+          ]}
-}
+        >
-                <Form.Item shouldUpdate span={13}>
+          <JobSearchSelect
-                    {() => {
+            disabled={billEdit || disabled}
-                        const values = form.getFieldsValue([
+            convertedOnly
-                            "billlines",
+            notExported={false}
-                            "total",
+            onBlur={() => {
-                            "federal_tax_rate",
+              if (form.getFieldValue("jobid") !== null && form.getFieldValue("jobid") !== undefined) {
-                            "state_tax_rate",
+                loadLines({ variables: { id: form.getFieldValue("jobid") } });
-                            "local_tax_rate",
+                if (form.getFieldValue("vendorid") !== null && form.getFieldValue("vendorid") !== undefined) {
-                        ]);
+                  loadOutstandingReturns({
-                        let totals;
+                    variables: {
-                        if (
+                      jobId: form.getFieldValue("jobid"),
-                            !!values.total &&
+                      vendorId: form.getFieldValue("vendorid")
-                            !!values.billlines &&
-                            values.billlines.length > 0
-                        )
-                            totals = CalculateBillTotal(values);
-                        if (!!totals)
-                            return (
-                                <div align="right">
-                                    <Space wrap>
-                                        <Statistic
-                                            title={t("bills.labels.subtotal")}
-                                            value={totals.subtotal.toFormat()}
-                                            precision={2}
-                                        />
-                                        {
-                                            InstanceRenderManager({imex: <Statistic
-                                              title={t("bills.labels.federal_tax")}
-                                              value={totals.federalTax.toFormat()}
-                                              precision={2}
-                                            /> })
-                                        }
-                                        <Statistic
-                                            title={t("bills.labels.state_tax")}
-                                            value={totals.stateTax.toFormat()}
-                                            precision={2}
-                                        />
-                                        {
-                                            InstanceRenderManager({imex: <Statistic
-                                              title={t("bills.labels.local_tax")}
-                                              value={totals.localTax.toFormat()}
-                                              precision={2}
-                                            />})
-                                        }
-                                        <Statistic
-                                            title={t("bills.labels.entered_total")}
-                                            value={totals.enteredTotal.toFormat()}
-                                            precision={2}
-                                        />
-                                        <Statistic
-                                            title={t("bills.labels.bill_total")}
-                                            value={totals.invoiceTotal.toFormat()}
-                                            precision={2}
-                                        />
-                                        <Statistic
-                                            title={t("bills.labels.discrepancy")}
-                                            valueStyle={{
-                                                color:
-                                                    totals.discrepancy.getAmount() === 0
-                                                        ? "green"
-                                                        : "red",
-                                            }}
-                                            value={totals.discrepancy.toFormat()}
-                                            precision={2}
-                                        />
-                                    </Space>
-                                    {form.getFieldValue("is_credit_memo") ? (
-                                        <AlertComponent
-                                            type="warning"
-                                            message={t("bills.labels.enteringcreditmemo")}
-                                        />
-                                    ) : null}
-                                </div>
-                            );
-                        return null;
-                    }}
-                </Form.Item>
-            </LayoutFormRow>
-            <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
-
-            {Extended_Bill_Posting.treatment === "on" ? (
-                <BillFormLinesExtended
-                    lineData={lineData}
-                    discount={discount}
-                    form={form}
-                    responsibilityCenters={responsibilityCenters}
-                    disabled={disabled}
-                />
-            ) : (
-                <BillFormLines
-                    lineData={lineData}
-                    discount={discount}
-                    form={form}
-                    responsibilityCenters={responsibilityCenters}
-                    disabled={disabled}
-                    billEdit={billEdit}
-                />
-            )}
-
-            <Form.Item
-                name="upload"
-                label="Upload"
-                style={{display: billEdit ? "none" : null}}
-                valuePropName="fileList"
-                getValueFromEvent={(e) => {
-                    if (Array.isArray(e)) {
-                        return e;
                     }
-                    return e && e.fileList;
+                  });
-                }}
+                }
-            >
+              }
-                <Upload.Dragger
+            }}
-                    multiple={true}
+          />
-                    name="logo"
+        </Form.Item>
-                    beforeUpload={() => false}
+        <Form.Item
-                    listType="picture"
+          label={t("bills.fields.vendor")}
-                >
+          name="vendorid"
-                    <>
+          // style={{ display: billEdit ? "none" : null }}
-                        <p className="ant-upload-drag-icon">
+          rules={[
-                            <UploadOutlined/>
+            {
-                        </p>
+              required: true
-                        <p className="ant-upload-text">
+              //message: t("general.validation.required"),
-                            Click or drag files to this area to upload.
+            },
-                        </p>
+            ({ getFieldValue }) => ({
-                    </>
+              validator(rule, value) {
-                </Upload.Dragger>
+                if (value && !getFieldValue(["isinhouse"]) && value === bodyshop.inhousevendorid) {
+                  return Promise.reject(t("bills.validation.manualinhouse"));
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <VendorSearchSelect
+            disabled={disabled}
+            options={vendorAutoCompleteOptions}
+            preferredMake={preferredMake}
+            onSelect={handleVendorSelect}
+          />
+        </Form.Item>
+      </LayoutFormRow>
+      {job &&
+        job.ious &&
+        job.ious.length > 0 &&
+        job.ious.map((iou) => (
+          <Alert
+            key={iou.id}
+            type="warning"
+            message={
+              <Space>
+                {t("bills.labels.iouexists")}
+                <Link target="_blank" rel="noopener noreferrer" to={`/manage/jobs/${iou.id}?tab=repairdata`}>
+                  <Space>
+                    {iou.ro_number}
+                    <Icon component={MdOpenInNew} />
+                  </Space>
+                </Link>
+              </Space>
+            }
+          />
+        ))}
+      <LayoutFormRow>
+        <Form.Item
+          label={t("bills.fields.invoice_number")}
+          name="invoice_number"
+          validateTrigger="onBlur"
+          hasFeedback
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            },
+            ({ getFieldValue }) => ({
+              async validator(rule, value) {
+                const vendorid = getFieldValue("vendorid");
+                if (vendorid && value) {
+                  const response = await client.query({
+                    query: CHECK_BILL_INVOICE_NUMBER,
+                    variables: {
+                      invoice_number: value,
+                      vendorid: vendorid
+                    }
+                  });
+
+                  if (response.data.bills_aggregate.aggregate.count === 0) {
+                    return Promise.resolve();
+                  } else if (
+                    response.data.bills_aggregate.nodes.length === 1 &&
+                    response.data.bills_aggregate.nodes[0].id === form.getFieldValue("id")
+                  ) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(t("bills.validation.unique_invoice_number"));
+                } else {
+                  return Promise.resolve();
+                }
+              }
+            })
+          ]}
+        >
+          <Input disabled={disabled || disableInvNumber} />
+        </Form.Item>
+        <Form.Item
+          label={t("bills.fields.date")}
+          name="date"
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (ClosingPeriod.treatment === "on" && bodyshop.accountingconfig.ClosingPeriod) {
+                  if (
+                    dayjs(value)
+                      .startOf("day")
+                      .isSameOrAfter(dayjs(bodyshop.accountingconfig.ClosingPeriod[0]).startOf("day")) &&
+                    dayjs(value)
+                      .startOf("day")
+                      .isSameOrBefore(dayjs(bodyshop.accountingconfig.ClosingPeriod[1]).endOf("day"))
+                  ) {
+                    return Promise.resolve();
+                  } else {
+                    return Promise.reject(t("bills.validation.closingperiod"));
+                  }
+                } else {
+                  return Promise.resolve();
+                }
+              }
+            })
+          ]}
+        >
+          <FormDatePicker disabled={disabled} />
+        </Form.Item>
+        <Form.Item
+          label={t("bills.fields.is_credit_memo")}
+          name="is_credit_memo"
+          valuePropName="checked"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (value === true && getFieldValue("jobid") && getFieldValue("vendorid")) {
+                  //Removed as this would cause an additional reload when validating the form on submit and clear the values.
+                  // loadOutstandingReturns({
+                  //   variables: {
+                  //     jobId: form.getFieldValue("jobid"),
+                  //     vendorId: form.getFieldValue("vendorid"),
+                  //   },
+                  // });
+                }
+
+                if (
+                  !bodyshop.bill_allow_post_to_closed &&
+                  job &&
+                  (job.status === bodyshop.md_ro_statuses.default_invoiced ||
+                    job.status === bodyshop.md_ro_statuses.default_exported ||
+                    job.status === bodyshop.md_ro_statuses.default_void) &&
+                  (value === false || !value)
+                ) {
+                  return Promise.reject(t("bills.labels.onlycmforinvoiced"));
+                }
+
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <Switch />
+        </Form.Item>
+        <Form.Item
+          label={t("bills.fields.total")}
+          name="total"
+          rules={[
+            {
+              required: true
+              //message: t("general.validation.required"),
+            }
+          ]}
+        >
+          <CurrencyInput min={0} disabled={disabled} />
+        </Form.Item>
+        {!billEdit && (
+          <Form.Item label={t("bills.fields.allpartslocation")} name="location">
+            <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
+              {bodyshop.md_parts_locations.map((loc, idx) => (
+                <Select.Option key={idx} value={loc}>
+                  {loc}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+        )}
+      </LayoutFormRow>
+      <LayoutFormRow>
+        {InstanceRenderManager({
+          imex: (
+            <Form.Item span={3} label={t("bills.fields.federal_tax_rate")} name="federal_tax_rate">
+              <CurrencyInput min={0} disabled={disabled} />
             </Form.Item>
-        </div>
+          )
-    );
+        })}
+        <Form.Item span={3} label={t("bills.fields.state_tax_rate")} name="state_tax_rate">
+          <CurrencyInput min={0} disabled={disabled} />
+        </Form.Item>
+        {InstanceRenderManager({
+          imex: (
+            <>
+              <Form.Item span={3} label={t("bills.fields.local_tax_rate")} name="local_tax_rate">
+                <CurrencyInput min={0} />
+              </Form.Item>
+              {bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid ? (
+                <Form.Item span={2} label={t("bills.labels.federal_tax_exempt")} name="federal_tax_exempt">
+                  <Switch onChange={handleFederalTaxExemptSwitchToggle} />
+                </Form.Item>
+              ) : null}
+            </>
+          )
+        })}
+        <Form.Item shouldUpdate span={13}>
+          {() => {
+            const values = form.getFieldsValue([
+              "billlines",
+              "total",
+              "federal_tax_rate",
+              "state_tax_rate",
+              "local_tax_rate"
+            ]);
+            let totals;
+            if (!!values.total && !!values.billlines && values.billlines.length > 0)
+              totals = CalculateBillTotal(values);
+            if (!!totals)
+              return (
+                <div align="right">
+                  <Space size="large" wrap>
+                    <Statistic title={t("bills.labels.subtotal")} value={totals.subtotal.toFormat()} precision={2} />
+                    {InstanceRenderManager({
+                      imex: (
+                        <Statistic
+                          title={t("bills.labels.federal_tax")}
+                          value={totals.federalTax.toFormat()}
+                          precision={2}
+                        />
+                      )
+                    })}
+                    <Statistic title={t("bills.labels.state_tax")} value={totals.stateTax.toFormat()} precision={2} />
+                    {InstanceRenderManager({
+                      imex: (
+                        <Statistic
+                          title={t("bills.labels.local_tax")}
+                          value={totals.localTax.toFormat()}
+                          precision={2}
+                        />
+                      )
+                    })}
+                    <Statistic
+                      title={t("bills.labels.entered_total")}
+                      value={totals.enteredTotal.toFormat()}
+                      precision={2}
+                    />
+                    <Statistic
+                      title={t("bills.labels.bill_total")}
+                      value={totals.invoiceTotal.toFormat()}
+                      precision={2}
+                    />
+                    <Statistic
+                      title={t("bills.labels.discrepancy")}
+                      valueStyle={{
+                        color: totals.discrepancy.getAmount() === 0 ? "green" : "red"
+                      }}
+                      value={totals.discrepancy.toFormat()}
+                      precision={2}
+                    />
+                  </Space>
+                  {form.getFieldValue("is_credit_memo") ? (
+                    <AlertComponent type="warning" message={t("bills.labels.enteringcreditmemo")} />
+                  ) : null}
+                </div>
+              );
+            return null;
+          }}
+        </Form.Item>
+      </LayoutFormRow>
+      <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
+
+      {Extended_Bill_Posting.treatment === "on" ? (
+        <BillFormLinesExtended
+          lineData={lineData}
+          discount={discount}
+          form={form}
+          responsibilityCenters={responsibilityCenters}
+          disabled={disabled}
+        />
+      ) : (
+        <BillFormLines
+          lineData={lineData}
+          discount={discount}
+          form={form}
+          responsibilityCenters={responsibilityCenters}
+          disabled={disabled}
+          billEdit={billEdit}
+        />
+      )}
+      <Divider orientation="left" style={{ display: billEdit ? "none" : null }}>
+        {t("documents.labels.upload")}
+      </Divider>
+      <Form.Item
+        name="upload"
+        label="Upload"
+        style={{ display: billEdit ? "none" : null }}
+        valuePropName="fileList"
+        getValueFromEvent={(e) => {
+          if (Array.isArray(e)) {
+            return e;
+          }
+          return e && e.fileList;
+        }}
+      >
+        <Upload.Dragger multiple={true} name="logo" beforeUpload={() => false} listType="picture">
+          <>
+            <p className="ant-upload-drag-icon">
+              <UploadOutlined />
+            </p>
+            <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          </>
+        </Upload.Dragger>
+      </Form.Item>
+    </div>
+  );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(BillFormComponent);

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

@@ -1,83 +1,67 @@
-import {useLazyQuery, useQuery} from "@apollo/client";
+import { useLazyQuery, useQuery } from "@apollo/client";
-import {useSplitTreatments} from "@splitsoftware/splitio-react";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import React from "react";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {QUERY_OUTSTANDING_INVENTORY} from "../../graphql/inventory.queries";
+import { QUERY_OUTSTANDING_INVENTORY } from "../../graphql/inventory.queries";
-import {GET_JOB_LINES_TO_ENTER_BILL} from "../../graphql/jobs-lines.queries";
+import { GET_JOB_LINES_TO_ENTER_BILL } from "../../graphql/jobs-lines.queries";
-import {QUERY_UNRECEIVED_LINES} from "../../graphql/parts-orders.queries";
+import { QUERY_UNRECEIVED_LINES } from "../../graphql/parts-orders.queries";
-import {SEARCH_VENDOR_AUTOCOMPLETE} from "../../graphql/vendors.queries";
+import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import BillCmdReturnsTableComponent from "../bill-cm-returns-table/bill-cm-returns-table.component";
 import BillInventoryTable from "../bill-inventory-table/bill-inventory-table.component";
 import BillFormComponent from "./bill-form.component";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 
-export function BillFormContainer({
+export function BillFormContainer({ bodyshop, form, billEdit, disabled, disableInvNumber }) {
-                                      bodyshop,
+  const {
-                                      form,
+    treatments: { Simple_Inventory }
-                                      billEdit,
+  } = useSplitTreatments({
-                                      disabled,
+    attributes: {},
-                                      disableInvNumber,
+    names: ["Simple_Inventory"],
-                                  }) {
+    splitKey: bodyshop && bodyshop.imexshopid
-    const {treatments: {Simple_Inventory}} = useSplitTreatments({
+  });
-        attributes: {},
-        names: ["Simple_Inventory"],
-        splitKey: bodyshop && bodyshop.imexshopid,
-    });
 
-    const {data: VendorAutoCompleteData} = useQuery(
+  const { data: VendorAutoCompleteData } = useQuery(SEARCH_VENDOR_AUTOCOMPLETE, {
-        SEARCH_VENDOR_AUTOCOMPLETE,
+    fetchPolicy: "network-only",
-        {fetchPolicy: "network-only", nextFetchPolicy: "network-only"}
+    nextFetchPolicy: "network-only"
-    );
+  });
 
-    const [loadLines, {data: lineData}] = useLazyQuery(
+  const [loadLines, { data: lineData }] = useLazyQuery(GET_JOB_LINES_TO_ENTER_BILL);
-        GET_JOB_LINES_TO_ENTER_BILL
-    );
 
-    const [loadOutstandingReturns, {loading: returnLoading, data: returnData}] =
+  const [loadOutstandingReturns, { loading: returnLoading, data: returnData }] = useLazyQuery(QUERY_UNRECEIVED_LINES);
-        useLazyQuery(QUERY_UNRECEIVED_LINES);
+  const [loadInventory, { loading: inventoryLoading, data: inventoryData }] = useLazyQuery(QUERY_OUTSTANDING_INVENTORY);
-    const [loadInventory, {loading: inventoryLoading, data: inventoryData}] =
-        useLazyQuery(QUERY_OUTSTANDING_INVENTORY);
 
-    return (
+  return (
-        <>
+    <>
-            <BillFormComponent
+      <BillFormComponent
-                disabled={disabled}
+        disabled={disabled}
-                form={form}
+        form={form}
-                billEdit={billEdit}
+        billEdit={billEdit}
-                vendorAutoCompleteOptions={
+        vendorAutoCompleteOptions={VendorAutoCompleteData && VendorAutoCompleteData.vendors}
-                    VendorAutoCompleteData && VendorAutoCompleteData.vendors
+        loadLines={loadLines}
-                }
+        lineData={lineData ? lineData.joblines : []}
-                loadLines={loadLines}
+        job={lineData ? lineData.jobs_by_pk : null}
-                lineData={lineData ? lineData.joblines : []}
+        responsibilityCenters={bodyshop.md_responsibility_centers || null}
-                job={lineData ? lineData.jobs_by_pk : null}
+        disableInvNumber={disableInvNumber}
-                responsibilityCenters={bodyshop.md_responsibility_centers || null}
+        loadOutstandingReturns={loadOutstandingReturns}
-                disableInvNumber={disableInvNumber}
+        loadInventory={loadInventory}
-                loadOutstandingReturns={loadOutstandingReturns}
+        preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}
-                loadInventory={loadInventory}
+      />
-                preferredMake={lineData ? lineData.jobs_by_pk.v_make_desc : null}
+      {!billEdit && <BillCmdReturnsTableComponent form={form} returnLoading={returnLoading} returnData={returnData} />}
-            />
+      {Simple_Inventory.treatment === "on" && (
-            {!billEdit && (
+        <BillInventoryTable
-                <BillCmdReturnsTableComponent
+          form={form}
-                    form={form}
+          inventoryLoading={inventoryLoading}
-                    returnLoading={returnLoading}
+          inventoryData={billEdit ? [] : inventoryData}
-                    returnData={returnData}
+          billEdit={billEdit}
-                />
+        />
-            )}
+      )}
-            {Simple_Inventory.treatment === "on" && (
+    </>
-                <BillInventoryTable
+  );
-                    form={form}
-                    inventoryLoading={inventoryLoading}
-                    inventoryData={billEdit ? [] : inventoryData}
-                    billEdit={billEdit}
-                />
-            )}
-        </>
-    );
 }
 
 export default connect(mapStateToProps, null)(BillFormContainer);

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

@@ -1,47 +1,42 @@
 import Dinero from "dinero.js";
 
 export const CalculateBillTotal = (invoice) => {
-    const {total, billlines, federal_tax_rate, local_tax_rate, state_tax_rate} =
+  const { total, billlines, federal_tax_rate, local_tax_rate, state_tax_rate } = invoice;
-        invoice;
 
-    //TODO Determine why this recalculates so many times.
+  //TODO Determine why this recalculates so many times.
-    let subtotal = Dinero({amount: 0});
+  let subtotal = Dinero({ amount: 0 });
-    let federalTax = Dinero({amount: 0});
+  let federalTax = Dinero({ amount: 0 });
-    let stateTax = Dinero({amount: 0});
+  let stateTax = Dinero({ amount: 0 });
-    let localTax = Dinero({amount: 0});
+  let localTax = Dinero({ amount: 0 });
 
-    if (!!!billlines) return null;
+  if (!!!billlines) return null;
 
-    billlines.forEach((i) => {
+  billlines.forEach((i) => {
-        if (!!i) {
+    if (!!i) {
-            const itemTotal = Dinero({
+      const itemTotal = Dinero({
-                amount: Math.round((i.actual_cost || 0) * 100),
+        amount: Math.round((i.actual_cost || 0) * 100)
-            }).multiply(i.quantity || 1);
+      }).multiply(i.quantity || 1);
 
-            subtotal = subtotal.add(itemTotal);
+      subtotal = subtotal.add(itemTotal);
-            if (i.applicable_taxes?.federal) {
+      if (i.applicable_taxes?.federal) {
-                federalTax = federalTax.add(
+        federalTax = federalTax.add(itemTotal.percentage(federal_tax_rate || 0));
-                    itemTotal.percentage(federal_tax_rate || 0)
+      }
-                );
+      if (i.applicable_taxes?.state) stateTax = stateTax.add(itemTotal.percentage(state_tax_rate || 0));
-            }
+      if (i.applicable_taxes?.local) localTax = localTax.add(itemTotal.percentage(local_tax_rate || 0));
-            if (i.applicable_taxes?.state)
+    }
-                stateTax = stateTax.add(itemTotal.percentage(state_tax_rate || 0));
+  });
-            if (i.applicable_taxes?.local)
-                localTax = localTax.add(itemTotal.percentage(local_tax_rate || 0));
-        }
-    });
 
-    const invoiceTotal = Dinero({amount: Math.round((total || 0) * 100)});
+  const invoiceTotal = Dinero({ amount: Math.round((total || 0) * 100) });
-    const enteredTotal = subtotal.add(federalTax).add(stateTax).add(localTax);
+  const enteredTotal = subtotal.add(federalTax).add(stateTax).add(localTax);
-    const discrepancy = enteredTotal.subtract(invoiceTotal);
+  const discrepancy = enteredTotal.subtract(invoiceTotal);
 
-    return {
+  return {
-        subtotal,
+    subtotal,
-        federalTax,
+    federalTax,
-        stateTax,
+    stateTax,
-        localTax,
+    localTax,
-        enteredTotal,
+    enteredTotal,
-        invoiceTotal,
+    invoiceTotal,
-        discrepancy,
+    discrepancy
-    };
+  };
 };

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

@@ -1,173 +1,153 @@
-import {Checkbox, Form, Skeleton, Typography} from "antd";
+import { Checkbox, Form, Skeleton, Typography } from "antd";
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
 import "./bill-inventory-table.styles.scss";
 
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
-import {selectBillEnterModal} from "../../redux/modals/modals.selectors";
+import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop,
-    billEnterModal: selectBillEnterModal,
+  billEnterModal: selectBillEnterModal
 });
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(BillInventoryTable);
 
-export function BillInventoryTable({
+export function BillInventoryTable({ billEnterModal, bodyshop, form, billEdit, inventoryLoading, inventoryData }) {
-                                       billEnterModal,
+  const { t } = useTranslation();
-                                       bodyshop,
-                                       form,
-                                       billEdit,
-                                       inventoryLoading,
-                                       inventoryData,
-                                   }) {
-    const {t} = useTranslation();
 
-    useEffect(() => {
+  useEffect(() => {
-        if (inventoryData && inventoryData.inventory) {
+    if (inventoryData && inventoryData.inventory) {
-            form.setFieldsValue({
+      form.setFieldsValue({
-                inventory: billEnterModal.context.consumeinventoryid
+        inventory: billEnterModal.context.consumeinventoryid
-                    ? inventoryData.inventory.map((i) => {
+          ? inventoryData.inventory.map((i) => {
-                        if (i.id === billEnterModal.context.consumeinventoryid)
+              if (i.id === billEnterModal.context.consumeinventoryid) i.consumefrominventory = true;
-                            i.consumefrominventory = true;
+              return i;
-                        return i;
+            })
-                    })
+          : inventoryData.inventory
-                    : inventoryData.inventory,
+      });
-            });
+    }
+  }, [inventoryData, form, billEnterModal.context.consumeinventoryid]);
+
+  return (
+    <Form.Item shouldUpdate={(prev, cur) => prev.vendorid !== cur.vendorid} noStyle>
+      {() => {
+        const is_inhouse = form.getFieldValue("vendorid") === bodyshop.inhousevendorid;
+
+        if (!is_inhouse || billEdit) {
+          return null;
         }
-    }, [inventoryData, form, billEnterModal.context.consumeinventoryid]);
 
-    return (
+        if (inventoryLoading) return <Skeleton />;
-        <Form.Item
-            shouldUpdate={(prev, cur) => prev.vendorid !== cur.vendorid}
-            noStyle
-        >
-            {() => {
-                const is_inhouse =
-                    form.getFieldValue("vendorid") === bodyshop.inhousevendorid;
 
-                if (!is_inhouse || billEdit) {
+        return (
-                    return null;
+          <Form.List name="inventory">
-                }
+            {(fields, { add, remove, move }) => {
+              return (
+                <>
+                  <Typography.Title level={4}>{t("inventory.labels.inventory")}</Typography.Title>
+                  <table className="bill-inventory-table">
+                    <thead>
+                      <tr>
+                        <th>{t("billlines.fields.line_desc")}</th>
+                        <th>{t("vendors.fields.name")}</th>
+                        <th>{t("billlines.fields.quantity")}</th>
+                        <th>{t("billlines.fields.actual_price")}</th>
+                        <th>{t("billlines.fields.actual_cost")}</th>
+                        <th>{t("inventory.fields.comment")}</th>
+                        <th>{t("inventory.actions.consumefrominventory")}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {fields.map((field, index) => (
+                        <tr key={field.key}>
+                          <td>
+                            <Form.Item
+                              //   label={t("joblines.fields.line_desc")}
+                              key={`${index}line_desc`}
+                              name={[field.name, "line_desc"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
 
-                if (inventoryLoading) return <Skeleton/>;
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}part_type`}
+                              name={[field.name, "billline", "bill", "vendor", "name"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}quantity`}
+                              name={[field.name, "quantity"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}act_price`}
+                              name={[field.name, "actual_price"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}cost`}
+                              name={[field.name, "actual_cost"]}
+                            >
+                              <ReadOnlyFormItemComponent type="currency" />
+                            </Form.Item>
+                          </td>
+                          <td>
+                            <Form.Item
+                              span={2}
+                              //label={t("joblines.fields.mod_lb_hrs")}
+                              key={`${index}comment`}
+                              name={[field.name, "comment"]}
+                            >
+                              <ReadOnlyFormItemComponent />
+                            </Form.Item>
+                          </td>
 
-                return (
+                          <td>
-                    <Form.List name="inventory">
+                            <Form.Item
-                        {(fields, {add, remove, move}) => {
+                              span={2}
-                            return (
+                              //label={t("joblines.fields.mod_lb_hrs")}
-                                <>
+                              key={`${index}consumefrominventory`}
-                                    <Typography.Title level={4}>
+                              name={[field.name, "consumefrominventory"]}
-                                        {t("inventory.labels.inventory")}
+                              valuePropName="checked"
-                                    </Typography.Title>
+                            >
-                                    <table className="bill-inventory-table">
+                              <Checkbox />
-                                        <thead>
+                            </Form.Item>
-                                        <tr>
+                          </td>
-                                            <th>{t("billlines.fields.line_desc")}</th>
+                        </tr>
-                                            <th>{t("vendors.fields.name")}</th>
+                      ))}
-                                            <th>{t("billlines.fields.quantity")}</th>
+                    </tbody>
-                                            <th>{t("billlines.fields.actual_price")}</th>
+                  </table>
-                                            <th>{t("billlines.fields.actual_cost")}</th>
+                </>
-                                            <th>{t("inventory.fields.comment")}</th>
+              );
-                                            <th>{t("inventory.actions.consumefrominventory")}</th>
-                                        </tr>
-                                        </thead>
-                                        <tbody>
-                                        {fields.map((field, index) => (
-                                            <tr key={field.key}>
-                                                <td>
-                                                    <Form.Item
-                                                        //   label={t("joblines.fields.line_desc")}
-                                                        key={`${index}line_desc`}
-                                                        name={[field.name, "line_desc"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent/>
-                                                    </Form.Item>
-                                                </td>
-
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}part_type`}
-                                                        name={[
-                                                            field.name,
-                                                            "billline",
-                                                            "bill",
-                                                            "vendor",
-                                                            "name",
-                                                        ]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent/>
-                                                    </Form.Item>
-                                                </td>
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}quantity`}
-                                                        name={[field.name, "quantity"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent/>
-                                                    </Form.Item>
-                                                </td>
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}act_price`}
-                                                        name={[field.name, "actual_price"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent type="currency"/>
-                                                    </Form.Item>
-                                                </td>
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}cost`}
-                                                        name={[field.name, "actual_cost"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent type="currency"/>
-                                                    </Form.Item>
-                                                </td>
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}comment`}
-                                                        name={[field.name, "comment"]}
-                                                    >
-                                                        <ReadOnlyFormItemComponent/>
-                                                    </Form.Item>
-                                                </td>
-
-                                                <td>
-                                                    <Form.Item
-                                                        span={2}
-                                                        //label={t("joblines.fields.mod_lb_hrs")}
-                                                        key={`${index}consumefrominventory`}
-                                                        name={[field.name, "consumefrominventory"]}
-                                                        valuePropName="checked"
-                                                    >
-                                                        <Checkbox/>
-                                                    </Form.Item>
-                                                </td>
-                                            </tr>
-                                        ))}
-                                        </tbody>
-                                    </table>
-                                </>
-                            );
-                        }}
-                    </Form.List>
-                );
             }}
-        </Form.Item>
+          </Form.List>
-    );
+        );
+      }}
+    </Form.Item>
+  );
 }

client/src/components/bill-inventory-table/bill-inventory-table.styles.scss

@@ -16,4 +16,4 @@
   tr:hover {
     background-color: #f5f5f5;
   }
-}
+}

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

@@ -1,98 +1,70 @@
-import {Select} from "antd";
+import { Select } from "antd";
-import React, {forwardRef} from "react";
+import React, { forwardRef } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import InstanceRenderMgr from '../../utils/instanceRenderMgr';
+import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
 //To be used as a form element only.
-const {Option} = Select;
+const { Option } = Select;
-const BillLineSearchSelect = (
+const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
-    {options, disabled, allowRemoved, ...restProps},
+  const { t } = useTranslation();
-    ref
-) => {
-    const {t} = useTranslation();
 
-    return (
+  return (
-        <Select
+    <Select
-            disabled={disabled}
+      disabled={disabled}
-            ref={ref}
+      ref={ref}
-            showSearch
+      showSearch
-            popupMatchSelectWidth={false}
+      popupMatchSelectWidth={false}
-            optionLabelProp={"name"}
+      optionLabelProp={"name"}
-            //  optionFilterProp="line_desc"
+      //  optionFilterProp="line_desc"
-            filterOption={(inputValue, option) => {
+      filterOption={(inputValue, option) => {
-                return (
+        return (
-                    (option.line_desc &&
+          (option.line_desc && option.line_desc.toLowerCase().includes(inputValue.toLowerCase())) ||
-                        option.line_desc
+          (option.oem_partno && option.oem_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
-                            .toLowerCase()
+          (option.alt_partno && option.alt_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
-                            .includes(inputValue.toLowerCase())) ||
+          (option.act_price && option.act_price.toString().startsWith(inputValue.toString()))
-                    (option.oem_partno &&
+        );
-                        option.oem_partno
+      }}
-                            .toLowerCase()
+      notFoundContent={"Removed."}
-                            .includes(inputValue.toLowerCase())) ||
+      options={[
-                    (option.alt_partno &&
+        { value: "noline", label: t("billlines.labels.other"), name: t("billlines.labels.other") },
-                        option.alt_partno
+        ...options.map((item) => ({
-                            .toLowerCase()
+          disabled: allowRemoved ? false : item.removed,
-                            .includes(inputValue.toLowerCase())) ||
+          key: item.id,
-                    (option.act_price &&
+          value: item.id,
-                        option.act_price.toString().startsWith(inputValue.toString()))
+          cost: item.act_price ? item.act_price : 0,
-                );
+          part_type: item.part_type,
-            }}
+          line_desc: item.line_desc,
-            notFoundContent={"Removed."}
+          part_qty: item.part_qty,
-            {...restProps}
+          oem_partno: item.oem_partno,
-        >
+          alt_partno: item.alt_partno,
-            <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
+          act_price: item.act_price,
-                {t("billlines.labels.other")}
+          style: {
-            </Select.Option>
+            ...(item.removed ? { textDecoration: "line-through" } : {})
-            {options
+          },
-                ? options.map((item) => (
+          name: `${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-                    <Option
+            item.oem_partno ? ` - ${item.oem_partno}` : ""
-                        disabled={allowRemoved ? false : item.removed}
+          }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
-                        key={item.id}
+          label: (
-                        value={item.id}
+            <>
-                        cost={item.act_price ? item.act_price : 0}
-                        part_type={item.part_type}
-                        line_desc={item.line_desc}
-                        part_qty={item.part_qty}
-                        oem_partno={item.oem_partno}
-                        alt_partno={item.alt_partno}
-                        act_price={item.act_price}
-                        style={{
-                            ...(item.removed ? {textDecoration: "line-through"} : {}),
-                        }}
-                        name={`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-                            item.oem_partno ? ` - ${item.oem_partno}` : ""
-                        }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
-                    >
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
-                    item.oem_partno ? ` - ${item.oem_partno}` : ""
+                  item.oem_partno ? ` - ${item.oem_partno}` : ""
                 }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
               </span>
-                        {
+              {InstanceRenderMgr({
-                            InstanceRenderMgr
+                rome: item.act_price === 0 && item.mod_lb_hrs > 0 && (
-                            (
+                  <span style={{ float: "right", paddingleft: "1rem" }}>{`${item.mod_lb_hrs} units`}</span>
-                                {
+                )
-                                    rome: item.act_price === 0 && item.mod_lb_hrs > 0 && (
+              })}
-                            <span style={{float: "right", paddingleft: "1rem"}}>
+              <span style={{ float: "right", paddingleft: "1rem" }}>
-                  {`${item.mod_lb_hrs} units`}
+                {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
-                </span>
-                        )
-
-                                }
-                            )
-
-
-                    }
-
-                        <span style={{float: "right", paddingleft: "1rem"}}>
-                {item.act_price
-                    ? `$${item.act_price && item.act_price.toFixed(2)}`
-                    : ``}
               </span>
-                    </Option>
+            </>
-                ))
+          )
-                : null}
+        }))
-        </Select>
+      ]}
-    );
+      {...restProps}
+    ></Select>
+  );
 };
 export default forwardRef(BillLineSearchSelect);

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

@@ -1,97 +1,89 @@
-import {gql, useMutation} from "@apollo/client";
+import { gql, useMutation } from "@apollo/client";
-import {Button, notification} from "antd";
+import { Button, notification } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectAuthLevel, selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
+import { selectAuthLevel, selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import {HasRbacAccess} from "../rbac-wrapper/rbac-wrapper.component";
+import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
-import {INSERT_EXPORT_LOG} from "../../graphql/accounting.queries";
+import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop,
-    authLevel: selectAuthLevel,
+  authLevel: selectAuthLevel,
-    currentUser: selectCurrentUser,
+  currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BillMarkExportedButton);
-    mapStateToProps,
-    mapDispatchToProps
-)(BillMarkExportedButton);
 
-export function BillMarkExportedButton({
+export function BillMarkExportedButton({ currentUser, bodyshop, authLevel, bill }) {
-                                           currentUser,
+  const { t } = useTranslation();
-                                           bodyshop,
+  const [loading, setLoading] = useState(false);
-                                           authLevel,
+  const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
-                                           bill,
-                                       }) {
-    const {t} = useTranslation();
-    const [loading, setLoading] = useState(false);
-    const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
 
-    const [updateBill] = useMutation(gql`
+  const [updateBill] = useMutation(gql`
-        mutation UPDATE_BILL($billId: uuid!) {
+    mutation UPDATE_BILL($billId: uuid!) {
-            update_bills(where: { id: { _eq: $billId } }, _set: { exported: true }) {
+      update_bills(where: { id: { _eq: $billId } }, _set: { exported: true }) {
-                returning {
+        returning {
-                    id
+          id
-                    exported
+          exported
-                    exported_at
+          exported_at
-                }
-            }
         }
-    `);
+      }
+    }
+  `);
 
-    const handleUpdate = async () => {
+  const handleUpdate = async () => {
-        setLoading(true);
+    setLoading(true);
-        const result = await updateBill({
+    const result = await updateBill({
-            variables: {billId: bill.id},
+      variables: { billId: bill.id }
-        });
-
-        await insertExportLog({
-            variables: {
-                logs: [
-                    {
-                        bodyshopid: bodyshop.id,
-                        billid: bill.id,
-                        successful: true,
-                        message: JSON.stringify([t("general.labels.markedexported")]),
-                        useremail: currentUser.email,
-                    },
-                ],
-            },
-        });
-
-        if (!result.errors) {
-            notification["success"]({
-                message: t("bills.successes.markexported"),
-            });
-        } else {
-            notification["error"]({
-                message: t("bills.errors.saving", {
-                    error: JSON.stringify(result.errors),
-                }),
-            });
-        }
-        setLoading(false);
-        //Get the owner details, populate it all back into the job.
-    };
-
-    const hasAccess = HasRbacAccess({
-        bodyshop,
-        authLevel,
-        action: "bills:reexport",
     });
 
-    if (hasAccess)
+    await insertExportLog({
-        return (
+      variables: {
-            <Button loading={loading} disabled={bill.exported} onClick={handleUpdate}>
+        logs: [
-                {t("bills.labels.markexported")}
+          {
-            </Button>
+            bodyshopid: bodyshop.id,
-        );
+            billid: bill.id,
+            successful: true,
+            message: JSON.stringify([t("general.labels.markedexported")]),
+            useremail: currentUser.email
+          }
+        ]
+      }
+    });
 
-    return <></>;
+    if (!result.errors) {
+      notification["success"]({
+        message: t("bills.successes.markexported")
+      });
+    } else {
+      notification["error"]({
+        message: t("bills.errors.saving", {
+          error: JSON.stringify(result.errors)
+        })
+      });
+    }
+    setLoading(false);
+    //Get the owner details, populate it all back into the job.
+  };
+
+  const hasAccess = HasRbacAccess({
+    bodyshop,
+    authLevel,
+    action: "bills:reexport"
+  });
+
+  if (hasAccess)
+    return (
+      <Button loading={loading} disabled={bill.exported} onClick={handleUpdate}>
+        {t("bills.labels.markexported")}
+      </Button>
+    );
+
+  return <></>;
 }

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

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

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

@@ -1,79 +1,72 @@
-import {gql, useMutation} from "@apollo/client";
+import { gql, useMutation } from "@apollo/client";
-import {Button, notification} from "antd";
+import { Button, notification } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectAuthLevel, selectBodyshop,} from "../../redux/user/user.selectors";
+import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
-import {HasRbacAccess} from "../rbac-wrapper/rbac-wrapper.component";
+import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop,
-    authLevel: selectAuthLevel,
+  authLevel: selectAuthLevel
 });
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BillMarkForReexportButton);
-    mapStateToProps,
-    mapDispatchToProps
-)(BillMarkForReexportButton);
 
-export function BillMarkForReexportButton({bodyshop, authLevel, bill}) {
+export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
 
-    const [updateBill] = useMutation(gql`
+  const [updateBill] = useMutation(gql`
-        mutation UPDATE_BILL($billId: uuid!) {
+    mutation UPDATE_BILL($billId: uuid!) {
-            update_bills(where: { id: { _eq: $billId } }, _set: { exported: false }) {
+      update_bills(where: { id: { _eq: $billId } }, _set: { exported: false }) {
-                returning {
+        returning {
-                    id
+          id
-                    exported
+          exported
-                    exported_at
+          exported_at
-                }
-            }
         }
-    `);
+      }
+    }
+  `);
 
-    const handleUpdate = async () => {
+  const handleUpdate = async () => {
-        setLoading(true);
+    setLoading(true);
-        const result = await updateBill({
+    const result = await updateBill({
-            variables: {billId: bill.id},
+      variables: { billId: bill.id }
-        });
-
-        if (!result.errors) {
-            notification["success"]({
-                message: t("bills.successes.reexport"),
-            });
-        } else {
-            notification["error"]({
-                message: t("bills.errors.saving", {
-                    error: JSON.stringify(result.errors),
-                }),
-            });
-        }
-        setLoading(false);
-        //Get the owner details, populate it all back into the job.
-    };
-
-    const hasAccess = HasRbacAccess({
-        bodyshop,
-        authLevel,
-        action: "bills:reexport",
     });
 
-    if (hasAccess)
+    if (!result.errors) {
-        return (
+      notification["success"]({
-            <Button
+        message: t("bills.successes.reexport")
-                loading={loading}
+      });
-                disabled={!bill.exported}
+    } else {
-                onClick={handleUpdate}
+      notification["error"]({
-            >
+        message: t("bills.errors.saving", {
-                {t("bills.labels.markforreexport")}
+          error: JSON.stringify(result.errors)
-            </Button>
+        })
-        );
+      });
+    }
+    setLoading(false);
+    //Get the owner details, populate it all back into the job.
+  };
 
-    return <></>;
+  const hasAccess = HasRbacAccess({
+    bodyshop,
+    authLevel,
+    action: "bills:reexport"
+  });
+
+  if (hasAccess)
+    return (
+      <Button loading={loading} disabled={!bill.exported} onClick={handleUpdate}>
+        {t("bills.labels.markforreexport")}
+      </Button>
+    );
+
+  return <></>;
 }

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -1,151 +1,136 @@
-import {FileAddFilled} from "@ant-design/icons";
+import { FileAddFilled } from "@ant-design/icons";
-import {useMutation} from "@apollo/client";
+import { useMutation } from "@apollo/client";
-import {Button, notification, Tooltip} from "antd";
+import { Button, notification, Tooltip } from "antd";
-import {t} from "i18next";
+import { t } from "i18next";
 import dayjs from "./../../utils/day";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {INSERT_INVENTORY_AND_CREDIT} from "../../graphql/inventory.queries";
+import { INSERT_INVENTORY_AND_CREDIT } from "../../graphql/inventory.queries";
-import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
-import {CalculateBillTotal} from "../bill-form/bill-form.totals.utility";
+import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import queryString from "query-string";
-import {useLocation} from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop,
-    currentUser: selectCurrentUser,
+  currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
-    //setUserLanguage: language => dispatch(setUserLanguage(language))
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BilllineAddInventory);
-    mapStateToProps,
-    mapDispatchToProps
-)(BilllineAddInventory);
 
-export function BilllineAddInventory({
+export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled, jobid }) {
-                                         currentUser,
+  const [loading, setLoading] = useState(false);
-                                         bodyshop,
+  const { billid } = queryString.parse(useLocation().search);
-                                         billline,
+  const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
-                                         disabled,
-                                         jobid,
-                                     }) {
-    const [loading, setLoading] = useState(false);
-    const {billid} = queryString.parse(useLocation().search);
-    const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
 
-    const addToInventory = async () => {
+  const addToInventory = async () => {
-        setLoading(true);
+    setLoading(true);
 
-        //Check to  make sure there are no existing items already in the inventory.
+    //Check to  make sure there are no existing items already in the inventory.
 
-        const cm = {
+    const cm = {
-            vendorid: bodyshop.inhousevendorid,
+      vendorid: bodyshop.inhousevendorid,
-            invoice_number: "ih",
+      invoice_number: "ih",
-            jobid: jobid,
+      jobid: jobid,
-            isinhouse: true,
+      isinhouse: true,
-            is_credit_memo: true,
+      is_credit_memo: true,
-            date: dayjs().format("YYYY-MM-DD"),
+      date: dayjs().format("YYYY-MM-DD"),
-            federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
+      federal_tax_rate: bodyshop.bill_tax_rates.federal_tax_rate,
-            state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
+      state_tax_rate: bodyshop.bill_tax_rates.state_tax_rate,
-            local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
+      local_tax_rate: bodyshop.bill_tax_rates.local_tax_rate,
-            total: 0,
+      total: 0,
-            billlines: [
+      billlines: [
-                {
+        {
-                    actual_price: billline.actual_price,
+          actual_price: billline.actual_price,
-                    actual_cost: billline.actual_cost,
+          actual_cost: billline.actual_cost,
-                    quantity: billline.quantity,
+          quantity: billline.quantity,
-                    line_desc: billline.line_desc,
+          line_desc: billline.line_desc,
-                    cost_center: billline.cost_center,
+          cost_center: billline.cost_center,
-                    deductedfromlbr: billline.deductedfromlbr,
+          deductedfromlbr: billline.deductedfromlbr,
-                    applicable_taxes: {
+          applicable_taxes: {
-                        local: billline.applicable_taxes.local,
+            local: billline.applicable_taxes.local,
-                        state: billline.applicable_taxes.state,
+            state: billline.applicable_taxes.state,
-                        federal: billline.applicable_taxes.federal,
+            federal: billline.applicable_taxes.federal
-                    },
+          }
-                },
-            ],
-        };
-
-        cm.total = CalculateBillTotal(cm).enteredTotal.getAmount() / 100;
-
-        const insertResult = await insertInventoryLine({
-            variables: {
-                joblineId:
-                    billline.joblineid === "noline" ? billline.id : billline.joblineid, //This will return null as there will be no jobline that has the id of the bill line.
-                //Unfortunately, we can't send null as the GQL syntax validation fails.
-                joblineStatus: bodyshop.md_order_statuses.default_returned,
-                inv: {
-                    shopid: bodyshop.id,
-                    billlineid: billline.id,
-                    actual_price: billline.actual_price,
-                    actual_cost: billline.actual_cost,
-                    quantity: billline.quantity,
-                    line_desc: billline.line_desc,
-                },
-                cm: {...cm, billlines: {data: cm.billlines}}, //Fix structure for apollo insert.
-                pol: {
-                    returnfrombill: billid,
-                    vendorid: bodyshop.inhousevendorid,
-                    deliver_by: dayjs().format("YYYY-MM-DD"),
-                    parts_order_lines: {
-                        data: [
-                            {
-                                line_desc: billline.line_desc,
-
-                                act_price: billline.actual_price,
-                                cost: billline.actual_cost,
-                                quantity: billline.quantity,
-                                job_line_id:
-                                    billline.joblineid === "noline" ? null : billline.joblineid,
-                                part_type: billline.jobline && billline.jobline.part_type,
-                                cm_received: true,
-                            },
-                        ],
-                    },
-                    order_date: "2022-06-01",
-                    orderedby: currentUser.email,
-                    jobid: jobid,
-                    user_email: currentUser.email,
-                    return: true,
-                    status: "Ordered",
-                },
-            },
-            refetchQueries: ["QUERY_BILL_BY_PK"],
-        });
-
-        if (!insertResult.errors) {
-            notification.open({
-                type: "success",
-                message: t("inventory.successes.inserted"),
-            });
-        } else {
-            notification.open({
-                type: "error",
-                message: t("inventory.errors.inserting", {
-                    error: JSON.stringify(insertResult.errors),
-                }),
-            });
         }
-
+      ]
-        setLoading(false);
     };
 
-    return (
+    cm.total = CalculateBillTotal(cm).enteredTotal.getAmount() / 100;
-        <Tooltip title={t("inventory.actions.addtoinventory")}>
+
-            <Button
+    const insertResult = await insertInventoryLine({
-                loading={loading}
+      variables: {
-                disabled={
+        joblineId: billline.joblineid === "noline" ? billline.id : billline.joblineid, //This will return null as there will be no jobline that has the id of the bill line.
-                    disabled || billline?.inventories?.length >= billline.quantity
+        //Unfortunately, we can't send null as the GQL syntax validation fails.
-                }
+        joblineStatus: bodyshop.md_order_statuses.default_returned,
-                onClick={addToInventory}
+        inv: {
-            >
+          shopid: bodyshop.id,
-                <FileAddFilled/>
+          billlineid: billline.id,
-                {billline?.inventories?.length > 0 && (
+          actual_price: billline.actual_price,
-                    <div>({billline?.inventories?.length} in inv)</div>
+          actual_cost: billline.actual_cost,
-                )}
+          quantity: billline.quantity,
-            </Button>
+          line_desc: billline.line_desc
-        </Tooltip>
+        },
-    );
+        cm: { ...cm, billlines: { data: cm.billlines } }, //Fix structure for apollo insert.
+        pol: {
+          returnfrombill: billid,
+          vendorid: bodyshop.inhousevendorid,
+          deliver_by: dayjs().format("YYYY-MM-DD"),
+          parts_order_lines: {
+            data: [
+              {
+                line_desc: billline.line_desc,
+
+                act_price: billline.actual_price,
+                cost: billline.actual_cost,
+                quantity: billline.quantity,
+                job_line_id: billline.joblineid === "noline" ? null : billline.joblineid,
+                part_type: billline.jobline && billline.jobline.part_type,
+                cm_received: true
+              }
+            ]
+          },
+          order_date: "2022-06-01",
+          orderedby: currentUser.email,
+          jobid: jobid,
+          user_email: currentUser.email,
+          return: true,
+          status: "Ordered"
+        }
+      },
+      refetchQueries: ["QUERY_BILL_BY_PK"]
+    });
+
+    if (!insertResult.errors) {
+      notification.open({
+        type: "success",
+        message: t("inventory.successes.inserted")
+      });
+    } else {
+      notification.open({
+        type: "error",
+        message: t("inventory.errors.inserting", {
+          error: JSON.stringify(insertResult.errors)
+        })
+      });
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <Tooltip title={t("inventory.actions.addtoinventory")}>
+      <Button
+        loading={loading}
+        disabled={disabled || billline?.inventories?.length >= billline.quantity}
+        onClick={addToInventory}
+      >
+        <FileAddFilled />
+        {billline?.inventories?.length > 0 && <div>({billline?.inventories?.length} in inv)</div>}
+      </Button>
+    </Tooltip>
+  );
 }

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

@@ -1,236 +1,236 @@
-import {EditFilled, SyncOutlined} from "@ant-design/icons";
+import { EditFilled, SyncOutlined } from "@ant-design/icons";
-import {Button, Card, Checkbox, Input, Space, Table} from "antd";
+import { Button, Card, Checkbox, Input, Space, Table } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectJobReadOnly} from "../../redux/application/application.selectors";
+import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import {setModalContext} from "../../redux/modals/modals.actions";
+import { setModalContext } from "../../redux/modals/modals.actions";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import {DateFormatter} from "../../utils/DateFormatter";
+import { DateFormatter } from "../../utils/DateFormatter";
-import {alphaSort, dateSort} from "../../utils/sorters";
+import { alphaSort, dateSort } from "../../utils/sorters";
-import {TemplateList} from "../../utils/TemplateConstants";
+import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import { FaTasks } from "react-icons/fa";
 
 const mapStateToProps = createStructuredSelector({
-    jobRO: selectJobReadOnly,
+  jobRO: selectJobReadOnly,
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({
-    setPartsOrderContext: (context) =>
+  setBillEnterContext: (context) =>
-        dispatch(setModalContext({context: context, modal: "partsOrder"})),
+    dispatch(
-    setBillEnterContext: (context) =>
+      setModalContext({
-        dispatch(setModalContext({context: context, modal: "billEnter"})),
+        context: context,
-    setReconciliationContext: (context) =>
+        modal: "billEnter"
-        dispatch(setModalContext({context: context, modal: "reconciliation"})),
+      })
+    ),
+  setReconciliationContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "reconciliation"
+      })
+    ),
+  setTaskUpsertContext: (context) => dispatch(setModalContext({ context, modal: "taskUpsert" }))
 });
 
 export function BillsListTableComponent({
-                                            bodyshop,
+  bodyshop,
-                                            jobRO,
+  jobRO,
-                                            job,
+  job,
-                                            billsQuery,
+  billsQuery,
-                                            handleOnRowClick,
+  handleOnRowClick,
-                                            setPartsOrderContext,
+  setBillEnterContext,
-                                            setBillEnterContext,
+  setReconciliationContext,
-                                            setReconciliationContext,
+  setTaskUpsertContext
-                                        }) {
+}) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    const [state, setState] = useState({
+  const [state, setState] = useState({
-        sortedInfo: {},
+    sortedInfo: {}
-    });
+  });
-    // const search = queryString.parse(useLocation().search);
+  // const search = queryString.parse(useLocation().search);
-    // const selectedBill = search.billid;
+  // const selectedBill = search.billid;
-    const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState("");
 
-    const Templates = TemplateList("bill");
+  const Templates = TemplateList("bill");
-    const bills = billsQuery.data ? billsQuery.data.bills : [];
+  const bills = billsQuery.data ? billsQuery.data.bills : [];
-    const {refetch} = billsQuery;
+  const { refetch } = billsQuery;
-    const recordActions = (record, showView = false) => (
-        <Space wrap>
-            {showView && (
-                <Button onClick={() => handleOnRowClick(record)}>
-                    <EditFilled/>
-                </Button>
-            )}
-            <BillDeleteButton bill={record}/>
-            <BillDetailEditReturnComponent
-                data={{bills_by_pk: {...record, jobid: job.id}}}
-                disabled={
-                    record.is_credit_memo ||
-                    record.vendorid === bodyshop.inhousevendorid ||
-                    jobRO
-                }
-            />
 
-            {record.isinhouse && (
+  const recordActions = (record, showView = false) => (
-                <PrintWrapperComponent
+    <Space wrap>
-                    templateObject={{
+      {showView && (
-                        name: Templates.inhouse_invoice.key,
+        <Button onClick={() => handleOnRowClick(record)}>
-                        variables: {id: record.id},
+          <EditFilled />
-                    }}
+        </Button>
-                    messageObject={{subject: Templates.inhouse_invoice.subject}}
+      )}
-                />
+      <Button
-            )}
+        title={t("tasks.buttons.create")}
-        </Space>
+        onClick={() => {
-    );
+          setTaskUpsertContext({
-    const columns = [
+            context: {
-        {
+              jobid: job.id,
-            title: t("bills.fields.vendorname"),
+              billid: record.id
-            dataIndex: "vendorname",
-            key: "vendorname",
-            sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
-            sortOrder:
-                state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
-            render: (text, record) => <span>{record.vendor.name}</span>,
-        },
-        {
-            title: t("bills.fields.invoice_number"),
-            dataIndex: "invoice_number",
-            key: "invoice_number",
-            sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
-            sortOrder:
-                state.sortedInfo.columnKey === "invoice_number" &&
-                state.sortedInfo.order,
-        },
-        {
-            title: t("bills.fields.date"),
-            dataIndex: "date",
-            key: "date",
-            sorter: (a, b) => dateSort(a.date, b.date),
-            sortOrder:
-                state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
-            render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
-        },
-        {
-            title: t("bills.fields.total"),
-            dataIndex: "total",
-            key: "total",
-            sorter: (a, b) => a.total - b.total,
-            sortOrder:
-                state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
-            render: (text, record) => (
-                <CurrencyFormatter>{record.total}</CurrencyFormatter>
-            ),
-        },
-        {
-            title: t("bills.fields.is_credit_memo"),
-            dataIndex: "is_credit_memo",
-            key: "is_credit_memo",
-            sorter: (a, b) => a.is_credit_memo - b.is_credit_memo,
-            sortOrder:
-                state.sortedInfo.columnKey === "is_credit_memo" &&
-                state.sortedInfo.order,
-            render: (text, record) => <Checkbox checked={record.is_credit_memo}/>,
-        },
-        {
-            title: t("bills.fields.exported"),
-            dataIndex: "exported",
-            key: "exported",
-            sorter: (a, b) => a.exported - b.exported,
-            sortOrder:
-                state.sortedInfo.columnKey === "exported" && state.sortedInfo.order,
-            render: (text, record) => <Checkbox checked={record.exported}/>,
-        },
-        {
-            title: t("general.labels.actions"),
-            dataIndex: "actions",
-            key: "actions",
-            render: (text, record) => recordActions(record, true),
-        },
-    ];
-
-    const handleTableChange = (pagination, filters, sorter) => {
-        setState({...state, filteredInfo: filters, sortedInfo: sorter});
-    };
-
-    const filteredBills = bills
-        ? searchText === ""
-            ? bills
-            : bills.filter(
-                (b) =>
-                    (b.invoice_number || "")
-                        .toLowerCase()
-                        .includes(searchText.toLowerCase()) ||
-                    (b.vendor.name || "")
-                        .toLowerCase()
-                        .includes(searchText.toLowerCase()) ||
-                    (b.total || "")
-                        .toString()
-                        .toLowerCase()
-                        .includes(searchText.toLowerCase())
-            )
-        : [];
-
-    return (
-        <Card
-            title={t("bills.labels.bills")}
-            extra={
-                <Space wrap>
-                    <Button onClick={() => refetch()}>
-                        <SyncOutlined/>
-                    </Button>
-                    {job && job.converted ? (
-                        <>
-                            <Button
-                                onClick={() => {
-                                    setBillEnterContext({
-                                        actions: {refetch: billsQuery.refetch},
-                                        context: {
-                                            job,
-                                        },
-                                    });
-                                }}
-                            >
-                                {t("jobs.actions.postbills")}
-                            </Button>
-                            <Button
-                                onClick={() => {
-                                    setReconciliationContext({
-                                        actions: {refetch: billsQuery.refetch},
-                                        context: {
-                                            job,
-                                            bills: (billsQuery.data && billsQuery.data.bills) || [],
-                                        },
-                                    });
-                                }}
-                            >
-                                {t("jobs.actions.reconcile")}
-                            </Button>
-                        </>
-                    ) : null}
-
-                    <Input.Search
-                        placeholder={t("general.labels.search")}
-                        value={searchText}
-                        onChange={(e) => {
-                            e.preventDefault();
-                            setSearchText(e.target.value);
-                        }}
-                    />
-                </Space>
             }
-        >
+          });
-            <Table
+        }}
-                loading={billsQuery.loading}
+      >
-                scroll={{
+        <FaTasks />
-                    x: true, // y: "50rem"
+      </Button>
+      <BillDeleteButton bill={record} jobid={job.id} />
+      <BillDetailEditReturnComponent
+        data={{ bills_by_pk: { ...record, jobid: job.id, job: job } }}
+        disabled={record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid || jobRO}
+      />
+
+      {record.isinhouse && (
+        <PrintWrapperComponent
+          templateObject={{
+            name: Templates.inhouse_invoice.key,
+            variables: { id: record.id }
+          }}
+          messageObject={{ subject: Templates.inhouse_invoice.subject }}
+        />
+      )}
+    </Space>
+  );
+  const columns = [
+    {
+      title: t("bills.fields.vendorname"),
+      dataIndex: "vendorname",
+      key: "vendorname",
+      sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
+      sortOrder: state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
+      render: (text, record) => <span>{record.vendor.name}</span>
+    },
+    {
+      title: t("bills.fields.invoice_number"),
+      dataIndex: "invoice_number",
+      key: "invoice_number",
+      sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
+      sortOrder: state.sortedInfo.columnKey === "invoice_number" && state.sortedInfo.order
+    },
+    {
+      title: t("bills.fields.date"),
+      dataIndex: "date",
+      key: "date",
+      sorter: (a, b) => dateSort(a.date, b.date),
+      sortOrder: state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
+      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>
+    },
+    {
+      title: t("bills.fields.total"),
+      dataIndex: "total",
+      key: "total",
+      sorter: (a, b) => a.total - b.total,
+      sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+      render: (text, record) => <CurrencyFormatter>{record.total}</CurrencyFormatter>
+    },
+    {
+      title: t("bills.fields.is_credit_memo"),
+      dataIndex: "is_credit_memo",
+      key: "is_credit_memo",
+      sorter: (a, b) => a.is_credit_memo - b.is_credit_memo,
+      sortOrder: state.sortedInfo.columnKey === "is_credit_memo" && state.sortedInfo.order,
+      render: (text, record) => <Checkbox checked={record.is_credit_memo} />
+    },
+    {
+      title: t("bills.fields.exported"),
+      dataIndex: "exported",
+      key: "exported",
+      sorter: (a, b) => a.exported - b.exported,
+      sortOrder: state.sortedInfo.columnKey === "exported" && state.sortedInfo.order,
+      render: (text, record) => <Checkbox checked={record.exported} />
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => recordActions(record, true)
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const filteredBills = bills
+    ? searchText === ""
+      ? bills
+      : bills.filter(
+          (b) =>
+            (b.invoice_number || "").toLowerCase().includes(searchText.toLowerCase()) ||
+            (b.vendor.name || "").toLowerCase().includes(searchText.toLowerCase()) ||
+            (b.total || "").toString().toLowerCase().includes(searchText.toLowerCase())
+        )
+    : [];
+
+  return (
+    <Card
+      title={t("bills.labels.bills")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          {job && job.converted ? (
+            <>
+              <Button
+                onClick={() => {
+                  setBillEnterContext({
+                    actions: { refetch: billsQuery.refetch },
+                    context: {
+                      job
+                    }
+                  });
                 }}
-                columns={columns}
+              >
-                rowKey="id"
+                {t("jobs.actions.postbills")}
-                dataSource={filteredBills}
+              </Button>
-                onChange={handleTableChange}
+              <Button
-            />
+                onClick={() => {
-        </Card>
+                  setReconciliationContext({
-    );
+                    actions: { refetch: billsQuery.refetch },
+                    context: {
+                      job,
+                      bills: (billsQuery.data && billsQuery.data.bills) || []
+                    }
+                  });
+                }}
+              >
+                {t("jobs.actions.reconcile")}
+              </Button>
+            </>
+          ) : null}
+
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            value={searchText}
+            onChange={(e) => {
+              e.preventDefault();
+              setSearchText(e.target.value);
+            }}
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={billsQuery.loading}
+        scroll={{
+          x: true // y: "50rem"
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={filteredBills}
+        onChange={handleTableChange}
+      />
+    </Card>
+  );
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(BillsListTableComponent);
-    mapStateToProps,
-    mapDispatchToProps
-)(BillsListTableComponent);

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

@@ -1,121 +1,112 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {QUERY_ALL_VENDORS} from "../../graphql/vendors.queries";
+import { QUERY_ALL_VENDORS } from "../../graphql/vendors.queries";
-import {useQuery} from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import queryString from "query-string";
-import {useLocation, useNavigate} from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
-import {Input, Table} from "antd";
+import { Input, Table } from "antd";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {alphaSort} from "../../utils/sorters";
+import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
 
 export default function BillsVendorsList() {
-    const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useLocation().search);
-    const history = useNavigate();
+  const history = useNavigate();
 
-    const {loading, error, data} = useQuery(QUERY_ALL_VENDORS, {
+  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {
-        fetchPolicy: "network-only",
+    fetchPolicy: "network-only",
-        nextFetchPolicy: "network-only",
+    nextFetchPolicy: "network-only"
-    });
+  });
 
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    const [state, setState] = useState({
+  const [state, setState] = useState({
-        sortedInfo: {},
+    sortedInfo: {},
-        search: "",
+    search: ""
-    });
+  });
 
-    const handleTableChange = (pagination, filters, sorter) => {
+  const handleTableChange = (pagination, filters, sorter) => {
-        setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
-    };
+  };
 
-    const columns = [
+  const columns = [
-        {
+    {
-            title: t("vendors.fields.name"),
+      title: t("vendors.fields.name"),
-            dataIndex: "name",
+      dataIndex: "name",
-            key: "name",
+      key: "name",
-            sorter: (a, b) => alphaSort(a.name, b.name),
+      sorter: (a, b) => alphaSort(a.name, b.name),
-            sortOrder:
+      sortOrder: state.sortedInfo.columnKey === "name" && state.sortedInfo.order
-                state.sortedInfo.columnKey === "name" && state.sortedInfo.order,
+    },
+    {
+      title: t("vendors.fields.cost_center"),
+      dataIndex: "cost_center",
+      key: "cost_center",
+      sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
+      sortOrder: state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order
+    },
+    {
+      title: t("vendors.fields.city"),
+      dataIndex: "city",
+      key: "city"
+    }
+  ];
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      delete search.billid;
+      if (record.id) {
+        search.vendorid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.vendorid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  const handleSearch = (e) => {
+    setState({ ...state, search: e.target.value });
+  };
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  const dataSource = state.search
+    ? data.vendors.filter(
+        (v) =>
+          (v.name || "").toLowerCase().includes(state.search.toLowerCase()) ||
+          (v.cost_center || "").toLowerCase().includes(state.search.toLowerCase()) ||
+          (v.city || "").toLowerCase().includes(state.search.toLowerCase())
+      )
+    : (data && data.vendors) || [];
+
+  return (
+    <Table
+      loading={loading}
+      title={() => {
+        return (
+          <div>
+            <Input value={state.search} onChange={handleSearch} placeholder={t("general.labels.search")} allowClear />
+          </div>
+        );
+      }}
+      dataSource={dataSource}
+      pagination={{ position: "top" }}
+      columns={columns}
+      rowKey="id"
+      onChange={handleTableChange}
+      rowSelection={{
+        onSelect: (record) => {
+          handleOnRowClick(record);
         },
-        {
+        selectedRowKeys: [search.vendorid],
-            title: t("vendors.fields.cost_center"),
+        type: "radio"
-            dataIndex: "cost_center",
+      }}
-            key: "cost_center",
+      onRow={(record, rowIndex) => {
-            sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
+        return {
-            sortOrder:
+          onClick: (event) => {
-                state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order,
+            handleOnRowClick(record);
-        },
+          } // click row
-        {
+        };
-            title: t("vendors.fields.city"),
+      }}
-            dataIndex: "city",
+    />
-            key: "city",
+  );
-        },
-    ];
-
-    const handleOnRowClick = (record) => {
-        if (record) {
-            delete search.billid;
-            if (record.id) {
-                search.vendorid = record.id;
-                history.push({search: queryString.stringify(search)});
-            }
-        } else {
-            delete search.vendorid;
-            history.push({search: queryString.stringify(search)});
-        }
-    };
-
-    const handleSearch = (e) => {
-        setState({...state, search: e.target.value});
-    };
-
-    if (error) return <AlertComponent message={error.message} type="error"/>;
-
-    const dataSource = state.search
-        ? data.vendors.filter(
-            (v) =>
-                (v.name || "").toLowerCase().includes(state.search.toLowerCase()) ||
-                (v.cost_center || "")
-                    .toLowerCase()
-                    .includes(state.search.toLowerCase()) ||
-                (v.city || "").toLowerCase().includes(state.search.toLowerCase())
-        )
-        : (data && data.vendors) || [];
-
-    return (
-        <Table
-            loading={loading}
-            title={() => {
-                return (
-                    <div>
-                        <Input
-                            value={state.search}
-                            onChange={handleSearch}
-                            placeholder={t("general.labels.search")}
-                            allowClear
-                        />
-                    </div>
-                );
-            }}
-            dataSource={dataSource}
-            pagination={{position: "top"}}
-            columns={columns}
-            rowKey="id"
-            onChange={handleTableChange}
-            rowSelection={{
-                onSelect: (record) => {
-                    handleOnRowClick(record);
-                },
-                selectedRowKeys: [search.vendorid],
-                type: "radio",
-            }}
-            onRow={(record, rowIndex) => {
-                return {
-                    onClick: (event) => {
-                        handleOnRowClick(record);
-                    }, // click row
-                };
-            }}
-        />
-    );
 }

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -1,64 +1,63 @@
-import {HomeFilled} from "@ant-design/icons";
+import { HomeFilled } from "@ant-design/icons";
-import {Breadcrumb, Col, Row} from "antd";
+import { Breadcrumb, Col, Row } from "antd";
 import React from "react";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBreadcrumbs} from "../../redux/application/application.selectors";
+import { selectBreadcrumbs } from "../../redux/application/application.selectors";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
 import GlobalSearchOs from "../global-search/global-search-os.component";
 import "./breadcrumbs.styles.scss";
-import {useSplitTreatments} from "@splitsoftware/splitio-react";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 
 const mapStateToProps = createStructuredSelector({
-    breadcrumbs: selectBreadcrumbs,
+  breadcrumbs: selectBreadcrumbs,
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 
-export function BreadCrumbs({breadcrumbs, bodyshop}) {
+export function BreadCrumbs({ breadcrumbs, bodyshop }) {
-
+  const {
-    const {treatments: {OpenSearch}} = useSplitTreatments({
+    treatments: { OpenSearch }
-        attributes: {},
+  } = useSplitTreatments({
-        names: ["OpenSearch"],
+    attributes: {},
-        splitKey: bodyshop && bodyshop.imexshopid,
+    names: ["OpenSearch"],
-    });
+    splitKey: bodyshop && bodyshop.imexshopid
-    // TODO - Client Update - Technically key is not doing anything here
+  });
-    return (
+  // TODO - Client Update - Technically key is not doing anything here
-        <Row className="breadcrumb-container">
+  return (
-            <Col xs={24} sm={24} md={16}>
+    <Row className="breadcrumb-container">
-                <Breadcrumb
+      <Col xs={24} sm={24} md={16}>
-                    separator=">"
+        <Breadcrumb
-                    items={[
+          separator=">"
-                        {
+          items={[
-                            key: "home",
+            {
-                            title: (
+              key: "home",
-                                <Link to={`/manage/`}>
+              title: (
-                                    <HomeFilled/>{" "}
+                <Link to={`/manage/`}>
-                                    {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
+                  <HomeFilled /> {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) || ""}
-                                        ""}
+                </Link>
-                                </Link>
+              )
-                            ),
+            },
-                        },
+            ...breadcrumbs.map((item) =>
-                        ...breadcrumbs.map((item) =>
+              item.link
-                            item.link
+                ? {
-                                ? {
+                    key: item.label,
-                                    key: item.label,
+                    title: <Link to={item.link}>{item.label}</Link>
-                                    title: <Link to={item.link}>{item.label}</Link>,
+                  }
-                                }
+                : {
-                                : {
+                    key: item.label,
-                                    key: item.label,
+                    title: item.label
-                                    title: item.label,
+                  }
-                                }
+            )
-                        ),
+          ]}
-                    ]}
+        />
-                />
+      </Col>
-            </Col>
+      <Col xs={24} sm={24} md={8}>
-            <Col xs={24} sm={24} md={8}>
+        {OpenSearch.treatment === "on" ? <GlobalSearchOs /> : <GlobalSearch />}
-                {OpenSearch.treatment === "on" ? <GlobalSearchOs/> : <GlobalSearch/>}
+      </Col>
-            </Col>
+    </Row>
-        </Row>
+  );
-    );
 }
 
 export default connect(mapStateToProps, null)(BreadCrumbs);

client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx

@@ -1,99 +1,87 @@
-import {Button, Form, Modal} from "antd";
+import { Button, Form, Modal } from "antd";
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {logImEXEvent} from "../../firebase/firebase.utils";
+import { logImEXEvent } from "../../firebase/firebase.utils";
-import {toggleModalVisible} from "../../redux/modals/modals.actions";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import {selectCaBcEtfTableConvert} from "../../redux/modals/modals.selectors";
+import { selectCaBcEtfTableConvert } from "../../redux/modals/modals.selectors";
-import {GenerateDocument} from "../../utils/RenderTemplate";
+import { GenerateDocument } from "../../utils/RenderTemplate";
-import {TemplateList} from "../../utils/TemplateConstants";
+import { TemplateList } from "../../utils/TemplateConstants";
 import CaBcEtfTableModalComponent from "./ca-bc-etf-table.modal.component";
 
 const mapStateToProps = createStructuredSelector({
-    caBcEtfTableModal: selectCaBcEtfTableConvert,
+  caBcEtfTableModal: selectCaBcEtfTableConvert
 });
 
 const mapDispatchToProps = (dispatch) => ({
-    toggleModalVisible: () =>
+  toggleModalVisible: () => dispatch(toggleModalVisible("ca_bc_eftTableConvert"))
-        dispatch(toggleModalVisible("ca_bc_eftTableConvert")),
 });
 
-export function ContractsFindModalContainer({
+export function ContractsFindModalContainer({ caBcEtfTableModal, toggleModalVisible }) {
-                                                caBcEtfTableModal,
+  const { t } = useTranslation();
-                                                toggleModalVisible,
-                                            }) {
-    const {t} = useTranslation();
 
-    const {open} = caBcEtfTableModal;
+  const { open } = caBcEtfTableModal;
-    const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-    const [form] = Form.useForm();
+  const [form] = Form.useForm();
-    const EtfTemplate = TemplateList("special").ca_bc_etf_table;
+  const EtfTemplate = TemplateList("special").ca_bc_etf_table;
 
-    const handleFinish = async (values) => {
+  const handleFinish = async (values) => {
-        logImEXEvent("ca_bc_etf_table_parse");
+    logImEXEvent("ca_bc_etf_table_parse");
-        setLoading(true);
+    setLoading(true);
-        const claimNumbers = [];
+    const claimNumbers = [];
-        values.table.split("\n").forEach((row, idx, arr) => {
+    values.table.split("\n").forEach((row, idx, arr) => {
-            const {1: claim, 2: shortclaim, 4: amount} = row.split("\t");
+      const { 1: claim, 2: shortclaim, 4: amount } = row.split("\t");
-            if (!claim || !shortclaim) return;
+      if (!claim || !shortclaim) return;
-            const trimmedShortClaim = shortclaim.trim();
+      const trimmedShortClaim = shortclaim.trim();
-            // const trimmedClaim = claim.trim();
+      // const trimmedClaim = claim.trim();
-            if (amount.slice(-1) === "-") {
+      if (amount.slice(-1) === "-") {
-            }
+      }
 
-            claimNumbers.push({
+      claimNumbers.push({
-                claim: trimmedShortClaim,
+        claim: trimmedShortClaim,
-                amount: amount.slice(-1) === "-" ? parseFloat(amount) * -1 : amount,
+        amount: amount.slice(-1) === "-" ? parseFloat(amount) * -1 : amount
-            });
+      });
-        });
+    });
 
-        await GenerateDocument(
+    await GenerateDocument(
-            {
+      {
-                name: EtfTemplate.key,
+        name: EtfTemplate.key,
-                variables: {
+        variables: {
-                    claimNumbers: `%(${claimNumbers.map((c) => c.claim).join("|")})%`,
+          claimNumbers: `%(${claimNumbers.map((c) => c.claim).join("|")})%`,
-                    claimdata: claimNumbers,
+          claimdata: claimNumbers
-                },
-            },
-            {},
-            values.sendby === "email" ? "e" : "p"
-        );
-        setLoading(false);
-    };
-
-    useEffect(() => {
-        if (open) {
-            form.resetFields();
         }
-    }, [open, form]);
+      },
-
+      {},
-    return (
+      values.sendby === "email" ? "e" : "p"
-        <Modal
-            open={open}
-            width="70%"
-            title={t("payments.labels.findermodal")}
-            onCancel={() => toggleModalVisible()}
-            onOk={() => toggleModalVisible()}
-            destroyOnClose
-            forceRender
-        >
-            <Form
-                form={form}
-                layout="vertical"
-                autoComplete="no"
-                onFinish={handleFinish}
-            >
-                <CaBcEtfTableModalComponent form={form}/>
-                <Button onClick={() => form.submit()} type="primary" loading={loading}>
-                    {t("general.labels.search")}
-                </Button>
-            </Form>
-        </Modal>
     );
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (open) {
+      form.resetFields();
+    }
+  }, [open, form]);
+
+  return (
+    <Modal
+      open={open}
+      width="70%"
+      title={t("payments.labels.findermodal")}
+      onCancel={() => toggleModalVisible()}
+      onOk={() => toggleModalVisible()}
+      destroyOnClose
+      forceRender
+    >
+      <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish}>
+        <CaBcEtfTableModalComponent form={form} />
+        <Button onClick={() => form.submit()} type="primary" loading={loading}>
+          {t("general.labels.search")}
+        </Button>
+      </Form>
+    </Modal>
+  );
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(ContractsFindModalContainer);
-    mapStateToProps,
-    mapDispatchToProps
-)(ContractsFindModalContainer);

client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table.modal.component.jsx

@@ -1,42 +1,38 @@
-import {Form, Input, Radio} from "antd";
+import { Form, Input, Radio } from "antd";
 import React from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop
 });
 
 export default connect(mapStateToProps, null)(PartsReceiveModalComponent);
 
-export function PartsReceiveModalComponent({bodyshop, form}) {
+export function PartsReceiveModalComponent({ bodyshop, form }) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    return (
+  return (
-        <div>
+    <div>
-            <Form.Item
+      <Form.Item
-                name="table"
+        name="table"
-                rules={[
+        rules={[
-                    {
+          {
-                        required: true,
+            required: true
-                        //message: t("general.validation.required"),
+            //message: t("general.validation.required"),
-                    },
+          }
-                ]}
+        ]}
-            >
+      >
-                <Input.TextArea rows={8}/>
+        <Input.TextArea rows={8} />
-            </Form.Item>
+      </Form.Item>
-            <Form.Item
+      <Form.Item label={t("general.labels.sendby")} name="sendby" initialValue="print">
-                label={t("general.labels.sendby")}
+        <Radio.Group>
-                name="sendby"
+          <Radio value="email">{t("general.labels.email")}</Radio>
-                initialValue="print"
+          <Radio value="print">{t("general.labels.print")}</Radio>
-            >
+        </Radio.Group>
-                <Radio.Group>
+      </Form.Item>
-                    <Radio value="email">{t("general.labels.email")}</Radio>
+    </div>
-                    <Radio value="print">{t("general.labels.print")}</Radio>
+  );
-                </Radio.Group>
-            </Form.Item>
-        </div>
-    );
 }

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -1,50 +1,48 @@
-import React, {useState} from "react";
+import { CalculatorFilled } from "@ant-design/icons";
-import {Button, Form, InputNumber, Popover} from "antd";
+import { Button, Form, InputNumber, Popover, Space } from "antd";
-import {logImEXEvent} from "../../firebase/firebase.utils";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {CalculatorFilled} from "@ant-design/icons";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+export default function CABCpvrtCalculator({ disabled, form }) {
+  const [visibility, setVisibility] = useState(false);
 
-export default function CABCpvrtCalculator({disabled, form}) {
+  const { t } = useTranslation();
-    const [visibility, setVisibility] = useState(false);
 
-    const {t} = useTranslation();
+  const handleFinish = async (values) => {
+    logImEXEvent("job_ca_bc_pvrt_calculate");
+    form.setFieldsValue({
+      ca_bc_pvrt: ((values.rate || 0) * (values.days || 0)).toFixed(2)
+    });
+    form.setFields([{ name: "ca_bc_pvrt", touched: true }]);
+    setVisibility(false);
+  };
 
-    const handleFinish = async (values) => {
+  const popContent = (
-        logImEXEvent("job_ca_bc_pvrt_calculate");
+    <div>
-        form.setFieldsValue({
+      <Form onFinish={handleFinish} initialValues={{ rate: 1.5 }}>
-            ca_bc_pvrt: ((values.rate || 0) * (values.days || 0)).toFixed(2),
+        <Form.Item name="rate" label={t("jobs.labels.ca_bc_pvrt.rate")}>
-        });
+          <InputNumber precision={2} min={0} />
-        form.setFields([{name: "ca_bc_pvrt", touched: true}]);
+        </Form.Item>
-        setVisibility(false);
+        <Form.Item name="days" label={t("jobs.labels.ca_bc_pvrt.days")}>
-    };
+          <InputNumber precision={0} min={0} />
-
+        </Form.Item>
-    const popContent = (
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
-        <div>
+          <Space>
-            <Form onFinish={handleFinish} initialValues={{rate: 1.5}}>
+            <Button type="primary" htmlType="submit">
-                <Form.Item name="rate" label={t("jobs.labels.ca_bc_pvrt.rate")}>
+              {t("general.actions.calculate")}
-                    <InputNumber precision={2} min={0}/>
-                </Form.Item>
-                <Form.Item name="days" label={t("jobs.labels.ca_bc_pvrt.days")}>
-                    <InputNumber precision={0} min={0}/>
-                </Form.Item>
-                <Button type="primary" htmlType="submit">
-                    {t("general.actions.calculate")}
-                </Button>
-                <Button onClick={() => setVisibility(false)}>Close</Button>
-            </Form>
-        </div>
-    );
-
-    return (
-        <Popover
-            destroyTooltipOnHide
-            content={popContent}
-            open={visibility}
-            disabled={disabled}
-        >
-            <Button disabled={disabled} onClick={() => setVisibility(true)}>
-                <CalculatorFilled/>
             </Button>
-        </Popover>
+            <Button onClick={() => setVisibility(false)}>Close</Button>
-    );
+          </Space>
+        </div>
+      </Form>
+    </div>
+  );
+
+  return (
+    <Popover destroyTooltipOnHide content={popContent} open={visibility} disabled={disabled}>
+      <Button disabled={disabled} onClick={() => setVisibility(true)}>
+        <CalculatorFilled />
+      </Button>
+    </Popover>
+  );
 }

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

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

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

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

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,98 +1,97 @@
-import {useApolloClient} from "@apollo/client";
+import { useApolloClient } from "@apollo/client";
-import {getToken, onMessage} from "@firebase/messaging";
+import { getToken, onMessage } from "@firebase/messaging";
-import {Button, notification, Space} from "antd";
+import { Button, notification, Space } from "antd";
 import axios from "axios";
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {messaging, requestForToken} from "../../firebase/firebase.utils";
+import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import FcmHandler from "../../utils/fcm-handler";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 
-export function ChatAffixContainer({bodyshop, chatVisible}) {
+export function ChatAffixContainer({ bodyshop, chatVisible }) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    const client = useApolloClient();
+  const client = useApolloClient();
-    useEffect(() => {
-        if (!bodyshop || !bodyshop.messagingservicesid) return;
 
-        async function SubscribeToTopic() {
+  useEffect(() => {
-            try {
+    if (!bodyshop || !bodyshop.messagingservicesid) return;
-                const r = await axios.post("/notifications/subscribe", {
-                    fcm_tokens: await getToken(messaging, {
-                        vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY,
-                    }),
-                    type: "messaging",
-                    imexshopid: bodyshop.imexshopid,
-                });
-                console.log("FCM Topic Subscription", r.data);
-            } catch (error) {
-                console.log(
-                    "Error attempting to subscribe to messaging topic: ",
-                    error
-                );
-                notification.open({
-                    type: "warning",
-                    message: t("general.errors.fcm"),
-                    btn: (
-                        <Space>
-                            <Button
-                                onClick={async () => {
-                                    await requestForToken();
-                                    SubscribeToTopic();
-                                }}
-                            >
-                                {t("general.actions.tryagain")}
-                            </Button>
-                            <Button
-                                onClick={() => {
-                                    const win = window.open(
-                                        "https://help.imex.online/en/article/enabling-notifications-o978xi/",
-                                        "_blank"
-                                    );
-                                    win.focus();
-                                }}
-                            >
-                                {t("general.labels.help")}
-                            </Button>
-                        </Space>
-                    ),
-                });
-            }
-        }
 
-        SubscribeToTopic();
+    async function SubscribeToTopic() {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+      try {
-    }, [bodyshop]);
+        const r = await axios.post("/notifications/subscribe", {
+          fcm_tokens: await getToken(messaging, {
+            vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
+          }),
+          type: "messaging",
+          imexshopid: bodyshop.imexshopid
+        });
+        console.log("FCM Topic Subscription", r.data);
+      } catch (error) {
+        console.log("Error attempting to subscribe to messaging topic: ", error);
+        notification.open({
+          key: "fcm",
+          type: "warning",
+          message: t("general.errors.fcm"),
+          btn: (
+            <Space>
+              <Button
+                onClick={async () => {
+                  await requestForToken();
+                  SubscribeToTopic();
+                }}
+              >
+                {t("general.actions.tryagain")}
+              </Button>
+              <Button
+                onClick={() => {
+                  const win = window.open(
+                    "https://help.imex.online/en/article/enabling-notifications-o978xi/",
+                    "_blank"
+                  );
+                  win.focus();
+                }}
+              >
+                {t("general.labels.help")}
+              </Button>
+            </Space>
+          )
+        });
+      }
+    }
 
-    useEffect(() => {
+    SubscribeToTopic();
-        function handleMessage(payload) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-            FcmHandler({
+  }, [bodyshop]);
-                client,
-                payload: (payload && payload.data && payload.data.data) || payload.data,
-            });
-        }
 
-        let stopMessageListener, channel;
+  useEffect(() => {
-        try {
+    function handleMessage(payload) {
-            stopMessageListener = onMessage(messaging, handleMessage);
+      FcmHandler({
-            channel = new BroadcastChannel("imex-sw-messages");
+        client,
-            channel.addEventListener("message", handleMessage);
+        payload: (payload && payload.data && payload.data.data) || payload.data
-        } catch (error) {
+      });
-            console.log("Unable to set event listeners.");
+    }
-        }
-        return () => {
-            stopMessageListener && stopMessageListener();
-            channel && channel.removeEventListener("message", handleMessage);
-        };
-    }, [client]);
 
-    if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
+    let stopMessageListener, channel;
+    try {
+      stopMessageListener = onMessage(messaging, handleMessage);
+      channel = new BroadcastChannel("imex-sw-messages");
+      channel.addEventListener("message", handleMessage);
+    } catch (error) {
+      console.log("Unable to set event listeners.");
+    }
+    return () => {
+      stopMessageListener && stopMessageListener();
+      channel && channel.removeEventListener("message", handleMessage);
+    };
+  }, [client]);
 
-    return (
+  if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
-        <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
+
-            {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent/> : null}
+  return (
-        </div>
+    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-    );
+      {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent /> : null}
+    </div>
+  );
 }
 
 export default ChatAffixContainer;

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

@@ -1,29 +1,27 @@
-import {useMutation} from "@apollo/client";
+import { useMutation } from "@apollo/client";
-import {Button} from "antd";
+import { Button } from "antd";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {TOGGLE_CONVERSATION_ARCHIVE} from "../../graphql/conversations.queries";
+import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
 
-export default function ChatArchiveButton({conversation}) {
+export default function ChatArchiveButton({ conversation }) {
-    const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
+  const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
-    const handleToggleArchive = async () => {
+  const handleToggleArchive = async () => {
-        setLoading(true);
+    setLoading(true);
 
-        await updateConversation({
+    await updateConversation({
-            variables: {id: conversation.id, archived: !conversation.archived},
+      variables: { id: conversation.id, archived: !conversation.archived },
-            refetchQueries: ["CONVERSATION_LIST_QUERY"],
+      refetchQueries: ["CONVERSATION_LIST_QUERY"]
-        });
+    });
 
-        setLoading(false);
+    setLoading(false);
-    };
+  };
 
-    return (
+  return (
-        <Button onClick={handleToggleArchive} loading={loading} type="primary">
+    <Button onClick={handleToggleArchive} loading={loading} type="primary">
-            {conversation.archived
+      {conversation.archived ? t("messaging.labels.unarchive") : t("messaging.labels.archive")}
-                ? t("messaging.labels.unarchive")
+    </Button>
-                : t("messaging.labels.archive")}
+  );
-        </Button>
-    );
 }

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

@@ -1,122 +1,101 @@
-import {Badge, Card, List, Space, Tag} from "antd";
+import { Badge, Card, List, Space, Tag } from "antd";
 import React from "react";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {AutoSizer, CellMeasurer, CellMeasurerCache, List as VirtualizedList,} from "react-virtualized";
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List as VirtualizedList } from "react-virtualized";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {setSelectedConversation} from "../../redux/messaging/messaging.actions";
+import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
-import {selectSelectedConversation} from "../../redux/messaging/messaging.selectors";
+import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
-import {TimeAgoFormatter} from "../../utils/DateFormatter";
+import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
-import {OwnerNameDisplayFunction} from "../owner-name-display/owner-name-display.component";
+import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import _ from "lodash";
 import "./chat-conversation-list.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
-    selectedConversation: selectSelectedConversation,
+  selectedConversation: selectSelectedConversation
 });
 
 const mapDispatchToProps = (dispatch) => ({
-    setSelectedConversation: (conversationId) =>
+  setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
-        dispatch(setSelectedConversation(conversationId)),
 });
 
 function ChatConversationListComponent({
-                                           conversationList,
+  conversationList,
-                                           selectedConversation,
+  selectedConversation,
-                                           setSelectedConversation,
+  setSelectedConversation,
-                                           loadMoreConversations,
+  loadMoreConversations
-                                       }) {
+}) {
-    const cache = new CellMeasurerCache({
+  const cache = new CellMeasurerCache({
-        fixedWidth: true,
+    fixedWidth: true,
-        defaultHeight: 60,
+    defaultHeight: 60
-    });
+  });
 
-    const rowRenderer = ({index, key, style, parent}) => {
+  const rowRenderer = ({ index, key, style, parent }) => {
-        const item = conversationList[index];
+    const item = conversationList[index];
-        const cardContentRight =
+    const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
-            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
+    const cardContentLeft =
-        const cardContentLeft = item.job_conversations.length > 0
+      item.job_conversations.length > 0
-            ? item.job_conversations.map((j, idx) => (
+        ? item.job_conversations.map((j, idx) => <Tag key={idx}>{j.job.ro_number}</Tag>)
-                <Tag key={idx}>{j.job.ro_number}</Tag>
+        : null;
-            ))
-            : null;
 
-        const names = <>{_.uniq(item.job_conversations.map((j, idx) =>
+    const names = <>{_.uniq(item.job_conversations.map((j, idx) => OwnerNameDisplayFunction(j.job)))}</>;
-            OwnerNameDisplayFunction(j.job)
-        ))}</>
 
-        const cardTitle = <>
+    const cardTitle = (
-            {item.label && <Tag color="blue">{item.label}</Tag>}
+      <>
-            {item.job_conversations.length > 0 ? (
+        {item.label && <Tag color="blue">{item.label}</Tag>}
-                <Space direction="vertical">
+        {item.job_conversations.length > 0 ? (
-                    {names}
+          <Space direction="vertical">{names}</Space>
-                </Space>
+        ) : (
-            ) : (
+          <Space>
-                <Space>
+            <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-                    <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+          </Space>
-                </Space>
+        )}
-            )}
+      </>
-        </>
+    );
-        const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0}/>
+    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count || 0} />;
 
-        const getCardStyle = () =>
+    const getCardStyle = () =>
-            item.id === selectedConversation
+      item.id === selectedConversation
-                ? {backgroundColor: 'rgba(128, 128, 128, 0.2)'}
+        ? { backgroundColor: "rgba(128, 128, 128, 0.2)" }
-                : {backgroundColor: index % 2 === 0 ? '#f0f2f5' : '#ffffff'};
+        : { backgroundColor: index % 2 === 0 ? "#f0f2f5" : "#ffffff" };
-
-        return (
-            <CellMeasurer
-                key={key}
-                cache={cache}
-                parent={parent}
-                columnIndex={0}
-                rowIndex={index}
-            >
-                <List.Item
-                    onClick={() => setSelectedConversation(item.id)}
-                    style={style}
-                    className={`chat-list-item
-    ${
-                        item.id === selectedConversation
-                            ? "chat-list-selected-conversation"
-                            : null
-                    }`}
-                >
-                    <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
-                        <div style={{display: 'inline-block', width: '70%', textAlign: 'left'}}>
-                            {cardContentLeft}
-                        </div>
-                        <div
-                            style={{display: 'inline-block', width: '30%', textAlign: 'right'}}>{cardContentRight}</div>
-                    </Card>
-                </List.Item>
-            </CellMeasurer>
-        );
-    };
 
     return (
-        <div className="chat-list-container">
+      <CellMeasurer key={key} cache={cache} parent={parent} columnIndex={0} rowIndex={index}>
-            <AutoSizer>
+        <List.Item
-                {({height, width}) => (
+          onClick={() => setSelectedConversation(item.id)}
-                    <VirtualizedList
+          style={style}
-                        height={height}
+          className={`chat-list-item
-                        width={width}
+    ${item.id === selectedConversation ? "chat-list-selected-conversation" : null}`}
-                        rowCount={conversationList.length}
+        >
-                        rowHeight={cache.rowHeight}
+          <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
-                        rowRenderer={rowRenderer}
+            <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
-                        onScroll={({scrollTop, scrollHeight, clientHeight}) => {
+            <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
-                            if (scrollTop + clientHeight === scrollHeight) {
+          </Card>
-                                loadMoreConversations();
+        </List.Item>
-                            }
+      </CellMeasurer>
-                        }}
-                    />
-                )}
-            </AutoSizer>
-        </div>
     );
+  };
+
+  return (
+    <div className="chat-list-container">
+      <AutoSizer>
+        {({ height, width }) => (
+          <VirtualizedList
+            height={height}
+            width={width}
+            rowCount={conversationList.length}
+            rowHeight={cache.rowHeight}
+            rowRenderer={rowRenderer}
+            onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
+              if (scrollTop + clientHeight === scrollHeight) {
+                loadMoreConversations();
+              }
+            }}
+          />
+        )}
+      </AutoSizer>
+    </div>
+  );
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationListComponent);
-    mapStateToProps,
-    mapDispatchToProps
-)(ChatConversationListComponent);

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

@@ -1,56 +1,56 @@
-import {useMutation} from "@apollo/client";
+import { useMutation } from "@apollo/client";
-import {Tag} from "antd";
+import { Tag } from "antd";
 import React from "react";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
-import {logImEXEvent} from "../../firebase/firebase.utils";
+import { logImEXEvent } from "../../firebase/firebase.utils";
-import {REMOVE_CONVERSATION_TAG} from "../../graphql/job-conversations.queries";
+import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
-export default function ChatConversationTitleTags({jobConversations}) {
+export default function ChatConversationTitleTags({ jobConversations }) {
-    const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
+  const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
 
-    const handleRemoveTag = (jobId) => {
+  const handleRemoveTag = (jobId) => {
-        const convId = jobConversations[0].conversationid;
+    const convId = jobConversations[0].conversationid;
-        if (!!convId) {
+    if (!!convId) {
-            removeJobConversation({
+      removeJobConversation({
-                variables: {
+        variables: {
-                    conversationId: convId,
+          conversationId: convId,
-                    jobId: jobId,
+          jobId: jobId
-                },
+        },
-                update(cache) {
+        update(cache) {
-                    cache.modify({
+          cache.modify({
-                        id: cache.identify({id: convId, __typename: "conversations"}),
+            id: cache.identify({ id: convId, __typename: "conversations" }),
-                        fields: {
+            fields: {
-                            job_conversations(ex) {
+              job_conversations(ex) {
-                                return ex.filter((e) => e.jobid !== jobId);
+                return ex.filter((e) => e.jobid !== jobId);
-                            },
+              }
-                        },
+            }
-                    });
+          });
-                },
-            });
-            logImEXEvent("messaging_remove_job_tag", {
-                conversationId: convId,
-                jobId: jobId,
-            });
         }
-    };
+      });
+      logImEXEvent("messaging_remove_job_tag", {
+        conversationId: convId,
+        jobId: jobId
+      });
+    }
+  };
 
-    return (
+  return (
-        <div>
+    <div>
-            {jobConversations.map((item) => (
+      {jobConversations.map((item) => (
-                <Tag
+        <Tag
-                    key={item.job.id}
+          key={item.job.id}
-                    closable
+          closable
-                    color="blue"
+          color="blue"
-                    style={{cursor: "pointer"}}
+          style={{ cursor: "pointer" }}
-                    onClose={() => handleRemoveTag(item.job.id)}
+          onClose={() => handleRemoveTag(item.job.id)}
-                >
+        >
-                    <Link to={`/manage/jobs/${item.job.id}`}>
+          <Link to={`/manage/jobs/${item.job.id}`}>
-                        {`${item.job.ro_number || "?"} | `}
+            {`${item.job.ro_number || "?"} | `}
-                        <OwnerNameDisplay ownerObject={item.job}/>
+            <OwnerNameDisplay ownerObject={item.job} />
-                    </Link>
+          </Link>
-                </Tag>
+        </Tag>
-            ))}
+      ))}
-        </div>
+    </div>
-    );
+  );
 }