Package updates.

Release/2022 04 08

.eslintrc.json

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

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "xml.fileAssociations": [
+    {
+      "pattern": "**/Test.xml",
+      "systemId": "file:///Users/pfic/Downloads/IMEX.xsd"
+    },
+    {
+      "pattern": "**/IMEX.xml",
+      "systemId": "logs/IMEX.xsd"
+    }
+  ]
+}

README.MD

@@ -10,7 +10,7 @@ npx hasura migrate apply --endpoint https://db.imex.online/ --admin-secret 'Prod
 npx hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret 'Test-ImEXOnlineBySnaptSoftware!'
 
 NGROK TEsting:
-./ngrok.exe http http://localhost:5000 -host-header="localhost:5000"
+./ngrok.exe http http://localhost:4000 -host-header="localhost:4000"
 
 Finding deadfiles - run from client directory
 npx deadfile ./src/index.js --exclude build templates

admin/src/components/jobs/jobs.list.jsx

@@ -44,7 +44,10 @@ const JobsList = (props) => (
 );
 
 const JobsFilter = (props) => {
-  const { loading, error, data } = useQuery(QUERY_ALL_SHOPS);
+  const { loading, error, data } = useQuery(QUERY_ALL_SHOPS, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
   if (loading) return <CircularProgress />;
   if (error) return JSON.stringify(error);
 

client/cypress.json

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

client/cypress/fixtures/example.json

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

client/cypress/fixtures/profile.json

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

client/cypress/fixtures/users.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

client/cypress/plugins/index.js

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

client/cypress/support/commands.js

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

client/cypress/support/index.js

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

client/cypress/tsconfig.json

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

client/package.json

@@ -1,105 +1,109 @@
 {
   "name": "bodyshop",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "private": true,
   "proxy": "http://localhost:4000",
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
+  },
   "dependencies": {
-    "@apollo/client": "^3.5.5",
+    "@apollo/client": "^3.5.10",
     "@asseinfo/react-kanban": "^2.2.0",
-    "@craco/craco": "^6.4.2",
-    "@fingerprintjs/fingerprintjs": "^3.3.0",
-    "@openreplay/tracker": "^3.4.10",
-    "@openreplay/tracker-assist": "^3.4.9",
-    "@openreplay/tracker-graphql": "^3.0.0",
-    "@openreplay/tracker-redux": "^3.4.8",
-    "@sentry/react": "^6.15.0",
-    "@sentry/tracing": "^6.15.0",
-    "@splitsoftware/splitio-react": "^1.3.0",
-    "@stripe/react-stripe-js": "^1.6.0",
-    "@stripe/stripe-js": "^1.21.2",
-    "@tanem/react-nprogress": "^3.0.82",
-    "antd": "^4.17.3",
+    "@craco/craco": "^6.4.3",
+    "@fingerprintjs/fingerprintjs": "^3.3.3",
+    "@jsreport/browser-client": "^3.1.0",
+    "@sentry/react": "^6.19.6",
+    "@sentry/tracing": "^6.19.6",
+    "@splitsoftware/splitio-react": "^1.4.0",
+    "@stripe/react-stripe-js": "^1.7.1",
+    "@stripe/stripe-js": "^1.27.0",
+    "@tanem/react-nprogress": "^5.0.0",
+    "antd": "^4.19.5",
     "apollo-link-logger": "^2.0.0",
-    "axios": "^0.24.0",
-    "craco-less": "^1.20.0",
+    "axios": "^0.26.1",
+    "craco-less": "^2.0.0",
     "dinero.js": "^1.9.1",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.0.0",
     "enquire-js": "^0.2.1",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
-    "firebase": "^9.6.0",
-    "graphql": "^16.0.1",
-    "i18next": "^21.5.4",
-    "i18next-browser-languagedetector": "^6.1.2",
-    "jsoneditor": "^9.5.7",
-    "jsreport-browser-client-dist": "^1.3.0",
-    "libphonenumber-js": "^1.9.44",
-    "logrocket": "^2.1.2",
-    "markerjs2": "^2.17.2",
+    "firebase": "^9.6.10",
+    "graphql": "^16.3.0",
+    "i18next": "^21.6.16",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "jsoneditor": "^9.7.4",
+    "libphonenumber-js": "^1.9.51",
+    "logrocket": "^2.2.1",
+    "markerjs2": "^2.21.0",
     "moment-business-days": "^1.2.0",
-    "phone": "^3.1.10",
+    "moment-timezone": "^0.5.34",
+    "phone": "^3.1.15",
     "preval.macro": "^5.0.0",
-    "prop-types": "^15.7.2",
-    "query-string": "^7.0.1",
+    "prop-types": "^15.8.1",
+    "query-string": "^7.1.1",
     "rc-queue-anim": "^2.0.0",
     "rc-scroll-anim": "^2.7.6",
-    "react": "^17.0.1",
-    "react-big-calendar": "^0.38.1",
+    "react": "^18.0.0",
+    "react-big-calendar": "^0.40.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
-    "react-dom": "^17.0.1",
-    "react-drag-listview": "^0.1.8",
+    "react-dom": "^18.0.0",
+    "react-drag-listview": "^0.1.9",
     "react-grid-gallery": "^0.5.5",
-    "react-grid-layout": "^1.3.0",
-    "react-i18next": "^11.14.3",
+    "react-grid-layout": "^1.3.4",
+    "react-i18next": "^11.16.6",
     "react-icons": "^4.3.1",
-    "react-number-format": "^4.8.0",
-    "react-redux": "^7.2.6",
+    "react-number-format": "^4.9.1",
+    "react-redux": "^7.2.8",
     "react-resizable": "^3.0.4",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
+    "react-sticky": "^6.0.3",
     "react-sublime-video": "^0.2.5",
     "react-virtualized": "^9.22.3",
-    "recharts": "^2.1.6",
+    "recharts": "^2.1.9",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "redux-state-sync": "^3.1.2",
     "reselect": "^4.1.5",
-    "sass": "^1.44.0",
-    "socket.io-client": "^4.4.0",
-    "styled-components": "^5.3.3",
+    "sass": "^1.50.0",
+    "socket.io-client": "^4.4.1",
+    "styled-components": "^5.3.5",
     "subscriptions-transport-ws": "^0.11.0",
-    "web-vitals": "^2.1.2",
-    "workbox-background-sync": "^6.4.2",
-    "workbox-broadcast-update": "^6.4.2",
-    "workbox-cacheable-response": "^6.4.2",
-    "workbox-core": "^6.4.2",
-    "workbox-expiration": "^6.4.2",
-    "workbox-google-analytics": "^6.4.2",
-    "workbox-navigation-preload": "^6.4.2",
-    "workbox-precaching": "^6.4.2",
-    "workbox-range-requests": "^6.4.2",
-    "workbox-routing": "^6.4.2",
-    "workbox-strategies": "^6.4.2",
-    "workbox-streams": "^6.4.2"
+    "web-vitals": "^2.1.4",
+    "workbox-background-sync": "^6.5.3",
+    "workbox-broadcast-update": "^6.5.3",
+    "workbox-cacheable-response": "^6.5.3",
+    "workbox-core": "^6.5.3",
+    "workbox-expiration": "^6.5.3",
+    "workbox-google-analytics": "^6.5.3",
+    "workbox-navigation-preload": "^6.5.3",
+    "workbox-precaching": "^6.5.3",
+    "workbox-range-requests": "^6.5.3",
+    "workbox-routing": "^6.5.3",
+    "workbox-strategies": "^6.5.3",
+    "workbox-streams": "^6.5.3",
+    "yauzl": "^2.10.0"
   },
   "scripts": {
-    "postinstall": "patch-package",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "craco start",
     "build": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
     "build:test": "env-cmd -f .env.test yarn run build",
     "build-deploy:test": "yarn run build:test && s3cmd sync build/* s3://imex-online-test && echo '🚀 TESTING Deployed!'",
-    "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` react-scripts build",
-    "test": "craco test",
+    "buildcra": "REACT_APP_GIT_SHA=`git rev-parse --short HEAD` craco build",
+    "test": "cypress open",
     "eject": "react-scripts eject",
     "madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular ."
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:cypress/recommended"
     ]
   },
   "browserslist": {
@@ -114,9 +118,15 @@
       "last 1 safari version"
     ]
   },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  },
   "devDependencies": {
-    "@sentry/webpack-plugin": "^1.18.3",
-    "patch-package": "^6.4.7",
+    "@sentry/webpack-plugin": "^1.18.8",
+    "@testing-library/cypress": "^8.0.2",
+    "cypress": "^9.5.4",
+    "eslint-plugin-cypress": "^2.12.1",
+    "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.2"
   }

client/public/firebase-messaging-sw.js

@@ -1,53 +1,56 @@
-importScripts("https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js");
-importScripts(
-  "https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js"
-);
+// 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");
 
-firebase.initializeApp({
-  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",
-});
+// 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({
-//   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",
-// });
+firebase.initializeApp(firebaseConfig);
 
+// Retrieve firebase messaging
 const messaging = firebase.messaging();
 
-self.addEventListener("fetch", (fetch) => {
-  //required for installation as a PWA. Can ignore for now.
-  //console.log("fetch", fetch);
-});
+messaging.onBackgroundMessage(function (payload) {
+  // Customize notification here
+  const channel = new BroadcastChannel("imex-sw-messages");
+  channel.postMessage(payload);
 
-messaging.setBackgroundMessageHandler(function (payload) {
-  return self.registration.showNotification(
-    "[SW]" + payload.notification.title,
-    payload.notification
-  );
-});
-
-//Handles the notification getting clicked.
-self.addEventListener("notificationclick", function (event) {
-  console.log("SW notificationclick", event);
-  // event.notification.close();
-  if (event.action === "archive") {
-    // Archive action was clicked
-    archiveEmail();
-  } else {
-    // Main body of notification was clicked
-    clients.openWindow("/inbox");
-  }
+  //self.registration.showNotification(notificationTitle, notificationOptions);
 });

client/src/App/App.container.jsx

@@ -1,42 +1,16 @@
 import { ApolloProvider } from "@apollo/client";
-//import trackerRedux from "@openreplay/tracker-redux";
-import Tracker from "@openreplay/tracker";
-import trackerGraphQL from "@openreplay/tracker-graphql";
 import { SplitFactory, SplitSdk } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import LogRocket from "logrocket";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
-//import trackerAssist from "@openreplay/tracker-assist";
-import { getCurrentUser } from "../firebase/firebase.utils";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 
 moment.locale("en-US");
 
-export const tracker = new Tracker({
-  projectKey: "trDmOZlEXUpjGsMtHroA",
-  ingestPoint: "https://replay.imex.online/ingest",
-  ...(process.env.NODE_ENV === null || process.env.NODE_ENV === "development"
-    ? { __DISABLE_SECURE_MODE: true }
-    : {}),
-  // beaconSize: 10485760,
-  onStart: async ({ sessionID }) => {
-    const user = await getCurrentUser();
-    if (user) tracker.setUserID(user.email);
-  },
-});
-
-// tracker.use(
-//   trackerAssist({ confirmText: "Technical support is about to assist you." })
-// ); // check the list of available options below
-export const recordGraphQL = tracker.use(trackerGraphQL());
-//tracker.start();
-if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
-
 export const factory = SplitSdk({
   core: {
     authorizationKey: process.env.REACT_APP_SPLIT_API,

client/src/App/App.jsx

@@ -1,4 +1,6 @@
+import { useTreatments } from "@splitsoftware/splitio-react";
 import { Button, Result } from "antd";
+import LogRocket from "logrocket";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,15 +11,18 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
 //Component Imports
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
+import LandingPage from "../pages/landing/landing.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
 import { setOnline } from "../redux/application/application.actions";
 import { selectOnline } from "../redux/application/application.selectors";
 import { checkUserSession } from "../redux/user/user.actions";
-import { selectCurrentUser } from "../redux/user/user.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
 
-import LandingPage from "../pages/landing/landing.page";
 const ResetPassword = lazy(() =>
   import("../pages/reset-password/reset-password.component")
 );
@@ -32,13 +37,26 @@ const MobilePaymentContainer = lazy(() =>
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   online: selectOnline,
+  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
   setOnline: (isOnline) => dispatch(setOnline(isOnline)),
 });
 
-export function App({ checkUserSession, currentUser, online, setOnline }) {
+export function App({
+  bodyshop,
+  checkUserSession,
+  currentUser,
+  online,
+  setOnline,
+}) {
+  const { LogRocket_Tracking } = useTreatments(
+    ["LogRocket_Tracking"],
+    {},
+    bodyshop && bodyshop.imexshopid
+  );
+
   useEffect(() => {
     if (!navigator.onLine) {
       setOnline(false);
@@ -59,6 +77,16 @@ export function App({ checkUserSession, currentUser, online, setOnline }) {
   window.addEventListener("online", function (e) {
     setOnline(true);
   });
+  useEffect(() => {
+    if (currentUser.authorized) {
+      if (
+        process.env.NODE_ENV === "production" &&
+        LogRocket_Tracking.treatment === "on"
+      ) {
+        LogRocket.init("gvfvfw/bodyshopapp");
+      }
+    }
+  }, [currentUser.authorized, LogRocket_Tracking.treatment]);
 
   if (currentUser.authorized === null) {
     return <LoadingSpinner message={t("general.labels.loggingin")} />;

client/src/App/App.styles.scss

@@ -91,13 +91,13 @@
   color: blue;
 }
 
-.production-completion-1 {
-  animation: production-completion-1-blinker 5s linear infinite;
+.production-completion-soon {
+  color: rgba(255, 140, 0, 0.8);
+  font-weight: bold;
 }
-@keyframes production-completion-1-blinker {
-  50% {
-    background: rgba(207, 12, 12, 0.555);
-  }
+.production-completion-past {
+  color: rgba(255, 0, 0, 0.8);
+  font-weight: bold;
 }
 
 .react-resizable {
@@ -134,3 +134,11 @@
     background: unset;
   }
 }
+
+.ReactGridGallery_tile-icon-bar {
+  div {
+    svg {
+      fill: #1890ff;
+    }
+  }
+}

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

@@ -12,6 +12,7 @@ import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -76,14 +77,12 @@ export function AccountingPayablesTableComponent({
       render: (text, record) => {
         return record.job.owner ? (
           <Link to={"/manage/owners/" + record.job.owner.id}>
-            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-              record.job.ownr_co_nm || ""
-            }`}
+            <OwnerNameDisplay ownerObject={record.job} />
           </Link>
         ) : (
-          <span>{`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-            record.job.ownr_co_nm || ""
-          }`}</span>
+          <span>
+            <OwnerNameDisplay ownerObject={record.job} />
+          </span>
         );
       },
     },
@@ -162,10 +161,19 @@ export function AccountingPayablesTableComponent({
   const dataSource = state.search
     ? payments.filter(
         (v) =>
-          (v.vendor.name || "")
+          (v.paymentnum || "")
             .toLowerCase()
             .includes(state.search.toLowerCase()) ||
-          (v.invoice_number || "")
+          ((v.job && v.job.ro_number) || "")
+            .toLowerCase()
+            .includes(state.search.toLowerCase()) ||
+          ((v.job && v.job.ownr_fn) || "")
+            .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())
       )

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

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { alphaSort } from "../../utils/sorters";
+import { alphaSort, dateSort } from "../../utils/sorters";
 import JobExportButton from "../jobs-close-export-button/jobs-close-export-button.component";
 import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-button.component";
 
@@ -12,6 +12,9 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
+import { DateFormatter } from "../../utils/DateFormatter";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -62,6 +65,18 @@ export function AccountingReceivablesTableComponent({
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
     },
+    {
+      title: t("jobs.fields.date_invoiced"),
+      dataIndex: "date_invoiced",
+      key: "date_invoiced",
+      sorter: (a, b) => dateSort(a.date_invoiced, b.date_invoiced),
+      sortOrder:
+        state.sortedInfo.columnKey === "date_invoiced" &&
+        state.sortedInfo.order,
+      render: (text, record) => (
+        <DateFormatter>{record.date_invoiced}</DateFormatter>
+      ),
+    },
     {
       title: t("jobs.fields.owner"),
       dataIndex: "owner",
@@ -72,14 +87,12 @@ export function AccountingReceivablesTableComponent({
       render: (text, record) => {
         return record.owner ? (
           <Link to={"/manage/owners/" + record.owner.id}>
-            {`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
-              record.ownr_co_nm || ""
-            }`}
+            <OwnerNameDisplay ownerObject={record} />
           </Link>
         ) : (
-          <span>{`${record.ownr_fn || ""} ${record.ownr_ln || ""} ${
-            record.ownr_co_nm || ""
-          }`}</span>
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
         );
       },
     },
@@ -110,13 +123,6 @@ export function AccountingReceivablesTableComponent({
       sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder:
         state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.clm_no ? (
-          <span>{record.clm_no}</span>
-        ) : (
-          t("general.labels.unknown")
-        );
-      },
     },
     {
       title: t("jobs.fields.clm_total"),
@@ -126,11 +132,7 @@ export function AccountingReceivablesTableComponent({
       sortOrder:
         state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
       render: (text, record) => {
-        return record.clm_total ? (
-          <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-        ) : (
-          t("general.labels.unknown")
-        );
+        return <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>;
       },
     },
     {

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

@@ -9,6 +9,7 @@ export default function AuditTrailListContainer({ recordId }) {
   const { loading, error, data } = useQuery(QUERY_AUDIT_TRAIL, {
     variables: { id: recordId },
     fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   logImEXEvent("audittrail_view", { recordId });

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

@@ -14,6 +14,7 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useHistory } from "react-router-dom";
 import {
+  DELETE_BILL_LINE,
   INSERT_NEW_BILL_LINES,
   UPDATE_BILL_LINE,
 } from "../../graphql/bill-lines.queries";
@@ -28,6 +29,7 @@ import { createStructuredSelector } from "reselect";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -57,6 +59,7 @@ export function BillDetailEditcontainer({
   const [update_bill] = useMutation(UPDATE_BILL);
   const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
   const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
+  const [deleteBillLine] = useMutation(DELETE_BILL_LINE);
 
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
@@ -77,6 +80,8 @@ export function BillDetailEditcontainer({
   const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
     variables: { billid: search.billid },
     skip: !!!search.billid,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   const handleSave = () => {
@@ -104,8 +109,22 @@ export function BillDetailEditcontainer({
       })
     );
 
+    //Find bill lines that were deleted.
+    const deletedJobLines = [];
+
+    data.bills_by_pk.billlines.forEach((a) => {
+      const matchingRecord = billlines.find((b) => b.id === a.id);
+      if (!matchingRecord) {
+        deletedJobLines.push(a);
+      }
+    });
+
+    deletedJobLines.forEach((d) => {
+      updates.push(deleteBillLine({ variables: { id: d.id } }));
+    });
+
     billlines.forEach((billline) => {
-      const { deductedfromlbr, ...il } = billline;
+      const { deductedfromlbr, jobline, ...il } = billline;
       delete il.__typename;
 
       if (il.id) {
@@ -139,6 +158,7 @@ export function BillDetailEditcontainer({
         );
       }
     });
+
     await Promise.all(updates);
 
     insertAuditTrail({
@@ -204,6 +224,8 @@ export function BillDetailEditcontainer({
                             cost: i.actual_cost,
                             quantity: i.quantity,
                             joblineid: i.joblineid,
+                            oem_partno: i.jobline && i.jobline.oem_partno,
+                            part_type: i.jobline && i.jobline.part_type,
                           };
                         }),
                         isReturn: true,
@@ -232,6 +254,7 @@ export function BillDetailEditcontainer({
                   </Button>
                 </Popconfirm>
                 <BillReeportButtonComponent bill={data && data.bills_by_pk} />
+                <BillMarkExportedButton bill={data && data.bills_by_pk} />
               </Space>
             }
           />

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

@@ -93,6 +93,7 @@ function BillEnterModalContainer({
                     deductedfromlbr,
                     lbr_adjustment,
                     location: lineLocation,
+                    part_type,
                     ...restI
                   } = i;
 
@@ -216,7 +217,11 @@ function BillEnterModalContainer({
 
     if (enterAgain) {
       form.resetFields();
-      form.setFieldsValue({ ...form.getFieldsValue(), billlines: [] });
+      form.resetFields();
+      form.setFieldsValue({
+        ...formValues,
+        billlines: [],
+      });
     } else {
       toggleModalVisible();
     }
@@ -245,7 +250,7 @@ function BillEnterModalContainer({
   return (
     <Modal
       title={t("bills.labels.new")}
-      width={"90%"}
+      width={"98%"}
       visible={billEnterModal.visible}
       okText={t("general.actions.save")}
       keyboard="false"

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

@@ -0,0 +1,135 @@
+import { Form, Input, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { alphaSort } from "../../utils/sorters";
+import BillFormItemsExtendedFormItem from "./bill-form-lines.extended.formitem.component";
+export default function BillFormLinesExtended({
+  lineData,
+  discount,
+  form,
+  responsibilityCenters,
+  disabled,
+}) {
+  const [search, setSearch] = useState("");
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("joblines.fields.line_desc"),
+      dataIndex: "line_desc",
+      key: "line_desc",
+      width: "10%",
+      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: [
+        {
+          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,
+    },
+
+    {
+      title: t("joblines.fields.act_price"),
+      dataIndex: "act_price",
+      key: "act_price",
+      width: "10%",
+      sorter: (a, b) => a.act_price - b.act_price,
+      shouldCellUpdate: false,
+      render: (text, record) => (
+        <>
+          <CurrencyFormatter>
+            {record.db_ref === "900510" || record.db_ref === "900511"
+              ? record.prt_dsmk_m
+              : record.act_price}
+          </CurrencyFormatter>
+          {record.part_qty ? `(x ${record.part_qty})` : null}
+          {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",
+
+      render: (text, record, index) => (
+        <Form.Item noStyle name={["billlineskeys", record.id]}>
+          <BillFormItemsExtendedFormItem
+            form={form}
+            record={record}
+            index={index}
+            responsibilityCenters={responsibilityCenters}
+            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>
+  );
+}

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

@@ -0,0 +1,288 @@
+import React from "react";
+import {
+  PlusCircleFilled,
+  MinusCircleFilled,
+  WarningOutlined,
+} from "@ant-design/icons";
+import { Form, Button, InputNumber, Input, Select, Switch, Space } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+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,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BillFormItemsExtendedFormItem);
+
+export function BillFormItemsExtendedFormItem({
+  value,
+  bodyshop,
+  form,
+  record,
+  index,
+  disabled,
+  responsibilityCenters,
+  discount,
+}) {
+  // 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>
+    );
+
+  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

@@ -28,6 +28,8 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
 import { CalculateBillTotal } from "./bill-form.totals.utility";
+import { useTreatments } from "@splitsoftware/splitio-react";
+import BillFormLinesExtended from "../bill-form-lines-extended/bill-form-lines-extended.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -49,7 +51,11 @@ export function BillFormComponent({
   const { t } = useTranslation();
   const client = useApolloClient();
   const [discount, setDiscount] = useState(0);
-
+  const { Extended_Bill_Posting } = useTreatments(
+    ["Extended_Bill_Posting"],
+    {},
+    bodyshop.imexshopid
+  );
   const handleVendorSelect = (props, opt) => {
     setDiscount(opt.discount);
   };
@@ -108,7 +114,7 @@ export function BillFormComponent({
         <Form.Item
           label={t("bills.fields.vendor")}
           name="vendorid"
-          style={{ display: billEdit ? "none" : null }}
+          // style={{ display: billEdit ? "none" : null }}
           rules={[
             {
               required: true,
@@ -223,6 +229,7 @@ export function BillFormComponent({
             ({ getFieldValue }) => ({
               validator(rule, value) {
                 if (
+                  !bodyshop.bill_allow_post_to_closed &&
                   (job.status === bodyshop.md_ro_statuses.default_invoiced ||
                     job.status === bodyshop.md_ro_statuses.default_exported ||
                     job.status === bodyshop.md_ro_statuses.default_void) &&
@@ -357,13 +364,24 @@ export function BillFormComponent({
         </Form.Item>
       </LayoutFormRow>
       <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
-      <BillFormLines
-        lineData={lineData}
-        discount={discount}
-        form={form}
-        responsibilityCenters={responsibilityCenters}
-        disabled={disabled}
-      />
+
+      {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}
+        />
+      )}
 
       <Form.Item
         name="upload"

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

@@ -18,7 +18,10 @@ export function BillFormContainer({
   disabled,
   disableInvNumber,
 }) {
-  const { data: VendorAutoCompleteData } = useQuery(SEARCH_VENDOR_AUTOCOMPLETE);
+  const { data: VendorAutoCompleteData } = useQuery(
+    SEARCH_VENDOR_AUTOCOMPLETE,
+    { fetchPolicy: "network-only", nextFetchPolicy: "network-only" }
+  );
 
   const [loadLines, { data: lineData }] = useLazyQuery(
     GET_JOB_LINES_TO_ENTER_BILL

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

@@ -1,4 +1,4 @@
-import { DeleteFilled, WarningOutlined } from "@ant-design/icons";
+import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import {
   Button,
   Form,
@@ -7,7 +7,8 @@ import {
   Select,
   Space,
   Switch,
-  Table
+  Table,
+  Tooltip
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -43,7 +44,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.jobline"),
         dataIndex: "joblineid",
         editable: true,
-
+        width: "20rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}joblinename`,
@@ -57,11 +58,24 @@ export function BillEnterModalLinesComponent({
             ],
           };
         },
+        wrapper: (props) => (
+          <Form.Item
+            noStyle
+            shouldUpdate={(prev, cur) =>
+              prev.is_credit_memo !== cur.is_credit_memo
+            }
+          >
+            {() => {
+              return props.children;
+            }}
+          </Form.Item>
+        ),
         formInput: (record, index) => (
           <BillLineSearchSelect
             disabled={disabled}
             options={lineData}
             style={{ width: "100%", minWidth: "10rem" }}
+            allowRemoved={form.getFieldValue("is_credit_memo") || false}
             onSelect={(value, opt) => {
               setFieldsValue({
                 billlines: getFieldsValue(["billlines"]).billlines.map(
@@ -74,7 +88,9 @@ export function BillEnterModalLinesComponent({
                         actual_price: opt.cost,
                         cost_center: opt.part_type
                           ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                            ? opt.part_type
+                            ? opt.part_type !== "PAE"
+                              ? opt.part_type
+                              : null
                             : responsibilityCenters.defaults &&
                               (responsibilityCenters.defaults.costs[
                                 opt.part_type
@@ -199,23 +215,58 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <CurrencyInput min={0} disabled={disabled} />
+          <CurrencyInput
+            min={0}
+            disabled={disabled}
+            controls={false}
+            addonAfter={
+              <Form.Item shouldUpdate noStyle>
+                {() => {
+                  const line = getFieldsValue(["billlines"]).billlines[index];
+                  if (!!!line) return null;
+                  let lineDiscount = 1 - line.actual_cost / line.actual_price;
+                  if (isNaN(lineDiscount)) lineDiscount = 0;
+                  return (
+                    <Tooltip title={`${(lineDiscount * 100).toFixed(2) || 0}%`}>
+                      <DollarCircleFilled
+                        style={{
+                          color:
+                            Math.abs(lineDiscount - discount) > 0.005
+                              ? lineDiscount > discount
+                                ? "orange"
+                                : "red"
+                              : "green",
+                        }}
+                      />
+                    </Tooltip>
+                  );
+                }}
+              </Form.Item>
+            }
+          />
         ),
-        additional: (record, index) => (
-          <Form.Item shouldUpdate>
-            {() => {
-              const line = getFieldsValue(["billlines"]).billlines[index];
-              if (!!!line) return null;
-              const lineDiscount = (
-                1 -
-                Math.round((line.actual_cost / line.actual_price) * 100) / 100
-              ).toPrecision(2);
+        // additional: (record, index) => (
+        //   <Form.Item shouldUpdate>
+        //     {() => {
+        //       const line = getFieldsValue(["billlines"]).billlines[index];
+        //       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>
-        ),
+        //       return (
+        //         <Tooltip title={`${(lineDiscount * 100).toFixed(0) || 0}%`}>
+        //           <DollarCircleFilled
+        //             style={{
+        //               color: lineDiscount - discount !== 0 ? "red" : "green",
+        //             }}
+        //           />
+        //         </Tooltip>
+        //       );
+        //     }}
+        //   </Form.Item>
+        // ),
       },
       {
         title: t("billlines.fields.cost_center"),
@@ -283,6 +334,19 @@ export function BillEnterModalLinesComponent({
         additional: (record, index) => (
           <Form.Item shouldUpdate style={{ display: "inline-block" }}>
             {() => {
+              const price = getFieldValue([
+                "billlines",
+                record.name,
+                "actual_price",
+              ]);
+
+              const adjustmentRate = getFieldValue([
+                "billlines",
+                record.name,
+                "lbr_adjustment",
+                "rate",
+              ]);
+
               if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
                 return (
                   <div>
@@ -355,6 +419,9 @@ export function BillEnterModalLinesComponent({
                     >
                       <InputNumber precision={2} min={0.01} />
                     </Form.Item>
+                    {price &&
+                      adjustmentRate &&
+                      `${(price / adjustmentRate).toFixed(1)} hrs`}
                   </div>
                 );
               return <></>;
@@ -486,6 +553,7 @@ const EditableCell = ({
   formInput,
   formItemProps,
   additional,
+  wrapper,
   ...restProps
 }) => {
   if (additional)
@@ -503,7 +571,20 @@ const EditableCell = ({
         </Space>
       </td>
     );
-
+  if (wrapper)
+    return (
+      <wrapper>
+        <td {...restProps}>
+          <Form.Item
+            labelCol={{ span: 0 }}
+            name={dataIndex}
+            {...(formItemProps && formItemProps(record))}
+          >
+            {(formInput && formInput(record, record.name)) || children}
+          </Form.Item>
+        </td>
+      </wrapper>
+    );
   return (
     <td {...restProps}>
       <Form.Item

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

@@ -4,7 +4,10 @@ import { useTranslation } from "react-i18next";
 
 //To be used as a form element only.
 const { Option } = Select;
-const BillLineSearchSelect = ({ options, disabled, ...restProps }, ref) => {
+const BillLineSearchSelect = (
+  { options, disabled, allowRemoved, ...restProps },
+  ref
+) => {
   const { t } = useTranslation();
 
   return (
@@ -12,6 +15,7 @@ const BillLineSearchSelect = ({ options, disabled, ...restProps }, ref) => {
       disabled={disabled}
       ref={ref}
       showSearch
+      dropdownMatchSelectWidth={false}
       //  optionFilterProp="line_desc"
       filterOption={(inputValue, option) => {
         return (
@@ -20,7 +24,11 @@ const BillLineSearchSelect = ({ options, disabled, ...restProps }, ref) => {
               .toLowerCase()
               .includes(inputValue.toLowerCase())) ||
           (option.oem_partno &&
-            option.oem_partno.toLowerCase().includes(inputValue.toLowerCase()))
+            option.oem_partno
+              .toLowerCase()
+              .includes(inputValue.toLowerCase())) ||
+          (option.act_price &&
+            option.act_price.toString().startsWith(inputValue.toString()))
         );
       }}
       notFoundContent={"Removed."}
@@ -32,7 +40,7 @@ const BillLineSearchSelect = ({ options, disabled, ...restProps }, ref) => {
       {options
         ? options.map((item) => (
             <Option
-              disabled={item.removed}
+              disabled={allowRemoved ? false : item.removed}
               key={item.id}
               value={item.id}
               cost={item.act_price ? item.act_price : 0}
@@ -40,13 +48,19 @@ const BillLineSearchSelect = ({ options, disabled, ...restProps }, ref) => {
               line_desc={item.line_desc}
               part_qty={item.part_qty}
               oem_partno={item.oem_partno}
+              act_price={item.act_price}
               style={{
                 ...(item.removed ? { textDecoration: "line-through" } : {}),
               }}
             >
-              {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
+              <span>{`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                 item.oem_partno ? ` - ${item.oem_partno}` : ""
-              }`}
+              }`}</span>
+              <span style={{ float: "right", paddingleft: "1rem" }}>
+                {item.act_price
+                  ? `$${item.act_price && item.act_price.toFixed(2)}`
+                  : ``}
+              </span>
             </Option>
           ))
         : null}

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

@@ -0,0 +1,82 @@
+import { useMutation } from "@apollo/client";
+import { Button, notification } from "antd";
+import { gql } from "@apollo/client";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  selectAuthLevel,
+  selectBodyshop,
+} from "../../redux/user/user.selectors";
+import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  authLevel: selectAuthLevel,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BillMarkExportedButton);
+
+export function BillMarkExportedButton({ bodyshop, authLevel, bill }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+
+  const [updateBill] = useMutation(gql`
+    mutation UPDATE_BILL($billId: uuid!) {
+      update_bills(where: { id: { _eq: $billId } }, _set: { exported: true }) {
+        returning {
+          id
+          exported
+          exported_at
+        }
+      }
+    }
+  `);
+
+  const handleUpdate = async () => {
+    setLoading(true);
+    const result = await updateBill({
+      variables: { billId: bill.id },
+    });
+
+    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/bills-list-table/bills-list-table.component.jsx

@@ -58,7 +58,8 @@ export function BillsListTableComponent({
         disabled={
           record.is_credit_memo || record.vendorid === bodyshop.inhousevendorid
         }
-        onClick={() =>
+        onClick={() => {
+          console.log(record);
           setPartsOrderContext({
             actions: {},
             context: {
@@ -74,12 +75,14 @@ export function BillsListTableComponent({
                   cost: i.actual_cost,
                   quantity: i.quantity,
                   joblineid: i.joblineid,
+                  oem_partno: i.jobline && i.jobline.oem_partno,
+                  part_type: i.jobline && i.jobline.part_type,
                 };
               }),
               isReturn: true,
             },
-          })
-        }
+          });
+        }}
       >
         {t("bills.actions.return")}
       </Button>

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

@@ -12,7 +12,10 @@ export default function BillsVendorsList() {
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
 
-  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS);
+  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
 
   const { t } = useTranslation();
 

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

@@ -5,21 +5,25 @@ import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBreadcrumbs } from "../../redux/application/application.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
 import "./breadcrumbs.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   breadcrumbs: selectBreadcrumbs,
+  bodyshop: selectBodyshop,
 });
 
-export function BreadCrumbs({ breadcrumbs }) {
+export function BreadCrumbs({ breadcrumbs, bodyshop }) {
   return (
     <Row className="breadcrumb-container">
       <Col xs={24} sm={24} md={16}>
         <Breadcrumb separator=">">
           <Breadcrumb.Item>
             <Link to={`/manage`}>
-              <HomeFilled />
+              <HomeFilled />{" "}
+              {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
+                ""}
             </Link>
           </Breadcrumb.Item>
           {breadcrumbs.map((item) =>

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

@@ -1,43 +0,0 @@
-import { MessageOutlined } from "@ant-design/icons";
-import { Badge, Card } from "antd";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-import ChatPopupComponent from '../chat-popup/chat-popup.component'
-
-const mapStateToProps = createStructuredSelector({
-  chatVisible: selectChatVisible,
-});
-const mapDispatchToProps = (dispatch) => ({
-  toggleChatVisible: () => dispatch(toggleChatVisible()),
-});
-
-export function ChatAffixComponent({
-  chatVisible,
-  toggleChatVisible,
-  conversationList,
-  unreadCount,
-}) {
-  const { t } = useTranslation();
-
-  return (
-    <Badge count={unreadCount}>
-      <Card size='small'>
-        {chatVisible ? (
-          <ChatPopupComponent conversationList={conversationList} />
-        ) : (
-          <div
-            onClick={() => toggleChatVisible()}
-            style={{ cursor: "pointer" }}>
-            <MessageOutlined />
-            <strong>{t("messaging.labels.messaging")}</strong>
-          </div>
-        )}
-      </Card>
-    </Badge>
-  );
-}
-export default connect(mapStateToProps, mapDispatchToProps)(ChatAffixComponent);

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

@@ -1,13 +1,16 @@
-import { useSubscription } from "@apollo/client";
-import React from "react";
+import { useApolloClient } from "@apollo/client";
+import { getToken, onMessage } from "@firebase/messaging";
+import { Button, notification, Space } from "antd";
+import axios from "axios";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
+import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import AlertComponent from "../alert/alert.component";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import ChatAffixComponent from "./chat-affix.component";
+import FcmHandler from "../../utils/fcm-handler";
+import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
@@ -16,32 +19,87 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
-  const { loading, error, data } = useSubscription(
-    CONVERSATION_LIST_SUBSCRIPTION,
-    {
-      skip: !bodyshop || (bodyshop && !bodyshop.messagingservicesid),
-    }
-  );
+  const { t } = useTranslation();
+  const client = useApolloClient();
+  useEffect(() => {
+    if (!bodyshop || !bodyshop.messagingservicesid) return;
 
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    async function SubscribeToTopic() {
+      try {
+        const r = await axios.post("/notifications/subscribe", {
+          fcm_tokens: await getToken(messaging, {
+            vapidKey: process.env.REACT_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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bodyshop]);
+
+  useEffect(() => {
+    function handleMessage(payload) {
+      FcmHandler({
+        client,
+        payload: (payload && payload.data && payload.data.data) || payload.data,
+      });
+    }
+    let stopMessageListenr, channel;
+    try {
+      stopMessageListenr = onMessage(messaging, handleMessage);
+      channel = new BroadcastChannel("imex-sw-messages");
+      channel.addEventListener("message", handleMessage);
+    } catch (error) {
+      console.log("Unable to set event listeners.");
+    }
+    return () => {
+      stopMessageListenr && stopMessageListenr();
+      channel && channel.removeEventListener("message", handleMessage);
+    };
+  }, [client]);
 
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (
     <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop && bodyshop.messagingservicesid ? (
-        <ChatAffixComponent
-          conversationList={(data && data.conversations) || []}
-          unreadCount={
-            (data &&
-              data.conversations.reduce((acc, val) => {
-                return (acc = acc + val.messages_aggregate.aggregate.count);
-              }, 0)) ||
-            0
-          }
-        />
-      ) : null}
+      {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent /> : null}
     </div>
   );
 }

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

@@ -13,6 +13,7 @@ export default function ChatArchiveButton({ conversation }) {
 
     await updateConversation({
       variables: { id: conversation.id, archived: !conversation.archived },
+      refetchQueries: ["CONVERSATION_LIST_QUERY"],
     });
 
     setLoading(false);

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

@@ -1,14 +1,13 @@
-import { Badge, List, Tag, Tooltip } from "antd";
-import { AlertFilled } from "@ant-design/icons";
+import { Badge, List, Tag } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setSelectedConversation } from "../../redux/messaging/messaging.actions";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
+import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import "./chat-conversation-list.styles.scss";
-import { useTranslation } from "react-i18next";
-import { TimeAgoFormatter } from "../../utils/DateFormatter";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
@@ -24,8 +23,6 @@ export function ChatConversationListComponent({
   selectedConversation,
   setSelectedConversation,
 }) {
-  const { t } = useTranslation();
-
   return (
     <div className="chat-list-container">
       <List
@@ -33,6 +30,7 @@ export function ChatConversationListComponent({
         dataSource={conversationList}
         renderItem={(item) => (
           <List.Item
+            key={item.id}
             onClick={() => setSelectedConversation(item.id)}
             className={`chat-list-item ${
               item.id === selectedConversation
@@ -43,18 +41,8 @@ export function ChatConversationListComponent({
             {item.job_conversations.length > 0 ? (
               <div className="chat-name">
                 {item.job_conversations.map((j, idx) => (
-                  <div key={idx} style={{ display: "flex" }}>
-                    {j.job.owner && !j.job.owner.allow_text_message && (
-                      <Tooltip title={t("messaging.labels.noallowtxt")}>
-                        <AlertFilled
-                          className="production-alert"
-                          style={{ marginRight: ".3rem", alignItems: "center" }}
-                        />
-                      </Tooltip>
-                    )}
-                    <div>{`${j.job.ownr_fn || ""} ${j.job.ownr_ln || ""} ${
-                      j.job.ownr_co_nm || ""
-                    } `}</div>
+                  <div key={idx}>
+                    <OwnerNameDisplay ownerObject={j.job} />
                   </div>
                 ))}
               </div>

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

@@ -4,6 +4,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { REMOVE_CONVERSATION_TAG } from "../../graphql/job-conversations.queries";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 export default function ChatConversationTitleTags({ jobConversations }) {
   const [removeJobConversation] = useMutation(REMOVE_CONVERSATION_TAG);
@@ -16,6 +17,16 @@ export default function ChatConversationTitleTags({ jobConversations }) {
           conversationId: convId,
           jobId: jobId,
         },
+        update(cache) {
+          cache.modify({
+            id: cache.identify({ id: convId, __typename: "conversations" }),
+            fields: {
+              job_conversations(ex) {
+                return ex.filter((e) => e.jobid !== jobId);
+              },
+            },
+          });
+        },
       });
       logImEXEvent("messaging_remove_job_tag", {
         conversationId: convId,
@@ -35,9 +46,8 @@ export default function ChatConversationTitleTags({ jobConversations }) {
           onClose={() => handleRemoveTag(item.job.id)}
         >
           <Link to={`/manage/jobs/${item.job.id}`}>
-            {`${item.job.ro_number || "?"} | ${item.job.ownr_fn || ""} ${
-              item.job.ownr_ln || ""
-            } ${item.job.ownr_co_nm || ""}`}
+            {`${item.job.ro_number || "?"} | `}
+            <OwnerNameDisplay ownerObject={item.job} />
           </Link>
         </Tag>
       ))}

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

@@ -9,6 +9,7 @@ import "./chat-conversation.styles.scss";
 export default function ChatConversationComponent({
   subState,
   conversation,
+  messages,
   handleMarkConversationAsRead,
 }) {
   const [loading, error] = subState;
@@ -16,8 +17,6 @@ export default function ChatConversationComponent({
   if (loading) return <LoadingSkeleton />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  const messages = (conversation && conversation.messages) || [];
-
   return (
     <div
       className="chat-conversation"

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

@@ -1,18 +1,34 @@
-import { useMutation, useSubscription } from "@apollo/client";
+import { useMutation, useQuery, useSubscription } from "@apollo/client";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_SUBSCRIPTION_BY_PK } from "../../graphql/conversations.queries";
+import {
+  CONVERSATION_SUBSCRIPTION_BY_PK,
+  GET_CONVERSATION_DETAILS,
+} from "../../graphql/conversations.queries";
 import { MARK_MESSAGES_AS_READ_BY_CONVERSATION } from "../../graphql/messages.queries";
 import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
 import ChatConversationComponent from "./chat-conversation.component";
+import axios from "axios";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
+  bodyshop: selectBodyshop,
 });
 
 export default connect(mapStateToProps, null)(ChatConversationContainer);
 
-export function ChatConversationContainer({ selectedConversation }) {
+export function ChatConversationContainer({ bodyshop, selectedConversation }) {
+  const {
+    loading: convoLoading,
+    error: convoError,
+    data: convoData,
+  } = useQuery(GET_CONVERSATION_DETAILS, {
+    variables: { conversationId: selectedConversation },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
+
   const { loading, error, data } = useSubscription(
     CONVERSATION_SUBSCRIPTION_BY_PK,
     {
@@ -26,30 +42,46 @@ export function ChatConversationContainer({ selectedConversation }) {
     MARK_MESSAGES_AS_READ_BY_CONVERSATION,
     {
       variables: { conversationId: selectedConversation },
+      update(cache) {
+        cache.modify({
+          id: cache.identify({
+            __typename: "conversations",
+            id: selectedConversation,
+          }),
+          fields: {
+            messages_aggregate(cached) {
+              return { aggregate: { count: 0 } };
+            },
+          },
+        });
+      },
     }
   );
 
   const unreadCount =
-    (data &&
-      data.conversations_by_pk &&
-      data.conversations_by_pk &&
-      data.conversations_by_pk.messages_aggregate &&
-      data.conversations_by_pk.messages_aggregate.aggregate &&
-      data.conversations_by_pk.messages_aggregate.aggregate.count) ||
-    0;
+    data &&
+    data.messages &&
+    data.messages.reduce((acc, val) => {
+      return !val.read && !val.isoutbound ? acc + 1 : acc;
+    }, 0);
 
   const handleMarkConversationAsRead = async () => {
     if (unreadCount > 0 && !!selectedConversation && !markingAsReadInProgress) {
       setMarkingAsReadInProgress(true);
-      await markConversationRead();
+      await markConversationRead({});
+      await axios.post("/sms/markConversationRead", {
+        conversationid: selectedConversation,
+        imexshopid: bodyshop.imexshopid,
+      });
       setMarkingAsReadInProgress(false);
     }
   };
 
   return (
     <ChatConversationComponent
-      subState={[loading, error]}
-      conversation={data ? data.conversations_by_pk : {}}
+      subState={[loading || convoLoading, error || convoError]}
+      conversation={convoData ? convoData.conversations_by_pk : {}}
+      messages={data ? data.messages : []}
       handleMarkConversationAsRead={handleMarkConversationAsRead}
     />
   );

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -27,12 +27,15 @@ export function ChatMediaSelector({
   const [visible, setVisible] = useState(false);
 
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
+
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
     variables: {
       jobId:
         conversation.job_conversations[0] &&
         conversation.job_conversations[0].jobid,
     },
-    fetchPolicy: "network-only",
+
     skip:
       !visible ||
       !conversation.job_conversations ||

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

@@ -46,7 +46,7 @@ export function ChatNewConversation({ openChatByPhone }) {
 
   return (
     <Popover trigger="click" content={popContent}>
-      <PlusCircleFilled style={{ margin: "1rem" }} />
+      <PlusCircleFilled />
     </Popover>
   );
 }

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

@@ -1,54 +1,121 @@
-import { ShrinkOutlined, InfoCircleOutlined } from "@ant-design/icons";
-import { Col, Row, Tooltip, Typography } from "antd";
-import React from "react";
+import {
+  InfoCircleOutlined,
+  MessageOutlined,
+  ShrinkOutlined,
+  SyncOutlined,
+} from "@ant-design/icons";
+import { useQuery } from "@apollo/client";
+import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import {
+  selectChatVisible,
+  selectSelectedConversation,
+} from "../../redux/messaging/messaging.selectors";
 import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
 import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
-import { selectSelectedConversation } from "../../redux/messaging/messaging.selectors";
-import "./chat-popup.styles.scss";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import "./chat-popup.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
+  chatVisible: selectChatVisible,
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleChatVisible: () => dispatch(toggleChatVisible()),
 });
 
 export function ChatPopupComponent({
-  conversationList,
+  chatVisible,
   selectedConversation,
   toggleChatVisible,
 }) {
   const { t } = useTranslation();
-  return (
-    <div className="chat-popup">
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <Typography.Title level={4}>
-          {t("messaging.labels.messaging")}
-        </Typography.Title>
-        <ChatNewConversation />
-        <Tooltip title={t("messaging.labels.recentonly")}>
-          <InfoCircleOutlined />
-        </Tooltip>
-      </div>
-      <ShrinkOutlined
-        onClick={() => toggleChatVisible()}
-        style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
-      />
+  const [pollInterval, setpollInterval] = useState(0);
+  const { loading, data, refetch, called } = useQuery(CONVERSATION_LIST_QUERY, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    ...(pollInterval > 0 ? { pollInterval } : {}),
+  });
 
-      <Row gutter={[8, 8]} className="chat-popup-content">
-        <Col span={8}>
-          <ChatConversationListComponent conversationList={conversationList} />
-        </Col>
-        <Col span={16}>
-          {selectedConversation ? <ChatConversationContainer /> : null}
-        </Col>
-      </Row>
-    </div>
+  const fcmToken = sessionStorage.getItem("fcmtoken");
+
+  useEffect(() => {
+    if (fcmToken) {
+      setpollInterval(0);
+    } else {
+      setpollInterval(60000);
+    }
+  }, [fcmToken]);
+
+  useEffect(() => {
+    if (called && chatVisible) refetch();
+  }, [chatVisible, called, refetch]);
+
+  const unreadCount = data
+    ? data.conversations.reduce(
+        (acc, val) => val.messages_aggregate.aggregate.count + acc,
+        0
+      )
+    : 0;
+
+  return (
+    <Badge count={unreadCount}>
+      <Card size="small">
+        {chatVisible ? (
+          <div className="chat-popup">
+            <Space align="center">
+              <Typography.Title level={4}>
+                {t("messaging.labels.messaging")}
+              </Typography.Title>
+              <ChatNewConversation />
+              <Tooltip title={t("messaging.labels.recentonly")}>
+                <InfoCircleOutlined />
+              </Tooltip>
+              <SyncOutlined
+                style={{ cursor: "pointer" }}
+                onClick={() => refetch()}
+              />
+              {pollInterval > 0 && (
+                <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>
+              )}
+            </Space>
+            <ShrinkOutlined
+              onClick={() => toggleChatVisible()}
+              style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
+            />
+
+            <Row gutter={[8, 8]} className="chat-popup-content">
+              <Col span={8}>
+                {loading ? (
+                  <LoadingSpinner />
+                ) : (
+                  <ChatConversationListComponent
+                    conversationList={data ? data.conversations : []}
+                  />
+                )}
+              </Col>
+              <Col span={16}>
+                {selectedConversation ? <ChatConversationContainer /> : null}
+              </Col>
+            </Row>
+          </div>
+        ) : (
+          <div
+            onClick={() => toggleChatVisible()}
+            style={{ cursor: "pointer" }}
+          >
+            <MessageOutlined />
+            <strong>{t("messaging.labels.messaging")}</strong>
+          </div>
+        )}
+      </Card>
+    </Badge>
   );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(ChatPopupComponent);

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -45,16 +45,18 @@ function ChatSendMessageComponent({
   const { t } = useTranslation();
 
   const handleEnter = () => {
-    if (message === "" || !message) return;
-    logImEXEvent("messaging_send_message");
     const selectedImages = selectedMedia.filter((i) => i.isSelected);
-    if (selectedImages < 11) {
+    if ((message === "" || !message) && selectedImages.length === 0) return;
+    logImEXEvent("messaging_send_message");
+
+    if (selectedImages.length < 11) {
       sendMessage({
         to: conversation.phone_num,
-        body: message,
+        body: message || "",
         messagingServiceSid: bodyshop.messagingservicesid,
         conversationid: conversation.id,
         selectedMedia: selectedImages,
+        imexshopid: bodyshop.imexshopid,
       });
       setSelectedMedia(
         selectedMedia.map((i) => {
@@ -91,7 +93,7 @@ function ChatSendMessageComponent({
       </span>
       <SendOutlined
         className="imex-flex-row__margin"
-        disabled={message === "" || !message}
+        //  disabled={message === "" || !message}
         onClick={handleEnter}
       />
       <Spin

client/src/components/chat-tag-ro/chat-tag-ro.component.jsx

@@ -1,7 +1,8 @@
 import { CloseCircleOutlined, LoadingOutlined } from "@ant-design/icons";
-import { Select, Empty, Space } from "antd";
+import { Empty, Select, Space } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 
 export default function ChatTagRoComponent({
   roOptions,
@@ -27,9 +28,7 @@ export default function ChatTagRoComponent({
         >
           {roOptions.map((item, idx) => (
             <Select.Option key={item.id || idx}>
-              {` ${item.ro_number || ""} | ${item.ownr_fn || ""} ${
-                item.ownr_ln || ""
-              } ${item.ownr_co_nm || ""}`}
+              {` ${item.ro_number || ""} | ${OwnerNameDisplayFunction(item)}`}
             </Select.Option>
           ))}
         </Select>

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

@@ -8,6 +8,8 @@ import ContractCarsComponent from "./contract-cars.component";
 export default function ContractCarsContainer({ selectedCarState, form }) {
   const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC, {
     variables: { today: moment().format("YYYY-MM-DD") },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   const [selectedCar, setSelectedCar] = selectedCarState;

client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx

@@ -53,7 +53,7 @@ export function ContractConvertToRo({
     const billingLines = [];
     if (contractLength > 0)
       billingLines.push({
-        manual_line:true,
+        manual_line: true,
         unq_seq: 1,
         line_no: 1,
         line_ref: 1,
@@ -71,7 +71,7 @@ export function ContractConvertToRo({
       contract.kmend - contract.kmstart - contract.dailyfreekm * contractLength;
     if (mileageDiff > 0) {
       billingLines.push({
-        manual_line:true,
+        manual_line: true,
         unq_seq: 2,
         line_no: 2,
         line_ref: 2,
@@ -88,7 +88,7 @@ export function ContractConvertToRo({
 
     if (values.refuelqty > 0) {
       billingLines.push({
-        manual_line:true,
+        manual_line: true,
         unq_seq: 3,
         line_no: 3,
         line_ref: 3,
@@ -104,7 +104,7 @@ export function ContractConvertToRo({
     }
     if (values.applyCleanupCharge) {
       billingLines.push({
-        manual_line:true,
+        manual_line: true,
         unq_seq: 4,
         line_no: 4,
         line_ref: 4,
@@ -121,7 +121,7 @@ export function ContractConvertToRo({
     if (contract.damagewaiver) {
       //Add for cleanup fee.
       billingLines.push({
-        manual_line:true,
+        manual_line: true,
         unq_seq: 5,
         line_no: 5,
         line_ref: 5,
@@ -153,10 +153,10 @@ export function ContractConvertToRo({
       ownr_co_nm: contract.job.owner.ownr_co_nm,
       ownr_ph1: contract.job.owner.ownr_ph1,
       ownr_ea: contract.job.owner.ownr_ea,
-      v_model_desc: contract.job.vehicle.v_model_desc,
-      v_model_yr: contract.job.vehicle.v_model_yr,
-      v_make_desc: contract.job.vehicle.v_make_desc,
-      v_vin: contract.job.vehicle.v_vin,
+      v_model_desc: contract.job.vehicle && contract.job.vehicle.v_model_desc,
+      v_model_yr: contract.job.vehicle && contract.job.vehicle.v_model_yr,
+      v_make_desc: contract.job.vehicle && contract.job.vehicle.v_make_desc,
+      v_vin: contract.job.vehicle && contract.job.vehicle.v_vin,
       status: bodyshop.md_ro_statuses.default_completed,
       notes: {
         data: [

client/src/components/contract-job-block/contract-job-block.component.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import DataLabel from "../data-label/data-label.component";
-
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 export default function ContractJobBlock({ job }) {
   const { t } = useTranslation();
   return (
@@ -23,9 +23,7 @@ export default function ContractJobBlock({ job }) {
             } ${(job && job.v_model_desc) || ""}`}
           </DataLabel>
           <DataLabel label={t("jobs.fields.owner")}>
-            {`${(job && job.ownr_fn) || ""} ${(job && job.ownr_ln) || ""} ${
-              (job && job.ownr_co_nm) || ""
-            }`}
+            <OwnerNameDisplay ownerObject={job} />
           </DataLabel>
         </div>
       </Card>

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

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 export default function ContractsJobsComponent({
   loading,
@@ -43,17 +44,7 @@ export default function ContractsJobsComponent({
       width: "25%",
       sortOrder:
         state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.owner ? (
-          <span>
-            {record.ownr_fn} {record.ownr_ln} {record.ownr_co_nm || ""}
-          </span>
-        ) : (
-          <span>{`${record.ownr_fn} ${record.ownr_ln} ${
-            record.ownr_co_nm || ""
-          }`}</span>
-        );
-      },
+      render: (text, record) => <OwnerNameDisplay ownerObject={record} />,
     },
     {
       title: t("jobs.fields.status"),

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

@@ -16,6 +16,8 @@ export function ContractJobsContainer({ selectedJobState, bodyshop }) {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open"],
     },
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
   const [selectedJob, setSelectedJob] = selectedJobState;
 

client/src/components/contracts-list/contracts-list.component.jsx

@@ -11,17 +11,23 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import moment from "moment";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
   setContractFinderContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "contractFinder" })),
 });
+
 export default connect(mapStateToProps, mapDispatchToProps)(ContractsList);
 
 export function ContractsList({
+  bodyshop,
   loading,
   contracts,
   refetch,
@@ -71,7 +77,9 @@ export function ContractsList({
       sortOrder:
         state.sortedInfo.columnKey === "driver_ln" && state.sortedInfo.order,
       render: (text, record) =>
-        `${record.driver_fn || ""} ${record.driver_ln || ""}`,
+        bodyshop.last_name_first
+          ? `${record.driver_ln || ""}, ${record.driver_fn || ""}`
+          : `${record.driver_fn || ""} ${record.driver_ln || ""}`,
     },
     {
       title: t("contracts.labels.vehicle"),
@@ -86,7 +94,9 @@ export function ContractsList({
         } ${record.courtesycar.make} ${record.courtesycar.model}${
           record.courtesycar.plate ? ` (${record.courtesycar.plate})` : ""
         }${
-          record.courtesycar.fleetnumber ? ` (${record.courtesycar.fleetnumber})` : ""
+          record.courtesycar.fleetnumber
+            ? ` (${record.courtesycar.fleetnumber})`
+            : ""
         }`}</Link>
       ),
     },
@@ -133,6 +143,19 @@ export function ContractsList({
         <DateTimeFormatter>{record.actualreturn}</DateTimeFormatter>
       ),
     },
+    {
+      title: t("contracts.fields.length"),
+      dataIndex: "length",
+      key: "length",
+
+      render: (text, record) =>
+        (record.actualreturn &&
+          record.start &&
+          `${moment(record.actualreturn)
+            .diff(moment(record.start), "days", true)
+            .toFixed(1)} days`) ||
+        "",
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -9,7 +9,7 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
-import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
+//import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
@@ -32,7 +32,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
         }
       />
 
-      <FormFieldsChanged form={form} />
+      {/* <FormFieldsChanged form={form} /> */}
       <LayoutFormRow header={t("courtesycars.labels.vehicle")}>
         <Form.Item
           label={t("courtesycars.fields.make")}
@@ -118,7 +118,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading }) {
             },
           ]}
         >
-          <InputNumber />
+          <InputNumber precision={0} />
         </Form.Item>
         <Form.Item
           label={t("courtesycars.fields.fleetnumber")}

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.component.jsx

@@ -31,7 +31,7 @@ export default function CourtesyCarReturnModalComponent() {
           },
         ]}
       >
-        <InputNumber />
+        <InputNumber precision={0} />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.fuelin")}

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -1,9 +1,11 @@
-import { Table, Button, Input, Card, Space } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
-import { SyncOutlined } from "@ant-design/icons";
+import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
     sortedInfo: {},
@@ -97,7 +99,9 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
       render: (text, record) =>
         record.cccontracts.length === 1 ? (
           <Link to={`/manage/jobs/${record.cccontracts[0].job.id}`}>
-            {record.cccontracts[0].job.ro_number}
+            {`${
+              record.cccontracts[0].job.ro_number
+            } - ${OwnerNameDisplayFunction(record.cccontracts[0].job)}`}
           </Link>
         ) : null,
     },

client/src/components/csi-response-form/csi-response-form.container.jsx

@@ -19,6 +19,8 @@ export default function CsiResponseFormContainer() {
       id: responseid,
     },
     skip: !!!responseid,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   useEffect(() => {

client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 export default function CsiResponseListPaginated({
   refetch,
@@ -48,14 +49,12 @@ export default function CsiResponseListPaginated({
       render: (text, record) => {
         return record.job.owner ? (
           <Link to={"/manage/owners/" + record.job.owner.id}>
-            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-              record.job.ownr_co_nm || ""
-            }`}
+            <OwnerNameDisplay ownerObject={record.job} />
           </Link>
         ) : (
-          <span>{`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""} ${
-            record.job.ownr_co_nm || ""
-          }`}</span>
+          <span>
+            <OwnerNameDisplay ownerObject={record.job} />
+          </span>
         );
       },
     },

client/src/components/dashboard-components/monthly-employee-efficiency/monthly-employee-efficiency.component.jsx

@@ -40,7 +40,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
         (dayAcc, dayVal) => {
           return {
             actual: dayAcc.actual + dayVal.actualhrs,
-            productive: dayAcc.actual + dayVal.productivehrs,
+            productive: dayAcc.productive + dayVal.productivehrs,
           };
         },
         { actual: 0, productive: 0 }
@@ -50,11 +50,13 @@ export default function DashboardMonthlyEmployeeEfficiency({
     }
 
     const dailyEfficiency =
-      ((dailyHrs.productive - dailyHrs.actual) / dailyHrs.productive + 1) * 100;
+      ((dailyHrs.productive - dailyHrs.actual) / dailyHrs.actual + 1) * 100;
 
     const theValue = {
       date: moment(val).format("DD"),
-      ...dailyHrs,
+      // ...dailyHrs,
+      actual: dailyHrs.actual.toFixed(1),
+      productive: dailyHrs.productive.toFixed(1),
       dailyEfficiency: isNaN(dailyEfficiency) ? 0 : dailyEfficiency.toFixed(1),
       accActual:
         acc.length > 0
@@ -67,12 +69,18 @@ export default function DashboardMonthlyEmployeeEfficiency({
           : dailyHrs.productive,
       accEfficiency: 0,
     };
-    theValue.accEfficiency = (
+
+    theValue.accEfficiency =
       ((theValue.accProductive - theValue.accActual) /
-        (theValue.accProductive || 1) +
+        (theValue.accActual || 0) +
         1) *
-      100
-    ).toFixed(1);
+      100;
+
+    if (isNaN(theValue.accEfficiency)) {
+      theValue.accEfficiency = 0;
+    } else {
+      theValue.accEfficiency = theValue.accEfficiency.toFixed(1);
+    }
 
     return [...acc, theValue];
   }, []);
@@ -131,6 +139,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
               //stackId="day"
               barSize={20}
               fill="#102568"
+              format={"0.0"}
             />
             <Bar
               name="Productive Hours"
@@ -140,6 +149,7 @@ export default function DashboardMonthlyEmployeeEfficiency({
               //stackId="day"
               barSize={20}
               fill="#017664"
+              format={"0.0"}
             />
           </ComposedChart>
         </ResponsiveContainer>

client/src/components/dashboard-components/pojected-monthly-sales/projected-monthly-sales.component.jsx

@@ -31,16 +31,51 @@ export default function DashboardProjectedMonthlySales({ data, ...cardProps }) {
 }
 
 export const DashboardProjectedMonthlySalesGql = `
-    projected_monthly_sales: jobs(where: {_or: [{_and: [{date_invoiced: {_gte: "${moment()
+    projected_monthly_sales: jobs(where: {
+      voided: {_eq: false},
+      _or: [
+        {_and: [
+          {date_invoiced:{_is_null: false }},
+          {date_invoiced: {_gte: "${moment()
+            .startOf("month")
+            .startOf("day")
+            .toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+  .endOf("month")
+  .endOf("day")
+  .toISOString()}"}}]},
+  {
+
+_and:[
+  {date_invoiced:{_is_null: true }},
+  {actual_completion: {_gte: "${moment()
+    .startOf("month")
+    .startOf("day")
+    .toISOString()}"}}, {actual_completion: {_lte: "${moment()
+  .endOf("month")
+  .endOf("day")
+  .toISOString()}"}}
+
+]
+  },
+
+  {_and: [
+    {date_invoiced: {_is_null: true}}, 
+    {actual_completion: {_is_null: true}}
+    {scheduled_completion: {_gte: "${moment()
       .startOf("month")
-      .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
+      .startOf("day")
+      .toISOString()}"}}, {scheduled_completion: {_lte: "${moment()
   .endOf("month")
-  .format("YYYY-MM-DD")}"}}]}, {_and: [{scheduled_completion: {_gte: "${moment()
-  .startOf("month")
-  .format("YYYY-MM-DD")}"}}, {scheduled_completion: {_lte: "${moment()
-  .endOf("month")
-  .format("YYYY-MM-DD")}"}}]}]}) {
+  .endOf("day")
+  .toISOString()}"}}
+
+
+]}
+
+]}) {
     id
+    ro_number
+    voided
     date_invoiced
     job_totals
   }

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -59,7 +59,8 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   });
 
   const { loading, error, data, refetch } = useQuery(
-    createDashboardQuery(state)
+    createDashboardQuery(state),
+    { fetchPolicy: "network-only", nextFetchPolicy: "network-only" }
   );
 
   const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
@@ -279,12 +280,13 @@ const createDashboardQuery = (state) => {
   return gql`
     query QUERY_DASHBOARD_DETAILS {
          ${componentBasedAdditions || ""}
-      monthly_sales: jobs(where: {_and: [{date_invoiced: {_gte: "${moment()
-        .startOf("month")
-        .format("YYYY-MM-DD")}"}}, {date_invoiced: {_lte: "${moment()
-    .endOf("month")
-    .format("YYYY-MM-DD")}"}}]}) {
+      monthly_sales: jobs(where: {_and: [
+        { voided: {_eq: false}},
+        {date_invoiced: {_gte: "${moment()
+        .startOf("month").startOf('day').toISOString()}"}}, {date_invoiced: {_lte: "${moment()
+    .endOf("month").endOf('day').toISOString()}"}}]}) {
     id
+    ro_number
     date_invoiced
     job_totals
           rate_la1
@@ -332,14 +334,14 @@ const createDashboardQuery = (state) => {
           part_qty
           part_type
         }
-        labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" } }) {
+        labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" }, removed: { _eq: false } }) {
           aggregate {
             sum {
               mod_lb_hrs
             }
           }
         }
-        larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" } }) {
+        larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" }, removed: { _eq: false } }) {
           aggregate {
             sum {
               mod_lb_hrs

client/src/components/dms-customer-selector/dms-customer-selector.component.jsx

@@ -45,7 +45,7 @@ export function DmsCustomerSelector({ bodyshop }) {
   const onUseGeneric = () => {
     setVisible(false);
     socket.emit(
-      `${dmsType}selected-customer`,
+      `${dmsType}-selected-customer`,
       bodyshop.cdk_configuration.generic_customer_number
     );
     setSelectedCustomer(null);

client/src/components/dms-post-form/dms-post-form.component.jsx

@@ -14,6 +14,7 @@ import {
   Typography,
 } from "antd";
 import Dinero from "dinero.js";
+import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -22,6 +23,7 @@ import { determineDmsType } from "../../pages/dms/dms.container";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
 import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
@@ -78,10 +80,26 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
         layout="vertical"
         onFinish={handleFinish}
         initialValues={{
-          story: t("jobs.labels.dms.defaultstory", {
+          story: `${t("jobs.labels.dms.defaultstory", {
             ro_number: job.ro_number,
-            area_of_damage: job.area_of_damage && job.area_of_damage.impact1,
-          }).substr(0, 239),
+            ownr_nm: `${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+              job.ownr_co_nm || ""
+            }`.trim(),
+            ins_co_nm: job.ins_co_nm || "N/A",
+            clm_po: `${job.clm_no ? `${job.clm_no} ` : ""}${
+              job.po_number || ""
+            }`,
+          }).trim()}.${
+            job.area_of_damage && job.area_of_damage.impact1
+              ? " " +
+                t("jobs.labels.dms.damageto", {
+                  area_of_damage:
+                    (job.area_of_damage && job.area_of_damage.impact1) ||
+                    "UNKNOWN",
+                })
+              : ""
+          }`.substr(0, 239),
+          inservicedate: moment("2019-01-01"),
         }}
       >
         <LayoutFormRow grow>
@@ -154,6 +172,12 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
               >
                 <Input disabled />
               </Form.Item>
+              <Form.Item
+                name="inservicedate"
+                label={t("jobs.fields.dms.inservicedate")}
+              >
+                <FormDatePicker />
+              </Form.Item>
             </LayoutFormRow>
             <Space>
               <DmsCdkMakes form={form} socket={socket} job={job} />
@@ -174,6 +198,22 @@ export function DmsPostForm({ bodyshop, socket, job, logsRef }) {
         </Form.Item>
 
         <Divider />
+        <Space size="large" wrap align="center">
+          <Statistic
+            title={t("jobs.fields.ded_amt")}
+            value={Dinero(
+              job.job_totals.totals.custPayable.deductible
+            ).toFormat()}
+          />
+          <Statistic
+            title={t("jobs.labels.total_cust_payable")}
+            value={Dinero(job.job_totals.totals.custPayable.total).toFormat()}
+          />
+          <Statistic
+            title={t("jobs.labels.net_repairs")}
+            value={Dinero(job.job_totals.totals.net_repairs).toFormat()}
+          />
+        </Space>
         <Form.List name={["payers"]}>
           {(fields, { add, remove }) => {
             return (

client/src/components/document-editor/document-editor.container.jsx

@@ -29,6 +29,7 @@ export function DocumentEditorContainer({ setBodyshop }) {
     data: dataShop,
   } = useQuery(QUERY_BODYSHOP, {
     fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   useEffect(() => {
@@ -38,6 +39,8 @@ export function DocumentEditorContainer({ setBodyshop }) {
   const { loading, error, data } = useQuery(GET_DOCUMENT_BY_PK, {
     variables: { documentId },
     skip: !documentId,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   if (loading || loadingShop) return <LoadingSpinner />;

client/src/components/documents-upload/documents-upload.utility.js

@@ -6,6 +6,7 @@ import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
 import client from "../../utils/GraphQLClient";
 import exifr from "exifr";
+import { store } from "../../redux/store";
 
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
@@ -21,9 +22,9 @@ export const handleUpload = (ev, context) => {
 
   const fileName = ev.file.name || ev.filename;
 
-  let key = `${bodyshop.id}/${jobId}/${fileName.replace(
-    /\.[^/.]+$/,
-    ""
+  let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(
+    /[^A-Z0-9]+/gi,
+    "_"
   )}-${new Date().getTime()}`;
   let extension = fileName.split(".").pop();
   uploadToCloudinary(
@@ -112,7 +113,19 @@ export const uploadToCloudinary = async (
   );
 
   if (cloudinaryUploadResponse.status !== 200) {
-    if (!!onError) onError(cloudinaryUploadResponse.statusText);
+    if (!!onError) {
+      onError(cloudinaryUploadResponse.statusText);
+    }
+
+    try {
+      axios.post("/newlog", {
+        message: "client-cloudinary-upload-error",
+        type: "error",
+        user: store.getState().user.email,
+        object: cloudinaryUploadResponse,
+      });
+    } catch (error) {}
+
     notification["error"]({
       message: i18n.t("documents.errors.insert", {
         message: cloudinaryUploadResponse.statusText,
@@ -187,3 +200,33 @@ export function DetermineFileType(filetype) {
 
   return "auto";
 }
+
+function replaceAccents(str) {
+  // Verifies if the String has accents and replace them
+  if (str.search(/[\xC0-\xFF]/g) > -1) {
+    str = str
+      .replace(/[\xC0-\xC5]/g, "A")
+      .replace(/[\xC6]/g, "AE")
+      .replace(/[\xC7]/g, "C")
+      .replace(/[\xC8-\xCB]/g, "E")
+      .replace(/[\xCC-\xCF]/g, "I")
+      .replace(/[\xD0]/g, "D")
+      .replace(/[\xD1]/g, "N")
+      .replace(/[\xD2-\xD6\xD8]/g, "O")
+      .replace(/[\xD9-\xDC]/g, "U")
+      .replace(/[\xDD]/g, "Y")
+      .replace(/[\xDE]/g, "P")
+      .replace(/[\xE0-\xE5]/g, "a")
+      .replace(/[\xE6]/g, "ae")
+      .replace(/[\xE7]/g, "c")
+      .replace(/[\xE8-\xEB]/g, "e")
+      .replace(/[\xEC-\xEF]/g, "i")
+      .replace(/[\xF1]/g, "n")
+      .replace(/[\xF2-\xF6\xF8]/g, "o")
+      .replace(/[\xF9-\xFC]/g, "u")
+      .replace(/[\xFE]/g, "p")
+      .replace(/[\xFD\xFF]/g, "y");
+  }
+
+  return str;
+}

client/src/components/email-documents/email-documents.component.jsx

@@ -34,6 +34,8 @@ export function EmailDocumentsComponent({
       jobId: emailConfig.jobid,
     },
     skip: !emailConfig.jobid,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   return (

client/src/components/email-overlay/email-overlay.component.jsx

@@ -16,9 +16,14 @@ import EmailDocumentsComponent from "../email-documents/email-documents.componen
 import _ from "lodash";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
 });
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
@@ -28,7 +33,12 @@ export default connect(
   mapDispatchToProps
 )(EmailOverlayComponent);
 
-export function EmailOverlayComponent({ form, selectedMediaState, bodyshop }) {
+export function EmailOverlayComponent({
+  form,
+  selectedMediaState,
+  bodyshop,
+  currentUser,
+}) {
   const { t } = useTranslation();
   const handleClick = ({ item, key, keyPath }) => {
     const email = item.props.value;
@@ -51,6 +61,27 @@ export function EmailOverlayComponent({ form, selectedMediaState, bodyshop }) {
 
   return (
     <div>
+      <Form.Item
+        label={t("emails.fields.from")}
+        name="from"
+        rules={[
+          {
+            required: true,
+            //message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <Select>
+          <Select.Option key={currentUser.email}>
+            {currentUser.email}
+          </Select.Option>
+          <Select.Option key={bodyshop.email}>{bodyshop.email}</Select.Option>
+          {bodyshop.md_from_emails &&
+            bodyshop.md_from_emails.map((e) => (
+              <Select.Option key={e}>{e}</Select.Option>
+            ))}
+        </Select>
+      </Form.Item>
       <Form.Item
         label={
           <Space>

client/src/components/email-overlay/email-overlay.container.jsx

@@ -56,13 +56,9 @@ export function EmailOverlayContainer({
         : bodyshop.shopname,
       address: EmailSettings.fromAddress,
     },
-    ReplyTo: {
-      Email: currentUser.validemail ? currentUser.email : bodyshop.email,
-      Name: currentUser.displayName,
-    },
   };
 
-  const handleFinish = async (values) => {
+  const handleFinish = async (allValues) => {
     logImEXEvent("email_send_from_modal");
 
     //const attachments = [];
@@ -77,10 +73,15 @@ export function EmailOverlayContainer({
     //     attachments.push(t);
     //   });
 
+    const { from, ...values } = allValues;
     setSending(true);
     try {
       await axios.post("/sendemail", {
         ...defaultEmailFrom,
+        ReplyTo: {
+          Email: from,
+          Name: currentUser.displayName,
+        },
         ...values,
         html: rawHtml,
         attachments: [
@@ -138,6 +139,7 @@ export function EmailOverlayContainer({
     }
 
     form.setFieldsValue({
+      from: currentUser.validemail ? currentUser.email : bodyshop.email,
       ...emailConfig.messageOptions,
       cc:
         emailConfig.messageOptions.cc &&

client/src/components/error-boundary/error-boundary.component.jsx

@@ -9,7 +9,6 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import { tracker } from "../../App/App.container";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -37,7 +36,6 @@ class ErrorBoundary extends React.Component {
   componentDidCatch(error, info) {
     console.log("Exception Caught by Error Boundary.", error, info);
     this.setState({ ...this.state, error, info });
-    tracker.event("error_boundary", error, true);
   }
 
   handleErrorSubmit = () => {

client/src/components/form-date-picker/form-date-picker.component.jsx

@@ -1,35 +1,83 @@
 import { DatePicker } from "antd";
 import moment from "moment";
-import React, { forwardRef } from "react";
+import React, { useRef } from "react";
 //To be used as a form element only.
 
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(FormDatePicker);
+
 const dateFormat = "MM/DD/YYYY";
 
-const FormDatePicker = (
-  { value, onChange, onBlur, onlyFuture, ...restProps },
-  ref
-) => {
+export function FormDatePicker({
+  bodyshop,
+  value,
+  onChange,
+  onBlur,
+  onlyFuture,
+  isDateOnly = true,
+  ...restProps
+}) {
+  const ref = useRef();
+
   const handleChange = (newDate) => {
     if (value !== newDate && onChange) {
-      onChange(newDate);
+      onChange(isDateOnly ? newDate && newDate.format("YYYY-MM-DD") : newDate);
     }
   };
 
   const handleKeyDown = (e) => {
     if (e.key.toLowerCase() === "t") {
       if (onChange) {
-        onChange(new moment());
+        onChange(isDateOnly ? moment().format("YYYY-MM-DD") : moment());
+        // if (ref.current && ref.current.blur) ref.current.blur();
       }
+    } else if (e.key.toLowerCase() === "enter") {
+      if (ref.current && ref.current.blur) ref.current.blur();
     }
   };
 
+  const handleBlur = (e) => {
+    const v = e.target.value;
+    if (!v) return;
+
+    const _a = moment(
+      v,
+      ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
+      "en",
+      false
+    );
+
+    if (_a.isValid() && value && value.isValid && value.isValid()) {
+      _a.set({
+        hours: value.hours(),
+        minutes: value.minutes(),
+        seconds: value.seconds(),
+        milliseconds: value.milliseconds(),
+      });
+    }
+
+    if (_a.isValid() && onChange)
+      onChange(isDateOnly ? _a.format("YYYY-MM-DD") : _a);
+  };
+
   return (
     <div onKeyDown={handleKeyDown}>
       <DatePicker
+        ref={ref}
         value={value ? moment(value) : null}
         onChange={handleChange}
         format={dateFormat}
-        onBlur={onBlur}
+        onBlur={onBlur || handleBlur}
+        showToday={false}
         disabledTime
         {...(onlyFuture && {
           disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
@@ -38,6 +86,4 @@ const FormDatePicker = (
       />
     </div>
   );
-};
-
-export default forwardRef(FormDatePicker);
+}

client/src/components/form-date-time-picker/form-date-time-picker.component.jsx

@@ -26,19 +26,20 @@ const DateTimePicker = (
         value={value}
         onBlur={onBlur}
         onChange={onChange}
+        isDateOnly={false}
       />
 
       <TimePicker
-        {...restProps}
-        value={value ? moment(value) : null}
-        {...(onlyFuture && {
-          disabledDate: (d) => moment().isAfter(d),
-        })}
-        onChange={onChange}
-        showSecond={false}
-        minuteStep={15}
-        onBlur={onBlur}
-        format="hh:mm a"
+      value={value ? moment(value) : null}
+      {...(onlyFuture && {
+        disabledDate: (d) => moment().isAfter(d),
+      })}
+      onChange={onChange}
+      showSecond={false}
+      minuteStep={15}
+      onBlur={onBlur}
+      format="hh:mm a"
+      {...restProps}
       />
     </div>
   );

client/src/components/global-search/global-search.component.jsx

@@ -1,16 +1,19 @@
 import { useLazyQuery } from "@apollo/client";
-import { AutoComplete, Divider, Input, Space } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import { AutoComplete, Divider, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
-
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../owner-name-display/owner-name-display.component";
 export default function GlobalSearch() {
   const { t } = useTranslation();
-
+  const history = useHistory();
   const [callSearch, { loading, error, data }] =
     useLazyQuery(GLOBAL_SEARCH_QUERY);
 
@@ -39,9 +42,10 @@ export default function GlobalSearch() {
                 <Link to={`/manage/jobs/${job.id}`}>
                   <Space size="small" split={<Divider type="vertical" />}>
                     <strong>{job.ro_number || t("general.labels.na")}</strong>
-                    <span>{`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
-                      job.ownr_co_nm || ""
-                    }`}</span>
+                    <span>{`${job.status || ""}`}</span>
+                    <span>
+                      <OwnerNameDisplay ownerObject={job} />
+                    </span>
                     <span>{`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
                       job.v_model_desc || ""
                     }`}</span>
@@ -57,15 +61,13 @@ export default function GlobalSearch() {
           options: data.search_owners.map((owner) => {
             return {
               key: owner.id,
-              value: `${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
-                owner.ownr_co_nm || ""
-              }`,
+              value: OwnerNameDisplayFunction(owner),
               label: (
                 <Link to={`/manage/owners/${owner.id}`}>
                   <Space size="small" split={<Divider type="vertical" />} wrap>
-                    <span>{`${owner.ownr_fn || ""} ${owner.ownr_ln || ""} ${
-                      owner.ownr_co_nm || ""
-                    }`}</span>
+                    <span>
+                      <OwnerNameDisplay ownerObject={owner} />
+                    </span>
                     <PhoneNumberFormatter>
                       {owner.ownr_ph1}
                     </PhoneNumberFormatter>
@@ -171,9 +173,13 @@ export default function GlobalSearch() {
     <AutoComplete
       options={options}
       onSearch={handleSearch}
+      suffixIcon={loading && <LoadingOutlined spin />}
+      defaultActiveFirstOption
       placeholder={t("general.labels.globalsearch")}
-    >
-      <Input.Search loading={loading} />
-    </AutoComplete>
+      allowClear
+      onSelect={(val, opt) => {
+        history.push(opt.label.props.to);
+      }}
+    ></AutoComplete>
   );
 }

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -27,6 +27,8 @@ export function Jobd3RdPartyModal({ bodyshop, jobId }) {
     SEARCH_VENDOR_AUTOCOMPLETE_WITH_ADDR,
     {
       skip: !isModalVisible,
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
     }
   );
 

client/src/components/job-at-change/schedule-event.component.jsx

@@ -27,9 +27,11 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -66,12 +68,15 @@ export function ScheduleEventComponent({
   const popoverContent = (
     <div style={{ maxWidth: "40vw" }}>
       {!event.isintake ? (
-        <strong>{event.title}</strong>
+        <Space>
+          <strong>{event.title}</strong>
+          <ScheduleEventColor event={event} />
+        </Space>
       ) : (
         <Space>
-          <strong>{`${(event.job && event.job.ownr_fn) || ""} ${
-            (event.job && event.job.ownr_ln) || ""
-          }`}</strong>
+          <strong>
+            <OwnerNameDisplay ownerObject={event.job} />
+          </strong>
           <span style={{ margin: 4 }}>
             {`${(event.job && event.job.v_model_yr) || ""} ${
               (event.job && event.job.v_make_desc) || ""
@@ -118,7 +123,9 @@ export function ScheduleEventComponent({
           </DataLabel>
           <ScheduleEventNote event={event} />
         </div>
-      ) : null}
+      ) : (
+        <div>{event.note || ""}</div>
+      )}
       <Divider />
       <Space wrap>
         {event.job ? (
@@ -140,84 +147,89 @@ export function ScheduleEventComponent({
             {t("appointments.actions.preview")}
           </Button>
         ) : null}
-
-        <Dropdown
-          overlay={
-            <Menu>
-              <Menu.Item
-                onClick={() => {
-                  const Template = TemplateList("job").appointment_reminder;
-                  GenerateDocument(
-                    {
-                      name: Template.key,
-                      variables: { id: event.job.id },
-                    },
-                    {
-                      to: event.job && event.job.ownr_ea,
-                      subject: Template.subject,
-                    },
-                    "e",
-                    event.job && event.job.id
-                  );
-                }}
-                disabled={event.arrived}
-              >
-                {t("general.labels.email")}
-              </Menu.Item>
-              <Menu.Item
-                onClick={() => {
-                  const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
-                  if (p && p.isValid()) {
-                    openChatByPhone({
-                      phone_num: p.formatInternational(),
-                      jobid: event.job.id,
-                    });
-                    setMessage(
-                      t("appointments.labels.reminder", {
-                        shopname: bodyshop.shopname,
-                        date: moment(event.start).format("MM/DD/YYYY"),
-                        time: moment(event.start).format("HH:mm a"),
-                      })
+        {event.job ? (
+          <Dropdown
+            overlay={
+              <Menu>
+                <Menu.Item
+                  onClick={() => {
+                    const Template = TemplateList("job").appointment_reminder;
+                    GenerateDocument(
+                      {
+                        name: Template.key,
+                        variables: { id: event.job.id },
+                      },
+                      {
+                        to: event.job && event.job.ownr_ea,
+                        subject: Template.subject,
+                      },
+                      "e",
+                      event.job && event.job.id
                     );
-                    setVisible(false);
-                  } else {
-                    notification["error"]({
-                      message: t("messaging.error.invalidphone"),
-                    });
-                  }
-                }}
-                disabled={event.arrived || !bodyshop.messagingservicesid}
-              >
-                {t("general.labels.sms")}
-              </Menu.Item>
-            </Menu>
-          }
-        >
-          <Button>{t("appointments.actions.sendreminder")}</Button>
-        </Dropdown>
+                  }}
+                  disabled={event.arrived}
+                >
+                  {t("general.labels.email")}
+                </Menu.Item>
+                <Menu.Item
+                  onClick={() => {
+                    const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
+                    if (p && p.isValid()) {
+                      openChatByPhone({
+                        phone_num: p.formatInternational(),
+                        jobid: event.job.id,
+                      });
+                      setMessage(
+                        t("appointments.labels.reminder", {
+                          shopname: bodyshop.shopname,
+                          date: moment(event.start).format("MM/DD/YYYY"),
+                          time: moment(event.start).format("HH:mm a"),
+                        })
+                      );
+                      setVisible(false);
+                    } else {
+                      notification["error"]({
+                        message: t("messaging.error.invalidphone"),
+                      });
+                    }
+                  }}
+                  disabled={event.arrived || !bodyshop.messagingservicesid}
+                >
+                  {t("general.labels.sms")}
+                </Menu.Item>
+              </Menu>
+            }
+          >
+            <Button>{t("appointments.actions.sendreminder")}</Button>
+          </Dropdown>
+        ) : null}
 
         <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
           {t("appointments.actions.cancel")}
         </Button>
-        <Button
-          disabled={event.arrived}
-          onClick={() => {
-            setVisible(false);
-            setScheduleContext({
-              actions: { refetch: refetch },
-              context: {
-                jobId: event.job.id,
-                job: event.job,
-                previousEvent: event.id,
-                color: event.color,
-                alt_transport: event.job && event.job.alt_transport,
-                note: event.note,
-              },
-            });
-          }}
-        >
-          {t("appointments.actions.reschedule")}
-        </Button>
+        {event.isintake ? (
+          <Button
+            disabled={event.arrived}
+            onClick={() => {
+              setVisible(false);
+              setScheduleContext({
+                actions: { refetch: refetch },
+                context: {
+                  jobId: event.job.id,
+                  job: event.job,
+                  previousEvent: event.id,
+                  color: event.color,
+                  alt_transport: event.job && event.job.alt_transport,
+                  note: event.note,
+                },
+              });
+            }}
+          >
+            {t("appointments.actions.reschedule")}
+          </Button>
+        ) : (
+          <ScheduleManualEvent event={event} />
+        )}
         {event.isintake ? (
           <Link
             to={{
@@ -235,13 +247,19 @@ export function ScheduleEventComponent({
   );
 
   const RegularEvent = event.isintake ? (
-    <div style={{ display: "flex", flexWrap: "wrap" }}>
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        height: "100%",
+      }}
+    >
       <Space>
         {event.note && <AlertFilled className="production-alert" />}
         <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
-        <span>{`${(event.job && event.job.ownr_fn) || ""} ${
-          (event.job && event.job.ownr_ln) || ""
-        } ${(event.job && event.job.ownr_co_nm) || ""}`}</span>
+        <span>
+          <OwnerNameDisplay ownerObject={event.job} />
+        </span>
       </Space>
       <Space>
         <span>
@@ -262,7 +280,7 @@ export function ScheduleEventComponent({
       )}
     </div>
   ) : (
-    <div>
+    <div style={{ height: "100%", width: "100%" }}>
       <strong>{`${event.title || ""}`}</strong>
     </div>
   );
@@ -270,7 +288,7 @@ export function ScheduleEventComponent({
   return (
     <Popover
       visible={visible}
-      onVisibleChange={(vis) => setVisible(vis)}
+      onVisibleChange={(vis) => !event.vacation && setVisible(vis)}
       trigger="click"
       content={event.block ? blockContent : popoverContent}
       style={{ height: "100%", width: "100%" }}

client/src/components/job-at-change/schedule-event.container.jsx

@@ -38,6 +38,7 @@ export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
           job: {
             date_scheduled: null,
             scheduled_in: null,
+            scheduled_completion:null,
             status: bodyshop.md_ro_statuses.default_imported,
           },
         },

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

@@ -10,6 +10,8 @@ export default function JobAuditTrail({ jobId }) {
   const { loading, data } = useQuery(QUERY_AUDIT_TRAIL, {
     variables: { jobid: jobId },
     skip: !jobId,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
   });
 
   const columns = [

client/src/components/job-bills-total/job-bills-total.component.jsx

@@ -64,15 +64,15 @@ export default function JobBillsTotalComponent({
     })
   );
 
-  const totalPartsSublet = Dinero(totals.parts.parts.total).add(
-    Dinero(totals.parts.sublets.total)
-  );
+  const totalPartsSublet = Dinero(totals.parts.parts.total)
+    .add(Dinero(totals.parts.sublets.total))
+    .add(Dinero(totals.additional.towing));
 
   const discrepancy = totalPartsSublet.subtract(billTotals);
 
   const discrepWithLbrAdj = discrepancy.add(lbrAdjustments);
 
-  const discrepWithCms = discrepWithLbrAdj.add(billCms);
+  const discrepWithCms = discrepWithLbrAdj.add(totalReturns);
   const creditsNotReceived = totalReturns.subtract(billCms); //billCms is tracked as a negative number.
 
   return (
@@ -171,8 +171,8 @@ export default function JobBillsTotalComponent({
               }
             >
               <Statistic
-                title={t("bills.labels.billcmtotal")}
-                value={billCms.toFormat()}
+                title={t("bills.labels.totalreturns")}
+                value={totalReturns.toFormat()}
               />
             </Tooltip>
             <Typography.Title>=</Typography.Title>

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -79,9 +79,19 @@ export function JobChecklistForm({
           ...(type === "intake" && {
             scheduled_completion: values.scheduled_completion,
           }),
+          ...(type === "intake" &&
+            bodyshop.intakechecklist &&
+            bodyshop.intakechecklist.next_contact_hours &&
+            bodyshop.intakechecklist.next_contact_hours > 0 && {
+              date_next_contact: moment().add(
+                bodyshop.intakechecklist.next_contact_hours,
+                "hours"
+              ),
+            }),
           ...(type === "deliver" && {
             actual_completion: values.actual_completion,
           }),
+
           [(type === "intake" && "intakechecklist") ||
           (type === "deliver" && "deliverchecklist")]: {
             ...values,
@@ -95,6 +105,10 @@ export function JobChecklistForm({
             completed_at: new Date(),
           },
 
+          ...(type === "intake" &&
+            values.scheduled_delivery && {
+              scheduled_delivery: values.scheduled_delivery,
+            }),
           ...(type === "deliver" && {
             scheduled_delivery: values.scheduled_delivery,
             actual_delivery: values.actual_delivery,
@@ -161,7 +175,12 @@ export function JobChecklistForm({
       });
     }
   };
-
+  console.log(job, {
+    removeFromProduction: true,
+    actual_completion:
+      job && job.actual_completion && moment(job.actual_completion),
+    actual_delivery: job && job.actual_delivery && moment(job.actual_delivery),
+  });
   return (
     <Card
       title={t("checklist.labels.checklist")}
@@ -185,21 +204,27 @@ export function JobChecklistForm({
             addToProduction: true,
             allow_text_message: job.owner && job.owner.allow_text_message,
             scheduled_completion:
-              (job && job.scheduled_completion) ||
-              (job.labbrs && job.larhrs
-                ? moment().businessAdd(
-                    (job.labhrs.aggregate.sum.mod_lb_hrs +
-                      job.larhrs.aggregate.sum.mod_lb_hrs) /
-                      bodyshop.target_touchtime,
-                    "days"
-                  )
-                : null),
-            scheduled_delivery: job && job.scheduled_delivery,
+              (job &&
+                job.scheduled_completion &&
+                moment(job.scheduled_completion)) ||
+              (job &&
+                job.labhrs &&
+                job.larhrs &&
+                moment().businessAdd(
+                  (job.labhrs.aggregate.sum.mod_lb_hrs ||
+                    0 + job.larhrs.aggregate.sum.mod_lb_hrs ||
+                    0) / bodyshop.target_touchtime,
+                  "days"
+                )),
+            scheduled_delivery:
+              job.scheduled_delivery && moment(job.scheduled_delivery),
           }),
           ...(type === "deliver" && {
             removeFromProduction: true,
-            actual_completion: job && job.actual_completion,
-            actual_delivery: job && job.actual_delivery,
+            actual_completion:
+              job && job.actual_completion && moment(job.actual_completion),
+            actual_delivery:
+              job && job.actual_delivery && moment(job.actual_delivery),
           }),
           ...formItems
             .filter((fi) => fi.value)

client/src/components/job-costing-modal/job-costing-modal.container.jsx

@@ -26,11 +26,6 @@ export function JobCostingModalContainer({
   const { visible, context } = jobCostingModal;
   const { jobId } = context;
 
-  // const { loading, error, data } = useQuery(QUERY_JOB_COSTING_DETAILS, {
-  //   variables: { id: jobId },
-  //   skip: !jobId,
-  // });
-
   useEffect(() => {
     async function getData() {
       if (jobId && visible) {
@@ -46,8 +41,14 @@ export function JobCostingModalContainer({
     <Modal
       visible={visible}
       title={t("jobs.labels.jobcosting")}
-      onOk={() => toggleModalVisible()}
-      onCancel={() => toggleModalVisible()}
+      onOk={() => {
+        toggleModalVisible();
+        setCostingData(null);
+      }}
+      onCancel={() => {
+        toggleModalVisible();
+        setCostingData(null);
+      }}
       cancelButtonProps={{ style: { display: "none" } }}
       width="90%"
       destroyOnClose

client/src/components/job-costing-statistics/job-costing-statistics.component.jsx

@@ -16,6 +16,14 @@ export default function JobCostingStatistics({ summaryData }) {
           value={Dinero(summaryData.totalPartsSales).toFormat()}
           title={t("jobs.labels.sale_parts")}
         />
+        <Statistic
+          value={Dinero(summaryData.totalSubletSales).toFormat()}
+          title={t("jobs.labels.sale_sublet")}
+        />
+        <Statistic
+          value={Dinero(summaryData.totalAdditionalSales).toFormat()}
+          title={t("jobs.labels.sale_additional")}
+        />
         <Statistic
           value={Dinero(summaryData.totalSales).toFormat()}
           title={t("jobs.labels.total_sales")}
@@ -28,6 +36,14 @@ export default function JobCostingStatistics({ summaryData }) {
           value={Dinero(summaryData.totalPartsCost).toFormat()}
           title={t("jobs.labels.cost_parts")}
         />
+        <Statistic
+          value={Dinero(summaryData.totalSubletCost).toFormat()}
+          title={t("jobs.labels.cost_sublet")}
+        />
+        <Statistic
+          value={Dinero(summaryData.totalAdditionalCost).toFormat()}
+          title={t("jobs.labels.cost_Additional")}
+        />
         <Statistic
           value={Dinero(summaryData.totalCost).toFormat()}
           title={t("jobs.labels.total_cost")}

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -21,12 +21,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobCreateIOU);
 
-export function JobCreateIOU({
-  bodyshop,
-  currentUser,
-  jobid,
-  selectedJobLines,
-}) {
+export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
@@ -44,7 +39,7 @@ export function JobCreateIOU({
     //Query all of the job details to recreate.
     const iouId = await CreateIouForJob(
       client,
-      jobid,
+      job.id,
       {
         status: bodyshop.md_ro_statuses.default_open,
         bodyshopid: bodyshop.id,
@@ -63,7 +58,7 @@ export function JobCreateIOU({
       variables: { ids: selectedJobLinesIds },
       update(cache) {
         cache.modify({
-          id: cache.identify(jobid),
+          id: cache.identify(job.id),
           fields: {
             joblines(existingJobLines, { readField }) {
               return existingJobLines.map((a) => {
@@ -83,10 +78,15 @@ export function JobCreateIOU({
     <Popconfirm
       title={t("jobs.labels.createiouwarning")}
       onConfirm={handleCreateIou}
+      disabled={
+        !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+      }
     >
       <Button
         loading={loading}
-        disabled={!selectedJobLines || selectedJobLines.length === 0}
+        disabled={
+          !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+        }
       >
         {t("jobs.actions.createiou")}
       </Button>