umwd-components 0.1.762 → 0.1.764

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/src/components/e-commerce/invoice/InvoicePDF.js +1 -1
  2. package/dist/cjs/tsconfig.build.tsbuildinfo +1 -1
  3. package/dist/esm/src/components/e-commerce/invoice/InvoicePDF.js +60 -39
  4. package/dist/esm/tsconfig.build.tsbuildinfo +1 -1
  5. package/dist/esm/types/components/e-commerce/invoice/InvoicePDF.d.ts +6 -0
  6. package/package.json +1 -1
package/dist/esm/src/components/e-commerce/invoice/InvoicePDF.js CHANGED
@@ -6,15 +6,23 @@
6
6
  */
7
7
 
8
8
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
- import { StyleSheet, PDFDownloadLink, PDFViewer, Document, Page, View, Text } from '@react-pdf/renderer';
10
- import { useState, Fragment as Fragment$1 } from 'react';
9
+ import { useState, useEffect, Fragment as Fragment$1 } from 'react';
11
10
  import IconButton from '@mui/material/IconButton';
12
11
  import Dialog from '@mui/material/Dialog';
13
12
  import DialogContent from '@mui/material/DialogContent';
14
13
  import DialogActions from '@mui/material/DialogActions';
15
14
  import Button from '@mui/material/Button';
15
+ import CircularProgress from '@mui/material/CircularProgress';
16
16
  import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
17
17
 
18
+ // Dynamic imports to prevent ESM issues during build
19
+ let PDFRenderer = null;
20
+ const loadPDFRenderer = async () => {
21
+ if (typeof window !== "undefined" && !PDFRenderer) {
22
+ PDFRenderer = await import('@react-pdf/renderer');
23
+ }
24
+ return PDFRenderer;
25
+ };
18
26
  // TODO Think of a proper solution for theming this file for multiple clients
19
27
  // Font.register({
20
28
  // family: "Roboto",
@@ -24,8 +32,8 @@ import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
24
32
  // { src: robotoItalic, fontStyle: "italic" },
25
33
  // ],
26
34
  // });
27
- // Create styles
28
- const styles = StyleSheet.create({
35
+ // Styles will be created when PDF renderer is loaded
36
+ const createStyles = (StyleSheet) => StyleSheet.create({
29
37
  page: {
30
38
  flexDirection: "column",
31
39
  backgroundColor: "#E4E4E4",
@@ -63,56 +71,69 @@ const styles = StyleSheet.create({
63
71
  h3: { fontSize: 16, fontWeight: "bold" },
64
72
  });
65
73
  // Create Document Component
66
- function InvoicePDF({ props }) {
74
+ const InvoicePDF = ({ props }) => {
67
75
  const { invoice } = props;
68
- console.log("invoice from invoicePDF", invoice);
76
+ const [pdfComponents, setPdfComponents] = useState(null);
77
+ const [styles, setStyles] = useState(null);
78
+ useEffect(() => {
79
+ const initializePDF = async () => {
80
+ const renderer = await loadPDFRenderer();
81
+ if (renderer) {
82
+ setPdfComponents(renderer);
83
+ setStyles(createStyles(renderer.StyleSheet));
84
+ }
85
+ };
86
+ initializePDF();
87
+ }, []);
88
+ if (!pdfComponents || !styles) {
89
+ return jsx(CircularProgress, {});
90
+ }
91
+ const { Document, Page, View, Text } = pdfComponents;
69
92
  const { seller_business_credentials, seller_company_address, buyer_company_address, buyer_business_credentials, type, invoice_number, } = invoice;
70
93
  console.log("type", type);
94
+ const renderCreditNote = () => (jsx(Document, { title: `credit_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "CREDIT NOTE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index))), invoice?.admin_items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index)))] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
71
95
  if (type === "credit") {
72
- return (jsx(Document, { title: `credit_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "CREDIT NOTE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => {
73
- return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsxs(View, { style: styles.productRowSection, children: [jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }), " "] }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index));
74
- }), invoice?.admin_items?.map((item, index) => {
75
- return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index));
76
- })] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
96
+ return renderCreditNote();
77
97
  }
78
98
  if (type === "proforma") {
79
- return (jsx(Document, { title: `proforma_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h2, children: "PROFORMA INVOICE" }), jsx(Text, { style: { fontSize: 10, marginTop: 5 }, children: "This is not a final invoice and cannot be used for tax purposes" })] }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => {
80
- return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsxs(View, { style: styles.productRowSection, children: [jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }), " "] }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index));
81
- }), invoice?.admin_items?.map((item, index) => {
82
- return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index));
83
- })] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
84
- }
85
- else {
86
- return (jsx(Document, { title: `invoice_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "INVOICE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => {
87
- return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsxs(View, { style: styles.productRowSection, children: [jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }), " "] }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index));
88
- }), invoice?.admin_items?.map((item, index) => {
89
- return (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index));
90
- })] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
99
+ return (jsx(Document, { title: `proforma_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h2, children: "PROFORMA INVOICE" }), jsx(Text, { style: { fontSize: 10, marginTop: 5 }, children: "This is not a final invoice and cannot be used for tax purposes" })] }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index))), invoice?.admin_items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index)))] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
91
100
  }
92
- }
101
+ // Default invoice
102
+ return (jsx(Document, { title: `invoice_${invoice?.invoice_number}`, children: jsxs(Page, { size: "A4", style: styles.page, children: [jsx(View, { style: styles.header, children: jsx(Text, { style: styles.h1, children: seller_business_credentials?.company_name }) }), jsx(View, { style: styles.section, children: jsx(Text, { style: styles.h2, children: "INVOICE" }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "BILLING DETAILS" }), jsx(Text, { children: buyer_business_credentials?.company_name }), jsxs(Text, { children: [invoice?.buyer_first_name, " ", invoice?.buyer_last_name] }), jsxs(Text, { children: [buyer_company_address?.street, " ", buyer_company_address?.street_number, " ", buyer_company_address?.street_number_addition] }), jsxs(Text, { children: [buyer_company_address?.postal_code, " ", buyer_company_address?.city] })] }), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: styles.h3, children: "FROM" }), jsx(Text, { children: seller_business_credentials?.company_name }), jsxs(Text, { children: [seller_company_address?.street, " ", seller_company_address?.street_number, " ", seller_company_address?.street_number_addition] }), jsxs(Text, { children: [seller_company_address?.postal_code, " ", seller_company_address?.city] }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "CoC Number" }), jsx(Text, { children: seller_business_credentials?.coc_number }), jsx(Text, { style: { fontWeight: "bold", marginTop: 10 }, children: "VAT Number" }), jsx(Text, { children: seller_business_credentials?.vat_number })] })] }) }), jsx(View, { style: styles.section, children: jsxs(View, { style: styles.row, children: [jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice number: " }), jsx(Text, { children: invoice?.invoice_number })] }), invoice?.customer_reference && (jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Your reference: " }), jsx(Text, { children: invoice?.customer_reference })] })), jsxs(View, { style: styles.rowSection, children: [jsx(Text, { style: { fontWeight: "bold" }, children: "Invoice date" }), jsx(Text, { children: invoice?.invoice_date })] })] }) }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "SUMMARY" }), jsxs(View, { style: styles.row, children: [invoice?.admin_items?.length > 0 && (jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Line Item Number" }) })), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Title" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Amount" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT rate" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px", fontWeight: "bold" }, children: "Incl. VAT" }) })] }), invoice?.items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["product_title" in item && item.product_title, "item_description" in item && item.item_description] }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: item.price_excl_vat && item.price_incl_vat && (jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC", " ", (item.price_incl_vat - item.price_excl_vat)?.toFixed(2)] })) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item.price_incl_vat?.toFixed(2)] }) })] }) }, index))), invoice?.admin_items?.map((item, index) => (jsx(Fragment$1, { children: jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.line_item_number }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.description }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontSize: "10px" }, children: item.quantity }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: [item?.price?.vat_rate, " %"] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { style: { fontSize: "10px" }, children: ["\u20AC ", item?.price?.price_incl_vat?.toFixed(2)] }) })] }) }, index)))] }), jsxs(View, { style: styles.section, children: [jsx(Text, { style: styles.h3, children: "TOTALS" }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Excl. VAT" }) }), jsx(View, { style: styles.productRowSection, children: jsx(Text, { style: { fontWeight: "bold" }, children: "Incl. VAT" }) })] }), jsxs(View, { style: styles.row, children: [jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.VAT_total?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_excl_vat?.toFixed(2)] }) }), jsx(View, { style: styles.productRowSection, children: jsxs(Text, { children: ["\u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] })] }), jsx(View, { style: styles.section, children: jsxs(Text, { style: { ...styles.h3, border: "2px solid black", padding: 10 }, children: ["Total Due: \u20AC ", invoice?.total_incl_vat?.toFixed(2)] }) })] }) }));
103
+ };
93
104
  function InvoiceDownloadLink({ invoice }) {
94
- /* const PDFDownloadLink = dynamic(
95
- () => import("@react-pdf/renderer").then((mod) => mod.PDFDownloadLink),
96
- {
97
- ssr: false,
98
- loading: () => <p>Loading...</p>,
99
- }
100
- ); */
105
+ const [pdfComponents, setPdfComponents] = useState(null);
106
+ useEffect(() => {
107
+ const initializePDF = async () => {
108
+ const renderer = await loadPDFRenderer();
109
+ setPdfComponents(renderer);
110
+ };
111
+ initializePDF();
112
+ }, []);
113
+ if (!pdfComponents) {
114
+ return (jsx(IconButton, { disabled: true, children: jsx(CircularProgress, { size: 20 }) }));
115
+ }
116
+ const { PDFDownloadLink } = pdfComponents;
101
117
  return (jsx(PDFDownloadLink, { document: jsx(InvoicePDF, { props: { invoice: invoice } }), fileName: `invoice_${invoice?.invoice_number}`, children: jsx(IconButton, { children: jsx(PictureAsPdfIcon, {}) }) }));
102
118
  }
103
119
  function InvoicePDFViewer({ invoice }) {
104
- /* const PDFViewer = dynamic(
105
- () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer),
106
- {
107
- ssr: false,
108
- loading: () => <p>Loading...</p>,
109
- }
110
- ); */
111
120
  const [open, setOpen] = useState(false);
121
+ const [pdfComponents, setPdfComponents] = useState(null);
122
+ useEffect(() => {
123
+ const initializePDF = async () => {
124
+ const renderer = await loadPDFRenderer();
125
+ setPdfComponents(renderer);
126
+ };
127
+ initializePDF();
128
+ }, []);
129
+ if (!pdfComponents) {
130
+ return (jsx(IconButton, { disabled: true, children: jsx(CircularProgress, { size: 20 }) }));
131
+ }
132
+ const { PDFViewer } = pdfComponents;
112
133
  return (jsxs(Fragment, { children: [jsx(IconButton, { onClick: () => setOpen(true), children: jsx(PictureAsPdfIcon, {}) }), jsxs(Dialog, { open: open, fullWidth: true, maxWidth: "lg", children: [jsx(DialogContent, { children: jsx(PDFViewer, { style: {
113
134
  width: "100%",
114
135
  minHeight: "70vh",
115
136
  }, children: jsx(InvoicePDF, { props: { invoice: invoice } }) }) }), jsx(DialogActions, { children: jsx(Button, { variant: "contained", onClick: () => setOpen(false), children: "Close" }) })] })] }));
116
137
  }
117
138
 
118
- export { InvoiceDownloadLink, InvoicePDFViewer };
139
+ export { InvoiceDownloadLink, InvoicePDFViewer, InvoicePDF as default };