---
# System prepended metadata

title: Client Side Invoicing

---

---
title: 'Client Side Invoicing'
---

:money_with_wings: Client Side Invoicing :money_with_wings: 
===
:::info
The purpose of this document is to capture and share knowledge of how the invoicing squad has developed client side code.
:::

Table of Contents
---

[TOC]

Squad Invoicing Hydra Clients
---
### 1. invoicing (We own everything in this hydra client)

![](https://i.imgur.com/LsH2VlG.png)

- The Enhanced Configurable PDF is meant to replace the Legacy Configurable PDF that lives inside the prime_contract hydra client. It leverages [Pakaukau](https://procore.github.io/core-labs/#/active/components/pakaukau/introduction), a shared and [virtualized table](https://github.com/bvaughn/react-virtualized), to address the legacy table's performance shortcomings.
- Can be accessed from `Prime Contracts > Prime Contract > Invoices > Invoice > Configurable PDF` with Launch Darkly toggle
- For questions, reach out to Eric McAnena or Shane Means.

![](https://i.imgur.com/RFQyJxo.png)

- Sliding Scale Retention Settings are where users configure the sliding scale retention feature on the commitments detail tab payapp table.
- Can be accessed from `Commitments > Subcontract or Work Order Contract > Advanced Settings`
- For questions, reach out to Luke Michals or Shane Means.

![](https://i.imgur.com/w11f5AL.png)

- Project Level Invoicing provides a high level view of all subcontractor and owner invoices that exist in a given project.
- Can be accessed by clicking on `Invoicing` in the mega menu.
- For questions, reach out to Gabe Harms.
    
### 2. payapp_table (We own everything in this hydra client)
![](https://i.imgur.com/dNXMKFT.png)

![](https://i.imgur.com/Yde6xbR.png)

- The invoicing squad's bread and butter. This table is a foundational feature and allows our clients to construct progressive invoices for their contracts. It is currently used in both the Prime Contracts and Commitments tools.
- Can be accessed from two places.
    - `Prime Contracts > Prime Contract > Invoices > Invoice > Detail`
    - `Commitments > Subcontract or Work Order Contract > Invoices > Invoice > Detail`
- For questions, reach out to Shane Means or Gabe Harms.

### 3. prime_contract
![](https://i.imgur.com/dGhelRG.png)
- The Legacy Configurable PDF was our first attempt at a tool that permits configurable formatting for invoices. 
- Can be accessed from `Prime Contracts > Prime Contract > Invoices > Invoice > Configurable PDF`
- For questions, reach out to Shane Means or Gabe Harms.

![](https://i.imgur.com/qlEe2TV.png)
- This is a reskin of the payment application summary g702 page. There is no meaningful functionality, so no need to worry about support issues.
- Can be accessed from `Prime Contracts > Prime Contract > Invoices > Invoice > Summary`
- For questions, reach out to Michael Kubota or Gabe Harms (but they might not remember this sine it's >3 years old)

### 4. commitments
![](https://i.imgur.com/pYMMAeC.png)
- Billing schedule of values is a tool that facilitates the breakdown of contract line items in subcontracts and work order contracts. For example, if a subcontractor requests $20,000 for general conditions, the GC might expect a granular breakdown of the what and the why.
- SSOV Status Selector is meant to change the status of a Billing schedule of value breakdown on a subcontract / work order contract.
- Both can be accessed from `Commitments > Subcontract or Work Order Contract > Invoices > Invoice > Subcontractor SOV`
- For questions, reach out to Gabe Harms or Kevin Chu

![](https://i.imgur.com/wnbUQVy.png)
- G703 subcontractor experience is a simplified view of the traditional detail tab payapp table. It's meant to streamline the invoicing experience for subcontractors that want to bill for work completed on a subcontract / work order contract.
- For questions, reacht out to Gabe Harms or Kevin Chu

### 5. payments (We own everything in this hydra client)
- This represents the entirety of client side code for Procore Pay.
- Can be accessed by clicking on `Payments` from the mega menu (talk to Spencer about permissions, microservices, etc.)
- For questions, reach out to Carlos Gomez or Spencer Neste.

Approaching Detail Tab Payapp Table Bugs
---
![](https://i.imgur.com/5KlGyuN.jpg)

```gherkin=
Problem: My Payapp Table is broken!

  ## Is the issue client-side or server-side? Check out the network tab!
  
  Scenario: There's an issue with table calculations.
    - payapp_table/src/modules/helpers/G703Math.js
    - payapp_table/modules/paymentApplication/g703Table.js:115
    - payapp_table/modules/helpers/g703RowCalculations.js:53

  Scenario: There's an issue with autosaving or manual saving.
    ## Async Request
    - payapp_table/src/modules/paymentApplication/g703Table.js:130
    ## Queueing Mechanism
    - payapp_table/src/modules/helpers/rowUpdateQueue.js
    ## Business Rule Validation
    - payapp_table/src/helpers/utils.js:212

  Scenario: There's an issue with the g703 calculator.
    - payapp_table/src/modules/helpers/g703TableCalculator.js
   
    
```
Jeremy's Top 3 
---
### 1. Graceful error handling for the Detail Tab Payapp Table.
- The current implementation of the payapp table supports optimistic updating.
- The table, however, neither provides appropriate messaging nor reversion of values when optimistic updates are *not* successful.
- Example of the [issue](https://procoretech.slack.com/archives/G4LUALUS3/p1581532633019700?thread_ts=1581526164.010400&cid=G4LUALUS3)

### 2. Replace all instances of `parseFloat` with `Decimal.js`
- Javascript doesn't handle floating point numbers well, which can, and has caused, calculation errors. Decimal.js circumvents the problem entirely by creating a data structure to support floating point numbers of arbitrary precision.
- Examples in the `payapp_table` hydra client:
    - `modules/helpers/G703Math.js` (Used for recalculations of pali data when changing related, editable fields)
    - `modules/helpers/g703RowAttributes.js` (Used to convert values from pali data model into integers)
    - `module/helpers/g703TableCalculator.js` (Used for work completed calculator)
    - `utils/payappHelpers.js` (Revise private helpers)
    - `utils/payAppService.js` (Used for overbudget calculations and retainage column layout)

### 3. More descriptive autosaving on the Detail Tab Payapp Table.

Important Resources
---
### Configurable PDF Enhancement
- [API Contract](https://hackmd.procore.com/xOfe64ZcQHaQMS3fGxYXQQ)
- [Project Summary](https://procoretech.atlassian.net/wiki/spaces/DEV/pages/563150960/Tab+Merge)
### Payapp Table Detail Tab
- [Payapp Table Technical Doc](https://hackmd.io/UNv2-HvNSiu4nL8UbKDstQ?view)

