--- 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)