mirror of
https://github.com/VladSez/easy-invoice-pdf
synced 2026-04-21 21:47:52 +00:00
6192cca49d
* feat: add QR code functionality to invoice templates and enhance user experience * Introduced QR code generation for invoices, allowing users to include a QR code with customizable descriptions. * Updated invoice templates to display QR codes in both default and Stripe formats. * Enhanced form components to support QR code data input and visibility toggles. * Added utility functions for generating QR code data URLs. * Updated tests and snapshots to cover new QR code features and ensure visual consistency across templates. * Introduced a Code of Conduct document to promote a respectful community environment. * feat: enhance error handling and metadata management in invoice application * Updated error handling to reset invoice metadata to default upon error occurrence. * Refactored invoice client page to utilize a constant for default mobile tab value. * Improved metadata structure by including last visited mobile tab in the default metadata. * Adjusted schema to allow optional item name field for better flexibility in invoice items. * fix: downgrade react-pdf version and update mobile tab handling * Downgraded react-pdf from version 10.1.0 to 9.2.1 for compatibility. * Updated mobile tab handling to utilize the last visited tab from app metadata. * Refactored invoice client page to improve metadata management and ensure proper tab state persistence. * fix: remove redundant validation message for item name in invoice form * chore: update TODO list and comment out scroll to top effect in AppPageClient * Added a new issue link to the TODO.md for tracking. * Commented out the scroll to top effect in page.client.tsx for potential future use. * refactor: streamline viewport settings and restore scroll to top effect in AppPageClient * Simplified viewport configuration by removing unnecessary properties. * Restored the scroll to top effect in AppPageClient for improved user experience on initial render. * revert viewport * fix: prevent jumping on iOS when typing in textarea component * Added resize-none class to the textarea to improve user experience on iOS devices by preventing layout shifts while typing. * feat: reworked app logic, improved multi-page pdf layout, add/update e2e tests, improvements and bug fixes * Enhanced README.md with new features, including multi-page PDF support, QR code functionality, and live preview demos. * Added demo GIFs to showcase new features and improve user understanding. * Updated key features section for clarity and added a news & updates section for version tracking. * feat: add debounced error handling in invoice form component * Introduced a debounced callback for showing form errors to improve user experience by preventing rapid toast notifications. * Updated validation logic to utilize the new debounced error handling mechanism. * chore: update e2e snapshots and improved form errors toast * fix: improve PDF viewer and QR code layout in invoice templates * Added state management for page numbers in the mobile PDF viewer to handle multi-page documents. * Adjusted QR code positioning and size to prevent overlap with the fixed footer. * Updated padding in the Stripe template styles to resolve overlapping issues with the footer. * Updated TODO.md with additional context on preventing layout issues in PDF rendering. * feat: enhance invoice sharing logic with validation error handling * Added a new test to verify error toast visibility when the invoice form has validation errors. * Implemented state management for form validation errors in the AppPageClient. * Updated the InvoiceForm component to manage error states and trigger appropriate toasts for user feedback. * Ensured that the share button behavior reflects the form's validation state, improving user experience. * feat: enhance invoice template with authorized person fields * Added fields for Person Authorized to Receive and Person Authorized to Issue in the default invoice template. * Implemented visibility toggles for these fields in the invoice form. * Updated tests to verify the correct behavior of these fields in both default and Stripe invoice templates. * Enhanced PDF rendering to include names of authorized persons when applicable. * feat: implement cooldown for CTA toasts and update UI elements * Introduced a 5-minute cooldown for showing CTA toasts to enhance user experience. * Updated toast management logic in various components to respect the new cooldown. * Adjusted text color in the InvoiceClientPage for better visibility. * Refined tooltip content in the invoice form to clarify functionality. * Updated TODO.md to reflect changes in toast behavior. * feat: add unit column switch to stripe invoice template * Changed toggle labels from Show/hide to Show for various fields in the invoice forms and dialogs to enhance clarity. * Updated related test cases to reflect the new label changes across buyer, seller, and invoice templates. * Ensured consistency in user interface elements for better user experience. * chore: adjust text size * feat: update README and improve CTA toast logic * Replaced the EasyInvoicePDF logo with a new design and adjusted its size for better visibility. * Enhanced the call-to-action (CTA) toast functionality by refining the logic for showing toasts based on user interactions and session activity. * Updated text in the invoice form to clarify user actions and improve overall user experience. * Added a new logo image to the project assets. * update readme * refactor: improved mobile PDF viewer by importing the PDF worker directl, improve CTA toast logic, update readme * Renamed sections in README for clarity, including Live Preview to Invoice PDF Live Preview and Instant Download to Instant PDF Download. * Adjusted text in CTA toasts for better engagement. * Updated minimum time on page and interactions required for showing CTA toasts to enhance user experience. * Improved mobile PDF viewer by importing the PDF worker directly and addressing related issues in TODO.md. * fix: adjust CTA toast display timing for improved user experience * Updated the timeout for showing the CTA toast to 6 seconds after the invoice link notification, enhancing the visibility and timing of user prompts. * feat: Improved handling of invoice sharing logic to differentiate between mobile and desktop sharing methods, enhancing user experience. * Added a new command in package.json for running cloudflared tunnel. * Updated tests to verify the visibility of the share invoice link description toast. * Refined toast notifications in the AppPageClient to include new IDs for better tracking and user feedback. * Improved handling of invoice sharing logic to differentiate between mobile and desktop sharing methods, enhancing user experience. * feat: enhance toast notifications with unique IDs for better ux * fix: adjust invoice item limit in tests and update translations for total excluding tax * Reduced the maximum number of invoice items in the test from 20 to 15 to better align with URL limits. * Updated translations in the PDF i18n schema and related files to include total excluding tax in multiple languages. * Modified the invoice PDF template to display the total excluding tax using localized text. * fix qr code race condition * fix: update URL variable names and enhance sharing logic for better clarity * Renamed variables for generated URLs to improve code readability. * Updated sharing logic to ensure consistent use of the new variable names across mobile and desktop sharing methods. * Enhanced toast notifications to dismiss previous messages and track share events more effectively. * fix: update tax label helper message for clarity in invoice items * readme upd * fix: adjust idle time and minimum interactions for CTA toast display * Increased idle time from 3 seconds to 5 seconds to improve user engagement. * Updated minimum interactions required for showing the CTA toast from 2 to 3 to enhance user experience. * feat: implement cooldown logic for CTA toast display * Added functionality to track the last shown timestamp of the CTA toast using localStorage. * Introduced a 7-day cooldown period to prevent the toast from being shown multiple times within a week. * Updated context to reflect whether the CTA toast was shown recently, enhancing user experience. * chore: update dependencies and add GitHub workflows for linting and type checking * Updated package versions in package.json and pnpm-lock.yaml for better compatibility and performance. * Added GitHub Actions workflows for ESLint and TypeScript type checking to ensure code quality and consistency. * Enhanced buyer and seller management components with improved state management and type safety. * feat: enhance invoice sharing and download tracking * Added functionality to track the number of times invoices are shared via link and downloaded as PDF. * Updated the app metadata structure to include and . * Implemented logic to increment these counts upon sharing and downloading invoices, improving analytics and user engagement. * refactor: update README and TODO for clarity and consistency
140 lines
4.7 KiB
TypeScript
140 lines
4.7 KiB
TypeScript
import type { Page } from "@playwright/test";
|
|
|
|
/**
|
|
* The most **reliable** way (cross-browser and cross-platform) to screenshot a PDF is to use a canvas and render the PDF to it
|
|
* https://github.com/karlhorky/playwright-tricks?tab=readme-ov-file#screenshot-comparison-tests-of-pdfs
|
|
*
|
|
* **Docs**: https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html
|
|
*/
|
|
export async function renderPdfOnCanvas(page: Page, pdfBytes: Uint8Array) {
|
|
await page.setContent(`
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<style>
|
|
body { margin: 0 }
|
|
canvas { display: block }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="pdf"></canvas>
|
|
|
|
<script type="module">
|
|
import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs'
|
|
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
|
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs'
|
|
|
|
pdfjsLib.GlobalWorkerOptions.fontExtraProperties = true
|
|
|
|
|
|
const pdfData = new Uint8Array([${pdfBytes.join(",")}])
|
|
|
|
const pdf = await pdfjsLib.getDocument({ data: pdfData, disableFontFace: true }).promise;
|
|
|
|
|
|
const page = await pdf.getPage(1)
|
|
|
|
const viewport = page.getViewport({ scale: 2 })
|
|
|
|
const canvas = document.getElementById('pdf')
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
ctx.imageSmoothingEnabled = false
|
|
|
|
|
|
canvas.width = viewport.width
|
|
canvas.height = viewport.height
|
|
|
|
await page.render({ canvasContext: ctx, viewport }).promise
|
|
|
|
window.__PDF_RENDERED__ = true
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`);
|
|
}
|
|
|
|
/**
|
|
* Renders all pages of a multi-page PDF vertically stacked on a single canvas
|
|
*
|
|
* **Docs**: https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html
|
|
*/
|
|
export async function renderMultiPagePdfOnCanvas(
|
|
page: Page,
|
|
pdfBytes: Uint8Array,
|
|
) {
|
|
await page.setContent(`
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<style>
|
|
body { margin: 0 }
|
|
canvas { display: block }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="pdf"></canvas>
|
|
|
|
<script type="module">
|
|
import * as pdfjsLib from 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs'
|
|
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
|
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs'
|
|
|
|
pdfjsLib.GlobalWorkerOptions.fontExtraProperties = true
|
|
|
|
const pdfData = new Uint8Array([${pdfBytes.join(",")}])
|
|
|
|
const pdf = await pdfjsLib.getDocument({ data: pdfData, disableFontFace: true }).promise;
|
|
|
|
const numPages = pdf.numPages
|
|
const pageGap = 40 // Space between pages in pixels
|
|
|
|
// Get all page viewports to calculate total width and height
|
|
const viewports = []
|
|
let totalWidth = 0
|
|
let maxHeight = 0
|
|
|
|
for (let i = 1; i <= numPages; i++) {
|
|
const page = await pdf.getPage(i)
|
|
const viewport = page.getViewport({ scale: 2 })
|
|
viewports.push({ page, viewport })
|
|
totalWidth += viewport.width
|
|
if (i < numPages) {
|
|
totalWidth += pageGap // Add gap between pages
|
|
}
|
|
maxHeight = Math.max(maxHeight, viewport.height)
|
|
}
|
|
|
|
// Create a single canvas to fit all pages horizontally
|
|
const canvas = document.getElementById('pdf')
|
|
canvas.width = totalWidth
|
|
canvas.height = maxHeight
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
ctx.imageSmoothingEnabled = false
|
|
|
|
// Render all pages sequentially, placing them horizontally
|
|
let currentX = 0
|
|
for (const { page, viewport } of viewports) {
|
|
ctx.save()
|
|
ctx.translate(currentX, 0)
|
|
|
|
await page.render({
|
|
canvasContext: ctx,
|
|
viewport
|
|
}).promise
|
|
|
|
ctx.restore()
|
|
currentX += viewport.width + pageGap
|
|
}
|
|
|
|
window.__PDF_RENDERED__ = true
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`);
|
|
}
|