Skip to content
Toprent.app Docs

PDF & Documents

Overview

Power‑Rent renders a suite of PDFs using @react-pdf/renderer, with data assembled from GraphQL and formatted per locale and currency. Documents include multi‑page Contracts (v1/v2), Deposit‑Free, Name Plate, Offer, Quotation, and Invoice.

Structure

  • Root: components/PDFDocuments/*
  • Shared formatters: components/PDFDocuments/formatters.js
  • Data mappers (normalize GraphQL → props):
    • Contract v1: components/PDFDocuments/Contract/fetchContractData.js
    • Contract v2: components/PDFDocuments/Contract2/** (modular pages), mapping happens in per‑page components and shared helpers
    • Invoice: components/PDFDocuments/Invoice/fetchInvoiceData.js
    • Quotation: components/PDFDocuments/Quotation/fetchQuotationData.js
    • Deposit Free: components/PDFDocuments/DepositFree/fetchDepositFreeData.js
    • Name Plate: components/PDFDocuments/NamePlate/fetchNamePlateData.js

Rendering flow

  1. Resolve data
  • fetch*Data.js executes GraphQL and applies business rules and company settings (currency, timezone, locale, terms, documents color).
  1. Compose PDF
  • Components build sections/pages using @react-pdf/renderer primitives. Contract v2 lives under components/PDFDocuments/Contract2/* (FirstPage/SecondPage/ThirdPage, Header/Footer, common styles).
  1. Deliver
  • UI triggers render/download, e.g. components/InvoicePage/DownloadInvoicePdf.js, components/reservations/ViewReservationDocuments/index.js.

Signing flow

  • Prisma model: signature_requests
  • Resolvers: server/graphql/resolvers/mutation/CreateSignatureRequest/* and related queries
  • Public endpoints: pages/api/public/signature-request/* (phone/email verification, document retrieval)
  • Messages/translations: components/PDFDocuments/messages.js, lang/*.json

Internationalization & settings

  • Multi‑language content assembled from settings (terms, agreements, docs color) and lang/*
  • Currency/locale/timezone formatting handled by data mappers and shared formatters.js
  • Default documents color: constants/index.js → defaultDocumentsColor

Testing

  • Mapper tests (where present): components/PDFDocuments/*/fetch*Data.test.js
  • E2E journeys via Cypress as applicable

Quick reference

  • Contract v2 entry: components/PDFDocuments/Contract2/index.js
  • Contract v1 entry: components/PDFDocuments/Contract/index.js
  • Invoice: components/PDFDocuments/Invoice/index.js
  • Offer: components/PDFDocuments/Offer/index.js
  • Quotation: components/PDFDocuments/Quotation/index.js
  • Deposit Free: components/PDFDocuments/DepositFree/index.js
  • Name Plate: components/PDFDocuments/NamePlate/index.js