[FEATURE] - An option to print the invoice immediately with window.print()

[dragonman225]

Feature Summary

Offer an option to print the invoice immediately with window.print().

Use Case

• Protect users' privacy: Some people may feel uncomfortable to send sensitive data such as phone numbers, addresses, payment information, order details, etc., to a public server, worrying that the server might log their personal data and potentially leak it.

• Save users' time: window.print() can generate the PDF immediately so users don't have to wait for the server or retry multiple times when the server is busy and often failing.

  • When I was trying the demo, it failed several times with 504 Gateway Timeout error and the following message:

    An error occurred with your deployment
    
    FUNCTION_INVOCATION_TIMEOUT
    
    hkg1::f5s6h-1740397075308-80dc8b2d7cc7
    

• Reduce service providers' hosting costs: When a portion of users generate invoices with the window.print() implementation, the pressure on the server-side implementation is lowered and service providers can save money.

Proposed Solution

The fastest way is to add a button besides existing "Generate PDF" button that calls the following function when clicked.

// Add this function to InvoiceContextProvider in contexts/InvoiceContext.tsx
// This function replicates the behavior of services/invoice/server/generatePdfService.ts
const printPdfImmediatelyAndPrivately = useCallback(async (data: InvoiceType) => {
  const ReactDOMServer = (await import("react-dom/server")).default;

  // Get the selected invoice template
  const templateId = data.details.pdfTemplate;
  const InvoiceTemplate = await getInvoiceTemplate(templateId);

  // Read the HTML template from a React component
  const htmlTemplate = `<link rel="stylesheet" href="${TAILWIND_CDN}">`.concat(ReactDOMServer.renderToStaticMarkup(
    InvoiceTemplate(data)
  ));

  const printWindow = window.open("", "");
  if (printWindow) {
    printWindow.document.open();
    printWindow.document.write(htmlTemplate);
    printWindow.document.close();
    printWindow.onload = () => {
      printWindow.print();
    };
  }
}, []);

But from UX perspective it might be confusing to see both server-side and client-side implementation of the same feature. A more thoughtful change would be

• allowing users to generate invoices with the faster and more privacy-friendly client-side implementation by default to get value immediately and
• rethinking what other unique value which only the server can provide.

Additional Information

Example: A quickly hacked-together solution that replaces the functionality of existing "Generate PDF" button with the window.print() implementation.

dragonman225@45446f7